From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- files/pt-br/aprender/como_contribuir/index.html | 90 - .../cascade_and_inheritance/index.html | 345 --- .../aprender/css/construindo_blocos/index.html | 83 - .../construindo_blocos/the_box_model/index.html | 343 --- .../aprender/css/estilizando_texto/index.html | 48 - files/pt-br/aprender/css/index.html | 61 - .../pt-br/aprender/ferramentas_e_teste/index.html | 45 - .../aprender/front-end_web_developer/index.html | 231 -- .../a_web_e_seus_padr\303\265es/index.html" | 164 - .../com_que_seu_site_vai_parecer/index.html | 111 - .../como_a_web_funciona/index.html | 110 - .../css_basico/index.html | 290 -- .../html_basico/index.html | 239 -- .../getting_started_with_the_web/index.html | 65 - .../instalando_programas_basicos/index.html | 80 - .../javascript_basico/index.html | 448 --- .../lidando_com_arquivos/index.html | 115 - .../publicando_seu_site/index.html | 131 - files/pt-br/aprender/html/como-fazer/index.html | 150 - files/pt-br/aprender/html/index.html | 54 - .../criando_hyperlinks/index.html | 324 -- .../introducao_ao_html/debugging_html/index.html | 175 -- .../estrutura_de_documento_e_sites/index.html | 299 -- .../formatacao_avancada_texto/index.html | 481 --- .../fundamentos_textuais_html/index.html | 955 ------ .../introducao_ao_html/getting_started/index.html | 755 ----- .../aprender/html/introducao_ao_html/index.html | 69 - .../index.html | 72 - .../the_head_metadata_in_html/index.html | 284 -- .../adding_vector_graphics_to_the_web/index.html | 352 --- .../images_in_html/index.html | 368 --- .../html/multimedia_and_embedding/index.html | 67 - .../other_embedding_technologies/index.html | 394 --- .../responsive_images/index.html | 259 -- .../video_and_audio_content/index.html | 319 -- files/pt-br/aprender/html/tables/basics/index.html | 559 ---- files/pt-br/aprender/html/tables/index.html | 36 - files/pt-br/aprender/index.html | 129 - .../client-side_storage/index.html | 778 ----- .../javascript/client-side_web_apis/index.html | 52 - .../introdu\303\247\303\243o/index.html" | 274 -- .../build_your_own_function/index.html | 242 -- .../elementos_construtivos/conditionals/index.html | 616 ---- .../c\303\263digo_em_loop/index.html" | 940 ------ .../elementos_construtivos/events/index.html | 582 ---- .../elementos_construtivos/functions/index.html | 394 --- .../image_gallery/index.html | 140 - .../javascript/elementos_construtivos/index.html | 51 - .../return_values/index.html | 168 - files/pt-br/aprender/javascript/howto/index.html | 290 -- files/pt-br/aprender/javascript/index.html | 78 - .../adding_bouncing_balls_features/index.html | 202 -- .../javascript/objetos/b\303\241sico/index.html" | 258 -- .../javascript/objetos/heran\303\247a/index.html" | 402 --- files/pt-br/aprender/javascript/objetos/index.html | 44 - .../aprender/javascript/objetos/json/index.html | 350 --- .../objetos/object-oriented_js/index.html | 275 -- .../objetos/object_building_practice/index.html | 300 -- .../objetos/object_prototypes/index.html | 269 -- .../aprender/learning_and_getting_help/index.html | 315 -- files/pt-br/aprender/release_notes/index.html | 66 - .../cascade_and_inheritance/index.html | 128 + .../learn/css/building_blocks/selectors/index.html | 430 +++ .../learn/css/first_steps/how_css_works/index.html | 126 + .../index.html | 112 + .../index.html | 106 + .../conflicting/learn/css/first_steps/index.html | 98 + .../video_and_audio_content/index.html | 240 ++ .../learn/javascript/objects/index.html | 352 +++ .../mdn/contribute/getting_started/index.html | 134 + files/pt-br/conflicting/mozilla/add-ons/index.html | 263 ++ .../mozilla/firefox/releases/index.html | 428 +++ .../pt-br/conflicting/web/accessibility/index.html | 55 + .../web/api/crypto/getrandomvalues/index.html | 109 + .../pt-br/conflicting/web/api/cryptokey/index.html | 113 + .../index.html | 118 + .../index.html | 111 + .../index.html | 124 + .../web/api/document_object_model/index.html | 89 + .../api/globaleventhandlers/onscroll/index.html | 99 + .../web/api/html_drag_and_drop_api/index.html | 11 + files/pt-br/conflicting/web/api/index.html | 80 + files/pt-br/conflicting/web/api/url/index.html | 101 + .../conflicting/web/api/webrtc_api/index.html | 81 + .../web/api/windoworworkerglobalscope/index.html | 121 + .../index.html | 117 + .../index.html | 134 + .../basic_concepts_of_flexbox/index.html | 328 ++ files/pt-br/conflicting/web/css/cursor/index.html | 9 + files/pt-br/conflicting/web/guide/index.html | 95 + .../pt-br/conflicting/web/guide/mobile/index.html | 17 + files/pt-br/conflicting/web/http/cors/index.html | 213 ++ .../equality_comparisons_and_sameness/index.html | 259 ++ .../reference/global_objects/boolean/index.html | 112 + .../reference/global_objects/function/index.html | 95 + .../global_objects/intl/numberformat/index.html | 126 + .../reference/global_objects/map/index.html | 136 + .../reference/global_objects/number/index.html | 140 + .../reference/global_objects/object/index.html | 227 ++ .../reference/global_objects/promise/index.html | 114 + .../reference/global_objects/set/index.html | 85 + .../reference/global_objects/string/index.html | 177 ++ .../reference/global_objects/weakmap/index.html | 118 + .../web/javascript/reference/operators/index.html | 329 ++ .../reference/operators/spread_syntax/index.html | 201 ++ .../index.html | 251 ++ .../index.html | 559 ++++ .../index.html | 343 +++ .../reference/statements/switch/index.html | 187 ++ .../web/progressive_web_apps/index.html | 68 + files/pt-br/construindo_um_complemento/index.html | 263 -- .../css/usando_caixas_flexiveis_css/index.html | 328 -- files/pt-br/desenvolvimento_web/index.html | 95 - files/pt-br/dez_anos_de_mdn/index.html | 40 - files/pt-br/dom/index.html | 89 - .../pt-br/dom/referencia_do_dom/events/index.html | 82 - .../dom/referencia_do_dom/examples/index.html | 376 --- .../how_to_create_a_dom_tree/index.html | 145 - files/pt-br/dom/referencia_do_dom/index.html | 379 --- .../introdu\303\247\303\243o/index.html" | 251 -- .../whitespace_in_the_dom/index.html | 227 -- .../arrastar_e_soltar_arquivos/index.html | 91 - files/pt-br/dragdrop/drag_and_drop/index.html | 258 -- files/pt-br/dragdrop/index.html | 11 - .../index.html | 113 + .../index.html | 113 - files/pt-br/glossario/404/index.html | 18 - files/pt-br/glossario/502/index.html | 16 - .../glossario/abstra\303\247\303\243o/index.html" | 19 - files/pt-br/glossario/acessibilidade/index.html | 32 - files/pt-br/glossario/adobe_flash/index.html | 20 - files/pt-br/glossario/ajax/index.html | 32 - files/pt-br/glossario/algoritmo/index.html | 10 - files/pt-br/glossario/alpha/index.html | 43 - files/pt-br/glossario/api/index.html | 33 - files/pt-br/glossario/apple_safari/index.html | 27 - files/pt-br/glossario/argument/index.html | 24 - files/pt-br/glossario/arpanet/index.html | 17 - files/pt-br/glossario/array/index.html | 35 - .../glossario/arvore_de_acessibilidade/index.html | 45 - files/pt-br/glossario/ascii/index.html | 18 - files/pt-br/glossario/assincrono/index.html | 23 - files/pt-br/glossario/atributo/index.html | 25 - files/pt-br/glossario/bandwidth/index.html | 12 - files/pt-br/glossario/bigint/index.html | 27 - files/pt-br/glossario/booleano/index.html | 45 - files/pt-br/glossario/cabecalho_http/index.html | 79 - files/pt-br/glossario/cache/index.html | 21 - files/pt-br/glossario/call_stack/index.html | 88 - files/pt-br/glossario/callback_function/index.html | 33 - files/pt-br/glossario/caractere/index.html | 22 - files/pt-br/glossario/caret/index.html | 35 - files/pt-br/glossario/cdn/index.html | 11 - .../pt-br/glossario/character_encoding/index.html | 23 - files/pt-br/glossario/chrome/index.html | 16 - files/pt-br/glossario/class/index.html | 20 - files/pt-br/glossario/cms/index.html | 20 - .../glossario/conteiner_de_alinhamento/index.html | 17 - files/pt-br/glossario/conversao_de_tipo/index.html | 14 - files/pt-br/glossario/cors/index.html | 55 - files/pt-br/glossario/crud/index.html | 17 - files/pt-br/glossario/css/index.html | 48 - files/pt-br/glossario/css_pixel/index.html | 34 - files/pt-br/glossario/css_preprocessor/index.html | 29 - files/pt-br/glossario/css_selector/index.html | 58 - files/pt-br/glossario/cssom/index.html | 24 - .../glossario/declara\303\247\303\243o/index.html" | 27 - .../degrada\303\247\303\243o_graciosa/index.html" | 26 - files/pt-br/glossario/doctype/index.html | 21 - files/pt-br/glossario/dom/index.html | 32 - "files/pt-br/glossario/dom\303\255nio/index.html" | 28 - files/pt-br/glossario/ecma/index.html | 18 - files/pt-br/glossario/elemento/index.html | 21 - files/pt-br/glossario/endereco_ip/index.html | 21 - files/pt-br/glossario/endianness/index.html | 31 - files/pt-br/glossario/entity_header/index.html | 23 - files/pt-br/glossario/escopo/index.html | 18 - files/pt-br/glossario/falsy/index.html | 28 - files/pt-br/glossario/flex/index.html | 44 - .../glossario/forbidden_header_name/index.html | 39 - .../forbidden_response_header_name/index.html | 30 - .../pt-br/glossario/funcao-first-class/index.html | 99 - .../glossario/fun\303\247\303\243o/index.html" | 93 - files/pt-br/glossario/fuzzing/index.html | 19 - files/pt-br/glossario/gecko/index.html | 34 - files/pt-br/glossario/general_header/index.html | 8 - files/pt-br/glossario/global_object/index.html | 14 - files/pt-br/glossario/grade/index.html | 69 - files/pt-br/glossario/grid_areas/index.html | 78 - files/pt-br/glossario/hoisting/index.html | 86 - files/pt-br/glossario/hsts/index.html | 24 - files/pt-br/glossario/html/index.html | 49 - files/pt-br/glossario/http/index.html | 29 - files/pt-br/glossario/http_2/index.html | 22 - files/pt-br/glossario/https/index.html | 19 - files/pt-br/glossario/idempotente/index.html | 51 - files/pt-br/glossario/identificador/index.html | 20 - files/pt-br/glossario/iife/index.html | 48 - files/pt-br/glossario/index.html | 25 - files/pt-br/glossario/indexeddb/index.html | 18 - files/pt-br/glossario/internet/index.html | 23 - files/pt-br/glossario/ipv4/index.html | 20 - files/pt-br/glossario/ipv6/index.html | 21 - files/pt-br/glossario/irc/index.html | 21 - files/pt-br/glossario/iso/index.html | 16 - files/pt-br/glossario/jank/index.html | 10 - files/pt-br/glossario/javascript/index.html | 68 - files/pt-br/glossario/jpeg/index.html | 18 - files/pt-br/glossario/jquery/index.html | 56 - files/pt-br/glossario/key/index.html | 24 - .../index.html" | 24 - .../glossario/marca\303\247\303\243o/index.html" | 53 - files/pt-br/glossario/metadata/index.html | 25 - files/pt-br/glossario/mozilla_firefox/index.html | 29 - files/pt-br/glossario/mutavel/index.html | 44 - files/pt-br/glossario/navegador/index.html | 27 - files/pt-br/glossario/navegador_opera/index.html | 21 - files/pt-br/glossario/node.js/index.html | 27 - .../glossario/nome_de_dom\303\255nio/index.html" | 20 - files/pt-br/glossario/nulo/index.html | 25 - "files/pt-br/glossario/n\303\272mero/index.html" | 29 - files/pt-br/glossario/objeto/index.html | 19 - files/pt-br/glossario/oop/index.html | 17 - files/pt-br/glossario/opengl/index.html | 17 - files/pt-br/glossario/operador/index.html | 23 - files/pt-br/glossario/operando/index.html | 12 - files/pt-br/glossario/origem/index.html | 83 - files/pt-br/glossario/ota/index.html | 21 - files/pt-br/glossario/palavra-chave/index.html | 25 - files/pt-br/glossario/php/index.html | 61 - files/pt-br/glossario/pixel/index.html | 18 - files/pt-br/glossario/polyfill/index.html | 19 - files/pt-br/glossario/port/index.html | 27 - files/pt-br/glossario/prefixos_vendor/index.html | 49 - files/pt-br/glossario/preflight_request/index.html | 40 - files/pt-br/glossario/primitivo/index.html | 53 - .../index.html" | 18 - .../glossario/progressive_web_apps/index.html | 19 - files/pt-br/glossario/property/css/index.html | 40 - files/pt-br/glossario/property/index.html | 11 - .../pt-br/glossario/property/javascript/index.html | 27 - files/pt-br/glossario/protocolo/index.html | 20 - files/pt-br/glossario/prototype/index.html | 16 - files/pt-br/glossario/proxy_server/index.html | 20 - files/pt-br/glossario/pseudo-class/index.html | 19 - files/pt-br/glossario/pseudo-element/index.html | 14 - files/pt-br/glossario/python/index.html | 21 - "files/pt-br/glossario/recurs\303\243o/index.html" | 19 - files/pt-br/glossario/reflow/index.html | 12 - files/pt-br/glossario/request_header/index.html | 41 - .../glossario/responsive_web_design/index.html | 20 - files/pt-br/glossario/rest/index.html | 30 - files/pt-br/glossario/ruby/index.html | 24 - files/pt-br/glossario/sdp/index.html | 38 - files/pt-br/glossario/seguro/index.html | 45 - .../self-executing_anonymous_function/index.html | 8 - files/pt-br/glossario/semantica/index.html | 103 - files/pt-br/glossario/seo/index.html | 43 - files/pt-br/glossario/servidor/index.html | 25 - files/pt-br/glossario/sgml/index.html | 15 - files/pt-br/glossario/sincrono/index.html | 23 - files/pt-br/glossario/sloppy_mode/index.html | 21 - files/pt-br/glossario/stacking_context/index.html | 14 - files/pt-br/glossario/string/index.html | 22 - files/pt-br/glossario/svg/index.html | 50 - files/pt-br/glossario/symbol/index.html | 57 - files/pt-br/glossario/tag/index.html | 27 - files/pt-br/glossario/tcp/index.html | 21 - files/pt-br/glossario/three_js/index.html | 21 - files/pt-br/glossario/tls/index.html | 27 - .../glossario/topico_de_alinhamento/index.html | 38 - .../index.html" | 21 - files/pt-br/glossario/truthy/index.html | 34 - files/pt-br/glossario/undefined/index.html | 20 - files/pt-br/glossario/uri/index.html | 17 - files/pt-br/glossario/url/index.html | 27 - files/pt-br/glossario/utf-8/index.html | 17 - files/pt-br/glossario/ux/index.html | 22 - files/pt-br/glossario/valor/index.html | 16 - "files/pt-br/glossario/vari\303\241vel/index.html" | 24 - files/pt-br/glossario/viewport/index.html | 32 - files/pt-br/glossario/w3c/index.html | 26 - files/pt-br/glossario/webp/index.html | 14 - files/pt-br/glossario/websockets/index.html | 35 - files/pt-br/glossario/whatwg/index.html | 31 - files/pt-br/glossario/wrapper/index.html | 18 - .../glossario/xhr_(xmlhttprequest)/index.html | 22 - files/pt-br/glossario/xml/index.html | 17 - files/pt-br/glossary/404/index.html | 18 + files/pt-br/glossary/502/index.html | 16 + files/pt-br/glossary/abstraction/index.html | 19 + files/pt-br/glossary/accessibility/index.html | 32 + files/pt-br/glossary/accessibility_tree/index.html | 45 + files/pt-br/glossary/adobe_flash/index.html | 20 + files/pt-br/glossary/ajax/index.html | 32 + files/pt-br/glossary/algorithm/index.html | 10 + .../pt-br/glossary/alignment_container/index.html | 17 + files/pt-br/glossary/alignment_subject/index.html | 38 + files/pt-br/glossary/alpha/index.html | 43 + files/pt-br/glossary/api/index.html | 33 + files/pt-br/glossary/apple_safari/index.html | 27 + files/pt-br/glossary/argument/index.html | 24 + files/pt-br/glossary/arpanet/index.html | 17 + files/pt-br/glossary/array/index.html | 35 + files/pt-br/glossary/ascii/index.html | 18 + files/pt-br/glossary/asynchronous/index.html | 23 + files/pt-br/glossary/attribute/index.html | 25 + files/pt-br/glossary/bandwidth/index.html | 12 + files/pt-br/glossary/bigint/index.html | 27 + files/pt-br/glossary/boolean/index.html | 45 + files/pt-br/glossary/browser/index.html | 27 + files/pt-br/glossary/cache/index.html | 21 + files/pt-br/glossary/call_stack/index.html | 88 + files/pt-br/glossary/callback_function/index.html | 33 + files/pt-br/glossary/caret/index.html | 35 + files/pt-br/glossary/cdn/index.html | 11 + files/pt-br/glossary/character/index.html | 22 + files/pt-br/glossary/character_encoding/index.html | 23 + files/pt-br/glossary/chrome/index.html | 16 + files/pt-br/glossary/class/index.html | 20 + files/pt-br/glossary/cms/index.html | 20 + .../pt-br/glossary/computer_programming/index.html | 18 + files/pt-br/glossary/cors/index.html | 55 + files/pt-br/glossary/crud/index.html | 17 + files/pt-br/glossary/css/index.html | 48 + files/pt-br/glossary/css_pixel/index.html | 34 + files/pt-br/glossary/css_preprocessor/index.html | 29 + files/pt-br/glossary/css_selector/index.html | 58 + files/pt-br/glossary/cssom/index.html | 24 + files/pt-br/glossary/doctype/index.html | 21 + files/pt-br/glossary/dom/index.html | 32 + files/pt-br/glossary/domain/index.html | 28 + files/pt-br/glossary/domain_name/index.html | 20 + .../dynamic_programming_language/index.html | 24 + files/pt-br/glossary/ecma/index.html | 18 + files/pt-br/glossary/element/index.html | 21 + files/pt-br/glossary/endianness/index.html | 31 + files/pt-br/glossary/entity_header/index.html | 23 + files/pt-br/glossary/falsy/index.html | 28 + .../pt-br/glossary/first-class_function/index.html | 99 + files/pt-br/glossary/flex/index.html | 44 + .../glossary/forbidden_header_name/index.html | 39 + .../forbidden_response_header_name/index.html | 30 + files/pt-br/glossary/function/index.html | 93 + files/pt-br/glossary/fuzzing/index.html | 19 + files/pt-br/glossary/gecko/index.html | 34 + files/pt-br/glossary/general_header/index.html | 8 + files/pt-br/glossary/global_object/index.html | 14 + .../pt-br/glossary/graceful_degradation/index.html | 26 + files/pt-br/glossary/grid/index.html | 69 + files/pt-br/glossary/grid_areas/index.html | 78 + files/pt-br/glossary/hoisting/index.html | 86 + files/pt-br/glossary/hsts/index.html | 24 + files/pt-br/glossary/html/index.html | 49 + files/pt-br/glossary/http/index.html | 29 + files/pt-br/glossary/http_2/index.html | 22 + files/pt-br/glossary/http_header/index.html | 79 + files/pt-br/glossary/https/index.html | 19 + files/pt-br/glossary/idempotent/index.html | 51 + files/pt-br/glossary/identifier/index.html | 20 + files/pt-br/glossary/iife/index.html | 48 + files/pt-br/glossary/index.html | 25 + files/pt-br/glossary/indexeddb/index.html | 18 + files/pt-br/glossary/internet/index.html | 23 + files/pt-br/glossary/ip_address/index.html | 21 + files/pt-br/glossary/ipv4/index.html | 20 + files/pt-br/glossary/ipv6/index.html | 21 + files/pt-br/glossary/irc/index.html | 21 + files/pt-br/glossary/iso/index.html | 16 + files/pt-br/glossary/jank/index.html | 10 + files/pt-br/glossary/javascript/index.html | 68 + files/pt-br/glossary/jpeg/index.html | 18 + files/pt-br/glossary/jquery/index.html | 56 + files/pt-br/glossary/json/index.html | 134 + files/pt-br/glossary/key/index.html | 24 + files/pt-br/glossary/keyword/index.html | 25 + files/pt-br/glossary/localization/index.html | 62 + files/pt-br/glossary/markup/index.html | 53 + files/pt-br/glossary/metadata/index.html | 25 + files/pt-br/glossary/mozilla_firefox/index.html | 29 + files/pt-br/glossary/mutable/index.html | 44 + files/pt-br/glossary/node.js/index.html | 27 + files/pt-br/glossary/null/index.html | 25 + files/pt-br/glossary/number/index.html | 29 + files/pt-br/glossary/object/index.html | 19 + files/pt-br/glossary/oop/index.html | 17 + files/pt-br/glossary/opengl/index.html | 17 + files/pt-br/glossary/opera_browser/index.html | 21 + files/pt-br/glossary/operand/index.html | 12 + files/pt-br/glossary/operator/index.html | 23 + files/pt-br/glossary/origin/index.html | 83 + files/pt-br/glossary/ota/index.html | 21 + files/pt-br/glossary/php/index.html | 61 + files/pt-br/glossary/pixel/index.html | 18 + files/pt-br/glossary/polyfill/index.html | 19 + files/pt-br/glossary/port/index.html | 27 + files/pt-br/glossary/preflight_request/index.html | 40 + files/pt-br/glossary/primitive/index.html | 53 + .../pt-br/glossary/progressive_web_apps/index.html | 19 + files/pt-br/glossary/property/css/index.html | 40 + files/pt-br/glossary/property/index.html | 11 + .../pt-br/glossary/property/javascript/index.html | 27 + files/pt-br/glossary/protocol/index.html | 20 + files/pt-br/glossary/prototype/index.html | 16 + files/pt-br/glossary/proxy_server/index.html | 20 + files/pt-br/glossary/pseudo-class/index.html | 19 + files/pt-br/glossary/pseudo-element/index.html | 14 + files/pt-br/glossary/python/index.html | 21 + files/pt-br/glossary/recursion/index.html | 19 + files/pt-br/glossary/reflow/index.html | 12 + files/pt-br/glossary/request_header/index.html | 41 + .../glossary/responsive_web_design/index.html | 20 + files/pt-br/glossary/rest/index.html | 30 + files/pt-br/glossary/ruby/index.html | 24 + files/pt-br/glossary/safe/index.html | 45 + files/pt-br/glossary/scope/index.html | 18 + files/pt-br/glossary/sdp/index.html | 38 + .../self-executing_anonymous_function/index.html | 8 + files/pt-br/glossary/semantics/index.html | 103 + files/pt-br/glossary/seo/index.html | 43 + files/pt-br/glossary/server/index.html | 25 + files/pt-br/glossary/sgml/index.html | 15 + files/pt-br/glossary/sloppy_mode/index.html | 21 + .../pt-br/glossary/speculative_parsing/index.html | 23 + files/pt-br/glossary/stacking_context/index.html | 14 + files/pt-br/glossary/statement/index.html | 27 + files/pt-br/glossary/string/index.html | 22 + files/pt-br/glossary/svg/index.html | 50 + files/pt-br/glossary/symbol/index.html | 57 + files/pt-br/glossary/synchronous/index.html | 23 + files/pt-br/glossary/tag/index.html | 27 + files/pt-br/glossary/tcp/index.html | 21 + files/pt-br/glossary/three_js/index.html | 21 + files/pt-br/glossary/tls/index.html | 27 + files/pt-br/glossary/truthy/index.html | 34 + files/pt-br/glossary/type_conversion/index.html | 14 + files/pt-br/glossary/undefined/index.html | 20 + files/pt-br/glossary/uri/index.html | 17 + files/pt-br/glossary/url/index.html | 27 + files/pt-br/glossary/utf-8/index.html | 17 + files/pt-br/glossary/ux/index.html | 22 + files/pt-br/glossary/value/index.html | 16 + files/pt-br/glossary/variable/index.html | 24 + files/pt-br/glossary/vendor_prefix/index.html | 49 + files/pt-br/glossary/viewport/index.html | 32 + files/pt-br/glossary/w3c/index.html | 26 + files/pt-br/glossary/webp/index.html | 14 + files/pt-br/glossary/websockets/index.html | 35 + files/pt-br/glossary/whatwg/index.html | 31 + files/pt-br/glossary/wrapper/index.html | 18 + .../pt-br/glossary/xhr_(xmlhttprequest)/index.html | 22 + files/pt-br/glossary/xhtml/index.html | 86 + files/pt-br/glossary/xml/index.html | 17 + files/pt-br/hello_world_rust/index.html | 191 -- files/pt-br/html/attributes/index.html | 578 ---- files/pt-br/html/forms_in_html/index.html | 112 - files/pt-br/instalando_rust/index.html | 132 - files/pt-br/json/index.html | 134 - .../accessibility_troubleshooting/index.html | 111 + .../acessibilidade_problemas/index.html | 111 - .../accessibility/css_and_javascript/index.html | 361 +++ .../accessibility/css_e_javascript/index.html | 361 --- .../como_a_internet_funciona/index.html | 102 - .../index.html | 112 - .../index.html | 61 - .../index.html | 221 -- .../index.html | 61 + .../how_does_the_internet_work/index.html | 102 + .../how_much_does_it_cost/index.html | 155 + .../o_que_e_um_web_server/index.html | 121 - .../o_que_s\303\243o_hyperlinks/index.html" | 91 - .../pensando_antes_de_codificar/index.html | 178 -- .../quanto_custa_fazer_algo_web/index.html | 155 - .../que_software_eu_preciso/index.html | 222 -- .../set_up_a_local_testing_server/index.html | 112 + .../thinking_before_coding/index.html | 178 ++ .../what_are_browser_developer_tools/index.html | 221 ++ .../what_are_hyperlinks/index.html | 91 + .../what_is_a_web_server/index.html | 121 + .../what_software_do_i_need/index.html | 222 ++ .../cascade_and_inheritance/index.html | 345 +++ files/pt-br/learn/css/building_blocks/index.html | 83 + .../css/building_blocks/the_box_model/index.html | 343 +++ .../learn/css/css_layout/fluxo_normal/index.html | 95 - .../css/css_layout/intro_leiaute_css/index.html | 707 ----- .../learn/css/css_layout/introduction/index.html | 707 +++++ .../css_layout/layout_de_varias_colunas/index.html | 414 --- .../css_layout/multiple-column_layout/index.html | 414 +++ .../learn/css/css_layout/normal_flow/index.html | 95 + .../first_steps/como_css_e_estruturado/index.html | 502 --- .../css/first_steps/getting_started/index.html | 265 ++ .../first_steps/how_css_is_structured/index.html | 502 +++ .../learn/css/first_steps/iniciando/index.html | 265 -- .../learn/css/first_steps/o_que_e_css/index.html | 127 - .../learn/css/first_steps/what_is_css/index.html | 127 + files/pt-br/learn/css/howto/css_faq/index.html | 245 ++ .../css/howto/css_perguntas_frequentes/index.html | 245 -- files/pt-br/learn/css/index.html | 61 + files/pt-br/learn/css/styling_text/index.html | 48 + .../css/styling_text/styling_lists/index.html | 272 ++ .../forms/basic_native_form_controls/index.html | 701 +++++ files/pt-br/learn/forms/form_validation/index.html | 813 +++++ .../how_to_build_custom_form_controls/index.html | 786 +++++ .../forms/how_to_structure_a_web_form/index.html | 304 ++ files/pt-br/learn/forms/index.html | 79 + .../sending_and_retrieving_form_data/index.html | 251 ++ files/pt-br/learn/forms/your_first_form/index.html | 270 ++ .../pt-br/learn/front-end_web_developer/index.html | 231 ++ .../css_basics/index.html | 290 ++ .../dealing_with_files/index.html | 115 + .../how_the_web_works/index.html | 110 + .../html_basics/index.html | 239 ++ .../learn/getting_started_with_the_web/index.html | 65 + .../installing_basic_software/index.html | 80 + .../javascript_basics/index.html | 448 +++ .../publishing_your_website/index.html | 131 + .../the_web_and_web_standards/index.html | 164 + .../what_will_your_website_look_like/index.html | 111 + .../author_fast-loading_html_pages/index.html | 135 + files/pt-br/learn/html/howto/index.html | 150 + .../html/howto/use_data_attributes/index.html | 72 + files/pt-br/learn/html/index.html | 54 + .../advanced_text_formatting/index.html | 481 +++ .../creating_hyperlinks/index.html | 324 ++ .../introduction_to_html/debugging_html/index.html | 175 ++ .../document_and_website_structure/index.html | 299 ++ .../getting_started/index.html | 755 +++++ .../html_text_fundamentals/index.html | 955 ++++++ .../learn/html/introduction_to_html/index.html | 69 + .../index.html | 72 + .../the_head_metadata_in_html/index.html | 284 ++ .../adding_vector_graphics_to_the_web/index.html | 352 +++ .../images_in_html/index.html | 368 +++ .../learn/html/multimedia_and_embedding/index.html | 67 + .../other_embedding_technologies/index.html | 394 +++ .../responsive_images/index.html | 259 ++ .../video_and_audio_content/index.html | 319 ++ files/pt-br/learn/html/tables/basics/index.html | 559 ++++ files/pt-br/learn/html/tables/index.html | 36 + files/pt-br/learn/index.html | 129 + .../choosing_the_right_approach/index.html | 523 ++++ .../javascript/asynchronous/conceitos/index.html | 155 - .../javascript/asynchronous/concepts/index.html | 155 + .../escolhendo_abordagem_correta/index.html | 523 ---- .../javascript/asynchronous/introducing/index.html | 283 ++ .../introdu\303\247\303\243o/index.html" | 283 -- .../build_your_own_function/index.html | 242 ++ .../building_blocks/conditionals/index.html | 616 ++++ .../javascript/building_blocks/events/index.html | 582 ++++ .../building_blocks/functions/index.html | 394 +++ .../building_blocks/image_gallery/index.html | 140 + .../learn/javascript/building_blocks/index.html | 51 + .../building_blocks/looping_code/index.html | 940 ++++++ .../building_blocks/return_values/index.html | 168 + .../client-side_storage/index.html | 778 +++++ .../javascript/client-side_web_apis/index.html | 52 + .../client-side_web_apis/introduction/index.html | 274 ++ .../manipulating_documents/index.html | 140 + .../gerador_de_historias_bobas/index.html | 123 - .../javascript/first_steps/matematica/index.html | 418 --- .../learn/javascript/first_steps/math/index.html | 418 +++ .../first_steps/o_que_e_javascript/index.html | 435 --- .../first_steps/silly_story_generator/index.html | 123 + .../test_your_skills_colon__variables/index.html | 85 + .../index.html | 85 - .../javascript/first_steps/variables/index.html | 332 ++ .../first_steps/vari\303\241veis/index.html" | 332 -- .../first_steps/what_is_javascript/index.html | 435 +++ files/pt-br/learn/javascript/howto/index.html | 290 ++ files/pt-br/learn/javascript/index.html | 78 + .../adding_bouncing_balls_features/index.html | 202 ++ .../learn/javascript/objects/basics/index.html | 258 ++ files/pt-br/learn/javascript/objects/index.html | 44 + .../javascript/objects/inheritance/index.html | 402 +++ .../pt-br/learn/javascript/objects/json/index.html | 350 +++ .../objects/object-oriented_js/index.html | 275 ++ .../objects/object_building_practice/index.html | 300 ++ .../objects/object_prototypes/index.html | 269 ++ .../learn/learning_and_getting_help/index.html | 315 ++ files/pt-br/learn/release_notes/index.html | 66 + .../django/ambiente_de_desenvolvimento/index.html | 431 --- .../learn/server-side/django/deployment/index.html | 692 +++++ .../django/development_environment/index.html | 431 +++ .../learn/server-side/django/hospedagem/index.html | 692 ----- .../server-side/django/introduction/index.html | 346 +++ .../django/introdu\303\247\303\243o/index.html" | 346 --- .../learn/server-side/django/sessions/index.html | 205 ++ .../server-side/django/sess\303\265es/index.html" | 205 -- .../tutorial_local_library_website/index.html | 98 + .../tutorial_website_biblioteca_local/index.html | 98 - .../ambiente_de_desenvolvimento/index.html | 387 --- .../development_environment/index.html | 387 +++ .../express_nodejs/introduction/index.html | 519 ++++ .../introdu\303\247\303\243o/index.html" | 519 ---- .../first_steps/introduction/index.html | 237 ++ .../introdu\303\247\303\243o/index.html" | 237 -- .../first_steps/seguranca_site/index.html | 175 -- .../first_steps/website_security/index.html | 175 ++ .../comecando_com_react/index.html | 461 --- .../react_getting_started/index.html | 461 +++ .../vue_getting_started/index.html | 281 ++ .../vue_iniciando/index.html | 281 -- files/pt-br/learn/tools_and_testing/index.html | 45 + "files/pt-br/localiza\303\247\303\243o/index.html" | 62 - files/pt-br/mask/index.html | 150 - files/pt-br/mdn/at_ten/index.html | 40 + files/pt-br/mdn/comunidade/index.html | 42 - .../trabalhando_em_comunidade/index.html | 100 - .../mdn/comunidade/whats_happening/index.html | 37 - .../contribute/collaboration_tactics/index.html | 65 - .../criando_e_editando_paginas/index.html | 147 - .../como-marcar-as-paginas-corretamente/index.html | 394 --- .../index.html | 43 - .../distant_example/index.html | 72 - .../index.html | 185 -- .../guia/create_an_mdn_account/index.html | 43 - .../guia/do_a_technical_review/index.html | 52 - .../guia/do_an_editorial_review/index.html | 55 - .../index.html | 114 - files/pt-br/mdn/contribute/guia/index.html | 8 - .../guia/set_the_summary_for_a_page/index.html | 61 - .../guia/tag_javascript_pages/index.html | 84 - .../convert_code_samples_to_be_live/index.html | 43 + .../distant_example/index.html | 72 + .../index.html | 185 ++ .../howto/create_and_edit_pages/index.html | 147 + files/pt-br/mdn/contribute/howto/index.html | 8 + files/pt-br/mdn/contribute/howto/tag/index.html | 394 +++ files/pt-br/mdn/contribute/processes/index.html | 6 + files/pt-br/mdn/contribute/processos/index.html | 6 - files/pt-br/mdn/editor/basics/index.html | 65 - files/pt-br/mdn/editor/index.html | 10 - files/pt-br/mdn/guidelines/style_guide/index.html | 571 ---- .../mdn/guidelines/writing_style_guide/index.html | 571 ++++ files/pt-br/mdn/kuma/index.html | 61 - files/pt-br/mdn/paineis/index.html | 17 - .../index.html | 63 - .../tools/kumascript/troubleshooting/index.html | 63 + files/pt-br/mdn/tools/page_regeneration/index.html | 32 - files/pt-br/mdn/yari/index.html | 61 + .../anatomia_de_uma_webextension/index.html | 115 - .../anatomy_of_a_webextension/index.html | 115 + .../add-ons/webextensions/api/tema/index.html | 55 - .../add-ons/webextensions/api/theme/index.html | 55 + .../empacotando_e_instalando/index.html | 95 - .../manifest.json/permissions/index.html | 184 ++ .../manifest.json/permiss\303\265es/index.html" | 184 -- .../webextensions/o_que_vem_a_seguir_/index.html | 56 - .../add-ons/webextensions/passo-a-passo/index.html | 306 -- .../webextensions/pre-requisitos/index.html | 23 - .../add-ons/webextensions/prerequisites/index.html | 23 + .../sua_primeira_webextension/index.html | 150 - .../user_interface/context_menu_items/index.html | 58 + .../itens_do_menu_de_contexto/index.html | 58 - .../add-ons/webextensions/what_next_/index.html | 56 + .../your_first_webextension/index.html | 150 + .../your_second_webextension/index.html | 306 ++ .../developer_guide/codigo_fonte/index.html | 70 - .../mozilla/developer_guide/source_code/index.html | 70 + .../firefox/experimental_features/index.html | 469 +++ .../firefox/novas_funcionalidades/index.html | 469 --- .../firefox/releases/3/full_page_zoom/index.html | 45 + .../3/zoom_de_p\303\241gina_inteira/index.html" | 45 - .../index.html" | 21 + files/pt-br/orphaned/hello_world_rust/index.html | 191 ++ files/pt-br/orphaned/instalando_rust/index.html | 132 + .../orphaned/learn/how_to_contribute/index.html | 90 + .../learn/html/forms/html5_updates/index.html | 112 + files/pt-br/orphaned/mdn/community/index.html | 42 + .../mdn/community/whats_happening/index.html | 37 + .../mdn/community/working_in_community/index.html | 100 + .../howto/create_an_mdn_account/index.html | 43 + .../howto/do_a_technical_review/index.html | 52 + .../howto/do_an_editorial_review/index.html | 55 + .../howto/set_the_summary_for_a_page/index.html | 61 + .../howto/tag_javascript_pages/index.html | 84 + .../index.html | 114 + .../cross-team_collaboration_tactics/index.html | 65 + files/pt-br/orphaned/mdn/dashboards/index.html | 17 + files/pt-br/orphaned/mdn/editor/basics/index.html | 65 + files/pt-br/orphaned/mdn/editor/index.html | 10 + .../mdn/tools/page_regeneration/index.html | 32 + .../temporary_installation_in_firefox/index.html | 95 + .../tools/add-ons/dom_inspector/index.html | 81 + files/pt-br/orphaned/tools/add-ons/index.html | 21 + files/pt-br/orphaned/tools/css_coverage/index.html | 136 + .../disable_breakpoints/index.html | 19 + .../tools/debugger_(before_firefox_52)/index.html | 58 + .../jaws_issues_with_firefox/index.html | 11 + .../index.html" | 55 + .../index.html" | 20 + .../orphaned/web/html/element/command/index.html | 129 + files/pt-br/orphaned/web/html/favicon/index.html | 32 + .../cole\303\247\303\265es_chaveadas/index.html" | 149 + .../javascript/guide/sintaxe_e_tipos/index.html | 583 ++++ .../global_objects/array/prototype/index.html | 206 ++ .../global_objects/bigint/prototype/index.html | 61 + .../information_security_basics/index.html | 32 + .../projeto_colon_como_ajudar_com_mdn/index.html | 134 - .../index.html | 416 --- .../advanced_example/index.html | 100 - .../index.html | 24 - .../tools/add-ons/dom_inspector_pt-br/index.html | 81 - files/pt-br/tools/add-ons/index.html | 21 - .../pt-br/tools/atua\303\247\303\243o/index.html" | 380 --- files/pt-br/tools/css_coverage/index.html | 136 - .../index.html | 60 - .../how_to/set_watch_expressions/index.html | 60 + files/pt-br/tools/debugger/index.html | 448 +++ .../pt-br/tools/debugger/set_a_logpoint/index.html | 53 + .../disable_breakpoints/index.html | 19 - .../tools/debugger_(before_firefox_52)/index.html | 58 - files/pt-br/tools/depurador/index.html | 448 --- .../tools/depurador/set_a_logpoint/index.html | 53 - .../depura\303\247\303\243o_remota/index.html" | 31 - files/pt-br/tools/editor_de_estilos/index.html | 88 - .../tools/firefox_os_1.1_simulator/index.html | 359 +++ .../tools/inspetor_de_armazenamento/index.html | 137 - .../tools/measure_a_portion_of_the_page/index.html | 38 + .../tools/medir_uma_porcao_da_pagina/index.html | 38 - files/pt-br/tools/modo_design_adaptavel/index.html | 121 - files/pt-br/tools/notas_de_lancamento/index.html | 428 --- .../how_to/examinando_eventos_escuta/index.html | 26 - .../how_to/examine_event_listeners/index.html | 26 + .../trabalho_com_anima\303\247oes/index.html" | 175 -- .../how_to/work_with_animations/index.html | 175 ++ files/pt-br/tools/performance/index.html | 380 +++ files/pt-br/tools/remote_debugging/index.html | 31 + .../pt-br/tools/responsive_design_mode/index.html | 121 + .../tools/simulador_firefox_os_1.1/index.html | 359 --- files/pt-br/tools/storage_inspector/index.html | 137 + files/pt-br/tools/style_editor/index.html | 88 + .../web_console/opening_the_web_console/index.html | 63 - files/pt-br/tools/web_console/ui_tour/index.html | 63 + files/pt-br/using_geolocation/index.html | 227 -- .../index.html | 234 ++ .../index.html | 35 + .../usando_o_atributo_aria-labelledby/index.html | 158 - .../usando_o_atributo_aria-required/index.html | 83 - .../usando_o_slider_role/index.html | 125 - .../using_the_alert_role/index.html | 145 + .../using_the_aria-labelledby_attribute/index.html | 158 + .../using_the_aria-required_attribute/index.html | 83 + .../using_the_slider_role/index.html | 125 + .../utilizando_o_alert_role/index.html | 145 - .../aria/forms/basic_form_hints/index.html | 118 + .../forms/dicas_b\303\241sicas_de_form/index.html" | 118 - .../index.html | 35 - .../accessibility/aria/widgets/overview/index.html | 72 + .../aria/widgets/vis\303\243o_geral/index.html" | 72 - files/pt-br/web/accessibility/index.html | 52 + .../mobile_accessibility_checklist/index.html | 100 + .../accessibility/understanding_wcag/index.html | 57 + .../understanding_wcag/keyboard/index.html | 87 + .../index.html | 100 - .../index.html | 234 -- .../acessibilidade/desenvolvimento_web/index.html | 55 - .../web/acessibilidade/entendendo_wcag/index.html | 57 - .../entendendo_wcag/keyboard/index.html | 87 - files/pt-br/web/acessibilidade/index.html | 52 - .../problemas_com_jaws_no_firefox/index.html | 11 - files/pt-br/web/api/api_de_desempenho/index.html | 138 - .../web/api/api_push/best_practices/index.html | 73 - files/pt-br/web/api/api_push/index.html | 172 -- files/pt-br/web/api/api_web_audio/index.html | 480 --- .../api_web_audio/sintetizador_simples/index.html | 579 ---- .../web/api/audiocontext/currenttime/index.html | 114 - .../api/baseaudiocontext/currenttime/index.html | 114 + files/pt-br/web/api/battery_status_api/index.html | 58 + .../ondischargingtimechange/index.html | 35 + .../ondischargintimechange/index.html | 35 - .../api/canvas_api/a_basic_ray-caster/index.html | 76 + files/pt-br/web/api/canvas_api/index.html | 134 + .../tutorial/advanced_animations/index.html | 386 +++ .../tutorial/applying_styles_and_colors/index.html | 725 +++++ .../tutorial/basic_animations/index.html | 331 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 153 + .../tutorial/compositing/example/index.html | 294 ++ .../api/canvas_api/tutorial/compositing/index.html | 112 + .../canvas_api/tutorial/drawing_shapes/index.html | 581 ++++ .../canvas_api/tutorial/drawing_text/index.html | 169 + .../web/api/canvas_api/tutorial/finale/index.html | 49 + files/pt-br/web/api/canvas_api/tutorial/index.html | 56 + .../tutorial/optimizing_canvas/index.html | 115 + .../canvas_api/tutorial/using_images/index.html | 333 ++ .../web/api/crypto/getrandomvalues/index.html | 116 + files/pt-br/web/api/cryptokey/algorithm/index.html | 113 - .../pt-br/web/api/cryptokey/extractable/index.html | 111 - files/pt-br/web/api/cryptokey/type/index.html | 118 - files/pt-br/web/api/cryptokey/usages/index.html | 124 - files/pt-br/web/api/deviceacceleration/index.html | 43 - .../api/devicemotioneventacceleration/index.html | 43 + .../api/devicemotioneventrotationrate/index.html | 93 + files/pt-br/web/api/devicerotationrate/index.html | 93 - .../web/api/document/activeelement/index.html | 165 - .../web/api/document/elementfrompoint/index.html | 133 - .../web/api/document/elementoregistrado/index.html | 132 - .../pt-br/web/api/document/getselection/index.html | 9 - .../api/document/readystatechange_event/index.html | 83 + .../web/api/document/registerelement/index.html | 132 + .../api/document_object_model/events/index.html | 82 + .../api/document_object_model/examples/index.html | 376 +++ .../how_to_create_a_dom_tree/index.html | 145 + .../pt-br/web/api/document_object_model/index.html | 379 +++ .../document_object_model/introduction/index.html | 251 ++ .../document_object_model/whitespace/index.html | 227 ++ .../documentorshadowroot/activeelement/index.html | 165 + .../elementfrompoint/index.html | 133 + .../documentorshadowroot/getselection/index.html | 9 + files/pt-br/web/api/element/accesskey/index.html | 19 - .../web/api/element/addeventlistener/index.html | 322 -- files/pt-br/web/api/element/blur_event/index.html | 154 + files/pt-br/web/api/element/focus_event/index.html | 137 + .../pt-br/web/api/element/focusin_event/index.html | 125 + .../web/api/element/focusout_event/index.html | 125 + files/pt-br/web/api/element/name/index.html | 80 - .../comparativo_entre_event_targets/index.html | 167 - .../event/comparison_of_event_targets/index.html | 167 + .../api/eventtarget/addeventlistener/index.html | 322 ++ .../fetch_api/cross-global_fetch_usage/index.html | 35 + .../fetch_api/uso_de_busca_cross-global/index.html | 35 - files/pt-br/web/api/geolocation_api/index.html | 227 ++ files/pt-br/web/api/history_api/example/index.html | 418 +++ files/pt-br/web/api/history_api/exemplo/index.html | 418 --- .../file_drag_and_drop/index.html | 91 + .../web/api/html_drag_and_drop_api/index.html | 258 ++ .../web/api/htmlcontentelement/select/index.html | 98 + .../web/api/htmlcontentelement/seletor/index.html | 98 - .../pt-br/web/api/htmlelement/accesskey/index.html | 19 + files/pt-br/web/api/htmlelement/blur/index.html | 89 - files/pt-br/web/api/htmlelement/dataset/index.html | 97 - files/pt-br/web/api/htmlelement/focus/index.html | 62 - .../pt-br/web/api/htmlelement/innertext/index.html | 86 + .../web/api/htmlelement/input_event/index.html | 248 ++ .../api/htmlmediaelement/abort_event/index.html | 70 + .../web/api/htmlorforeignelement/blur/index.html | 89 + .../api/htmlorforeignelement/dataset/index.html | 97 + .../web/api/htmlorforeignelement/focus/index.html | 62 + .../api/indexeddb_api/usando_indexeddb/index.html | 1281 -------- .../api/indexeddb_api/using_indexeddb/index.html | 1281 ++++++++ .../web/api/network_information_api/index.html | 56 + .../index.html" | 55 - files/pt-br/web/api/node/innertext/index.html | 86 - files/pt-br/web/api/notificacoes/index.html | 217 -- files/pt-br/web/api/notification/index.html | 217 ++ files/pt-br/web/api/performance_api/index.html | 138 + .../web/api/push_api/best_practices/index.html | 73 + files/pt-br/web/api/push_api/index.html | 172 ++ .../api/randomsource/getrandomvalues/index.html | 116 - files/pt-br/web/api/randomsource/index.html | 109 - files/pt-br/web/api/selection/index.html | 206 ++ .../web/api/sele\303\247\303\243o/index.html" | 206 -- .../api/svgaelement/svgalement.target/index.html | 106 - files/pt-br/web/api/svgaelement/target/index.html | 106 + files/pt-br/web/api/touch_events/index.html | 353 +++ .../usando_a_web_animations_api/index.html | 358 --- .../using_the_web_animations_api/index.html | 358 +++ files/pt-br/web/api/web_audio_api/index.html | 480 +++ .../web/api/web_audio_api/simple_synth/index.html | 579 ++++ files/pt-br/web/api/web_storage_api/index.html | 139 + .../using_the_web_storage_api/index.html | 267 ++ .../pt-br/web/api/web_storage_api_pt_br/index.html | 139 - .../using_the_web_storage_api/index.html | 267 -- .../index.html | 226 ++ .../index.html | 226 -- .../simple_rtcdatachannel_sample/index.html | 272 ++ .../simples_rtcdatachannel_amostra/index.html | 272 -- files/pt-br/web/api/websockets_api/index.html | 178 ++ .../index.html | 182 ++ .../writing_websocket_server/index.html | 237 ++ .../writing_websocket_servers/index.html | 263 ++ .../web/api/window/beforeunload_event/index.html | 106 + .../api/window/domcontentloaded_event/index.html | 177 ++ files/pt-br/web/api/window/load_event/index.html | 89 + files/pt-br/web/api/window/localstorage/index.html | 123 + files/pt-br/web/api/window/onscroll/index.html | 99 - files/pt-br/web/api/window/url/index.html | 101 - .../web/api/window/window.localstorage/index.html | 123 - files/pt-br/web/api/windowbase64/atob/index.html | 72 - files/pt-br/web/api/windowbase64/index.html | 121 - .../api/windoworworkerglobalscope/atob/index.html | 72 + .../cleartimeout/index.html | 100 + .../web/api/windowtimers/cleartimeout/index.html | 100 - files/pt-br/web/api/windowtimers/index.html | 117 - .../requisicoes_sincronas_e_assincronas/index.html | 234 -- .../index.html | 234 ++ .../usando_xmlhttprequest/index.html | 688 ----- .../xmlhttprequest/using_xmlhttprequest/index.html | 688 +++++ .../web/css/-moz-box-ordinal-group/index.html | 60 - files/pt-br/web/css/-moz-cell/index.html | 9 - files/pt-br/web/css/actual_value/index.html | 34 + files/pt-br/web/css/attribute_selectors/index.html | 158 + files/pt-br/web/css/box-ordinal-group/index.html | 60 + files/pt-br/web/css/box_model/index.html | 62 - "files/pt-br/web/css/coment\303\241rio/index.html" | 49 - files/pt-br/web/css/comments/index.html | 49 + files/pt-br/web/css/computed_value/index.html | 56 + .../usando_anima\303\247\303\265es_css/index.html" | 332 -- .../css_animations/using_css_animations/index.html | 332 ++ .../border-image_generator/index.html | 2627 ++++++++++++++++ .../border-radius_generator/index.html | 1593 ++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../using_css_multiple_backgrounds/index.html | 58 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../resizing_background_images/index.html | 109 + .../using_multiple_backgrounds/index.html | 58 + .../introduction_to_the_css_box_model/index.html | 62 + .../css/css_box_model/margin_collapsing/index.html | 74 - .../mastering_margin_collapsing/index.html | 74 + .../css/css_colors/color_picker_tool/index.html | 3241 ++++++++++++++++++++ .../web/css/css_colors/seletor_de_cores/index.html | 3241 -------------------- .../basic_concepts_of_flexbox/index.html | 239 ++ .../conceitos_basicos_do_flexbox/index.html | 239 -- .../index.html | 47 - .../implementing_image_sprites_in_css/index.html | 47 + .../understanding_z_index/index.html | 48 + files/pt-br/web/css/css_reference/index.html | 75 - files/pt-br/web/css/css_selectors/index.html | 150 + files/pt-br/web/css/css_tipos/index.html | 64 - files/pt-br/web/css/css_types/index.html | 64 + .../pt-br/web/css/elemento_substituido/index.html | 40 - .../cascading_and_inheritance/index.html | 128 - .../getting_started/como_css_funciona/index.html | 126 - files/pt-br/web/css/getting_started/index.html | 98 - .../web/css/getting_started/javascript/index.html | 140 - .../pt-br/web/css/getting_started/lists/index.html | 272 -- .../getting_started/oque_é_css/index.html | 112 - .../css/getting_started/porque_usar_css/index.html | 106 - .../web/css/getting_started/seletores/index.html | 430 --- files/pt-br/web/css/hifens/index.html | 902 ------ files/pt-br/web/css/hyphens/index.html | 902 ++++++ files/pt-br/web/css/image/index.html | 157 + files/pt-br/web/css/imagem/index.html | 157 - files/pt-br/web/css/initial_value/index.html | 30 + files/pt-br/web/css/layout_mode/index.html | 25 + files/pt-br/web/css/mask/index.html | 150 + .../media_queries/using_media_queries/index.html | 639 ++++ files/pt-br/web/css/modelo_layout/index.html | 25 - files/pt-br/web/css/modelo_visual/index.html | 227 -- files/pt-br/web/css/overflow-wrap/index.html | 117 + .../index.html | 76 - .../index.html | 76 + files/pt-br/web/css/pseudo-elementos/index.html | 104 - files/pt-br/web/css/pseudo-elements/index.html | 104 + files/pt-br/web/css/reference/index.html | 75 + files/pt-br/web/css/replaced_element/index.html | 40 + files/pt-br/web/css/resolved_value/index.html | 40 + .../pt-br/web/css/seletor_de_atributos/index.html | 158 - files/pt-br/web/css/seletor_universal/index.html | 105 - files/pt-br/web/css/seletores_css/index.html | 150 - files/pt-br/web/css/sintaxe/index.html | 70 - files/pt-br/web/css/sintexe_valor/index.html | 436 --- files/pt-br/web/css/specified_value/index.html | 44 + files/pt-br/web/css/syntax/index.html | 70 + .../css/tools/border-image_generator/index.html | 2627 ---------------- .../css/tools/border-radius_generator/index.html | 1593 ---------- files/pt-br/web/css/universal_selectors/index.html | 105 + files/pt-br/web/css/used_value/index.html | 114 + files/pt-br/web/css/valor_atual/index.html | 34 - files/pt-br/web/css/valor_computado/index.html | 56 - files/pt-br/web/css/valor_espeficifco/index.html | 44 - files/pt-br/web/css/valor_inicial/index.html | 30 - files/pt-br/web/css/valor_resolvido/index.html | 40 - files/pt-br/web/css/valor_usado/index.html | 114 - .../web/css/value_definition_syntax/index.html | 436 +++ .../web/css/visual_formatting_model/index.html | 227 ++ files/pt-br/web/css/word-wrap/index.html | 117 - files/pt-br/web/events/abort/index.html | 70 - files/pt-br/web/events/beforeunload/index.html | 106 - files/pt-br/web/events/blur/index.html | 154 - files/pt-br/web/events/domcontentloaded/index.html | 177 -- files/pt-br/web/events/focus/index.html | 137 - files/pt-br/web/events/focusin/index.html | 125 - files/pt-br/web/events/focusout/index.html | 125 - files/pt-br/web/events/input/index.html | 248 -- files/pt-br/web/events/load/index.html | 89 - files/pt-br/web/events/readystatechange/index.html | 83 - .../web/guide/css/css_media_queries/index.html | 639 ---- .../index.html" | 20 - .../guide/css/scaling_background_images/index.html | 109 - .../web/guide/css/understanding_z_index/index.html | 48 - .../creating_and_triggering_events/index.html | 145 + .../events/criando_e_disparando_eventos/index.html | 145 - .../pt-br/web/guide/events/touch_events/index.html | 353 --- files/pt-br/web/guide/graphics/index.html | 49 + "files/pt-br/web/guide/gr\303\241ficos/index.html" | 49 - .../canvas_tutorial/advanced_animations/index.html | 386 --- .../applying_styles_and_colors/index.html | 725 ----- .../canvas_tutorial/basic_animations/index.html | 331 -- .../canvas_tutorial/compositing/exemplo/index.html | 294 -- .../html/canvas_tutorial/compositing/index.html | 112 - .../canvas_tutorial/conclus\303\243o/index.html" | 49 - .../html/canvas_tutorial/drawing_shapes/index.html | 581 ---- .../html/canvas_tutorial/drawing_text/index.html | 169 - .../web/guide/html/canvas_tutorial/index.html | 56 - .../canvas_tutorial/otimizando_canvas/index.html | 115 - .../html/canvas_tutorial/using_images/index.html | 333 -- .../canvas_tutorial/utilizacao_basica/index.html | 153 - .../guide/html/categorias_de_conteudo/index.html | 148 - .../web/guide/html/content_categories/index.html | 148 + .../web/guide/html/content_editable/index.html | 57 - .../web/guide/html/editable_content/index.html | 57 + .../guide/html/forms/form_validation/index.html | 813 ----- .../how_to_build_custom_form_widgets/index.html | 786 ----- .../forms/how_to_structure_an_html_form/index.html | 304 -- files/pt-br/web/guide/html/forms/index.html | 79 - .../forms/meu_primeiro_formulario_html/index.html | 270 -- .../guide/html/forms/os_widgets_nativos/index.html | 701 ----- .../sending_and_retrieving_form_data/index.html | 251 -- files/pt-br/web/guide/html/html5/index.html | 299 ++ .../html/html5/introduction_to_html5/index.html | 23 + .../guide/html/using_data_attributes/index.html | 72 - .../using_html_sections_and_outlines/index.html | 416 +++ .../introducao_ao_desenvolvimento_web/index.html | 97 - .../introduction_to_web_development/index.html | 97 + .../guide/mobile/mobile-friendliness/index.html | 30 + .../web/guide/mobile/separate_sites/index.html | 30 + files/pt-br/web/html/attributes/index.html | 578 ++++ .../pt-br/web/html/block-level_elements/index.html | 126 + .../web/html/canvas/a_basic_ray-caster/index.html | 76 - files/pt-br/web/html/canvas/index.html | 134 - .../index.html | 69 - files/pt-br/web/html/cors_enabled_image/index.html | 113 + .../web/html/cors_imagens_habilitadas/index.html | 113 - .../index.html" | 135 - files/pt-br/web/html/element/command/index.html | 129 - files/pt-br/web/html/element/content/index.html | 101 + .../web/html/element/conte\303\272do/index.html" | 101 - files/pt-br/web/html/element/figura/index.html | 193 -- files/pt-br/web/html/element/figure/index.html | 193 ++ files/pt-br/web/html/element/input/data/index.html | 430 --- files/pt-br/web/html/element/input/date/index.html | 430 +++ .../web/html/elementos_block-level/index.html | 126 - files/pt-br/web/html/favicon/index.html | 32 - .../web/html/formatos_midia_suportados/index.html | 526 ---- .../html/global_attributes/spellcheck/index.html | 69 + files/pt-br/web/html/html5/index.html | 299 -- .../html/html5/introduction_to_html5/index.html | 23 - files/pt-br/web/html/inline_elemente/index.html | 29 - files/pt-br/web/html/inline_elements/index.html | 29 + files/pt-br/web/html/microformatos/index.html | 444 --- files/pt-br/web/html/microformats/index.html | 444 +++ .../index.html | 23 - files/pt-br/web/html/reference/index.html | 25 + files/pt-br/web/html/referenciahtml/index.html | 25 - .../html/using_html5_audio_and_video/index.html | 240 -- .../identifying_resources_on_the_web/index.html | 183 -- files/pt-br/web/http/basico_sobre_http/index.html | 61 - .../complete_list_of_mime_types/index.html | 336 -- .../http/basico_sobre_http/mime_types/index.html | 314 -- .../identifying_resources_on_the_web/index.html | 183 ++ files/pt-br/web/http/basics_of_http/index.html | 61 + .../mime_types/common_types/index.html | 336 ++ .../web/http/basics_of_http/mime_types/index.html | 314 ++ files/pt-br/web/http/caching/index.html | 157 + files/pt-br/web/http/compression/index.html | 72 + .../pt-br/web/http/compress\303\243o/index.html" | 72 - .../connection_management_in_http_1.x/index.html | 94 + .../pt-br/web/http/controle_acesso_cors/index.html | 553 ---- files/pt-br/web/http/cors/index.html | 553 ++++ .../index.html" | 94 - .../web/http/headers/conex\303\243o/index.html" | 54 - files/pt-br/web/http/headers/connection/index.html | 54 + .../headers/localiza\303\247\303\243o/index.html" | 82 - files/pt-br/web/http/headers/location/index.html | 82 + files/pt-br/web/http/http/index.html | 157 - files/pt-br/web/http/mensagens/index.html | 146 - files/pt-br/web/http/messages/index.html | 146 + files/pt-br/web/http/redirecionamento/index.html | 260 -- files/pt-br/web/http/redirections/index.html | 260 ++ .../web/http/server-side_access_control/index.html | 213 -- files/pt-br/web/javascript/closures/index.html | 336 ++ .../index.html | 280 -- .../index.html | 280 ++ .../pt-br/web/javascript/guide/closures/index.html | 336 -- .../cole\303\247\303\265es_chaveadas/index.html" | 149 - .../control_flow_and_error_handling/index.html | 429 +++ .../guide/declara\303\247\303\265es/index.html" | 429 --- .../guide/details_of_the_object_model/index.html | 705 +++++ .../guide/detalhes_do_modelo_do_objeto/index.html | 705 ----- .../javascript/guide/formatando_texto/index.html | 250 -- .../web/javascript/guide/functions/index.html | 640 ++++ .../guide/fun\303\247\303\265es/index.html" | 640 ---- .../javascript/guide/grammar_and_types/index.html | 601 ++++ .../web/javascript/guide/igualdade/index.html | 259 -- .../inheritance_and_the_prototype_chain/index.html | 193 -- .../guide/iteratores_e_geradores/index.html | 161 - .../guide/iterators_and_generators/index.html | 161 + .../javascript/guide/lacos_e_iteracoes/index.html | 333 -- .../guide/loops_and_iteration/index.html | 333 ++ .../pt-br/web/javascript/guide/modules/index.html | 454 +++ .../javascript/guide/m\303\263dulos/index.html" | 454 --- .../javascript/guide/numbers_and_dates/index.html | 374 +++ .../javascript/guide/numeros_e_datas/index.html | 374 --- .../javascript/guide/sintaxe_e_tipos/index.html | 583 ---- .../javascript/guide/text_formatting/index.html | 250 ++ .../guide/trabalhando_com_objetos/index.html | 494 --- .../javascript/guide/usando_promises/index.html | 269 -- .../web/javascript/guide/using_promises/index.html | 269 ++ .../values,_variables,_and_literals/index.html | 601 ---- .../guide/working_with_objects/index.html | 494 +++ .../inheritance_and_the_prototype_chain/index.html | 193 ++ .../index.html | 352 --- .../index.html" | 38 - .../index.html | 52 - .../missing_curly_after_property_list/index.html | 52 + .../index.html | 38 + .../reference/errors/not_defined/index.html | 66 + .../errors/n\303\243o_definido/index.html" | 66 - .../index.html" | 116 - .../errors/unnamed_function_statement/index.html | 116 + .../functions/default_parameters/index.html | 210 ++ .../functions/definicoes_metodos/index.html | 200 -- .../functions/method_definitions/index.html | 200 ++ .../functions/parametros_predefinidos/index.html | 210 -- .../global_objects/array/contains/index.html | 106 - .../global_objects/array/filter/index.html | 227 ++ .../global_objects/array/filtro/index.html | 227 -- .../global_objects/array/includes/index.html | 106 + .../global_objects/array/prototype/index.html | 206 -- .../global_objects/bigint/prototype/index.html | 61 - .../global_objects/boolean/prototype/index.html | 112 - .../global_objects/function/prototype/index.html | 95 - .../intl/numberformat/prototype/index.html | 126 - .../global_objects/map/prototype/index.html | 136 - .../global_objects/number/prototype/index.html | 140 - .../global_objects/object/prototype/index.html | 227 -- .../global_objects/promise/prototype/index.html | 114 - .../global_objects/set/prototype/index.html | 85 - .../global_objects/string/prototype/index.html | 177 -- .../global_objects/weakmap/prototype/index.html | 118 - .../operators/arithmetic_operators/index.html | 329 -- .../atribuicao_via_desestruturacao/index.html | 445 --- .../operators/bitwise_operators/index.html | 559 ---- .../reference/operators/comma_operator/index.html | 102 + .../operators/conditional_operator/index.html | 171 ++ .../operators/destructuring_assignment/index.html | 445 +++ .../operators/inicializador_objeto/index.html | 392 --- .../nullish_coalescing_operator/index.html | 159 + .../operators/object_initializer/index.html | 392 +++ .../operators/operador_condicional/index.html | 171 -- .../operador_de_coalescencia_nula/index.html | 159 - .../operators/operador_virgula/index.html | 102 - .../index.html" | 251 -- .../operators/operadores_logicos/index.html | 343 --- .../reference/operators/spread_operator/index.html | 201 -- .../reference/statements/async_function/index.html | 149 + .../reference/statements/default/index.html | 187 -- .../statements/funcoes_assincronas/index.html | 149 - .../reference/template_literals/index.html | 140 + .../reference/template_strings/index.html | 140 - files/pt-br/web/mathml/examples/index.html | 20 + files/pt-br/web/mathml/exemplos/index.html | 20 - files/pt-br/web/media/formats/index.html | 526 ++++ .../caminho_de_renderizacao_critico/index.html | 60 - .../performance/critical_rendering_path/index.html | 60 + .../progressive_web_apps/introduction/index.html | 90 + .../introdu\303\247\303\243o/index.html" | 90 - .../index.html" | 32 - .../web/svg/intensivo_de_namespaces/index.html | 186 -- .../web/svg/namespaces_crash_course/index.html | 186 ++ files/pt-br/web/tutoriais/index.html | 253 -- files/pt-br/web/tutorials/index.html | 253 ++ .../usando_custom_elements/index.html | 289 -- .../using_custom_elements/index.html | 289 ++ .../advanced_example/index.html | 100 + .../web/xslt/xslt_js_interface_in_gecko/index.html | 24 + .../mobile/design_responsivo/index.html | 68 - files/pt-br/web_development/mobile/index.html | 17 - .../mobile/mobile-friendliness/index.html | 30 - .../mobile/sites_separados/index.html | 30 - files/pt-br/webapi/battery_status/index.html | 58 - files/pt-br/webapi/index.html | 134 - files/pt-br/webapi/network_information/index.html | 56 - .../index.html | 512 ---- .../understanding_the_text_format/index.html | 512 ++++ .../index.html | 269 -- .../using_the_javascript_api/index.html | 269 ++ files/pt-br/webrtc/index.html | 81 - .../index.html | 182 -- files/pt-br/websockets/index.html | 178 -- .../websockets/writing_websocket_server/index.html | 237 -- .../writing_websocket_servers/index.html | 263 -- files/pt-br/xhtml/index.html | 86 - 1184 files changed, 97679 insertions(+), 97679 deletions(-) delete mode 100644 files/pt-br/aprender/como_contribuir/index.html delete mode 100644 files/pt-br/aprender/css/construindo_blocos/cascade_and_inheritance/index.html delete mode 100644 files/pt-br/aprender/css/construindo_blocos/index.html delete mode 100644 files/pt-br/aprender/css/construindo_blocos/the_box_model/index.html delete mode 100644 files/pt-br/aprender/css/estilizando_texto/index.html delete mode 100644 files/pt-br/aprender/css/index.html delete mode 100644 files/pt-br/aprender/ferramentas_e_teste/index.html delete mode 100644 files/pt-br/aprender/front-end_web_developer/index.html delete mode 100644 "files/pt-br/aprender/getting_started_with_the_web/a_web_e_seus_padr\303\265es/index.html" delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/com_que_seu_site_vai_parecer/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/como_a_web_funciona/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/css_basico/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/html_basico/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/instalando_programas_basicos/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/javascript_basico/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/lidando_com_arquivos/index.html delete mode 100644 files/pt-br/aprender/getting_started_with_the_web/publicando_seu_site/index.html delete mode 100644 files/pt-br/aprender/html/como-fazer/index.html delete mode 100644 files/pt-br/aprender/html/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/debugging_html/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/estrutura_de_documento_e_sites/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/formatacao_avancada_texto/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/fundamentos_textuais_html/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/getting_started/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/test_your_skills_colon__html_text_basics/index.html delete mode 100644 files/pt-br/aprender/html/introducao_ao_html/the_head_metadata_in_html/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/images_in_html/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/other_embedding_technologies/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/responsive_images/index.html delete mode 100644 files/pt-br/aprender/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/pt-br/aprender/html/tables/basics/index.html delete mode 100644 files/pt-br/aprender/html/tables/index.html delete mode 100644 files/pt-br/aprender/index.html delete mode 100644 files/pt-br/aprender/javascript/client-side_web_apis/client-side_storage/index.html delete mode 100644 files/pt-br/aprender/javascript/client-side_web_apis/index.html delete mode 100644 "files/pt-br/aprender/javascript/client-side_web_apis/introdu\303\247\303\243o/index.html" delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html delete mode 100644 "files/pt-br/aprender/javascript/elementos_construtivos/c\303\263digo_em_loop/index.html" delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/events/index.html delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/index.html delete mode 100644 files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html delete mode 100644 files/pt-br/aprender/javascript/howto/index.html delete mode 100644 files/pt-br/aprender/javascript/index.html delete mode 100644 files/pt-br/aprender/javascript/objetos/adding_bouncing_balls_features/index.html delete mode 100644 "files/pt-br/aprender/javascript/objetos/b\303\241sico/index.html" delete mode 100644 "files/pt-br/aprender/javascript/objetos/heran\303\247a/index.html" delete mode 100644 files/pt-br/aprender/javascript/objetos/index.html delete mode 100644 files/pt-br/aprender/javascript/objetos/json/index.html delete mode 100644 files/pt-br/aprender/javascript/objetos/object-oriented_js/index.html delete mode 100644 files/pt-br/aprender/javascript/objetos/object_building_practice/index.html delete mode 100644 files/pt-br/aprender/javascript/objetos/object_prototypes/index.html delete mode 100644 files/pt-br/aprender/learning_and_getting_help/index.html delete mode 100644 files/pt-br/aprender/release_notes/index.html create mode 100644 files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/index.html create mode 100644 files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/pt-br/conflicting/learn/javascript/objects/index.html create mode 100644 files/pt-br/conflicting/mdn/contribute/getting_started/index.html create mode 100644 files/pt-br/conflicting/mozilla/add-ons/index.html create mode 100644 files/pt-br/conflicting/mozilla/firefox/releases/index.html create mode 100644 files/pt-br/conflicting/web/accessibility/index.html create mode 100644 files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html create mode 100644 files/pt-br/conflicting/web/api/cryptokey/index.html create mode 100644 files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html create mode 100644 files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html create mode 100644 files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html create mode 100644 files/pt-br/conflicting/web/api/document_object_model/index.html create mode 100644 files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html create mode 100644 files/pt-br/conflicting/web/api/index.html create mode 100644 files/pt-br/conflicting/web/api/url/index.html create mode 100644 files/pt-br/conflicting/web/api/webrtc_api/index.html create mode 100644 files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html create mode 100644 files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html create mode 100644 files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/pt-br/conflicting/web/css/cursor/index.html create mode 100644 files/pt-br/conflicting/web/guide/index.html create mode 100644 files/pt-br/conflicting/web/guide/mobile/index.html create mode 100644 files/pt-br/conflicting/web/http/cors/index.html create mode 100644 files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html create mode 100644 files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/pt-br/conflicting/web/progressive_web_apps/index.html delete mode 100644 files/pt-br/construindo_um_complemento/index.html delete mode 100644 files/pt-br/css/usando_caixas_flexiveis_css/index.html delete mode 100644 files/pt-br/desenvolvimento_web/index.html delete mode 100644 files/pt-br/dez_anos_de_mdn/index.html delete mode 100644 files/pt-br/dom/index.html delete mode 100644 files/pt-br/dom/referencia_do_dom/events/index.html delete mode 100644 files/pt-br/dom/referencia_do_dom/examples/index.html delete mode 100644 files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html delete mode 100644 files/pt-br/dom/referencia_do_dom/index.html delete mode 100644 "files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" delete mode 100644 files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html delete mode 100644 files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html delete mode 100644 files/pt-br/dragdrop/drag_and_drop/index.html delete mode 100644 files/pt-br/dragdrop/index.html create mode 100644 files/pt-br/games/introduction_to_html5_game_development/index.html delete mode 100644 files/pt-br/games/introduction_to_html5_game_gevelopment_(summary)/index.html delete mode 100644 files/pt-br/glossario/404/index.html delete mode 100644 files/pt-br/glossario/502/index.html delete mode 100644 "files/pt-br/glossario/abstra\303\247\303\243o/index.html" delete mode 100644 files/pt-br/glossario/acessibilidade/index.html delete mode 100644 files/pt-br/glossario/adobe_flash/index.html delete mode 100644 files/pt-br/glossario/ajax/index.html delete mode 100644 files/pt-br/glossario/algoritmo/index.html delete mode 100644 files/pt-br/glossario/alpha/index.html delete mode 100644 files/pt-br/glossario/api/index.html delete mode 100644 files/pt-br/glossario/apple_safari/index.html delete mode 100644 files/pt-br/glossario/argument/index.html delete mode 100644 files/pt-br/glossario/arpanet/index.html delete mode 100644 files/pt-br/glossario/array/index.html delete mode 100644 files/pt-br/glossario/arvore_de_acessibilidade/index.html delete mode 100644 files/pt-br/glossario/ascii/index.html delete mode 100644 files/pt-br/glossario/assincrono/index.html delete mode 100644 files/pt-br/glossario/atributo/index.html delete mode 100644 files/pt-br/glossario/bandwidth/index.html delete mode 100644 files/pt-br/glossario/bigint/index.html delete mode 100644 files/pt-br/glossario/booleano/index.html delete mode 100644 files/pt-br/glossario/cabecalho_http/index.html delete mode 100644 files/pt-br/glossario/cache/index.html delete mode 100644 files/pt-br/glossario/call_stack/index.html delete mode 100644 files/pt-br/glossario/callback_function/index.html delete mode 100644 files/pt-br/glossario/caractere/index.html delete mode 100644 files/pt-br/glossario/caret/index.html delete mode 100644 files/pt-br/glossario/cdn/index.html delete mode 100644 files/pt-br/glossario/character_encoding/index.html delete mode 100644 files/pt-br/glossario/chrome/index.html delete mode 100644 files/pt-br/glossario/class/index.html delete mode 100644 files/pt-br/glossario/cms/index.html delete mode 100644 files/pt-br/glossario/conteiner_de_alinhamento/index.html delete mode 100644 files/pt-br/glossario/conversao_de_tipo/index.html delete mode 100644 files/pt-br/glossario/cors/index.html delete mode 100644 files/pt-br/glossario/crud/index.html delete mode 100644 files/pt-br/glossario/css/index.html delete mode 100644 files/pt-br/glossario/css_pixel/index.html delete mode 100644 files/pt-br/glossario/css_preprocessor/index.html delete mode 100644 files/pt-br/glossario/css_selector/index.html delete mode 100644 files/pt-br/glossario/cssom/index.html delete mode 100644 "files/pt-br/glossario/declara\303\247\303\243o/index.html" delete mode 100644 "files/pt-br/glossario/degrada\303\247\303\243o_graciosa/index.html" delete mode 100644 files/pt-br/glossario/doctype/index.html delete mode 100644 files/pt-br/glossario/dom/index.html delete mode 100644 "files/pt-br/glossario/dom\303\255nio/index.html" delete mode 100644 files/pt-br/glossario/ecma/index.html delete mode 100644 files/pt-br/glossario/elemento/index.html delete mode 100644 files/pt-br/glossario/endereco_ip/index.html delete mode 100644 files/pt-br/glossario/endianness/index.html delete mode 100644 files/pt-br/glossario/entity_header/index.html delete mode 100644 files/pt-br/glossario/escopo/index.html delete mode 100644 files/pt-br/glossario/falsy/index.html delete mode 100644 files/pt-br/glossario/flex/index.html delete mode 100644 files/pt-br/glossario/forbidden_header_name/index.html delete mode 100644 files/pt-br/glossario/forbidden_response_header_name/index.html delete mode 100644 files/pt-br/glossario/funcao-first-class/index.html delete mode 100644 "files/pt-br/glossario/fun\303\247\303\243o/index.html" delete mode 100644 files/pt-br/glossario/fuzzing/index.html delete mode 100644 files/pt-br/glossario/gecko/index.html delete mode 100644 files/pt-br/glossario/general_header/index.html delete mode 100644 files/pt-br/glossario/global_object/index.html delete mode 100644 files/pt-br/glossario/grade/index.html delete mode 100644 files/pt-br/glossario/grid_areas/index.html delete mode 100644 files/pt-br/glossario/hoisting/index.html delete mode 100644 files/pt-br/glossario/hsts/index.html delete mode 100644 files/pt-br/glossario/html/index.html delete mode 100644 files/pt-br/glossario/http/index.html delete mode 100644 files/pt-br/glossario/http_2/index.html delete mode 100644 files/pt-br/glossario/https/index.html delete mode 100644 files/pt-br/glossario/idempotente/index.html delete mode 100644 files/pt-br/glossario/identificador/index.html delete mode 100644 files/pt-br/glossario/iife/index.html delete mode 100644 files/pt-br/glossario/index.html delete mode 100644 files/pt-br/glossario/indexeddb/index.html delete mode 100644 files/pt-br/glossario/internet/index.html delete mode 100644 files/pt-br/glossario/ipv4/index.html delete mode 100644 files/pt-br/glossario/ipv6/index.html delete mode 100644 files/pt-br/glossario/irc/index.html delete mode 100644 files/pt-br/glossario/iso/index.html delete mode 100644 files/pt-br/glossario/jank/index.html delete mode 100644 files/pt-br/glossario/javascript/index.html delete mode 100644 files/pt-br/glossario/jpeg/index.html delete mode 100644 files/pt-br/glossario/jquery/index.html delete mode 100644 files/pt-br/glossario/key/index.html delete mode 100644 "files/pt-br/glossario/linguagem_de_programa\303\247\303\243o_din\303\242mica/index.html" delete mode 100644 "files/pt-br/glossario/marca\303\247\303\243o/index.html" delete mode 100644 files/pt-br/glossario/metadata/index.html delete mode 100644 files/pt-br/glossario/mozilla_firefox/index.html delete mode 100644 files/pt-br/glossario/mutavel/index.html delete mode 100644 files/pt-br/glossario/navegador/index.html delete mode 100644 files/pt-br/glossario/navegador_opera/index.html delete mode 100644 files/pt-br/glossario/node.js/index.html delete mode 100644 "files/pt-br/glossario/nome_de_dom\303\255nio/index.html" delete mode 100644 files/pt-br/glossario/nulo/index.html delete mode 100644 "files/pt-br/glossario/n\303\272mero/index.html" delete mode 100644 files/pt-br/glossario/objeto/index.html delete mode 100644 files/pt-br/glossario/oop/index.html delete mode 100644 files/pt-br/glossario/opengl/index.html delete mode 100644 files/pt-br/glossario/operador/index.html delete mode 100644 files/pt-br/glossario/operando/index.html delete mode 100644 files/pt-br/glossario/origem/index.html delete mode 100644 files/pt-br/glossario/ota/index.html delete mode 100644 files/pt-br/glossario/palavra-chave/index.html delete mode 100644 files/pt-br/glossario/php/index.html delete mode 100644 files/pt-br/glossario/pixel/index.html delete mode 100644 files/pt-br/glossario/polyfill/index.html delete mode 100644 files/pt-br/glossario/port/index.html delete mode 100644 files/pt-br/glossario/prefixos_vendor/index.html delete mode 100644 files/pt-br/glossario/preflight_request/index.html delete mode 100644 files/pt-br/glossario/primitivo/index.html delete mode 100644 "files/pt-br/glossario/programa\303\247\303\243o_de_computadores/index.html" delete mode 100644 files/pt-br/glossario/progressive_web_apps/index.html delete mode 100644 files/pt-br/glossario/property/css/index.html delete mode 100644 files/pt-br/glossario/property/index.html delete mode 100644 files/pt-br/glossario/property/javascript/index.html delete mode 100644 files/pt-br/glossario/protocolo/index.html delete mode 100644 files/pt-br/glossario/prototype/index.html delete mode 100644 files/pt-br/glossario/proxy_server/index.html delete mode 100644 files/pt-br/glossario/pseudo-class/index.html delete mode 100644 files/pt-br/glossario/pseudo-element/index.html delete mode 100644 files/pt-br/glossario/python/index.html delete mode 100644 "files/pt-br/glossario/recurs\303\243o/index.html" delete mode 100644 files/pt-br/glossario/reflow/index.html delete mode 100644 files/pt-br/glossario/request_header/index.html delete mode 100644 files/pt-br/glossario/responsive_web_design/index.html delete mode 100644 files/pt-br/glossario/rest/index.html delete mode 100644 files/pt-br/glossario/ruby/index.html delete mode 100644 files/pt-br/glossario/sdp/index.html delete mode 100644 files/pt-br/glossario/seguro/index.html delete mode 100644 files/pt-br/glossario/self-executing_anonymous_function/index.html delete mode 100644 files/pt-br/glossario/semantica/index.html delete mode 100644 files/pt-br/glossario/seo/index.html delete mode 100644 files/pt-br/glossario/servidor/index.html delete mode 100644 files/pt-br/glossario/sgml/index.html delete mode 100644 files/pt-br/glossario/sincrono/index.html delete mode 100644 files/pt-br/glossario/sloppy_mode/index.html delete mode 100644 files/pt-br/glossario/stacking_context/index.html delete mode 100644 files/pt-br/glossario/string/index.html delete mode 100644 files/pt-br/glossario/svg/index.html delete mode 100644 files/pt-br/glossario/symbol/index.html delete mode 100644 files/pt-br/glossario/tag/index.html delete mode 100644 files/pt-br/glossario/tcp/index.html delete mode 100644 files/pt-br/glossario/three_js/index.html delete mode 100644 files/pt-br/glossario/tls/index.html delete mode 100644 files/pt-br/glossario/topico_de_alinhamento/index.html delete mode 100644 "files/pt-br/glossario/tratando_formul\303\241rios_com_php/index.html" delete mode 100644 files/pt-br/glossario/truthy/index.html delete mode 100644 files/pt-br/glossario/undefined/index.html delete mode 100644 files/pt-br/glossario/uri/index.html delete mode 100644 files/pt-br/glossario/url/index.html delete mode 100644 files/pt-br/glossario/utf-8/index.html delete mode 100644 files/pt-br/glossario/ux/index.html delete mode 100644 files/pt-br/glossario/valor/index.html delete mode 100644 "files/pt-br/glossario/vari\303\241vel/index.html" delete mode 100644 files/pt-br/glossario/viewport/index.html delete mode 100644 files/pt-br/glossario/w3c/index.html delete mode 100644 files/pt-br/glossario/webp/index.html delete mode 100644 files/pt-br/glossario/websockets/index.html delete mode 100644 files/pt-br/glossario/whatwg/index.html delete mode 100644 files/pt-br/glossario/wrapper/index.html delete mode 100644 files/pt-br/glossario/xhr_(xmlhttprequest)/index.html delete mode 100644 files/pt-br/glossario/xml/index.html create mode 100644 files/pt-br/glossary/404/index.html create mode 100644 files/pt-br/glossary/502/index.html create mode 100644 files/pt-br/glossary/abstraction/index.html create mode 100644 files/pt-br/glossary/accessibility/index.html create mode 100644 files/pt-br/glossary/accessibility_tree/index.html create mode 100644 files/pt-br/glossary/adobe_flash/index.html create mode 100644 files/pt-br/glossary/ajax/index.html create mode 100644 files/pt-br/glossary/algorithm/index.html create mode 100644 files/pt-br/glossary/alignment_container/index.html create mode 100644 files/pt-br/glossary/alignment_subject/index.html create mode 100644 files/pt-br/glossary/alpha/index.html create mode 100644 files/pt-br/glossary/api/index.html create mode 100644 files/pt-br/glossary/apple_safari/index.html create mode 100644 files/pt-br/glossary/argument/index.html create mode 100644 files/pt-br/glossary/arpanet/index.html create mode 100644 files/pt-br/glossary/array/index.html create mode 100644 files/pt-br/glossary/ascii/index.html create mode 100644 files/pt-br/glossary/asynchronous/index.html create mode 100644 files/pt-br/glossary/attribute/index.html create mode 100644 files/pt-br/glossary/bandwidth/index.html create mode 100644 files/pt-br/glossary/bigint/index.html create mode 100644 files/pt-br/glossary/boolean/index.html create mode 100644 files/pt-br/glossary/browser/index.html create mode 100644 files/pt-br/glossary/cache/index.html create mode 100644 files/pt-br/glossary/call_stack/index.html create mode 100644 files/pt-br/glossary/callback_function/index.html create mode 100644 files/pt-br/glossary/caret/index.html create mode 100644 files/pt-br/glossary/cdn/index.html create mode 100644 files/pt-br/glossary/character/index.html create mode 100644 files/pt-br/glossary/character_encoding/index.html create mode 100644 files/pt-br/glossary/chrome/index.html create mode 100644 files/pt-br/glossary/class/index.html create mode 100644 files/pt-br/glossary/cms/index.html create mode 100644 files/pt-br/glossary/computer_programming/index.html create mode 100644 files/pt-br/glossary/cors/index.html create mode 100644 files/pt-br/glossary/crud/index.html create mode 100644 files/pt-br/glossary/css/index.html create mode 100644 files/pt-br/glossary/css_pixel/index.html create mode 100644 files/pt-br/glossary/css_preprocessor/index.html create mode 100644 files/pt-br/glossary/css_selector/index.html create mode 100644 files/pt-br/glossary/cssom/index.html create mode 100644 files/pt-br/glossary/doctype/index.html create mode 100644 files/pt-br/glossary/dom/index.html create mode 100644 files/pt-br/glossary/domain/index.html create mode 100644 files/pt-br/glossary/domain_name/index.html create mode 100644 files/pt-br/glossary/dynamic_programming_language/index.html create mode 100644 files/pt-br/glossary/ecma/index.html create mode 100644 files/pt-br/glossary/element/index.html create mode 100644 files/pt-br/glossary/endianness/index.html create mode 100644 files/pt-br/glossary/entity_header/index.html create mode 100644 files/pt-br/glossary/falsy/index.html create mode 100644 files/pt-br/glossary/first-class_function/index.html create mode 100644 files/pt-br/glossary/flex/index.html create mode 100644 files/pt-br/glossary/forbidden_header_name/index.html create mode 100644 files/pt-br/glossary/forbidden_response_header_name/index.html create mode 100644 files/pt-br/glossary/function/index.html create mode 100644 files/pt-br/glossary/fuzzing/index.html create mode 100644 files/pt-br/glossary/gecko/index.html create mode 100644 files/pt-br/glossary/general_header/index.html create mode 100644 files/pt-br/glossary/global_object/index.html create mode 100644 files/pt-br/glossary/graceful_degradation/index.html create mode 100644 files/pt-br/glossary/grid/index.html create mode 100644 files/pt-br/glossary/grid_areas/index.html create mode 100644 files/pt-br/glossary/hoisting/index.html create mode 100644 files/pt-br/glossary/hsts/index.html create mode 100644 files/pt-br/glossary/html/index.html create mode 100644 files/pt-br/glossary/http/index.html create mode 100644 files/pt-br/glossary/http_2/index.html create mode 100644 files/pt-br/glossary/http_header/index.html create mode 100644 files/pt-br/glossary/https/index.html create mode 100644 files/pt-br/glossary/idempotent/index.html create mode 100644 files/pt-br/glossary/identifier/index.html create mode 100644 files/pt-br/glossary/iife/index.html create mode 100644 files/pt-br/glossary/index.html create mode 100644 files/pt-br/glossary/indexeddb/index.html create mode 100644 files/pt-br/glossary/internet/index.html create mode 100644 files/pt-br/glossary/ip_address/index.html create mode 100644 files/pt-br/glossary/ipv4/index.html create mode 100644 files/pt-br/glossary/ipv6/index.html create mode 100644 files/pt-br/glossary/irc/index.html create mode 100644 files/pt-br/glossary/iso/index.html create mode 100644 files/pt-br/glossary/jank/index.html create mode 100644 files/pt-br/glossary/javascript/index.html create mode 100644 files/pt-br/glossary/jpeg/index.html create mode 100644 files/pt-br/glossary/jquery/index.html create mode 100644 files/pt-br/glossary/json/index.html create mode 100644 files/pt-br/glossary/key/index.html create mode 100644 files/pt-br/glossary/keyword/index.html create mode 100644 files/pt-br/glossary/localization/index.html create mode 100644 files/pt-br/glossary/markup/index.html create mode 100644 files/pt-br/glossary/metadata/index.html create mode 100644 files/pt-br/glossary/mozilla_firefox/index.html create mode 100644 files/pt-br/glossary/mutable/index.html create mode 100644 files/pt-br/glossary/node.js/index.html create mode 100644 files/pt-br/glossary/null/index.html create mode 100644 files/pt-br/glossary/number/index.html create mode 100644 files/pt-br/glossary/object/index.html create mode 100644 files/pt-br/glossary/oop/index.html create mode 100644 files/pt-br/glossary/opengl/index.html create mode 100644 files/pt-br/glossary/opera_browser/index.html create mode 100644 files/pt-br/glossary/operand/index.html create mode 100644 files/pt-br/glossary/operator/index.html create mode 100644 files/pt-br/glossary/origin/index.html create mode 100644 files/pt-br/glossary/ota/index.html create mode 100644 files/pt-br/glossary/php/index.html create mode 100644 files/pt-br/glossary/pixel/index.html create mode 100644 files/pt-br/glossary/polyfill/index.html create mode 100644 files/pt-br/glossary/port/index.html create mode 100644 files/pt-br/glossary/preflight_request/index.html create mode 100644 files/pt-br/glossary/primitive/index.html create mode 100644 files/pt-br/glossary/progressive_web_apps/index.html create mode 100644 files/pt-br/glossary/property/css/index.html create mode 100644 files/pt-br/glossary/property/index.html create mode 100644 files/pt-br/glossary/property/javascript/index.html create mode 100644 files/pt-br/glossary/protocol/index.html create mode 100644 files/pt-br/glossary/prototype/index.html create mode 100644 files/pt-br/glossary/proxy_server/index.html create mode 100644 files/pt-br/glossary/pseudo-class/index.html create mode 100644 files/pt-br/glossary/pseudo-element/index.html create mode 100644 files/pt-br/glossary/python/index.html create mode 100644 files/pt-br/glossary/recursion/index.html create mode 100644 files/pt-br/glossary/reflow/index.html create mode 100644 files/pt-br/glossary/request_header/index.html create mode 100644 files/pt-br/glossary/responsive_web_design/index.html create mode 100644 files/pt-br/glossary/rest/index.html create mode 100644 files/pt-br/glossary/ruby/index.html create mode 100644 files/pt-br/glossary/safe/index.html create mode 100644 files/pt-br/glossary/scope/index.html create mode 100644 files/pt-br/glossary/sdp/index.html create mode 100644 files/pt-br/glossary/self-executing_anonymous_function/index.html create mode 100644 files/pt-br/glossary/semantics/index.html create mode 100644 files/pt-br/glossary/seo/index.html create mode 100644 files/pt-br/glossary/server/index.html create mode 100644 files/pt-br/glossary/sgml/index.html create mode 100644 files/pt-br/glossary/sloppy_mode/index.html create mode 100644 files/pt-br/glossary/speculative_parsing/index.html create mode 100644 files/pt-br/glossary/stacking_context/index.html create mode 100644 files/pt-br/glossary/statement/index.html create mode 100644 files/pt-br/glossary/string/index.html create mode 100644 files/pt-br/glossary/svg/index.html create mode 100644 files/pt-br/glossary/symbol/index.html create mode 100644 files/pt-br/glossary/synchronous/index.html create mode 100644 files/pt-br/glossary/tag/index.html create mode 100644 files/pt-br/glossary/tcp/index.html create mode 100644 files/pt-br/glossary/three_js/index.html create mode 100644 files/pt-br/glossary/tls/index.html create mode 100644 files/pt-br/glossary/truthy/index.html create mode 100644 files/pt-br/glossary/type_conversion/index.html create mode 100644 files/pt-br/glossary/undefined/index.html create mode 100644 files/pt-br/glossary/uri/index.html create mode 100644 files/pt-br/glossary/url/index.html create mode 100644 files/pt-br/glossary/utf-8/index.html create mode 100644 files/pt-br/glossary/ux/index.html create mode 100644 files/pt-br/glossary/value/index.html create mode 100644 files/pt-br/glossary/variable/index.html create mode 100644 files/pt-br/glossary/vendor_prefix/index.html create mode 100644 files/pt-br/glossary/viewport/index.html create mode 100644 files/pt-br/glossary/w3c/index.html create mode 100644 files/pt-br/glossary/webp/index.html create mode 100644 files/pt-br/glossary/websockets/index.html create mode 100644 files/pt-br/glossary/whatwg/index.html create mode 100644 files/pt-br/glossary/wrapper/index.html create mode 100644 files/pt-br/glossary/xhr_(xmlhttprequest)/index.html create mode 100644 files/pt-br/glossary/xhtml/index.html create mode 100644 files/pt-br/glossary/xml/index.html delete mode 100644 files/pt-br/hello_world_rust/index.html delete mode 100644 files/pt-br/html/attributes/index.html delete mode 100644 files/pt-br/html/forms_in_html/index.html delete mode 100644 files/pt-br/instalando_rust/index.html delete mode 100644 files/pt-br/json/index.html create mode 100644 files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html delete mode 100644 files/pt-br/learn/accessibility/acessibilidade_problemas/index.html create mode 100644 files/pt-br/learn/accessibility/css_and_javascript/index.html delete mode 100644 files/pt-br/learn/accessibility/css_e_javascript/index.html delete mode 100644 files/pt-br/learn/common_questions/como_a_internet_funciona/index.html delete mode 100644 files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html delete mode 100644 files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html delete mode 100644 files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html create mode 100644 files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html create mode 100644 files/pt-br/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/pt-br/learn/common_questions/how_much_does_it_cost/index.html delete mode 100644 files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html delete mode 100644 "files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" delete mode 100644 files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html delete mode 100644 files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html delete mode 100644 files/pt-br/learn/common_questions/que_software_eu_preciso/index.html create mode 100644 files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/pt-br/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/pt-br/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/pt-br/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/pt-br/learn/common_questions/what_software_do_i_need/index.html create mode 100644 files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/pt-br/learn/css/building_blocks/index.html create mode 100644 files/pt-br/learn/css/building_blocks/the_box_model/index.html delete mode 100644 files/pt-br/learn/css/css_layout/fluxo_normal/index.html delete mode 100644 files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html create mode 100644 files/pt-br/learn/css/css_layout/introduction/index.html delete mode 100644 files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html create mode 100644 files/pt-br/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/pt-br/learn/css/css_layout/normal_flow/index.html delete mode 100644 files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html create mode 100644 files/pt-br/learn/css/first_steps/getting_started/index.html create mode 100644 files/pt-br/learn/css/first_steps/how_css_is_structured/index.html delete mode 100644 files/pt-br/learn/css/first_steps/iniciando/index.html delete mode 100644 files/pt-br/learn/css/first_steps/o_que_e_css/index.html create mode 100644 files/pt-br/learn/css/first_steps/what_is_css/index.html create mode 100644 files/pt-br/learn/css/howto/css_faq/index.html delete mode 100644 files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html create mode 100644 files/pt-br/learn/css/index.html create mode 100644 files/pt-br/learn/css/styling_text/index.html create mode 100644 files/pt-br/learn/css/styling_text/styling_lists/index.html create mode 100644 files/pt-br/learn/forms/basic_native_form_controls/index.html create mode 100644 files/pt-br/learn/forms/form_validation/index.html create mode 100644 files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/pt-br/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/pt-br/learn/forms/index.html create mode 100644 files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/pt-br/learn/forms/your_first_form/index.html create mode 100644 files/pt-br/learn/front-end_web_developer/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html create mode 100644 files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/pt-br/learn/html/howto/index.html create mode 100644 files/pt-br/learn/html/howto/use_data_attributes/index.html create mode 100644 files/pt-br/learn/html/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html create mode 100644 files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/pt-br/learn/html/tables/basics/index.html create mode 100644 files/pt-br/learn/html/tables/index.html create mode 100644 files/pt-br/learn/index.html create mode 100644 files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html delete mode 100644 files/pt-br/learn/javascript/asynchronous/conceitos/index.html create mode 100644 files/pt-br/learn/javascript/asynchronous/concepts/index.html delete mode 100644 files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html create mode 100644 files/pt-br/learn/javascript/asynchronous/introducing/index.html delete mode 100644 "files/pt-br/learn/javascript/asynchronous/introdu\303\247\303\243o/index.html" create mode 100644 files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/conditionals/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/events/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/functions/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/image_gallery/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/looping_code/index.html create mode 100644 files/pt-br/learn/javascript/building_blocks/return_values/index.html create mode 100644 files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html create mode 100644 files/pt-br/learn/javascript/client-side_web_apis/index.html create mode 100644 files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html create mode 100644 files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html delete mode 100644 files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html delete mode 100644 files/pt-br/learn/javascript/first_steps/matematica/index.html create mode 100644 files/pt-br/learn/javascript/first_steps/math/index.html delete mode 100644 files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html create mode 100644 files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html delete mode 100644 files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html create mode 100644 files/pt-br/learn/javascript/first_steps/variables/index.html delete mode 100644 "files/pt-br/learn/javascript/first_steps/vari\303\241veis/index.html" create mode 100644 files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/pt-br/learn/javascript/howto/index.html create mode 100644 files/pt-br/learn/javascript/index.html create mode 100644 files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/pt-br/learn/javascript/objects/basics/index.html create mode 100644 files/pt-br/learn/javascript/objects/index.html create mode 100644 files/pt-br/learn/javascript/objects/inheritance/index.html create mode 100644 files/pt-br/learn/javascript/objects/json/index.html create mode 100644 files/pt-br/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/pt-br/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/pt-br/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/pt-br/learn/learning_and_getting_help/index.html create mode 100644 files/pt-br/learn/release_notes/index.html delete mode 100644 files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html create mode 100644 files/pt-br/learn/server-side/django/deployment/index.html create mode 100644 files/pt-br/learn/server-side/django/development_environment/index.html delete mode 100644 files/pt-br/learn/server-side/django/hospedagem/index.html create mode 100644 files/pt-br/learn/server-side/django/introduction/index.html delete mode 100644 "files/pt-br/learn/server-side/django/introdu\303\247\303\243o/index.html" create mode 100644 files/pt-br/learn/server-side/django/sessions/index.html delete mode 100644 "files/pt-br/learn/server-side/django/sess\303\265es/index.html" create mode 100644 files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html delete mode 100644 files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html delete mode 100644 files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html create mode 100644 files/pt-br/learn/server-side/express_nodejs/development_environment/index.html create mode 100644 files/pt-br/learn/server-side/express_nodejs/introduction/index.html delete mode 100644 "files/pt-br/learn/server-side/express_nodejs/introdu\303\247\303\243o/index.html" create mode 100644 files/pt-br/learn/server-side/first_steps/introduction/index.html delete mode 100644 "files/pt-br/learn/server-side/first_steps/introdu\303\247\303\243o/index.html" delete mode 100644 files/pt-br/learn/server-side/first_steps/seguranca_site/index.html create mode 100644 files/pt-br/learn/server-side/first_steps/website_security/index.html delete mode 100644 files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html create mode 100644 files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html create mode 100644 files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html delete mode 100644 files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html create mode 100644 files/pt-br/learn/tools_and_testing/index.html delete mode 100644 "files/pt-br/localiza\303\247\303\243o/index.html" delete mode 100644 files/pt-br/mask/index.html create mode 100644 files/pt-br/mdn/at_ten/index.html delete mode 100644 files/pt-br/mdn/comunidade/index.html delete mode 100644 files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html delete mode 100644 files/pt-br/mdn/comunidade/whats_happening/index.html delete mode 100644 files/pt-br/mdn/contribute/collaboration_tactics/index.html delete mode 100644 files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html delete mode 100644 files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html create mode 100644 files/pt-br/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html create mode 100644 files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html create mode 100644 files/pt-br/mdn/contribute/howto/create_and_edit_pages/index.html create mode 100644 files/pt-br/mdn/contribute/howto/index.html create mode 100644 files/pt-br/mdn/contribute/howto/tag/index.html create mode 100644 files/pt-br/mdn/contribute/processes/index.html delete mode 100644 files/pt-br/mdn/contribute/processos/index.html delete mode 100644 files/pt-br/mdn/editor/basics/index.html delete mode 100644 files/pt-br/mdn/editor/index.html delete mode 100644 files/pt-br/mdn/guidelines/style_guide/index.html create mode 100644 files/pt-br/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/pt-br/mdn/kuma/index.html delete mode 100644 files/pt-br/mdn/paineis/index.html delete mode 100644 files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html create mode 100644 files/pt-br/mdn/tools/kumascript/troubleshooting/index.html delete mode 100644 files/pt-br/mdn/tools/page_regeneration/index.html create mode 100644 files/pt-br/mdn/yari/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html delete mode 100644 "files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 files/pt-br/mozilla/developer_guide/codigo_fonte/index.html create mode 100644 files/pt-br/mozilla/developer_guide/source_code/index.html create mode 100644 files/pt-br/mozilla/firefox/experimental_features/index.html delete mode 100644 files/pt-br/mozilla/firefox/novas_funcionalidades/index.html create mode 100644 files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html delete mode 100644 "files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" create mode 100644 "files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" create mode 100644 files/pt-br/orphaned/hello_world_rust/index.html create mode 100644 files/pt-br/orphaned/instalando_rust/index.html create mode 100644 files/pt-br/orphaned/learn/how_to_contribute/index.html create mode 100644 files/pt-br/orphaned/learn/html/forms/html5_updates/index.html create mode 100644 files/pt-br/orphaned/mdn/community/index.html create mode 100644 files/pt-br/orphaned/mdn/community/whats_happening/index.html create mode 100644 files/pt-br/orphaned/mdn/community/working_in_community/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html create mode 100644 files/pt-br/orphaned/mdn/dashboards/index.html create mode 100644 files/pt-br/orphaned/mdn/editor/basics/index.html create mode 100644 files/pt-br/orphaned/mdn/editor/index.html create mode 100644 files/pt-br/orphaned/mdn/tools/page_regeneration/index.html create mode 100644 files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html create mode 100644 files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/pt-br/orphaned/tools/add-ons/index.html create mode 100644 files/pt-br/orphaned/tools/css_coverage/index.html create mode 100644 files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html create mode 100644 "files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" create mode 100644 "files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" create mode 100644 files/pt-br/orphaned/web/html/element/command/index.html create mode 100644 files/pt-br/orphaned/web/html/favicon/index.html create mode 100644 "files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" create mode 100644 files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html create mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html create mode 100644 files/pt-br/orphaned/web/security/information_security_basics/index.html delete mode 100644 files/pt-br/projeto_colon_como_ajudar_com_mdn/index.html delete mode 100644 files/pt-br/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/pt-br/the_xslt_javascript_interface_in_gecko/advanced_example/index.html delete mode 100644 files/pt-br/the_xslt_javascript_interface_in_gecko/index.html delete mode 100644 files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html delete mode 100644 files/pt-br/tools/add-ons/index.html delete mode 100644 "files/pt-br/tools/atua\303\247\303\243o/index.html" delete mode 100644 files/pt-br/tools/css_coverage/index.html delete mode 100644 files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/pt-br/tools/debugger/index.html create mode 100644 files/pt-br/tools/debugger/set_a_logpoint/index.html delete mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/index.html delete mode 100644 files/pt-br/tools/depurador/index.html delete mode 100644 files/pt-br/tools/depurador/set_a_logpoint/index.html delete mode 100644 "files/pt-br/tools/depura\303\247\303\243o_remota/index.html" delete mode 100644 files/pt-br/tools/editor_de_estilos/index.html create mode 100644 files/pt-br/tools/firefox_os_1.1_simulator/index.html delete mode 100644 files/pt-br/tools/inspetor_de_armazenamento/index.html create mode 100644 files/pt-br/tools/measure_a_portion_of_the_page/index.html delete mode 100644 files/pt-br/tools/medir_uma_porcao_da_pagina/index.html delete mode 100644 files/pt-br/tools/modo_design_adaptavel/index.html delete mode 100644 files/pt-br/tools/notas_de_lancamento/index.html delete mode 100644 files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html delete mode 100644 "files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" create mode 100644 files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/pt-br/tools/performance/index.html create mode 100644 files/pt-br/tools/remote_debugging/index.html create mode 100644 files/pt-br/tools/responsive_design_mode/index.html delete mode 100644 files/pt-br/tools/simulador_firefox_os_1.1/index.html create mode 100644 files/pt-br/tools/storage_inspector/index.html create mode 100644 files/pt-br/tools/style_editor/index.html delete mode 100644 files/pt-br/tools/web_console/opening_the_web_console/index.html create mode 100644 files/pt-br/tools/web_console/ui_tour/index.html delete mode 100644 files/pt-br/using_geolocation/index.html create mode 100644 files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" delete mode 100644 files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html create mode 100644 files/pt-br/web/accessibility/aria/widgets/overview/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" create mode 100644 files/pt-br/web/accessibility/index.html create mode 100644 files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html delete mode 100644 files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html delete mode 100644 files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html delete mode 100644 files/pt-br/web/acessibilidade/desenvolvimento_web/index.html delete mode 100644 files/pt-br/web/acessibilidade/entendendo_wcag/index.html delete mode 100644 files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html delete mode 100644 files/pt-br/web/acessibilidade/index.html delete mode 100644 files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html delete mode 100644 files/pt-br/web/api/api_de_desempenho/index.html delete mode 100644 files/pt-br/web/api/api_push/best_practices/index.html delete mode 100644 files/pt-br/web/api/api_push/index.html delete mode 100644 files/pt-br/web/api/api_web_audio/index.html delete mode 100644 files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html delete mode 100644 files/pt-br/web/api/audiocontext/currenttime/index.html create mode 100644 files/pt-br/web/api/baseaudiocontext/currenttime/index.html create mode 100644 files/pt-br/web/api/battery_status_api/index.html create mode 100644 files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html delete mode 100644 files/pt-br/web/api/batterymanager/ondischargintimechange/index.html create mode 100644 files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/pt-br/web/api/canvas_api/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/pt-br/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/pt-br/web/api/cryptokey/algorithm/index.html delete mode 100644 files/pt-br/web/api/cryptokey/extractable/index.html delete mode 100644 files/pt-br/web/api/cryptokey/type/index.html delete mode 100644 files/pt-br/web/api/cryptokey/usages/index.html delete mode 100644 files/pt-br/web/api/deviceacceleration/index.html create mode 100644 files/pt-br/web/api/devicemotioneventacceleration/index.html create mode 100644 files/pt-br/web/api/devicemotioneventrotationrate/index.html delete mode 100644 files/pt-br/web/api/devicerotationrate/index.html delete mode 100644 files/pt-br/web/api/document/activeelement/index.html delete mode 100644 files/pt-br/web/api/document/elementfrompoint/index.html delete mode 100644 files/pt-br/web/api/document/elementoregistrado/index.html delete mode 100644 files/pt-br/web/api/document/getselection/index.html create mode 100644 files/pt-br/web/api/document/readystatechange_event/index.html create mode 100644 files/pt-br/web/api/document/registerelement/index.html create mode 100644 files/pt-br/web/api/document_object_model/events/index.html create mode 100644 files/pt-br/web/api/document_object_model/examples/index.html create mode 100644 files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/pt-br/web/api/document_object_model/index.html create mode 100644 files/pt-br/web/api/document_object_model/introduction/index.html create mode 100644 files/pt-br/web/api/document_object_model/whitespace/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/getselection/index.html delete mode 100644 files/pt-br/web/api/element/accesskey/index.html delete mode 100644 files/pt-br/web/api/element/addeventlistener/index.html create mode 100644 files/pt-br/web/api/element/blur_event/index.html create mode 100644 files/pt-br/web/api/element/focus_event/index.html create mode 100644 files/pt-br/web/api/element/focusin_event/index.html create mode 100644 files/pt-br/web/api/element/focusout_event/index.html delete mode 100644 files/pt-br/web/api/element/name/index.html delete mode 100644 files/pt-br/web/api/event/comparativo_entre_event_targets/index.html create mode 100644 files/pt-br/web/api/event/comparison_of_event_targets/index.html create mode 100644 files/pt-br/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html delete mode 100644 files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html create mode 100644 files/pt-br/web/api/geolocation_api/index.html create mode 100644 files/pt-br/web/api/history_api/example/index.html delete mode 100644 files/pt-br/web/api/history_api/exemplo/index.html create mode 100644 files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html create mode 100644 files/pt-br/web/api/html_drag_and_drop_api/index.html create mode 100644 files/pt-br/web/api/htmlcontentelement/select/index.html delete mode 100644 files/pt-br/web/api/htmlcontentelement/seletor/index.html create mode 100644 files/pt-br/web/api/htmlelement/accesskey/index.html delete mode 100644 files/pt-br/web/api/htmlelement/blur/index.html delete mode 100644 files/pt-br/web/api/htmlelement/dataset/index.html delete mode 100644 files/pt-br/web/api/htmlelement/focus/index.html create mode 100644 files/pt-br/web/api/htmlelement/innertext/index.html create mode 100644 files/pt-br/web/api/htmlelement/input_event/index.html create mode 100644 files/pt-br/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/blur/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/focus/index.html delete mode 100644 files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/pt-br/web/api/network_information_api/index.html delete mode 100644 "files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" delete mode 100644 files/pt-br/web/api/node/innertext/index.html delete mode 100644 files/pt-br/web/api/notificacoes/index.html create mode 100644 files/pt-br/web/api/notification/index.html create mode 100644 files/pt-br/web/api/performance_api/index.html create mode 100644 files/pt-br/web/api/push_api/best_practices/index.html create mode 100644 files/pt-br/web/api/push_api/index.html delete mode 100644 files/pt-br/web/api/randomsource/getrandomvalues/index.html delete mode 100644 files/pt-br/web/api/randomsource/index.html create mode 100644 files/pt-br/web/api/selection/index.html delete mode 100644 "files/pt-br/web/api/sele\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/api/svgaelement/svgalement.target/index.html create mode 100644 files/pt-br/web/api/svgaelement/target/index.html create mode 100644 files/pt-br/web/api/touch_events/index.html delete mode 100644 files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html create mode 100644 files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html create mode 100644 files/pt-br/web/api/web_audio_api/index.html create mode 100644 files/pt-br/web/api/web_audio_api/simple_synth/index.html create mode 100644 files/pt-br/web/api/web_storage_api/index.html create mode 100644 files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html delete mode 100644 files/pt-br/web/api/web_storage_api_pt_br/index.html delete mode 100644 files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html create mode 100644 files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html delete mode 100644 files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html create mode 100644 files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html delete mode 100644 files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html create mode 100644 files/pt-br/web/api/websockets_api/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_server/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/pt-br/web/api/window/beforeunload_event/index.html create mode 100644 files/pt-br/web/api/window/domcontentloaded_event/index.html create mode 100644 files/pt-br/web/api/window/load_event/index.html create mode 100644 files/pt-br/web/api/window/localstorage/index.html delete mode 100644 files/pt-br/web/api/window/onscroll/index.html delete mode 100644 files/pt-br/web/api/window/url/index.html delete mode 100644 files/pt-br/web/api/window/window.localstorage/index.html delete mode 100644 files/pt-br/web/api/windowbase64/atob/index.html delete mode 100644 files/pt-br/web/api/windowbase64/index.html create mode 100644 files/pt-br/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html delete mode 100644 files/pt-br/web/api/windowtimers/cleartimeout/index.html delete mode 100644 files/pt-br/web/api/windowtimers/index.html delete mode 100644 files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html create mode 100644 files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html delete mode 100644 files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html create mode 100644 files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/pt-br/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/-moz-cell/index.html create mode 100644 files/pt-br/web/css/actual_value/index.html create mode 100644 files/pt-br/web/css/attribute_selectors/index.html create mode 100644 files/pt-br/web/css/box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/box_model/index.html delete mode 100644 "files/pt-br/web/css/coment\303\241rio/index.html" create mode 100644 files/pt-br/web/css/comments/index.html create mode 100644 files/pt-br/web/css/computed_value/index.html delete mode 100644 "files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" create mode 100644 files/pt-br/web/css/css_animations/using_css_animations/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/pt-br/web/css/css_box_model/margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pt-br/web/css/css_colors/seletor_de_cores/index.html create mode 100644 files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html create mode 100644 files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/pt-br/web/css/css_positioning/understanding_z_index/index.html delete mode 100644 files/pt-br/web/css/css_reference/index.html create mode 100644 files/pt-br/web/css/css_selectors/index.html delete mode 100644 files/pt-br/web/css/css_tipos/index.html create mode 100644 files/pt-br/web/css/css_types/index.html delete mode 100644 files/pt-br/web/css/elemento_substituido/index.html delete mode 100644 files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/pt-br/web/css/getting_started/como_css_funciona/index.html delete mode 100644 files/pt-br/web/css/getting_started/index.html delete mode 100644 files/pt-br/web/css/getting_started/javascript/index.html delete mode 100644 files/pt-br/web/css/getting_started/lists/index.html delete mode 100644 files/pt-br/web/css/getting_started/oque_é_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/porque_usar_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/seletores/index.html delete mode 100644 files/pt-br/web/css/hifens/index.html create mode 100644 files/pt-br/web/css/hyphens/index.html create mode 100644 files/pt-br/web/css/image/index.html delete mode 100644 files/pt-br/web/css/imagem/index.html create mode 100644 files/pt-br/web/css/initial_value/index.html create mode 100644 files/pt-br/web/css/layout_mode/index.html create mode 100644 files/pt-br/web/css/mask/index.html create mode 100644 files/pt-br/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pt-br/web/css/modelo_layout/index.html delete mode 100644 files/pt-br/web/css/modelo_visual/index.html create mode 100644 files/pt-br/web/css/overflow-wrap/index.html delete mode 100644 files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html create mode 100644 files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 files/pt-br/web/css/pseudo-elementos/index.html create mode 100644 files/pt-br/web/css/pseudo-elements/index.html create mode 100644 files/pt-br/web/css/reference/index.html create mode 100644 files/pt-br/web/css/replaced_element/index.html create mode 100644 files/pt-br/web/css/resolved_value/index.html delete mode 100644 files/pt-br/web/css/seletor_de_atributos/index.html delete mode 100644 files/pt-br/web/css/seletor_universal/index.html delete mode 100644 files/pt-br/web/css/seletores_css/index.html delete mode 100644 files/pt-br/web/css/sintaxe/index.html delete mode 100644 files/pt-br/web/css/sintexe_valor/index.html create mode 100644 files/pt-br/web/css/specified_value/index.html create mode 100644 files/pt-br/web/css/syntax/index.html delete mode 100644 files/pt-br/web/css/tools/border-image_generator/index.html delete mode 100644 files/pt-br/web/css/tools/border-radius_generator/index.html create mode 100644 files/pt-br/web/css/universal_selectors/index.html create mode 100644 files/pt-br/web/css/used_value/index.html delete mode 100644 files/pt-br/web/css/valor_atual/index.html delete mode 100644 files/pt-br/web/css/valor_computado/index.html delete mode 100644 files/pt-br/web/css/valor_espeficifco/index.html delete mode 100644 files/pt-br/web/css/valor_inicial/index.html delete mode 100644 files/pt-br/web/css/valor_resolvido/index.html delete mode 100644 files/pt-br/web/css/valor_usado/index.html create mode 100644 files/pt-br/web/css/value_definition_syntax/index.html create mode 100644 files/pt-br/web/css/visual_formatting_model/index.html delete mode 100644 files/pt-br/web/css/word-wrap/index.html delete mode 100644 files/pt-br/web/events/abort/index.html delete mode 100644 files/pt-br/web/events/beforeunload/index.html delete mode 100644 files/pt-br/web/events/blur/index.html delete mode 100644 files/pt-br/web/events/domcontentloaded/index.html delete mode 100644 files/pt-br/web/events/focus/index.html delete mode 100644 files/pt-br/web/events/focusin/index.html delete mode 100644 files/pt-br/web/events/focusout/index.html delete mode 100644 files/pt-br/web/events/input/index.html delete mode 100644 files/pt-br/web/events/load/index.html delete mode 100644 files/pt-br/web/events/readystatechange/index.html delete mode 100644 files/pt-br/web/guide/css/css_media_queries/index.html delete mode 100644 "files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" delete mode 100644 files/pt-br/web/guide/css/scaling_background_images/index.html delete mode 100644 files/pt-br/web/guide/css/understanding_z_index/index.html create mode 100644 files/pt-br/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html delete mode 100644 files/pt-br/web/guide/events/touch_events/index.html create mode 100644 files/pt-br/web/guide/graphics/index.html delete mode 100644 "files/pt-br/web/guide/gr\303\241ficos/index.html" delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html delete mode 100644 "files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html delete mode 100644 files/pt-br/web/guide/html/categorias_de_conteudo/index.html create mode 100644 files/pt-br/web/guide/html/content_categories/index.html delete mode 100644 files/pt-br/web/guide/html/content_editable/index.html create mode 100644 files/pt-br/web/guide/html/editable_content/index.html delete mode 100644 files/pt-br/web/guide/html/forms/form_validation/index.html delete mode 100644 files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html delete mode 100644 files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/pt-br/web/guide/html/forms/index.html delete mode 100644 files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html delete mode 100644 files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html delete mode 100644 files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/pt-br/web/guide/html/html5/index.html create mode 100644 files/pt-br/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/guide/html/using_data_attributes/index.html create mode 100644 files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html create mode 100644 files/pt-br/web/guide/introduction_to_web_development/index.html create mode 100644 files/pt-br/web/guide/mobile/mobile-friendliness/index.html create mode 100644 files/pt-br/web/guide/mobile/separate_sites/index.html create mode 100644 files/pt-br/web/html/attributes/index.html create mode 100644 files/pt-br/web/html/block-level_elements/index.html delete mode 100644 files/pt-br/web/html/canvas/a_basic_ray-caster/index.html delete mode 100644 files/pt-br/web/html/canvas/index.html delete mode 100644 files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html create mode 100644 files/pt-br/web/html/cors_enabled_image/index.html delete mode 100644 files/pt-br/web/html/cors_imagens_habilitadas/index.html delete mode 100644 "files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" delete mode 100644 files/pt-br/web/html/element/command/index.html create mode 100644 files/pt-br/web/html/element/content/index.html delete mode 100644 "files/pt-br/web/html/element/conte\303\272do/index.html" delete mode 100644 files/pt-br/web/html/element/figura/index.html create mode 100644 files/pt-br/web/html/element/figure/index.html delete mode 100644 files/pt-br/web/html/element/input/data/index.html create mode 100644 files/pt-br/web/html/element/input/date/index.html delete mode 100644 files/pt-br/web/html/elementos_block-level/index.html delete mode 100644 files/pt-br/web/html/favicon/index.html delete mode 100644 files/pt-br/web/html/formatos_midia_suportados/index.html create mode 100644 files/pt-br/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/pt-br/web/html/html5/index.html delete mode 100644 files/pt-br/web/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/html/inline_elemente/index.html create mode 100644 files/pt-br/web/html/inline_elements/index.html delete mode 100644 files/pt-br/web/html/microformatos/index.html create mode 100644 files/pt-br/web/html/microformats/index.html delete mode 100644 files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/pt-br/web/html/reference/index.html delete mode 100644 files/pt-br/web/html/referenciahtml/index.html delete mode 100644 files/pt-br/web/html/using_html5_audio_and_video/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/mime_types/index.html create mode 100644 files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/pt-br/web/http/basics_of_http/index.html create mode 100644 files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/pt-br/web/http/basics_of_http/mime_types/index.html create mode 100644 files/pt-br/web/http/caching/index.html create mode 100644 files/pt-br/web/http/compression/index.html delete mode 100644 "files/pt-br/web/http/compress\303\243o/index.html" create mode 100644 files/pt-br/web/http/connection_management_in_http_1.x/index.html delete mode 100644 files/pt-br/web/http/controle_acesso_cors/index.html create mode 100644 files/pt-br/web/http/cors/index.html delete mode 100644 "files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" delete mode 100644 "files/pt-br/web/http/headers/conex\303\243o/index.html" create mode 100644 files/pt-br/web/http/headers/connection/index.html delete mode 100644 "files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" create mode 100644 files/pt-br/web/http/headers/location/index.html delete mode 100644 files/pt-br/web/http/http/index.html delete mode 100644 files/pt-br/web/http/mensagens/index.html create mode 100644 files/pt-br/web/http/messages/index.html delete mode 100644 files/pt-br/web/http/redirecionamento/index.html create mode 100644 files/pt-br/web/http/redirections/index.html delete mode 100644 files/pt-br/web/http/server-side_access_control/index.html create mode 100644 files/pt-br/web/javascript/closures/index.html delete mode 100644 files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html create mode 100644 files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html delete mode 100644 files/pt-br/web/javascript/guide/closures/index.html delete mode 100644 "files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" create mode 100644 files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 "files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" create mode 100644 files/pt-br/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html delete mode 100644 files/pt-br/web/javascript/guide/formatando_texto/index.html create mode 100644 files/pt-br/web/javascript/guide/functions/index.html delete mode 100644 "files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" create mode 100644 files/pt-br/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/pt-br/web/javascript/guide/igualdade/index.html delete mode 100644 files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html create mode 100644 files/pt-br/web/javascript/guide/iterators_and_generators/index.html delete mode 100644 files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html create mode 100644 files/pt-br/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/pt-br/web/javascript/guide/modules/index.html delete mode 100644 "files/pt-br/web/javascript/guide/m\303\263dulos/index.html" create mode 100644 files/pt-br/web/javascript/guide/numbers_and_dates/index.html delete mode 100644 files/pt-br/web/javascript/guide/numeros_e_datas/index.html delete mode 100644 files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html create mode 100644 files/pt-br/web/javascript/guide/text_formatting/index.html delete mode 100644 files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html delete mode 100644 files/pt-br/web/javascript/guide/usando_promises/index.html create mode 100644 files/pt-br/web/javascript/guide/using_promises/index.html delete mode 100644 files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html create mode 100644 files/pt-br/web/javascript/guide/working_with_objects/index.html create mode 100644 files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html delete mode 100644 "files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" delete mode 100644 files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/not_defined/index.html delete mode 100644 "files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" delete mode 100644 "files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" create mode 100644 files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/pt-br/web/javascript/reference/functions/default_parameters/index.html delete mode 100644 files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html create mode 100644 files/pt-br/web/javascript/reference/functions/method_definitions/index.html delete mode 100644 files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/contains/index.html create mode 100644 files/pt-br/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html create mode 100644 files/pt-br/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_condicional/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_virgula/index.html delete mode 100644 "files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/spread_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/async_function/index.html delete mode 100644 files/pt-br/web/javascript/reference/statements/default/index.html delete mode 100644 files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html create mode 100644 files/pt-br/web/javascript/reference/template_literals/index.html delete mode 100644 files/pt-br/web/javascript/reference/template_strings/index.html create mode 100644 files/pt-br/web/mathml/examples/index.html delete mode 100644 files/pt-br/web/mathml/exemplos/index.html create mode 100644 files/pt-br/web/media/formats/index.html delete mode 100644 files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html create mode 100644 files/pt-br/web/performance/critical_rendering_path/index.html create mode 100644 files/pt-br/web/progressive_web_apps/introduction/index.html delete mode 100644 "files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" delete mode 100644 "files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/svg/intensivo_de_namespaces/index.html create mode 100644 files/pt-br/web/svg/namespaces_crash_course/index.html delete mode 100644 files/pt-br/web/tutoriais/index.html create mode 100644 files/pt-br/web/tutorials/index.html delete mode 100644 files/pt-br/web/web_components/usando_custom_elements/index.html create mode 100644 files/pt-br/web/web_components/using_custom_elements/index.html create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html delete mode 100644 files/pt-br/web_development/mobile/design_responsivo/index.html delete mode 100644 files/pt-br/web_development/mobile/index.html delete mode 100644 files/pt-br/web_development/mobile/mobile-friendliness/index.html delete mode 100644 files/pt-br/web_development/mobile/sites_separados/index.html delete mode 100644 files/pt-br/webapi/battery_status/index.html delete mode 100644 files/pt-br/webapi/index.html delete mode 100644 files/pt-br/webapi/network_information/index.html delete mode 100644 files/pt-br/webassembly/entendendo_o_formato_textual_do_webassembly/index.html create mode 100644 files/pt-br/webassembly/understanding_the_text_format/index.html delete mode 100644 files/pt-br/webassembly/usando_a_api_javascript_do_webassembly/index.html create mode 100644 files/pt-br/webassembly/using_the_javascript_api/index.html delete mode 100644 files/pt-br/webrtc/index.html delete mode 100644 files/pt-br/websockets/escrevendo_aplicacoes_cliente_websocket/index.html delete mode 100644 files/pt-br/websockets/index.html delete mode 100644 files/pt-br/websockets/writing_websocket_server/index.html delete mode 100644 files/pt-br/websockets/writing_websocket_servers/index.html delete mode 100644 files/pt-br/xhtml/index.html (limited to 'files') diff --git a/files/pt-br/aprender/como_contribuir/index.html b/files/pt-br/aprender/como_contribuir/index.html deleted file mode 100644 index 8b9cdfb15b..0000000000 --- a/files/pt-br/aprender/como_contribuir/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Como contribuir para a área de aprendizagem da MDN -slug: Aprender/Como_contribuir -tags: - - Documentação - - Guia(2) - - Iniciante - - MDN Meta - - aprendizado - - contribuir - - prioridde - - pt-br -translation_of: Learn/How_to_contribute ---- -

Se você está aqui pela primeira vez ou após uma pesquisa mais aprofundada, é porque provavelmente você está interessado em contribuir para a área de aprendizado da MDN. Isto é uma excelente notícia!

- -

Nesta página, você irá encontrar tudo o que você precisa para começar a ajudar a melhorar o conteúdo de aprendizado da MDN. Existem muitas coisas que você pode fazer, dependendo de quanto tempo você tem disponível ou se você éum iniciante, um desenvolvedor web, ou um professor.

- -
-

Nota: se você já é um contribuinte do MDN, não hesite em checar novamente a pagina com o status da documentação para acompanhar o trabalho que tem sido feito e ver quais prioridades estão sendo escritas.

-
- -
-

Nota: Os contribuintes estão utilizando um painel na Trello para organizar as suas tarefas. Se você quiser utilizar esta ferramenta, apena se registre na Trello e procure por Jeremie lhe dar acesso de escrita ao painel.

-
- -

Encontre tarefas específicas

- -

Uma forma comum que as pessoas usam para contribuir para a Área de aprendizado é lendo os artigos, corrigindo erros de digitação e sugerindo melhorias. Adição de exemplos no nosso repositório do github também é bem vindo e entre em contato conosco se você quiser pedir o que mais precisar.

- -

Contribuir é um ótimo modo de se divertir enquanto aprende novas coisas. Se você se sentir perdido ou tiver dúvidas, não hesite em chegar até nós no "Fórum de conversa e aprendizado" ou no canal IRC (Veja o final da página para mais detalhes). Chris Mills é o "topic driver" da Área de aprendizado - você também poderia tentar contatá-lo diretamente.

- -

As sessões a seguir oferecem algumas ideias gerais de tipos de tarefas que você pode fazer.

- -

Eu sou um iniciante

- -

Isto é incrível!  Iniciantes são muito importantes e valiosos para criar e dar feedback sobre o material de aprendizado. Você possui uma perspectiva única destes artigos já que você faz parte do público alvo, o que pode torna-lo um membro valioso da nossa equipe. De fato, se você está utilizando um dos nossos artigos para aprender algo e você ficar preso, ou de alguma forma achar o artigo confuso, você pode consertar isso ou nos contar sobre o problema para nós nos certificarmos que isso será corrigido.

- -

Contribuir também é uma ótima maneira de se divertir enquanto aprende coisas novas se você se sentir perdido ou tiver perguntas, não hesite em nos contatar na nossa lista de e-mail ou no nosso canal IRC (obtenha detalhes na parte inferior desta página).

- -

Aqui temos algumas sugestões de como você pode contribuir:

- -
-
Adicionar tags para os nossos artigos (5 min)
-
Adicionar tags para o conteúdo do MDN é uma das maneiras mais fáceis de contribuir para a MDN. Uma de nossas diversas características é utilizar tags para ajudar no contexto da informação, é muito valioso contribuir com as tags. Para começar, dê uma olhada nesta lista de entradas do glosário e artigos de aprendizagem sem nenhuma tag.
-
Escrever e revisar entradas no glossário (15 min)
-
Como um iniciante, precisamos dos seus olhos ainda frescos olhando para o nosso conteúdo. Se você achar a entrada no glossário difícil de compreender, isto significa que está entrada precisa ser melhorada. Sinta-se livre para fazer qualquer mudança que você ache necessária. Se você acredita não ter a habilidade necessária para editar a entrada por você mesmo, nos comunique através da nossa lista de e-mail.
-
Escrever uma nova entrada no glossário (1 horas)
-
Esta é a maneira mais efetiva de aprender algo novo. Pegue um conceito sobre o qual você deseja aprender, e conforme você aprende sobre ele, escreva uma entrada no glossário. Explicar algo para os outros é uma ótima maneira de consolidar o conhecimento no seu cérebro, e ajudar para que as coisas possam fazer mais sentido para você, tudo enquanto ajuda outras pessoas. Todo mundo ganha!.
-
Ler e revisar um artigo de aprendizagem (2 horas)
-
É muito parecido com revisar entradas no glossário (veja acima); apenas leva mais tempo, geralmente estes artigos são um pouco maiores.
-
- -

Eu sou um desenvolvedor web

- -

Fantástico! Suas habilidades técnicas são tudo o que nós precisamos para certeza que fornecemos um conteúdo preciso para os iniciantes. Como esta parte específica do MDN é dedicada à aprendizagem da Web, certifique-se que as suas explicações são as mais simples possíveis, simples, porém úteis. É mais importante ser compreensível do que ser excessivamente precisa.

- -
-
Escrever e revisar entradas no glossário (15 min)
-
Como um desenvolvedor web, nós precisamos de você tenha certeza que o nosso conteúdo é tecnicamente preciso, sem ser muito tedioso. Sinta-se livre para fazer qualquer mudança que você achar necessário. Se você quiser discutir o conteúdo antes da edição, nos contate na nossa lista de e-mail ou canal IRC.
-
Escrever uma nova entrada no glossário (1 hora)
-
Esclarecer termos técnicos é uma boa forma de aprender e ser ao mesmo tempo tecnicamente preciso e simples. Os iniciantes vão agradecer por isso. Nós temos muitos termos indefinidos que precisam da sua atenção. Pegue um e você já estará pronto para começar.
-
Escrever e revisar artigos de prendizagem (2 hora)
-
Esta é a mesma coisa que revisar uma entrada do glossário (ver acima); ela só leva um pouco mais de tempo pois estes artigos são um pouco maiores.
-
Escrever um novo artigo de aprendizagem (4 horas)
-
A MDN está em falta de alguns artigos simples sobre o uso de tecnologias web (HTML, CSS, JavaScript, etc). Temos também alguns conteúdos antigos na MDN que merecem ser revisados e reformulados. Leve as suas habilidades ao limite para tornar as tecnologias da Web utilizáveis mesmo para os iniciantes.
-
Criar exercícios, exemplos de código e ferramentas de aprendizagem interativas (? horas)
-
Todos os nossos artigos de aprendizagem exigem que chamamos de "aprendizagem ativa", porque as pessoas aprendem melhor fazendo algo por si mesmas. Tais materiais são exercícios ou conteúdos interativos que ajudam o usuário a aplicar e manipular os conceitos descritos em um artigo. Há muitas formas possíveis de tornar os conteúdos de aprendizagem interativos, desde a criação de amostras de código com JSFiddle, ou similar, liberte a sua criatividade para a construção de conteúdo interativo com Thimble.
-
- -

Eu sou um professor

- -

A MDN tem uma longa história de excelência técnica, mas falta profundidade de compreensão da melhor maneira de ensinar conceitos para os recém-chegados. E é aqui que precisamos de você, como um professor ou educador. Você pode nos ajudar a garantir que os nossos materiais possuam uma boa didática, e que sejam práticos para os nossos leitores.

- -
-
Ler e revisar uma entrada no glossário (15 min)
-
Confira uma entrada de glossário e sinta-se livre para fazer qualquer alteração que você ache necessária. Se você quiser discutir sobre o conteúdo antes da edição, entre em contato conosco na nossa lista de e-mail ou canal IRC.
-
Escrever uma nova entrada no glossário  (1 hora)
-
Definições claras, simples de termos e conceitos básicos no glossário são fundamentais para atender às necessidades dos iniciantes. Sua experiência como educador pode ajudar a criar excelentes entradas de glossário; temos muitos termos indefinidos que precisam da sua atenção. Escolha um e vá a diante.
-
Adicionar ilustrações/ou esquemas para os artigos (1 hora)
-
Como você deve saber, as ilustrações são uma parte valiosa de qualquer conteúdo de aprendizagem. Isso é algo que muitas vezes não temos na MDN e suas habilidades podem fazer a diferença nessa área. Confira os artigos que necessitam conteúdo ilustrativo e pegue um que você queira criar gráficos.
-
Ler e revisar um artigo de aprendizagem (2 horas)
-
Isto é semelhante a revisar entradas de glossário (veja acima), mas exige mais tempo porque os artigos são um pouco maiores.
-
Escrever um novo artigo de aprendizagem (4 horas)
-
Precisamos de artigos simples e diretos sobre o ecossistema da Web e outros temas funcionais em torno deste tema. Uma vez que estes artigos de aprendizagem precisam ser educativos ao invés de tentar literalmente cobrir tudo que há para saber, sua experiência em saber o que cobrir será um grande trunfo.
-
Criar exercícios, questionários e ferramentas interativas de aprendizado (? horas)
-
Todos os nossos artigos de aprendizagem exigem "aprendizagem ativa". Tais materiais são exercícios ou conteúdo interativo que ajudam ao usuário aprender a usar e expandir os conceitos descritos em um artigo. Há muitas coisas que você pode fazer aqui, você pode ciar questionários para a construção de conteúdo interativo com o Thimble. Solte a sua criatividade!
-
Criar planos de aprendizagem (? horas)
-
A fim de fornecer tutoriais compreensíveis, precisamos moldar o nosso conteúdo em planos de aprendizagem. Esta é uma maneira de reunir o conteúdo existente e descobrir o que está faltando para criar um bom artigo de aprendizagem.
-
diff --git a/files/pt-br/aprender/css/construindo_blocos/cascade_and_inheritance/index.html b/files/pt-br/aprender/css/construindo_blocos/cascade_and_inheritance/index.html deleted file mode 100644 index b3988ca69b..0000000000 --- a/files/pt-br/aprender/css/construindo_blocos/cascade_and_inheritance/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Cascade and inheritance -slug: Aprender/CSS/Construindo_blocos/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

O objetivo desta lição é desenvolver sua compreensão para alguns dos conceitos mais fundamentais de CSS - cascata, especificidade e herança - que controlam como o CSS é aplicado ao HTML e como os conflitos são resolvidos.

- -

Embora esta lição possa parecer menos pouco relevante e mais acadêmico do que algumas outras partes do curso, a compreensão desses itens (cascata, especificidade e herança), poupará muito tempo no futuro! Recomendamos que você trabalhe nesta seção com cuidado e verifique se entendeu os conceitos antes de prosseguir.

- - - - - - - - - - - - -
Pré-requisitos:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objectivo:Aprender sobre cascata e especificidade, e como funciona a herança em CSS.
- -

Regras de Conflitos

- -

CSS - Cascading Style Sheets, cascata (a primeira palavra) é muito importante compreender - a maneira como a cascata se comporta é a chave para entender CSS.

- -

Em algum momento, você estará trabalhando em um projeto e descobrirá que o CSS que você pensou que deveria ser aplicado a um elemento não está funcionando. Normalmente, o problema é que você criou duas regras que poderiam se aplicar ao mesmo elemento. A cascata e o conceito intimamente relacionado com especificidade que são mecanismos que controlam qual regra se aplica quando existe tal conflito. A regra que define o estilo do seu elemento pode não ser a esperada, portanto, você precisa entender como esses mecanismos funcionam.

- -

Também é importante aqui é o conceito de herança, o que significa que algumas propriedades CSS por padrão herdam os valores definidos no elemento pai do elemento atual, e outras não. Isso também pode causar algum comportamento que você não esperava.

- -

Vamos começar dando uma olhada rápida nas nestes itens com os quais estamos lidando (cascata, especificidade e herança), então vamos ver como elas interagem entre si e com o CSS. Isso pode parecer um conjunto de conceitos difíceis de entender, mas a medida que você pratica mais a escrita de CSS, o funcionamento vai se tornando mais óbvio para você.

- -

The cascade - A Cascata

- -

Stylesheets cascade (Cascata) — em um nível muito simples, significa que a ordem das regras CSS é importante; quando se aplicam duas regras com especificidade igual, a que vier por último no CSS é a que será usada.

- -

No exemplo abaixo, temos duas regras que podem ser aplicadas ao h1. O h1 acaba tendo a cor azul - essas regras têm um seletor idêntico e, portanto, carregam a mesma especificidade, portanto, o último na ordem de origem vence.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Specificity - Especificidade

- -

A especificidade é como o navegador decide/verifica qual regra se aplica se várias regras têm seletores diferentes, que poderiam ser aplicadas ao mesmo elemento. É basicamente uma medição de qual das regras/caracteristicas específica será a mais indicada/específica de um seletor:

- - - -

Hora do exemplo! Abaixo, temos novamente duas regras que podem ser aplicadas ao h1. O h1 abaixo acaba sendo colorido em vermelho - o seletor de classe dá a sua regra uma especificidade mais alta e, portanto, será aplicada mesmo que a regra com o seletor de elemento apareça mais abaixo na ordem de origem.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Explicaremos a pontuação de especificidade mais tarde.

- -

Inheritance - Herança

- -

A herança também precisa ser entendida neste contexto - alguns valores de propriedade CSS definidos em elementos pais são herdados por seus elementos filhos e outros não.

- -

Por exemplo, se você definir uma cor e uma família de fontes em um elemento, todos os elementos dentro dele também serão estilizados com essa cor e fonte, a menos que você tenha aplicado cores e valores de fonte diferentes diretamente a eles.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Algumas propriedades não herdam - por exemplo, se você definir um {{cssxref ("width")}} de 50% em um elemento, todos os seus descendentes não terão uma largura de 50% da largura de seus pais. Se fosse esse o caso, CSS seria muito frustrante de usar!

- -
-

Note: Nas páginas de referência de propriedade CSS do MDN, você pode encontrar uma caixa de informações técnicas, geralmente na parte inferior da seção de especificações, que lista uma série de pontos de dados sobre essa propriedade, incluindo se ela é herdada ou não. Veja o color property Specifications section (seção de especificações de propriedade de cor) , por exemplo.

-
- -

Entendendo como os conceitos funcionam juntos

- -

Esses três conceitos juntos controlam que caractersticas CSS se aplicam a qual elemento; nas seções a seguir, veremos como eles funcionam juntos. Às vezes pode parecer um pouco complicado, mas você começará a entende-los conforme for ficando mais experiente com CSS, e você sempre poderá consultar os detalhes se esquecer! Mesmo os desenvolvedores experientes não se lembram de todos os detalhes.

- -

O vídeo a seguir mostra como você pode usar o Firefox DevTools para inspecionar a cascata, a especificidade de uma página e muito mais:

- -

{{EmbedYouTube("Sp9ZfSvpf7A")}}

- -

Entendendo Herança

- -

Começaremos com herança. No exemplo abaixo, temos um {{HTMLElement ("ul")}}, com dois níveis de listas não ordenadas aninhadas dentro dele. Demos ao <ul> externo uma borda, preenchimento e uma cor de fonte.

- -

A cor foi aplicada aos filhos diretos, mas também aos filhos indiretos - os filhos imediatos <li> são aqueles dentro da primeira lista aninhada. Em seguida, adicionamos uma classe especial à segunda lista aninhada e aplicamos uma cor diferente a ela. Isso então é herdado por meio de seus filhos.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

Coisas como larguras (conforme mencionado acima), margens, preenchimento e bordas não são herdadas. Se uma borda fosse herdada pelos filhos de nossa lista, cada lista e cada item da lista ganhariam uma borda - provavelmente não é um efeito que desejaríamos!

- -

Quais propriedades são herdadas por padrão e quais não são, depende do bom senso.

- -

Controlando Herança

- -

CSS fornece quatro valores especiais de propriedades universais para controlar a herança. Cada propriedade CSS aceita esses valores.

- -

{{cssxref("inherit")}}

- -

    Define o valor da propriedade aplicada a um elemento selecionado para ser o mesmo de          seu elemento pai. Efetivamente, isso "ativa a herança".

- -

{{cssxref("initial")}}

- -
-
Define o valor da propriedade aplicada a um elemento selecionado para o valor inicial dessa propriedade.
-
{{cssxref("unset")}}
-
Restaura a propriedade com seu valor natural, o que significa que se a propriedade é herdada naturalmente, ela age como herdada, caso contrário, ela age como inicial.
-
- -
-

Note: Temos um comando mais recente, {{cssxref("revert")}}, mas nem todos os navegadores suportam

-
- -
-

Note: veja {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}}para obter mais informações sobre como cada um deles funcionam.

-
- -

Podemos ver uma lista de links e explorar como funcionam os valores universais. O exemplo ao vivo abaixo permite que você brinque com o CSS e veja o que acontece quando você faz alterações. Usar/modificar o código é realmente a melhor maneira de se familiarizar com HTML e CSS.

- -

Por exemplo:

- -
    -
  1. O segundo item da lista tem a classe my-class-1 aplicada. Isso define a cor do elemento <a> aninhado dentro para herdar. Se você remover a regra, como ela muda a cor do link?
    2. -
  2. Você consegue entende por que o terceiro e o quarto links são da mesma cor? Verifique a descrição dos valores acima se não.
    3. -
  3. Qual dos links mudará de cor se você definir uma nova cor para o elemento <a> - por exemplo, um {color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Redefinindo todos os Valores de Propriedade

- -

A propriedade abreviada CSS all pode ser usada para aplicar um desses valores de herança a (quase) todas as propriedades de uma vez. Seu valor pode ser qualquer um dos valores de herança (herdar, inicial, não definido ou reverter). É uma maneira conveniente de desfazer as alterações feitas nos estilos para que você possa voltar a um ponto de partida conhecido antes de iniciar novas alterações.

- -

No exemplo abaixo, temos duas aspas em bloco. O primeiro tem um estilo aplicado ao próprio elemento blockquote, o segundo tem uma classe aplicada ao blockquote que define o valor de all (todos) como unset (indefinido).

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Tente definir o valor de todos para alguns dos outros valores disponíveis e observe qual é a diferença.

- -

Compreendendo Cascata

- -

Agora entendemos por que um parágrafo aninhado profundamente na estrutura do seu HTML tem a mesma cor do CSS aplicado ao corpo e, a partir das lições introdutórias, entendemos como alterar o CSS aplicado a algo em qualquer ponto do documento - seja atribuindo CSS a um elemento ou criando uma classe. Agora daremos uma olhada apropriada em como a cascata define quais regras CSS se aplicam quando mais de uma coisa pode estilizar um elemento.

- -

Há três fatores a serem considerados, listados aqui em ordem crescente de importância. Os posteriores anulam os anteriores:

- -
    -
  1. Ordem da Fonte
    2. -
  2. Especificidade
    3. -
  3. Importância
    4. -
- -

Vamos dar uma olhada neles para ver como os navegadores descobrem exatamente o que CSS deve ser aplicado.

- -

Ordem da Fonte (origem)

- -

Já vimos como a ordem da fonte é importante para a cascata. Se você tiver mais de uma regra, que tenha exatamente o mesmo peso, a que vier por último no CSS será a vencedora. Você pode pensar nisso como regras que estão mais próximas do próprio elemento, sobrescrevendo as anteriores, até que a última vença e dê estilo ao elemento.

- -

Especificidade

- -

Depois de compreender o fato de que a ordem da fonte é importante, em algum momento você se deparará com uma situação em que saberá que uma regra vem depois na folha de estilo, mas uma regra anterior conflitante é aplicada. Isso ocorre porque a regra anterior tem uma especificidade mais alta - é mais específica e, portanto, está sendo escolhida pelo navegador como a que deve estilizar o elemento.
-
- Como vimos anteriormente nesta lição, um seletor de classe tem mais peso do que um seletor de elemento, portanto, as propriedades definidas na classe substituirão aquelas aplicadas diretamente ao elemento.
-
- Algo a se notar aqui é que, embora estejamos pensando em seletores e nas regras que são aplicadas ao que eles selecionam, não é a regra inteira que é substituída, apenas as propriedades que são iguais.

- -

Esse comportamento ajuda a evitar a repetição em seu CSS. Uma prática comum é definir estilos genéricos para os elementos básicos e, em seguida, criar classes para aqueles que são diferentes. Por exemplo, abaixo definimos estilos genéricos para títulos de nível 2 e, em seguida, criamos algumas classes que alteram apenas algumas das propriedades e valores. Os valores definidos inicialmente são aplicados a todos os títulos, depois os valores mais específicos são aplicados aos títulos com as classes.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Vamos agora dar uma olhada em como o navegador calculará a especificidade. Já sabemos que um seletor de elemento tem baixa especificidade e pode ser substituído por uma classe. Essencialmente, um valor em pontos é concedido a diferentes tipos de seletores, e somar esses pontos dá a você o peso daquele seletor específico, que pode então ser avaliado em relação a outras combinações potenciais.

- -

A quantidade de especificidade que um seletor tem é medida usando quatro valores (ou componentes) diferentes, que podem ser considerados como milhares, centenas, dezenas e uns - quatro dígitos únicos em quatro colunas:

- -
    -
  1. Thousands: marque um nesta coluna se a declaração estiver dentro de um atributo {{htmlattrxref ("style")}}, também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000.
    2. -
  2. Hundreds: marque um nesta coluna para cada seletor de ID contido no seletor geral.
    3. -
  3. Tens: marque um nesta coluna para cada seletor de classe, seletor de atributo ou pseudoclasse contido no seletor geral.
    4. -
  4. Ones: marque um nesta coluna para cada seletor de elemento ou pseudoelemento contido dentro do seletor geral.
    5. -
- -
-

Note: O Seletor universal (*), combinadores (+, >, ~, ' '), e pseudo-classe de negação (:not) não tem efeito de especificidade.

-
- -

A tabela a seguir mostra alguns exemplos isolados para colocá-lo no clima. Experimente passar por eles e certifique-se de entender por que eles têm a especificidade que demos a eles. Ainda não cobrimos os seletores em detalhes, mas você pode encontrar detalhes de cada seletor em MDN  selectors reference.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorThousandsHundredsTensOnesTotal specificity
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute10001000
- -

Antes de prosseguirmos, vejamos um exemplo em ação.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Então, o que está acontecendo aqui? Em primeiro lugar, estamos interessados ​​apenas nas primeiras sete regras deste exemplo e, como você notará, incluímos seus valores de especificidade em um comentário antes de cada uma.

- - - -
    -
- -
-

Note: Este foi apenas um exemplo aproximado para facilitar a compreensão. Na realidade, cada tipo de seletor tem seu próprio nível de especificidade que não pode ser substituído por seletores com um nível de especificidade inferior. Por exemplo, um milhão de seletores de classe combinados não seriam capazes de sobrescrever as regras de um seletor de id.

- -

Uma forma mais precisa de avaliar a especificidade seria pontuar os níveis de especificidade individualmente começando do mais alto e passando para o mais baixo quando necessário. Somente quando há um empate entre as pontuações do seletor dentro de um nível de especificidade, você precisa avaliar o próximo nível abaixo; caso contrário, você pode desconsiderar os seletores de nível de especificidade inferior, pois eles nunca podem substituir os níveis de especificidade mais altos.

-
- -

! Importante

- -

Existe uma parte especial do CSS que você pode usar para ignorar todos os cálculos acima, no entanto, você deve ter muito cuidado ao usá-la -! Importante. Isso é usado para tornar uma determinada propriedade e valor a coisa mais específica, substituindo assim as regras normais da cascata.
-
- Dê uma olhada neste exemplo onde temos dois parágrafos, um dos quais tem um ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Vamos examinar isso para ver o que está acontecendo - tente remover algumas das propriedades para ver o que acontece e se você tiver dificuldade de entender:

- -
    -
  1. Você verá que os valores da terceira regra {{cssxref ("color")}} e {{cssxref ("padding")}} foram aplicados, mas o {{cssxref ("background-color")}} não foram?. Por quê? Na verdade, todos os três devem ser aplicados, porque as regras posteriores na ordem de origem geralmente substituem as regras anteriores.
    2. -
  2. No entanto, as regras acima vencem, porque os seletores de classe têm uma especificidade mais alta do que os seletores de elemento.
    3. -
  3. Ambos elementos tem {{htmlattrxref("class")}} de better (melhor), mas o segundo tem um id {{htmlattrxref("id")}} que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe.
    4. -
  4. O segundo elemento obtém a cor de fundo vermelha, mas sem borda. Por quê? Por causa da declaração! Important na segunda regra - incluindo isso depois de border: none significa que essa declaração vai superar o valor de border na regra anterior, embora o ID tenha uma especificidade mais alta.
    5. -
- -
-

Note: A única maneira de sobrescrever essa declaração! Importante seria incluir outra declaração! Importante em uma declaração com a mesma especificidade posteriormente na ordem de origem, ou uma com uma especificidade mais alta.

-
- -

É útil saber que! Important existe para que você saiba o que é quando o encontrar no código de outras pessoas. No entanto, recomendamos enfaticamente que você nunca o use, a menos que seja absolutamente necessário. ! mudanças importantes na maneira como a cascata normalmente funciona, portanto, pode tornar a depuração de problemas CSS realmente difícil de resolver, especialmente em uma folha de estilo grande.

- -

Uma situação em que você pode ter que usá-lo é quando você está trabalhando em um CMS onde você não pode editar os módulos CSS principais e você realmente deseja sobrescrever um estilo que não pode ser sobrescrito de nenhuma outra maneira. Mas, sério, não use se você puder evitar.

- -

O Efeito da Localização CSS

- -

Por fim, também é útil observar que a importância de uma declaração CSS depende em qual folha de estilo ela é especificada - é possível que os usuários definam folhas de estilo personalizadas para substituir os estilos do desenvolvedor, por exemplo, o usuário pode ser deficiente visual e deseja para definir o tamanho da fonte em todas as páginas da Web que eles visitam com o dobro do tamanho normal para permitir uma leitura mais fácil.

- -

Resumindo

- -

As declarações conflitantes serão aplicadas na seguinte ordem, com as posteriores substituindo as anteriores:

- -
    -
  1. Declarações nas folhas de estilo do agente do usuário (por exemplo, os estilos padrão do navegador, usados quando nenhum outro estilo está definido).
    2. -
  2. Declarações normais em folhas de estilo do usuário (estilos personalizados definidos por um usuário).
    3. -
  3. Declarações normais em folhas de estilo do autor (esses são os estilos definidos por nós, os desenvolvedores da web).
    4. -
  4. Declarações importantes nas folhas de estilo do autor
    5. -
  5. -

    Declarações importantes nas folhas de estilo do usuário

    - -

    Faz sentido que as folhas de estilo dos desenvolvedores da web substituam as folhas de estilo do usuário, para que o design possa ser mantido conforme pretendido, mas às vezes os usuários têm bons motivos para substituir os estilos do desenvolvedor da web, conforme mencionado acima - isso pode ser feito usando! Important em suas regras.
    -  

    -
    6. -
- -

Teste suas Habilidades!

- -

Abordamos muito neste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir - consulte Test your skills: the Cascade.

- -

O que vem a seguir?

- -

Se você entendeu a maior parte deste artigo, então muito bem - você começou a se familiarizar com a mecânica fundamental do CSS. A seguir, veremos os seletores em detalhes.

- -

Se você não entendeu totalmente a cascata, a especificidade e a herança, não se preocupe! Esta é definitivamente a coisa mais complicada que abordamos até agora no curso e é algo que até mesmo os desenvolvedores profissionais da Web às vezes acham complicado. Aconselhamos que você volte a este artigo algumas vezes à medida que avança no curso e continue pensando a respeito.

- -

Volte aqui se você começar a encontrar problemas estranhos com estilos que não se aplicam conforme o esperado. Pode ser um problema de especificidade.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/pt-br/aprender/css/construindo_blocos/index.html b/files/pt-br/aprender/css/construindo_blocos/index.html deleted file mode 100644 index b79de8baa0..0000000000 --- a/files/pt-br/aprender/css/construindo_blocos/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Construindo blocos CSS -slug: Aprender/CSS/Construindo_blocos -translation_of: Learn/CSS/Building_blocks ---- -
{{LearnSidebar}}
- -

Este módulo continua onde Primeiros passos em CSS parou — agora que você já ganhou familiaridade com a linguagem e sua sintaxe, e já tem alguma experiência básica usando-a, é hora de mergulhar um pouco mais fundo. Este módulo analisa a conceitos de cascata e herança , todos os tipos de seletores que temos disponíveis, unidades, dimensionamentos, estilos de fundo e bordas, depuração, e muito mais.

- -

O objetivo aqui é lhe prover com um conjunto de ferramentas para construir um código CSS competente e ajuda-lo a entender toda a teoria essencial, antes de passarmos para tópicos mais específicos como Estilização de texto e Modelo CSS.

- -

Pré-requisitos

- -

Antes de iniciar este módulo, você deve ter:

- -
    -
  1. Familiaridade básica com uso de computadores, e usar a Web passivamente (por exemplo. apenas olhar, consumindo o conteúdo.)
    2. -
  2. Um ambiente de trabalho básico configurado conforme detalhado em Instalando software básico, e um entendimento de como criar e gerenciar arquivos, como detalhado em Lidando com arquivos.
    3. -
  3. Familiaridade básica com HTML, como foi discutido no módulo Introdução ao HTML.
    4. -
  4. Um entendimento do básico em CSS, como o mostrado no módulo  Primeiros Passos com CSS.
    5. -
- -
-

Nota: Se você estiver usando um computador/tablet/outro dispositivo onde você não puder criar seus próprios arquivos, você pode tentar rodar (a maioria) os códigos de exemplo em um programa de codificação online como o JSBin ou Glitch.

-
- -

Guias

- -

Este módulo contém os seguintes artigos, que cobrem a maioria das partes essenciais da linguagem CSS. Ao longo do caminho você encontrará vários exercícios para testar seu entendimento.

- -
-
Cascata e Herança
-
O objetivo desta lição é desenvolver seu entendimento de alguns dos conceitos mais fundamentais do CSS — a cascata, especificidade e herança — que controlam como o CSS será aplicado ao HTML e como conflitos são resolvidos.
-
Seletores CSS
-
Há uma ampla variedade de seletores CSS disponíveis, permitindo uma fina precisão ao selecionar elementos para estilizar. Neste artigo e em seus sub-artigos, examinaremos os diferentes tipos em detalhes, vendo como eles funcionam. Os sub-artigos são os seguintes: - -
-
O modelo de caixa (Ou Box Model)
-
Tudo em CSS está dentro de caixas, e entender essas caixas é a chave para estar apto a criar layouts (modelos) em CSS, ou alinhar itens com outros itens. Nesta lição,trataremos mais propriamente sobre Modelo de Caixa CSS, afim de que você possa passar para tarefas de Layout mais complexas com um entendimento de como isto funciona e a terminologia relacionada a este modelo.
-
Planos de fundo e bordas
-
Nesta lição, examinaremos algumas das coisas criativas que você pode fazer com os planos de fundo e as bordas do CSS. Desde a criação de gradientes, imagens de plano de fundo e cantos arredondados, planos de fundo e bordas são a resposta para muitas questões de estilo em CSS.
-
Manipulando diferentes direções de texto
-
Nos últimos anos, o CSS evoluiu para oferecer melhor suporte a diferentes direções de conteúdo, incluindo o conteúdo da direita para a esquerda, mas também de cima para baixo (como o japonês) - essas diferentes direções são chamadas de modos de escrita. À medida que você progride em seu estudo e começa a trabalhar com o layout, o entendimento dos modos de escrita será muito útil para você; portanto, os apresentaremos neste artigo..
-
Transbordando conteúdo
-
Nesta lição, examinaremos outro conceito importante em CSS - overflow, efeito de transbordar. O overflow é o que acontece quando há muito conteúdo para ser contido adequadamente dentro de uma "caixa". Neste guia, você aprenderá o que é e como gerenciá-lo.
-
Valores CSS e unidades
-
Cada propriedade usada em CSS tem um valor ou um conjunto de valores que são permitidos para uma dada propriedade, veremos alguns dos valores e unidades mais comuns em uso.
-
Dimensionando itens em CSS
-
Nas várias lições até agora, você encontrou várias maneiras de dimensionar itens em uma página da Web usando CSS. É importante entender o tamanho dos diferentes recursos do seu design e, nesta lição, resumiremos as várias maneiras pelas quais os elementos obtêm um tamanho via CSS e definiremos alguns termos de dimensionamento que ajudarão você no futuro.
-
Imagens, mídia, e elementos de formulário
-
Nesta lição, veremos como certos elementos especiais são tratados no CSS. Imagens, outras mídias e elementos de formulário se comportam de maneira um pouco diferente em termos de sua capacidade de estilizá-los com CSS do que as caixas regulares. Compreender o que é e o que não é possível pode poupa-lo de algumas frustrações, e esta lição destacará algumas das principais coisas que você precisa saber.
-
Estilizando Tabelas
-
Estilizar uma tabela HTML não é o trabalho mais fascinante do mundo, mas às vezes todos nós precisamos fazê-lo. Este artigo fornece um guia para melhorar a aparência das tabelas HTML, com algumas técnicas específicas de estilo de tabela destacadas.
-
Depurando CSS
-
Às vezes, ao escrever CSS, você encontrará um problema em que seu CSS parece não estar fazendo o que você espera. Este artigo fornecerá orientações sobre como depurar um problema de CSS e mostrará como os DevTools (ferramentas de desenvolvedor) incluídos em todos os navegadores modernos podem ajudá-lo a descobrir o que está acontecendo.
-
Organizando seu CSS
-
Ao começar a trabalhar com folhas de estilo e em projetos maiores, você descobrirá que manter um grande arquivo CSS pode ser desafiador. Neste artigo, examinaremos brevemente algumas práticas recomendadas para escrever seu CSS para facilitar a manutenção e algumas das soluções que você encontrará em uso por outras pessoas para ajudar a melhorar a capacidade de manutenção.
-
- -

Avaliações

- -

Deseja testar suas habilidades de CSS? As avaliações a seguir testarão sua compreensão do CSS abordado nos guias acima.

- -
-
Entendimento fundamental de CSS
-
Esta avaliação testará seu entendimento da sintaxe básica, seletores, especificidade, modelo caixa, e mais.
-
Criando uma carta timbrada ideal
-
Se você deseja causar uma boa impressão, escrever uma carta em papel timbrado bonito pode ser um bom começo. Nesta avaliação, desafiaremos você a criar um modelo online para obter essa aparência.
-
Caixa de estilo atraente
-
Aqui você aprenderá a usar o estilo de plano de fundo e borda para criar uma caixa agradável.
-
- -

Veja também

- -
-
Efeitos de estilo avançados
-
Este artigo funciona como uma caixa de truques, fornecendo uma introdução a alguns recursos avançados de estilo interessantes, como sombras de caixa, modos de mesclagem e filtros.
-
diff --git a/files/pt-br/aprender/css/construindo_blocos/the_box_model/index.html b/files/pt-br/aprender/css/construindo_blocos/the_box_model/index.html deleted file mode 100644 index 841540a8f0..0000000000 --- a/files/pt-br/aprender/css/construindo_blocos/the_box_model/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: The box model -slug: Aprender/CSS/Construindo_blocos/The_box_model -translation_of: Learn/CSS/Building_blocks/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para ser capaz de criar arranjos ( layouts ) com CSS, ou para alinhar itens com outros itens. Nesta lição, olharemos de modo apropiado para o modelo de caixas do CSS ( CSS Box Model ), de forma que você possa montar arranjos mais complexos com um melhor entendimento de como ele funciona e da terminologia relacionada.

- - - - - - - - - - - - -
Pré-requisitos:Familiaridade básica em utilizar computadores, ambiente de trabalho básico configurado conforme detalhado emsoftware básico instalado, conhecimento básico de como criar e gerenciar arquivos, básico de HTML ( Introdução ao HTML), e uma idéia de como o  CSS funciona (ensinado em CSS primeiros passos.)
Objetivo:Aprender sobre o Modelo de Caixa do CSS, o que faz o modelo de caixa e como trocar para um modelo alternativo.
- -

Block and inline boxes

- -

In CSS we broadly have two types of boxes — block boxes and inline boxes. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:

- -

If a box is defined as a block, it will behave in the following ways:

- - - -

Unless we decide to change the display type to inline, elements such as headings (e.g. <h1>) and <p> all use block as their outer display type by default.

- -

If a box has an outer display type of inline, then:

- - - -

The <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default.

- -

The type of box applied to an element is defined by {{cssxref("display")}} property values such as block and inline, and relates to the outer value of display.

- -

Além disto: Tipos de exibição ( display ) internos e externos

- -

Nesse ponto, é melhor também explicar os tipos de exibição interna ( inner ) e externa ( outer ). Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha.

- -

Caixas possuem também um tipo de display inner, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( normal flow ), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima).

- -

We can, however, change the inner display type by using display values like flex. If we set display: flex; on an element, the outer display type is block, but the inner display type is changed to flex. Any direct children of this box will become flex items and will be laid out according to the rules set out in the Flexbox spec, which you'll learn about later on.

- -
-

Note: To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to Block and Inline Layout.

-
- -

When you move on to learn about CSS Layout in more detail, you will encounter flex, and various other inner values that your boxes can have, for example grid.

- -

Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as normal flow, because without any other instruction, our boxes lay out as block or inline boxes.

- -

Examples of different display types

- -

Let's move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of block. The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.

- -

The second is a list, which is laid out using display: flex. This establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.

- -

Below this, we have a block-level paragraph, inside which are two <span> elements. These elements would normally be inline, however, one of the elements has a class of block, and we have set it to display: block.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

- -

We can see how inline elements behave in this next example. The <span> elements in the first paragraph are inline by default and so do not force line breaks.

- -

We also have a <ul> element which is set to display: inline-flex, creating an inline box around some flex items.

- -

Finally, we have two paragraphs both set to display: inline. The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.

- -

In the example, you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

- -

You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout. 

- -

In the rest of the lesson, we will concentrate on the outer display type.

- -

What is the CSS box model?

- -

The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.

- -

Parts of a box

- -

Making up a block box in CSS we have the:

- - - -

The below diagram shows these layers:

- -

Diagram of the box model

- -

The standard CSS box model

- -

In the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.

- -

If we assume that the box has the following CSS defining width, height, margin, border, and padding:

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.

- -

Showing the size of the box when the standard box model is being used.

- -
-

Note: The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.

-
- -

The alternative CSS box model

- -

You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).

- -

Showing the size of the box when the alternate box model is being used.

- -

By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting box-sizing: border-box on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.

- -
.box {
-  box-sizing: border-box;
-}
- -

If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the box-sizing property on the <html> element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see the CSS Tricks article on box-sizing.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

Note: An interesting bit of history — Internet Explorer used to default to the alternative box model, with no mechanism available to switch.

-
- -

Playing with box models

- -

In the below example, you can see two boxes. Both have a class of .box, which gives them the same width, height, margin, border, and padding. The only difference is that the second box has been set to use the alternative box model.

- -

Can you change the size of the second box (by adding CSS to the .alternate class) to make it match the first box in width and height?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

- -
-

Note: You can find a solution for this task here.

-
- -

Use browser DevTools to view the box model

- -

Your browser developer tools can make understanding the box model far easier. If you inspect an element in Firefox's DevTools, you can see the size of the element plus its margin, padding, and border. Inspecting an element in this way is a great way to find out if your box is really the size you think it is!

- -

Inspecting the box model of an element using Firefox DevTools

- -

Margins, padding, and borders

- -

You've already seen the {{cssxref("margin")}}, {{cssxref("padding")}}, and {{cssxref("border")}} properties at work in the example above. The properties used in that example are shorthands and allow us to set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.

- -

Let's explore these properties in more detail.

- -

Margin

- -

The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it to overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.

- -

We can control all margins of an element at once using the {{cssxref("margin")}} property, or each side individually using the equivalent longhand properties:

- - - -

In the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

- -

Margin collapsing

- -

A key thing to understand about margins is the concept of margin collapsing. If you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. If one or both margins are negative, the amount of negative value will subtract from the total.

- -

In the example below, we have two paragraphs. The top paragraph has a margin-bottom of 50 pixels. The second paragraph has a margin-top of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins.

- -

You can test this by setting the margin-top of paragraph two to 0. The visible margin between the two paragraphs will not change — it retains the 50 pixels set in the bottom-margin of paragraph one. If you set it to -10px, you'll see that the overall margin becomes 40px — it subtracts from the 50px.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

- -

There are a number of rules that dictate when margins do and do not collapse. For further information see the detailed page on mastering margin collapsing. The main thing to remember for now is that margin collapsing is a thing that happens. If you are creating space with margins and don't get the space you expect, this is probably what is happening.

- -

Borders

- -

The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the width and height of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available width and height.

- -

For styling borders, there are a large number of properties — there are four borders, and each border has a style, width and color that we might want to manipulate.

- -

You can set the width, style, or color of all four borders at once using the {{cssxref("border")}} property.

- -

To set the properties of each side individually, you can use:

- - - -

To set the width, style, or color of all sides, use the following:

- - - -

To set the width, style, or color of a single side, you can use one of the most granular longhand properties:

- - - -

In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

- -

Padding

- -

The padding sits between the border and the content area. Unlike margins you cannot have negative amounts of padding, so the value must be 0 or a positive value. Any background applied to your element will display behind the padding, and it is typically used to push the content away from the border.

- -

We can control the padding on each side of an element individually using the {{cssxref("padding")}} property, or each side individually using the equivalent longhand properties:

- - - -

If you change the values for padding on the class .box in the example below you can see that this changes where the text begins in relation to the box.

- -

You can also change the padding on the class .container, which will make space between the container and the box. Padding can be changed on any element, and will make space between its border and whatever is inside the element.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

- -

The box model and inline boxes

- -

All of the above applies fully to block boxes. Some of the properties can apply to inline boxes too, such as those created by a <span> element.

- -

In the example below, we have a <span> inside a paragraph and have applied a width, height, margin, border, and padding to it. You can see that the width and height are ignored. The vertical margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph. Horizontal padding, margins, and borders are respected and will cause other content to move away from the box.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

- -

Using display: inline-block

- -

There is a special value of display, which provides a middle ground between inline and block. This is useful for situations where you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping seen above.

- -

An element with display: inline-block does a subset of the block things we already know about:

- - - -

It does not, however, break onto a new line, and will only become larger than its content if you explicitly add width and height properties.

- -

In this next example, we have added display: inline-block to our <span> element. Try changing this to display: block or removing the line completely to see the difference in display models.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

- -

Where this can be useful is when you want to give a link to a larger hit area by adding padding. <a> is an inline element like <span>; you can use display: inline-block to allow padding to be set on it, making it easier for a user to click the link.

- -

You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the <a> element as we want to be able to change the background-color when the <a> is hovered. The padding appears to overlap the border on the <ul> element. This is because the <a> is an inline element.

- -

Add display: inline-block to the rule with the .links-list a selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

- -

Test your skills!

- -

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: The Box Model.

- -

Summary

- -

That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout.

- -

In the next lesson, we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/pt-br/aprender/css/estilizando_texto/index.html b/files/pt-br/aprender/css/estilizando_texto/index.html deleted file mode 100644 index b2eafa9f05..0000000000 --- a/files/pt-br/aprender/css/estilizando_texto/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Estilizando texto -slug: Aprender/CSS/Estilizando_texto -tags: - - CSS - - Fontes - - Iniciante - - Links - - Texto - - listas - - web fontes -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

Com o básico de CSS compreendido, o próximo passo para você se concentrar será a estilização de textos — uma das mais importantes coisas que você fará com CSS. Aqui nós olhamos para os fundamentos de estilização de texto, fontes, negritos, italicos, linha e espaço entre letras, sombreamente e outras características textuais. Completamos o módulo produrando aplicar fontes personalizadas para sua página, e estilizando listas e links.

- -

Pré-requisites

- -

Antes de começar este módulo, você já deverá ter familiaridade básica com HTML, como dissemos no módulos Introdução ao HTML, e estar confortável com os fundamentos de CSS, como discutido em Introdução ao CSS.

- -
-

Nota: Se você está usando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar seus próprios arquivos, você poderá treinar os códigos-exemplo em um programa de código online como JSBin, CodePen or Thimble.

-
- -

Guias

- -

Este módulo contém os seguintes artigos que ensinarão você todos os fundamentos por trás da estilização de conteúdo textual HTML.

- -
-
Fundamentos da estilização de texto e fontes
-
Neste artigo nós passamos por todo o básico da estilização de texto/fonte, incluindo a configuração weight(negrito), family e style, configuração com forma abreviada, alinhamento textual, linha e espaçamento entre as letras.
-
Estilizando lista
-
Listas comportam-se como qualquer texto na maior parte das vezes, ma há algumas propriedades CSS específicas para lista que você precisa conhecer, e algumas boas práticas a considerar. Este artigo esclarecerá tudo.
-
Estilizando links
-
Na estilização de links, é importante entender como fazer uso de pseudo-classes para estilizar o estado dos links efetivamente, como estilizar links para uso em recursos de interfaces diversas como menus de navegação e guias. Veremos todos esses tópicos neste artigo.
-
Web Fontes
-
Aqui nós exploraremos Web Fontes em detalhes — isto permite que você baixe fontes personalizadas junto com sua página web, para permitir maior personalização na estilização.
-
- -

Avaliação

- -

A seguinte avaliação testará seu entendimento das técnicas de estilização de texto cobertas pelo guia acima.

- -
-
Estilizando a homepage de um escola comunitária
-
Nesta avaliação nos testeremos seu entendimento de estilização de texto fazendo com que você estilize a homepage de uma escola comunitária.
-
diff --git a/files/pt-br/aprender/css/index.html b/files/pt-br/aprender/css/index.html deleted file mode 100644 index f5004d47f3..0000000000 --- a/files/pt-br/aprender/css/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Aprenda a estilizar HTML utilizando CSS -slug: Aprender/CSS -tags: - - CSS - - Folha de Estilos - - Iniciante - - especificação -translation_of: Learn/CSS ---- -

Cascading Stylesheets — ou {{glossary("CSS")}} — é a primeira tecnologia que você deve aprender após o {{glossary("HTML")}}. Enquanto o HTML é utilizado para definir a estrutura e semântica do seu conteúdo, o CSS é usado para estilizá-lo e desenhá-lo. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos decorativos.

- -

Percurso de aprendizagem

- -

Você deveria aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa Introdução ao HTML.Neste módulo você irá aprender sobre:

- - - -

Uma vez que voce entendeu os Fundamentos do HTML, Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.

- -

Antes de iniciar este tópico, você também deve ter ao menos familiaridade com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no Instalando o software básico, e entender como criar e gerenciar arquivos, conforme detalhado em Lidando com arquivos — ambos são partes do nosso Como começar com a web módulo completo de iniciante.

- -

É recomendável que você trabalhe através do Como começar com a web antes de começar este tema. Contudo, não é absolutamente necessário; ja que muito do que é abordado no artigo básico de CSS também é coberto em nossa introdução ao CSS, embora com muito mais detalhes.

- -

Módulos

- -

Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.

- -
-
Introdução ao CSS
-
Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, controlar cascatas e heranças, noções básicas de box model e depuração CSS.
-
Estilo de texto
-
Aqui nós olhamos os fundamentos do estilos de texto, incluindo a configuração da fonte, negrito, itálico, linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.
-
Caixas de estilo
-
Próximo, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo, nós recapitulamos box model para então controlarmos o layout por configuração de padding, borders e margins, configurações personalizada do background colors , imagens e outros componentes, componentes elegantes tais como sombras e filtros das caixas.
-
CSS layout
-
Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas com conteudos alocados. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport,  e outros. Nós temos cobertos os pré-requisitos necessários para então agora podemos aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodos envolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox, CSS Grid e posicionamento, alem de algumas tecnicas que voce ainda pode querer conhecer.
-
Design Responsivo (TBD)
-
Com tantos tipos diferentes de dispositivos capazes de navegar pela internet nos dias de hoje, design web responsivo (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.
-
Animações e transformações (TBD)
-
Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.
-
- -

Resolvendo problemas de CSS comuns

- -

Use CSS para resolver problemas comuns proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web.

- -

Para começar, primeirmamente você aplicara cores aos elementos HTML e seus backgrounds;  alterará o tamanho, forma e posição dos elementos; definira e adicionara bordas aos elementos. Não há muito o que você não podera fazer depois que tiver uma compreensão solida até mesmo sobre o basico do CSS. Uma das melhores coisas sobre aprender CSS é que uma vez que voce conhece os fundamentos, normalmente voce tera uma boa noção do que pode ou não fazer, mesmo que não saiba como fazer aquilo ainda.

- -

Veja também

- -
-
CSS no MDN
-
O principal ponto de entrada para documentação CSS no MDN, onde voce encontra desde referências detalhadas a tutoriais avançados. Quer saber todos os valores que uma propriedade pode ter? Este é o melhor lugar
-
Referência CSS
-
Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.
-
diff --git a/files/pt-br/aprender/ferramentas_e_teste/index.html b/files/pt-br/aprender/ferramentas_e_teste/index.html deleted file mode 100644 index 5f1a76dbf7..0000000000 --- a/files/pt-br/aprender/ferramentas_e_teste/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Ferramentas e teste -slug: Aprender/Ferramentas_e_teste -tags: - - Acessibilidade - - Aprendizagem - - Automação - - CSS - - Código - - Ferramentas - - HTML - - Iniciante - - JavaScript - - Navegadores - - Testes - - Testes do usuário - - Tópico -translation_of: Learn/Tools_and_testing ---- -
{{LearnSidebar}}
- -

Assim que você se sentir mais confortável programando nas tecnologias web básicas (como HTML, CSS e JavaScript), e pegar mais experiência, ler mais recursos, e souber mais dicas e truques, você começará a se deparar com todos os tipos de ferramentas, de CSS e JavaScript precompilados, a automação e testes de aplicações, além de outros assuntos mais avançados. Quando seus projetos começam a crescer e a ficarem mais complexos, você irá querer começar a aproveitar mais dessas ferramentas, e a elaborar planos de testes mais confiáveis para seu código. Esta parte do aprendizado está focada em te dar o que você precisa para iniciar e tomar decisões com melhores informações.

- -

A indústria de internet é um excitante lugar de trabalho, mas não é por ter menos problemas. Muito pelo contrário. As tecnologias básicas que usamos para construir sites estão razoavelmente estáveis agora, mas novas funcionalidades estão sendo introduzidas o tempo todo, assim como novas ferramentas — que facilitam o trabalho, e ainda são construídas usando essas mesmas tecnologias — estão constantemente aparecendo. Além disso, nós ainda precisamos ter sempre em mente que essas tecnologias devem funcionar em todos os navegadores, e ter certeza que nosso código segue as melhores práticas que permitem nossos projetos funcionarem em todos os tipos de navegadores e dispositivos que nossos usuários estão usando para navegar na internet, e ainda serem usados por pessoas com deficiência.

- -

Saber quais ferramentas você deve utilizar pode ser um processo bem difícil, então escrevemos esses artigos para te manter informado de quais tipos de ferramentas estão disponíveis, e o que elas podem fazer pra você, e como usar as preferidas do mercado.

- -
-

Nota: pelo fato de novas ferramentas e tecnologias aparecerem e saírem de moda o tempo todo, nós, deliberadamente, escrevemos este material para ser o mais neutro possível — queremos focar, antes de mais nada, nos tipos de tarefas gerais que essas ferramentas podem ajudar você a terminar, e endereçar ferramentas específicas o menos possível. Obviamente precisamos mostrar o uso das ferramentas para demonstrar técnicas específicas, mas que fique claro que com isso não estamos necessariamente, recomendando as ferramentas usadas nas demonstrações como as melhores, ou como único jeito, de se fazer as coisas — na maioria dos casos existem outras formas de se fazer, mas queremos dar a você a forma mais clara que funciona.

-
- -

Caminho de aprendizado

- -

Você realmente deve aprender os conceitos básicos de HTML, CSS e JavaScript antes de utilizar as ferramentas descritas aqui. Isto é, você precisará conhecer os principios fundamentais dessas linguagens antes de começar a debugar problemas em códigos mais complexos da internet, ou usar alguma biblioteca JavaScript, ou escrever testes e rodá-los no seu código com executores de testes, etc.

- -

Você realmente precisa de uma base forte de conhecimento nessas tecnologias antes de ir mais além.

- -

Módulos

- -
-
Ferramentas de Desenvolvimento Web do Mundo Real (TBD)
-
Neste módulo, exploramos os diferentes tipos de ferramentas de desenvolvimento web disponíveis. Isso inclui revisar os tipos de tarefas mais comuns que será pedido a você para resolver, como elas se complementam no trabalho, e as melhores ferramentas disponíveis atualmente para endereçar essas tarefas.
-
Testes de navegadores
-
Este módulo olha especificamente para a área de testes de projetos web sobre diferentes navegadores web. Neste módulo, procuramos identificar seu público alvo (por exemplo, quais usuários, navegadores e dispositivos você mais precisa se preocupar?), como elaborar os testes, os principais problemas que você vai enfrentar com tipos de código diferentes e como consertar ou mitigá-los, e como usar a automação para acelerar os testes.
-
diff --git a/files/pt-br/aprender/front-end_web_developer/index.html b/files/pt-br/aprender/front-end_web_developer/index.html deleted file mode 100644 index 67a73497ef..0000000000 --- a/files/pt-br/aprender/front-end_web_developer/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Desenvolvedor Web Front-end -slug: Aprender/Front-end_web_developer -tags: - - Aprender - - CSS - - Ferramentas - - Front-end - - HTML - - Iniciantes - - JavaScript - - Padrões Web -translation_of: Learn/Front-end_web_developer ---- -

{{learnsidebar}}

- -

Boas vindas a nossa trilha de estudos para front-end web developer.

- -

Aqui nós provemos um curso estruturado que irá lhe ensinar tudo o que você precisa para se tornar um desenvolvedor web front-end. Simplesmente trabalhe em cada sessão, aprendendo novas habilidades (ou melhorando as existentes) à medida que avança. Durante cada sessão, você encontrará exercícios e avaliações para testar sua compreensão antes de avançar.

- -

Temas cobertos

- -

Os temas gerais abordados são:

- - - -

As diferentes sessões são desenhadas para trabalhar em ordem, mas cada uma também é independente. Se, por exemplo, você já souber HTML, pode avançar rapidamente para a sessão de CSS.

- -

Pré-requisitos

- -

Você não precisa de nenhum conhecimento prévio para começar este curso. Tudo o que você precisa é um computador executando um navegador web moderno, uma conexão com internet, e vontade de aprender.

- -

Se você não tem certeza se o desenvolvimento front-end é para você, e/ou se deseja uma introdução mais suave antes de começar um curso mais completo, você pode conferir primeiro nossa Introdução à web.

- -

Conseguindo ajuda

- -

Nós tentamos deixar os estudos de desenvolvimento web front-end o mais confortável possível, entretanto, você provavelmente chegará em algum ponto em que irá travar por não entender alguma coisa, ou algum código pode não funcionar como deveria.

- -

Não entre em pânico. Às vezes, todas as pessoas ficam presas, sejamos iniciantes ou profissionais em desenvolvimento web. O artigo Aprendendo a Aprender (à ser adicionado) irá te prover uma série de dicas e sugestões sobre como procurar informações e se ajudar. E se você continuar travando, sinta-se à vontade para postar uma dúvida em nosso fórum no Discourse.

- -

Vamos começar. Boa sorte!

- -

A trilha de estudos

- -

Começando

- -

Tempo para completar: 1–2 horas

- -

Pré-requisitos

- -

Nada, exceto conhecimentos básicos de informática.

- -

Como saberei se posso seguir em frente?

- -

Não há avaliações nesta parte do curso. Certifique-se de não ignorá-lo — é importante para te preparar para enfrentar os exercícios mais tarde.

- -

Guias principais

- - - -

Semântica e estrutura HTML

- -

Tempo para completar: 35–50 horas

- -

Pré-requisitos

- -

Nada, exceto conhecimentos básicos de informática e o ambiente de desenvolvimento web básico.

- -

Como saberei se posso seguir em frente?

- -

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

- -

Guias principais

- - - - - -

Estilizando e layout com CSS

- -

Tempo para completar: 90–120 horas

- -

Pré-requisitos

- -

É recomendável que você possua o conhecimento básico de HTML antes de começar aprender CSS. Você pode estudar nossa Introdução ao HTML primeiro.

- -

Como saberei se posso seguir em frente?

- -

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

- -

Guias principais

- - - - - - - -

Conteúdo adicional

- - - -

Interatividade com JavaScript

- -

Tempo para completar: 135–185 horas

- -

Pré-requisitos

- -

É recomendável que você possua o conhecimento básico de HTML antes de começar aprender JavaScript. Você pode estudar nossa Introdução ao HTML primeiro.

- -

Como saberei se posso seguir em frente?

- -

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

- -

Guias principais

- - - - - - - -

Formulários Web — Trabalhando com dados de usuário

- -

Tempo para completar: 40–50 horas

- -

Pré-requisitos

- -

Formulários demandam conhecimento em HTML, CSS e JavaScript para o seu bom uso. Eles são complexos e, portanto, recebem tratamento separado.

- -

Como saberei se posso seguir em frente?

- -

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

- -

Guias principais

- - - - - - - -

Fazendo uma web para todas as pessoas

- -

Tempo para completar: 60–75 horas

- -

Pré-requisitos

- -

É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão — muitas das técnicas e melhores práticas contidas aqui utilizam várias tecnologias.

- -

Como saberei se posso seguir em frente?

- -

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

- -

Guias principais

- - - - - - - -

Ferramentas modernas

- -

Tempo para completar: 55–90 horas

- -

Pré-requisitos

- -

É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão, as ferramentas citadas aqui utilizam várias dessas tecnologias.

- -

Como saberei se posso seguir em frente?

- -

Não temos avaliações específicas neste conjunto de módulos, mas os tutoriais de estudo de caso no final dos 2º e 3º módulos irão te preparar bem para compreender os elementos essenciais das ferramentas modernas.

- -

Guias principais

- - - - - - diff --git "a/files/pt-br/aprender/getting_started_with_the_web/a_web_e_seus_padr\303\265es/index.html" "b/files/pt-br/aprender/getting_started_with_the_web/a_web_e_seus_padr\303\265es/index.html" deleted file mode 100644 index 26de56ea06..0000000000 --- "a/files/pt-br/aprender/getting_started_with_the_web/a_web_e_seus_padr\303\265es/index.html" +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: A web e seus padrões -slug: Aprender/Getting_started_with_the_web/A_web_e_seus_padrões -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards ---- -

{{learnsidebar}}

- -

Este artigo fornece algumas informações úteis sobre a Web - como ela surgiu, quais são suas tecnologias padrões, como elas funcionam juntas, porque "desenvolvedor web" é uma grande carreira para escolher e quais são os tipos de boas práticas são coisas que você aprenderá neste curso.

- -

Breve histórico da web

- -

Seremos breves, já que existem muitos (mais) artigos detalhados do histórico da web por aí, que mostraremos mais tarde (tente também pesquisar por "histórico da web" no seu mecanismo de pesquisa favorito e veja o que você encontra, se estiver interessado em maiores detalhes.)

- -

No fim da década de 1960, os militares dos Estados Unidos desenvolveram uma rede de comunicação chamada ARPANET. Ela pode ser considerada como precursora da Web, já que trabalhava com comutação de pacotes e apresentou a primeira implementação do conjuto de protocolos TCP/IP. Estas duas tecnologias formaram a base da infraestrutura em que a internet foi construída.

- -

Em 1980, Tim Berners-Lee (frequentemente chamado de TimBL) escreveu um programa de notebook chamado ENQUIRE, que apresentava o conceito de links entre diferentes nós. Parece familiar?

- -

Avance para 1989, e TimBL escreveu Information Management: A Proposal and HyperText and CERN; essas duas publicações juntas forneceram o pano de fundo de como a web funcionaria. Eles receberam uma boa quantidade de juros, o suficiente para convencer os chefes da TimBL a permitir que ele fosse em frente e criasse um sistema de hipertexto global.

- -

No final de 1990, TimBL havia criado todas as coisas necessárias para executar a primeira versão da web - HTTP , HTML , o primeiro navegador da web, que era chamado de WorldWideWeb , um servidor HTTP e algumas páginas da web para olhar.

- -

Nos próximos anos que se seguiram, a web explodiu, com vários navegadores sendo lançados, milhares de servidores da web sendo configurados e milhões de páginas da web sendo criadas. OK, é um resumo muito simples do que aconteceu, mas prometi a você um breve resumo.

- -

Um último dado significativo para compartilhar é que, em 1994, TimBL fundou o World Wide Web Consortium (W3C), uma organização que reúne representantes de muitas empresas de tecnologia diferentes para trabalharem juntos na criação de especificações de tecnologia da web. Depois disso, outras tecnologias surgiram, como CSS e JavaScript , e a web começou a se parecer mais com a que conhecemos hoje.

- -

Padrões da web

- -

Os padrões da Web são as tecnologias que usamos para construir sites. Esses padrões existem como longos documentos técnicos chamados especificações, que detalham exatamente como a tecnologia deve funcionar. Esses documentos não são muito úteis para aprender como usar as tecnologias que eles descrevem (é por isso que temos sites como MDN Web Docs), mas em vez disso, devem ser usados ​​por engenheiros de software para implementar essas tecnologias (geralmente em navegadores da web).

- -

Por exemplo, o HTML Living Standard descreve exatamente como o HTML (todos os elementos HTML e suas APIs associadas e outras tecnologias adjacentes) deve ser implementado.

- -

Os padrões da Web são criados por órgãos de padrões - instituições que convidam grupos de pessoas de diferentes empresas de tecnologia para se reunirem e concordarem sobre como as tecnologias devem funcionar da melhor maneira para cumprir todos os seus casos de uso. O W3C é o órgão de padrões da web mais conhecido, mas existem outros como o WHATWG (que foi responsável pela modernização da linguagem HTML), ECMA (que publicou o padrão para ECMAScript, no qual o JavaScript é baseado), Khronos (que publica tecnologias para gráficos 3D, como WebGL) e outros.

- -

Padrões "abertos"

- -

Um dos principais aspectos dos padrões da web, que TimBL e o W3C concordaram desde o início, é que a web (e as tecnologias da web) devem ser livres para contribuir e usar, e não onerada por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um site de graça e pode contribuir com o processo de criação de padrões, onde as especificações são escritas.

- -

Como as tecnologias da web são criadas abertamente, em colaboração entre muitas empresas diferentes, isso significa que nenhuma empresa consegue controlá-las, o que é realmente bom. Você não gostaria que uma única empresa repentinamente decidisse colocar toda a web atrás de um acesso pago, ou lançar uma nova versão de HTML que todos precisam comprar para continuar a fazer sites, ou pior ainda, apenas decidir que não estão mais interessados e apenas desligá-lo.

- -

Isso permite que a web continue sendo um recurso público disponível gratuitamente.

- -

Não quebre a web

- -

Outra frase que você ouvirá sobre os padrões abertos da web é "não quebre a web" - a ideia é que qualquer nova tecnologia da web introduzida deve ser compatível com o que existia antes (ou seja, os sites antigos ainda continuarão a funcionar ), e compatível com as versões futuras (tecnologias futuras, por sua vez, serão compatíveis com o que temos atualmente). Conforme você avança no material de aprendizagem apresentado aqui, você começará a aprender como isso é possível com um projeto muito inteligente e trabalho de implementação.

- -

Ser um desenvolvedor web é bom

- -

A indústria da web é um mercado muito atraente para se entrar, se você estiver procurando por um emprego. Números publicados recentes dizem que existem atualmente cerca de 19 milhões de desenvolvedores da web no mundo, e esse número deve mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de habilidades na indústria - então, que melhor momento para aprender desenvolvimento web?

- -

No entanto, nem tudo é diversão e jogos - construir sites é uma proposta mais complicada do que costumava ser, e você terá que investir algum tempo para estudar todas as diferentes tecnologias que precisa usar, todas as técnicas e melhores práticas que você precisa saber e todos os padrões típicos que você deverá implementar. Você levará alguns meses para realmente começar a entrar no assunto e, em seguida, precisará continuar aprendendo para que seu conhecimento fique atualizado com todas as novas ferramentas e recursos que aparecem na plataforma da web, e continue praticando e refinando seu ofício.

- -

A única constante é a mudança.

- -

Isso parece difícil? Não se preocupe - nosso objetivo é fornecer a você tudo o que você precisa saber para começar, e as coisas ficarão mais fáceis. Depois de abraçar as constantes mudanças e incertezas da web, você começará a se divertir. Como parte da comunidade web, você terá toda uma rede de contatos e materiais úteis para ajudá-lo, e começará a desfrutar das possibilidades criativas que isso traz.

- -

Você é um criativo digital agora. Aproveite a experiência e o potencial para ganhar a vida.

- -

Visão geral das tecnologias modernas da web

- -

Existem várias tecnologias para aprender se você quiser ser um desenvolvedor front-end da web. Nesta seção, iremos descrevê-los brevemente. Para uma explicação mais detalhada de como alguns deles funcionam juntos, leia nosso artigo Como funciona a web .

- - - -

Provavelmente, você está lendo essas palavras dentro de um navegador da Web neste exato momento (a menos que as tenha imprimido ou esteja usando tecnologia de assistência, como um leitor de tela para ler para você). Os navegadores da web são os programas de software que as pessoas usam para consumir a web e incluem Firefox , Chrome , Opera , Safari e Edge .

- -

HTTP

- -

O protocolo de transferência de hipertexto, ou HTTP , é um protocolo de mensagens que permite aos navegadores da web se comunicarem com os servidores da web (onde os sites da web são armazenados). Uma conversa típica é algo como

- -
"Hello web server. Can you give me the files I need to render bbc.co.uk"?
-
-"Sure thing web browser — here you go"
-
-[Downloads files and renders web page]
- -

A sintaxe real para mensagens HTTP (chamadas de solicitações e respostas) não é legível por humanos, mas isso lhe dá uma ideia básica.

- -

HTML, CSS e JavaScript

- -

HTML , CSS e JavaScript são as três tecnologias principais que você usará para construir um site:

- - - -

Ferramental

- -

Depois de aprender as tecnologias "brutas" que podem ser usadas para construir páginas da web (como HTML, CSS e JavaScript), você logo começará a encontrar várias ferramentas que podem ser usadas para tornar seu trabalho mais fácil ou mais eficiente. Exemplos incluem:

- - - -

Linguagens e estruturas do lado do servidor

- -

HTML, CSS e JavaScript são linguagens de front-end (ou cliente), o que significa que são executadas pelo navegador para produzir um front-end de site que seus usuários possam usar.

- -

Há outra classe de linguagens chamadas linguagens de back-end (ou do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser enviado ao navegador para exibição. Um uso típico para uma linguagem do lado do servidor é obter alguns dados de um banco de dados e gerar algum HTML para conter os dados, antes de enviar o HTML ao navegador para exibi-lo ao usuário.

- -

Linguagens de servidor de exemplo incluem ASP.NET, Python, PHP e NodeJS.

- -

Melhores práticas da web

- -

Falamos brevemente sobre as tecnologias que você usará para construir sites. Agora, vamos discutir as melhores práticas que você deve empregar para garantir que está usando essas tecnologias da melhor maneira possível.

- -

Ao fazer o desenvolvimento da web, a principal causa de incerteza vem do fato de que você não sabe qual combinação de tecnologia cada usuário usará para visualizar seu site:

- - - -

Como você não sabe exatamente o que seus usuários usarão, você precisa fazer um design defensivo - tornar seu site o mais flexível possível, de modo que todos os usuários acima possam usá-lo, mesmo que nem todos recebam o mesmo experiência. Resumindo, estamos tentando fazer a web funcionar para todos, tanto quanto possível.

- -

Você encontrará os conceitos abaixo em algum momento de seus estudos.

- - - -

Veja também

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/com_que_seu_site_vai_parecer/index.html b/files/pt-br/aprender/getting_started_with_the_web/com_que_seu_site_vai_parecer/index.html deleted file mode 100644 index 62ad3bd27d..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/com_que_seu_site_vai_parecer/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Com será o seu site? -slug: Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer -tags: - - Aprender - - Ativos - - Composição - - Conteúdo - - Descontinuado - - Design - - Fontes - - Iniciante - - Passo a passo - - Simples - - 'l10:prioridade' -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Como será o seu site? discute o trabalho de planejamento e design que você precisa fazer para o seu site antes de escrever o código, incluindo "Quais informações meu site oferece?", "Quais fontes e cores eu quero?" e ​​"O que meu site faz?"

-
- -

Primeiramente: planejamento

- -

Antes que você faça qualquer coisa, você precisa de algumas ideias. O que seu site realmente vai fazer? Um site pode fazer praticamente tudo, mas primeiro você deve manter as coisas em um nível simples. Nós vamos começar criando um site simples com um cabeçalho, uma imagem e alguns parágrafos.

- -

Para começar, você deve responder às seguintes questões:

- -
    -
  1. Sobre o que é seu site? Você gosta de cachorros, Nova Iorque ou Pacman?
    2. -
  2. Que informação você está apresentando sobre o assunto? Escreva um título e alguns parágrafos e pense em uma imagem para ilustrar sua página.
    3. -
  3. Como será seu site, em termos simples. Qual é a cor de fundo? Qual é o tipo de fonte apropriado: formal, desenhado, negrito e gritante, sutil?
    4. -
- -
-

Nota: Projetos complexos precisam de guias detalhados que abordam todos os detalhes de cores, fontes, espaçamento entre itens de uma página, estilo de escrita apropriado, e por aí vai. Isso é denominado um guia de design, sistema de design ou manual da marca, e você pode ver um exemplo no Sistema de Design do Firefox Photon (em inglês).

-
- -

Rascunhando seu design

- -

Em seguida, pegue papel e caneta e faça um rascunho de como você deseja que seu site seja. Para sua primeira página simples, não há muito o que rascunhar, mas você deve criar o hábito desde o começo. Realmente ajuda — você não precisa ser um Van Gogh!

- -

- -
-

Nota: Mesmo em sites reais e complexos, os times de design geralmente começam pelo rascunho em papel e depois constroem a versão digital usando um editor gráfico ou tecnologias da web.

- -

Os times de web geralmente incluem um designer gráfico e um designer de {{Glossary("UX", "experiencia do usuário")}} (UX). Designers gráficos, obviamente, constroem a parte visual do site. UX designers tem uma função de certa forma mais abstrata, direcionando como os usuários vão interagir e experimentar o site.

-
- -

Construindo seus ativos

- -

Nesse ponto, é bom começar juntando o conteúdo que vai eventualmente aparecer no site.

- -

Texto

- -

Você deve ter seu título e parágrafos desde antes. Mantenha eles por perto.

- -

Cor do tema

- -

Para escolher a cor, vá ao Seletor de Cores e escolha a cor que preferir. Quando escolher a cor, você verá uma sequência de seis caracteres, como #660066. Isso é chamado um código hex(adecimal), e representa sua cor. Copie esse código em algum lugar seguro por enquanto.

- -

- -

Imagens

- -

Para escolher uma imagens, vá no Google Imagens e procure por algo que se encaixe no seu site.

- -
    -
  1. Quando você achar a imagem que você quer, clique nela para obter uma visão ampliada dela.
    2. -
  2. Clique com o botão direito na imagem (Ctrl + click no Mac) escolha Salvar imagem como... e escolha um local seguro para salvar sua imagem. Como alternativa, copie o endereço web da imagem da barra de endereço do navegador, para uso posterior.
    3. -
- -

- -

Observe que a maioria das imagens na Web, inclusive no Imagens do Google, é protegida por direitos autorais. Para reduzir a probabilidade de violar direitos autorais, você pode usar o filtro de licenças do Google. Clique no botão Ferramentas e, em seguida, na opção Direitos de uso resultante que aparece abaixo. Você deve escolher uma opção como Marcada para reutilização.

- -

- -

Fonte

- -

Para escolher uma fonte:

- -
    -
  1. Vá no Google Fontes e role a lista até que você ache uma que você goste. Você também pode usar os controles à direita para filtrar os resultados.
    2. -
  2. Clique no ícone "mais" (Adicionar a) ao lado da fonte desejada.
    3. -
  3. Clique no botão "* Família Selecionada" no painel na parte inferior da página ("*" depende de quantas fontes você selecionou).
    4. -
  4. Na caixa pop-up, você pode ver e copiar as linhas de código que o Google oferece em seu editor de texto para salvar posteriormente.
    5. -
- -

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/como_a_web_funciona/index.html b/files/pt-br/aprender/getting_started_with_the_web/como_a_web_funciona/index.html deleted file mode 100644 index cf911dafc5..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/como_a_web_funciona/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Como a Web funciona -slug: Aprender/Getting_started_with_the_web/Como_a_Web_funciona -tags: - - Aprender - - Cliente - - DNS - - HTTP - - IP - - Infraestrutura - - Iniciante - - Servidor - - TCP - - 'l10n:prioridade' -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -

{{LearnSidebar}}

- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Como a Web funciona oferece uma visão simplificada do que acontece quando você vê uma página em um navegador, no seu computador ou telefone.

-
- -

Essa teoria não é essencial para escrever códigos em curto prazo, mas em pouco tempo você vai se beneficiar ao entender o que está acontecendo em segundo plano.

- -

Clientes e servidores

- -

Computadores conectados à web são chamados clientes e servidores. Um diagrama simplificado de como eles interagem pode ter essa aparência:

- -

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

- - - -

As outras partes da caixa de ferramentas

- -

O cliente e o servidor que descrevemos acima não contam toda a história. Existem muitas outras partes envolvidas, e vamos descrevê-las abaixo.

- -

Por enquanto, vamos imaginar que a web é uma estrada. Em um extremo da estrada, temos o cliente, que é como sua casa. No extremo oposto, temos o servidor, que é como uma loja onde você quer comprar algo.

- -

- -

Além do cliente e do servidor, também precisamos dizer oi para:

- - - -

Então, o que acontece, exatamente?

- -

Quando você digita um endereço da web no seu navegador (pela nossa analogia é como ir andando até a loja):

- -
    -
  1. O navegador vai para o servidor de DNS e encontra o endereço verdadeiro de onde o site está hospedado (você encontra o endereço da loja).
    2. -
  2. O navegador manda uma mensagem de requisição HTTP para o servidor, pedindo que envie uma cópia do site ao cliente (você vai até a loja e pede suas mercadorias). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor são enviados pela sua conexão à internet usando TCP/IP.
    3. -
  3. Se o servidor aprovar a requisição do cliente, o servidor enviará ao cliente uma mensagem "200 OK", que significa "Claro que você pode ver esse site! Aqui está" e então começa a enviar os arquivos do site para o navegador como uma série de pequenos pedaços chamados pacotes de dados (a loja dá a você as suas mercadorias e você as traz para sua casa).
    4. -
  4. O navegador monta os pequenos pedaços em um site completo e o mostra a você (as mercadorias chegam à sua porta — novas coisas brilhantes e incríveis!).
    5. -
- -

DNS explicado

- -

Endereços web verdadeiros não são sequências de textos boas e fáceis de lembrar que você digita na sua barra de endereços para encontrar seus sites favoritos. Eles são números especiais que se parecem com isso: 63.245.215.20.

- -

Isso é chamado {{Glossary("IP Address", "endereço IP")}} e representa um local único na web. No entanto, não é muito fácil de lembrar, é? É por isso que o Servidor de Nome de Domínio foi inventado. Esses são servidores especiais que relacionam o endereço da web que você digita no seu navegador (como "mozilla.org") com o endereço real do site (IP).

- -

Sites podem ser acessados diretamente pelo seu endereço IP. Você pode encontrar o endereço IP de um site, digitando seu domínio em uma ferramenta como o IP Checker.

- -

Pacotes explicados

- -

Anteriormente, usamos o termo "pacotes" para descrever o formato no qual os dados são enviados do servidor para o cliente. O que nós queremos dizer? Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para que muitos usuários diferentes possam baixar o mesmo site ao mesmo tempo. Se os websites fossem enviados como um grande bloco, somente um usuário por vez poderia baixá-los, o que, obviamente, tornaria a web muito ineficiente e não muito divertida de usar.

- -

Veja também

- - - -

Créditos

- -

Foto da rua: Street composing, por Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/css_basico/index.html b/files/pt-br/aprender/getting_started_with_the_web/css_basico/index.html deleted file mode 100644 index 34d0eb95ad..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/css_basico/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: CSS básico -slug: Aprender/Getting_started_with_the_web/CSS_basico -tags: - - Aprender - - CSS - - Codificação de Scripts - - Estilo - - Iniciante - - Web - - 'l10n:prioridade' -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. CSS básico apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?

-
- -

Então, o que realmente é CSS?

- -

Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação  — é uma linguagem de folhas de estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar todos os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:

- -
p {
-  color: red;
-}
- -

Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como estilo.css na sua pasta estilos.

- -

Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia Lidando com arquivos e HTML básico para descobrir o que você precisa fazer primeiro).

- -
    -
  1. Abra seu arquivo index.html e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e </head>: - - 
    <link href="estilos/estilo.css" rel="stylesheet">
    -
    2. -
  2. Salve o arquivo index.html e abra ele no seu navegador. Você deve ver uma página como essa:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.

- -

Anatomia de um conjunto de regras CSS

- -

Vamos dar uma olhada no CSS acima com mais detalhes:

- -

- -

Toda essa estrutura é chamada de conjunto de regras (mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:

- -
-
Seletor (Selector)
-
O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos {{HTMLElement("p")}}). Para dar estilo a um outro elemento, é só mudar o seletor.
-
Declaração (Declaration)
-
Uma regra simples como color: red; especificando quais das propriedades do elemento você quer estilizar.
-
Propriedades (Property)
-
Forma pela qual você estiliza um elemento HTML. (Nesse caso, color é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.
-
Valor da propriedade (Property value)
-
À direita da propriedade, depois dos dois pontos, nós temos o valor de propriedade, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores color(cor) além do red(vermelho)).
-
- -

Note outras partes importantes da sintaxe:

- - - -

Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Selecionando múltiplos elementos

- -

Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:

- -
p, li, h1 {
-  color: red;
-}
- -

Diferentes tipos de seletores

- -

Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os seletores de elementos, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome do seletorO que ele selecionaExemplo
Seletor de elemento (às vezes, chamado tag ou seletor de tipo)Todos os elementos HTML de determinado tipo.p
- Seleciona <p>
Seletor de IDO elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos.#my-id
- Seleciona <p id="my-id"> ou <a id="my-id">
Seletor de classeO(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página)..my-class
- Seleciona <p class="my-class"> e <a class="my-class">
Seletor de atributoO(s) elemento(s) na página com o atributo especificado.img[src]
- Seleciona <img src="myimage.png"> mas não <img>
Seletor de pseudo-classeO(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele.a:hover
- Seleciona <a>, mas somente quando o mouse está em cima do link.
- -

Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso Guia de seletores.

- -

Fontes e texto

- -

Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo estilo.css para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.

- -
    -
  1. Primeiro de tudo, volte e encontre a fonte do Google Fonts que você armazenou em algum lugar seguro. Adicione o elemento {{htmlelement ("link")}} em algum lugar dentro do cabeçalho no index.html (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e </ head>). Será algo parecido com isto: - - 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    - Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.
    2. -
  2. Em seguida, exclua a regra existente no seu arquivo estilo.css. Foi um bom teste, mas o texto vermelho não parece muito bom.
    3. -
  3. Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha font-family que você obteve do Google Fonts. (font-family significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo font-size e font-family): - 
    html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
-  font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
-}
    - -
    -

    Nota: Qualquer coisa em um documento CSS entre /* e */ é um comentário CSS, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.

    -
    -
    4. -
  4. Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML ({{htmlelement ("h1")}}, {{htmlelement ("li")}} e {{htmlelement ("p")}}). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

Você pode ajustar esses valores de px para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

Caixas, caixas, é tudo sobre caixas

- -

Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.

- -

a big stack of boxes or crates sat on top of one another

- -

Como esperado, o layout CSS é baseado principalmente no modelo de caixas. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

Nessa seção nós também vamos usar:

- - - -

Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.

- -

Mudando a cor da página

- -
html {
-  background-color: #00539F;
-}
- -

Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor que você escolheu ao planejar seu site.

- -

Separando o corpo

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:

- - - -

Posicionando e estilizando o título da nossa página principal

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas estilizações padrão ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo margin: 0;.

- -

Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.

- -

Uma propriedade bastante interessante que usaremos aqui é o text-shadow, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:

- - - -

De novo, tente experimentar com diferentes valores para ver o que você pode criar!

- -

Centralizando a imagem

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque margin: 0 auto que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é em nível de bloco, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos em linha, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando display: block;.

- -
-

Nota: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um editor gráfico (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <img> com um valor menor (por exemplo, 400 px;).

-
- -
-

Nota: Não se preocupe se você ainda não entender display: block; ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa página de referência sobre display.

-
- -

Conclusão

- -

Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

Se você emperrar, sempre poderá comparar seu trabalho com nosso código de exemplo finalizado no Github.

- -

Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso tópico de aprendizado CSS.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/html_basico/index.html b/files/pt-br/aprender/getting_started_with_the_web/html_basico/index.html deleted file mode 100644 index 534fc5b9c9..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/html_basico/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: HTML básico -slug: Aprender/Getting_started_with_the_web/HTML_basico -tags: - - Aprender - - Codificação de Scripts - - HTML - - Iniciante - - Web - - 'l10:prioridade' -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
- -
-

HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções.

-
- -

Então, o que é HTML?

- -

HTML não é uma linguagem de programação; é uma linguagem de marcação, usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de {{Glossary("element", "elementos")}}, que você usa para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As {{Glossary ("tag", "tags")}} anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:

- -
Meu gatinho é muito mal humorado
- -

Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um parágrafo colocando-a em uma tag de parágrafo:

- -
<p>Meu gatinho é muito mal humorado</p>
- -

Anatomia de um elemento HTML

- -

Vamos explorar esse parágrafo mais profundamente.

- -

Imagem mostrando como funciona a tag P

- -

As principais partes de um elemento são:

- -
    -
  1. A tag de abertura: Consiste no nome do elemento (no caso, p), envolvido em parênteses angulares de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.
    2. -
  2. A tag de fechamento: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos.
    3. -
  3. O conteúdo: Esse é o conteúdo do elemento, que nesse caso é apenas texto.
    4. -
  4. O elemento: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.
    5. -
- -

Elementos também podem ter atributos, que parecem assim:

- -

- -

Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, class é o nome do atributo e editor-note é o valor do atributo. O atributo class permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas.

- -

Um atributo sempre deve ter:

- -
    -
  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).
    2. -
  2. O nome do atributo, seguido por um sinal de igual.
    3. -
  3. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.
    4. -
- -
-

Nota: Valores de atributos simples que não contém espaço em branco ASCII (ou qualquer um dos caracteres " ' ` = < >) podem permanecer sem aspas, mas é recomendável colocar em todos os valores de atributos, pois isso torna o código mais consistente e compreensível.

-
- -

Aninhando elementos

- -

Você pode colocar elementos dentro de outros elementos também — isso é chamado de aninhamento. Se quiséssemos afirmar que nosso gato é muito mal-humorado, poderíamos envolver a palavra "muito" em um elemento {{htmlelement ("strong")}}, o que significa que a palavra deve ser fortemente enfatizada:

- -
<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>
- -

Você precisa, no entanto, certificar-se de que seus elementos estejam adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento {{htmlelement ("p")}}, depois o elemento {{htmlelement ("strong")}}; portanto, temos que fechar primeiro o elemento {{htmlelement ("strong")}}, depois o elemento {{htmlelement ("p")}}. O código abaixo está incorreto:

- -
<p>Meu gatinho é <strong>muito mal humorado.</p></strong>
- -

Os elementos precisam ser abertos e fechados corretamente para que eles estejam claramente visíveis dentro ou fora um do outro. Se eles se sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que você estava tentando dizer, o que pode levar a resultados inesperados. Então não faça isso!

- -

Elementos vazios

- -

Alguns elementos não possuem conteúdo e são chamados de elementos vazios. Considere o elemento {{htmlelement("img")}} que temos na nossa página HTML:

- -
<img src="imagens/firefox-icon.png" alt="Minha imagem de teste">
- -

Ele contém dois atributos, mas não há tag </img> de fechamento, e não há conteúdo interno. Isso acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código aparece.

- -

Anatomia de um documento HTML

- -

Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só. Agora vamos ver como elementos individuais são combinados para formar uma página HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de index.html (que vimos no artigo Lidando com arquivos):

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Minha página de teste</title>
-  </head>
-  <body>
-    <img src="imagens/firefox-icon.png" alt="minha página de teste">
-  </body>
-</html>
- -

Aqui nós temos:

- - - -

Imagens

- -

Vamos voltar nossa atenção para o elemento {{htmlelement("img")}} novamente:

- -
<img src="imagens/firefox-icon.png" alt="Minha imagem de teste">
- -

Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo src (source), que contém o caminho para nosso arquivo de imagem.

- -

Incluímos também um atributo alt (alternative). Neste atributo, você especifica um texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:

- -
    -
  1. Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.
    2. -
  2. Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar deliberadamente o caminho dentro do atributo src para torná-lo incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:
    3. -
- -

- -

As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."

- -

Tente criar um texto alternativo melhor para sua imagem agora.

- -
-

Nota: Saiba mais sobre acessibilidade em módulo de aprendizagem sobre acessibilidade.

-
- -

Marcando o texto

- -

Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.

- -

Cabeçalhos

- -

Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, embora você normalmente só use de 3 a 4:

- -
<h1>Meu título principal</h1>
-<h2>Meu título de alto nível</h2>
-<h3>Meu subtítulo</h3>
-<h4>Meu segundo subtítulo</h4>
- -

Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.

- -
-

Nota: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para acessibilidade e outros motivos, como SEO. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.

-
- -

Parágrafo

- -

Como explicado acima, os elementos {{htmlelement ("p")}} são para conter parágrafos de texto; você os usará com frequência ao marcar um conteúdo de texto regular:

- -
<p>Este é um parágrafo simples</p>
- -

Adicione seu texto de exemplo (você o obteve em Como será o seu site?) Em um ou alguns parágrafos, colocados diretamente abaixo do seu elemento {{htmlelement ("img")}}.

- -

Listas

- -

Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não ordenadas:

- -
    -
  1. Listas não ordenadas são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento {{htmlelement("ul")}}.
    2. -
  2. Listas Ordenadas são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento {{htmlelement("ol")}}.
    3. -
- -

Cada item dentro das listas é posto dentro de um elemento {{htmlelement("li")}} (item de lista).

- -

Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista: 

- -
<p>Na Mozilla, somos uma comunidade global de tecnólogos, pensadores e construtores trabalhando juntos ... </p>
- -

Nós podemos fazer assim:

- -
<p>Na Mozilla, somos uma comunidade global de</p>
-
-<ul>
-  <li>tecnólogos</li>
-  <li>pensadores</li>
-  <li>construtores</li>
-</ul>
-
-<p>trabalhando juntos ... </p>
- -

Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.

- - - -

Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link, precisamos usar um elemento simples — {{htmlelement ("a")}} — "a" é a forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um link, siga estas etapas:

- -
    -
  1. Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".
    2. -
  2. Envolva o texto em um elemento {{htmlelement("a")}} , assim: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. Dê ao elemento <a> um atributo href, assim: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link: - 
    <a href="https://www.mozilla.org/pt-BR/about/manifesto/">Mozilla Manifesto</a>
    -
    5. -
- -

Você pode obter resultados inesperados se omitir a parte https:// ou o http://, o chamado protocolo, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.

- -
-

href pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se você está tendo problemas para lembrar do nome, lembre que significa hypertext reference. (referência em hipertexto)

-
- -

Adicione um link em sua página agora, se ainda não tiver feito isso.

- -

Conclusão

- -

Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do tipo (você também pode vê-la aqui):
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

Se você ficar emperrado, pode sempre comparar seu trabalho com nosso código de exemplo finalizado no Github.

- -

Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa Estruturando a web com HTML.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/index.html b/files/pt-br/aprender/getting_started_with_the_web/index.html deleted file mode 100644 index ac40c9ed36..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Introdução à Web -slug: Aprender/Getting_started_with_the_web -tags: - - CSS - - Design - - Guía - - HTML - - Iniciante - - 'l10:prioridade' - - publicação - - teoria - - Índice -translation_of: Learn/Getting_started_with_the_web ---- -
{{LearnSidebar}}
- -
-

Introdução à Web é uma série concisa que apresenta os aspectos práticos do desenvolvimento web. Você configurará as ferramentas necessárias para construir uma página web simples e publicará seu próprio código.

-
- -

A história do seu primeiro website

- -

É muito trabalhoso criar um site profissional, então se você é um iniciante em desenvolvimento web, nós encorajamos você a começar pequeno. Você não vai construir outro Facebook imediatamente, mas não é difícil colocar seu próprio site online, então vamos começar por aí.

- -

Por meio dos artigos listados abaixo, você vai sair do nada e vai construir sua primeira página online. Vamos lá!

- -

Instalando os programas básicos

- -

Quando se trata de ferramentas para construir um site, há muito a se escolher. Se você está começando, pode ficar confuso com a variedade de editores de código, frameworks e ferramentas de teste existentes. Em Instalando os programas básicos nós vamos te mostrar passo a passo como instalar apenas o software necessário para começar o desenvolvimento web básico.

- -

Como será o seu site?

- -

Antes de começar a escrever o código do seu site, você deve planejá-lo primeiro. Quais informações você vai disponibilizar? Quais fontes e cores você irá usar? Em Como será seu site? Nós fornecemos um método simples que você pode seguir para planejar o conteúdo e design do seu site.

- -

Lidando com arquivos

- -

Um site consiste em muitos arquivos: conteúdo de texto, código, folhas de estilo, conteúdo de mídia etc. Ao criar um site, você precisa reunir esses arquivos em uma estrutura que faça sentido e garantir que eles possam se conectar. Lidando com arquivos explica como configurar uma estrutura de arquivos para o seu site e sobre quais problemas você deve estar ciente.

- -

HTML básico

- -

Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup Language) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o HTML básico provê informação suficiente para você se familiarizar com HTML.

- -

CSS básico

- -

Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) é o código que você usa para dar estilo ao seu site. Por exemplo, você quer que seu texto seja preto ou vermelho? Onde o conteúdo deve aparecer na tela? Quais imagens ou cores de fundo devem ser usadas para decorar seu site? CSS básico provê o necessário para você começar.

- -

JavaScript básico

- -

JavaScript é a linguagem de programação que você usa para adicionar recursos interativos ao seu site. Alguns exemplos podem ser jogos, coisas que acontecem quando botões são pressionados ou dados que são inseridos em formulários, efeitos dinâmicos de estilo, animação e muito mais. JavaScript básico vai te dar uma ideia do que é possível com essa excitante linguagem de programação e como começar a usá-la.

- -

Publicando seu site

- -

Uma vez que você tenha acabado de escrever seu código e organizado os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. Publicando seu site descreve como colocar seu código online com o mínimo de esforço.

- -

Como a web funciona

- -

Quando você acessa seu site favorito, um monte de coisas complicadas acontecem em segundo plano que você pode não conhecer. Como a web funciona mostra o que acontece quando você visualiza um site no seu computador.

- -

Veja também

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/instalando_programas_basicos/index.html b/files/pt-br/aprender/getting_started_with_the_web/instalando_programas_basicos/index.html deleted file mode 100644 index 0093c0a82d..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/instalando_programas_basicos/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Instalando os programas básicos -slug: Aprender/Getting_started_with_the_web/instalando_programas_basicos -tags: - - Aprender - - Ferramentas - - Iniciante - - Mecânica da Web - - Navegador - - configuração - - editor de texto - - 'l10:prioridade' -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

Em Instalando os programas básicos, mostraremos quais ferramentas você precisa para o desenvolvimento web simples e como instalá-los apropriadamente.

-
- -

Quais ferramentas os profissionais usam?

- - - -

Quais ferramentas eu realmente preciso nesse momento?

- -

Isso parece uma lista assustadora, mas felizmente, você pode começar a desenvolver web sem saber nada sobre a maioria deles. Neste artigo, vamos apenas configurá-lo com um mínimo  — um editor de texto e alguns navegadores modernos.

- -

Instalando um editor de texto

- -

Você provavelmente já tem um editor de texto básico no seu computador. Por padrão, o Windows inclui o Bloco de Notas (em inglês) e o Mac OS vem com o TextEdit (em inglês). Linux varia; Ubuntu vem com o gedit (em inglês) por padrão.

- -

Para desenvolvimento web, você provavelmente pode ter mais do que o Bloco de Notas ou o TextEdit. Recomendamos começar com o Visual Studio Code (em inglês), que é um editor gratuito, que oferece visualizações ao vivo e dicas de código.

- -

Instalando navegadores web modernos

- -

Por enquanto, instalaremos alguns navegadores da Web para testar nosso código. Escolha seu sistema operacional abaixo e clique nos links relevantes para fazer o download dos instaladores dos seus navegadores favoritos:

- - - -

Antes de continuar, você deve instalar pelo menos dois desses navegadores e tê-los disponíveis para teste.

- -
-

O Internet Explorer não é compatível com alguns recursos modernos da web e pode não ser capaz de executar seu projeto.

-
- -

Instalando um servidor web local

- -

Alguns exemplos precisarão ser executados por um servidor web para funcionar com êxito. Você pode ver como fazer isso em Como eu configuro um servidor de teste localmente?

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/javascript_basico/index.html b/files/pt-br/aprender/getting_started_with_the_web/javascript_basico/index.html deleted file mode 100644 index a54cab793a..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/javascript_basico/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: JavaScript básico -slug: Aprender/Getting_started_with_the_web/JavaScript_basico -tags: - - Aprender - - Codificação de Script - - Iniciante - - JavaScript - - Web - - 'l10:prioridade' -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_fwith_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

JavaScript é a linguagem de programação usada para adicionar interatividade ao seu site (por exemplo: jogos, respostas quando botões são pressionados ou dados são inseridos em formulários, estilo dinâmico, animações). Esse artigo ajuda você a começar com essa linguagem interessante e dá uma idéia do que é possível.

-
- -

O que é JavaScript, realmente?

- -

{{Glossary("JavaScript")}} (abreviado como "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} cheia de recursos que quando aplicada em um documento {{Glossary("HTML")}}, pode fornecer interatividade dinâmica em sites. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.

- -

JavaScript é incrivelmente versátil e amigável ao iniciante. Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em bancos de dados e muito mais!

- -

JavaScript em si é bastante compacto, mas muito flexível. Os desenvolvedores escreveram uma grande variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades extras com o mínimo de esforço. Essas incluem:

- - - -

Como este artigo deve ser apenas uma introdução ao JavaScript, não vamos confundir você neste estágio, falando em detalhes sobre qual é a diferença entre a linguagem JavaScript principal e as diferentes ferramentas listadas acima. Você pode aprender tudo isso em detalhes mais tarde, em nossa área de aprendizado de JavaScript e no restante do MDN.

- -

Abaixo, apresentaremos alguns aspectos da linguagem principal, e você também poderá brincar com alguns recursos da API do navegador. Divirta-se!

- -

Um exemplo "Olá mundo"

- -

A seção acima pode parecer realmente empolgante, e assim deve ser  — o JavaScript é uma das tecnologias mais ativas da Web e, à medida que você começa a usá-lo bem, seus sites entrarão em uma nova dimensão de poder e criatividade.

- -

No entanto, ficar confortável com o JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Você pode ter que começar pequeno e continuar trabalhando em pequenos passos consistentes. Para começar, mostraremos como adicionar alguns JavaScript básicos à sua página, criando um exemplo de "Olá mundo!" (o padrão em exemplos básicos de programação).

- -
-

Importante: Se você não acompanhou o restante de nosso curso, faça o download desse código exemplo e use-o como um ponto de partida.

-
- -
    -
  1. Primeiro, vá para o seu site de teste e crie uma nova pasta chamada scripts. Em seguida, dentro da nova pasta de scripts que você acabou de criar, crie um novo arquivo chamado main.js. Salve na sua pasta de scripts.
    2. -
  2. Em seguida, no seu arquivo index.html, insira o seguinte elemento em uma nova linha logo antes da tag de fechamento </body>: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Isso é basicamente a mesma coisa que o elemento {{htmlelement("link")}} para o CSS — ele aplica o JavaScript à página, para que ele tenha efeito no HTML (junto com o CSS e qualquer outra coisa na página).
    4. -
  4. Agora adicione o seguinte código no arquivo main.js: - 
    const meuCabecalho = document.querySelector('h1');
-meuCabecalho.textContent = 'Ola mundo!';
    -
    5. -
  5. Por fim, verifique se os arquivos HTML e Javascript estão salvos e, em seguida, carregue o index.html no navegador. Você deve ver algo do tipo:
    6. -
- -
-

Nota: A razão pela qual colocamos o elemento {{htmlelement("script")}} perto da parte inferior do arquivo HTML, é que o HTML é carregado pelo navegador na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do HTML em que ele deveria trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página HTML geralmente é um meio de corrigir isto, veja Estratégias de carregamento de scripts.

-
- -

O que aconteceu?

- -

Seu texto de título foi alterado para "Hello world!" usando JavaScript. Você fez isso primeiro usando uma função chamada {{domxref("Document.querySelector", "querySelector()")}} para obter uma referência ao título e armazená-lo em uma variável chamada meuCabecalho. Isso é muito parecido ao que fizemos usando seletores CSS. Quando queremos fazer algo em um elemento, primeiro você precisa selecioná-lo.

- -

Depois disso, você define o valor da propriedade {{domxref ("Node.textContent", "textContent")}} para "Hello world!", na variável meuCabecalho (que representa o conteúdo do título).

- -
-

Nota: Os dois recursos usados acima são partes da API do Modelo de Objeto de Documento (DOM), que permite manipular documentos.

-
- -

Curso intensivo de fundamentos da linguagem

- -

Vamos explicar alguns dos principais recursos da linguagem JavaScript, para dar a você um melhor entendimento de como tudo funciona. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação, por isso, se você dominar esses fundamentos, estará no caminho certo para programar qualquer coisa!

- -
-

Importante: Nesse artigo, tente escrever linhas de código de exemplo no seu console JavaScript para ver o que acontece. Para mais detalhes sobre o console JavaScript, consulte Descobrir as ferramentas do desenvolvedor do navegador.

-
- -

Variáveis

- -

{{Glossary("Variable", "Variáveis")}} são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave var (menos recomendado, se aprofunde mais para uma explicação) ou a palavra chave let, seguida por qualquer nome que você queira chamá-la:

- -
let minhaVariavel;
- -
-

Nota: Ponto-e-vírgula no fim de uma linha indica onde uma instrução termina; só é absolutamente necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocá-las no final de cada instrução. Existem outras regras para quando você deve ou não usá-las — consulte Seu Guia para Ponto-e-Vírgula em Javascript para mais detalhes.

-
- -
-

Nota: Você pode dar quase qualquer nome a uma variável, mas há algumas restrições (veja esse artigo sobre regras de nomes de variáveis). Se você não tem certeza, você pode conferir se sua variável tem um nome válido.

-
- -
-

Nota: JavaScript é case sensitive — minhaVariavel é  diferente de minhavariavel. Se você estiver tendo problemas no seu código, cheque seu casing!

-
- -
-

Nota: Para mais detalhes sobre a diferença entre var e let, veja A diferença entre var e let.

-
- -

Depois de declarar uma variável, você pode dar a ela um valor:

- -
minhaVariavel = 'Bob';
- -

Você pode fazer as duas operações na mesma linha se você quiser:

- -
let minhaVariavel = 'Bob';
-
- -

Você pode retornar o valor chamando a variável pelo nome:

- -
minhaVariavel;
- -

Depois de dar à variável um valor, você pode mudá-lo:

- -
let minhaVAriavel = 'Bob';
-minhaVariavel = 'Steve';
- -

Note que as variáveis podem conter valores com diferentes tipos de dados:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariávelExplicaçãoExemplo
{{Glossary("String")}}Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é uma string, você deve envolvê-la em aspas.let minhaVariavel = 'Bob';
{{Glossary("Number")}}Um número. Números não tem aspas ao redor deles.let minhaVariavel = 10;
{{Glossary("Boolean")}} -

Um valor verdadeiro ou falso. As palavras true e false são palavras-chaves especiais em JS e não precisam de aspas.

- 		let minhaVariavel = true;
{{Glossary("Array")}}Uma estrutura que permite armazenar vários valores em uma única variável.let minhaVariavel = [1,'Bob','Steve',10];
- Acesse cada item do array dessa maneira: minhaVariavel[0], minhaVariavel[1], etc.
{{Glossary("Object")}}Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende.let minhaVariavel = document.querySelector('h1');
- Todos os exemplos acima também.
- -

Então, por que precisamos de variáveis? Bom, variáveis são necessárias para fazer qualquer coisa interessante em programação. Se os valores não pudessem mudar, então você não poderia fazer nada dinâmico, como personalizar uma mensagem de boas-vindas, ou mudar a imagem mostrada em uma galeria de imagens.

- -

Comentários

- -

Os comentários são, essencialmente, pequenos trechos de texto que podem ser adicionados entre os códigos e são ignorados pelo navegador. Você pode colocar comentários no código JavaScript, assim como em CSS:

- -
/*
-Tudo no meio é um comentário.
-*/
- -

Se o seu comentário não tiver quebras de linha, é mais fácil colocá-lo depois de duas barras como esta:

- -
// Isto é um comentário.
- -

Operadores

- -

Um {{Glossary("operator", "operador")}} é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de alguns exemplos para experimentar no console JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorExplicaçãoSimbolo(s)Exemplo
AdiçãoUsado para somar dois números ou juntar duas strings.+6 + 9;
- "Ola " + "mundo!";
Subtração, multiplição, divisãoFazem exatamente o que você espera que eles façam na matemática básica.-, *, /9 - 3;
- 8 * 2; // no JS a multiplicação é um asterisco
- 9 / 3;
AtribuiçãoVocê já viu essa, ela associa um valor a uma variável.=let minhaVariavel = 'Bob';
-

Operador de igualdade

- 		Faz um teste para ver se dois valores são iguais, retornando um resultado true/false (booleano).===let minhaVAriavel = 3;
- minhaVariavel === 4;
Negação, não igualRetorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes.!, !== -

Para "Negação", a expressão básica é true, mas a comparação retorna false porque a negamos:

- -

let minhaVariavel = 3;
- !(minhaVariavel === 3);

- -

"Não igual" dá basicamente o mesmo resultado com sintaxe diferente. Aqui estamos testando "é minhaVariavel NÃO é igual a 3". Isso retorna false porque minhaVariavel É igual a 3.

- -

let minhaVariavel = 3;
- minhaVariavel !== 3;

-
- -

Há vários outros operadores para explorar, mas por enquanto esses são suficientes. Consulte Expressões e operadores para ver uma lista completa.

- -
-

Nota: Misturar tipos de dados pode levar a resultados estranhos quando uma operação é executada, portanto, tome cuidado para declarar suas variáveis corretamente, e você obterá os resultados esperados. Por exemplo, digite '35' + '25' no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em strings, você acabou concatenando strings em vez de somar os números. Se você digitar 35 + 25, você obterá o resultado correto.

-
- -

Condicionais

- -

Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, executando um código alternativo revelado por seu resultado. Uma forma muito comum de condicional é a instrução if ... else. Por exemplo:

- -
let sorvete = 'chocolate';
-if (sorvete === 'chocolate') {
-  alert('Opa, Eu amo sorvete de chocolate!');
-} else {
-  alert('Ahh, mas chocolate é o meu favorito...');
-}
- -

A expressão dentro do if ( ... ) é o teste — ela usa o operador de igualdade (como descrito anteriormente) para comparar a variável sorvete com a string chocolate para ver se elas são iguais. Se essa comparação retorna true, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o primeiro bloco de código será ignorado e o segundo bloco de código, após a instrução else, será executado.

- -

Funções

- -

{{Glossary("Function", "Funções")}} são uma maneira de encapsular funcionalidades que você deseja reutilizar. Quando você precisa de um procedimento, você pode chamar a função com um nome, em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções acima, por exemplo:

- -
    -
  1. - 
    let minhaVariavel = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('Ola!');
    -
    3. -
- -

Essas funções, document.querySelector e alert são pré-definidas nos navegadores para você usar quando quiser.

- -

Se você ver algo que parece com um nome de variável, mas com parênteses — () — depois, provavelmente é uma função. Funções geralmente tem {{Glossary("Argument", "Argumentos")}} — pedaços de dados que elas precisam para realizarem o seu trabalho. Os argumentos são colocados dentro dos parênteses e separados por vírgulas, se houver mais de um.

- -

Por exemplo, a função alert() faz com que uma caixa pop-up apareça dentro da janela do navegador, mas precisamos passar uma string como argumento para dizer à função o que escrever na caixa pop-up.

- -

A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que recebe dois números como argumentos e os multiplica:

- -
function multiplica(num1,num2) {
-  let resultado = num1 * num2;
-  return resultado;
-}
- -

Tente executar a função acima no console e teste com vários argumentos. Por exemplo:

- -
multiplica(4, 7);
-multiplica(20, 20);
-multiplica(0.5, 3);
- -
-

Nota: A instrução return diz ao navegador para retornar a variável resultado da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro destas funções. Isso é chamado {{Glossary("Scope", "Escopo")}} de variável (leia mais em escopo da variável.)

-
- -

Eventos

- -

Interatividade real em um site precisa de eventos. Estas são estruturas de código que percebem as coisas que acontecem no navegador, executando o código em resposta. O exemplo mais óbvio é o evento de clique, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console e, em seguida, clique na página da Web atual:

- -
document.querySelector('html').onclick = function() {
-    alert('Ai! Pare de me cutucar!');
-}
- -

Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento {{htmlelement("html")}}, definindo sua propriedade onclick igual a uma função anônima (ou seja, sem nome), que contém o código que queremos que o evento clique execute.

- -

Observe que:

- -
document.querySelector('html').onclick = function() {};
- -

é equivalente a

- -
let meuHTML = document.querySelector('html');
-meuHTML.onclick = function() {};
- -

É só uma maneira mais curta de escrever.

- -

Melhorando nosso site de exemplo

- -

Agora que analisamos alguns fundamentos do JavaScript, vamos adicionar alguns recursos interessantes ao nosso site de exemplo para ver o que é possível fazer.

- -

Adicionando um modificador de imagem

- -

Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos usar o JavaScript para alternar entre as duas, quando a imagem for clicada.

- -
    -
  1. Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.
    2. -
  2. Salve a imagem na pasta imagens.
    3. -
  3. Renomeie a imagem para 'firefox2.png' (sem as aspas).
    4. -
  4. Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu "Ola mundo" em JavaScript ainda estiver lá, delete-o): - 
    let minhaImagem = document.querySelector('img');
-
-minhaImagem.onclick = function() {
-    let meuSrc = minhaImagem.getAttribute('src');
-    if(meuSrc === 'imagens/firefox-icon.png') {
-      minhaImagem.setAttribute ('src','imagens/firefox2.png');
-    } else {
-      minhaImagem.setAttribute ('src','imagens/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Salve todos os arquivos e carregue o index.html no navegador. Agora quando você clicar na imagem, ela deve mudar para a outra!
    6. -
- -

Você armazena uma referência ao seu elemento {{htmlelement("img")}} na variável minhaImagem. Depois, você faz a propriedade do manipulador de evento onclick dessa variável igual a uma função sem nome (uma função "anônima"). Agora, toda vez que esse elemento de imagem é clicado:

- -
    -
  1. Você recupera o valor do atributo src da imagem.
    2. -
  2. Você usa uma condicional para checar se o valor src é igual ao caminho da imagem original: -
      -
    1. Se for, você muda o valor de src para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento {{htmlelement("img")}}.
      2. -
    2. Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem, para o estado original.
      3. -
    -
    3. -
- -

Adicionando uma mensagem personalizada de boas vindas

- -

Em seguida, adicionaremos outro trecho de código, alterando o título da página para uma mensagem personalizada de boas vindas quando o usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais tarde — salvaremos a mensagem usando a API de Armazenamento Web. Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas vindas sempre que necessário.

- -
    -
  1. Em index.html, adicione a seguinte linha de código antes do elemento {{htmlelement("script")}}: - - 
    <button>Mudar usuário</button>
    -
    2. -
  2. Em main.js, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o título, e guarda ambos em variáveis: - 
    let meuBotao = document.querySelector('button');
-let meuCabecalho = document.querySelector('h1');
    -
    3. -
  3. Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas corrigiremos isso em um momento: - 
    function defineNomeUsuario() {
-  let meuNome = prompt('Por favor, digite seu nome.');
-  localStorage.setItem('nome', meuNome);
-  meuCabecalho.textContent = 'Mozilla é legal, ' + meuNome;
-}
    - Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como alert() faz. Este prompt(), no entanto, pede ao usuário para inserir algum dado e guarda os dados em uma variável quando o botão OK é pressionado. Nesse caso, estamos pedindo ao usuário para digitar seu nome. Em seguida, chamamos uma API denominada localStorage, o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função setItem() de localStorage para criar e guardar um item de dado chamado 'nome', definindo seu valor para a variável meuNome que contém o nome que o usuário digitou. Finalmente, definimos o textContent do título como uma string, mais o nome recém-armazenado do usuário.
    4. -
  4. Em seguida, adicione esse bloco if ... else — poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez: - 
    if(!localStorage.getItem('nome')) {
-  defineNomeUsuario();
-} else {
-  let nomeGuardado = localStorage.getItem('nome');
-  meuCabecalho.textContent = 'Mozilla é legal, ' + nomeGuardado;
-}
    - Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo !) para checar se o dado nome existe — se não existir, a função defineNomeUsuario() é executada para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o textContent do título a uma string, mais o nome do usuário, como fizemos dentro de defineNomeUsuario().
    5. -
  5. Finalmente, coloque o evento onclick no botão, para que quando clicado, ele execute a função defineNomeUsuario(). Isso permite que o usuário defina um novo nome sempre que quiser ao pressionar o botão: - 
    meuBotao.onclick = function() { defineNomeUsuario();
-}
-
    -
    6. -
- -

Agora quando você visitar seu site pela primeira vez, ele solicitará seu nome de usuário e, em seguida, enviará uma mensagem personalizada. Você pode alterar o nome a qualquer momento, pressionando o botão. Como um bônus, porque o nome é armazenado dentro de  localStorage , ele persiste depois que o site é fechado, mantendo a mensagem personalizada lá quando você abrir o site novamente!

- -

Um nome de usuário nulo?

- -

Quando você executa o exemplo e obtém a caixa de diálogo que solicita a inserção do seu nome de usuário, tente pressionar o botão Cancelar. Você deve terminar com um título que diz "Mozilla is cool, null". Isso ocorre porque, quando você cancela o prompt, o valor é definido como null, um valor especial em JavaScript que se refere basicamente à ausência de um valor.

- -

Tente também pressionar OK sem digitar nenhum nome - você deve terminar com um título que diz "Mozilla é legal,", por razões bastante óbvias.

- -

Se você quiser evitar esses problemas, verifique se o usuário não inseriu um nome null ou em branco, atualizando a função defineNomeUsuario() para isso:

- -
function defineNomeUsuario() {
-  let meuNome = prompt('Por favor, digite seu nome.');
-  if(!meuNome || meuNome === null) {
-    defineNomeUsuario();
-  } else {
-    localStorage.setItem('nome', meuNome);
-    meuCabecalho.innerHTML = 'Mozilla é legal, ' + meuNome;
-  }
-}
- -

Na linguagem humana - se meuNome não tiver valor ou seu valor for null, execute defineNomeUsuario() novamente desde o início. Se ele tiver um valor (se as instruções acima não forem verdadeiras), armazene o valor em localStorage e defina-o como o texto do cabeçalho.

- -

Conclusão

- -

Se você seguiu todas as instruções deste artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

- -

- -

Se você ficar empacado, você pode comparar seu trabalho com o nosso exemplo finalizado no Github.

- -

Nós mal arranhamos a superfície do JavaScript. Se você gostou e deseja avançar ainda mais, veja os outros recursos abaixo.

- -

Veja também

- -
-
JavaScript — Script dinâmico do lado cliente
-
Nosso tópico de aprendizado JavaScript - mergulhe no JavaScript com muito mais detalhes.
-
Learn JavaScript
-
Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.
-
- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

Neste Módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/lidando_com_arquivos/index.html b/files/pt-br/aprender/getting_started_with_the_web/lidando_com_arquivos/index.html deleted file mode 100644 index a2d477a698..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/lidando_com_arquivos/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Lidando com arquivos -slug: Aprender/Getting_started_with_the_web/lidando_com_arquivos -tags: - - Arquivos - - Codificação de Scripts - - Guía - - HTML - - Iniciante - - Site - - 'l10:prioridade' - - teoria -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de enviá-los para o servidor. Lidando com Arquivos discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.

-
- -

Onde seu site deve residir no seu computador?

- -

Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.

- -
    -
  1. Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada projetos-web (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.
    2. -
  2. Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de site-teste (ou algo mais criativo).
    3. -
- -

Deixando de lado as maiúsculas e espaços

- -

Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:

- -
    -
  1. Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em site-teste/MyImage.jpg, e então em um outro arquivo você tentar chamar site-teste/myimage.jpg, não vai funcionar.
    2. -
  2. Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: meu-arquivo.html vs. meu_arquivo.html.
    3. -
- -

A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.

- -

Qual estrutura seu site deve ter?

- -

A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:

- -
    -
  1. index.html: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado index.html e salve dentro da sua pasta site-teste.
    2. -
  2. pasta imagens: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada imagens, dentro da sua pasta site-teste.
    3. -
  3. pasta estilos: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada estilos, dentro da pasta site-teste.
    4. -
  4. pasta scripts: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada scripts, dentro da sua pasta site-teste.
    5. -
- -
-

Nota: Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada Ocultar as extensões dos tipos de arquivo conhecidos ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção Opções de pasta..., desmarque a caixa de seleção Ocultar as extensões dos tipos de arquivo conhecidos, e clique em OK. Para mais informação sobre sua versão de Windows, procure na web.

-
- -

Caminhos de arquivo

- -

Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo index.html, e fazer mostrar a imagem que você escolheu no artigo "Como será o seu site?"

- -
    -
  1. Copie a imagem que você escolheu antes para sua pasta imagens.
    2. -
  2. Abra seu arquivo index.html e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Minha página de teste</title>
-  </head>
-  <body>
-    <img src="" alt="Minha imagem de teste">
-  </body>
-</html>
    -
    3. -
  3. A linha <img src="" alt="Minha imagem de teste"> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta imagens, no mesmo diretório do index.html. Para trilhar o caminho de index.html para nossa imagem, o caminho é imagens/nome-da-sua-imagem. Por exemplo, nossa imagem é chamada firefox-icon.png, então, nosso caminho é imagens/firefox-icon.png.
    4. -
  4. Insira o caminho dentro do seu código HTML, dentro das aspas do código src="".
    5. -
  5. Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Algumas regras gerais para caminhos de arquivo:

- - - -

Por agora, isso é tudo o que precisamos saber.

- -
-

Nota: O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: C:\windows. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.

-
- -

O que mais deve ser feito?

- -

Por agora, é isso. Sua pasta deve parecer algo do tipo:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/getting_started_with_the_web/publicando_seu_site/index.html b/files/pt-br/aprender/getting_started_with_the_web/publicando_seu_site/index.html deleted file mode 100644 index 7bc25089da..0000000000 --- a/files/pt-br/aprender/getting_started_with_the_web/publicando_seu_site/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Publicando seu site -slug: Aprender/Getting_started_with_the_web/Publicando_seu_site -tags: - - Codificação em Script - - FTP - - GitHub - - Iniciante - - Motor de Apps do Google - - Web - - 'l10n:prioridade' - - publicação - - servidor web -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -
-

Uma vez que você tenha acabado de escrever seu código e organizar os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo.  Este artigo mostra como colocar online seu código de amostra simples com o mínimo de esforço.

-
- -

Quais são as opções?

- -

Publicar um site não é um tópico simples, principalmente porque há muitas maneiras diferentes de fazê-lo. Nesse artigo, nós não pretendemos documentar todos os métodos possíveis. Em vez disso, nós discutiremos os prós e contras de três estratégias do ponto de vista de um iniciante, e então o guiaremos por um método que irá funcionar por enquanto.

- -

Conseguindo uma hospedagem e um nome de domínio

- -

Para ter mais controle sobre o conteúdo e a aparência do site, a maioria das pessoas escolhe comprar hospedagem na web e um nome de domínio:

- - - -

Muitos sites profissionais ficam online dessa maneira.

- -

Você vai precisar ainda de um programa de  {{Glossary("FTP", "Protocolo de Transferência de Arquivos (FTP)")}} (veja Quanto custa: software para mais detalhes) para transferir os arquivos do site ao servidor. Programas FTP variam, mas geralmente você tem que logar no servidor usando detalhes fornecidos por sua empresa de hospedagem (ex. nome de usuário, senha, nome de host). Então, o programa mostra para você os arquivos locais e do servidor em duas janelas, para que você possa transferí-los ao servidor e de volta para o computador:

- -

- -

Dicas para encontrar hospedagem e domínios

- - - -

Usando uma ferramenta online como Github ou Google App Engine

- -

Algumas ferramentas permitem que você publique seu site online:

- - - -

Diferente da maioria das hospedagens, essas ferramentas geralmentre são gratuitas, mas você tem um conjunto limitado de recursos.

- -

Usando uma IDE baseada na web como o CodePen

- -

Há um número grande de web apps que emulam um ambiente de desenvolvimento de site, permitindo a você escrever HTML, CSS e JavaScript e então expor o resultado renderizado como em um site — tudo em uma aba do navegador! Falando de forma genérica, essas ferramentas são fáceis, boas para aprender e gratuitas (para recursos básicos), e elas geralmente hospedam sua página em um endereço único na web. No entanto, os recursos são limitados e esses aplicativos  geralmente não provêem espaço de hospedagem para recursos (como imagens).

- -

Tente codificar com alguns desses exemplos, e veja qual se encaixa melhor para você:

- - - -

- -

Publicando via Github

- -

Agora vamos mostrar como publicar seu site facilmente por meio das páginas do GitHub.

- -
    -
  1. Primeiro de tudo, inscreva-se no GitHub e verifique seu e-mail.
    2. -
  2. Em seguida, você precisa criar um repositório para colocar seus arquivos.
    3. -
  3. Nesta página, na caixa Repository name (nome do repositório), digite username.github.io, onde username é o seu nome de usuário. Então, por exemplo, nosso amigo bobsmith entraria em bobsmith.github.io. Além disso, marque Initialize this repository with a README (inicializar este repositório com um README) e então clique em Create repository (Criar repositório).
    4. -
- -

- -
    -
  1. Arraste e solte o conteúdo da pasta do site no seu repositório e clique em Commit changes (confirmar alterações).
    2. -
- -
-

Nota: Certifique-se que sua pasta possui um arquivo index.html.

-
- -
    -
  1. Navegue em seu navegador até username.github.io para ver seu site online. Por exemplo, para o usuário chrisdavidmills, vá para chrisdavidmills.github.io.
    2. -
- -
-

Nota: Pode levar alguns minutos para seu site ficar online. Se ele não funcionar imediatamente, talvez seja necessário aguardar alguns minutos e tentar novamente.

-
- -

Para aprender mais, consulte a Ajuda do Github Pages (em inglês).

- -

Leitura complementar

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/html/como-fazer/index.html b/files/pt-br/aprender/html/como-fazer/index.html deleted file mode 100644 index 4d64f7d792..0000000000 --- a/files/pt-br/aprender/html/como-fazer/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Use HTML para resolver problemas comuns -slug: Aprender/HTML/como-fazer -translation_of: Learn/HTML/Howto ---- -
{{LearnSidebar}}
- -

Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.

- -
-
-

Estrutura Básica

- -

A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.

- - - -

Semântica básica em nível de texto

- -

O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.

- - -
- -
- - -

Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:

- - - -

Imagens & multimídia

- - - -

Scripts & estilos

- -

O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.

- - - -

Conteúdo embutido

- - -
-
- -

Problemas incomuns ou avançados

- -

Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:

- -
-
-

Formulários

- -

Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso guia completo. Eis os tópicos onde você deve começar:

- - - -

Informação tabular

- -

Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:

- - - -

Representação de dados

- - - -

Interatividade

- - -
- -
-

Semântica avançada de texto

- - - -

Imagens & multimídia avançados

- - - -

Internacionalização

- -

HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.

- - - -

Performance

- - -
-
- -

     

diff --git a/files/pt-br/aprender/html/index.html b/files/pt-br/aprender/html/index.html deleted file mode 100644 index 498ba9ab01..0000000000 --- a/files/pt-br/aprender/html/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Estruturando a web com HTML -slug: Aprender/HTML -tags: - - Aprender - - Guía - - HTML - - Iniciante - - Introdução - - Tópico -translation_of: Learn/HTML ---- -

{{LearnSidebar}}

- -

Para construir websites, você deve conhecer sobre {{Glossary('HTML')}} — a tecnologia fundamental usada para definir a estrutura de uma página web. HTML é usado para especificar se o conteúdo da web deve ser reconhecido como um parágrafo, uma lista, um título, um link, uma imagem, um visualizador multimídia, um formulário ou um dos muitos outros elementos disponíveis ou até mesmo um novo elemento definido por você.

- -

Percurso de aprendizagem

- -

Você deve, preferencialmente, iniciar sua jornada aprendendo HTML. Comece lendo Introdução ao HTML. Você pode então passar a aprender sobre tópicos mais avançados, tais como:

- - - -

Antes de iniciar este tópico, você deve pelo menos ter uma familiaridade básica com o uso de computadores e com a web (por exemplo: apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente básico de trabalho configurado como detalhado em Instalando os programas básicos e entender como criar e gerenciar arquivos, como detalhado em Lidando com arquivos — ambos fazem parte do nosso módulo para iniciantes Introdução à Web.

- -

Recomenda-se que você complete o módulo Introdução à Web antes de tentar este tópico, mas isto não é absolutamente necessário; muito do que é abordado no artigo HTML básico é também abordado no nosso módulo Introdução ao HTML, embora com muito mais detalhes.

- -

Módulos

- -

Este tópico contém os seguintes módulos, em uma ordem sugerida para trabalhar com eles. Você deve definitivamente começar com o primeiro módulo.

- -
-
Introdução ao HTML
-
Este módulo define o cenário, introduzindo você a conceitos e sintaxe importantes, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma página da web.
-
Multimídia e incorporação
-
Este módulo explora como usar HTML para incluir multimídia em suas páginas web, incluindo as diferentes formas que as imagens podem ser inseridas e como incorporar vídeo, áudio e até mesmo outras páginas inteiras.
-
Tabelas HTML
-
Representar dados tabulares em uma página da web de maneira compreensível e {{glossary("Accessibility", "acessível")}} pode ser um desafio. Este módulo abrange a marcação básica de tabelas, além de outros recursos mais complexos, tais como a implementação de legendas e resumos.
-
- -

Resolvendo problemas comuns com HTML

- -

Usar HTML para resolver problemas comuns fornece links para seções com conteúdos que explicam como usar HTML para resolver problemas muito comuns ao criar uma página da web: lidar com títulos, adicionar imagens ou vídeos, enfatizar conteúdo, criar um formulário básico, etc.

- -

Veja também

- -
-
Formulários HTML
-
Este módulo fornece uma série de artigos que ajudarão você a dominar o essencial dos formulários da web. Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. No entanto, por razões históricas e técnicas, nem sempre é óbvio como usá-las em todo o seu potencial. Abordaremos todos os aspectos essenciais dos formulários da Web, incluindo marcação de sua estrutura HTML, controles de estilo, validação de dados e envio de dados ao servidor.
-
HTML (Linguagem de Marcação de HiperTexto)
-
O principal ponto de entrada para a documentação HTML no MDN, incluindo referências detalhadas de elementos e atributos — se você quiser saber quais atributos um elemento possui ou quais valores tem um atributo, por exemplo, este é um ótimo lugar para começar.
-
diff --git a/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html b/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html deleted file mode 100644 index 1abbfa20c4..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Criando hyperlinks -slug: Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks -tags: - - Guía - - HTML - - HTTP - - Iniciante - - Link - - URL - - absoluto - - href - - hyperlinks - - relativo -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

-
- -

Os hiperlinks são realmente importantes — são o que torna a Web uma web. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.

- - - - - - - - - - - - -
Pre-requisitos: -

Familiaridade básica em HTML, conforme Começando com o HTML. Formatação de texto em HTML, conforme Fundamentos do texto em HTML.

-
Objetivo:Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.
- - - -

Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço ({{glossary("URL")}}).

- -
-

Nota: Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).

-
- -

A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- - - -

Um link básico é criado envolvendo o texto (ou outro conteúdo, veja {{anch("Block level links")}}) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo {{htmlattrxref("href", "a")}}, (também conhecido como Hypertext Reference, ou target) que conterá o endereço da Web para o qual você deseja que o link aponte.

- -
<p>Estou criando um link para
-<a href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.
-</p>
- -

Isso nos dá o seguinte resultado:

- -

Estou criando um link para a página inicial da Mozilla.

- -

Adicionando informações de suporte com o atributo title

- -

Outro atributo que você pode querer adicionar aos seus links é o title; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:

- -
<p>Estou criando um link para
-<a href="https://www.mozilla.org/pt-BR/"
-   title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir"> a página inicial da Mozilla</a>.
-</p>
- -

Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):

- -

Estou criando um link para a página inicial da Mozilla.

- -
-

Nota: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou touchscreen para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.

-
- -

Aprendizagem na prática: criando seu próprio link de exemplo

- -

Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso modelo inicial seria interessante.)

- - - - - -

Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo elementos de nível de bloco. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <a></a>.

- -
<a href="https://www.mozilla.org/pt-BR/">
-  <img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla">
-</a>
- -
-

Nota: Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.

-
- -

Um guia rápido sobre URLs e caminhos

- -

Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.

- -

Um URL ou Uniform Resource Locator é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em https://www.mozilla.org/en-US/.

- -

Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de criação de hiperlinks).

- -

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

- -

A raiz dessa estrutura de diretório é chamada de  criação de hiperlinks. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo index.html e um arquivo contacts.html. Em um site real, index.html seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).

- -

Existem também dois diretórios dentro da nossa raiz — pdfs e projects. Cada um deles contém um único arquivo — um PDF (projetos-brief.pdf) e um arquivo index.html, respectivamente. Observe como é possível, felizmente, ter dois arquivos index.html em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo index.html poderia ser a página de destino principal para informações relacionadas ao projeto.

- - - -
-

Nota: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo../../../complex/path/to/my/file.html.

-
- -

Fragmentos de documento

- -

É possível vincular a uma parte específica de um documento HTML (conhecido como um fragmento de documento) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:

- -
<h2 id="Mailing_address">Endereço de correspondência</h2>
- -

Em seguida, para vincular a esse  id específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:

- -
<p>Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing_address">endereço de correspondência</a>.</p>
- -

Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:

- -
<p>O <a href="#Mailing_address">endereço postal da empresa</a> pode ser encontrado na parte inferior desta página.</p>
- -

URLs absolutos versus relativos

- -

Dois termos que você encontrará na Web são URL absoluto e URL relativo:

- -

URL absoluto: aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página index.html for carregada para um diretório chamado projeto que fica dentro da raiz de um servidor web, e o domínio do site é http://www.exemplo.com, a página estará disponível em http://www.exemplo.com/projeto/index.html (ou mesmo apenas http://www.exemplo.com/projeto/, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)

- -

Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.

- -

URL relativa: aponta para um local relativo ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em http://www.exemplo.com/projeto/index.html para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, project-brief.pdf — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de projects chamado pdfs, o link relativo seria  pdfs/projeto-brief.pdf (o URL absoluto equivalente seria http://www.example.com/projects/pdfs/project-brief.pdf).

- -

Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo index.html para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a pdfs/project-brief.pdf agora apontaria para um arquivo localizado em http://www.example.com/pdfs/project-brief.pdf, não para um arquivo localizado em http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Práticas recomendadas

- -

Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.

- - - -

Use palavras-chave claras

- -

É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links acessíveis a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:

- - - -

Vejamos um exemplo específico:

- -

Texto de link correto: Baixe o Firefox

- -
<p><a href="https://firefox.com/">
-  Baixe o Firefox
-</a></p>
- -

Texto de link incorreto: clique aqui para baixar o Firefox

- -
<p><a href="https://firefox.com/">
-  clique aqui
-</a>
-para baixar o Firefox</p>
-
- -

Outras dicas:

- - - - - -

A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com links relativos. No entanto, você deve usar links relativos sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):

- - - -

Vinculando-se a recursos que não sejam HTML — deixe indicadores claros

- -

Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:

- - - -

Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Baixe o relatório de vendas (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Assista ao vídeo (o fluxo abre em separado, qualidade HD)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Jogue o jogo de carro (requer Flash Player)
-</a></p>
- -

Use o atributo de download ao vincular a um download

- -

Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de baixar para a versão do Windows 39 do Firefox:

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
-  Faça o download do Firefox 39 para Windows
-</a>
- -

Aprendizagem ativa: criando um menu de navegação

- -

Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um site com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os links são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.

- -

Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de início do menu de navegação para uma lista completa de arquivos):

- - - -

Você deve:

- -
    -
  1. Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de links, então está semanticamente correto.
    2. -
  2. Transformar o nome de cada página em um link para essa página.
    3. -
  3. Copiar o menu de navegação para cada uma.
    4. -
  4. Em cada página, remova apenas o link para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um link é um bom lembrete visual de qual página você está atualmente.
    5. -
- -

O exemplo final acabaria por parecer algo assim:

- -

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

- -
-

Note: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de navegação-menu-marcado para ver a resposta correta.

-
- - - -

É possível criar links ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento {{HTMLElement("a")}} e o mailto: estrutura de URL.

- -

Na sua forma mais comum, um mailto: simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:

- -
<a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a>
-
- -

Isso resulta em um link que se parece com isto: Enviar e-mail para lugar nenhum.

- -

Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu {{htmlattrxref("href", "a")}} for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" links que os usuários podem clicar para enviar um e-mail para um endereço escolhido.

- -

Especificando detalhes

- -

Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do mailto: que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.

- -

Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:

- -
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
- Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo:
-</a>
- -
-

Nota: Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com percent-escaped. Observe também o uso do ponto de interrogação (?) Para separar o URL principal dos valores do campo e do e comercial (&) para separar cada campo no mailto: URL. Essa é a notação de consulta padrão do URL. Leia O método GET para entender para que esta notação de consulta é mais comum.

-
- -

Aqui estão alguns outros exemplos de URLs de mailto:

- - - -

Resumo

- -

Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/aprender/html/introducao_ao_html/debugging_html/index.html b/files/pt-br/aprender/html/introducao_ao_html/debugging_html/index.html deleted file mode 100644 index 4b518454d9..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/debugging_html/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Debugging HTML -slug: Aprender/HTML/Introducao_ao_HTML/Debugging_HTML -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Escrever HTML é legal, mas e se algo der errado, e você não conseguir descobrir onde está o erro no código? Este artigo apresentará algumas ferramentas que podem ajudá-lo a encontrar e corrigir erros no HTML.

- - - - - - - - - - - - -
Pré-requisitos:Familiaridade com HTML, conforme abordado, por exemplo, em Introdução ao HTML, Fundamentos de texto em HTML e Criação de Hiperlinks.
Objetivo:Aprender o básico sobre o uso de ferramentas de depuração (debugging) para encontrar problemas em HTML.
- -

Depurar não é assustador

- -

Ao escrever algum tipo de código, tudo costuma ir bem, até o temido momento quando ocorre um erro — você fez algo errado, então seu código não funciona - talvez não funcione mais nada ou não funciona exatamente como você queria. Por exemplo, a seguir é mostrado um erro relatado ao tentar {{glossary("compilar")}} um programa simples escrito na linguagem Rust.

- -

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.Aqui, a mensagem de erro é relativamente fácil de entender — "string de aspas duplas sem terminação". Se você olhar a listagem, provavelmente verá como println!(Hello, world!"); pode estar faltando logicamente uma aspa dupla. No entanto, as mensagens de erro podem ficar mais complicadas e menos fáceis de interpretar à medida que os programas se tornam maiores, e até mesmo casos simples podem parecer um pouco intimidadores para alguém que não sabe nada sobre o Rust.

- -

Depurar um código não tem que ser assustador, porém —  a chave para se sentir confortável em escrever e depurar qualquer linguagem ou código de programação é a familiaridade com a linguagem e as ferramentas.

- -

HTML e depuração

- -

HTML não é tão complicado de entender quanto o Rust. O HTML não é compilado em um formato diferente antes do navegador analisá-lo e mostrar o resultado (ele é interpretado, não compilado). E a sintaxe do {{glossary("elemento")}} HTML é muito mais fácil de entender do que uma "linguagem de programação real" como Rust, {{glossary("JavaScript")}}, ou {{glossary("Python")}}. A forma como os navegadores analisam o HTML é muito mais permissiva do que a forma como as linguagens de programação são executadas, o que é bom e ruim.

- -

Código permissivo

- -

Então, o que queremos dizer com permissivo? Bem, geralmente quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:

- - - -

O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam permissivamente, o que significa que a página ainda é exibida mesmo se houver erros de sintaxe. Os navegadores têm regras internas para indicar como interpretar a marcação escrita incorretamente, para que você obtenha algo em execução, mesmo que não seja o esperado. Isso, claro, ainda pode ser um problema!

- -
-

Nota: O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir que as pessoas publicassem seus conteúdos era mais importante do que garantir que a sintaxe estivesse absolutamente correta. A web provavelmente não seria tão popular quanto é hoje, se tivesse sido mais rigorosa desde o início.

-
- -

Aprendizado Ativo: Estudando código permissivo

- -

É hora de estudar a natureza permissiva do código HTML.

- -
    -
  1. Primeiramente, faça o download do debug-example demo e o salve localmente. Esse exemplo contém erros propositais para que possamos explorá-los (tal código HTML é dito  badly-formed, em contraponto ao HTML well-formed).
    2. -
  2. Em seguida, abra o arquivo em um navegador. Você verá algo como:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. -
  3. Isso claramente não parece bom; vamos dar uma olhada no código fonte para tentar achar os erros (somente o conteúdo de body é mostrado): - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Vamos analisar os erros: -
      -
    • Os elementos {{htmlelement("p","parágrafo")}} e {{htmlelement("li","item da lista")}} não possuem tags de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar.
      • -
    • O primeiro elemento {{htmlelement("strong")}} não possui tag de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado.
      • -
    • Essa seção foi aninhada incorretamente: <strong>strong <em>strong emphasised?</strong> what is this?</em>. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior.
      • -
    • O valor do atributo {{htmlattrxref("href","a")}} não tem as aspas de fechamento. Isso parece ter causado o maior problema — o link não foi renderizado.
      • -
    -
    5. -
  5. Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: O que são as ferramentas de desenvolvimento do navegador.
    6. -
  6. No inspetor DOM, você pode ver como o HTML renderizado fica: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. -
  7. Utilizando o inspetor DOM, vamos explorar nosso código detalhadamente para ver como o navegador tentou consertar os erros do código HTML (nós fizemos a análise com o Firefox, mas outros navegadores modernos devem apresentar o mesmo resultado): -
      -
    • As tags de fechamento foram colocadas nos parágrafos e itens da lista.
      • -
    • Não está claro onde o primeiro elemento <strong> deveria terminar, portanto o navegador envolveu cada bloco subsequente em uma tag strong própria até o fim do documento!
      • -
    • O aninhamento incorreto foi corrigido pelo navegador da seguinte maneira: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • O link cujas aspas de fechamento não estavam presentes foi totalmente excluído da renderização. Então o último item ficou assim: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

Validação HTML

- -

Então, você pode ver pelo exemplo acima que você realmente  quer ter certeza de que o seu HTML foi bem construido! Mas Como? Em um pequeno exemplo como o que foi visto acima, é facil analisar as linhas e achar os erros, mas e se fosse um gigante e complexo documento HTML?

- -

A melhor estratégia é começar rodando a sua página HTML através do Markup Validation Service — criado e mantido pelo W3C, uma organização que cuida das especificações que define o HTML, CSS, e outras tecnologias WEB. Esta página considera um documento HTML como uma entrada, fazendo a leitura dela e retornando o que há de errado com o seu HTML.

- -

The HTML validator homepage

- -

Para especificar o HTML a ser validado, você pode dar um endereço web, fazer o upload de um arquivo HTML, ou diretamente inserir o código HTML.

- -

Aprendizado Ativo: Validando um documento HTML

- -

Vamos tentar fazer isto com o nosso sample document.

- -
    -
  1. Primero, carregue o Markup Validation Service em uma aba no seu navegador, caso já não esteja carregada.
    2. -
  2. Troque para a aba Validate by Direct Input.
    3. -
  3. Copie todo o código do documento de exemplo (não apenas o body) e cole dentro da grande área de texto mostrada no Markup Validation Service.
    4. -
  4. Pressione o botão Check.
    5. -
- -

Você deverá receber uma lista de erros e outras informações.

- -

A list of of HTML validation results from the W3C markup validation service

- -

Interpretando as mensagens de erros

- -

As mensagens de erros geralmente são úteis, mas algumas vezes elas não ajudam tanto; com um pouco de prática você pode descobrir como interpretar-lás para arrumar o seu código. Vamos dar uma olhada nas mensagens de erros e ver o que elas significam. Você verá que cada mensagem vem com um numero para a linha e um para a coluna afim de ajudar você a localizar o erro facilmente.

- - - -

If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.

- -

You will know when all your errors are fixed when you see the following banner in your output:

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Summary

- -

So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/html/introducao_ao_html/estrutura_de_documento_e_sites/index.html b/files/pt-br/aprender/html/introducao_ao_html/estrutura_de_documento_e_sites/index.html deleted file mode 100644 index 825d2cec6e..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/estrutura_de_documento_e_sites/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: Estrutura de documento e sites -slug: Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -
Além de definir as partes individuais de sua página (como "um parágrafo" ou "uma imagem"),
- -

o {{glossary("HTML")}}  também conta com vários elementos de nível de bloco usados para definir as áreas de seu site (como "o cabeçalho", "o menu de navegação", "a coluna de conteúdo príncipal"). Este artigo explora como planejar uma estrutura básica de website, e escrever o HTML para representar essa estrutura.

- - - - - - - - - - - - -
Pre-requisitos: -

Familiaridade básica com HTML, como mostrado em Iniciando com HTML. Formatação de texto HTML, como mostrado em Fundamentos do texto em HTML. O funcionamento de hiperlinks, como visto em Criando hyperlinks.

-
Objetivo: -

Aprenda a estruturar seu documento usando tags semânticas e como elaborar a estrutura de um site simples.

-
- -

Seções básicas de um documento

- -

As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:

- -
-
cabeçalho (header)
-
-

Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É aí que as principais informações comuns sobre um site geralmente ficam de uma página para outra.

-
-
barra de navegação
-
-

Links para as principais seções do site; geralmente representado por botões de menu, links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente em seu site levará a usuários confusos e frustrados. Muitos web designers consideram a barra de navegação parte do cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, já que os leitores de tela podem ler melhor os dois recursos se estiverem separados.

-
-
conteúdo principal
-
-

Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da Web, por exemplo, o vídeo que você deseja assistir ou a história principal que você está lendo ou o mapa que deseja visualizar ou as manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de página para página!

-
-
barra lateral (sidebar)
-
-

Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é contextual ao conteúdo principal (por exemplo, em uma página de um artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há também casos em que você encontrará alguns elementos recorrentes como um sistema de navegação secundário.

-
-
rodapé (footer)
-
-

Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um lugar para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. O rodapé também é usado às vezes para fins de {{Glossary ("SEO")}}, fornecendo links para acesso rápido a conteúdo popular.  Um "site típico" poderia ser colocado assim:

-
-
- -

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

- -

HTML para estruturar conteúdo

- -

O exemplo simples mostrado acima não é bonito, mas é perfeitamente aceitável para ilustrar um exemplo típico de layout de website. Alguns sites têm mais colunas, algumas são bem mais complexas, mas você tem a ideia. Com o CSS certo, você poderia usar praticamente todos os elementos para agrupar as diferentes seções e fazer com que parecesse como você queria, mas como discutido anteriormente, precisamos respeitar a semântica e usar o elemento certo para o trabalho certo.

- -

Isso ocorre porque os visuais não contam toda a história. Usamos cor e tamanho de fonte para chamar a atenção dos usuários para as partes mais úteis do conteúdo, como o menu de navegação e links relacionados, mas sobre pessoas com deficiência visual, por exemplo, que podem não encontrar conceitos como "rosa" e "grande". fonte "muito útil?

- -
-

Nota: as pessoas daltônicas representam cerca de 4% da população mundial ou, em outras palavras, aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicas. Cegos e deficientes visuais representam cerca de 4-5% da população mundial (em 2012 havia 285 milhões de pessoas no mundo, enquanto a população total era de cerca de 7 bilhões).

-
- -

Em seu código HTML, você pode marcar seções de conteúdo com base em sua funcionalidade. Você pode usar elementos que representam as seções de conteúdo descritas acima sem ambigüidade, e tecnologias assistivas, como leitores de tela, podem reconhecer esses elementos e ajudar com tarefas como "localizar a navegação principal". "ou" encontre o conteúdo principal. " Como mencionamos anteriormente no curso, há um número de consequências de não usar a estrutura de elemento e semâtica certas para o trabalho certo.

- -

Para implementar essa marcação semântica, o HTML fornece tags dedicadas que você pode usar para representar essas seções, por exemplo:

- - - -

Aprendizagem ativa: explorando o código para o nosso exemplo

- -
-
-
-

Nosso exemplo visto acima é representado pelo seguinte código (você também pode encontrar o exemplo em nosso repositório GitHub). Gostaríamos que você olhasse o exemplo acima e, em seguida, examine a listagem abaixo para ver quais partes compõem a seção do visual. 

-
-
-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>My page title</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em versões antigas do Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Esse é o conteúdo principal da nossa página -->
-    <main>
-
-      <!-- Contém um artigo -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main -->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Reserve um tempo para examinar o código e entendê-lo - os comentários dentro do código também devem ajudá-lo a entendê-lo. Não estamos pedindo que você faça muito mais neste artigo, porque a chave para entender o layout do documento é escrever uma estrutura HTML sólida e, em seguida, defini-la com CSS. Nós vamos aguardar isso até que você comece a estudar o CSS layout como parte do tópico do estudo de CSS.

- -

Elementos de layout do HTML em mais detalhes

- -

É bom entender o significado geral de todos os elementos de seção do HTML em detalhes - isso é algo em que você trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento web. Você pode encontrar muitos detalhes lendo o nosso Elementos HTML. Para agora, estes são as principais definições que você deve tentar entender:

- - - -

Elementos de layout não-semânticos

- -

Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo {{htmlattrxref('class')}} adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados.

- -

{{HTMLElement("span")}} é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo:

- -
<p>O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para ajudá-lo
-enquanto ele cambaleando pela porta <span class="editor-note">[Nota do editor: Neste ponto da peça, as luzes devem estar baixas]</span>.</p>
- -

Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não é suposto ter um significado semântico extra. Para usuários observador, talvez o CSS fosse usado para distanciar a nota um pouco do texto principal.

- -

{{HTMLElement("div")}} é um elemento não semântico no nível de bloco, que você deve usar apenas se não conseguir pensar em um elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a qualquer momento durante o seu tempo em um site de comércio eletrônico:

- -
<div class="carrinho-de-compras">
-  <h2>Carrinho de compras</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Brincos de prata</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Brincos de prata">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Preço total: $237.89</p>
-</div>
- -

Este não é realmente um <aside>, pois não está necessariamente relacionado ao conteúdo principal da página (você deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de uma <section>, pois não faz parte do conteúdo principal da página. Portanto, um <div> é bom neste caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a encontrá-lo.

- -
-

Aviso: Divs são tão convenientes de usar que é fácil usá-los demais. Como eles não carregam valor semântico, eles apenas confundem seu código HTML. Tome cuidado para usá-los somente quando não houver uma solução semântica melhor e tente reduzir ao mínimo o uso deles, caso contrário, será difícil atualizar e manter seus documentos.

-
- -

Quebras de linha e regras horizontais

- -

Dois elementos que você ocasionalmente vai usar e desejerá conhecer são {{htmlelement("br")}} e {{htmlelement("hr")}}:

- -

<br> cria uma quebra de linha em um parágrafo; é a única maneira de forçar uma estrutura rígida em uma situação em que você deseja uma série de linhas curtas fixas, como em um endereço postal ou um poema. Por exemplo:

- -
<p>Era uma vez um homem chamado O'Dell<br>
-Que adorava escrever HTML<br>
-Mas sua estrutura era ruim, sua semântica era triste<br>
-e sua marcação não leu muito bem.</p>
- -

Sem os elementos <br>, o parágrafo seria apenas renderizado em uma longa linha (como dissemos anteriormente no curso, o HTML ignora a maioria dos espaços em branco); com elementos <br> no código, a marcação é renderizada assim

- -

Era uma vez um homem chamado O'Dell
- Que adorava escrever HTML
- Mas sua estrutura era ruim, sua semântica era triste
- e sua marcação não leu muito bem.

- -

Elementos <hr> criam uma regra horizontal no documento que indica uma alteração temática no texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha horizontal. Como um exemplo:

- -
<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p>
-<hr>
-<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p>
- -

Seria renderizado assim:

- -

Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.

- -
-

Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.

- -

Planejando um simples website

- -

Depois de planejar o conteúdo de uma página da Web simples, o próximo passo lógico é tentar descobrir qual conteúdo você deseja colocar em um site inteiro, quais páginas você precisa e como elas devem ser organizadas e vinculadas umas às outras. para a melhor experiência de usuário possível. Isso é chamado {{glossary("Information architecture")}}. Em um site grande e complexo, é possível planejar muito esse processo, mas para um site simples de poucas páginas, isso pode ser bastante simples e divertido!

- -
    -
  1. Lembre-se de que você terá alguns elementos comuns à maioria das páginas (se não todas), como o menu de navegação e o conteúdo do rodapé. Se seu site é para uma empresa, por exemplo, é uma boa ideia ter suas informações de contato disponíveis no rodapé de cada página. Anote o que você deseja que seja comum a todas as páginas.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Em seguida, desenhe um esboço de como a estrutura de cada página deve parecer (pode parecer com nosso site simples acima). Observe o que cada bloco será.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Agora, faça um brainstorm de todos os outros conteúdos (comuns a todas as páginas) que você deseja ter no seu site - escreva uma grande lista.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Em seguida, tente classificar todos esses itens de conteúdo em grupos, para ter uma idéia de quais partes podem viver juntas em páginas diferentes. Isso é muito semelhante a uma técnica chamada {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Agora, tente esboçar um mapa do site aproximado - faça um balão para cada página do seu site e desenhe linhas para mostrar o fluxo de trabalho típico entre as páginas. A página inicial provavelmente estará no centro e terá um link para a maioria, senão todas as outras; a maioria das páginas em um site pequeno deve estar disponível na navegação principal, embora haja exceções. Você também pode incluir notas sobre como as coisas podem ser apresentadas.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. -
- -

Aprendizado ativo: crie seu próprio mapa do site

- -

Tente realizar o exercício acima para um site de sua própria criação. Sobre o que você gostaria de criar um site?

- -
-

Nota: Salve seu trabalho em algum lugar; você pode precisar mais tarde.

-
- -

Resumo

- -

Nesse ponto, você deve ter uma idéia melhor sobre como estruturar uma página / site. No último artigo deste módulo, estudaremos como depurar HTML.

- -

Ver também

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/html/introducao_ao_html/formatacao_avancada_texto/index.html b/files/pt-br/aprender/html/introducao_ao_html/formatacao_avancada_texto/index.html deleted file mode 100644 index 3b5365b074..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/formatacao_avancada_texto/index.html +++ /dev/null @@ -1,481 +0,0 @@ ---- -title: Formatação avançada de texto -slug: Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto -tags: - - Aprender - - Guía - - HTML - - Texto - - abreviação - - citar - - lista de descrição - - semântico -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

-Existem muitos outros elementos em HTML para formatação de texto, que não tratamos no artigo de Fundamentos do texto em HTML. Os elementos descritos neste artigo são menos conhecidos, mas ainda são úteis para conhecer (e isso ainda não é uma lista completa de todos os elementos). Aqui, você aprenderá a marcar citações, listas de descrição, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contato e muito mais. -

- -

- - - - - - - - - - - - -
Pré-requisitos:Familiaridade básica em HTML, conforme abordado em Introdução ao HTML. Formatação de texto em HTML, conforme abordado em Fundamentais de texto em HTML.
Objetivo:Aprender a usar elementos HTML menos conhecidos para marcar recursos semânticos avançados.
- -

Listas de descrição

- -

Nos Fundamentos do texto em HTML, falamos sobre como marcar as listas básicas em HTML, mas não mencionamos o terceiro tipo de lista que ocasionalmente irá encontrar - listas de descrição. O objetivo dessas listas é marcar um conjunto de itens e suas descrições associadas, como termos e definições, ou perguntas e respostas. Vejamos um exemplo de um conjunto de termos e definições:

- -
solilóquio
-No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
-monólogo
-No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
-aparte
-No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
- -

As listas de descrição usam um invólucro diferente dos outros tipos de lista — {{htmlelement("dl")}}; além disso, cada termo está envolvido em um {{htmlelement("dt")}} (termo de descrição) elemento, e cada descrição está envolvida em um {{htmlelement("dd")}} (definição de descrição) elemento. Vamos terminar marcando nosso exemplo:

- -
<dl>
-  <dt>solilóquio</dt>
-  <dd>No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).</dd>
-  <dt>monólogo</dt>
-  <dd>No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.</dd>
-  <dt>aparte</dt>
-  <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd>
-</dl>
- -

Os estilos padrões do navegador exibirão as listas com as descrições indentadas um pouco dos termos. Os estilos da MDN seguem esta convenção de forma bastante parecida, mas também enfatizam os termos, para uma definição extra.

- -
-
solilóquio
-
No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
-
monólogo
-
No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
-
aparte
-
No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
-
- -

Observe que é permitido ter um único termo com múltiplas descrições, por exemplo:

- -
-
aparte
-
No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
-
Por escrito, uma seção de conteúdo que está relacionada ao tópico atual, mas não se encaixa diretamente no fluxo principal de conteúdo, então é apresentado próximo (muitas vezes em uma caixa ao lado).
-
- -

Aprendizagem ativa: marcando um conjunto de definições

- -

É hora de pôr as mãos nas listas de descrição. Adicione elementos ao texto bruto no campo de Entrada para que ele se pareça como uma lista de descrição no campo Saída. Você pode tentar usar seus próprios termos e descrições, se quiser.

- -

Se você cometer um erro, sempre pode reiniciá-lo usando o botão 'Limpar'. Se ficar realmente preso, pressione o botão 'Mostrar solução' para ver a resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Cotações

- -

HTML também possui recursos disponíveis para marcação de cotações. Qual elemento você pode usar? Depende se está marcando um bloco ou uma cotação em linha.

- -

Blockquotes

- -

Se uma seção de conteúdo em nível de bloco (seja um parágrafo, vários parágrafos, uma lista, etc.) for citada em algum outro lugar, você deverá envolvê-la em um elemento <blockquote> para indicar isso e incluir um URL apontando para a fonte da citação dentro de um atributo cite. Por exemplo, a marcação a seguir é obtida da página do elemento <blockquote> do MDN:

- -
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
- -

Para transformar isso em uma cotação em bloco, faríamos assim:

- -
<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
-</blockquote>
- -

O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um indicador de que é uma citação. O MDN faz isso, mas também, adiciona um estilo extra:

- -
-

O Elemento HTML <blockquote> (or HTML Block Quotation Element) indica que o texto em anexo é uma cotação estendida.

-
- -

Cotações em linha

- -

As cotações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento {{htmlelement("q")}}. Por exemplo, o bit de marcação abaixo contém uma cotação da página MDN <q>:

- -
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q></p>
- -

O estilo padrão do navegador renderiza isso como texto normal entre aspas para indicar uma cotação, assim:

- -

O elemento de cotação — <q> — é "destinado a citações curtas que não exigem quebras de parágrafo".

- -

Citações

- -

O conteúdo do atributo {{htmlattrxref("cite","blockquote")}} parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de cite, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da cotação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de <cite> à citação fonte de alguma forma:

- -
<p>According to the <a href="/en-US/docs/Web/HTML/Element/blockquote">
-<cite>MDN blockquote page</cite></a>:
-</p>
-
-<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
-</blockquote>
-
-<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q> -- <a href="/en-US/docs/Web/HTML/Element/q">
-<cite>MDN q page</cite></a>.</p>
- -

As citações são estilizadas em fonte itálica por padrão. Você pode ver esse código funcionando em nosso exemplo quotations.html.

- -

Aprendizado ativo: quem disse isso?

- -

Hora de outro exemplo de aprendizado ativo! Neste exemplo, gostaríamos que você:

- -
    -
  1. Transforme o parágrafo do meio em uma citação em bloco, que inclui um atributo cite.
    2. -
  2. Transforme parte do terceiro parágrafo em uma cotação embutida, que inclui um atributo de cite.
    3. -
  3. Inclua um elemento <cite> para cada link.
    4. -
- -

Pesquise on-line para encontrar fontes de cotação apropriadas.

- -

Se você cometer um erro, sempre poderá redefini-lo usando o botão 'Limpar'. Se você realmente ficar atolado, pressione o botão 'Mostrar solução' para ver a resposta.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

Abreviações

- -

Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo {{htmlattrxref("title")}}.) Vejamos alguns exemplos

- -
<p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p>
-
-<p>Acho que o <abbr title="Reverendo">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p>
- -

Elas aparecerão da seguinte forma (a expansão aparecerá em uma dica de ferramenta quando o termo passar o mouse):

- -

Usamos HTML para estruturar nossos documentos da web.

- -

Acho que o Rev. Green fez isso na cozinha com a motosserra.

- -
-

Note: Há outro elemento, {{htmlelement("acronym")}}, que basicamente faz a mesma coisa que <abbr>, e foi projetado especificamente para acrônimos, em vez de abreviações. Isso, no entanto, caiu em desuso — não era suportado em navegadores nem o <abbr>, e tem uma função semelhante que foi considerado inútil ter os dois. Apenas use <abbr>.

-
- -

Aprendizado ativo: marcando uma abreviação

- -

Para esta tarefa simples de aprendizado ativo, gostaríamos que você simplesmente marque uma abreviação. Você pode usar nossa amostra abaixo ou substituí-la por uma de sua preferência.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

- -

Marcando detalhes de contato

- -

O HTML possui um elemento para marcar os detalhes do contato — {{htmlelement("address")}}. Isso simplesmente envolve seus detalhes de contato, por exemplo:

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Porém, uma coisa a se lembrar é que o elemento <address> destina-se a marcar os detalhes de contato da pessoa que escreveu o documento HTML e não qualquer endereço. Portanto, o exposto acima só seria bom se Chris tivesse escrito o documento em que a marcação aparece. Observe, que, algo assim também seria bom:

- -
<address>
-  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Sobrescrito e subscrito

- -

Ocasionalmente, você precisará usar sobrescrito e subscrito ao marcar itens como datas, fórmulas químicas e equações matemáticas para que eles tenham o significado correto. Os elementos {{htmlelement("sup")}} e {{htmlelement("sub")}} manipulam esse trabalho. Por exemplo:

- -
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
- -

A saída desse código é assim:

- -

Meu aniversário é no dia 25 de maio de 2001.

- -

A fórmula química da cafeína é C8H10N4O2.

- -

Se x2 é 9, x deve ser igual a 3 ou -3.

- -

Representando código de computador

- -

Existem vários elementos disponíveis para marcar código de computador usando HTML:

- - - -

Vejamos alguns exemplos. Você deve tentar brincar com eles (tente pegar uma cópia do nosso arquivo de exemplo other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, stop poking me!');
-}</code></pre>
-
-<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
-
-<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
-
-
-<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

O código acima terá a seguinte aparência:

- -

{{ EmbedLiveSample('Representing_computer_code','100%',300) }}

- -

Marcando horários e datas

- -

O HTML também fornece o elemento {{htmlelement("time")}} para marcar horários e datas em um formato legível por máquina. Por exemplo:

- -
<time datetime="2016-01-20">20 January 2016</time>
- -

Por que isso é útil? Bem, existem muitas maneiras diferentes pelas quais os humanos escrevem datas. A data acima pode ser escrita como:

- - - -

Mas essas formas diferentes não podem ser facilmente reconhecidas pelos computadores — e se você quiser pegar automaticamente as datas de todos os eventos em uma página e inseri-las em um calendário? O elemento {{htmlelement("time")}} permite anexar uma data/hora inequívoca e legível por máquina para esse fim.

- -

O exemplo básico acima fornece apenas uma data legível por máquina simples, mas existem muitas outras opções possíveis, por exemplo:

- -
<!-- Data simples padrão -->
-<time datetime="2016-01-20">20 January 2016</time>
-<!-- Apenas ano e mês -->
-<time datetime="2016-01">January 2016</time>
-<!-- Just month and day -->
-<time datetime="01-20">20 January</time>
-<!-- Apenas tempo, horas e minutos -->
-<time datetime="19:30">19:30</time>
-<!-- Você pode fazer segundos e milissegundos também! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Data e hora -->
-<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
-<!-- Data e hora com compensação de fuso horário -->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
-<!-- Chamando um número de semana específico -->
-<time datetime="2016-W04">The fourth week of 2016</time>
- -

Resumo

- -

Isso marca o fim de nosso estudo da semântica de texto HTML. Lembre-se de que o que você viu durante este curso não é uma lista exaustiva de elementos de texto HTML — queríamos tentar cobrir o essencial, e alguns dos mais comuns que você verá na natureza, ou pelo menos podem achar interessantes. Para encontrar muito mais elementos HTML, você pode dar uma olhada no nosso HTML element reference (a seção Inline text semantics seria um ótimo ponto de partida.) No próximo artigo, examinaremos os elementos HTML que você usaria para estruturar as diferentes partes de um documento HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/html/introducao_ao_html/fundamentos_textuais_html/index.html b/files/pt-br/aprender/html/introducao_ao_html/fundamentos_textuais_html/index.html deleted file mode 100644 index 47ca918b68..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/fundamentos_textuais_html/index.html +++ /dev/null @@ -1,955 +0,0 @@ ---- -title: Fundamentos do texto em HTML -slug: Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML -tags: - - Aprender - - Guía - - HTML - - Iniciante - - Introdução - - Texto - - cabeçalho - - parágrafo - - semántica -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como {{glossary("semantics", "semântica")}}), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como {{glossary("HTML")}} pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.

- - - - - - - - - - - - -
Pré-requisitos:Familiaridade básica em HTML, tal como coberto  Iniciando com o HTML.
Objetivo:Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado — incluindo parágrafos, títulos, listas, ênfase e citações.
- -

O básico: Cabeçalhos e Parágrafos

- -

O texto mais estruturado é composto por títulos e parágrafos,esteja você lendo uma história, um jornal, um livro da faculdade, uma revista, etc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.

- -

Em HTML, cada parágrafo deve ser envolvido em um elemento {{htmlelement("p")}} , assim:

- -
<p>Eu sou um parágrafo, oh sim, eu sou.</p>
- -

Cada título deve ser envolvido em um elemento de título:

- -
<h1>Eu sou o título da história.</h1>
- -

Existem seis elementos de título — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} e {{htmlelement("h6")}} . Cada elemento representa um nível diferente de conteúdo no documento; <h1> representa o título principal, <h2> representa subtítulos, <h3> representa sub-subtítulos, e assim por diante.

- -

Implementando hierarquia estrutural

- -

Como exemplo, em uma história, <h1> representaria o título da história, <h2> representaria o título de cada capítulo e <h3> representaria sub-seções de cada capítulo, e assim por diante.

- -
<h1>O furo esmagador</h1>
-
-<p>Por Chris Mills</p>
-
-<h2>Capítulo 1: A noite escura</h2>
-
-<p>Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão ...</p>
-
-<h2>Capítulo 2: O eterno silêncio</h2>
-
-<p>Nosso protagonista não podia ver mais que um relance da figura sombria ...</p>
-
-<h3>O espectro fala</h3>
-
-<p>Várias horas se passaram, quando, de repente, o espectro ficou em pé e exclamou: "Por favor, tenha piedade da minha alma!"</p>
- -

Depende realmente de você, o quê, exatamente, representam os elementos envolvidos, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:

- - - -

Por que precisamos de estrutura?

- -

Para responder a esta pergunta, dê uma olhada em text-start.html — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).

- -

No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:

- - - -

Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.

- -

Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo

- -

Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo Entrada para que ele apareça como um título e dois parágrafos no campo Saída.

- -

Se você cometer um erro, você sempre pode reiniciar usando o botão Resetar. Se você ficar preso, pressione o botão Mostrar solução para ver a resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Por que precisamos de semântica?

- -

A semântica estã em todos os lugares — contamos com experiência anterior para nos dizer qual é a função dos objetos do dia a dia. Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "pare" e um semáforo verde signifique "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).

- -

Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento  {{htmlelement("h1")}} também é um elemento semântico, que dá o texto que envolve a representação (ou significado) de "um título de nível superior em sua página".

- -
<h1>Este é um título de nível superior</h1>
- -

Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).

- -

Por outro lado, você pode fazer com que qualquer elemento se pareça um título de nível superior. Considere o seguinte:

- -
<span style="font-size: 32px; margin: 21px 0;">Este é um título de nível superior?</span>
- -

Este é um elemento {{htmlelement("span")}}. Não tem semântica. Você usa-o para agrupar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você saberá mais sobre isto mais tarde, no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.

- -

Listas

- -

Agora voltemos nossa atenção para as listas. As listas estão em toda parte na vida — de sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção.

- -

Não ordenada

- -

As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa — vamos pegar uma lista de compras como um exemplo.

- -
leite
-ovos
-pão
-homus
- -

Toda lista desordenada começa com um {{htmlelement("ul")}} — isso envolve todos os itens da lista:

- -
<ul>
-leite
-ovos
-pão
-homus
-</ul>
- -

O último passo é envolver cada item da lista em um elemento {{htmlelement("li")}} (elemento da lista):

- -
<ul>
-  <li>leite</li>
-  <li>ovos</li>
-  <li>pão</li>
-  <li>homus</li>
-</ul>
- -

Aprendizagem ativa: Marcando uma lista desordenada

- -

Tente editar a amostra, ao vivo, abaixo para criar sua própria lista não ordenada HTML.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Ordenada

- -

As listas ordenadas são listas em que a ordem dos itens é importante — vamos seguir um conjunto de instruções como exemplo:

- -
Dirija até o final da estrada
-Vire à direita
-Vá em frente nas duas primeiras rotatórias
-Vire à esquerda na terceira rotatória
-A escola fica à sua direita, a 300 metros da estrada
- -

A estrutura de marcação é a mesma das listas não ordenadas, exceto que você deve conter os itens da lista em um elemento {{htmlelement("ol")}}, em vez de <ul>:

- -
<ol>
-  <li>Dirija até o final da estrada</li>
-  <li>Vire à direita</li>
-  <li>Vá em frente nas duas primeiras rotatórias</li>
-  <li>Vire à esquerda na terceira rotatória</li>
-  <li>A escola fica à sua direita, a 300 metros da estrada</li>
-</ol>
- -

Aprendizagem ativa: Marcando uma lista ordenada

- -

Tente editar a amostra ao vivo abaixo, para criar sua própria lista ordenada por HTML.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Aprendizagem ativa: marcando nossa página de receita

- -

Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de text-start.html e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo, localmente, provavelmente será melhor, pois você conseguirá salvar o trabalho que está fazendo. Enquanto que, se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.

- - - -

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Se você ficar preso, você sempre pode pressionar o botão Mostrar solução, ou confira nosso exemplo de text-complete.html em nosso repositório Github.

- -

Aninhando listas

- -

Não há problema em aninhar uma lista dentro de outra. Você pode ter algumas sub-listas abaixo de uma lista de nível superior. Vamos pegar a segunda lista do nosso exemplo de receita:

- -
<ol>
-  <li>Retire a pele do alho e pique</li>
-  <li>Retire todas as sementes e caule da pimenta e pique</li>
-  <li>Adicione todos os ingredientes em um processador de alimentos</li>
-  <li>Processar todos os ingredientes em uma pasta</li>
-  <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>
-  <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
-</ol>
- -

Uma vez que as duas últimas listas estão intimamente relacionadas com a anterior (elas leem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da quarta lista. Isso pareceria assim:

- -

Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual. Isso seria assim:

- -
<ol>
-  <li>Retire a pele do alho e pique</li>
-   <li>Retire todas as sementes e caule da pimenta e pique</li>
-   <li>Adicione todos os ingredientes em um processador de alimentos</li>
-   <li>Processar todos os ingredientes em uma pasta
-     <ul>
-       <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>
-       <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
-    </ul>
-  </li>
-</ol>
- -

Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.

- -

Ênfase e importância

- -

Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e, nesta seção, vamos ver alguns dos mais comuns.

- -

Ênfase

- -

Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.

- -

Estou feliz que você não chegou atrasado.

- -

Estou feliz que você não chegou atrasado.

- -

A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.

- -

Em HTML usamos o elemento de ênfase {{htmlelement("em")}} para marcar tais instâncias. Além de tornar o documento mais interessante de ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e alguns CSS, ou talvez um elemento {{htmlelement("i")}} (veja abaixo).

- -
<p>Eu estou <em>feliz</em> você não está <em>atrasado</em>.</p>
- -

Importância

- -

Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em negrito na linguagem escrita. Por exemplo:

- -

Este líquido é altamente tóxico.

- -

Eu estou contando com você. Não se atrase!

- -

Em HTML usamos o elemento {{htmlelement("strong")}} (importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo negrito. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e algum CSS, ou talvez um {{htmlelement("b")}} (veja abaixo).

- -
<p>Este líquido é <strong>altamente tóxico</strong>.</p>
-
-<p>Estou contando com você. <strong>Não</strong> se atrase!</p>
- -

Você pode aninhar importância e ênfase entre si, se desejar:

- -
<p>Este líquido é <strong>altamente tóxico</strong> -
-Se você beber, <strong>você pode <em>morrer</em></strong>.</p>
- -

Aprendizagem ativa: Vamos ser importantes!

- -

Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Itálico, negrito, sublinhado...

- -

Os elementos que discutimos até agora têm clara semântica associada. A situação com {{htmlelement("b")}}, {{htmlelement("i")}}, e com {{htmlelement("u")}} é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era pouco suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como elementos de apresentação e não devem mais ser usados, porque, como já vimos, a semântica é importante para a acessibilidade, SEO, etc.

- -

O HTML5 redefiniu <b>, <i> e <u>  com novas funções semânticas um pouco confusas.

- -

Aqui está a melhor regra geral: provavelmente é apropriado usar  <b>, <i> ou <u>  para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.

- - - -
-

Um aviso amável sobre o sublinhado: as pessoas associam fortemente o sublinhado com hiperlinks. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <u> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.

-
- -
<!-- nomes científicos -->
-<p>
-  O Colibri Ruby-throated (<i>Archilochus colubris</i>)
-  é o colibri mais comum do Leste da América do Norte.
-</p>
-
-<!-- palavras estrangeiras -->
-<p>
-  O menu era um mar de palavras exóticas como <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> e <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- um erro de ortografia conhecido -->
-<p>
-  Algum dia eu vou aprender como <u style="text-decoration-line: underline; text-decoration-style: wavy;">jogar</u> melhor.
-</p>
-
-<!-- Destaque as palavras-chave em um conjunto de instruções -->
-<ol>
-  <li>
-    <b>Fatie</b>dois pedaços de pão do pão.
-  </li>
-  <li>
-    <b>Colocar</b> uma fatia de tomate e uma folha de
-     alface entre as fatias de pão.
-  </li>
-</ol>
- -

Teste suas habilidades!

- -

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir — consulte Teste suas habilidades: noções básicas de texto HTML.

- -

Resumo

- -

Por enquanto é isso! Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área. Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de Formatação avançada de texto, mais adiante neste curso. No próximo artigo, veremos detalhadamente como criar links, possivelmente o elemento mais importante na Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/aprender/html/introducao_ao_html/getting_started/index.html b/files/pt-br/aprender/html/introducao_ao_html/getting_started/index.html deleted file mode 100644 index ed79c15034..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/getting_started/index.html +++ /dev/null @@ -1,755 +0,0 @@ ---- -title: Iniciando com HTML -slug: Aprender/HTML/Introducao_ao_HTML/Getting_started -tags: - - Codificação de Scripts - - Comentário - - Elemento - - Guía - - HTML - - Iniciante - - atributo - - espaço em branco - - referência de entidade -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!

- - - - - - - - - - - - -
Pré-requisitos:Básico de informática, software básico instalado e conhecimento básico de como trabalhar com arquivos.
Objetivos:Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.
- -

O que é HTML?

- -

{{glossary("HTML")}} (HyperText Markup Language) não é uma linguagem de programação, é uma linguagem de marcação utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de {{glossary("Element", "elementos")}} que você usa para anexar, envolver ou marcar diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das {{glossary("Tag", "tags")}} pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:

- -
Meu gato é muito mal-humorado.
- -

 Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo({{htmlelement("p")}}):

- -
<p>Meu gato é muito mal-humorado.</p>
- -

Anatomia de um elemento HTML

- -

Vamos explorar nosso elemento parágrafo um pouco mais:

- -

- -

As partes principais do elemento são:

- -
    -
  1. Tag de abertura: Consiste no nome do elemento ( neste caso: p ), envolvido entre parênteses angulares de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.
    2. -
  2.  Tag de fechamento:  É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.
    3. -
  3. O conteúdo:  Este é o conteúdo do elemento, que neste caso é somente texto.
    4. -
  4. O elemento: A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.
    5. -
- -

Aprendizado ativo: criando seu primeiro elemento HTML

- -

Edite a linha abaixo na área Entrada colocando-a entre as tags <em> e </em> (adicione o <em> antes para abrir o elemento, e </em> depois, para fechar o elemento). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área Saída.

- -

Caso você cometa um erro, você pode usar o botão Resetar para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão Mostrar solução para visualizar a resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Aninhando elementos

- -

Elementos podem ser inseridos dentro de outros elementos — isto é chamado de  aninhamento. Se nós quisermos dizer que nosso gato é muito mal-humorado, nós poderemos envolver a palavra "muito" com o elemento {{htmlelement("strong")}},  que significa enfatizar fortemente a palavra:

- -
<p>Meu gato é <strong>muito</strong> mal-humorado.</p>
- -

No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento p primeiro, e então o elemento strong, portanto temos que fechar o elemento strong primeiro, depois o p. O código a seguir está errado:

- -
<p>Meu gato é <strong>muito mal-humorado.</p></strong>
- -

Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!

- -

Elementos em bloco versus elementos inline

- -

Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.

- - - -

Veja o seguinte exemplo:

- -
<em>primeiro</em><em>segundo</em><em>terceiro</em>
-
-<p>quarto</p><p>quinto</p><p>sexto</p>
-
- -

O elemento {{htmlelement("em")}} é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O {{htmlelement("p")}}, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à estilização CSS padrão que o browser aplica aos parágrafos).

- -

{{ EmbedLiveSample('Elementos_em_bloco_versus_elementos_inline', 700, 200, "", "") }}

- -
-

Nota: o HTML5 redefiniu as categorias de elemento em HTML5: veja Categorias de conteúdo de elementos. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.

-
- -
-

Nota: Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os tipos de caixas CSS com os mesmos nomes. Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi evitar essa confusão bastante comum.  

-
- -
-

Nota: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja elementos em bloco e elementos inline.

-
- -

Elementos vazios

- -

Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento {{htmlelement("img")}} insere uma imagem em uma página na posição em que ele é incluído:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Isto exibirá em sua página:

- -

{{ EmbedLiveSample('Elementos_vazios', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: Elementos vazios são também chamados de void elements.

-
- -

Atributos

- -

Elementos também podem conter atributos, que se apresentam da seguinte forma:

- -

&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>

- -

Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo class permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.

- -

Um atributo deve conter:

- -
    -
  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
    2. -
  2. O nome do atributo, seguido por um sinal de igual.
    3. -
  3. Um valor de atributo, com aspas de abertura e fechamento em volta dele.
    4. -
- -

Aprendizado ativo: Adicionando atributos a um elemento

- -

Outro exemplo de um elemento é {{htmlelement("a")}} — isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link. Isso pode ter vários atributos, mas o mais comuns são os seguintes:

- - - -

Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.

- -
    -
  1. Primeiro, adicione o elemento <a>.
    2. -
  2. Segundo, adicione o atributo href e o atributo title.
    3. -
  3. Por último, especifique o atributo target para abrir o link em uma nova aba.
    4. -
- -

Você poderá ver as atualizações das alterações ao vivo na área Saída. Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo title e, quando clicado, navega para o endereço da web no atributo href. Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.

- -

Caso você cometa um erro, você poderá desfazê-lo usando o botão Resetar. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Atributos  boleanos

- -

Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.

- -
<input type="text" disabled="disabled">
- -

De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):

- -
<!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada -->
-<input type="text" disabled>
-
-<!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled -->
-<input type="text">
-
- -

Ambos resultarão em uma Saída da seguinte forma:

- -

{{ EmbedLiveSample('Atributos_boleanos', 700, 100) }}

- -

Omitindo as aspas dos valores do atributo

- -

Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo href, da seguinte forma:

- -
<a href=https://www.mozilla.org/>site favorito</a>
- -

No entanto, assim que adicionamos o atributo title neste elemento, a marcação resultará em erro:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>site favorito</a>
- -

Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo title trata-se, na verdade, de três atributos: o atributo title com o valor "The", e dois atributos boleanos, Mozilla e homepage. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!

- -

{{ EmbedLiveSample('Omitindo_as_aspas_dos_valores_do_atributo', 700, 100) }}

- -

Nossa recomendação é sempre incluir as aspas nos valores dos atributos — isto evita inúmeros problemas, além de resultar em um código mais legível.

- -

Aspas simples ou duplas?

- -

Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:

- -
<a href="http://www.example.com">Um link para o exemplo.</a>
-
-<a href='http://www.example.com'>Um link para o exemplo.</a>
- -

Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!

- -
<a href="http://www.exemplo.com'>Um link para o exemplo.</a>
- -

Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: 

- -
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
- -

No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. Por exemplo, isso irá quebrar:

- -
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
- -

Então você precisa fazer isso:

- -
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
- -

Anatomia de um documento HTML

- -

Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

Neste código nós temos:

- -
    -
  1. <!DOCTYPE html>: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente. <! DOCTYPE html> é a menor cadeia de caracteres que conta como um doctype válido; é tudo o que você realmente precisa saber.
    2. -
  2. <html></html>: O elemento <html> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.
    3. -
  3. <head></head>: O elemento <head> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca,  o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.
    4. -
  4. <meta charset="utf-8">: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.
    5. -
  5. <title></title>: O elemento <title>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.
    6. -
  6. <body></body>: O elemento <body> contém todo o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.
    7. -
- -

Aprendizado ativo: Adicionando alguns recursos ao documento HTML

- -

Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:

- -
    -
  1. Copiar o exemplo de página HTML mostrada acima.
    2. -
  2. Criar um novo documento em seu editor de texto.
    3. -
  3. Colar o código no novo arquivo de texto.
    4. -
  4. Salvar o arquivo com o nome index.html.
    5. -
- -
-

Nota: Você também pode encontrar o template básico de HTML no MDN Learning Area Github repo.

-
- -

Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:

- -

A simple HTML page that says This is my pageNeste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <body> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:

- - - -

Caso você cometa um erro, você poderá desfazê-lo usando o botão Resetar. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Espaços em branco no HTML

- -

Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:

- -
<p>Dogs are silly.</p>
-
-<p>Dogs        are
-         silly.</p>
- -

Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.

- -

Referências de entidades: incluindo caracteres especiais no HTML

- -

No HTML, os caracteres <, >,",' e o & são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.

- -

Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&) e finalizada por um ponto e vírgula (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractere literalReferência de caractere equivalente
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:

- -
<p>Em HTML, você define um parágrafo usando o elemento <p>.</p>
-
-<p>Em HTML, você define um parágrafo usando o elemento &lt;p&gt;.</p>
- -

Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de <p> está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.

- -

{{EmbedLiveSample('Referências_de_entidades_incluindo_caracteres_especiais_no_HTML', 7700, 200, "", "", "hide-codepen-jsfiddle")}}

- -
-

Nota: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: List of XML and HTML character entity references. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.

-
- -

Comentários no HTML

- -

Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez — ou se você entregar seu código para outra pessoa trabalhar.

- -

Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais <!-- e -->, por exemplo:

- -
<p>Eu não estou dentro de um comentário</p>
-
-<!-- <p>Eu estou!</p> -->
- -

Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.

- -

{{ EmbedLiveSample('Comentários_no_HTML', 700, 100) }}

- -

Sumário

- -

Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!

- -
-

Nota: Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou CSS. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.

-
- -

Veja também

- - - -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Neste módulo

- - diff --git a/files/pt-br/aprender/html/introducao_ao_html/index.html b/files/pt-br/aprender/html/introducao_ao_html/index.html deleted file mode 100644 index f0e69d61d4..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Introdução ao HTML -slug: Aprender/HTML/Introducao_ao_HTML -tags: - - Codificação de Script - - Estrutura - - HTML - - Introdução ao HTML - - Links - - Página de destino - - Texto - - cabeçalho - - semántica -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

Em sua essência, {{glossary("HTML")}} é uma linguagem bastante simples composta de elementos, que podem ser aplicados a pedaços de texto para dar-lhes significado diferente em um documento (é um parágrafo? é uma lista de seleção? é parte de uma tabela?), estrutura um documento em seções lógicas (Possui um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorpora conteúdo como imagens e vídeos em uma página. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML.

- -

Pré-requisitos

- -

Antes de iniciar este módulo, você não precisa de nenhum conhecimento prévio sobre HTML, mas deve ter pelo menos uma familiaridade básica em utilizar computadores e utilizar a web passivamente (por exemplo, apenas navegando e consumindo conteúdo). Você deve ter um ambiente de trabalho básico configurado (como detalhado em Instalando os programas básicos) e entender como criar e gerenciar arquivos (como detalhado em Lidando com arquivos). Ambos são partes do nosso módulo completo para iniciantes indrodução à web.

- -
-

Nota: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não permita a criação de seus próprios arquivos, você pode testar (a maior parte) dos exemplos de códigos em um programa de codificação online como JSBin ou Glitch.

-
- -

Guias

- -

Este módulo contém os seguintes artigos, que te levarão por toda teoria básica do HTML e fornecerão muitas oportunidades para você testar algumas habilidades.

- -
-
Iniciando com o HTML
-
Abrange todo o básico do HTML, para você iniciar - nós definimos elementos, atributos e outros termos importantes, e mostramos onde eles se encaixam na linguagem. Também mostramos como uma página HTML típica e um elemento HTML é estruturado, e explicamos outros recursos básicos importantes da linguagem. Ao longo do caminho, nós brincaremos com algum HTML, para fazer você se interessar!
-
O que está no cabeçalho? Metadados no HTML
-
O {{glossary("Head", "cabeçalho")}} de um documento HTML é a parte que não é mostrada no navegador web quando a página é carregada. Ele contém informações como o {{htmlelement("title")}} da página, links para {{glossary("CSS")}} (se você quiser estilizar seu conteúdo HTML com CSS), links para favicons personalizados e metadados (que são dados sobre o HTML, tais como quem o escreveu e palavras-chaves importantes que descrevem o documento).
-
Fundamentos do texto HTML
-
Uma das principais funções do HTML é dar significado ao texto (também conhecido como {{glossary("Semantics", "semântica")}}), para que o navegador saiba como exibi-lo corretamente. Este artigo analisa como usar HTML para dividir um bloco de texto em uma estrutura de títulos e parágrafos, adicionar ênfase/importância nas palavras, criar listas e muito mais.
-
Criando hiperlinks
-
Os hiperlinks são realmente importantes — eles são o que faz da web o que ela é. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas para links.
-
Formatação de texto avançada
-
Existem muitos outros elementos em HTML para formatar o texto, que não apresentamos no artigo sobre os Fundamentos do texto em HTML. Os elementos aqui são menos conhecidos, mas ainda úteis para se conhecer. Neste artigo, você aprenderá sobre marcação de citações, listas de descrições, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contatos e muito mais.
-
Estrutura dos documentos e do site
-
Além de definir partes individuais de sua página (como "um parágrafo" ou "uma imagem"), o HTML também é usado para definir as áreas do seu site (como "o cabeçalho", "o menu de navegação" ou "a coluna de conteúdo principal"). Este artigo analisa como planejar uma estutura básica de site e como escrever o HTML para representar esta estrutura.
-
Depuração HTML
-
Escrever HTML é tranquilo, mas e se algo der errado, e você não conseguir descobrir onde o erro está no código? Este artigo irá apresentar algumas ferramentas que podem ajudar.
-
- -

Avaliações

- -

As avaliações a seguir testarão sua compreensão dos princípios básicos de HTML abordados nos guias acima.

- -
-
Marcando uma carta
-
Todos aprendemos a escrever uma carta mais cedo ou mais tarde; também é um exemplo útil para testar habilidades de formatação de texto. Nesta avaliação, você receberá uma carta para marcar.
-
Estruturando a página de conteúdo
-
Essa avaliação testa sua capacidade de utilizar HTML para estruturar uma página simples de conteúdo, contendo um cabeçalho, um rodapé, um menu de navegação, o conteúdo principal e uma barra lateral.
-
- -

Veja também

- -
-
Noções básica sobre alfabetização na web 1 (em inglês)
-
Um excelente curso da Fundação Mozilla que explora e testa muitas das habilidades discutidas no Módulo Introdução ao HTML. Os estudantes se familiarizam com a leitura, a redação e a participação na web neste módulo de seis partes. Descubra as bases da web através da produção e da colaboração.
-
- -
-
-
diff --git a/files/pt-br/aprender/html/introducao_ao_html/test_your_skills_colon__html_text_basics/index.html b/files/pt-br/aprender/html/introducao_ao_html/test_your_skills_colon__html_text_basics/index.html deleted file mode 100644 index c6d49c4015..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/test_your_skills_colon__html_text_basics/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'Teste suas habilidades: Noções básicas de texto HTML' -slug: 'Aprender/HTML/Introducao_ao_HTML/Test_your_skills:_HTML_text_basics' -tags: - - HTML - - Iniciante - - Teste suas habilidades - - Texto - - aprendizado -translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' ---- -
{{learnsidebar}}
- -

O objetivo deste teste de habilidades é avaliar se você entendeu nosso artigo Fundamentos do texto em HTML.

- -
-

Nota: Você pode testar suas soluções nos editores interativos abaixo, entretanto pode ser de ajuda fazer download do código e usar uma ferramenta online como CodePen, jsFiddle, ou Glitch para trabalhar nas tarefas.
-
- Se você ficar travado em alguma tarefa, peça-nos ajuda  — veja a seção{{anch("Assessment or further help")}} no final desta página.

-
- -

Texto básico em HTML 1

- -

Nesta tarefa queremos que você faça a marcação do HTML fornecido, utilizando a semântica de título e parágrafo. Tente editar a amostra, ao vivo, para alterar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}

- -
-

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

-
- -

Texto básico em HTML 2

- -

Nesta tarefa queremos que você transforme a primeira lista sem marcação em uma lista não ordenada e a segunda em uma lista ordenada.

- -

Tente editar a amostra, ao vivo, para alterar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}

- -
-

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

-
- -

Texto básico em HTML 3

- -

Nesta tarefa um parágrafo é fornecido e o seu objetivo é usar elementos de ênfase para fazer a marcação apropriada de algumas palavras com forte importância e com ênfase.

- -

Tente editar a amostra, ao vivo, para alterar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}

- -
-

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

-
- -

Avaliação ou ajuda adicional

- -

Você pode praticar os exemplos nos Editores Interativos acima.

- -

Se você gostaria de ter seu trabalho avaliado ou está travado e quer pedir ajuda:

- -
    -
  1. Coloque seu trabalho em um editor online compartilhável como CodePen, jsFiddle ou Glitch. Você pode escrever o código por si só ou usar os arquivos linkados nas seções acima.
    2. -
  2. Escreva um post pedindo por avaliação e/ou ajuda no Fórum de discussão do MDN na categoria Learning. Seu post deve incluir: -
      -
    • Um título descritivo como "Avaliação desejada para o teste de habilidade Texto básico em HTML 1"
      • -
    • Detalhes sobre o que você já tentou e o que você gostaria que fizéssemos, p. ex. se você está travado e precisa de ajuda ou se deseja uma avaliação.
      • -
    • Um link para o exemplo que você deseja ser avaliado ou ajudado em um editor online compartilhável (como mencionado no passo 1 acima). Essa é uma boa prática para se adquirir - é muito difícil ajudar alguém com um problema no código, se você não consegue ver o código.
      • -
    • Um link para a tarefa atual ou página de avaliação, assim poderemos achar a questão na qual você quer ajuda.
      • -
    -
    3. -
diff --git a/files/pt-br/aprender/html/introducao_ao_html/the_head_metadata_in_html/index.html b/files/pt-br/aprender/html/introducao_ao_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 66dd155c09..0000000000 --- a/files/pt-br/aprender/html/introducao_ao_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: O que está no cabeçalho? Metadados em HTML -slug: Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML -tags: - - Guía - - HTML - - Iniciante - - head - - lang - - metadados -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}  
- -

O {{glossary("Head", "head")}} de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Ele contém informações como {{glossary("title")}} , links para {{htmlelement("CSS")}} (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais. Dando-lhe uma boa base para lidar com marcação.

- - - - - - - - - - - - -
Pré-requisitos: - - - - - - -
Familiaridade básica em HTML, tal como Iniciando com HTML.
-
Objetivo:Aprender sobre o cabeçalho HTML, seu propósito, os itens mais importantes que ele pode conter e que efeito isso pode ter no documento HTML.
- -

O que há no cabeçalho HTML?

- -

Vamos rever o simples Documento HTML que abordamos no artigo anterior:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Minha página de teste</title>
-  </head>
-  <body>
-    <p>Essa é minha página</p>
-  </body>
-</html>
- -

O cabeçalho HTML é o conteúdo do elemento {{htmlelement("head")}} — ao contrário do conteúdo do elemento {{htmlelement("body")}} (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter {{glossary("Metadata", "metadados")}}  sobre o documento. No exemplo seguinte, o cabeçalho é bem simples:

- -
<head>
-  <meta charset="utf-8">
-  <title>Minha página de teste</title>
-</head>
- -

Em páginas maiores, o cabeçalho pode ter mais conteúdo. Tente acessar um dos seus sites favoritos e use as ferramentas de desenvolvimento para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.

- -

Adicionando um título

- -

Nós já vimos o elemento {{htmlelement("title")}} em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento {{htmlelement("h1")}}, que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!

- - - -

Aprendizado ativo: observando um exemplo simples

- -
    -
  1. Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nossa página title-example.html. Para fazer isso: - -
      -
    1. Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.
      2. -
    2. Pressione o botão "Raw" na página do GitHub, que faz com que o código bruto apareça (possivelmente em uma nova guia do navegador). Em seguida, escolha o menu Arquivo do navegador> Salvar página como ... e escolha um local adequado para salvar o arquivo.
      3. -
    -
    2. -
  2. Agora abra o arquivo no seu navegador. Você deve ver algo assim: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Agora deve ser completamente óbvio onde o conteúdo <h1> aparece e onde o conteúdo  <title> aparece!

    -
    3. -
  3. Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.
    4. -
- -

O conteúdo do elemento <title> também é usado de outras maneiras. Por exemplo, se você tentar favoritar a página, (Favoritos > Adicionar página aos favoritos ou o ícone da estrela na barra de URL no Fireofx), você verá o conteúdo <title> preenchido como o nome sugerido do favorito.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Os conteúdos <title> também são usados nos resultados de pesquisa, conforme você verá abaixo.

- -

Metadados: o elemento <meta>

- -

Metadados é dado descreve dados, e HTML possui uma maneira "oficial" de adicionar metadados a um documento — o elemento {{htmlelement("meta")}}. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos <meta>  que podem ser incluídos no <head> da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.

- -

Especificando a codificação de caracteres do seu documento

- -

No exemplo que vimos acima, esta linha foi incluída:

- -
<meta charset="utf-8">
- -

Este elemento simplesmente especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar.  utf-8 é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana. Isso significa que sua página web poderá lidar com a exibição de qualquer idioma; portanto, é uma boa idéia configurar isso em todas as páginas web que você cria! Por exemplo, sua página poderia lidar com o Inglês e Japonês muito bem:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se você definir sua codificação de caracteres para  ISO-8859-1, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -
-

Nota: Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do utf-8 em sua página, para evitar problemas em outros navegadores.

-
- -

Aprendizagem ativa: Experimento com a codificação de caracteres

- -

Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em <title> (a página  title-example.html ), tente alterar o valor do meta charset para ISO-8859-1 e adicione o Japonês à sua página . Este é o código que usamos:

- -
<p>Exemplo Japonês:ご飯が熱い</p>
- -

Adicionando um autor e descrição

- -

Muitos elementos <meta> incluem atributos de name e  content:

- - - -

Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="A Área de Aprendizagem do MDN tem como objetivo
-proporcionar iniciantes em Web com tudo o que eles precisam saber
-para começar a desenvolver sites e aplicativos.">
- -

Especificar um autor é útil de muitas maneiras: é útil para poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo que você gostaria de contacta-la. Alguns sistemas de gerenciamento de conteúdo possuem ferramentas para extrair automaticamente as informações do autor da página e disponibilizá-las para seus propósitos.

- -

Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas Search Engine Optimization ou {{glossary("SEO")}}.

- -

Aprendizagem ativa: Uso da descrição nos motores de busca

- -

A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso

- -
    -
  1. Vá para a página inicial da Mozilla Developer Network.
    2. -
  2. Veja a fonte da página (botão direito do mouse/Ctrl + clique na página, escolha Ver código-fonte da página no menu de contexto).
    3. -
  3. Encontre a meta tag de descrição. Isso parecerá assim: - 
    <meta name="description" content="A Mozilla Developer Network (MDN) fornece
-informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos
-Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
    -
    4. -
  4. Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição <meta> e <title> elemento usado no resultado da pesquisa — definitivamente vale a pena ter! -

    A Yahoo search result for "Mozilla Developer Network"

    -
    5. -
- -
-

Nota: No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN — estes são chamados de sitelinks e são configuráveis nas Ferramentas para webmasters do Google — uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.

-
- -
-

Nota: Muitos recursos <meta> simplesmente não são mais usados. Por exemplo, a palavra-chave <meta> elemento (<meta name="keywords" content="preencha, suas, palavras-chave, aqui">) — que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa — são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, influenciando os resultados.

-
- -

Outros tipos de metadados

- -

Ao navegar pela web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer a determinados sites (como sites de redes sociais) informações específicas que eles podem usar.

- -

Por exemplo, Open Graph Data é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="A Mozilla Developer Network (MDN) fornece
-informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web
-e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Adicionando ícones personalizados ao seu site

- -

Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos. O mais usado é o favicon (abreviação de "favorites icon", referindo-se ao seu uso nas listas "favoritos" nos navegadores).

- -

O humilde favicon existe há muitos anos. É o primeiro ícone desse tipo: um ícone 16 pixels quadrados usado em vários lugares. Você pode ver (dependendo do navegador) ícones favoritos exibidos na guia do navegador que contém cada página aberta e ao lado de páginas marcadas no painel de favoritos.

- -

Um favicon pode ser adicionado à sua página:

- -
    -
  1. Salvando-o no mesmo diretório que a página de índice do site, salvo no formato .ico (a maioria dos navegadores suportará favicons em formatos mais comuns como .gif ou .png, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)
    2. -
  2. Adicionando a seguinte linha ao HTML <head> para fazer referência a ele: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Aqui está um exemplo de um favicon em um painel de faforitos:

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Há muitos outros tipos de ícones para considerar nestes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:

- -
<!-- iPad de terceira geração com tela retina de alta resolução: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone com tela retina de alta resolução: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- iPad de primeira e segunda geração: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- favicon básico -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

Os comentários explicam onde cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.

- -

Não se preocupe muito com a implementação de todos esses tipos de ícone agora  — este é um recurso bastante avançado, e você não precisará ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.

- -
-

Nota: Se o seu site usa uma Política de Segurança de Conteúdo (CSP) para aumentar sua segurança, a política se aplica ao favicon. Se você encontrar problemas com o favicon não carregando, verifique se a diretiva img-src do cabeçalho Content-Security-Policy não está impedindo o acesso a ele.

-
- -

Aplicando CSS e JavaScript ao HTML

- -

Todos os sites que você usar nos dias atuais empregarão o {{glossary("CSS")}} para torná-los legais e o {{glossary("JavaScript")}}  para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são comumente aplicados a uma página web usando o elemento {{htmlelement("link")}} e o elemento {{htmlelement("script")}} , respectivamente.

- - - -

Aprendizagem ativa: aplicar CSS e JavaScript a uma página

- -
    -
  1. Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos  meta-example.html, script.js e style.css e salve-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes e extensões de arquivo corretos.
    2. -
  2. Abra o arquivo HTML em seu navegador e seu editor de texto.
    3. -
  3. Ao seguir as informações fornecidas acima, adicione os elementos {{htmlelement("link")}} e  {{htmlelement("script")}} ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.
    4. -
- -

Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Nota: Se você ficar preso neste exercício e não conseguir aplicar o CSS/JS, tente verificar nossa página de exemplo css-and-js.html.

-
- -

Definir o idioma principal do documento

- -

Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o atributo lang à tag HTML de abertura (como visto no meta-example.html e mostrado abaixo).

- -
<html lang="pt-BR">
- -

Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em Francês e Inglês, mas é pronunciado de forma diferente.)

- -

Você também pode definir seções secundárias do seu documento para serem reconhecidas em diferentes idiomas. Por exemplo, podemos configurar nossa seção do idioma Japonês para ser reconhecida como japonesa, assim:

- -
<p>Exemplo japonês: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Esses códigos são definidos pelo padrão ISO 639. Você pode encontrar mais sobre eles em Tags de idioma em HTML e XML.

- -

Resumo

- -

Isso marca o fim de nossa rápida turnê pelo HTML — há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns você encontrará lá, por enquanto! No próximo artigo, veremos o básico do texto HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index 2ebc971f42..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Adicionando vetor gráfico na web -slug: Aprender/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.

-
- - - - - - - - - - - - -
Prerequisites:You should know the basics of HTML and how to insert an image into your document.
Objective:Learn how to embed an SVG (vector) image into a webpage.
- -
-

Note: This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.

-
- -

O que são vetores gráficos?

- -

Na web, você pode trabalhar com dois tipos de imagem — raster images, and vector images:

- - - -

To give you an idea of the difference between the two, let's look at an example. You can find this example live on our Github repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star with a  black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.

- -

The difference becomes apparent when you zoom in the page — the PNG image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color). When it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.

- -

Two star images

- -

Two star images zoomed in, one crisp and the other blurry

- -
-

Note: The images above are actually all PNGs — with the left-hand star in each case representing a raster image, and the right-hand star representing a vector image. Again, go to the vector-versus-raster.html demo for a real example!

-
- -

Moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image individually.

- -

What is SVG?

- -

SVG is an {{glossary("XML")}}-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like {{svgelement("circle")}} and {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

- -

As a simple example, the following code creates a circle and a rectangle:

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="black" />
-  <circle cx="150" cy="100" r="90" fill="blue" />
-</svg>
- -

This creates the following output:

- -

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

- -

From the example above, you may get the impression that SVG is easy to handcode. Yes, you can handcode simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)

- -

SVG has some additional advantages besides those described so far:

- - - -

So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:

- - - -

Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.

- -
-

Note: In Inkscape, save your files as Plain SVG to save space. Also, please refer to this article describing how to prepare SVGs for the Web.

-
- -

Adding SVG to your pages

- -

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

- -

The quick way: {{htmlelement("img")}}

- -

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

- -
<img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87"
-    width="100" />
- -

Pros

- - - -

Cons

- - - -

Troubleshooting and cross-browser support

- -

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

- -
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- -

You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

- -
background: url("fallback.png") no-repeat center;
-background-image: url("image.svg");
-background-size: contain;
- -

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

- -

If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this article will point you in the right direction.

- -

How to include SVG code inside your HTML

- -

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

Pros

- - - -

Cons

- - - - - -

How to embed an SVG with an {{htmlelement("iframe")}}

- -

You can open SVG images in your browser just like webpages. So embedding an SVG document with an <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

- -

Here's a quick review:

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Triangle with three unequal sides" />
-</iframe>
- -

This is definitely not the best method to choose:

- -

Cons

- - - -

Active Learning: Playing with SVG

- -

In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the Input section below you'll see that we've already provided you with some samples to get you started. You can also go to the SVG Element Reference, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.

- -

If you get stuck and can't get your code working, you can always reset it using the Reset button.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Summary

- -

This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.

- -

In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/images_in_html/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index 4f463148c1..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Imagens no HTML -slug: Aprender/HTML/Multimedia_and_embedding/Images_in_HTML -tags: - - Guía - - HTML - - Imagens - - alt text - - captions - - figcaption - - figure - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
- -

No início a Web era somente texto, e era tedioso. Felizmente, não demorou muito para que a capacidade de incorporar imagens (e outros tipos de conteúdo mais interessantes) dentro das páginas da web fosse adicionada. Existem outros tipo de mídia para se considerar, mas é lógico começar com o humilde elemento {{htmlelement("img")}}, usado para inserir uma simples imagem em uma página web. Neste artigo, analisaremos como dominar seu uso, incluindo o básico, anotando-o com legendas usando o elemento {{htmlelement("figure")}}, e detalhando como ele se relaciona com imagens de fundo do CSS.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico em informática, Instalando os Programas Básicos, conhecimento básico em lidando com arquivos, familiaridade com fundamentos do HTML (como abordado em Iniciando com HTML.)
Objetivos:Para aprender a incorporar imagens simples em HTML, anote-as com legendas e como as imagens HTML se relacionam às imagens de plano de fundo CSS.
- -

Como colocamos uma imagem numa página web?

- -

Para colocar uma única imagem em uma página da web, usamos o elemento {{htmlelement("img")}}. Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — src (às vezes pronunciado como seu título completo, source). O atributo src contém um caminho apontando para a imagem que você deseja incorporar na página, que pode ser uma URL relativa ou absoluta, da mesma maneira que o valores de atributo href no elemento {{htmlelement("a")}}.

- -
-

Nota: Antes de continuar, você deveria ler Um guia rápido sobre URLs e caminhos para refrescar sua memória sobre URL relativo e absoluto.

-
- -

Por exemplo, se sua imagem for chamada dinossauro.jpg, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:

- -
<img src="dinossauro.jpg">
- -

Se a imagem estivesse em um subdiretório de images, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/{{glossary("SEO")}}), então você a incorporaria da seguinte maneira:

- -
<img src="images/dinossauro.jpg">
- -

E assim por diante.

- -
-

Note: Os mecanismos de pesquisa também leem os nomes dos arquivos de imagem e os contam para o  SEO. Portanto, dê à sua imagem um nome de arquivo descritivo; dinosaur.jpg é melhor que img835.png.

-
- -

Você pode incorporar a imagem usando seu URL absoluto, por exemplo:

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Mas isso é inútil, pois apenas faz o navegador trabalhar mais, pesquisando o endereço IP do servidor DNS novamente, etc. Você quase sempre manterá as imagens do seu site no mesmo servidor que o HTML.

- -
-

Aviso: A  maioria das imagens tem direitos autorais. Não exiba uma imagem em sua página da web, a menos que:

- -

1) você é o dono da imagem
- 2) você recebeu permissão explícita e por escrito do proprietário da imagem, ou
- 3) você tem ampla prova de que a imagem é, de fato, de domínio público.

- -


- Violações de direitos autorais são ilegais e antiéticas. Além disso, nunca aponte seu atributo src para uma imagem hospedada no site de outra pessoa à qual você não tem permissão para vincular. Isso é chamado de "hotlinking". Mais uma vez, roubar a largura de banda de alguém é ilegal. Ele também torna a página mais lenta, deixando você sem controle sobre se a imagem é removida ou substituída por algo embaraçoso.

-
- -

Nosso código acima nos daria o seguinte resultado:

- -

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

- -
-

Nota: Elementos como {{htmlelement("img")}} e {{htmlelement("video")}} às vezes são chamados de elementos substituídos. Isso ocorre porque o conteúdo e o tamanho do elemento são definidos por um recurso externo (como uma imagem ou arquivo de vídeo), não pelo conteúdo do próprio elemento.

-
- -
-

Nota: Você pode encontrar o exemplo final desta seção running on Github (Veja o source code também.)

-
- -

Texto alternativo

- -

O próximo atributo que veremos é alt. Seu valor deve ser uma descrição textual da imagem, para uso em situações em que a imagem não pode ser vista/exibida ou leva muito tempo para renderizar devido a uma conexão lenta à Internet. Por exemplo, nosso código acima pode ser modificado da seguinte maneira:

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
- -

A maneira mais fácil de testar seu texto alt é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito dinosooooor.jpg, o navegador não exibiria a imagem, mas exibiria o texto alternativo:

- -

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

- -

Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:

- - - -

O que exatamente você deve escrever dentro do seu atributo alt? Depende do por que a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:

- - - -

Essencialmente, a chave é oferecer uma experiência utilizável, mesmo quando as imagens não podem ser vistas. Isso garante que todos os usuários não estejam perdendo nenhum conteúdo. Tente desativar as imagens no seu navegador e veja como as coisas ficam. Você logo perceberá como o texto alternativo é útil se a imagem não puder ser vista.

- -
-

Nota: Para mais informações, consulte o nosso guia para Textos alternativos.

-
- -

Largura e altura

- -

Você pode usar os atributos width e height, para especificar a largura e altura da sua imagem. Você pode encontrar a largura e a altura da sua imagem de várias maneiras. Por exemplo, no Mac, você pode usar Cmd + I  para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:

- -
<img src="images/dinosaur.jpg"
-     alt="A cabeça e o tronco de um esqueleto de dinossauro;
-          tem uma cabeça grande com dentes longos e afiados"
-     width="400"
-     height="341">
- -

Isso não resulta em muita diferença para a tela, em circunstâncias normais. Mas se a imagem não estiver sendo exibida, por exemplo, o usuário acabou de navegar para a página e a imagem ainda não foi carregada, você notará que o navegador está deixando um espaço para a imagem aparecer:

- -

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

- -

É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.

- -

No entanto, você não deve alterar o tamanho das suas imagens usando atributos HTML. Se você definir o tamanho da imagem muito grande, terá imagens granuladas, confusas ou muito pequenas e desperdiçando largura de banda ao fazer o download de uma imagem que não atenda às necessidades do usuário. A imagem também pode ficar distorcida, se você não mantiver a proporção de tela. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.

- -
-

Nota: Se você precisar alterar o tamanho de uma imagem, use CSS então.

-
- -

Títulos de imagem

- -

Como nos links, você também pode adicionar o atributo title nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:

- -
<img src="images/dinosaur.jpg"
-     alt="A cabeça e o tronco de um esqueleto de dinossauro;
-          tem uma cabeça grande com dentes longos e afiados"
-     width="400"
-     height="341"
-     title="Um T-Rex em exibição no Museu da Universidade de Manchester">
- -

Isso nos dá uma dica de ferramenta, assim como os títulos dos links:

- -

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

- -

Os títulos das imagens não são essenciais para incluir. Geralmente, é melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexá-las à imagem. No entanto, eles são úteis em algumas circunstâncias; por exemplo, em uma galeria de imagens quando você não tem espaço para legendas.

- -

Aprendizado ativo: incorporando uma imagem

- -

Agora é sua vez de jogar! Esta seção de aprendizado ativo o ajudará a executar com um simples exercício de incorporação. Você é fornecido com um básico {{htmlelement("img")}} tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.

- -

Também gostaríamos que você:

- - - -

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Anotar imagens com figuras e legendas de figuras

- -

Por falar em legendas, existem várias maneiras de adicionar uma legenda para acompanhar sua imagem. Por exemplo, não haveria nada para impedi-lo de fazer isso:

- -
<div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <p>A T-Rex on display in the Manchester University Museum.</p>
-</div>
- -

Está tudo bem. Isso contém o conteúdo que você precisa e é bem estiloso usando CSS. Mas há um problema aqui: não há nada que vincule semanticamente a imagem à sua legenda, o que pode causar problemas para os leitores de tela. Por exemplo, quando você tem 50 imagens e legendas, qual legenda combina com qual imagem?

- -

Uma solução melhor, é usar os elementos do HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}}. Eles são criados exatamente para esse propósito: fornecer um contêiner semântico para figuras e vincular claramente a figura à legenda. Nosso exemplo acima, pode ser reescrito assim:

- -
<figure>
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
-</figure>
- -

O elemento {{htmlelement("figcaption")}} informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento {{htmlelement("figure")}}.

- -
-

Nota: Do ponto de vista da acessibilidade, legendas e {{htmlattrxref('alt','img')}} texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto {{htmlattrxref('alt','img')}} texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e alt texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica.

-
- -

Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:

- - - -

Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.

- -

Aprendizado ativo: criando uma figura

- -

Nesta seção de aprendizado ativo, gostaríamos que você pegasse o código finalizado da seção de aprendizado ativo anterior e o transformasse em uma figura:

- - - -

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

Imagens de fundo CSS

- -

Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade {{cssxref("background-image")}} do CSS, e o outras propriedades background-*, são usados ​​para controlar o posicionamento da imagem de fundo. Por exemplo, para colocar uma imagem de plano de fundo em cada parágrafo de uma página, você pode fazer o seguinte:

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

A imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML. Então, por que se preocupar com imagens HTML? Como sugerido acima, as imagens de plano de fundo CSS são apenas para decoração. Se você quiser adicionar algo bonito à sua página para melhorar o visual, tudo bem. No entanto, essas imagens não têm significado semântico. Eles não podem ter nenhum equivalente de texto, são invisíveis para os leitores de tela, etc. É hora das imagens HTML brilharem!

- -

Resumindo: se uma imagem tiver significado, em termos de seu conteúdo, você deverá usar uma imagem HTML. Se uma imagem é puramente decorativa, você deve usar imagens de plano de fundo CSS.

- -
-

Nota: Você aprenderá muito mais sobre CSS background images no nosso tópico de CSS.

-
- -

É tudo por agora. Cobrimos imagens e legendas em detalhes. No próximo artigo, avançaremos, analisando como usar HTML para incorporar vídeo e áudio em páginas da web.

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/index.html deleted file mode 100644 index d644018330..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Multimídia e Incorporação -slug: Aprender/HTML/Multimedia_and_embedding -tags: - - Acesso - - Aprender - - Audio - - Avaliação - - Flash - - Gráficos Vetoriais - - Guia(2) - - HTML - - Imagens - - Iniciante - - SVG - - Vídeo(2) - - iframes -translation_of: Learn/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.

- -

Pré-requisitos

- -

Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em introdução a HTML. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!

- -
-

Nota: Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como JSBin ou Thimble.

-
- -

Guias

- -

Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.

- -
-
Imagens em HTML
-
Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento {{htmlelement("img")}} , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando {{htmlelement("figure")}}  e como se relaciona com imagens de fundo em CSS.
-
Conteúdo em áudio e video
-
Agora nós iremos aprender como usar os elementos HTML5 {{htmlelement("video")}}  e  {{htmlelement("audio")}} , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.
-
De <object> para <iframe> — outras tecnologias incorporadas
-
A essa altura, nós gostariamos de avançar alguns passos sobre um conjunto de elementos que permitem você incorporar uma ampla variedade de tipos de conteúdo na suas páginas web: os elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. <iframe>s servem para incorporar outras páginas web, enquanto as outras duas permitem você incorporar PDFs, SVG, e até mesmo Flash — uma tecnologia cada vez menos presente, mas que ainda é possível você encontrar de forma quase regular.
-
Adicionando gráficos vetoriais à Web
-
Gráficos vetoriais podem ser muito úteis em determinadas situações. Diferente dos formatos comuns, como PNG/JPG, eles não sofrem distorção/pixelização quando o zoom é ampliado — podendo continuar com a mesma qualidade quando alterado em escala. Esse artigo irá introduzir a você o que são os gráficos vetoriais e como incluir o formato {{glossary("SVG")}} nas páginas web.
-
Imagens responsivas
-
Com a atual variedade de tipos de dispositivos capazes de navegar na web - de celulares móveis à computadores pessoais - um conceito essencial para dominar o mundo web moderno é o design responsivo. Este se refere à criação de páginas web que podem automaticamente mudar seus atributos para se adaptar a diferentes resoluções e tamanhos de tela. Isso será explorado em mais detalhes em um módulo CSS posterior, mas, por enquanto, iremos verificar as ferramentas HTML disponíveis para criar imagens responsivas, incluindo o elemento {{htmlelement("picture")}}.
-
- -

Testes de Conhecimentos

- -

Os testes de conhecimentos a seguir vão avaliar seu aprendizado nos assuntos abaixo:

- -
-
Página Inicial do Mozilla
-
Neste teste nós vamos avaliar seus conhecimentos quanto a algumas técnicas discutidas nos artigos desse módulo, devendo você adicionar imagens e videos numa divertida página inicial sobre o Mozilla!
-
- -

Veja também

- -
-
Adicionando um hitmap no topo de uma imagem
-
Image maps consiste em um mecanismo que torna diferentes partes de uma imagem em uma forma de acesso para outros lugares ou coisas (pense em um mapa mundi que apresenta informações sobre o país em que você clicou em cima). Essa técnica pode ser útil as vezes.
-
Web literacy basics 2
-
-

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open. 

-
-
diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/other_embedding_technologies/index.html deleted file mode 100644 index 80299e4f72..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Do objeto ao iframe - outras tecnologias de incorporação -slug: Aprender/HTML/Multimedia_and_embedding/Other_embedding_technologies -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
- -

Até agora você já deve ter aprendido a incorporar coisas em suas páginas da web, incluindo imagens, vídeo e áudio. Neste ponto, gostaria de ter um pouco de um passo para o lado, olhando para alguns elementos que permitem incorporar uma ampla variedade de tipos de conteúdo em suas páginas: as <iframe>,  <embed>e <object>elementos. <iframe>s são para incorporar outras páginas da Web, e as outras duas permitem incorporar PDFs, SVG e até Flash - uma tecnologia que está saindo, mas que você ainda verá semi-regularmente.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico em informática, software básico instalado , conhecimento básico sobre o trabalho com arquivos , familiaridade com os fundamentos de HTML (conforme abordado em Introdução ao HTML ) e os artigos anteriores deste módulo.
Objetivo: - - - - - - -
Para saber como itens incorporar em páginas da web que usam <object>,  <embed>e <iframe>, como filmes em Flash e outras páginas da web.
-
- -

Uma breve história de incorporação

- -

Há muito tempo, na Web, era popular o uso de quadros para criar sites - pequenas partes de um site armazenadas em páginas HTML individuais. Elas foram incorporadas em um documento mestre chamado conjunto de quadros, que permitiu especificar a área na tela que cada quadro preenchia, como dimensionar as colunas e linhas de uma tabela. Eles foram considerados o auge da frescura entre a metade e o final dos anos 90, e havia evidências de que ter uma página da Web dividida em partes menores como essa era melhor para as velocidades de download - especialmente perceptível pelas conexões de rede que eram tão lentas na época. No entanto, eles tinham muitos problemas, que superavam quaisquer positivos à medida que as velocidades da rede ficavam mais rápidas, para que você não as veja mais sendo usadas.

- -

Um pouco mais tarde (final dos anos 90, início dos anos 2000), as tecnologias de plug-in tornaram-se muito populares, como Java Applets e Flash - isso permitiu que os desenvolvedores da Web incorporassem conteúdo rico em páginas da Web, como vídeos e animações, que não estavam disponíveis apenas no HTML. A incorporação dessas tecnologias foi alcançada através de elementos como <object>, e os menos utilizados <embed>, e eles eram muito úteis na época. Desde então, ficaram fora de moda devido a muitos problemas, incluindo acessibilidade, segurança, tamanho do arquivo e muito mais; hoje em dia, a maioria dos dispositivos móveis não suporta mais esses plug-ins, e o suporte para desktop está saindo.

- -

Finalmente, o elemento <iframe> apareceu (juntamente com outras formas de incorporar conteúdo, como <canvas>, <video> etc.). Isso fornece uma maneira de incorporar um documento da Web inteiro dentro de outro, como se fosse um <img>ou outro elemento, e é usado regularmente hoje .

- -

Com a lição de história fora do caminho, vamos seguir em frente e ver como usar algumas delas.

- -

Aprendizado ativo: usos clássicos de incorporação

- -

Neste artigo, vamos pular direto para uma seção de aprendizado ativo, para fornecer imediatamente uma idéia real de para que servem as tecnologias de incorporação. O mundo on-line está muito familiarizado com o Youtube , mas muitas pessoas não conhecem alguns dos recursos de compartilhamento disponíveis. Vejamos como o YouTube nos permite incorporar um vídeo em qualquer página que gostamos de usar <iframe>.

- -
    -
  1. Primeiro, vá ao Youtube e encontre o vídeo que você gosta.
    2. -
  2. Abaixo do vídeo, você encontrará um botão Compartilhar - selecione para exibir as opções de compartilhamento.
    3. -
  3. Selecione o botão Incorporar e você receberá um <iframe>código - copie isso.
    4. -
  4. Insira-o na caixa de entrada abaixo e veja qual é o resultado na saída .
    5. -
- -

Para pontos de bônus, você também pode tentar incorporar um mapa do Google no exemplo:

- -
    -
  1. Vá para o Google Maps e encontre um mapa que você gosta.
    2. -
  2. Clique no "Menu Hamburger" (três linhas horizontais) no canto superior esquerdo da interface do usuário.
    3. -
  3. Selecione a opção Compartilhar ou incorporar mapa .
    4. -
  4. Selecione a opção Incorporar mapa, que fornecerá algum <iframe>código - copie isso.
    5. -
  5. Insira-o na caixa de entrada abaixo e veja qual é o resultado na saída .
    6. -
- -

Se você cometer um erro, sempre poderá redefini-lo usando o botão Redefinir . Se você realmente ficar atolado, pressione o botão Mostrar solução para ver uma resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Iframes em detalhes

- -

Então, isso foi fácil e divertido, certo? Os elementos <iframe> foram projetados para permitir que você incorpore outros documentos da Web ao documento atual. Isso é ótimo para incorporar conteúdo de terceiros em seu site sobre o qual você pode não ter controle direto e não querer implementar sua própria versão - como vídeo de fornecedores de vídeo on-line, sistemas de comentários como Disqus , mapas on-line fornecedores de mapas, banners publicitários etc. Os exemplos editáveis ​​ao vivo que você está usando neste curso são implementados usando <iframe>s.

- -

Existem algumas sérias preocupações de segurança a serem consideradas com <iframe>s, como discutiremos abaixo, mas isso não significa que você não deve usá-las em seus sites - apenas requer algum conhecimento e pensamento cuidadoso. Vamos explorar o código um pouco mais detalhadamente. Digamos que você queira incluir o glossário MDN em uma de suas páginas da web - você pode tentar algo como isto:

- -
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox>
-  <p>
-    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
-       Fallback link for browsers that don't support iframes
-    </a>
-  </p>
-</iframe>
- -

Este exemplo inclui os fundamentos básicos necessários para usar um <iframe>:

- -
-
allowfullscreen
-
Se definido, ele <iframe>poderá ser colocado no modo de tela cheia usando a API de tela cheia (um pouco além do escopo deste artigo).
-
frameborder
-
Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. 0 remove a borda. Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando em seu CSS .border: none;
-
src
-
Este atributo, como <video>/ <img>, contém um caminho apontando para o URL do documento a ser incorporado.
-
width e height
-
Esses atributos especificam a largura e a altura que você deseja que o iframe seja.
-
Conteúdo alternativo
-
Da mesma forma que outros elementos semelhantes <video>, você pode incluir conteúdo de fallback entre as <iframe></iframe>tags de abertura e fechamento que aparecerão se o navegador não suportar <iframe>. Nesse caso, incluímos um link para a página. É improvável que você encontre qualquer navegador que não suporte <iframe>s atualmente.
-
sandbox
-
Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos <iframe>recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; falaremos mais sobre isso na próxima seção.
-
- -
-

Nota: Para melhorar a velocidade, é uma boa ideia definir o srcatributo do iframe com JavaScript após o carregamento do conteúdo principal. Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante métrica de SEO ).

-
- -

Preocupações com segurança

- -

Acima, mencionamos preocupações de segurança - vamos abordar isso com mais detalhes agora. Não esperamos que você entenda todo esse conteúdo perfeitamente da primeira vez; queremos apenas que você fique ciente dessa preocupação e forneça uma referência para retornar à medida que for mais experiente e começar a considerar o uso de <iframe>s em seus experimentos e trabalhos. Além disso, não há necessidade de ter medo e não usar <iframe>s - você só precisa ter cuidado. Leia...

- -

Fabricantes de navegadores e desenvolvedores da Web descobriram da maneira mais difícil que iframes são um alvo comum (termo oficial: vetor de ataque ) para pessoas más na Web (geralmente chamadas de hackers ou, mais precisamente, crackers ) atacarem se estiverem tentando modificar maliciosamente seu página da web ou induzir as pessoas a fazer algo que não desejam, como revelar informações confidenciais como nomes de usuário e senhas. Por esse motivo, engenheiros de especificações e desenvolvedores de navegadores desenvolveram vários mecanismos de segurança para torná- <iframe>los mais seguros, e também existem práticas recomendadas a serem consideradas - abordaremos alguns deles abaixo.

- -
-

{{interwiki('wikipedia','Clickjacking')}} é um tipo comum de ataque iframe, no qual hackers incorporam um iframe invisível ao documento (ou incorporam o documento ao próprio site malicioso) e o usam para capturar as interações dos usuários. Essa é uma maneira comum de enganar os usuários ou roubar dados confidenciais.

-
- -

Um primeiro exemplo rápido - tente carregar o exemplo anterior que mostramos acima em seu navegador - você pode encontrá-lo ao vivo no Github ( consulte o código-fonte também.) Na verdade, você não verá nada exibido na página e se olhar para o console nas ferramentas de desenvolvedor do navegador , você verá uma mensagem informando o motivo. No Firefox, você será informado sobre o Load negado pelo X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary não permite o enquadramento . Isso ocorre porque os desenvolvedores que criaram o MDN incluíram uma configuração no servidor que serve as páginas do site para impedir que elas sejam incorporadas dentro de <iframe>s (consulte Configurar diretivas CSP, abaixo.) Isso faz sentido - uma página MDN inteira não faz sentido para ser incorporada em outras páginas, a menos que você queira fazer algo como incorporá-las ao seu site e reivindicá-las como suas - ou tentar roubar dados via clickjacking , que são coisas muito ruins para se fazer. Além disso, se todos começassem a fazer isso, toda a largura de banda adicional começaria a custar muito dinheiro à Mozilla.

- -

Incorporar somente quando necessário

- -

Às vezes, faz sentido incorporar conteúdo de terceiros - como vídeos e mapas do youtube -, mas você pode economizar muitas dores de cabeça se incorporar apenas conteúdo de terceiros quando completamente necessário. Uma boa regra geral para a segurança da Web é "Você nunca pode ser muito cauteloso. Se você fez isso, verifique-o de qualquer maneira. Se alguém o fez, assuma que é perigoso até prova em contrário".

- -

Além da segurança, você também deve estar ciente dos problemas de propriedade intelectual. A maioria dos conteúdos tem direitos autorais, offline e online, mesmo o conteúdo que você não pode esperar (por exemplo, a maioria das imagens no Wikimedia Commons ). Nunca exiba conteúdo em sua página da Web, a menos que você seja o proprietário ou os proprietários tenham lhe dado uma permissão inequívoca por escrito. As penalidades por violação de direitos autorais são severas. Novamente, você nunca pode ser muito cauteloso.

- -

Se o conteúdo for licenciado, você deverá obedecer aos termos da licença. Por exemplo, o conteúdo no MDN é licenciado sob CC-BY-SA . Isso significa que você deve creditar-nos adequadamente quando citar nosso conteúdo, mesmo que faça alterações substanciais.

- -

Use HTTPS

- -

{{Glossary("HTTPS")}} é a versão criptografada do {{Glossary("HTTP")}}. Você deve utilizar HTTPS em seus websites sempre que possível:

- -
    -
  1. HTTPS reduz a chance de que conteúdo remoto tenha sido adulterado no caminho.
    2. -
  2. HTTPS previne que conteúdo que tenha incorporado ao site acesse conteúdo em seu documento de origem, e vice versa.
    3. -
- -

Utilizar HTTPS requer um certificado de segurança, que pode ser bem caro (apesar que o Let's Encrypt deixe as coisas mais fáceis) — se você não puder obter um certificado, você deve fornecer seus documentos com HTTP. Contudo, por conta do segundo benefício do HTTPS descrito acima, não importa o custo, você nunca deve incorporar conteúdo de terceiros em HTTP. (No caso do melhor cenário, o navegador de seu usuário irá dá-lo um aviso assustador.) Todas as empresas com boa reputação irão fornecer conteúdo para ser incoporado por meio <iframe> irá fazê-lo disponível através de HTTPS — veja a URLs dentro do <iframe> noatributo src, quando você está incorporando conteúdo do Google Maps ou Youtube, por exemplo.

- -
-

Nota: Páginas do Github permitem que conteúdo seja fornecido via HTTPS por padrão, então é útil para hospedar conteúdo. Se você está utilizando uma hospedagem diferente e não tem certeza do mesmo, pergunte sobre com o seu provedor de hospedagem.

-
- -

Sempre utilize o atributo sandbox

- -

Você deseja que os atacantes tenham a menor quantidade possível de poder para causar danos ao seu website, portanto, você deve dar ao conteúdo incorporado apenas a permissão para fazer o seu trabalho. É claro, isto se aplica ao seu próprio conteúdo, também. Um container para código onde ele possa ser utilizado apropriadamente — ou para testes — mas não pode causar nenhum dano ao resto do código base (tanto acidental quanto maliciosa) é chamado sandbox.

- -

Conteúdo fora de uma sandbox pode fazer muito mais que o esperado (executar JavaScript, submeter forms, criar novas janelas no navegador, etc.) Por padrão, você deve impor todas as restrições disponíveis utilizando o atributosandbox sem parâmetros, como mostrado em nosso exemplo anterior.

- -

Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributosandbox="") — veja em  {{htmlattrxref('sandbox','iframe')}}  as referências de entrada para todas as opções disponíveis. Uma nota importante é que você nunca deve adicionar ambos allow-scripts e allow-same-origin no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente.

- -
-

Nota: Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem  conteúdo malicioso diretamete (fora de um iframe). Se existir qualquer chance que certo conteúdo possa ser malicioso (exemplo, conteúdo gerado por usuários), por favor forneça-o em um {{glossary("domain")}} diferente de seu site principal.

-
- -

Configure directivas CSP

- -

{{Glossary("CSP")}} significa política de segurança de conteúdo e fornece um conjunto de cabeçalhos HTTP (metadados enviados junto com suas páginas da web quando são veiculados de um servidor da web) projetados para melhorar a segurança do seu documento HTML. Quando se trata de proteger <iframe> s, você pode configurar seu servidor para enviar um cabeçalho X-Frame-Options apropriado.

- -

stands for content security policy and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options  header. Isso pode impedir que outros sites incorporem seu conteúdo em suas páginas da Web (o que habilitaria o {{interwiki('wikipedia','clickjacking')}} e vários outros ataques), exatamente o que os desenvolvedores do MDN fizeram, como vimos anteriormente.

- -
-

Nota: Você pode ler a publicação de Frederik Braun X-Frame-Options Security Header para obter mais informações sobre este tópico. Obviamente, está fora do escopo uma explicação completa neste artigo.

-
- -

The <embed> and <object> elements

- -

The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!

- -
-

Note: A plugin, in this context, refers to software that provides access to content the browser cannot read natively.

-
- -

However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.

- -

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} of the embedded content{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} of the embedded content{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
height and width (in CSS pixels) of the box controlled by the plugin{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
names and values, to feed the plugin as parametersad hoc attributes with those names and valuessingle-tag {{htmlelement("param")}} elements, contained within <object>
independent HTML content as fallback for an unavailable resourcenot supported (<noembed> is obsolete)contained within <object>, after <param> elements
- -
-

Note: <object> requires a data attribute, a type attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). typemustmatch keeps the embedded file from running unless the type attribute provides the correct media type. typemustmatch can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).

-
- -

Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this live on Github, and check the source code too):

- -
<embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer">
- -

Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an <object> element with an <embed> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.

- -

Now let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>You don't have a PDF plugin, but you can
-    <a href="mypdf.pdf">download the PDF file.
-    </a>
-  </p>
-</object>
- -

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

- -

The case against plugins

- -

Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.

- - - -
-

Note: Due to its inherent issues and the lack of support for Flash, Adobe announced that they would stop supporting it at the end of 2020.  As of January 2020, most browsers block Flash content by default, and by December 31st of 2020, all browsers will have completly removed all Flash functionality. Any existing Flash content will be inaccessable after that date.

-
- -

So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you should use HTML5 video for your media needs, SVG for vector graphics, and Canvas for complex images and animations. Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.

- -

Test your skills!

- -

You've reached the end of the this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding.

- -

Summary

- -

The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.

- -

There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{SVGElement("svg")}} for embedding vector graphics. We'll look at SVG in the next article of the module.

- -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/responsive_images/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index 961ec6d82e..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Imagens responsivas -slug: Aprender/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Neste artigo nós iremos aprender sobre o conceito de imagens responsivas —imagens que funcionam em dispositivos com diferentes tamanhos de tela, resoluções e outras funcionalidades— e entrar em contato com quais ferramentas o HTML oferece para ajudar a implementá-las. Imagens responsivas são apenas uma parte do web design responsivo, um futuro tópico de CSS para você aprender.

-
- - - - - - - - - - - - -
Pré-requisitos:Você deve ter visto a introdução ao HTML e como adicionar imagens estáticas numa página web.
Objetivo:Aprender como usar funcionalidades como {{htmlattrxref("srcset", "img")}} e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites.
- -

Por que imagens responsivas?

- -

Então qual o problema nós estamos tentando resolver com imagens responsivas? Vamos examinar um cenário típico. Um típico website provavelmente tem uma imagem de cabeçalho, para ter uma boa aparência para os visitantes, e talvez mais algumas imagens no conteúdo abaixo. Você provavelmente quer fazer uma imagem do cabeçalho em toda a largura do cabeçalho, e o as imagens no conteúdo caiba dentro de alguma coluna. Vamos dar uma olhada em um exemplo simples disso:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Isto funciona bem em um dispositivo de tela grande, como um laptop ou desktop (você pode ver o exemplo ao vivo e encontrar o código-fonte no Github.) Nós não vamos discutir muito o CSS, exceto para dizer que:

- - - -

Isto está bom, mas o problema vem quando você começa a ver a página em uma tela estreita - o cabeçalho parece bom, mas está começando a pegar um tamanho grande para um dispositivo móvel; A primeira imagem do conteúdo por outro lado parece terrível - neste tamanho você mal consegue ver as pessoas nela.

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

Seria muito melhor mostrar uma versão cortada da imagem que contenha os detalhes importantes quando a página é vista em uma tela estreita, e talvez algo entre as duas para uma tela de largura média como um tablet - isto é comumente conhecido como o problema de direção artística.

- -

Ainda, não é preciso embutir estas imagens grandes em páginas se será visto em pequenas telas de celulares; isto é chamado de problema de mudança de resolução - uma imagem rasterizada é um número de pixels de largura e um número de pixels de altura; como nós vimos quando olhamos para vetores gráficos, uma imagem rasterizada começa a parecer granulada e horrível se é mostrada maior que seu tamanho original (enquanto que um vetor não). E se isto é mostrado muito menor que seu tamanho original, é um desperdício de largura de banda - usuários mobile especialmente não querem ter que gastar seu pacote de dados baixando uma imagem grande feita para desktop, quando uma imagem pequena poderia ser feita para seu dispositivo. Uma situação ideal seria ter múltiplas resoluções disponíveis e apresentar tamanhos apropriados dependendo dos diferentes dispositivos que acessam a página.

- -

Para tornar as coisas mais complicadas, alguns dispositivos tem uma alta resolução, que demanda imagens maiores do que as que você espera para ficar bom. Isto é essencialmente o mesmo problema, mas em um contexto diferente.

- -

Você pode pensar que imagens vetorizadas resolveria estes problemas, e elas resolvem em certo grau - elas têm um tamanho pequeno e se adaptam bem, e você deveria usá-las sempre que possível. Mas elas não são possíveis para todos os tipos de imagem - enquanto elas são ótimas para gráficos simples, padrões, elementos de interface, etc., começa a ficar complexo criar uma imagem baseada em vetor com o tipo de detalhe que você encontraria em uma foto, por exemplo. Formatos de imagens rasterizadas, como JPEGs, são melhores para este tipo como nós vemos no exemplo acima.

- -

Este tipo de problema não existe quando a web começou a existir, no começo dos anos 1990 - naquele tempo somente desktops e laptops navegavam a Web, então engenheiros de navegadores e programadores nem pensavam em implementar soluções. Tecnologias de imagens responsivas foram implementadas recentemente para resolver os problemas indicados acima, permitindo a você oferecer ao navegador vários arquivos de imagens, todas mostrando a mesma coisa mas contendo diferente número de pixels (mudança de resolução), ou diferentes imagens para diferente espaços de alocação (direção de arte).

- -
-

Note: As novas funcionalidades discutidas neste artigo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer).

-
- -

Como você faz para criar imagens responsivas?

- -

Nesta seção, nós iremos ver os dois problemas ilustrados acima e mostrar como resolvê-los usando fucionalidades de imagens responsivas do HTML. Você deve notar que nós iremos focar no elemento HTML {{htmlelement("img")}} para esta seção, como visto na área de conteúdo do exemplo acima - a imagem no cabeçalho da página é somente para decoração, e assim implementada usando imagens de background CSS. CSS indiscutivelmente tem ferramentas melhores para design responsivo do que HTML, e nós iremos falar sobre estas ferramentas em um módulo futuro de CSS.

- -

Mudança de resolução: Diferentes tamanhos

- -

Então, qual é o problema que nós queremos resolver com mudança de resolução? Nós queremos mostrar identico conteúdo da imagem, somente maior ou menor dependendo do dispositivo - esta é a situação que nós temos com a segunda imagem do conteúdo em nosso exemplo. O padrão do elemento {{htmlelement("img")}} tradicionalmente somente permite apontar o navegador para uma única fonte:

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Nós podemos, entretanto, usar dois novos atributos — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo responsive.html no Github (ver também o código fonte):

- -
<img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Os atributos srcset e sizes parecem complicados, mas não são difíceis de entender se você formata eles como mostrado acima, com uma parte diferente do valor do atributo para cada linha. Cada valor contém uma lista separada por vírgula, e cada parte da lista é dividida em três sub-partes. Vamos percorrer o conteúdo de cada agora:

- -

srcset define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem. Antes de cada vírgula nós escrevemos:

- -
    -
  1. Um nome do arquivo da imagem (elva-fairy-480w.jpg).
    2. -
  2. Um espaço.
    3. -
  3. A largura da imagem em pixels (480w) — note que é usado a unidade w, e não px como você pode esperar. Este é o tamanho real da imagem, que pode ser encontrado no arquivo dela no seu computador (por exemplo no Mac você pode selecionar a imagem no Finder, e pressionar Cmd + I para mostrar as informações na tela).
    4. -
- -

sizes define um conjunto de condições de mídia (ex.: largura da tela) e indica qual tamanho da imagem deveria ser a melhor escolha, quando certas condições de tela são verdadeiras - Estas são as sugestões que nós falamos antes. Neste caso, antes de cada vírgula nós escrevemos:

- -
    -
  1. Uma condição de mídia ((max-width:480px)) — Você vai aprender mais sobre isso no  tema CSS, mas para agora vamos somente dizer que a condição de mídia descreve um possível estado em que a tela pode estar. Neste caso, nós estamos dizendo "quando a largura da tela é 480px ou menos".
    2. -
  2. Um espaço.
    3. -
  3. A largura do slot da imagem vai preencher quando a condição de mídia for verdadeira (440px).
    4. -
- -
-

Note: Para a largura do slot, você pode fornecer um tamanho absoluto (px, em) ou um tamanho relativo (como porcentagem).Você pode ter notado que o último slot de largura não tem condição de mídia - isto é o padrão que será escolhido quando nenhuma condição for verdadeira. O navegador ignora tudo depois da primeira condição satisfeita, então tenha cuidado com a ordem de condições.

-
- -

Então, com estes atributos no lugar, o navegador irá:

- -
    -
  1. Ver a largura do dispositivo.
    2. -
  2. Ver qual condição de mídia na lista sizes é a primeira a ser verdadeira.
    3. -
  3. Ver qual é o slot para aquela condição de mída.
    4. -
  4. Carregar a imagem definida na lista srcset que mais chega perto do tamanho do slot.
    5. -
- -

E é isto! Então neste ponto, se um navegador suportado com uma largurar de 480px carregar a página, a condição (max-width: 480px) será verdadeira, então o slot 440px será escolhido, então o elva-fairy-480w.jpg será carregada, como a largura inerente (480w) é a mais próxima de 440px. A imagem de 800px é 128KB no disco enquanto que a versão de 480px é somente 63KB - economizando 65KB. Agora imagine se fosse uma página que tivesse várias imagens. Usando esta técnica poderia economizar os dados de usuários de celular.

- -

Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo {{htmlattrxref("src", "img")}} como normal.

- -
-

Nota: No {{htmlelement("head")}} do documento você encontrará a linha <meta name="viewport" content="width=device-width">: isto força navegadores de celular adotar a largura real para carregar páginas web (alguns navegadores mobile mentem sobre sua largura da janela, e em vez carregam páginas em uma largura grante e então encolhem a página carregada, o que é de muita ajuda para imagens e design responsivos. Nós iremos ensinar mais sobre isso em um módulo futuro).

-
- -

Ferramentas de desenvolvimento úteis

- -

Há algumas ferramenta de desenvolvimento úteis em navegadores para ajudar a exercitar o necessário para slot de largura, etc, que você precisa usar. Quando eu estava trabalhando neles, eu primeiro carreguei a versão não responsiva do meu exemplo (not-responsive.html), então fui no Modo de Design Responsivo (Ferramentas >Desenvolvimento Web > Modo de Design Responsivo), que permite a você ver o layout da sua página como se ele estivesse visto através de uma variedade de diferentes tamanhos de telas.

- -

Eu configurei a largura da janela para 320px e depois 480px; para cada uma eu fui no DOM Inspector, cliquei no elemento {{htmlelement("img")}} no qual nós estamos interessados, então olhei o tamanho na aba Box Model view no lado direito da tela. Isto deve dar para você a dica da largura de imagem que você precisa.

- -

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

- -

Próximo, você pode checar se o srcset está funcionando configurando a largura da janela para a qual você quiser (coloque para uma largura estreita, por exemplo), abrindo o Network Inspector (Ferramentas > Web Developer > Network), então recarregue a página. Isto deve dar a você uma lista do que foi carregado na página, e aqui você pode checar qual arquivo da imagem foi escolhida para baixar.

- -
-

Nota:  Use o Mozilla Firefox para testar srcset. O Chrome carrega a melhor imagem se estiver em cache no navegador, anulando o propósito do teste na ferramenta de desenvolvimento.

-
- -

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

- -

Mudança de Resolução: Mesmo tamanho, diferente resoluções

- -

Se você está dando suporte a múltiplas resoluções de vídeo, mas todas veem sua imagem no tamanho real na tela, você pode permitir ao navegador escolher uma resolução apropriada para a imagem usando srcset com x indentificadores e sem sizes - uma sintaxe um pouco mais fácil! Você pode encontrar um exemplo de como isto parece em srcset-resolutions.html (ver também o código fonte):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageNeste exemplo, o seguinte CSS é aplicado na imagem, então ela etra uma largura de 320 pixels na tela (também chamado pixels CSS):

- -
img {
-  width: 320px;
-}
- -

Neste caso, sizes não é preciso - o navegador simplesmente encontra qual resolução é a que será mostrada, e fornece a mais apropriada definida no srcset. Então se o dispositivo que acessa a página tem um padrão de baixa resolução, com um pixel do dispositivo representando cada pixel CSS, a imagem elva-fairy-320w.jpg será carregada (o 1x é implícito, então você não precisa incluí-lo). Se o dispositivo tem uma alta resolução de dois pixels do dispositivo para pixel CSS ou mais, a imagem elva-fairy-640w.jpg será carregada. A imagem 640px é 93KB, enquanto a 320px é somente 39KB.

- -

Direção de Arte

- -

Recapitulando, o problema de direção de arte involve querer mudar a imagem mostrada para se adequar a diferentes tamanhos de tela. Por exemplo, se uma foto de um grande panorama com uma pessoa no centro é mostrada em uma página quando visualizada em um navegador de desktop, então é encolhido quando a página é vista em um navegador de celular, ficará ruim pois a pessoa no centro aparecerá bem pequena e difícil de ver. Provavelmente seria melhor mostrar uma imagem menor e em formato retrato (em pé) no celular, que mostrará a pessoa ampliada. O elemento {{htmlelement("picture")}} permite a nós implementar justamente este tipo de solução.

- -

Voltando para o nosso exemplo not-responsive.html, nós temos uma imagem que precisa de uma direção de arte:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Vamos consertar isso, com {{htmlelement("picture")}}! Como <video> e <audio>, O elemento <picture> é um invólocro contendo muitos elementos {{htmlelement("source")}} que fornecem muitas fontes diferentes para o navegador escolher, seguido pelo elemento mais importante {{htmlelement("img")}}. O código em responsive.html ficará assim então:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

Este código nos permite mostrar uma imagem adequada em ambas extensas e estreitas telas, como podemos ver abaixo:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Nota: Você deveria usar o atributo media somente em cenários de direção de arte; quando você usa media, não oferecendo também condições com o atributo sizes.

-
- -

Por que não podemos só fazer isso usando CSS ou JavaScript?

- -

Quando o navegador começa a carregar a página, inicia o download de todas as imagens antes do analisador principal ter começado a carregar e interpretar o JavaScript e o CSS da página. Isto é uma técnica útil, a qual diminui o tempo de carregamento médio em 20%. Entretanto, isto não é útil para imagens responsivas, então é necessário implementar soluções como srcset. Você não pode, por exemplo, carregar o elemento {{htmlelement("img")}}, então detectar a largura da janela com JavaScript e mudar dinamicamente o arquivo da imagem para um menor, caso deseje. Até lá, a imagem original deveria já ter sido carregado, e você iria carregar uma menor, o que é ainda pior em termos de imagens responsivas.

- - - -

Use bastante formatos de imagens modernos

- -

Há vários novos e excitantes formatos de imagens (como WebP e JPEG-2000) que podem manter baixo tamanho de arquivo e alta qualidade ao mesmo tempo. Entretanto, o suporte do navegador é menor.

- -

<picture> permite-nos continuar dando suporte para navegadores antigos. Você pode suprir tipos MIME dentro de atributos type, então o navegador pode rejeitar imediatamente arquivos não suportados:

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
-</picture>
-
- - - -

Aprendizado ativo: Implementando suas próprias imagens responsivas

- -

Para esse exercício, nós estamos esperando que você seja corajoso e vá sozinho.. principalmente. Nós queremos que você implemente sua própria adequada direção de arte em tela estreita/ampla usando <picture>, e um exemplo de mudança de resolução que use srcset.

- -
    -
  1. Escreva um simples HTML contendo seu código (use not-responsive.html como um ponto de partida, se quiser)
    2. -
  2. Encontre uma boa imagem ampla de um panorama com algum detalhe contido em alguma parte. Crie uma versão de tamanho web usando um editor de imagem, então coloque parra mostrar uma pequena parte que amplia o detalhe, e salve em uma segunda imagem (algo como 480px está bom).
    3. -
  3. Use o elemento <picture> para implementar uma mudança de imagem!
    4. -
  4. Crie múltiplos arquivos de imagem de diferentes tamanhos, cada um mostrando a mesma imagem.
    5. -
  5. Use srcset/size para criar um exemplo de mudança de resolução, que sirva para os mesmos tamanhos de imagens em diferentes resoluções, ou diferentes tamanhos de imagens em cada largura de janela.
    6. -
- -
-

Nota:Use a ferramenta de desenvolvimento do navegador para ajudar a ver os tamanhos que você precisa, como mencionado acima.

-
- -

Sumário

- -

Isto é um geral sobre imagens responsivas - nós esperamos que você tenha aproveitado estas novas técnicas. Recapitulando, há dois problemas que nós discutimos aqui:

- - - -

Isto também encerra o módulo Multimedia and embedding! A única coisa para fazer agora é seguir e tentar nosso teste de multimídia, e ver como você está. Se divirta.

- -

Veja também

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Neste Módulo

- - -
diff --git a/files/pt-br/aprender/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/aprender/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 2a894b7fd0..0000000000 --- a/files/pt-br/aprender/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: Conteúdo de vídeo e áudio -slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Artigos - - Audio - - Guías - - HTML - - Video -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Agora que estamos à vontade para adicionar imagens simples a uma página da Web, o próximo passo é começar a adicionar players de vídeo e áudio aos seus documentos HTML! Neste artigo vamos olhar para fazer exatamente isso com os elementos {{htmlelement("video")}} e {{htmlelement("audio")}} ; Então, vamos terminar de olhar como adicionar legendas/subtítulos aos seus vídeos.

- - - - - - - - - - - - -
Pré-requisitos:Alfabetização básica em informática, software básico instalado, conhecimento básico de trabalhar com arquivos, familiaridade com os fundamentos HTML (Como coberto em Introdução ao HTML) e Images in HTML.
Objetivo:Para aprender a incorporar conteúdo de vídeo e áudio em uma página da Web e adicionar legendas/subtítulos ao vídeo.
- -

Audio e video na web

- -

Os desenvolvedores da Web quiseram usar vídeo e áudio na Web por um longo tempo, desde o início dos anos 2000, quando começamos a ter largura de banda rápida o suficiente para suportar qualquer tipo de vídeo ( Os arquivos de vídeo são muito maiores que o texto ou mesmo imagens.). Nos primeiros dias, as tecnologias web nativas, como o HTML, não tinham a capacidade de incorporar vídeo e áudio na Web, de modo que as tecnologias proprietárias (ou baseado em plugin) como o Flash (e depois, Silverlight) tornaram-se populares para lidar com esse conteúdo . Esse tipo de tecnologia funcionou bem, mas teve vários problemas, incluindo não funcionar bem com recursos HTML/CSS, problemas de segurança e problemas de acessibilidade.

- -

Uma solução nativa resolveria muito disso, se bem feita. Felizmente, alguns anos depois, o {{glossary("HTML5")}} especificação tinha tais recursos adicionados, com o {{htmlelement("video")}} e{{htmlelement("audio")}} elementos, e alguns novos brilhantes {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} por controlá-los. Não veremos o JavaScript aqui - apenas os fundamentos básicos que podem ser alcançados com o HTML.

- -

Não ensinaremos como produzir arquivos de áudio e vídeo - isso requer um conjunto de habilidades completamente diferente. Nós fornecemos a você amostras de arquivos de áudio e vídeo e exemplos de códigos para sua própria experimentação, caso você não consiga se apossar.

- -
-

Nota: Antes de começar aqui, você também deve saber que existem algumas {{glossary("OVP","OVPs")}} (fornecedores de vídeo online) como YouTube, Dailymotion, e Vimeo, e provedores de áudio on-line como Soundcloud. Essas empresas oferecem uma maneira conveniente e fácil de hospedar e consumir vídeos, para que você não precise se preocupar com o enorme consumo de largura de banda. Os OVPs geralmente oferecem código pronto para incorporar vídeo / áudio em suas páginas da web. Se você seguir esse caminho, poderá evitar algumas das dificuldades que discutimos neste artigo. Discutiremos esse tipo de serviço um pouco mais no próximo artigo.

-
- -

O elemento <video> 

- -

O elemento {{htmlelement("video")}} permite incorporar um vídeo com muita facilidade. Um exemplo realmente simples é assim:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

Os recursos da nota são:

- -
-
{{htmlattrxref("src","video")}}
-
Da mesma maneira que para o elemento {{htmlelement("img")}}, O atributo src contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira.
-
{{htmlattrxref("controls","video")}}
-
Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem epilepsy.) Você deve usar o atributo controls para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado JavaScript API. No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume.
-
O parágrafo dentro do <video> tags
-
Isso é chamado de conteúdo alternativo - será exibido se o navegador que acessa a página não suportar o elemento <video>, permitindo fornecer um substituto para navegadores mais antigos. Isso pode ser o que você quiser; nesse caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa acessá-lo de alguma forma, independentemente do navegador que estiver usando.
-
- -

O vídeo incorporado será mais ou menos assim:

- -

A simple video player showing a video of a small white rabbit

- -

Você pode tentar o exemplo ao vivo aqui (veja também o código fonte.)

- -

Usando vários formatos de origem para melhorar a compatibilidade

- -

Há um problema no exemplo acima, que você já deve ter notado se você tentou acessar o link do video acima em navegadores mais antigos como Internet Explorer ou até mesmo uma versão antiga do Safari. O vídeo não será reproduzido, porque navegadores diferentes suportam diferentes formatos de vídeo (e áudio). Felizmente, existem coisas que você pode fazer para ajudar a evitar que isso seja um problema.

- -

Conteúdo de um arquivo de mídia

- -

Primeiro, vamos analisar a terminologia rapidamente. Formatos como MP3, MP4 e WebM são chamados de arquivos recipiente (formatos de contêiner). Eles definem uma estrutura na qual cada faixa de áudio e / ou vídeo que compõe a mídia é armazenada, juntamente com os metadados que descrevem a mídia, quais codecs são usados ​​para codificar seus canais e assim por diante.

- -

As faixas de áudio e vídeo também estão em diferentes formatos, por exemplo:

- - - -

Existem alguns casos especiais. Por exemplo, para alguns tipos de áudio, os dados de um codec geralmente são armazenados sem um contêiner ou com um contêiner simplificado. Uma dessas instâncias é o codec FLAC, que é armazenado com mais frequência em arquivos FLAC, que são apenas faixas FLAC brutas.

- -

Outra situação é o sempre popular arquivo MP3. Um "arquivo MP3" é na verdade uma faixa de áudio MPEG-1 Audio Layer III (MP3) armazenada em um contêiner MPEG ou MPEG-2. Isso é especialmente interessante, pois embora a maioria dos navegadores não suporte o uso de mídia MPEG nos elementos {{HTMLElement("video")}} e {{HTMLElement("audio")}}, eles ainda podem suportar MP3 devido à sua popularidade.

- -

Um reprodutor de áudio tenderá a reproduzir uma faixa de áudio diretamente, por exemplo um arquivo MP3 ou Ogg. Estes não precisam de contêineres.

- -
-

Note: Não é tão simples, como você pode ver no nosso tabela de compatibilidade de codec de áudio e vídeo. Além disso, muitos navegadores de plataforma móvel podem reproduzir um formato não suportado, entregando-o ao reprodutor de mídia do sistema subjacente. Mas isso servirá por enquanto.

-
- -

Suporte a arquivos de mídia em navegadores

- -

Os codecs descritos na seção anterior existem para compactar vídeo e áudio em arquivos gerenciáveis, pois o áudio e o vídeo bruto são extremamente grandes. Cada navegador da web suporta uma variedade de {{Glossary("Codec","Codecs")}}, como Vorbis ou H.264, que são usados ​​para converter o áudio e o vídeo compactados em dados binários e vice-versa. Cada codec oferece suas próprias vantagens e desvantagens, e cada contêiner também pode oferecer seus próprios recursos positivos e negativos, afetando suas decisões sobre qual usar.

- -

As coisas se tornam um pouco mais complicadas porque cada navegador não apenas suporta um conjunto diferente de formatos de arquivo de contêiner, como também suporta uma seleção diferente de codecs. Para maximizar a probabilidade de seu site ou aplicativo funcionar no navegador de um usuário, você pode precisar fornecer cada arquivo de mídia usado em vários formatos. Se o seu site e o navegador do usuário não compartilharem um formato de mídia em comum, sua mídia simplesmente não será reproduzida.

- -

Devido à complexidade de garantir que a mídia do aplicativo seja visível em todas as combinações de navegadores, plataformas e dispositivos que você deseja acessar, a escolha da melhor combinação de codecs e contêiner pode ser uma tarefa complicada. Veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} para obter ajuda na seleção do formato de arquivo do contêiner mais adequado às suas necessidades; Da mesma forma, veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} e {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} para obter ajuda na seleção dos primeiros codecs de mídia a serem usados ​​no seu conteúdo e no seu público-alvo.

- -

Um aspecto adicional a ter em mente: os navegadores móveis podem suportar formatos adicionais não compatíveis com seus equivalentes de desktop, assim como podem não suportar os mesmos formatos da versão para desktop. Além disso, os navegadores de desktop e móveis podem ser projetados para descarregar o manuseio da reprodução de mídia (para todas as mídias ou apenas para tipos específicos que não podem ser tratados internamente). Isso significa que o suporte à mídia depende parcialmente do software que o usuário instalou.

- -
-

Note: Você pode estar se perguntando por que essa situação existe. MP3 (para áudio) e MP4 / H.264 (para vídeo) são amplamente suportados e de boa qualidade. No entanto, eles também são patentiados - as patentes americanas cobrem o MP3 até pelo menos 2017 e o H.264 até 2027, o que significa que os navegadores que não possuem a patente precisam pagar grandes quantias para suportar esses formatos. Além disso, muitas pessoas evitam, por princípio, software restrito, a favor de formatos abertos. É por isso que precisamos fornecer vários formatos para diferentes navegadores.

-
- -

Então, como fazemos isso? Dê uma olhada no seguinte exemplo atualizado(tente ao vivo aqui, também):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Aqui nós tiramos o atributo src (source) do {{HTMLElement("video")}} tag, mas incluímos os elementos {{htmlelement("source")}} que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento {{HTMLElement("source")}} e reproduza o primeiro que ele possui o codec para suportar. A inclusão de fontes WebM e MP4 deve ser suficiente para reproduzir seu vídeo na maioria das plataformas e navegadores atualmente.

- -

Cada elemento <source> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.

- -
-

Nota: Consulte o nosso guia sobre tipos e formatos de mídias (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada

-
- -

Outros recursos de <video>

- -

Há vários outros recursos que você pode incluir em um vídeo HTML5. Dê uma olhada no nosso terceiro exemplo, abaixo:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

Isso nos dará uma saída parecida com esta:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Os novos recursos são:

- -
-
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
-
Você pode controlar o tamanho do vídeo com esses atributos ou com {{Glossary("CSS")}}. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como proporção de tela. Se a proporção não for mantida pelos tamanhos definidos, o vídeo aumentará para preencher o espaço horizontalmente, e o espaço não preenchido receberá apenas uma cor sólida de fundo por padrão.
-
{{htmlattrxref("autoplay","video")}}
-
Faz com que o áudio ou o vídeo comece a ser reproduzido imediatamente, enquanto o restante da página está sendo carregado. É aconselhável não usar vídeo (ou áudio) de reprodução automática em seus sites, porque os usuários podem achar isso realmente irritante.
-
{{htmlattrxref("loop","video")}}
-
Faz com que o vídeo (ou áudio) comece a ser reproduzido novamente sempre que terminar. Isso também pode ser irritante, portanto, use apenas se for realmente necessário.
-
{{htmlattrxref("muted","video")}}
-
Faz com que a mídia seja reproduzida com o som desativado por padrão.
-
{{htmlattrxref("poster","video")}}
-
O URL de uma imagem que será exibida antes da reprodução do vídeo. Destina-se a ser usado para uma tela inicial ou tela de publicidade.
-
{{htmlattrxref("preload","video")}}
-
-

Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores:

- -
    -
  • "none" não armazena em buffer o arquivo
    • -
  • "auto" armazena em buffer o arquivo de mídia
    • -
  • "metadata" armazena em buffer apenas os metadados do arquivo
    • -
-
-
- -

Você pode encontrar o exemplo acima disponível para tocar ao vivo no Github (veja também o código fonte.) Observe que não incluímos o atributo autoplay na versão ao vivo - se o vídeo começar a ser reproduzido assim que a página for carregada, você não poderá ver o pôster!

- -

O elemento <audio>

- -

O elemento {{htmlelement("audio")}} funciona exatamente como o elemento {{htmlelement("video")}}, com algumas pequenas diferenças, conforme descrito abaixo. Um exemplo típico pode parecer assim:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

Isso produz algo como o seguinte em um navegador:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note: You can run the audio demo live on Github (also see the audio player source code.)

-
- -

Isso ocupa menos espaço do que um reprodutor de vídeo, pois não há componente visual - você só precisa exibir controles para reproduzir o áudio. Outras diferenças do vídeo HTML5 são as seguintes:

- - - -

Mais do que isso, <audio> suporta todos os mesmos recursos que <video> — revise as seções acima para obter mais informações sobre elas.

- -

Reiniciando a reprodução de mídia

- -

A qualquer momento, você pode redefinir a mídia para o início, incluindo o processo de seleção da melhor fonte de mídia, se mais de uma for especificada usando o elemento  {{HTMLElement("source")}} — chamando o método {{domxref("HTMLMediaElement.load", "load()")}} do elemento:

- -
const mediaElem = document.getElementById("my-media-element");
-mediaElem.load();
- -

Detectando adição e remoção de faixas

- -

Você pode monitorar as listas de faixas em um elemento de mídia para detectar quando as faixas são adicionadas ou removidas da mídia do elemento. Por exemplo, você pode assistir ao evento {{event ("addtrack")}} ser disparado no objeto associado {{domxref ("AudioTrackList")}} (recuperado por meio de {{domxref ("HTMLMediaElement.audioTracks")}} ) para ser informado quando as faixas de áudio forem adicionadas à mídia:

- -
const mediaElem = document.querySelector("video");
-mediaElem.audioTracks.onaddtrack = function(event) {
-  audioTrackAdded(event.track);
-}
- -

Você encontrará mais informações sobre isso na nossa documentação {{domxref ("TrackEvent")}}.

- -

Exibindo trilhas de texto em vídeo

- -

Agora discutiremos um conceito um pouco mais avançado que é realmente útil para se conhecer. Muitas pessoas não podem ou não querem ouvir o conteúdo de áudio / vídeo que encontram na Web, pelo menos em determinados momentos. Por exemplo:

- - - -

Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato WebVTT e o elemento {{htmlelement ("track")}}.

- -
-

Nota: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".

-
- -

O WebVTT é um formato para gravar arquivos de texto contendo várias seqüências de texto, juntamente com metadados, como a que horas do vídeo você deseja que cada sequência de texto seja exibida e até informações limitadas sobre estilo / posicionamento. Essas cadeias de texto são chamadas de pistas e existem vários tipos de pistas que são usadas para propósitos diferentes. As dicas mais comuns são:

- -
-
subtitles
-
Traduções de material estrangeiro, para pessoas que não entendem as palavras ditas no áudio.
-
captions
-
Transcrições sincronizadas de diálogos ou descrições de sons significativos, para permitir que as pessoas que não conseguem ouvir o áudio entendam o que está acontecendo.
-
timed descriptions
-
Texto que deve ser falado pelo media player para descrever elementos visuais importantes para usuários cegos ou deficientes visuais.
-
- -

Um arquivo WebVTT típico terá a seguinte aparência:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa:

- -
    -
  1. Salve-o como um arquivo .vtt em um local adequado.
    2. -
  2. Vincule ao arquivo .vtt com o elemento {{htmlelement ("track")}}. <track> deve ser colocado dentro de <audio> ou <video>, mas depois de todos os elementos <source>. Use o atributo {{htmlattrxref ("kind", "track")}} para especificar se as pistas são subtitles, captions, ou descriptions. Além disso, use {{htmlattrxref ("srclang", "track")}} para informar ao navegador em que idioma você escreveu as legendas.
    3. -
- -

Aqui está um exemplo:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Isso resultará em um vídeo com legendas exibidas, mais ou menos assim:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Para mais detalhes, leia Adicionando legendas e legendas ao vídeo HTML5. Você pode encontrar o exemplo que acompanha este artigo no Github, escrito por Ian Devlin (consulte o código-fonte também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.

- -
-

Nota: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.

-
- -

Aprendizado ativo: incorporando seu próprio áudio e vídeo

- -

Para esse aprendizado ativo, gostaríamos (idealmente) de você sair para o mundo e gravar alguns de seus próprios vídeos e áudio - a maioria dos telefones hoje em dia permite gravar áudio e vídeo com muita facilidade, e desde que você possa transferi-lo para o seu computador, você pode usá-lo. Talvez você precise fazer algumas conversões para obter um WebM e MP4 no caso de vídeo e um MP3 e Ogg no caso de áudio, mas existem programas suficientes disponíveis para permitir isso sem problemas, como o Miro Video Converter e o Audacity. Gostaríamos que você experimentasse!

- -

Se você não conseguir obter nenhum vídeo ou áudio, pode usar nossos exemplos de arquivos de áudio e vídeo para realizar este exercício. Você também pode usar nosso código de exemplo para referência.

- -

Gostaríamos que você:

- -
    -
  1. Salve seus arquivos de áudio e vídeo em um novo diretório no seu computador.
    2. -
  2. Crie um novo arquivo HTML no mesmo diretório, chamado index.html.
    3. -
  3. Adicione elementos <audio> e <video> à página; faça com que eles exibam os controles padrão do navegador.
    4. -
  4. Forneça os dois elementos <source> para que os navegadores encontrem o formato de áudio mais compatível e o carreguem. Isso deve incluir atributos de type.
    5. -
  5. Dê ao elemento <video> um pôster que será exibido antes que o vídeo comece a ser reproduzido. Divirta-se criando seu próprio gráfico de pôster.
    6. -
- -

Para um bônus adicional, você pode tentar pesquisar faixas de texto e descobrir como adicionar legendas ao seu vídeo.

- -

Resumo

- -

E isso é um tudo; esperamos que você tenha se divertido brincando com vídeo e áudio em páginas da web! No próximo artigo, veremos outras maneiras de incorporar conteúdo na Web, usando tecnologias como {{htmlelement ("iframe")}}} e {{htmlelement ("object")}}.

- -

Ver também

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -
-
- - diff --git a/files/pt-br/aprender/html/tables/basics/index.html b/files/pt-br/aprender/html/tables/basics/index.html deleted file mode 100644 index 36dcaebfa7..0000000000 --- a/files/pt-br/aprender/html/tables/basics/index.html +++ /dev/null @@ -1,559 +0,0 @@ ---- -title: HTML table basics -slug: Aprender/HTML/Tables/Basics -translation_of: Learn/HTML/Tables/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}
- -

Este artigo é uma introdução às tabelas HTML, cobrindo o básico, como linhas e células, cabeçalhos, fazendo as células ocuparem várias colunas e linhas e como agrupar todas as células em uma coluna para fins de estilo.

- - - - - - - - - - - - -
Pré-requisitos:Noções básicas de HTML (consulte Introdução ao HTML ).
Objetivo:Para obter familiaridade básica com tabelas HTML.
- -

O que é uma tabela?

- -

Uma tabela é um conjunto estruturado de dados composto de linhas e colunas (dados tabulares). Uma tabela permite consultar de forma rápida e fácil valores que indicam algum tipo de conexão entre diferentes tipos de dados, por exemplo, uma pessoa e sua idade, ou um dia da semana, ou os horários de uma piscina local.

- -

Uma tabela de amostra mostrando nomes e idades de algumas pessoas - Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

Um cronograma de natação mostrando uma tabela de dados de amostra

- -

As tabelas são muito comumente usadas na sociedade humana, e têm sido por muito tempo, como evidenciado por este documento do Censo dos EUA de 1800:

- -

Um documento de pergaminho muito antigo; os dados não são facilmente legíveis, mas mostram claramente uma tabela de dados sendo usada.

- -

Portanto, não é de se admirar que os criadores do HTML tenham fornecido um meio de estruturar e apresentar dados tabulares na web.

- -

Como funciona uma tabela?

- -

Tabelas possuem estrutura. As informações são facilmente interpretadas fazendo associações visuais entre os cabeçalhos de linha e coluna. Veja a tabela abaixo, por exemplo, e encontre um gigante gasoso Júpiter com 62 luas. Você pode encontrar a resposta associando os cabeçalhos de linha e coluna relevantes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Dados sobre os planetas do nosso sistema solar (fatos planetários retirados da Planilha Planetária da Nasa - Métrica .
NomeMassa (10 24 kg)Diâmetro (km)Densidade (kg/m 3 )Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
Terrestial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
Venus4.8712,10452438.92802.0108.24640
Earth5.9712,75655149.824.0149.6151Our world
Mars0.6426,79239333.724.7227.9-652The red planet
Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
Saturn568120,5366879.010.71433.5-14062
Ice giantsUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255Declassified as a planet in 2006, but this remains controversial.
- -

Quando criadas corretamente, até pessoas cegas podem interpretar dados tabulares em uma tabela HTML - uma tabela HTML bem sucedida deve melhorar a experiência tanto de usuários com deficiências visuais quanto daqueles capazes de ver

- -

Estilizando tabelas

- -

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

- -

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

- -

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

- -

When should you NOT use HTML tables?

- -

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

- -

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

- -
    -
  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
    2. -
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
    3. -
  3. Tables are not automatically responsive: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
    4. -
- -

Active learning: Creating your first table

- -

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

- -
    -
  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
    2. -
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
    3. -
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags: - 
    <td>Hi, I'm your first cell.</td>
    -
    4. -
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: - 
    <td>Hi, I'm your first cell.</td>
-<td>I'm your second cell.</td>
-<td>I'm your third cell.</td>
-<td>I'm your fourth cell.</td>
    -
    5. -
- -

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

- -

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

- -
    -
  1. Place the four cells you've already created inside <tr> tags, like so: - - 
    <tr>
-  <td>Hi, I'm your first cell.</td>
-  <td>I'm your second cell.</td>
-  <td>I'm your third cell.</td>
-  <td>I'm your fourth cell.</td>
-</tr>
    -
    2. -
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.
    3. -
- -

This should result in a table that looks something like the following:

- - - - - - - - - - - - - - - - -
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
- -
-

Note: You can also find this on GitHub as simple-table.html (see it live also).

-
- -

Adding headers with <th> elements

- -

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Breed</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Age</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Owner</td>
-    <td>Mother-in-law</td>
-    <td>Me</td>
-    <td>Me</td>
-    <td>Sister-in-law</td>
-  </tr>
-  <tr>
-    <td>Eating Habits</td>
-    <td>Eats everyone's leftovers</td>
-    <td>Nibbles at food</td>
-    <td>Hearty eater</td>
-    <td>Will eat till he explodes</td>
-  </tr>
-</table>
- -

Now the actual rendered table:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
- -

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

- -

Active learning: table headers

- -

Let's have a go at improving this table.

- -
    -
  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
    2. -
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
    3. -
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.
    4. -
- -
-

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

-
- -

Why are headers useful?

- -

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

- -
-

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

-
- -

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

- -

Allowing cells to span multiple rows and columns

- -

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

- -

The initial markup looks like this:

- -
<table>
-  <tr>
-    <th>Animals</th>
-  </tr>
-  <tr>
-    <th>Hippopotamus</th>
-  </tr>
-  <tr>
-    <th>Horse</th>
-    <td>Mare</td>
-  </tr>
-  <tr>
-    <td>Stallion</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Chicken</th>
-    <td>Hen</td>
-  </tr>
-  <tr>
-    <td>Rooster</td>
-  </tr>
-</table>
- -

But the output doesn't give us quite what we want:

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
- -

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

- -

Let's use colspan and rowspan to improve this table.

- -
    -
  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
    2. -
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
    3. -
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
    4. -
  4. Save and open your code in a browser to see the improvement.
    5. -
- -
-

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

-
- - -
- -

Providing common styling to columns

- -

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

- -
-

Note: Styling columns like this is limited to a few properties: border, background, width, and visibility. To set other properties you'll have to either style every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

-
- -

Take the following simple example:

- -
<table>
-  <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Which gives us the following result:

- - - - - - - - - - - - - - - - -
Data 1Data 2
CalcuttaOrange
RobotsJazz
- -

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

- -
<table>
-  <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td>Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column.

- -

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

- -

Active learning: colgroup and col

- -

Now it's time to have a go yourself.

- -

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recreate the table by following the steps below.

- -
    -
  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
    2. -
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
    3. -
  3. The first two columns need to be left unstyled.
    4. -
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
    5. -
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
    6. -
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
    7. -
  7. Adicione uma cor de fundo diferente mais uma borda à sexta coluna, para indicar que este é um dia especial e ela está dando uma nova aula. Os valores do seu styleatributo sãobackground-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Os últimos dois dias são dias livres, então apenas defina-os para nenhuma cor de fundo, mas uma largura definida; o valor do styleatributo éwidth: 42px;
    9. -
- -

Veja como você segue com o exemplo. Se você tiver dúvidas ou quiser verificar seu trabalho, pode encontrar nossa versão no GitHub como schedule-fixed.html ( veja ao vivo também ).

- -

Resumo

- -

Isso envolve o básico das tabelas HTML. No próximo artigo, veremos alguns recursos de mesa um pouco mais avançados e começaremos a pensar como eles são acessíveis para pessoas com deficiência visual.

- -
{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}
- -
-

Neste módulo

- - -
diff --git a/files/pt-br/aprender/html/tables/index.html b/files/pt-br/aprender/html/tables/index.html deleted file mode 100644 index 990e9ad438..0000000000 --- a/files/pt-br/aprender/html/tables/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Tabelas em HTML -slug: Aprender/HTML/Tables -tags: - - tabelas -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Uma tarefa muito comum em HTML é estruturar os dados tabulares, e há vários elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem CSS para estilização, o HTML torna fácil a exibição de tabelas com informação na Web, tais como o seu plano de lições escolares, o horário na sua piscina local, ou estatísticas sobre os seus dinossauros favoritos ou seu time de futebol favorito. Este módulo te guia por tudo que você precisa saber sobre a estruturação de dados tabulares utilizando o HTML.

- -

Pré-requisitos

- -

Antes de iniciar este módulo, você deverá ter domínio dos básicos de HTML — consulte Introdução ao HTML.

- -
-

Nota: se está utilizando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios arquivos, pode testar a maioria dos exemplos de código num programa de codificação on-line, tais como JSBin ou Thimble.

-
- -

Guias

- -

Este módulo contém os seguintes artigos:

- -
-
HTML - o básico sobre tabelas
-
Este artigo apresenta as tabelas HTML, cobrindo o essencial, tal como linhas e células, cabeçalhos, como extender células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilo.
-
HTML - funcionalidades avançadas de tabelas e acessibilidade
-
No segundo artigo deste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML — tais como legendas/resumos e agrupar as suas filas no cabeçalho da tabela (head), seções de corpo (body) e rodapé (footer) — bem como, veremos sobre a acessibilidade das tabelas para os utilizadores deficientes visuais .
-
- -

Exercícios

- -
-
Estruturar dados sobre planetas
-
Na nossa avaliação sobre tabelas em HTML, vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.
-
diff --git a/files/pt-br/aprender/index.html b/files/pt-br/aprender/index.html deleted file mode 100644 index cef65bb9c7..0000000000 --- a/files/pt-br/aprender/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Aprendendo desenvolvimento web -slug: Aprender -tags: - - Aprender - - CSS - - HTML - - Index - - Iniciante - - Intro - - Novato - - Web -translation_of: Learn ---- -

{{LearnSidebar}}

- -

Bem-vindo à área de aprendizado da MDN. Este conjunto de artigos tem como objetivo fornecer aos iniciantes no desenvolvimento web tudo o que eles precisam para começar a codificar sites.

- -

O objetivo desta área da MDN não é levá-lo de "iniciante" a "especialista", mas levá-lo de "iniciante" a "confortável". A partir daí, você poderá começar a fazer o seu próprio caminho, aprendendo com o restante da MDN e outros recursos intermediários a avançados que assumem muito conhecimento prévio.

- -

Se você é um iniciante, o desenvolvimento web pode ser desafiador - nós o ajudaremos e forneceremos detalhes suficientes para que você se sinta à vontade e aprenda os tópicos adequadamente. Você deve se sentir em casa, seja um aluno aprendendo desenvolvimento web (sozinho ou como parte de uma classe), um professor que procura materiais para a aula, um hobby ou alguém que só quer entender mais sobre como as tecnologias web funcionam.

- -

O que há de novo?

- -

O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as Notas de versão da área de aprendizado para mostrar o que mudou - verifique regularmente!

- -

Se você tiver dúvidas sobre os tópicos que gostaria de ver cobertos ou que estão faltando, envie-nos uma mensagem em nosso Fórum de discussão.

- -

Onde começar

- - - -
-

Nota: Nosso glossário fornece definições de terminologia.

-
- -

{{LearnBox({"title":"Entrada aleatória do glossário"})}}

- -

Assuntos abordados

- -

A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.

- -
-
Intordução à Web
-
Fornece uma introdução prática ao desenvolvimento da web para iniciantes.
-
HTML - Estruturando a Web
-
HTML é a linguagem que usamos para estruturar as diferentes partes do nosso conteúdo e definir qual é o seu significado ou propósito. Este tópico ensina HTML em detalhes.
-
CSS - Estilizando a Web
-
CSS é a linguagem que podemos usar para estilizar e esquematizar nosso conteúdo web, além de adicionar comportamentos como animação. Este tópico fornece uma cobertura abrangente de CSS.
-
JavaScript — Script dinamico do lado do cliente
-
JavaScript é a linguagem de script usada para adicionar funcionalidade dinâmica a páginas da web. Este tópico ensina todos os elementos essenciais necessários para se sentir confortável com a escrita e a compreensão do JavaScript.
-
Formulários web - Trabalhando com dados do usuário
-
Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados ​​para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. Nos artigos listados abaixo, abordaremos todos os aspectos essenciais da estruturação, estilo e interação com os formulários web.
-
Acessibilidade - torne a web utilizável por todos
-
Acessibilidade é a prática de disponibilizar o conteúdo web para o maior número possível de pessoas, independentemente da deficiência, dispositivo, localidade ou outros fatores de diferenciação. Este tópico fornece tudo o que você precisa saber.
-
Desempenho da Web - tornando os sites rápidos e responsivos
-
O desempenho da Web é a arte de garantir que os aplicativos façam download rápido e respondam à interação do usuário, independentemente da capacidade, tamanho da tela, rede ou recursos do dispositivo.
-
Ferramentas e testes
-
-

Este tópico aborda as ferramentas que os desenvolvedores usam para facilitar seu trabalho, como ferramentas de teste entre navegadores, linters, formatadores, ferramentas de transformação, sistemas de controle de versão e ferramentas de implantação.

-
-
Programação do site no servidor
-
Mesmo se você estiver se concentrando no desenvolvimento web do lado do cliente, ainda é útil saber como os servidores e os recursos de código do lado do servidor funcionam. Este tópico fornece uma introdução geral sobre como funciona o lado do servidor e tutoriais detalhados que mostram como criar um aplicativo do lado do servidor usando duas frameworks populares - Django (Python) e Express (Node.js).
-
- -

Obtendo nossos exemplos de código

- -

Os exemplos de código que você encontrará na Área de aprendizado estão disponíveis no GitHub. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o download de um ZIP da última ramificação do código mestre.

- -

Se você preferir copiar o repositório de uma maneira mais flexível que permita atualizações automáticas, siga as instruções mais complexas:

- -
    -
  1. Instale o Git na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.
    2. -
  2. Abra o prompt de comando do seu computador (Windows) ou terminal (Linux, macOS).
    3. -
  3. Para copiar o repositório da área de aprendizado para uma pasta chamada learning-area no local atual para o qual o prompt de comando / terminal está apontando, use o seguinte comando: - 
    git clone https://github.com/mdn/learning-area
    -
    4. -
  4. Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o comando cd).
    5. -
- -

Você pode atualizar o repositório learning-area com as alterações feitas na versão principal no GitHub com as seguintes etapas:

- -
    -
  1. No prompt de comando / terminal, entre no diretório learning-area usando cd. Por exemplo, se você estivesse no diretório pai: - - 
    cd learning-area
    -
    2. -
  2. Atualize o repositório usando o seguinte comando: - 
    git pull
    -
    3. -
- -

Contate-nos

- -

Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso Fórum de discussão. Gostaríamos de ouvir sua opinião sobre qualquer coisa que você acha que está errada ou ausente no site, solicitações de novos tópicos de aprendizado, solicitações de ajuda com itens que você não entende ou qualquer outra pergunta ou preocupação.

- -

Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja como você pode ajudar e entre em contato! Temos o prazer em conversar com você, seja você um aluno, professor, desenvolvedor web experiente ou alguém interessado em ajudar a melhorar a experiência de aprendizado.

- -

Veja também

- -
-
Boletim informativo para desenvovedores mozilla
-
Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.
-
Learn JavaScript
-
Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.
-
Web demystified
-
Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por Jérémie Patonnier.
-
Codecademy
-
Um ótimo site interativo para aprender linguagens de programação do zero.
-
BitDegree
-
-

Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.

-
-
Code.org
-
Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.
-
EXLskills
-
Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.
-
freeCodeCamp.org
-
Site interativo com tutoriais e projetos para aprender desenvolvimento web.
-
Web literacy map
-
Uma estrutura para alfabetização na web de nível básico e habilidades do século XXI, que também fornece acesso a atividades de ensino classificadas por categoria.
-
Edabit
-
Milhares de desafios interativos de JavaScript.
-
diff --git a/files/pt-br/aprender/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/aprender/javascript/client-side_web_apis/client-side_storage/index.html deleted file mode 100644 index ce4d3c2a20..0000000000 --- a/files/pt-br/aprender/javascript/client-side_web_apis/client-side_storage/index.html +++ /dev/null @@ -1,778 +0,0 @@ ---- -title: Client-side storage -slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage -translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage ---- -

{{LearnSidebar}}

- -
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Os navegadores modernos oferecem suporte a várias maneiras de os sites armazenarem dados no computador do usuário - com a permissão do usuário - e depois recuperá-los quando necessário. Isso permite que você mantenha dados para armazenamento de longo prazo, salve sites ou documentos para uso offline, retenha configurações específicas do usuário para seu site e muito mais. Este artigo explica os princípios básicos de como eles funcionam.

- - - - - - - - - - - - -
Pré-requisitos:Noções básicas de JavaScript (consulte as primeiras etapas  , blocos de construção , objetos JavaScript ), as noções básicas de APIs do lado do cliente
Objetivo:Para aprender como usar APIs de armazenamento do lado do cliente para armazenar dados de aplicativos
- -

Armazenamento do lado do cliente?

- -

Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre sites estáticos e sites dinâmicos . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do lado do servidor para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.

- -

O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:

- - - -

Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados ​​juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados ​​por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.

- -
-

Nota : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte Limites de armazenamento do navegador e critérios de despejo para obter mais informações..

-
- -

Old school: Cookies

- -

The concept of client-side storage has been around for Nota : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consultea long time. Since the early days of the web, sites have used cookies to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web.

- -

These days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. However, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session IDs and access tokens. For more information on cookies see our Using HTTP cookies article.

- -

New school: Web Storage and IndexedDB

- -

The "easier" features we mentioned above are as follows:

- - - -

You'll learn more about these APIs below.

- -

The future: Cache API

- -

Some modern browsers support the new {{domxref("Cache")}} API. This API is designed for storing HTTP responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. Cache is usually used in combination with the Service Worker API, although it doesn't have to be.

- -

Use of Cache and Service Workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the {{anch("Offline asset storage")}} section below.

- -

Storing simple data — web storage

- -

The Web Storage API is very easy to use — you store simple name/value pairs of data (limited to strings, numbers, etc.) and retrieve these values when needed.

- -

Basic syntax

- -

Let's show you how:

- -
    -
  1. -

    First, go to our web storage blank template on GitHub (open this in a new tab).

    -
    2. -
  2. -

    Open the JavaScript console of your browser's developer tools.

    -
    3. -
  3. -

    All of your web storage data is contained within two object-like structures inside the browser: {{domxref("Window.sessionStorage", "sessionStorage")}} and {{domxref("Window.localStorage", "localStorage")}}. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful.

    - -

    The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):

    - - 
    localStorage.setItem('name','Chris');
    -
    4. -
  4. -

    The {{domxref("Storage.getItem()")}} method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. Now type these lines into your JavaScript console:

    - - 
    let myName = localStorage.getItem('name');
-myName
    - -

    Upon typing in the second line, you should see that the myName variable now contains the value of the name data item.

    -
    5. -
  5. -

    The {{domxref("Storage.removeItem()")}} method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. Type the following lines into your JavaScript console:

    - - 
    localStorage.removeItem('name');
-let myName = localStorage.getItem('name');
-myName
    - -

    The third line should now return null — the name item no longer exists in the web storage.

    -
    6. -
- -

The data persists!

- -

One key feature of web storage is that the data persists between page loads (and even when the browser is shut down, in the case of localStorage). Let's look at this in action.

- -
    -
  1. -

    Open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! This will make it easier to deal with.

    -
    2. -
  2. -

    Type these lines into the browser's JavaScript console:

    - - 
    localStorage.setItem('name','Chris');
-let myName = localStorage.getItem('name');
-myName
    - -

    You should see the name item returned.

    -
    3. -
  3. -

    Now close down the browser and open it up again.

    -
    4. -
  4. -

    Enter the following lines again:

    - - 
    let myName = localStorage.getItem('name');
-myName
    - -

    You should see that the value is still available, even though the browser has been closed and then opened again.

    -
    5. -
- -

Separate storage for each domain

- -

There is a separate data store for each domain (each separate web address loaded in the browser). You will see that if you load two websites (say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website.

- -

This makes sense — you can imagine the security issues that would arise if websites could see each other's data!

- -

A more involved example

- -

Let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. Our example will allow you enter a name, after which the page will update to give you a personalized greeting. This state will also persist across page/browser reloads, because the name is stored in web storage.

- -

You can find the example HTML at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for entering your name.

- -

- -

Let's build up the example, so you can understand how it works.

- -
    -
  1. -

    First, make a local copy of our personal-greeting.html file in a new directory on your computer.

    -
    2. -
  2. -

    Next, note how our HTML references a JavaScript file called index.js (see line 40). We need to create this and write our JavaScript code into it. Create an index.js file in the same directory as your HTML file. 

    -
    3. -
  3. -

    We'll start off by creating references to all the HTML features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. Add the following lines to your JavaScript file:

    - - 
    // create needed constants
-const rememberDiv = document.querySelector('.remember');
-const forgetDiv = document.querySelector('.forget');
-const form = document.querySelector('form');
-const nameInput = document.querySelector('#entername');
-const submitBtn = document.querySelector('#submitname');
-const forgetBtn = document.querySelector('#forgetname');
-
-const h1 = document.querySelector('h1');
-const personalGreeting = document.querySelector('.personal-greeting');
    -
    4. -
  4. -

    Next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. Add this snippet below your previous code:

    - - 
    // Stop the form from submitting when a button is pressed
-form.addEventListener('submit', function(e) {
-  e.preventDefault();
-});
    -
    5. -
  5. -

    Now we need to add an event listener, the handler function of which will run when the "Say hello" button is clicked. The comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using setItem(), then running a function called nameDisplayCheck() that will handle updating the actual website text. Add this to the bottom of your code:

    - - 
    // run function when the 'Say hello' button is clicked
-submitBtn.addEventListener('click', function() {
-  // store the entered name in web storage
-  localStorage.setItem('name', nameInput.value);
-  // run nameDisplayCheck() to sort out displaying the
-  // personalized greetings and updating the form display
-  nameDisplayCheck();
-});
    -
    6. -
  6. -

    At this point we also need an event handler to run a function when the "Forget" button is clicked — this is only displayed after the "Say hello" button has been clicked (the two form states toggle back and forth). In  this function we remove the name item from web storage using removeItem(), then again run nameDisplayCheck() to update the display. Add this to the bottom:

    - - 
    // run function when the 'Forget' button is clicked
-forgetBtn.addEventListener('click', function() {
-  // Remove the stored name from web storage
-  localStorage.removeItem('name');
-  // run nameDisplayCheck() to sort out displaying the
-  // generic greeting again and updating the form display
-  nameDisplayCheck();
-});
    -
    7. -
  7. -

    It is now time to define the nameDisplayCheck() function itself. Here we check whether the name item has been stored in web storage by using localStorage.getItem('name') as a conditional test. If it has been stored, this call will evaluate to true; if not, it will be false. If it is true, we display a personalized greeting, display the "forget" part of the form, and hide the "Say hello" part of the form. If it is false, we display a generic greeting and do the opposite. Again, put the following code at the bottom:

    - - 
    // define the nameDisplayCheck() function
-function nameDisplayCheck() {
-  // check whether the 'name' data item is stored in web Storage
-  if(localStorage.getItem('name')) {
-    // If it is, display personalized greeting
-    let name = localStorage.getItem('name');
-    h1.textContent = 'Welcome, ' + name;
-    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
-    // hide the 'remember' part of the form and show the 'forget' part
-    forgetDiv.style.display = 'block';
-    rememberDiv.style.display = 'none';
-  } else {
-    // if not, display generic greeting
-    h1.textContent = 'Welcome to our website ';
-    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-    // hide the 'forget' part of the form and show the 'remember' part
-    forgetDiv.style.display = 'none';
-    rememberDiv.style.display = 'block';
-  }
-}
    -
    8. -
  8. -

    Last but not least, we need to run the nameDisplayCheck() function every time the page is loaded. If we don't do this, then the personalized greeting will not persist across page reloads. Add the following to the bottom of your code:

    - - 
    document.body.onload = nameDisplayCheck;
    -
    9. -
- -

Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our finished version running live here.

- -
-

Note: There is another, slightly more complex example to explore at Using the Web Storage API.

-
- -
-

Note: In the line <script src="index.js" defer></script> of the source for our finished version, the defer attribute specifies that the contents of the {{htmlelement("script")}} element will not execute until the page has finished loading.

-
- -

Storing complex data — IndexedDB

- -

The IndexedDB API (sometimes abbreviated IDB) is a complete database system available in the browser in which you can store complex related data, the types of which aren't limited to simple values like strings or numbers. You can store videos, images, and pretty much anything else in an IndexedDB instance.

- -

However, this does come at a cost: IndexedDB is much more complex to use than the Web Storage API. In this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started.

- -

Working through a note storage example

- -

Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.

- -

The app looks something like this:

- -

- -

Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.

- -

Getting started

- -
    -
  1. First of all, make local copies of our index.html, style.css, and index-start.js files into a new directory on your local machine.
    2. -
  2. Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.
    3. -
  3. Rename your JavaScript file to index.js. You are now ready to start adding code to it.
    4. -
- -

Database initial set up

- -

Now let's look at what we have to do in the first place, to actually set up a database.

- -
    -
  1. -

    Below the constant declarations, add the following lines:

    - - 
    // Create an instance of a db object for us to store the open database in
-let db;
    - -

    Here we are declaring a variable called db — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.

    -
    2. -
  2. -

    Next, add the following to the bottom of your code:

    - - 
    window.onload = function() {
-
-};
    - -

    We will write all of our subsequent code inside this window.onload event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).

    -
    3. -
  3. -

    Inside the window.onload handler, add the following:

    - - 
    // Open our database; it is created if it doesn't already exist
-// (see onupgradeneeded below)
-let request = window.indexedDB.open('notes_db', 1);
    - -

    This line creates a request to open version 1 of a database called notes_db. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.

    - -

    To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it request so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.

    - -
    -

    Note: The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the onupgradeneeded handler (see below), etc. We won't cover upgrading databases in this simple tutorial.

    -
    -
    4. -
  4. -

    Now add the following event handlers just below your previous addition — again inside the window.onload handler:

    - - 
    // onerror handler signifies that the database didn't open successfully
-request.onerror = function() {
-  console.log('Database failed to open');
-};
-
-// onsuccess handler signifies that the database opened successfully
-request.onsuccess = function() {
-  console.log('Database opened successfully');
-
-  // Store the opened database object in the db variable. This is used a lot below
-  db = request.result;
-
-  // Run the displayData() function to display the notes already in the IDB
-  displayData();
-};
    - -

    The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.

    - -

    The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the db variable we created earlier for later use. We also run a custom function called displayData(), which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.

    -
    5. -
  5. -

    Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:

    - - 
    // Setup the database tables if this has not already been done
-request.onupgradeneeded = function(e) {
-  // Grab a reference to the opened database
-  let db = e.target.result;
-
-  // Create an objectStore to store our notes in (basically like a single table)
-  // including a auto-incrementing key
-  let objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
-
-  // Define what data items the objectStore will contain
-  objectStore.createIndex('title', 'title', { unique: false });
-  objectStore.createIndex('body', 'body', { unique: false });
-
-  console.log('Database setup complete');
-};
    - -

    This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from the result property of the event's target (e.target.result), which is the request object. This is equivalent to the line db = request.result; inside the onsuccess handler, but we need to do this separately here because the onupgradeneeded handler (if needed) will run before the onsuccess handler, meaning that the db value wouldn't be available if we didn't do this.

    - -

    We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called notes_os. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an autoIncrement key field called id — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the id field will be used to uniquely identify records, such as when deleting or displaying a record.

    - -

    We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: title (which will contain a title for each note), and body (which will contain the body text of the note).

    -
    6. -
- -

So with this simple database schema set up, when we start adding records to the database; each one will be represented as an object along these lines:

- -
{
-  title: "Buy milk",
-  body: "Need both cows milk and soy.",
-  id: 8
-}
- -

Adding data to the database

- -

Now let's look at how we can add records to the database. This will be done using the form on our page.

- -

Below your previous event handler (but still inside the window.onload handler), add the following line, which sets up an onsubmit handler that runs a function called addData() when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):

- -
// Create an onsubmit handler so that when the form is submitted the addData() function is run
-form.onsubmit = addData;
- -

Now let's define the addData() function. Add this below your previous line:

- -
// Define the addData() function
-function addData(e) {
-  // prevent default - we don't want the form to submit in the conventional way
-  e.preventDefault();
-
-  // grab the values entered into the form fields and store them in an object ready for being inserted into the DB
-  let newItem = { title: titleInput.value, body: bodyInput.value };
-
-  // open a read/write db transaction, ready for adding the data
-  let transaction = db.transaction(['notes_os'], 'readwrite');
-
-  // call an object store that's already been added to the database
-  let objectStore = transaction.objectStore('notes_os');
-
-  // Make a request to add our newItem object to the object store
-  let request = objectStore.add(newItem);
-  request.onsuccess = function() {
-    // Clear the form, ready for adding the next entry
-    titleInput.value = '';
-    bodyInput.value = '';
-  };
-
-  // Report on the success of the transaction completing, when everything is done
-  transaction.oncomplete = function() {
-    console.log('Transaction completed: database modification finished.');
-
-    // update the display of data to show the newly added item, by running displayData() again.
-    displayData();
-  };
-
-  transaction.onerror = function() {
-    console.log('Transaction not opened due to error');
-  };
-}
- -

This is quite complex; breaking it down, we:

- - - -

Displaying the data

- -

We've referenced displayData() twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:

- -
// Define the displayData() function
-function displayData() {
-  // Here we empty the contents of the list element each time the display is updated
-  // If you didn't do this, you'd get duplicates listed each time a new note is added
-  while (list.firstChild) {
-    list.removeChild(list.firstChild);
-  }
-
-  // Open our object store and then get a cursor - which iterates through all the
-  // different data items in the store
-  let objectStore = db.transaction('notes_os').objectStore('notes_os');
-  objectStore.openCursor().onsuccess = function(e) {
-    // Get a reference to the cursor
-    let cursor = e.target.result;
-
-    // If there is still another data item to iterate through, keep running this code
-    if(cursor) {
-      // Create a list item, h3, and p to put each data item inside when displaying it
-      // structure the HTML fragment, and append it inside the list
-      const listItem = document.createElement('li');
-      const h3 = document.createElement('h3');
-      const para = document.createElement('p');
-
-      listItem.appendChild(h3);
-      listItem.appendChild(para);
-      list.appendChild(listItem);
-
-      // Put the data from the cursor inside the h3 and para
-      h3.textContent = cursor.value.title;
-      para.textContent = cursor.value.body;
-
-      // Store the ID of the data item inside an attribute on the listItem, so we know
-      // which item it corresponds to. This will be useful later when we want to delete items
-      listItem.setAttribute('data-note-id', cursor.value.id);
-
-      // Create a button and place it inside each listItem
-      const deleteBtn = document.createElement('button');
-      listItem.appendChild(deleteBtn);
-      deleteBtn.textContent = 'Delete';
-
-      // Set an event handler so that when the button is clicked, the deleteItem()
-      // function is run
-      deleteBtn.onclick = deleteItem;
-
-      // Iterate to the next item in the cursor
-      cursor.continue();
-    } else {
-      // Again, if list item is empty, display a 'No notes stored' message
-      if(!list.firstChild) {
-        const listItem = document.createElement('li');
-        listItem.textContent = 'No notes stored.';
-        list.appendChild(listItem);
-      }
-      // if there are no more cursor items to iterate through, say so
-      console.log('Notes all displayed');
-    }
-  };
-}
- -

Again, let's break this down:

- - - -

Deleting a note

- -

As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the deleteItem() function, which looks like so:

- -
// Define the deleteItem() function
-function deleteItem(e) {
-  // retrieve the name of the task we want to delete. We need
-  // to convert it to a number before trying it use it with IDB; IDB key
-  // values are type-sensitive.
-  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
-
-  // open a database transaction and delete the task, finding it using the id we retrieved above
-  let transaction = db.transaction(['notes_os'], 'readwrite');
-  let objectStore = transaction.objectStore('notes_os');
-  let request = objectStore.delete(noteId);
-
-  // report that the data item has been deleted
-  transaction.oncomplete = function() {
-    // delete the parent of the button
-    // which is the list item, so it is no longer displayed
-    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
-    console.log('Note ' + noteId + ' deleted.');
-
-    // Again, if list item is empty, display a 'No notes stored' message
-    if(!list.firstChild) {
-      let listItem = document.createElement('li');
-      listItem.textContent = 'No notes stored.';
-      list.appendChild(listItem);
-    }
-  };
-}
- - - -

So that's it! Your example should now work.

- -

If you are having trouble with it, feel free to check it against our live example (see the source code also).

- -

Storing complex data via IndexedDB

- -

As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.

- -

To demonstrate how to do it, we've written another example called IndexedDB video store (see it running live here also). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.

- -

Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.

- -
    -
  1. -

    For this simple example, we've stored the names of the videos to fetch in an array of objects:

    - - 
    const videos = [
-  { 'name' : 'crystal' },
-  { 'name' : 'elf' },
-  { 'name' : 'frog' },
-  { 'name' : 'monster' },
-  { 'name' : 'pig' },
-  { 'name' : 'rabbit' }
-];
    -
    2. -
  2. -

    To start with, once the database is successfully opened we run an init() function. This loops through the different video names, trying to load a record identified by each name from the videos database.

    - -

    If each video is found in the database (easily checked by seeing whether request.result evaluates to true — if the record is not present, it will be undefined), its video files (stored as blobs) and the video name are passed straight to the displayVideo() function to place them in the UI. If not, the video name is passed to the fetchVideoFromNetwork() function to ... you guessed it — fetch the video from the network.

    - - 
    function init() {
-  // Loop through the video names one by one
-  for(let i = 0; i < videos.length; i++) {
-    // Open transaction, get object store, and get() each video by name
-    let objectStore = db.transaction('videos_os').objectStore('videos_os');
-    let request = objectStore.get(videos[i].name);
-    request.onsuccess = function() {
-      // If the result exists in the database (is not undefined)
-      if(request.result) {
-        // Grab the videos from IDB and display them using displayVideo()
-        console.log('taking videos from IDB');
-        displayVideo(request.result.mp4, request.result.webm, request.result.name);
-      } else {
-        // Fetch the videos from the network
-        fetchVideoFromNetwork(videos[i]);
-      }
-    };
-  }
-}
    -
    3. -
  3. -

    The following snippet is taken from inside fetchVideoFromNetwork() — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.

    - -

    We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.

    - -

    When all those promises have fulfilled, the all() promise fulfills with an array containing all the individual fulfillment values. Inside the all() block, you can see that we then call the displayVideo() function like we did before to display the videos in the UI, then we also call the storeVideo() function to store those videos inside the database.

    - - 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
-  response.blob()
-);
-let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
-  response.blob()
-);
-
-// Only run the next code when both promises have fulfilled
-Promise.all([mp4Blob, webmBlob]).then(function(values) {
-  // display the video fetched from the network with displayVideo()
-  displayVideo(values[0], values[1], video.name);
-  // store it in the IDB using storeVideo()
-  storeVideo(values[0], values[1], video.name);
-});
    -
    4. -
  4. -

    Let's look at storeVideo() first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a readwrite transaction and get a reference to our videos_os object store, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.

    - - 
    function storeVideo(mp4Blob, webmBlob, name) {
-  // Open transaction, get object store; make it a readwrite so we can write to the IDB
-  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
-  // Create a record to add to the IDB
-  let record = {
-    mp4 : mp4Blob,
-    webm : webmBlob,
-    name : name
-  }
-
-  // Add the record to the IDB using add()
-  let request = objectStore.add(record);
-
-  ...
-
-};
    -
    5. -
  5. -

    Last but not least, we have displayVideo(), which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <video> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's src attributes, and it works fine.

    - - 
    function displayVideo(mp4Blob, webmBlob, title) {
-  // Create object URLs out of the blobs
-  let mp4URL = URL.createObjectURL(mp4Blob);
-  let webmURL = URL.createObjectURL(webmBlob);
-
-  ...
-
-  const video = document.createElement('video');
-  video.controls = true;
-  const source1 = document.createElement('source');
-  source1.src = mp4URL;
-  source1.type = 'video/mp4';
-  const source2 = document.createElement('source');
-  source2.src = webmURL;
-  source2.type = 'video/webm';
-
-  ...
-}
    -
    6. -
- -

Offline asset storage

- -

The above example already shows how to create an app that will store large assets in an IndexedDB database, avoiding the need to download them more than once. This is already a great improvement to the user experience, but there is still one thing missing — the main HTML, CSS, and JavaScript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection.

- -

- -

This is where Service workers and the closely-related Cache API come in.

- -

A service worker is a JavaScript file that, simply put, is registered against a particular origin (web site, or part of a web site at a certain domain) when it is accessed by a browser. When registered, it can control pages available at that origin. It does this by sitting between a loaded page and the network and intercepting network requests aimed at that origin.

- -

When it intercepts a request, it can do anything you wish to it (see use case ideas), but the classic example is saving the network responses offline and then providing those in response to a request instead of the responses from the network. In effect, it allows you to make a web site work completely offline.

- -

The Cache API is a another client-side storage mechanism, with a bit of a difference — it is designed to save HTTP responses, and so works very well with service workers.

- -
-

Note: Service workers and Cache are supported in most modern browsers now. At the time of writing, Safari was still busy implementing it, but it should be there soon.

-
- -

A service worker example

- -

Let's look at an example, to give you a bit of an idea of what this might look like. We have created another version of the video store example we saw in the previous section — this functions identically, except that it also saves the HTML, CSS, and JavaScript in the Cache API via a service worker, allowing the example to run offline!

- -

See IndexedDB video store with service worker running live, and also see the source code.

- -

Registering the service worker

- -

The first thing to note is that there's an extra bit of code placed in the main JavaScript file (see index.js). First we do a feature detection test to see if the serviceWorker member is available in the {{domxref("Navigator")}} object. If this returns true, then we know that at least the basics of service workers are supported. Inside here we use the {{domxref("ServiceWorkerContainer.register()")}} method to register a service worker contained in the sw.js file against the origin it resides at, so it can control pages in the same directory as it, or subdirectories. When its promise fulfills, the service worker is deemed registered.

- -
  // Register service worker to control making site work offline
-
-  if('serviceWorker' in navigator) {
-    navigator.serviceWorker
-             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
-             .then(function() { console.log('Service Worker Registered'); });
-  }
- -
-

Note: The given path to the sw.js file is relative to the site origin, not the JavaScript file that contains the code. The service worker is at https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. The origin is https://mdn.github.io, and therefore the given path has to be /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. If you wanted to host this example on your own server, you'd have to change this accordingly. This is rather confusing, but it has to work this way for security reasons.

-
- -

Installing the service worker

- -

The next time any page under the service worker's control is accessed (e.g. when the example is reloaded), the service worker is installed against that page, meaning that it will start controlling it. When this occurs, an install event is fired against the service worker; you can write code inside the service worker itself that will respond to the installation.

- -

Let's look at an example, in the sw.js file (the service worker). You'll see that the install listener is registered against self. This self keyword is a way to refer to the global scope of the service worker from inside the service worker file.

- -

Inside the install handler we use the {{domxref("ExtendableEvent.waitUntil()")}} method, available on the event object, to signal that the browser shouldn't complete installation of the service worker until after the promise inside it has fulfilled successfully.

- -

Here is where we see the Cache API in action. We use the {{domxref("CacheStorage.open()")}} method to open a new cache object in which responses can be stored (similar to an IndexedDB object store). This promise fulfills with a {{domxref("Cache")}} object representing the video-store cache. We then use the {{domxref("Cache.addAll()")}} method to fetch a series of assets and add their responses to the cache.

- -
self.addEventListener('install', function(e) {
- e.waitUntil(
-   caches.open('video-store').then(function(cache) {
-     return cache.addAll([
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
-     ]);
-   })
- );
-});
- -

That's it for now, installation done.

- -

Responding to further requests

- -

With the service worker registered and installed against our HTML page, and the relevant assets all added to our cache, we are nearly ready to go. There is only one more thing to do, write some code to respond to further network requests.

- -

This is what the second bit of code in sw.js does. We add another listener to the service worker global scope, which runs the handler function when the fetch event is raised. This happens whenever the browser makes a request for an asset in the directory the service worker is registered against.

- -

Inside the handler we first log the URL of the requested asset. We then provide a custom response to the request, using the {{domxref("FetchEvent.respondWith()")}} method.

- -

Inside this block we use {{domxref("CacheStorage.match()")}} to check whether a matching request (i.e. matches the URL) can be found in any cache. This promise fulfills with the matching response if a match is found, or undefined if it isn't.

- -

If a match is found, we simply return it as the custom response. If not, we fetch() the response from the network and return that instead.

- -
self.addEventListener('fetch', function(e) {
-  console.log(e.request.url);
-  e.respondWith(
-    caches.match(e.request).then(function(response) {
-      return response || fetch(e.request);
-    })
-  );
-});
- -

And that is it for our simple service worker. There is a whole load more you can do with them — for a lot more detail, see the service worker cookbook. And thanks to Paul Kinlan for his article Adding a Service Worker and Offline into your Web App, which inspired this simple example.

- -

Testing the example offline

- -

To test our service worker example, you'll need to load it a couple of times to make sure it is installed. Once this is done, you can:

- - - -

If you refresh your example page again, you should still see it load just fine. Everything is stored offline — the page assets in a cache, and the videos in an IndexedDB database.

- -

Summary

- -

That's it for now. We hope you've found our rundown of client-side storage technologies useful.

- -

See also

- - - -

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/client-side_web_apis/index.html b/files/pt-br/aprender/javascript/client-side_web_apis/index.html deleted file mode 100644 index 03477c04af..0000000000 --- a/files/pt-br/aprender/javascript/client-side_web_apis/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: APIs web do lado cliente -slug: Aprender/JavaScript/Client-side_web_APIs -tags: - - API - - Aprender - - Artigos - - DOM - - Iniciante - - Mídia - - WebAPI - - dados - - graficos - - modulo -translation_of: Learn/JavaScript/Client-side_web_APIs ---- -
{{LearnSidebar}}
- -

Se você decidir usar JavaScript no lado do cliente para sites ou aplicativos, você rapidamente vai se deparar com as APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou mesmo dados de outros sites ou serviços. Neste módulo, descobriremos o que são APIs, e como usar algumas das APIs mais comuns, que serão úteis no seu trabalho de desenvolvimento.

- -

Pré-requisitos

- -

Para tirar o máximo proveito deste módulo, é recomendável a leitura dos módulos anteriores de JavaScript da série (Primeiros passos, Construindo blocos, e Objetos javaScript ). Esses módulos envolvem bastante uso de API simples, e não é facil escrever exemplos Javascript do lado do cliente sem eles. Aqui, subimos um nível, assumindo o conhecimento da linguagem core JavaScript e explorando as APIs comuns da Web com um pouco mais de detalhes.

- -

Conhecimento básico de HTML e CSS serão utéis.

- -
-

Notes Se você estiver trabalhando de um dispositivo que não permita a criação de arquivos. Você pode tentar editar os arquivos em um editor online como JSBin ou Thimble.

-
- -

Guias

- -
-
Introdução a APIs para a web
-
Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.
-
Manipulando documentos
-
Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.
-
Buscando dados do servidor
-
Outra tarefa muito comum em websites modernos e aplicações é recuperar dados individuais de um servidor para atualizar partes de uma página sem ter que recarregar uma página inteira novamente. Este aparentemente pequeno detalhe tem tido um impacto enorme sobre o desempenho e comportamento de websites, desse modo neste artigo, vamos explicar esse conceito, e observar as tecnologias que tornam isso possível, tais como  {{domxref("XMLHttpRequest")}} e o Fetch API.
-
Third party APIs 
-
The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.
-
Drawing graphics
-
The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see The Canvas API and WebGL). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.
-
Video and audio APIs
-
HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
-
Client-side storage
-
Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.
-
- -
-
-
diff --git "a/files/pt-br/aprender/javascript/client-side_web_apis/introdu\303\247\303\243o/index.html" "b/files/pt-br/aprender/javascript/client-side_web_apis/introdu\303\247\303\243o/index.html" deleted file mode 100644 index dfab85143b..0000000000 --- "a/files/pt-br/aprender/javascript/client-side_web_apis/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Introdução às Web APIs -slug: Aprender/JavaScript/Client-side_web_APIs/Introdução -translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Primeiro, vamos ver as APIs a partir de um nível mais alto: o que são, como funcionam, como usá-las em seu código e como são estruturadas? Ainda, vamos entender quais são as principais classes de APIs e quais usos elas possuem.

- - - - - - - - - - - - -
Pré-requisitos: -

Conhecimentos básicos de computação, HTML, CSS e JavaScript (veja primeiros passos, elementos construtivos e introdução a objetos).

-
Objetivo:Familiarizar-se com APIs, o que elas podem fazer, e como usá-las em seu código.
- -

O que são APIs?

- -

As APIs (Application Programming Interfaces) são construções disponíveis nas linguagens de programação que permitem a desenvolvedores criar funcionalidades complexas mais facilmente. Tais construções abstraem o código mais complexo, proporcionando o uso de sintaxes mais simples em seu lugar.

- -

Pense no seguinte exemplo: o uso de energia elétrica em sua casa ou apartamento. Quando você deseja utilizar um eletrodoméstico, você precisa somente ligar o aparelho na tomada. Não é preciso conectar diretamente o fio do aparelho diretamente na caixa de luz. Isso seria, além de muito ineficiente, difícil e perigoso de ser feito (caso você não seja eletricista).

- -

- -

Fonte da imagem: Overloaded plug socket por The Clear Communication People, retirado do Flickr.

- -

Da mesma forma, caso você queira programar gráficos em 3D, é muito mais fácil usar uma API escrita em linguagem de alto nível como JavaScript ou Python, do que escrever em código de mais baixo nível (C ou C++) que controla diretamente a GPU ou outras funções gráficas.

- -
-

Nota: para mais informações, consulte o termo API no glossário.

-
- -

APIs JavaScript client-side

- -

A linguagem JavaScript, especialmente client-side, possui diversas APIs disponíveis. Elas não fazem parte da linguagem em si, mas são escritas sobre o core da linguagem JavaScript, fornecendo superpoderes para serem utilizados em seu código. Geralmente, tais APIs fazem parte de uma das seguintes categorias:

- - - -

- -

Relacionamento entre JavaScript, APIs, e outras ferramentas JavaScript

- -

Na seção anterior, abordamos as APIs JavaScript client-side e como elas se relacionam com a linguagem JavaScript. Esse ponto merece uma revisão e também uma breve menção de como outras ferramentas JavaScript encaixam-se nesse contexto:

- - - -

O que as APIs podem fazer?

- -

Existem muitas APIs disponíveis, nos navegadores modernos, que permitem uma liberdade de ação na hora de codar. Você pode conferir isso na página de referência das APIs da MDN.

- -

APIs comuns de navegadores

- -

As categorias mais comuns de APIs de navegadores que você irá utilizar (e que veremos em detalhes neste módulo), são:

- - - -

APIs comuns de terceiros

- -

APIs de terceiros são bastante variadas. Dentre as mais populares, que você eventualmente irá utilizar em algum momento, podermos destacar:

- - - -
-

Note: Você pode encontrar informações sobre muitas outras APIs de terceiros no Programmable Web API directory.

-
- -

Como as APIs funcionam?

- -

APIs JavaScript possuem pequenas diferenças mas, em geral, possuem funcionalidades em comum e operam de maneira semelhante.

- -

Elas são baseadas em objetos

- -

Your code interacts with APIs using one or more JavaScript objects, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).

- -
-

Note: If you are not already familiar with how objects work, you should go back and work through our JavaScript objects module before continuing.

-
- -

Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:

- - - -

So how do these objects interact? If you look at our maps-example.html example (see it live also), you'll see the following code:

- -
navigator.geolocation.getCurrentPosition(function(position) {
-  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
-  var myOptions = {
-    zoom: 8,
-    center: latlng,
-    mapTypeId: google.maps.MapTypeId.TERRAIN,
-    disableDefaultUI: true
-  }
-  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
-});
- -
-

Note: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to > Tools > Page Info > Permissions, then change the setting for Share Location; in Chrome go to Settings > Privacy > Show advanced settings > Content settings then change the settings for Location.

-
- -

We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using

- -
navigator.geolocation.getCurrentPosition(function(position) { ... });
- -

Isso é equivalente a fazer algo como

- -
var myGeo = navigator.geolocation;
-myGeo.getCurrentPosition(function(position) { ... });
- -

But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.

- -

The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.

- -
-

Note: A function that is taken by another function as an argument is called a callback function.

-
- -

This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called asynchronous operations. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:

- -
var position = navigator.geolocation.getCurrentPosition();
-var myLatitude = position.coords.latitude;
- -

If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of Promises, which were made available in ECMAScript 6 and are widely used in newer APIs.

- -

We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by getCurrentPosition() on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:

- -
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
- -

To use the API, we first create a LatLng object instance using the google.maps.LatLng() constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:

- -
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
- -

This object is itself set as the value of the center property of an options object that we've called myOptions. We then create an object instance to represent our map by calling the google.maps.Map() constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of map_canvas), and the options object we defined just above it.

- -
var myOptions = {
-  zoom: 8,
-  center: latlng,
-  mapTypeId: google.maps.MapTypeId.TERRAIN,
-  disableDefaultUI: true
-}
-
-var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
- -

With this done, our map now renders.

- -

This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.

- -
-

Note: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.

-
- -

Possuem pontos de entrada reconhecíveis

- -

When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.

- -

The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:

- -
var em = document.createElement('em'); // create a new em element
-var para = document.querySelector('p'); // reference an existing p element
-em.textContent = 'Hello there!'; // give em some text content
-para.appendChild(em); // embed em inside para
- -

Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:

- -
var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
- -

Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-};
- -
-

Note: You can see this code in action in our bouncing balls demo (see it running live also).

-
- -

Usam eventos para lidar com mudanças de estado

- -

We already discussed events earlier on in the course, in our Introduction to events article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.

- -

Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the XMLHttpRequest object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the load event is fired when a response has been successfully returned containing the requested resource, and it is now available.

- -

O código seguinte fornece um exemplo simples de como isso seria utilizado:

- -
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-var request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.responseType = 'json';
-request.send();
-
-request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -
-

Note: You can see this code in action in our ajax.html example (see it live also).

-
- -

The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the XMLHttpRequest() constructor, open an HTTP GET request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.

- -

The onload handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the superHeroes variable, then pass it to two different functions for further processing.

- -

Possuem mecanismos de segurança adicionais, quando apropriado

- -

WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example same-origin policy), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include Service Workers and Push).

- -

In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier Geolocation example:

- -

- -

The Notifications API asks for permission in a similar fashion:

- -

- -

These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.

- -

Resumo

- -

Ao chegar aqui, você deve ter uma boa ideia do que são APIs, como funcionam e o que você pode fazer com elas em seu código JavaScript. Além do mais, você deve estar ansioso(a) para colocar a mão na massa e trabalhar com APIs. Na sequência, iremos ver como manipular documentos com o DOM (Document Object Model).

- -

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html deleted file mode 100644 index d701a63823..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Construa sua própria função -slug: Aprender/JavaScript/Elementos_construtivos/Build_your_own_function -translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
- -

Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece experiência prática. Aqui você terá algumas práticas construindo sua própria função personalizada. Ao longo do caminho, também explicaremos alguns detalhes úteis sobre como lidar com funções.

- - - - - - - - - - - - -
Pré-requisitos:Alfabetização básica em informática, um entendimento básico de HTML e CSS, Primeiros passos do JavaScript, Funções — blocos reutilizáveis de código.
Objetiva:Para fornecer alguma prática na criação de uma função personalizada e explicar alguns detalhes associados mais úteis.
- -

Aprendizagem ativa: vamos construir uma função

- -

A função personalizada que vamos construir será chamada  displayMessage(). Ele exibirá uma caixa de mensagem personalizada em uma página da Web e atuará como um substituto personalizado para a função de alert() interna do navegador. Já vimos isso antes, mas vamos apenas refrescar nossas memórias. Digite o seguinte no console JavaScript do seu navegador, em qualquer página de sua preferência:

- -
alert('This is a message');
- -

A função alert leva um único argumento — a string exibida na caixa de alerta. Tente variar a string para mudar a mensagem.

- -

A função alert é limitada: você pode alterar a mensagem, mas não pode variar com facilidade nada, como cor, ícone ou qualquer outra coisa. Nós vamos construir um que se mostrará mais divertido.

- -
-

Nota: Este exemplo deve funcionar bem em todos os navegadores modernos, mas o estilo pode parecer um pouco engraçado em navegadores um pouco mais antigos. Recomendamos que você faça esse exercício em um navegador moderno como o Firefox, o Opera ou o Chrome.

-
- -

A função básica

- -

Para começar, vamos montar uma função básica.

- -
-

Note: Para convenções de nomenclatura de função, você deve seguir as mesmas regras das convenções de nomenclatura de variáveis. Algo bom é como você pode diferenciá-los — os nomes das funções aparecem com parênteses depois deles e as variáveis não.

-
- -
    -
  1. Comece acessando o arquivo function-start.html e fazendo uma cópia local. Você verá que o HTML é simples — o corpo contém apenas um único botão. Também fornecemos algumas CSS básicas para estilizar a caixa de mensagem personalizada e um elemento {{htmlelement("script")}} vazio para colocar nosso JavaScript.
    2. -
  2. Em seguida, adicione o seguinte dentro do elemento <script> : - 
    function displayMessage() {
-
-}
    - Começamos com a palavra-chave function, o que significa que estamos definindo uma função. Isto é seguido pelo nome que queremos dar à nossa função, um par de parênteses e um conjunto de chaves. Quaisquer parâmetros que queremos dar à nossa função vão dentro dos parênteses, e o código que é executado quando chamamos a função vai dentro das chaves.
    3. -
  3. Por fim, adicione o seguinte código dentro das chaves: - 
    var html = document.querySelector('html');
-
-var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
-
-var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
-
-closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
    -
    4. -
- -

Isso é um monte de código para passar, então vamos guiá-lo pouco a pouco.

- -

A primeira linha usa uma função da API do DOM chamada {{domxref("document.querySelector()")}} para selecionar o elemento {{htmlelement("html")}} e armazenar uma referência a ele em uma variável chamada html, para que possamos fazer coisas com ela mais tarde:

- -
var html = document.querySelector('html');
- -

A próxima seção usa outra função da API do DOM chamada {{domxref("Document.createElement()")}} para criar um elemento {{htmlelement("div")}} elemento e armazenar uma referência a ele em uma variável chamada panel. Este elemento será o recipiente externo da nossa caixa de mensagens.

- -

Em seguida, usamos outra função da API do DOM chamada {{domxref("Element.setAttribute()")}} para setar o atributo class atributo no nosso painel com um valor de msgBox. Isso é para facilitar o estilo do elemento — se você olhar para o CSS na página, verá que estamos usando um seletor de classe .msgBox para estilizar a caixa de mensagem e seu conteúdo.

- -

Finalmente, chamamos uma função DOM chamada {{domxref("Node.appendChild()")}} na variável html vque armazenamos anteriormente, que nidifica um elemento dentro do outro como um filho dele. Nós especificamos o painel <div> como o filho que queremos acrescentar dentro do elemento <html> Precisamos fazer isso porque o elemento que criamos não aparecerá na página sozinho — precisamos especificar onde colocá-lo.

- -
var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
- -

As próximas duas seções fazem uso das mesmas funções createElement() e appendChild() que já vimos para criar dois novos elementos — um {{htmlelement("p")}} e um {{htmlelement("button")}} — e inseri-los na página como filhos do painel <div>. Nós usamos a sua propriedade {{domxref("Node.textContent")}} — que representa o conteúdo de texto de um elemento — para inserir uma mensagem dentro do parágrafo e um 'x' dentro do botão. Este botão será o que precisa ser clicado / ativado quando o usuário quiser fechar a caixa de mensagem.

- -
var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
- -

Finalmente, usamos um manipulador eventos {{domxref("GlobalEventHandlers.onclick")}} para fazer com que, quando o botão é clicado, algum código seja executado para excluir todo o painel da página — para fechar a caixa de mensagem.

- -

Resumidamente, o manipulador onclick é uma propriedade disponível no botão (ou, na verdade, qualquer elemento na página) que pode ser definida para uma função para especificar qual código será executado quando o botão for clicado. Você aprenderá muito mais sobre isso em nosso artigo de eventos posteriores. Estamos tornando o manipulador onclick igual a uma função anônima, que contém o código a ser executado quando o botão é clicado. A linha dentro da função usa a função da API do DOM {{domxref("Node.removeChild()")}} para especificar que queremos remover um elemento filho específico do elemento HTML — nesse caso, o painel <div>.

- -
closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
- -

Basicamente, todo esse bloco de código está gerando um bloco de HTML semelhante a isso e inserindo-o na página:

- -
<div class="msgBox">
-  <p>This is a message box</p>
-  <button>x</button>
-</div>
- -

Isso foi um monte de código para trabalhar — não se preocupe muito se você não se lembra exatamente como tudo funciona agora! A parte principal que queremos focar aqui é a estrutura e uso da função, mas queremos mostrar algo interessante para este exemplo.

- -

Chamando a função

- -

Você tem sua própria definição de função escrita em seu elemento  <script>, mas não fará nada do jeito que está.

- -
    -
  1. Tente incluir a seguinte linha abaixo da sua função para chamá-lo: - 
    displayMessage();
    - Esta linha chama a função, fazendo com que ela seja executada imediatamente. Quando você salvar seu código e recarregá-lo no navegador, verá a pequena caixa de mensagem aparecer imediatamente, apenas uma vez. Nós só estamos chamando uma vez, afinal.
    2. -
  2. -

    Agora abra suas ferramentas de desenvolvedor do navegador na página de exemplo, vá para o console JavaScript e digite a linha novamente, você verá que ela aparece novamente! Então isso é divertido — agora temos uma função reutilizável que podemos chamar a qualquer momento que quisermos.

    - -

    Mas provavelmente queremos que apareça em resposta a ações do usuário e do sistema. Em um aplicativo real, essa caixa de mensagem provavelmente seria chamada em resposta a novos dados sendo disponibilizados, ou um erro ocorreria, ou o usuário tentando excluir seu perfil ("você tem certeza disso?") Ou o usuário adicionando um novo contato e a operação completando com sucesso ... etc.

    - -

    Nesta demonstração, faremos com que a caixa de mensagem apareça quando o usuário clicar no botão.

    -
    3. -
  3. Exclua a linha anterior que você adicionou.
    4. -
  4. Em seguida, vamos selecionar o botão e armazenar uma referência a ele em uma variável. Adicione a seguinte linha ao seu código, acima da definição da função: - 
    var btn = document.querySelector('button');
    -
    5. -
  5. Por fim, adicione a seguinte linha abaixo da anterior: - 
    btn.onclick = displayMessage;
    - De maneira semelhante à nossa linha  closeBtn.onclick... dentro da função, aqui estamos chamando algum código em resposta a um botão sendo clicado. Mas, neste caso, em vez de chamar uma função anônima contendo algum código, estamos chamando nosso nome de função diretamente.
    6. -
  6. Tente salvar e atualizar a página — agora você verá a caixa de mensagem quando clicar no botão.
    7. -
- -

Você pode estar se perguntando por que não incluímos os parênteses após o nome da função. Isso ocorre porque não queremos chamar a função imediatamente — somente depois que o botão foi clicado. Se você tentar mudar a linha para

- -
btn.onclick = displayMessage();
- -

e salvar e recarregar, você verá que a caixa de mensagem aparece sem que o botão seja clicado! Os parênteses neste contexto são às vezes chamados de "operador de invocação de função". Você só os usa quando deseja executar a função imediatamente no escopo atual. No mesmo sentido, o código dentro da função anônima não é executado imediatamente, pois está dentro do escopo da função.

- -

Se você tentou o último experimento, certifique-se de desfazer a última alteração antes de continuar.

- -

Melhorando a função com parâmetros

- -

Tal como está, a função ainda não é muito útil — nós não queremos apenas mostrar a mesma mensagem padrão todas as vezes. Vamos melhorar nossa função adicionando alguns parâmetros, permitindo-nos chamá-lo com algumas opções diferentes.

- -
    -
  1. Primeiro de tudo, atualize a primeira linha da função: - 
    function displayMessage() {
    - para isso:
    2. -
  2. - 
    function displayMessage(msgText, msgType) {
    - Agora, quando chamamos a função, podemos fornecer dois valores de variáveis dentro dos parênteses para especificar a mensagem a ser exibida na caixa de mensagem e o tipo de mensagem que ela é.
    3. -
  3. Para utilizar o primeiro parâmetro, atualize a seguinte linha dentro da sua função: - 
    msg.textContent = 'This is a message box';
    - to - - 
    msg.textContent = msgText;
    -
    4. -
  4. Por último, mas não menos importante, você precisa atualizar sua chamada de função para incluir um texto de mensagem atualizado. Altere a seguinte linha: - 
    btn.onclick = displayMessage;
    - para este bloco: - - 
    btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};
    - Se quisermos especificar parâmetros dentro de parênteses para a função que estamos chamando, então não podemos chamá-la diretamente — precisamos colocá-lo dentro de uma função anônima para que não fique no escopo imediato e, portanto, não seja chamado imediatamente. Agora ele não será chamado até que o botão seja clicado.
    5. -
  5. Recarregue e tente o código novamente e você verá que ele ainda funciona muito bem, exceto que agora você também pode variar a mensagem dentro do parâmetro para obter mensagens diferentes exibidas na caixa!
    6. -
- -

Um parâmetro mais complexo

- -

Para o próximo parâmetro. Este vai envolver um pouco mais de trabalho — vamos configurá-lo para que, dependendo do parâmetro msgType, a função mostre um ícone diferente e uma cor de fundo diferente.

- -
    -
  1. Primeiro de tudo, baixe os ícones necessários para este exercício (aviso e batepapo) do GitHub. Salve-os em uma nova pasta chamada  icons no mesmo local que seu arquivo HTML. - -
    Nota: Os icones aviso e batepapo são encontrado em iconfinder.com, e desenhados por Nazarrudin Ansyari. Obrigado!
    -
    2. -
  2. Em seguida, encontre o CSS dentro do seu arquivo HTML. Faremos algumas alterações para abrir caminho para os ícones. Primeiro, atualize a largura do .msgBox de: - 
    width: 200px;
    - para:
    3. -
  3. - 
    width: 242px;
    -
    4. -
  4. Em seguida, adicione as seguintes linhas dentro da regra .msgBox p { ... }: - 
    padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;
    -
    5. -
  5. Agora precisamos adicionar código à nossa função displayMessage() para manipular a exibição dos ícones. Adicione o seguinte bloco logo acima da chave de fechamento (}) da sua função: - 
    if (msgType === 'warning') {
-  msg.style.backgroundImage = 'url(icons/warning.png)';
-  panel.style.backgroundColor = 'red';
-} else if (msgType === 'chat') {
-  msg.style.backgroundImage = 'url(icons/chat.png)';
-  panel.style.backgroundColor = 'aqua';
-} else {
-  msg.style.paddingLeft = '20px';
-}
    - Aqui, se o parâmetro msgType estiver definido como 'warning', o ícone de aviso será exibido e a cor de fundo do painel será definida como vermelha. Se estiver definido para 'chat', o ícone de bate-papo é exibido e a cor de fundo do painel é definida como azul aqua. Se o parâmetro msgType não estiver definido (ou para algo diferente), então a parte else { ... } do código entra em jogo, e o parágrafo é simplesmente fornecido padding padrão e nenhum ícone, sem conjunto de cores do painel de fundo também. Isso fornece um estado padrão se nenhum parâmetro msgType for fornecido, significando que é um parâmetro opcional!
    6. -
  6. Vamos testar nossa função atualizada, tente atualizar a chamada displayMessage() a partir disso: - 
    displayMessage('Woo, this is a different message!');
    - para um destes:
    7. -
  7. - 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');
    - Você pode ver como a nossa pequena função (agora nem tanto) está se tornando útil.
    8. -
- -
-

Nota: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na versão finalizada no GitHub (veja-a também em execução), ou peça nos ajuda.

-
- -

Conclusão

- -

Parabéns por chegar ao final! Este artigo levou você ao longo de todo o processo de criação de uma função prática personalizada, que com um pouco mais de trabalho poderia ser transplantada em um projeto real. No próximo artigo, vamos encerrar as funções explicando outro conceito relacionado essencial — valores de retorno.

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html deleted file mode 100644 index 0fec6d40e7..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html +++ /dev/null @@ -1,616 +0,0 @@ ---- -title: Tomando decisões no seu código — condicionais -slug: Aprender/JavaScript/Elementos_construtivos/conditionals -tags: - - Artigo - - Condicionais - - Iniciante -translation_of: Learn/JavaScript/Building_blocks/conditionals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
- -

Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. Por exemplo, em um jogo, se o número de vidas do jogador é 0, então o jogo acaba. Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; Mostra estrelas e uma lua se for noite. Neste artigo, exploraremos como as chamadas declarações condicionais funcionam em JavaScript.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico de algoritmos, um entendimento básico de HTML e CSS, JavaScript primeiros passos.
Objetivo:Entender como usar estruturas condicionais em JavaScript.
- -

Você pode tê-lo em uma condição ...!

- -

Seres humanos (e outros animais) tomam decisões o tempo todo que afetam suas vidas, desde pequenas ("devo comer um biscoito ou dois?") até grandes ("devo ficar no meu país de origem e trabalhar na fazenda do meu pai ou devo mudar para a América e estudar astrofísica?").

- -

As declarações condicionais nos permitem representar tomadas de decisão como estas em JavaScript, a partir da escolha que deve ser feita (por exemplo, "um biscoito ou dois"), ao resultado obtido dessas escolhas (talvez o resultado de "comer um biscoito" possa ser "ainda sentido fome ", e o resultado de "comer dois biscoitos" pode ser "ter se sentido cheio, mas mamãe me falou para comer todos os biscoitos".)

- -

- -

Declarações if ... else

- -

De longe o tipo mais comum de declaração condicional que você usará em JavaScript  — as modestas declarações if ... else.

- -

Sintaxe básica if ... else

- -

Veja a sintaxe básica do if...else no {{glossary("pseudocódigo")}}:

- -
if (condicao) {
-  codigo para executar caso a condição seja verdadeira
-} else {
-  senão, executar este código
-}
- -

Aqui nós temos:

- -
    -
  1. A palavra reservada if seguida de um par de parênteses.
    2. -
  2. Um teste condicional, localizado dentro dos parênteses (normalmente "este valor é maior que esse", ou "este valor existe"). Esta condição pode fazer uso dos operadores de comparação que discutimos no último módulo, e podem retornar  true ou false.
    3. -
  3. Um par de chaves, e dentro dele temos código — pode ser qualquer código que queiramos, e só vai ser executado se o teste condicional retornar true.
    4. -
  4. A palavra reservada else.
    5. -
  5. Outro par de chaves, dentro dele temos mais um pouco de código — pode ser qualquer código que queiramos, e só vai executar se o teste condicional retornar um valor diferente de true, neste caso not true, ou false.  
    6. -
- -

Este tipo de código é bem legível por seres humanos — ele diz: "if a condição for true, execute o bloco de código A, else execute o bloco de código B" (se a condição for verdadeira, execute o bloco de código A, senão execute o bloco de código B).

- -

Você precisa saber que não é obrigado a colocar a palavra reservada else e e o segundo bloco de par de chaves. O código apresentado a seguir é perfeitamente válido e não produz erros:

- -
if (condicao) {
-  codigo para executar se a condição for verdadeira
-}
-
-código a ser executado
- -

Entretanto, você precisa ser cauteloso aqui — neste caso, repare que o segundo bloco de código não é controlado pela declaração condicional, então ele vai executar sempre, independente do teste condicional retornar true ou false. É claro, isto não é necessariamente uma coisa ruim, mas isso pode não ser o que você quer — com muita frequência você vai querer executar ou um bloco de código ou outro, não os dois juntos.

- -

Por fim, você verá muitas vezes declarações if...else escritas sem as chaves, no seguinte estilo de escrita:

- -
if (condicao) executar aqui se for verdadeira
-else executar este outro codigo
- -

Este é um código perfeitamente válido, mas não é recomendado — ele facilita que você escreva código fora do escopo do if e do else, o que seria mais difícil se você estivesse usando as chaves para delimitar os blocos de código, e usando multiplas linhas de código e identação.

- -

Um exemplo real

- -

Para entender bem a sintaxe, vamos considerar um exemplo real. Imagine um filhote de humanos sendo chamdo a ajudar com as tarefas do Pai ou da Mãe. Os pais podem falar: "Ei querido, se você me ajudar a ir e fazer as compras, eu te dou uma grana extra para que você possa comprar aquele brinquedo que você quer." Em JavaScript, nós podemos representar isso como:

- -

var comprasFeitas = false;

- -

if (comprasFeitas === true) {
-   var granaFilhote = 10;
- } else {
-   var granaFilhote = 5;
- }

- -

Esse código como mostrado irá sempre resultar na variável comprasFeitas retornando false, sendo um desapontamento para nossas pobres crianças. Cabe a nós fornecer um mecanismo para o pai definir a variável comprasFeitas como true se o filho fez as compras.

- -
-

Nota: Você pode ver a versão completa desse exemplo no GitHub (também veja live.)

-
- -

else if

- -

O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois?

- -

Existe uma maneira de encadear escolhas/resultados extras ao seu if...else — usando else if. Cada escolha extra requer um bloco adicional para colocar entre if() { ... } e else { ... } — confira o seguinte exemplo mais envolvido, que pode fazer parte de um aplicativo simples de previsão do tempo:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  var choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
-
-
- -

{{ EmbedLiveSample('else_if', '100%', 100) }}

- -
    -
  1. Aqui, temos um elemento HTML {{htmlelement("select")}} que nos permite fazer escolhas de clima diferentes e um simples parágrafo.
    2. -
  2. No JavaScript, estamos armazenando uma referência para ambos os elementos {{htmlelement("select")}} e {{htmlelement("p")}}, e adicionando um listener de evento ao elemento  <select> para que, quando o valor for alterado, a função setWeather() é executada.
    3. -
  3. Quando esta função é executada, primeiro definimos uma variável chamada choice para o valor atual selecionado no elemento <select>. Em seguida, usamos uma instrução condicional para mostrar um texto diferente dentro do parágrafo, dependendo de qual é o valor de choice . Observe como todas as condições são testadas nos blocos else if() {...}, com exceção do primeiro, que é testado em um bloco if() {...}.
    4. -
  4. A última escolha, dentro do bloco else {...}, é basicamente uma opção de "último recurso" — o código dentro dele será executado se nenhuma das condições for true. Nesse caso, ele serve para esvaziar o texto do parágrafo, se nada for selecionado, por exemplo, se um usuário decidir selecionar novamente a opção de espaço reservado "- Make a choice--" mostrada no início.
    5. -
- -
-

Nota: Você pode também encontrar este exemplo no GitHub (veja ele sendo executado lá também.)

-
- -

Uma nota sobre os operadores de comparação

- -

Operadores de comparação são usados para testar as condições dentro de nossas declarações condicionais. Nós primeiro olhamos para operadores de comparação de volta em nosso artigo Matemática básica em JavaScript - números e operadores. Nossas escolhas são:

- - - -
-

Nota: Revise o material no link anterior se quiser atualizar suas memórias sobre eles.

-
- -

Queríamos fazer uma menção especial do teste de valores boolean (true/false) , e um padrão comum que você vai encontrar de novo e de novo. Qualquer valor que não seja  false, undefined, null, 0, NaN, ou uma string vazia ('') retorna true quando testado como uma instrução condicional, portanto, você pode simplesmente usar um nome de variável para testar se é verdadeiro , ou mesmo que existe (ou seja, não é indefinido). Por exemplo:

- -
var cheese = 'Cheddar';
-
-if (cheese) {
-  console.log('Yay! Cheese available for making cheese on toast.');
-} else {
-  console.log('No cheese on toast for you today.');
-}
- -

E, voltando ao nosso exemplo anterior sobre a criança fazendo uma tarefa para seu pai, você poderia escrevê-lo assim:

- -
var shoppingDone = false;
-
-if (shoppingDone) { // don't need to explicitly specify '=== true'
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

Aninhando if ... else

- -

É perfeitamente correto colocar uma declaração if...else dentro de outra — para aninhá-las. Por exemplo, poderíamos atualizar nosso aplicativo de previsão do tempo para mostrar mais opções dependendo de qual é a temperatura:

- -
if (choice === 'sunny') {
-  if (temperature < 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-  } else if (temperature >= 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-  }
-}
- -

Mesmo que o código trabalhe em conjunto, cada uma das instruções if...else funcionam completamente independente uma da outra.

- -

Operadores lógicos: AND, OR e NOT

- -

Se você quiser testar várias condições sem escrever instruções aninhadas if...else, os operadores lógicos poderão ajudá-lo. Quando usado em condições, os dois primeiros fazem o seguinte:

- - - -

Para fornecer um exemplo AND, o fragmento de exemplo anterior pode ser reescrito assim:

- -
if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-}
- -

Então, por exemplo, o primeiro bloco de código só será executado se ambas as condições choice === 'sunny' e temperature < 86 retornarem true.

- -

Vamos ver um exemplo rápido de OR:

- -
if (iceCreamVanOutside || houseStatus === 'on fire') {
-  console.log('You should leave the house quickly.');
-} else {
-  console.log('Probably should just stay in then.');
-}
- -

O último tipo de operador lógico, NOT, expressado pelo operador !, pode ser usado para negar uma expressão. Vamos combiná-lo com OR no exemplo acima:

- -
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
-  console.log('Probably should just stay in then.');
-} else {
-  console.log('You should leave the house quickly.');
-}
- -

Nesse trecho, se a instrução OR retornar true, o operador NOT negará isso para que a expressão geral retorne false.

- -

Você pode combinar tantas instruções lógicas quanto quiser, em qualquer estrutura. O exemplo a seguir executa o código interno apenas se ambos os conjuntos de instruções OR retornarem true, significando que a instrução AND global também retornará true:

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // run the code
-}
- -

Um erro comum ao usar o operador OR lógico em instruções condicionais é tentar indicar a variável cujo valor você está verificando uma vez e, em seguida, fornecer uma lista de valores que poderia ser para retornar true, separados pelos operadores || (OR) . Por exemplo:

- -
if (x === 5 || 7 || 10 || 20) {
-  // run my code
-}
- -

Nesse caso, a condição dentro de if(...)  sempre será avaliada como verdadeira, já que 7 (ou qualquer outro valor diferente de zero) sempre é avaliado como verdadeiro. Esta condição está realmente dizendo "se x é igual a 5, ou 7 é verdade — o que sempre é". Isso logicamente não é o que queremos! Para fazer isso funcionar, você precisa especificar um teste completo ao lado de cada operador OR:

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // run my code
-}
- -

Instruções switch

- -

As instruções if...else fazem o trabalho de habilitar o código condicional bem, mas elas também possuem suas desvantagens. Elas são boas principalmente para casos em que você tem algumas opções, e cada uma requer uma quantidade razoável de código para ser executado, e / ou as condições são complexas (por exemplo, vários operadores lógicos). Nos casos em que você deseja definir uma variável para uma determinada opção de valor ou imprimir uma determinada instrução dependendo de uma condição, a sintaxe pode ser um pouco incômoda, especialmente se você tiver um grande número de opções.

- -

As instruçõesswitch são suas amigas aqui — elas tomam uma única expressão / valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha. Aqui está mais um pseudocódigo, para você ter uma ideia:

- -
switch (expression) {
-  case choice1:
-    run this code
-    break;
-
-  case choice2:
-    run this code instead
-    break;
-
-  // include as many cases as you like
-
-  default:
-    actually, just run this code
-}
- -

Aqui nós temos:

- -
    -
  1. A palavra-chave switch, seguido por um par de parênteses.
    2. -
  2. Uma expressão ou valor dentro dos parênteses.
    3. -
  3. A palavra-chave case, seguido por uma escolha que a expressão / valor poderia ser, seguido por dois pontos.
    4. -
  4. Algum código para ser executado se a escolha corresponder à expressão.
    5. -
  5. Uma instrução break, seguido de um ponto e vírgula. Se a opção anterior corresponder à expressão / valor, o navegador interromperá a execução do bloco de código aqui e passará para qualquer código que aparecer abaixo da instrução switch.
    6. -
  6. Como muitos outros casos (marcadores 3 a 5) que você quiser.
    7. -
  7. A palavra-chave default, seguido por exatamente o mesmo padrão de código de um dos casos (marcadores 3 a 5), exceto que o default não tem escolha após ele, e você não precisa da instrução break, pois não há nada para executar depois disso o bloco de qualquer maneira. Esta é a opção padrão que é executada se nenhuma das opções corresponder.
    8. -
- -
-

Nota: Você não precisa incluir a seção default — você pode omiti-la com segurança se não houver chance de que a expressão possa se igualar a um valor desconhecido. Se houver uma chance disso, você precisará incluí-lo para lidar com casos desconhecidos.

-
- -

Um exemplo de switch

- -

Vamos dar uma olhada em um exemplo real — vamos reescrever nosso aplicativo de previsão do tempo para usar uma instrução switch:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-
-function setWeather() {
-  var choice = select.value;
-
-  switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-      break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-      break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-      break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-      break;
-    default:
-      para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: Você pode encontrar este exemplo no GitHub (veja-o em execução lá também.)

-
- -

Operador ternário

- -

Há um bit final de sintaxe que queremos apresentar a você antes de começar a brincar com alguns exemplos. O operador ternário ou condicional é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for  true, e outro caso seja false — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco if...else se você simplesmente tiver duas opções escolhidas entre uma condição true/false condition. O pseudocódigo é assim:

- -
( condition ) ? run this code : run this code instead
- -

Então, vamos dar uma olhada em um exemplo simples:

- -
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
- -

Aqui temos uma variável chamada isBirthday — se ela for true, nós damos ao nosso convidado uma mensagem de feliz aniversário; se não, damos a ela a saudação diária padrão.

- -

Exemplo de operador ternário

- -

Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código - qualquer coisa que você gosta. O exemplo ao vivo a seguir mostra um seletor de temas simples em que o estilo do site é aplicado usando um operador ternário.

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
var select = document.querySelector('select');
-var html = document.querySelector('html');
-document.body.style.padding = '10px';
-
-function update(bgColor, textColor) {
-  html.style.backgroundColor = bgColor;
-  html.style.color = textColor;
-}
-
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
-
- -

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300) }}

- -

Aqui nós temos um elemento {{htmlelement('select')}} para escolher um tema (preto ou branco), além de um simples {{htmlelement('h1')}} para exibir um título do site. Nós também temos uma função chamada update(), que leva duas cores como parâmetros (entradas). A cor do plano de fundo do site é definida para a primeira cor fornecida e sua cor de texto é definida para a segunda cor fornecida.

- -

Finalmente, nós também temos um evento listener onchange que serve para executar uma função que contém um operador ternário. Começa com uma condição de teste — select.value === 'black'. Se este retornar true, nós executamos a função update() com parâmetros de preto e branco, o que significa que acabamos com a cor de fundo do preto e cor do texto de branco. Se retornar false, nós executamos a função update() com parâmetros de branco e preto, o que significa que a cor do site está invertida.

- -
-

Nota: Você pode também encontrar este exemplo no GitHub (veja-o executando lá também.)

-
- -

Aprendizado ativo: um calendário simples

- -

Neste exemplo, você nos ajudará a concluir um aplicativo de calendário simples. No código que você tem:

- - - -

Precisamos que você escreva uma instrução condicional dentro da função do manipulador onchange, logo abaixo do comentário // ADD CONDITIONAL HERE. Ele deve:

- -
    -
  1. Olhar para o mês selecionado (armazenado na variavel choice. Este será o valor do elemento <select> após o valor ser alterado, portanto, "Janeiro", por exemplo.
    2. -
  2. Definir uma variável chamada  days para ser igual ao número de dias no mês selecionado. Para fazer isso, você terá que procurar o número de dias em cada mês do ano. Você pode ignorar anos bissextos para os propósitos deste exemplo.
    3. -
- -

Dicas:

- - - -

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente preso, pressione "Mostrar solução" para ver uma solução.

- - - -

{{ EmbedLiveSample('Playable_code', '100%', 1110) }}

- -

Aprendizado ativo: mais opções de cores!

- -

Neste exemplo, você terá o exemplo de operador ternário que vimos anteriormente e converterá o operador ternário em uma instrução switch que nos permitirá aplicar mais opções ao site simples. Olhe para a {{htmlelement("select")}} — desta vez você verá que não tem duas opções de tema, mas cinco. Você precisa adicionar uma instrução switch abaixo do comentário // ADD SWITCH STATEMENT:

- - - -

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente travado, pressione "Show solution" para ver uma solução.

- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

- -

Conclusão

- -

E isso é tudo que você realmente precisa saber sobre estruturas condicionais no JavaScript por agora! Tenho certeza que você terá entendido esses conceitos e trabalhou com os exemplos com facilidade; se houver algo que você não tenha entendido, sinta-se à vontade para ler o artigo novamente ou contate-nos para pedir ajuda.

- -

Veja também

- - - -

Teste suas habilidades!

- -

Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja Teste suas habilidades: Condicionais.

- -

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

diff --git "a/files/pt-br/aprender/javascript/elementos_construtivos/c\303\263digo_em_loop/index.html" "b/files/pt-br/aprender/javascript/elementos_construtivos/c\303\263digo_em_loop/index.html" deleted file mode 100644 index 058ce0385c..0000000000 --- "a/files/pt-br/aprender/javascript/elementos_construtivos/c\303\263digo_em_loop/index.html" +++ /dev/null @@ -1,940 +0,0 @@ ---- -title: Código em loop -slug: Aprender/JavaScript/Elementos_construtivos/Código_em_loop -tags: - - Artigo - - CodingScripting - - DO - - Guide - - Iniciante - - JavaScript - - Loop - - break - - continue - - for - - while -translation_of: Learn/JavaScript/Building_blocks/Looping_code ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
- -

As linguagens de programação são muito úteis para concluir rapidamente tarefas repetitivas, desde vários cálculos básicos até praticamente qualquer outra situação em que você tenha muitos itens semelhantes para manipular. Aqui, veremos as estruturas de loop disponíveis no JavaScript que ajudam com essas necessidades..

- - - - - - - - - - - - -
Prerequisitos:Conhecimento básico em informática, um básico entendimento  de HTML e CSS, JavaScript first steps.
Objectivo:Entender como usar loops em JavaScript.
- -

Mantenha-me no loop(laço)

- -

Loops, loops, loops. Além de estarem associados a populares cereais matinais, montanhas-russas e produção musical, eles também são um conceito importante na programação. O loop de programação é como fazer a mesma coisa repetidas vezes - o que é chamado de iteração na linguagem de programação.

- -

Vamos considerar o caso de um agricultor que quer se certificar de que ele terá comida suficiente para alimentar sua família durante a semana. Ele pode usar o seguinte loop para conseguir isso:

- -


-

- -

Um loop geralmente possui um ou mais dos seguintes itens:

- - - -

No seu {{glossary("pseudocode")}}, isso seria algo como o seguinte:

- -
loop(food = 0; foodNeeded = 10) {
-  if (food = foodNeeded) {
-    exit loop;
-    // Nós temos comida o suficiente, Vamos para casa
-  } else {
-    food += 2; // Passe uma hora coletando mais 2 alimentos(food)
-    // loop será executado novamente
-  }
-}
- -

Assim, a quantidade de comida necessária é fixada em 10, e o montante que o agricultor tem atualmente é fixado em 0. Em cada iteração do ciclo, verificamos se a quantidade de alimento que o agricultor tem é igual à quantidade que ele precisa. Se assim for, podemos sair do loop. Se não, o agricultor gasta mais uma hora coletando duas porções de comida, e o laço é executado novamente.

- -

Porque se importar?

- -

Neste ponto, você provavelmente já entendeu o conceito de alto nível por trás dos loops, mas provavelmente está pensando "OK, ótimo, mas como isso me ajuda a escrever um código JavaScript melhor?" Como dissemos anteriormente, os loops têm tudo a ver com fazer a mesma coisa repetidas vezes, o que é ótimo para concluir rapidamente tarefas repetitivas.

- -

Muitas vezes, o código será um pouco diferente em cada iteração sucessiva do loop, o que significa que você pode completar toda uma carga de tarefas que são semelhantes, mas não são totalmente iguais — se você tem muitos cálculos diferentes para fazer, e você quer fazer um diferente do outro, e não o mesmo repetidamente!

- -

Vejamos um exemplo para ilustrar perfeitamente por que os loops são uma coisa tão boa. Digamos que quiséssemos desenhar 100 círculos aleatórios em um elemento  {{htmlelement("canvas")}}  (pressione o botão Atualizar para executar o exemplo várias vezes para ver os conjuntos aleatórios diferentes):

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

Você não precisa entender todo esse código por enquanto, mas vamos ver a parte do código que realmente desenha os 100 círculos:

- -
for (var i = 0; i < 100; i++) {
-  ctx.beginPath();
-  ctx.fillStyle = 'rgba(255,0,0,0.5)';
-  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-  ctx.fill();
-}
- - - -

Você deve ter notado - estamos usando um loop para executar 100 iterações desse código, cada uma delas desenhando um círculo em uma posição aleatória na página. A quantidade de código necessária seria a mesma se estivéssemos desenhando 100 círculos, 1.000 ou 10.000. Apenas um número tem que mudar.

- -

Se não estivéssemos usando um loop aqui, teríamos que repetir o seguinte código para cada círculo que queríamos desenhar:

- -
ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
-ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();
- -

Isso ficaria muito chato, difícil e lento de manter. Loops são realmente os melhores.

- -

O for loop padrão

- -

Vamos começar a explorar alguns exemplos específicos de construções de loop. O primeiro e que você usará na maior parte do tempo, é o loop for - ele tem a seguinte sintaxe:

- -
for (inicializador; condição-saída; expressão-final) {
-  // código para executar
-}
- -

Aqui nós temos:

- -
    -
  1. A palavra-chave for, seguido por parênteses.
    2. -
  2. Dentro do parênteses temos três itens, sepados por ponto e vírgula: -
      -
    1. O inicializador— geralmente é uma variável configurada para um número, que é incrementado para contar o número de vezes que o loop foi executado. É também por vezes referido como uma variável de contador.
      2. -
    2. A condição-saída — como mencionado anteriormente, aqui é definido qundo o loop deve parar de executar. Geralmente, essa é uma expressão que apresenta um operador de comparação, um teste para verificar se a condição de saída foi atendida.
      3. -
    3. A expressão-final — isso sempre é avaliado (ou executado) cada vez que o loop passou por uma iteração completa. Geralmente serve para incrementar (ou, em alguns casos, decrementar) a variável do contador, aproximando-a do valor da condição de saída.
      4. -
    -
    3. -
  3. Algumas chaves contêm um bloco de código - esse código será executado toda vez que o loop for iterado.
    4. -
- -

Vejamos um exemplo real para podermos visualizar o que isso faz com mais clareza.

- -
var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-var info = 'My cats are called ';
-var para = document.querySelector('p');
-
-for (var i = 0; i < cats.length; i++) {
-  info += cats[i] + ', ';
-}
-
-para.textContent = info;
- -

Isso nos dá a seguinte saída:

- - - -

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

-
- -

Aqui mostra um loop sendo usado para iterar os itens em uma matriz e fazer algo com cada um deles - um padrão muito comum em JavaScript. Aqui:

- -
    -
  1. O iterador, i, começa em 0 (var i = 0).
    2. -
  2. Foi dito para executar até que não seja menor que o comprimento do array dos gatos. Isso é importante - a condição de saída mostra a condição sob a qual o loop ainda será executado. No caso, enquanto i < cats.length  for verdadeiro, o loop continuará executando.
    3. -
  3. Dentro do loop, nós concatenamos o item de loop atual (cats[i] é cats[o nome do item que está iterado no momento]) junto com uma vírgula e um espaço, no final da variável info . Assim: -
      -
    1. Durante a primeira execução, i = 0, então cats[0] + ', ' será concatenado na variável info ("Bill").
      2. -
    2. Durante a segunda execução, i = 1, so cats[1] + ', ' será concatenado na variável info ("Jeff, ")
      3. -
    3. E assim por diante. Após cada execução do loop, 1 será adicionado à i (i++), então o processo será iniciado novamente.
      4. -
    -
    4. -
  4. Quando i torna-se igual a cats.length, o loop é interrompido e o navegador passará para o próximo trecho de código abaixo do loop.
    5. -
- -
-

Nota:Nós fizemos a condição de saída i < cats.length, e não i <= cats.length, porque os computadores contam a partir de 0, não 1 - estamos começando i em 0, e indo até i = 4 (o index do último item do array). cats.length retorna 5, pois há 5 itens no array, mas não queremos chegar até  i = 5, pois isso retornaria  undefined para o último item (não há nenhum item  no índice 5 do array). Então, portanto, queremos ir até 1 a menos de  cats.length (i <), não é o mesmo que cats.length (i <=).

-
- -
-

Nota: Um erro comum nas condições de saída é usá-las "igual a" (===) em vez de dizer "menor ou igual a" (<=). Se quiséssemos executar nosso loop até  i = 5, a condição de saída precisaria ser  i <= cats.length. Se nós setarmos para  i === cats.length, o loop não seria executado em todos, porque  i não é igual a 5 na primeira iteração do loop, a execução pararia imediatamente.

-
- -

Um pequeno problema que nos resta é que a sentença de saída final não é muito bem formada:

- -
-

Meus gatos se chamam: Bill, Jeff, Pete, Biggles, Jasmin,

-
- -

Neste caso, queremos alterar a concatenação na iteração final do loop, para que não tenhamos uma vírgula no final da frase. Bem, não há problema - podemos muito bem inserir uma condicional dentro do nosso loop for para lidar com este caso especial:

- -
for (var i = 0; i < cats.length; i++) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-}
- -
-

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

-
- -
-

Importante: Com for - como acontece com todos os loops - você deve certificar-se de que o inicializador está iterado(configurado) para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente executando e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.

-
- -

Saindo do loop com o break

- -

Se você quiser sair de um loop antes que todas as iterações sejam concluídas, você poderá usar a instrução break. Nós já encontramos isso em um artigo anterior, quando observamos as instruções switch - quando um determinado caso é atendido em uma condição do switch e que corresponde à expressão de entrada informada, a instrução break sai imediatamente da instrução switch e passa para o trecho de código seguinte.

- -

É o mesmo com loops  — um comando  break  irá imediatamente sair do loop e fazer o navegador passar para o código seguinte.

- -

Digamos que quiséssemos pesquisar por uma variedade de contatos e números de telefone e retornar apenas o número que queríamos encontrar? Primeiro, algum HTML simples  — um texto {{htmlelement("input")}} permitindo-nos iserir um nome para pesquisar, {{htmlelement("button")}} elemento para submeter a pesquisa e um {{htmlelement("p")}} elemento para mostrar o resultado em:

- -
<label for="search">Search by contact name: </label>
-<input id="search" type="text">
-<button>Search</button>
-
-<p></p>
- -

Agora para no JavaScript:

- -
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-var para = document.querySelector('p');
-var input = document.querySelector('input');
-var btn = document.querySelector('button');
-
-btn.addEventListener('click', function() {
-  var searchName = input.value;
-  input.value = '';
-  input.focus();
-  for (var i = 0; i < contacts.length; i++) {
-    var splitContact = contacts[i].split(':');
-    if (splitContact[0] === searchName) {
-      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
-      break;
-    } else {
-      para.textContent = 'Contact not found.';
-    }
-  }
-});
- - - -

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. Primeiramente, temos algumas definições de variáveis —  temos um array com as informações dos contatos, cada item é uma string e contém um nome e um número de telefone separados por dois pontos.
    2. -
  2. Em seguida, anexamos um ouvinte de evento ao botão (btn),  de modo que quando ele é pressionado, algum código é invocado para executar a pesquisa e retornar os resultados.
    3. -
  3. Armazenamos o valor que foi inserido no input de texto em uma variável chamada  searchName, antes de limpar a entrada de texto e focar novamente, deixando o campo pronto para a próxima pesquisa.
    4. -
  4. Agora, na parte interessante, o loop for: -
      -
    1. Iniciamos o contador em 0, executamos o loop até que o contador não seja menor que  contacts.length, e incrementamos i com 1 depois e cada iteração do loop.
      2. -
    2. Dentro do loop, primeiro dividimos o contato atual (contacts[i]) no caractere " : " e armazenamos os dois valores resultantes em uma matriz chamada  splitContact.
      3. -
    3. Em seguida, usamos uma instrução condicional para testar se o  splitContact[0] (nome do contato) é igual ao  searchName. Se for igual, inserimos uma string no parágrafo para mostrar em tela qual é o número do contato e usamos o break para encerrar o loop.
      4. -
    -
    5. -
  5. -

    Após (contacts.length-1) iterações, se o nome do contato não corresponder à pesquisa inserida, o texto do parágrafo será definido como "Contato não encontrado" e o loop continuará a iterar.

    -
    6. -
- -
-

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

-
- -

Ignorando iterações com continue

- -

A instrução continue funciona de maneira semelhante ao  break, mas ao invés de sair inteiramente do loop, ele pula para a próxima iteração do loop. Vejamos outro exemplo que usa um número como entrada e retorna apenas os números que são quadrados de inteiros (números inteiros).

- -

O HTML é basicamente o mesmo do último exemplo - uma entrada de texto simples e um parágrafo para saída. O JavaScript é basicamente o mesmo, embora o próprio loop seja um pouco diferente:

- -
var num = input.value;
-
-for (var i = 1; i <= num; i++) {
-  var sqRoot = Math.sqrt(i);
-  if (Math.floor(sqRoot) !== sqRoot) {
-    continue;
-  }
-
-  para.textContent += i + ' ';
-}
- -

Aqui está a saída:

- - - -

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. Nesse caso, a entrada deve ser um número (num). O loop for recebe um contador começando em 1 (como não estamos interessados em 0 neste caso), uma condição de saída que diz que o loop irá parar quando o contador se tornar maior que o input num, e um iterador que adiciona 1 ao contador a cada vez.
    2. -
  2. Dentro do loop, encontramos a raiz quadrada de cada número usando Math.sqrt(i), e, em seguida, verificamos se a raiz quadrada é um inteiro, testando se é igual a ela mesma quando foi arredondada para o inteiro mais próximo é o que Math.floor() faz com o número que é passado).
    3. -
  3. Se a raiz quadrada e a raiz quadrada arredondada não forem iguais (! ==), isso significa que a raiz quadrada não é um número inteiro, portanto, não estamos interessados nela. Nesse caso, usamos a instrução continue para pular para a próxima iteração de loop sem registrar o número em nenhum lugar.
    4. -
  4. Se a raiz quadrada é um inteiro, nós pulamos o bloco if inteiramente para que a instrução continue não seja executada; em vez disso, concatenamos o valor i atual mais um espaço até o final do conteúdo do parágrafo.
    5. -
- -
-

Note: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

-
- -

while e o do ... while

- -

for não é o único tipo de loop disponível em JavaScript. Na verdade, existem muitos outros, embora você não precise entender tudo isso agora, vale a pena dar uma olhada na estrutura dos outros tipos de loops para que você possa reconhecer a mesma lógica na funcionalidade porém empregada de uma forma diferente.

- -

Primeiro, vamos dar uma olhada no while loop. A sintaxe deste loop é assim:

- -
inicializador
-while (condição-saída) {
-  // code to run
-
-  expressão-final
-}
- -

While funciona de maneira muito semelhante ao loop for, exceto que a variável inicializadora é definida antes do loop, e a expressão final é incluída dentro do loop após o código a ser executado - em vez de esses dois itens serem incluídos dentro dos parênteses. A condição de saída está incluída dentro dos parênteses, que são precedidos pela palavra-chave while e não por for.

- -

Os mesmos três itens ainda estão presentes, e eles ainda são definidos na mesma ordem do loop for - isso faz sentido, já que você ainda precisa ter um inicializador definido antes de poder verificar se ele atingiu a condição de saída ; a condição final é então executada após o código dentro do loop ser executado (uma iteração foi concluída), o que só acontecerá se a condição de saída ainda não tiver sido atingida.

- -

Vamos dar uma olhada novamente no nosso exemplo de lista de gatos, que reescrevemos para usar um loop while:

- -
var i = 0;
-
-while (i < cats.length) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-}
- -
-

Nota: Isso ainda funciona da mesma forma esperada — dê uma olhada no código em execução  (também veja o código fonte completo).

-
- -

O do...while loop é muito semelhante, mas fornece uma variação na estrutura while:

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

Nesse caso, o inicializador novamente vem em primeiro lugar, antes que o loop seja iniciado. A palavra-chave precede diretamente as chaves que contêm o código a ser executado e a expressão final.

- -

O diferenciador aqui é que a condição de saída vem depois de todo o resto, envolvida em parênteses e precedida por uma palavra-chave while. Em um loop do ... while, o código dentro das chaves é sempre executado uma vez antes da verificação ser feita para ver se deve ser executada novamente (no while e para, a verificação vem primeiro, então o código pode nunca ser executado ).

- -

Vamos reescrever nosso exemplo de listagem de gato novamente para usar um loop do ... while:

- -
var i = 0;
-
-do {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-} while (i < cats.length);
- -
-

Nota: Novamente, isso funciona exatamente como esperado - dê uma olhada nele executando no GitHub (veja também o código fonte completo).

-
- -
-

Importante: Com while e do ... while - como em todos os loops - você deve certificar-se de que o inicializador esteja iterado para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.

-
- -

Aprendizado ativo: contagem regressiva!

- -

Nesse exercício, nós queremos que você imprima uma simples contagem regressiva na caixa de saída, de 10 até terminar. Especificamente, queremos que você:

- - - -

Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.

- - - -

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

- -

Aprendizado ativo: preenchendo uma lista de convidados

- -

Nesse exercício, nós queremos que você pegue uma lista de nomes armazenados em um array, e os coloque em uma lista de convidados. Mas não tão fácil — nós não queremos que Phil e Lola estejam nela porque eles são gananciosos e rudes, e sempre comem a comida toda! Nós temos duas listas, uma para convidados aceitos, e uma para convidados recusados.

- -

Especificamente, nós queremos que você:

- - - -

Nós já fornecemos a você:

- - - -

Questão bônus extra  — depois de completar as tarefas acima com sucesso, você terá duas listas de nomes, separados por vírgulas, mas eles estarão desarrumados — haverá uma vírgula no final decada um. Você pode descobrir como escrever linhas que que cortam a última vírgula em cada caso, e adicionar um ponto final? Dê uma olhada no artigo Métodos úteis de string para ajuda.

- -

Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.

- - - -

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

- -

Which loop type should you use?

- -

For basic uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.

- -

First for:

- -
for (initializer; exit-condition; final-expression) {
-  // code to run
-}
- -

while:

- -
initializer
-while (exit-condition) {
-  // code to run
-
-  final-expression
-}
- -

and finally do...while:

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

Nós recomendamos o uso do for, pelo menos no começo, já que ele é provavelmente a forma mais fácil de lembrar de tudo  — o inicializador, a condição de saída, e a expressão final final tudo fica ordenadamente dentro dos parênteses, então é fácil de ver onde eles estão e para verifcar se você não os esqueceu.

- -
-

Note: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced Loops and iteration guide.

-
- -

Conclusion

- -

This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!

- -

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html deleted file mode 100644 index dd6e41f674..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html +++ /dev/null @@ -1,582 +0,0 @@ ---- -title: Introdução a eventos -slug: Aprender/JavaScript/Elementos_construtivos/Events -tags: - - Aprender - - Artigo - - Guía - - Iniciante - - JavaScript - - Programando - - eventos -translation_of: Learn/JavaScript/Building_blocks/Events ---- -
-
{{LearnSidebar}}
-
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

Eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo, no qual este te alerta sobre essas ações para que você possa responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um botão numa pagina web, você pode querer responder a esta ação mostrando na tela uma caixa de informações. Nesse artigo, nós iremos discutir sobre alguns conceitos importantes envolvendo eventos, e veremos como eles funcionam nos browsers. Isto não será algo cansativo para estudar; somente o que você precisar saber até agora.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimentos básicos em informática, conhecimento básico em HTML e CSS,  JavaScript, primeiros passos.
Objetivo:Entender a teoria fundamentos dos eventos, como eles funcionam nos browsers, e como eventos podem ser diferentes dependendo do ambiente de desenvolvimento.
- -

Aventuras em Série

- -

Como mencionado acima, eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo — o sistema irá disparar algum tipo de sinal quando o evento acontecer, além de prover um mecanismo pelo qual alguma ação automática possa ser executada (ou seja, rodar algum código) quando o evento ocorrer. Por exemplo, em um aeroporto, quando a pista está livre para um avião decolar, um sinal é repassado ao piloto, e como resultado, ele inicia a decolagem.

- -

- -

No caso da web, eventos são disparados dentro da janela do navegador, e tende a estarem anexados a algum item especifico nele — pode ser um único elemento, um conjunto de elementos, o HTML carregado na guia atual, ou toda a janela do navegador. Existem vários tipos diferentes de eventos que podem vir a acontecer, por exemplo:

- - - -

Você vai perceber com isso (e dando uma olhada no Event reference MDN) que há uma série de eventos que podem  ser utilizados.

- -

Cada evento disponivel possui um manipulador de eventos (event handler), que é um bloco de código (geralmente uma função JavaScript definida pelo usuário) que será executado quando o evento for disparado. Quando esse bloco de código é definido para rodar em resposta a um evento que foi disparado, nós dizemos que estamos registrando um manipulador de eventos. Note que manipuladores de eventos são, em alguns casos, chamados de ouvinte de eventos (event listeners) — eles são praticamente intercambiáveis para nossos propósitos, embora estritamente falando, eles trabalhem juntos. Os ouvintes escutam o evento acontecendo, e o manipulador é o codigo que roda em resposta a este acontecimento.

- -
-

Nota: É importante notar que eventos web não são parte do core da linguagem JavaScript — elas são definidas como parte das APIs JavaScript incorporadas ao navegador.

-
- -

Um exemplo simples

- -

Vamos dar uma olhada em um simples exemplo para explicar o que nós queremos dizer aqui. Você já viu eventos e manipuladores de eventos sendo utilizados na maioria dos exemplos deste curso até agora, mas vamos recapitular somente para cimentar nosso conhecimento. No exemplo a seguir, nós temos um simples {{htmlelement("button")}} que quando pressionado, irá fazer com que o fundo mude para uma cor aleatória:

- -
<button>Change color</button>
- - - -

O JavaScript seria algo como:

- -
var btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random()*(number+1));
-}
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

Nesse código, nós guardamos uma referência ao botão dentro de uma variável chamada btn, usando a função {{domxref("Document.querySelector()")}}. Também definimos uma função que retorna um número aleatório. A terceira parte do código é o manipulador de eventos. A variável btn aponta para um elemento <button>, e esse tipo de objeto tem um número de eventos que podem ser disparados nele, assim sendo, manipuladores de eventos estão disponíveis.

- -

Esse código rodará sempre que o evento de clique for disparado pelo elemento <button>, isto é, sempre que um usuário clicar nele.

- -

Um exemplo de saída seria:

- -

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

- -

Não são apenas paginas da web

- -

Outra coisa que vale mencionar a esse ponto é que eventos não são exclusivos ao JavaScript — muitas linguagens de programação possuem algum tipo de modelo de evento, e a maneira que elas funcionam irão, frequentemente, diferenciar-se da maneira que funciona em JavaScript. De fato, o modelo de evento no JavaScript para web pages difere dos outros modelos de evento do próprio JavaScript quando usados em outros ambientes.

- -

Por exemplo, Node.js é um interpretador de código JavaScript muito popular que permite desenvolvedores a usarem JavaScript para construir aplicações de rede e do lado do servidor. O Node.js event model depende dos ouvintes para escutar eventos e emissores para emitir eventos periodicamente. — não parece tão diferente, mas o código é bem diferente, fazendo uso de funções como on() para registrar um ouvinte de evento e  once() para registrar um ouvinte de evento que cancela o registro depois de ter sido executado uma vez. Os Documentos do evento de conexão HTTP fornecem um bom exemplo de uso.

- -

Como outro exemplo, agora você também pode usar o JavaScript para criar complementos entre navegadores — aprimoramentos da funcionalidade do navegador — usando uma tecnologia chamada WebExtensions. O modelo de eventos é semelhante ao modelo de eventos da Web, mas um pouco diferente — as propriedades dos event listeners são camel-cased, onde cada palavra é iniciada com maiúsculas e unidas sem espaços (por exemplo, onMessage em vez de onmessage), e precisam ser combinadas com a função addListener. Veja a página runtime.onMessage para um exemplo.

- -

Você não precisa entender nada sobre outros ambientes nesse estágio do aprendizado; nós só queríamos deixar claro que os eventos podem diferir em diferentes ambientes de programação.

- -

Formas de usar eventos da web

- -

Há várias maneiras diferentes de adicionar código de ouvinte de evento a páginas da Web para que ele seja executado quando o evento associado for disparado. Nesta seção, revisaremos os diferentes mecanismos e discutiremos quais devem ser usados.

- -

Propriedades do manipulador de eventos

- -

Essas são as propriedades que existem para conter o código do manipulador de eventos que vimos com mais frequência durante o curso. Voltando ao exemplo acima:

- -
var btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

A propriedade onclick é a propriedade do manipulador de eventos que está sendo usada nesta situação. É essencialmente uma propriedade como qualquer outra disponível no botão (por exemplo, btn.textContent, ou btn.style), mas é um tipo especial — quando você configura para ser igual a algum código, esse código será executado quando o evento é acionado no botão.

- -

Você também pode definir a propriedade handler para ser igual a um nome de função nomeado (como vimos em Construa sua própria função). O seguinte funcionaria da mesma forma:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

Há muitas propriedades diferentes de manipulador de eventos disponíveis. Vamos fazer um experimento.

- -

Primeiro de tudo, faça uma cópia local do random-color-eventhandlerproperty.html, e abra-o no seu navegador. É apenas uma cópia do exemplo de cor aleatória simples com o qual já estamos jogando neste artigo. Agora tente alterar btn.onclick para os seguintes valores diferentes, por sua vez, e observando os resultados no exemplo:

- - - -

Alguns eventos são muito gerais e estão disponíveis praticamente em qualquer lugar (por exemplo, um manipulador  onclick pode ser registrado em quase qualquer elemento), enquanto alguns são mais específicos e úteis apenas em certas situações (por exemplo, faz sentido usar onplay apenas em elementos específicos, como {{htmlelement("video")}}).

- -

Manipuladores de eventos in-line - não use esses

- -

Você também pode ver um padrão como este em seu código:

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

Nota:  Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

-
- -

O método mais antigo de registrar manipuladores de eventos encontrados na Web envolveu atributos HTML de manipulador de eventos (também conhecidos como manipuladores de eventos inline) como o mostrado acima — o valor do atributo é literalmente o código JavaScript que você deseja executar quando o evento ocorre. O exemplo acima chama uma função definida dentro de um elemento {{htmlelement("script")}} na mesma página, mas você também pode inserir JavaScript diretamente dentro do atributo, por exemplo:

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

Você encontrará equivalentes de atributo HTML para muitas das propriedades do manipulador de eventos; no entanto, você não deve usá-los — eles são considerados uma prática ruim. Pode parecer fácil usar um atributo manipulador de eventos se você estiver apenas fazendo algo realmente rápido, mas eles se tornam rapidamente incontroláveis e ineficientes.

- -

Para começar, não é uma boa ideia misturar o seu HTML e o seu JavaScript, pois é difícil analisar — manter seu JavaScript em um só lugar é melhor; se estiver em um arquivo separado, você poderá aplicá-lo a vários documentos HTML.

- -

Mesmo em um único arquivo, os manipuladores de eventos in-line não são uma boa ideia. Um botão está OK, mas e se você tivesse 100 botões? Você teria que adicionar 100 atributos ao arquivo; isso rapidamente se tornaria um pesadelo de manutenção. Com JavaScript, você poderia facilmente adicionar uma função de manipulador de eventos a todos os botões da página, não importando quantos fossem, usando algo assim:

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -
-

Nota: Separar sua lógica de programação do seu conteúdo também torna seu site mais amigável aos mecanismos de pesquisa.

-
- -

addEventListener() e removeEventListener()

- -

O mais novo tipo de mecanismo de evento é definido na Especificação de Eventos Nível 2 do Document Object Model (DOM), que fornece aos navegadores uma nova função — addEventListener(). Isso funciona de maneira semelhante às propriedades do manipulador de eventos, mas a sintaxe é obviamente diferente. Poderíamos reescrever nosso exemplo de cor aleatória para ficar assim:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Nota: Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

-
- -

Dentro da função addEventListener(), especificamos dois parâmetros — o nome do evento para o qual queremos registrar esse manipulador, e o código que compreende a função do manipulador que queremos executar em resposta a ele. Note que é perfeitamente apropriado colocar todo o código dentro da função addEventListener(), em uma função anônima, assim:

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

Esse mecanismo tem algumas vantagens sobre os mecanismos mais antigos discutidos anteriormente. Para começar, há uma função de contraparte, removeEventListener(), que remove um listener adicionado anteriormente. Por exemplo, isso removeria o listener definido no primeiro bloco de código nesta seção:

- -
btn.removeEventListener('click', bgChange);
- -

Isso não é significativo para programas pequenos e simples, mas para programas maiores e mais complexos, pode melhorar a eficiência para limpar antigos manipuladores de eventos não utilizados. Além disso, por exemplo, isso permite que você tenha o mesmo botão executando ações diferentes em circunstâncias diferentes — tudo o que você precisa fazer é adicionar / remover manipuladores de eventos conforme apropriado.

- -

Em segundo lugar, você também pode registrar vários manipuladores para o mesmo ouvinte. Os dois manipuladores a seguir não seriam aplicados:

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

Como a segunda linha sobrescreveria o valor de  onclick definido pelo primeiro. Isso funcionaria, no entanto:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Ambas as funções serão executadas quando o elemento for clicado.

- -

Além disso, há vários outros recursos e opções poderosos disponíveis com esse mecanismo de eventos. Estes são um pouco fora do escopo deste artigo, mas se você quiser ler sobre eles, dê uma olhada nas páginas de referência addEventListener() e removeEventListener().

- -

Qual mecanismo devo usar?

- -

Dos três mecanismos, você definitivamente não deve usar os atributos do manipulador de eventos HTML — estas são desatualizadas e más práticas, como mencionado acima.

- -

Os outros dois são relativamente intercambiáveis, pelo menos para usos simples:

- - - -

As principais vantagens do terceiro mecanismo são que você pode remover o código do manipulador de eventos, se necessário, usando removeEventListener(), e você pode adicionar vários listeners do mesmo tipo aos elementos, se necessário. Por exemplo, você pode chamar addEventListener('click', function() { ... }) em um elemento várias vezes, com diferentes funções especificadas no segundo argumento. Isso é impossível com as propriedades do manipulador de eventos porque qualquer tentativa subseqüente de definir uma propriedade sobrescreverá as anteriores, por exemplo:

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Nota: Se você for chamado para oferecer suporte a navegadores anteriores ao Internet Explorer 8 em seu trabalho, poderá encontrar dificuldades, pois esses navegadores antigos usam modelos de eventos diferentes dos navegadores mais recentes. Mas não tenha medo, a maioria das bibliotecas JavaScript (por exemplo, jQuery) tem funções internas que abstraem as diferenças entre navegadores. Não se preocupe muito com isso neste estágio de sua jornada de aprendizado.

-
- -

Outros conceitos de evento

- -

Nesta seção, abordaremos brevemente alguns conceitos avançados que são relevantes para os eventos. Não é importante entendê-las totalmente neste momento, mas pode servir para explicar alguns padrões de código que você provavelmente encontrará ao longo do tempo.

- -

Objetos de evento

- -

Às vezes, dentro de uma função de manipulador de eventos, você pode ver um parâmetro especificado com um nome como event, evt, ou simplesmente e. Isso é chamado de event object, e é passado automaticamente para os manipuladores de eventos para fornecer recursos e informações extras. Por exemplo, vamos reescrever nosso exemplo de cor aleatória novamente:

- -
function bgChange(e) {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Nota: Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

-
- -

Aqui você pode ver que estamos incluindo um objeto de evento, e, na função, e na função definindo um estilo de cor de fundo em e.target — que é o próprio botão. A propriedade target do objeto de evento é sempre uma referência ao elemento em que o evento acabou de ocorrer. Portanto, neste exemplo, estamos definindo uma cor de fundo aleatória no botão, não na página.

- -
-

Note: Você pode usar qualquer nome que desejar para o objeto de evento — você só precisa escolher um nome que possa ser usado para referenciá-lo dentro da função de manipulador de eventos. e/evt/event são mais comumente usados pelos desenvolvedores porque são curtos e fáceis de lembrar. É sempre bom manter um padrão.

-
- -

e.target é incrivelmente útil quando você deseja definir o mesmo manipulador de eventos em vários elementos e fazer algo com todos eles quando ocorre um evento neles. Você pode, por exemplo, ter um conjunto de 16 blocos que desaparecem quando são clicados. É útil poder sempre apenas definir a coisa para desaparecer como e.target, ao invés de ter que selecioná-lo de alguma forma mais difícil. No exemplo a seguir (veja useful-eventtarget.html para o código-fonte completo; veja também a execução ao vivo aqui), criamos 16 elementos {{htmlelement("div")}} usando JavaScript. Em seguida, selecionamos todos eles usando {{domxref("document.querySelectorAll()")}}  e, em seguida, percorremos cada um deles, adicionando um manipulador onclick a cada um, de modo que uma cor aleatória seja aplicada a cada um deles quando clicados:

- -
var divs = document.querySelectorAll('div');
-
-for (var i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

A saída é a seguinte (tente clicar em cima — divirta-se):

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

A maioria dos manipuladores de eventos que você encontrará apenas tem um conjunto padrão de propriedades e funções (métodos) disponíveis no objeto de evento (consulte a referência de objeto {{domxref("Event")}} para obter uma lista completa). Alguns manipuladores mais avançados, no entanto, adicionam propriedades especializadas contendo dados extras que precisam para funcionar. A Media Recorder API, por exemplo, tem um evento dataavailable que é acionado quando algum áudio ou vídeo é gravado e está disponível para fazer algo com (por exemplo, salvá-lo ou reproduzi-lo). O objeto de evento do manipulador correspondente ondataavailable tem uma propriedade de dados disponível contendo os dados de áudio ou vídeo gravados para permitir que você acesse e faça algo com ele.

- -

Evitando o comportamento padrão

- -

Às vezes, você se deparará com uma situação em que deseja interromper um evento fazendo o que ele faz por padrão. O exemplo mais comum é o de um formulário da Web, por exemplo, um formulário de registro personalizado. Quando você preenche os detalhes e pressiona o botão Enviar, o comportamento natural é que os dados sejam enviados para uma página específica no servidor para processamento, e o navegador seja redirecionado para uma página de "mensagem de sucesso" de algum tipo (ou a mesma página, se outra não for especificada.)

- -

O problema surge quando o usuário não submete os dados corretamente - como desenvolvedor, você deve interromper o envio para o servidor e fornecer uma mensagem de erro informando o que está errado e o que precisa ser feito para corrigir as coisas. Alguns navegadores suportam recursos automáticos de validação de dados de formulário, mas como muitos não oferecem isso, é recomendável não depender deles e implementar suas próprias verificações de validação. Vamos dar uma olhada em um exemplo simples.

- -

Primeiro, um formulário HTML simples que requer que você digite seu primeiro e último nome:

- -
<form>
-  <div>
-    <label for="fname">First name: </label>
-    <input id="fname" type="text">
-  </div>
-  <div>
-    <label for="lname">Last name: </label>
-    <input id="lname" type="text">
-  </div>
-  <div>
-     <input id="submit" type="submit">
-  </div>
-</form>
-<p></p>
- - - -

Agora algum JavaScript — aqui nós implementamos uma verificação muito simples dentro de um manipulador de evento onsubmit (o evento submit é disparado em um formulário quando é enviado) que testa se os campos de texto estão vazios. Se estiverem, chamamos a função preventDefault() no objeto de evento — que interrompe o envio do formulário — e, em seguida, exibir uma mensagem de erro no parágrafo abaixo do nosso formulário para informar ao usuário o que está errado:

- -
var form = document.querySelector('form');
-var fname = document.getElementById('fname');
-var lname = document.getElementById('lname');
-var submit = document.getElementById('submit');
-var para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
-  }
-}
- -

Obviamente, isso é uma validação de forma bastante fraca — ela não impediria o usuário de validar o formulário com espaços ou números inseridos nos campos, por exemplo — mas está tudo bem, por exemplo. A saída é a seguinte:

- -

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: para o código fonte completo, veja preventdefault-validation.html (também veja isso executando em tempo real aqui.)

-
- -

Borbulhamento e captura de eventos

- -

O assunto final a ser abordado aqui é algo que você não encontrará com frequência, mas pode ser uma dor real se você não entender. Borbulhamento e captura de eventos são dois mecanismos que descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento. Vamos dar uma olhada em um exemplo para facilitar isso — abra o exemplo show-video-box.html em uma nova guia (e o código-fonte em outra guia). Ele também está disponível ao vivo abaixo:

- - - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

- -

Este é um exemplo bastante simples que mostra e oculta um {{htmlelement("div")}} com um elemento {{htmlelement("video")}} dentro dele:

- -
<button>Display video</button>
-
-<div class="hidden">
-  <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-  </video>
-</div>
- -

Quando o {{htmlelement("button")}} é clicado, o vídeo é exibido, alterando o atributo de classe em <div> de hidden para showing (o CSS do exemplo contém essas duas classes, que posicione a caixa fora da tela e na tela, respectivamente):

- -
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

Em seguida, adicionamos mais alguns manipuladores de eventos onclick — o primeiro ao <div> e o segundo ao <video>. A ideia é que, quando a área do <div> fora do vídeo for clicada, a caixa deve ser ocultada novamente; quando o vídeo em si é clicado, o vídeo deve começar a tocar.

- -
videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

Mas há um problema — atualmente, quando você clica no vídeo, ele começa a ser reproduzido, mas faz com que o <div> também fique oculto ao mesmo tempo. Isso ocorre porque o vídeo está dentro do <div> — é parte dele — portanto, clicar no vídeo realmente executa os dois manipuladores de eventos acima.

- -

Borbulhando e capturando explicados

- -

Quando um evento é acionado em um elemento que possui elementos pai (por exemplo, o {{htmlelement("video")}} no nosso caso), os navegadores modernos executam duas fases diferentes — a fase de  captura e a fase de bubbling.

- -

Na fase de captura:

- - - -

Na fase de bubbling, ocorre exatamente o oposto:

- - - -

- -

(Clique na imagem para um diagrama maior)

- -

Nos navegadores modernos, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling. Portanto, em nosso exemplo atual, quando você clica no vídeo, o evento de clique passa do elemento <video> para o elemento <html> Pelo caminho:

- - - -

Corrigindo o problema com stopPropagation()

- -

Este é um comportamento irritante, mas existe uma maneira de corrigir isso! O objeto de evento padrão tem uma função disponível chamada stopPropagation(), que quando invocada no objeto de evento de um manipulador, faz com que o manipulador seja executado, mas o evento não borbulha mais acima na cadeia, portanto, mais nenhum manipulador rodará.

- -

Podemos, portanto, consertar nosso problema atual alterando a segunda função do manipulador no bloco de códigos anterior para isto:

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

Você pode tentar fazer uma cópia local do código-fonte show-video-box.html source code e tentar corrigi-lo sozinho, ou observar o resultado corrigido em show-video-box-fixed.html (veja também o código-fonte aqui).

- -
-

Nota: Por que se preocupar em capturar e borbulhar? Bem, nos velhos tempos em que os navegadores eram muito menos compatíveis entre si do que são agora, o Netscape usava apenas captura de eventos, e o Internet Explorer usava apenas borbulhamento de eventos. Quando o W3C decidiu tentar padronizar o comportamento e chegar a um consenso, eles acabaram com esse sistema que incluía ambos, que é o único navegador moderno implementado.

-
- -
-

Note: Como mencionado acima, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling, e isso faz mais sentido na maioria das vezes. Se você realmente quiser registrar um evento na fase de captura, registre seu manipulador usando addEventListener(), e defina a propriedade terceira opcional como true.

-
- -

Delegação de eventos

- -

O borbulhar também nos permite aproveitar a delegação de eventos — esse conceito depende do fato de que, se você quiser que algum código seja executado quando clicar em qualquer um de um grande número de elementos filho, você pode definir o ouvinte de evento em seu pai e ter os eventos que acontecem neles confluem com o pai, em vez de precisar definir o ouvinte de evento em cada filho individualmente.

- -

Um bom exemplo é uma série de itens de lista — Se você quiser que cada um deles apareça uma mensagem quando clicado, você pode definir o ouvinte de evento click no pai <ul>,  e ele irá aparecer nos itens da lista.

- -

Este conceito é explicado mais adiante no blog de David Walsh, com vários exemplos — veja Como funciona a delegação de eventos em JavaScript.

- -

Conclusão

- -

Agora você deve saber tudo o que precisa saber sobre os eventos da Web nesse estágio inicial. Como mencionado acima, os eventos não são realmente parte do núcleo do JavaScript — eles são definidos nas APIs da Web do navegador.

- -

Além disso, é importante entender que os diferentes contextos nos quais o JavaScript é usado tendem a ter diferentes modelos de evento — de APIs da Web a outras áreas, como WebExtensions de navegador e Node.js (JavaScript do lado do servidor). Não esperamos que você entenda todas essas áreas agora, mas certamente ajuda a entender os fundamentos dos eventos à medida que você avança no aprendizado do desenvolvimento da web.

- -

Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente, ou entre em contato conosco para pedir ajuda.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html deleted file mode 100644 index 05e9ffcfea..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Funções — blocos reutilizáveis de código -slug: Aprender/JavaScript/Elementos_construtivos/Functions -translation_of: Learn/JavaScript/Building_blocks/Functions ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
- -

Outro conceito essencial em código é função, que permitem que você armazene um pedaço de código que realiza uma simples tarefa dentro de um bloco, e então chama aquele código sempre que você precisar usá-lo com um curto comando — em vez de ter que escrever o mesmo código multiplas vezes. Neste artigo nós vamos explorar conceitos fundamentais por trás  das funções como sintaxe básica, como invocá-las e defini-las, escopo, e parâmetros.

- - - - - - - - - - - - -
Prerequisitos:Infrmática básica, um entendimento básico de HTML e CSS, Primeiros passos em JavaScript.
Objetivo:Entender conceitos fundamentais por trás das funções em JavaScript.
- -

Onde eu encontro funções?

- -

Em JavaScript, você encontrará funções em todos os lugares, de fato, nós vamos usar funções ao longo de todo o curso; nós só não falaremos sobre elas em damasia. Agora está na hora, contudo, para falarmos sobre funções explicitamente, e realmente explorar sua sintaxe.

- -
-
Praticamente sempre que você faz uso de um uma estrutura JavaScript em que tem um par de parenteses — () — e você não está usando uma estrutura  embutida da linguagem como um for loop, while or do...while loop, ou if...else statement, você está fazendo uso de uma função.
-
- -

Funções embutidas do navegador

- -

Nós fizemos bastante uso de funções embutidas do navegador neste curso. Toda vez que manipulamos uma string de texto, por exemplo:

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// the replace() string function takes a string,
-// replaces one substring with another, and returns
-// a new string with the replacement made
- -

Ou toda vez que manipulamos uma lista:

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-console.log(madeAString);
-// the join() function takes an array, joins
-// all the array items together into a single
-// string, and returns this new string
- -

Ou toda vez que nós geramos um número aleatório:

- -
var myNumber = Math.random();
-// the random() function generates a random
-// number between 0 and 1, and returns that
-// number
- -

...nós usamos uma função!

- -
-

Nota: Fique a vontade para inserir essas linhas no console JavaScript do navegador para refamiliarizar-se com suas funcionalidades, se necessário.

-
- -

A linguagem JavaScript tem muitas funções embutidas que o permitem fazer coisas úteis sem que você mesmo tenha que escrever aquele código. De fato, alguns dos códigos que você está chamando quando você invoca (uma palavra rebuscada para rodar, ou executar) uma função embutida de navegador não poderia ser escrita em JavaScript — muitas dessa funções são chamadas a partes de código base do navegador, que é escrita grandemente em linguages de sistema de baixo nível como C++, não linguagem Web como JavaScript.

- -

Tenha em mente que algumas funções embutidas de navegador não são parte do core da linguagem JavaScript — algumas são definidas como partes de APIs do navegador, que são construídas no topo da linguagem padão para prover ainda mais funcionalidades (recorra a esta seção inicial de nosso curso para mais descrições). Nós olharemos o uso de APIs de navegador em mais detalhes em um módulo posterior.

- -

Funções versus métodos

- -

Uma coisas que devemos esclarecer antes de seguir em frente — tecnicamente falando, funções embutidas de navegador não são funções — elas são métodos. Isso pode soar um pouco assustador e confuso, mas não se preocupe — as palavras funções e métodos são largamente intercambeáveis, ao menos para nossos propósitos, neste estágio de nosso aprendizado.

- -

A distinção é que métodos são funções definidas dentro de objetos. Funções embutidas de navegador (métodos) e variáveis (que são chamadas propriedades) são armazenadas dentro de objetos estruturados, para tornar o código mais estruturado e fácil de manipular.

- -

Você não precisa aprender sobre o funcionamento interno de objetos estruturados em JavaScript ainda — você pode esperar nosso módulo posterior que ensinará tudo sobre funcionamento interno de objetos, e como criar o seu próprio. Por hora, nós só queremos esclarecer qualquer confusão possível de método versus função — é provável que você encontre ambos termos enquanto você olhar os recursos disponível pela  Web.

- -

Funções personalizadas

- -

Nós vimos também várias funções personalizadas no curso até agora — funções definidas em seu código, não dentro do navegador. Sempre que você viu um nome personalizado com parênteses logo após ele, você estava usando funções personalizadas. em nosso exemplo random-canvas-circles.html (veja também o código fonte completo) de nosso loops article, nós incluimos a função personalizada draw() que era semelhante a essa:

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i < 100; i++) {
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
- -

Esta função desenha 100 círculos aleatórios dentro de um elemento {{htmlelement("canvas")}}. Toda vez que queremos fazer isso, nós podemos simplesmente invocar a função com isto

- -
draw();
- -

ao invés de ter que escrever todo o código novamente todas as vezes que queremos repetí-lo. E funções podem conter qualquer código que você gosta — você pode até chamar outra função dentro das funções. A função acima por exemplo chama a função random() três vezes, o qual é definido pelo seguinte código:

- -
function random(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Nós precisamos desta função porque a função embutida do navegadorMath.random() só gera números decimais aleatórios entre 0 e 1. Nós queriamos um número aleatório inteiro entre 0 e um número especificado.

- -

Invocando funções

- -

Provavelmente você já tem conhecimento sobre iso agora, mas... para realmente usar uma função depois dela ter sido definida, você tem que rodá-la — ou invocá-la. Isso é feito ao se incluir o nome da função em algum lugar do código, seguido por parênteses.

- -
function myFunction() {
-  alert('hello');
-}
-
-myFunction()
-// Chama a função um vez
- -

Funções anônimas

- -

Você viu funções definidas e invocadas de maneiras ligeiramente diferentes. Até agora nós só criamos funções como esta:

- -
function myFunction() {
-  alert('hello');
-}
- -

Mas você também pode criar funções que não tem nome:

- -
function() {
-  alert('hello');
-}
- -

Isto é chamado Função anônima — não tem nome! E também não fará nada em si mesma. Você geralmente cria funções anônimas junto com um  manipulador de eventos, o exemplo a seguir poderia rodar o código dentro da função sempre que o botão associado é clicado:

- -
var myButton = document.querySelector('button');
-
-myButton.onclick = function() {
-  alert('hello');
-}
- -

O exemplo acima requer que exista um elemento {{htmlelement("button")}} diponível na página para selecionar e clicar. Você já viu essa estrutura algumas vezes ao longo do curso, e aprenderá mais a respeito disso e o verá no próximo artigo.

- -

Voce também pode atribuir uma função anônima para ser o valor de uma variável, por exemplo:

- -
var myGreeting = function() {
-  alert('hello');
-}
- -

Esta função agora poder ser invocada usando:

- -
myGreeting();
- -

Isso dá efetivamente um nome a função; você também pode atribuir uma função para ser o valor de múltiplas variáveis , por exemplo:

- -
var anotherGreeting = function() {
-  alert('hello');
-}
- -

Esta função agora pode ser invocada usando qualquer das funções abaixo

- -
myGreeting();
-anotherGreeting();
- -

Mas isso pode simplesmente ser confuso, então não faça! Quando criar funções, é melhor ficar com apenas uma forma:

- -
function myGreeting() {
-  alert('hello');
-}
- -

De modo geral você irá usar funções anônimas só para rodar um código em resposta a um disparo de evento — como um botão ao ser clicado — usando um gerenciador de eventos. Novamente, Isso é algo parecido com:

- -
myButton.onclick = function() {
-  alert('hello');
-  // Eu posso colocar código aqui
-  // dentro o quanto eu quiser
-}
- -

Parâmetro de funções

- -

Algumas funções requerem parâmetros a ser especificado quando você está invocando-os — esses são valores que precisam ser inclusos dentro dos parênteses da função, o que é necessário para fazer seu trabalho apropriado.

- -
-

Nota: Parâmetros algumas vezes são chamados de argumentos, propriedades, ou até atributos.

-
- -

Como um exemplo, a função embutida de navegador Math.random() não requer nenhum parâmetro. Quando chamada, ela sempre retorna um número aleatório entre 0 e 1:

- -
var myNumber = Math.random();
- -

A função embutida de navegador replace()  entretanto precisa de dois parâmetros — a substring para encotrar a string principal, e a substring para ser substituida com ela:

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
- -
-

Nota: Quando você precisa especificar multiplos parâmetros, eles são separados por vígulas.

-
- -

Nota-se também que algumas vezes os parâmetros são opcionais — você não tem que especificá-los. Se você não o faz, a função geralmente adota algum tipo de comportamento padrão. Como exemplo, a função join() tem parâmetro opcional:

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-// returns 'I love chocolate frogs'
-var madeAString = myArray.join();
-// returns 'I,love,chocolate,frogs'
- -

Se nenhum parâmetro é incluído para especificar a combinação/delimitação de caractere, uma vírgula é usada por padrão.

- -

Função escopo e conflitos

- -

vamos falar um pouco sobre {{glossary("scope")}} — um conceito muito importante quando lidamos com funções. Quando você cria uma função, as variáveis e outras coisas definidas dentro da função ficam dentro de seu próprio e separado escopo, significando que eles estão trancados a parte em seu próprio compartimento, inacesível de dentro de outras funções ou de código fora das funções.

- -

O mais alto nível fora de todas suas funções é chamado de escopo global. Valores definidos no escopo global são acessíveis em todo lugar do código.

- -

JavaScript é configurado assim por várias razões — mas principalmente por segurança e organização. Algumas vezes você não quer que variáveis sejam acessadas de todo lugar no código — scripts externos que você chama de algum outro lugar podem iniciar uma bagunça no seu código e causar problemas porque eles estão usando os mesmos nomes de variáveis que em outras partes do código, provocando conflitos. Isso pode ser feito maliciosamente, ou só por acidente.

- -

Por exemplo, digamos que você tem um arquivo HTML que está chamando dois arquivos JavaScript externos, e ambos tem uma variável e uma função definidos que usam o mesmo nome:

- -
<!-- Excerpt from my HTML -->
-<script src="first.js"></script>
-<script src="second.js"></script>
-<script>
-  greeting();
-</script>
- -
// first.js
-var name = 'Chris';
-function greeting() {
-  alert('Olá ' + name + ': bem-vindo a nossa compania.');
-}
- -
// second.js
-var name = 'Zaptec';
-function greeting() {
-  alert('Nossa compania é chamada ' + name + '.');
-}
- -

Ambas as funções que você quer chamar são chamadas greeting(), mas você só pode acessar o arquivo second.js da função greeting()  — Ele é aplicado no HTML depois no código fonte, então suas variáveis e funções sobrescrevem as de first.js.

- -
-

Nota: Você pode ver este exemplo rodando no GitHub (veja também o código fonte).

-
- -

Manter parte de seus código trancada em funções evita tais problemas, e é considerado boa prática.

- -

Parece um pouco com um zoológico. Os leões, zebras, tigres, e pinguins são mantidos em seus próprios cercados, e só tem acesso as coisas dentro de seu cercado — da mesma maneira que escopos de função. Se eles forem capazes de entrar em outros cercados, problemas podem acontecer. No melhor caso, diferentes animais poderiam sentir-se ralmente desconfortáveis dentro de habitats não familiares — um leão e um tigre poderiam sentir-se muito mal dentro de um úmido e gelado terreno. No pior caso, os leões e tigres poderiam tentar comer os pinguins!

- -

- -

O zelador do zoológico é como o escopo global — ele ou ela tem as chaves para acessar cada cercado, reabastecer comida, tratar animais doentes, etc.

- -

Aprendizado ativo: Brincando com o escopo

- -

Vamos observar um exemplo real para mostrar escopo.

- -
    -
  1. Primeiro, faça uma cópia local de nosso exmplo function-scope.html. Isto contém duas funções chamadas a() e b(), e três variáveis — x, y, e z — duas das quais estão definidas dentro de funções, e uma no escopo global. Ele também contém uma terceira função chamada output(), que leva um simples parâmetro e mostra-o em um parágrafo na página.
    2. -
  2. Abra o exemplo em um navegador e em um editor de textos.
    3. -
  3. Abra o console JavaScript no developer tools de seu navegador. No console  JavaScript, digite o seguinte comando: - 
    output(x);
    - Você deve ver o valor da variável x exibida na página.
    4. -
  4. Agora tente digitar o seguinte no seu console: - 
    output(y);
-output(z);
    - Ambos dever retornar um erro com as seguintes linhas "ReferenceError: y is not defined". Por que isso? Porque o escopo da função — y e z estão trancadas dentro das funções a() e  b(), então output() não pode acessá-las quando chamadas do escopo global.
    5. -
  5. Contudo, que tal chamá-las de dentro de outra função? Tente editar a() e b() para que fiquem desta forma: - 
    function a() {
-  var y = 2;
-  output(y);
-}
-
-function b() {
-  var z = 3;
-  output(z);
-}
    - Salve o código e atualize o navegador, então tente chamar as funções a() e b() do console JavaScript: - - 
    a();
-b();
    - Você verá os valores de y e z mostrados na página. Isso funciona bem, desde que a função output() está sendo chamada dentro de outra função — no mesmo escopo que as variáveis que estam imprimindo são definidas, em cada caso. output() em si é acessível de qualquer lugar, como é definido no escopo global.
    6. -
  6. Agora tente atualizar seu código como este: - 
    function a() {
-  var y = 2;
-  output(x);
-}
-
-function b() {
-  var z = 3;
-  output(x);
-}
    - Salve e atualize novamente, e tente isso novamente em seu console JavaScript:         
    7. -
  7. - 
    a();
-b();
    - Ambas chamadas de a() e b() devem mostrar o valor de x — 1. Isso dá certo porque até mesmo a chamada de  output() não está no mesmo escopo em que x é definido, x é uma variável global então é disponível dentro de todo código, em toda parte.
    8. -
  8. Finalmente, tente atualizar o código o seguinte: - 
    function a() {
-  var y = 2;
-  output(z);
-}
-
-function b() {
-  var z = 3;
-  output(y);
-}
    - Salve e atualize novamente, e tente isso novamente em seu console JavaScript: 
    9. -
  9. - 
    a();
-b();
    - Desta vez as chamadas de a() e b() retornaram o irritante erro "ReferenceError: z is not defined" — isto porque a chamada de output() e as variáveis que eles estão tentando imprimir não estão definidas dentro do mesmo escopo das funções — as variáveis são efetivamente invisíveis aquelas chamadas de função.
    10. -
- -
-

Nota: As mesmas regras de escopo não se aplicam a laços (ex.: for() { ... }) e blocos condicionais (ex.: if() { ... }) — eles parecem muito semelhantes, mas eles não são a mesma coisa! Tome cuidado para não confudir-se.

-
- -
-

Nota: O erro ReferenceError: "x" is not defined é um dos mais comuns que você encontrará. Se você receber este erro e tem certeza que definiu a variável em questão, cheque em que escopo ela está.

-
- - - -

Funções dentro de funções

- -

Tenha em mente que você pode chamar uma função de qualquer lugar, até mesmo dentro de outra função.  Isso é frenquentemente usado para manter o código organizado — se você tem uma função grande e complexa, é mais fácil de entendê-la se você quebrá-la em várias subfunções:

- -
function myBigFunction() {
-  var myValue;
-
-  subFunction1();
-  subFunction2();
-  subFunction3();
-}
-
-function subFunction1() {
-  console.log(myValue);
-}
-
-function subFunction2() {
-  console.log(myValue);
-}
-
-function subFunction3() {
-  console.log(myValue);
-}
-
- -

Apenas certifique-se que os valores usados dentro da função estão apropriadamente no escopo. O exemplo acima deve lançar um erro ReferenceError: myValue is not defined, porque apesar da variável myValue estar definida no mesmo escopo da chamda da função, ela não está definida dentro da definição da função — o código real que está rodando quando as funções são chamadas. Para fazer isso funcionar, você deveria passar o valor dentro da função como um parâmetro, desta forma:

- -
function myBigFunction() {
-  var myValue = 1;
-
-  subFunction1(myValue);
-  subFunction2(myValue);
-  subFunction3(myValue);
-}
-
-function subFunction1(value) {
-  console.log(value);
-}
-
-function subFunction2(value) {
-  console.log(value);
-}
-
-function subFunction3(value) {
-  console.log(value);
-}
- -

Conclusão

- -

Este arquivo explorou os conceitos fundamentais por trás das funções, pavimentando o caminho para o próximo no qual nos tornamos práticos e o levamos através de passos para construir suas próprias funções personalizadas.

- -

Veja também

- - - - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html deleted file mode 100644 index 2e4fc27c4d..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Galeria de Imagens -slug: Aprender/JavaScript/Elementos_construtivos/Image_gallery -translation_of: Learn/JavaScript/Building_blocks/Image_gallery ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Agora que analisamos os blocos de construção fundamentais do JavaScript, testaremos seu conhecimento de loops, funções, condicionais e eventos, fazendo com que você crie um item bastante comum que você verá em muitos sites — uma galeria de imagens ativadas em JavaScript.

- - - - - - - - - - - - -
Pré-requisitos:Antes de tentar esta avaliação, você já deve ter trabalhado em todos os artigos deste módulo.
Objetivo:Para testar a compreensão de loops, funções, condicionais e eventos de JavaScript.
- -

Ponto de partida

- -

Para começar esta avaliação, você deve pegar o arquivo ZIP para o exemplo e descompactá-lo em algum lugar no seu computador.

- -
-

Note: Como alternativa, você pode usar um site como o JSBin ou Thimble para fazer sua avaliação. Você pode colar o HTML, CSS e JavaScript em um desses editores on-line. Se o editor on-line que você está usando não tiver painéis JavaScript / CSS separados, sinta-se à vontade para colocar os elementos in-line <script> e <style> dentro da página HTML.

-
- -

Resumo do projeto

- -

Você recebeu alguns recursos de HTML, CSS e imagem e algumas linhas de código JavaScript; você precisa escrever o JavaScript necessário para transformar isso em um programa de trabalho. O corpo do HTML se parece com isto:

- -
<h1>Image gallery example</h1>
-
-<div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
-  <div class="overlay"></div>
-  <button class="dark">Darken</button>
-</div>
-
-<div class="thumb-bar">
-
-</div>
- -

O exemplo é assim:

- -

- - - -

As partes mais interessantes do arquivo CSS do exemplo:

- - - -

Seu JavaScript precisa:

- - - -

Para lhe dar mais uma ideia, dê uma olhada no exemplo finalizado (não espreite o código-fonte!)

- -

Passos para concluir

- -

As seções a seguir descrevem o que você precisa fazer.

- -

Looping através das imagens

- -

Já fornecemos a você linhas que armazenam uma referência à thumb-bar <div> dentro de uma variável chamada thumbBar, cria um novo elemento <img> define seu atributo src como um valor de espaço reservado xxx, e acrescenta essa nova  <img> elemento dentro do thumbBar.

- -

Você precisa:

- -
    -
  1. Coloque a seção de código abaixo do comentário "Looping through images" dentro de um loop que percorre todas as 5 imagens — você só precisa percorrer cinco números, um representando cada imagem.
    2. -
  2. Em cada iteração de loop, substitua o valor de espaço reservado xxx por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributo src para esse valor em cada caso. Tenha em mente que, em cada caso, a imagem está dentro do diretório de imagens e seu nome é pic1.jpg, pic2.jpg, etc.
    3. -
- -

Adicionando um manipulador onclick a cada imagem em miniatura

- -

Em cada iteração de loop, você precisa adicionar um manipulador onclick ao atual newImage — isso deve:

- -
    -
  1. Encontre o valor do atributo src da imagem atual. Isto pode ser feito executando a função getAttribute() no <img> em cada caso e passando um parâmetro de "src" em cada caso. Mas como conseguir a imagem? O uso do newImage.getAttribute() não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valor src do último <img> para todos os casos. Para resolver isso, tenha em mente que, no caso de cada manipulador de eventos, o <img> é o destino do manipulador. Que tal obter as informações do objeto de evento?
    2. -
  2. Rode uma função, passando o valor src retornado como um parâmetro. Você pode chamar essa função como quiser.
    3. -
  3. Esta função do manipulador de eventos deve definir o valor do atributo src do displayed-img <img> para o valor src passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao <img> relevante em uma variável chamada displayedImg. Note que queremos uma função nomeada definida aqui.
    4. -
- -

Escrevendo um manipulador que executa o botão escurecer / clarear

- -

Isso só deixa o nosso escurecer / clarear <button> — nós já fornecemos uma linha que armazena uma referência ao <button> em uma variável chamada btn. Você precisa adicionar um manipulador onclick que:

- -
    -
  1. Verifica o nome da classe atual definido no <button> — você pode novamente fazer isso usando getAttribute().
    2. -
  2. Se o nome da classe for "dark", altera a classe <button> para "light" (usando setAttribute()), seu conteúdo de texto para "Lighten", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0.5)".
    3. -
  3. Se o nome da classe não for "dark", a classe <button> será alterada para "dark", o conteúdo de texto de volta para "Darken", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0)".
    4. -
- -

As linhas seguintes fornecem uma base para alcançar as mudanças estipuladas nos pontos 2 e 3 acima.

- -
btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;
- -

Dicas e sugestões

- - - -

Avaliação

- -

Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então pode obter o guia de marcação com bastante facilidade, perguntando no tópico de discussão sobre este exercício, ou no canal #mdn IRC da Mozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!

- -

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/index.html deleted file mode 100644 index cb8deab502..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Elementos construtivos do Javascript -slug: Aprender/JavaScript/Elementos_construtivos -tags: - - Artigo - - Condicionais - - Exercício - - Funções - - Iniciante - - JavaScript - - Loops - - eventos -translation_of: Learn/JavaScript/Building_blocks ---- -
{{LearnSidebar}}
- -

Neste módulo, continuaremos nossa abordagem por todos os recursos-chave fundamentais de Javascript, voltando nossa atenção para os tipos de bloco de código comumente encontrados, tais como declarações condicionais, laços, funções e eventos. Você já viu isso no curso, mas apenas de passagem - aqui nós vamos discutir tudo isso explicitamente.

- -

Pré-requisitos

- -

Antes  de iniciar este módulo, você deve ter familiaridade com os conceitos básicos de HTML e CSS, além de ter estudado nosso módulo anterior, primeiros passos no Javacript.

- -
-

Nota: Se você está trabalhando em um computador, tablet ou outro dispositivo onde você não tem a habilidade para criar seus próprios arquivos, você pode testar os exemplos de código (a maioria deles) em um programa de codificação online, tal como JSBin ou Thimble.

-
- -

Guias

- -
-
Tomando decisões em seu código — condicionais
-
Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo com diferentes valores de entrada. Por exemplo, em um jogo, se o número de vidas de um jogador é 0, então é "fim de jogo". Em um aplicativo de previsão do tempo, se ele está sendo olhado de manhã, é exibido um gráfico de nascer do sol; se for noite, mostra estrelas e a lua. Neste artigo, vamos explorar como as estruturas condicionais funcionam em Javascript.
-
Re-executando código
-
Às vezes você precisa que uma tarefa seja feita mais de uma vez em uma linha. Por exemplo, percorrendo uma lista de nomes. Em programação, laços realizam esse trabalho muito bem. Aqui nós vamos ver estruturas de laço em Javascript.
-
Funções — blocos reutilizáveis de código
-
Outro conceito essencial em codificação são funções. Funções permitem que você armazene um trecho de código que executa uma única tarefa dentro de um bloco definido, e então chame aquele código em qualquer lugar que você precise dele usando um comando curto - em vez de ter que digitar o mesmo código múltiplas vezes. Neste artigo, vamos explorar conceitos fundamentais por trás das funções, tais como sintaxe básica, como invocar e definir funções, escopo e parâmetros.
-
Construa sua própria função
-
Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece uma experiência prática. Aqui você vai adquirir um pouco de prática construindo sua própria função personalizada. Junto com isso, vamos explicar mais alguns detalhes úteis sobre lidar com funções.
-
Funções retornam valores
-
Há um último conceito essencial para discutirmos nesse curso, antes de encerrarmos nossa abordagem sobre funções — valores de retorno. Algumas funções não retornam nenhum valor significativo após executar, outras retornam. É importantes entender o que esses valores são, como utilizá-los em seu código, e como fazer suas próprias funções customizadas retornarem valores utilizáveis. 
-
Introdução a eventos
-
Eventos são ações ou ocorrências que acontecem no sistema que você está programando, sobre os quais o sistema te informa para que você possa reagir a eles de alguma forma se desejar. Por exemplo se o usuário clica em um botão numa página, você deve querer responder a essa ação exibindo uma caixa de informação. Neste artigo final nós discutiremos alguns conceitos importantes sobre eventos, e ver como eles funcionam em navegadores.
-
- -

Exercícios

- -

O exercício a seguir irá testar seu entendimento do básico de JavaScript abordado nos guias acima.

- -
-
Galeria de imagens
-
Agora que demos uma olhada os elementos construtivos do JavaScript, vamos testar seu conhecimento sobre loops, funções, condicionais e eventos construindo um item bastante comum que você verá em muitos websites — uma galeria de imagens movida a JavaScript.
-
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html deleted file mode 100644 index 39d72a1660..0000000000 --- a/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Valores de retorno de função -slug: Aprender/JavaScript/Elementos_construtivos/Return_values -translation_of: Learn/JavaScript/Building_blocks/Return_values ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Há um último conceito essencial para discutirmos neste curso, para fechar nossa visão das funções — valores de retorno. Algumas funções não retornam um valor significativo após a conclusão, mas outras o fazem, e é importante entender quais são seus valores, como utilizá-los em seu código e como fazer com que suas próprias funções personalizadas retornem valores úteis. Nós vamos cobrir tudo isso abaixo.

- - - - - - - - - - - - -
Pré-requisitos: -

Conhecimento básico de internet, compreenção básica de HTML e CSS, JavaScript primeiros passos, Funções — reutilizando blocos de código.

-
Objetivo:Entender os valores de retorno de uma função, e como utilizá-los
- -

Quais são os valores de retorno?

- -

Valores de retorno são exatamente como soam — valores retornados pela função quando são concluídos. Você já conheceu os valores de retorno várias vezes, embora possa não ter pensado neles explicitamente. Vamos voltar para algum código familiar:

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// the replace() string function takes a string,
-// replaces one substring with another, and returns
-// a new string with the replacement made
- -

Nós vimos exatamente este bloco de código em nosso primeiro artigo de função. Estamos invocando a função replace() na string myText e passando a ela dois parâmetros — a substring para localizar e a substring para substituí-la. Quando essa função é concluída (termina a execução), ela retorna um valor, que é uma nova string com a substituição feita. No código acima, estamos salvando esse valor de retorno como o valor da variável  newString.

- -

Se você observar a página de referência MDN da função de substituição, verá uma seção chamada Valor de retorno. É muito útil conhecer e entender quais valores são retornados por funções, portanto, tentamos incluir essas informações sempre que possível.

- -

Algumas funções não retornam um valor de retorno como tal (em nossas páginas de referência, o valor de retorno é listado como void ou undefined em tais casos). Por exemplo, na função displayMessage() que criamos no artigo anterior, nenhum valor específico é retornado como resultado da função que está sendo chamada. Apenas faz uma caixa aparecer em algum lugar na tela — é isso!

- -

Geralmente, um valor de retorno é usado onde a função é uma etapa intermediária em um cálculo de algum tipo. Você quer chegar a um resultado final, que envolve alguns valores. Esses valores precisam ser calculados por uma função, que retorna os resultados para que possam ser usados no próximo estágio do cálculo.

- -

Usando valores de retorno em suas próprias funções

- -

Para retornar um valor de uma função personalizada, você precisa usar ... aguarde por isso ... a palavra-chave return. Vimos isso em ação recentemente em nosso exemplo random-canvas-circles.html. Nossa função draw() desenha 100 círculos aleatórios em algum lugar em um HTML {{htmlelement("canvas")}}:

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i < 100; i++) {
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
- -

Dentro de cada iteração de loop, três chamadas são feitas para a função random() , para gerar um valor aleatório para a coordenada x do círculo atual, coordenada y e raio, respectivamente. A função random() recebe um parâmetro — um número inteiro — e retorna um número aleatório inteiro entre 0 e esse número. Se parece com isso:

- -
function randomNumber(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Isso pode ser escrito da seguinte maneira:

- -
function randomNumber(number) {
-  var result = Math.floor(Math.random()*number);
-  return result;
-}
- -

Mas a primeira versão é mais rápida de escrever e mais compacta.

- -

Estamos retornando o resultado do cálculo Math.floor(Math.random()*number) cada vez que a função é chamada. Esse valor de retorno aparece no ponto em que a função foi chamada e o código continua. Então, por exemplo, se nós rodássemos a seguinte linha:

- -
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
- -

e as três chamadas random() retornaram os valores 500, 200 e 35, respectivamente, a linha seria executada como se fosse isso:

- -
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
- -

As chamadas de função na linha são executadas primeiro e seus valores de retorno substituem as chamadas de função, antes que a própria linha seja executada.

- -

Aprendizagem ativa: nossa própria função de valor de retorno

- -

Vamos escrever nossas próprias funções com valores de retorno.

- -
    -
  1. Primeiro de tudo, faça uma cópia local do arquivo function-library.html do GitHub. Esta é uma página HTML simples contendo um campo de texto {{htmlelement("input")}} e um parágrafo. Há também um elemento {{htmlelement("script")}} no qual armazenamos uma referência a ambos os elementos HTML em duas variáveis. Esta pequena página permitirá que você insira um número na caixa de texto e exiba diferentes números relacionados a ele no parágrafo abaixo.
    2. -
  2. Vamos adicionar algumas funções úteis para este elemento <script>. Abaixo das duas linhas existentes de JavaScript, adicione as seguintes definições de função: - 
    function squared(num) {
-  return num * num;
-}
-
-function cubed(num) {
-  return num * num * num;
-}
-
-function factorial(num) {
-  var x = num;
-  while (x > 1) {
-    num *= x-1;
-    x--;
-  }
-  return num;
-}
    - As funções squared() e cubed() são bastante óbvias — elas retornam o quadrado ou cubo do número dado como um parâmetro. A função factorial() retorna o  fatorial do número fornecido.
    3. -
  3. Em seguida, vamos incluir uma maneira de imprimir informações sobre o número digitado na entrada de texto. Digite o seguinte manipulador de eventos abaixo das funções existentes: - 
    input.onchange = function() {
-  var num = input.value;
-  if (isNaN(num)) {
-    para.textContent = 'You need to enter a number!';
-  } else {
-    para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                       num + ' cubed is ' + cubed(num) + '. ' +
-                       num + ' factorial is ' + factorial(num) + '.';
-  }
-}
    - -

    Aqui estamos criando um manipulador de eventos onchange que é executado sempre que o evento de mudança é acionado na entrada de texto — ou seja, quando um novo valor é inserido na entrada de texto e enviado (insira um valor e pressione tab por exemplo). Quando essa função anônima é executada, o valor existente inserido na entrada é armazenado na variável num.

    - -

    Em seguida, fazemos um teste condicional — se o valor inserido não for um número, imprimiremos uma mensagem de erro no parágrafo. O teste analisa se a expressão isNaN(num) retorna true. Usamos a função isNaN() para testar se o valor num não é um número — se for, retorna true, e, se não, false.

    - -

    Se o teste retorna false, o valor  num é um número, então imprimimos uma frase dentro do elemento de parágrafo informando o que é o quadrado, o cubo e o fatorial do número. A sentença chama as funções squared(), cubed(), e factorial() para obter os valores necessários.

    -
    4. -
  4. Salve seu código, carregue-o em um navegador e experimente.
    5. -
- -
-

Nota: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na versão finalizada no GitHub (consulte também sua execução), ou peça ajuda.

-
- -

Neste ponto, gostaríamos que você escrevesse algumas funções e as adicionasse à biblioteca. Como sobre o quadrado ou raiz cúbica do número, ou a circunferência de um círculo com um raio de comprimento num?

- -

Este exercício trouxe alguns pontos importantes além de ser um estudo sobre como usar a declaração de return. Além disso, temos:

- - - -

Conclusão

- -

Então, temos isso — funções são divertidas, muito úteis e, embora haja muito o que falar em relação à sua sintaxe e funcionalidade, bastante compreensíveis, dados os artigos certos para se estudar.

- -

Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente ou entre em contato conosco para pedir ajuda.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/howto/index.html b/files/pt-br/aprender/javascript/howto/index.html deleted file mode 100644 index c06dbd4d3f..0000000000 --- a/files/pt-br/aprender/javascript/howto/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Solve common problems in your JavaScript code -slug: Aprender/JavaScript/Howto -translation_of: Learn/JavaScript/Howto ---- -
{{LearnSidebar}}
- -

Os links a seguir apontam soluções para problemas comuns do dia a dia, você precisará consertar em ordem para que seu código javascript execute corretamente.

- -

Erros comuns de iniciantes

- -

Digitação correta and casing

- -

Se o seu código não funciona e/ou se seu navegador indicar que algo está indefinido, verifique se você declarou todas os nomes de suas variáveis, nomes de funções, etc. corretamente.

- -

Algumas funções comuns dos navegadores que causam problema são:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CorretoIncorreto
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
- -

Posições de ponto e vírgula

- -

Você precisa ter certeza que você não colocou nenhum ponto e vírgula incorretamente. Por exemplo:

- - - - - - - - - - - - -
CorrectWrong
elem.style.color = 'red';elem.style.color = 'red;'
- -

Funções

- -

Há uma série de coisas que podem dar errado com funções

- -

Um dos erros mais comuns é declarar a função, mas não chama-la em lugar nenhum. Por exemplo:

- -
function myFunction() {
-  alert('This is my function.');
-};
- -

Este código não fará nada a menos que você o chame, por exemplo com

- -
myFunction();
- -

Escopo da função

- -

Lembre-se que funções tem seu próprio escopo — você não pode acessar um conjunto de valores de variáveis ​​dentro de uma função fora da função, a não ser que você tenha declarado a variável globalmente (i.e. não dentro de nenhuma função), ou retorne o valor or retorne o valor fora da função

- -

Executar o código antes de uma declaração de retorno

- -

Remember also that when you return a value out of a function, the JavaScript interpreter exits the function — no code declared after the return statement will run.

- -

In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".

- -

Object notation versus normal assignment

- -

When you assign something normally in JavaScript, you use a single equals sign, e.g.:

- -
var myNumber = 0;
- -

This doesn't work in Objects, however — with objects you need to separate member names from their values using colons, and separate each member with a comma, for example:

- -
var myObject = {
-  name : 'Chris',
-  age : 38
-}
- -

Definições básicas

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

Casos de uso básicos

- -
-
-

Geral

- - - -

Variáveis

- - - -

Matemática

- - - -

Strings

- - -
- -
-

Arrays

- - - -

Debugging JavaScript

- - - -

For more information on JavaScript debugging, see Handling common JavaScript problems; also see Other common errors for a description of common errors.

- -

Making decisions in code

- - - -

Looping/iteration

- - -
-
- -

Intermediate use cases

- -
-
-

Functions

- - - -

Objects

- - - -

JSON

- - -
- -
-

Eventos

- - - -

Javascript Orientado a objetos

- - - -

Web APIs

- - - -

 

-
-
diff --git a/files/pt-br/aprender/javascript/index.html b/files/pt-br/aprender/javascript/index.html deleted file mode 100644 index d1a9db5057..0000000000 --- a/files/pt-br/aprender/javascript/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: JavaScript -slug: Aprender/JavaScript -tags: - - Beginner - - CodingScripting - - Iniciante Javascript - - JavaScript - - NeedsContent - - Principiante - - Tópico - - modulo -translation_of: Learn/JavaScript ---- -

{{LearnSidebar}}

- -

{{glossary('JavaScript')}} é uma linguagem de programação que permite implementar funcionalidades mais complexas em páginas web. Sempre que uma página web faz mais do que apenas mostrar informações estáticas para você - ela mostra em tempo real conteúdos atualizados, mapas interativos, animações gráficas em 2D/3D, vídeos, etc. -  você pode apostar que o Javascript provavelmente está envolvido.

- -

O caminho para o aprendizado

- -

O JavaScript não é tão fácil de aprender como outras linguagens, como HTML e CSS, que são outros dois pilares do desenvolvimento front-end. Antes de tentar aprender JavaScript, é altamente recomendável que você aprenda e se familiarize com pelo menos estas duas tecnologias primeiro. Você pode começar através dos seguintes módulos:

- - - -

Possuir experiência em outras linguagens de programação pode também ser útil.

- -

Depois de aprender o básico de JavaScript, você estará apto a estudar tópicos mais avançados, como:

- - - -

Módulos

- -

Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.

- -
-
Primeiros passos em JavaScript
-
Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.
-
Blocos de codigo JavaScript
-
Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código, como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.
-
Introdução a objetos em JavaScript
-
Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.
-
JavaScript Assíncrono
-
Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.
-
API's Web do lado cliente
-
Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.
-
- -

Aprofundando

- -

Uma vez que você se acostumar com o mundo do JavaScript aqui estão alguns outros módulos em que você pode mergulhar:

- -
-
Biblioteca de referência JavaScript
-
Em nossa extensa biblioteca de referência você encontrará cada aspecto de Javascript tratado em detalhes: objetos globais, operadores, declarações e funções.
-
Introdução à Orientação a Objetos (OO) em JavaScript
-
Introdução aos conceitos de {{glossary("OOP","Programação orientada a objetos")}} em JavaScript.
-
- -

Resolvendo problemas comuns com Javascript

- -

Use Javascript para resolver problemas comuns, este link proporciona contéudos explicativos de como usar o JavaScript para solucionar problemas muito comuns ao criar uma página da Web.

- -

Veja também

- -
-
JavaScript
-
O ponto de entrada principal para a documentação básica do JavaScript no MDN - é aqui que você encontrará extensos documentos de referência em todos os aspectos do JavaScript e alguns tutoriais avançados destinados a JavaScripters experientes.
-
Matemática do programador
-
Uma excelente série de vídeos que ensina a matemática necessária para ser um bom programador, por Keith Peters.
-
-
diff --git a/files/pt-br/aprender/javascript/objetos/adding_bouncing_balls_features/index.html b/files/pt-br/aprender/javascript/objetos/adding_bouncing_balls_features/index.html deleted file mode 100644 index b0e0c0d534..0000000000 --- a/files/pt-br/aprender/javascript/objetos/adding_bouncing_balls_features/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Adicionando recursos à nossa demonstração de bolas pulantes -slug: Aprender/JavaScript/Objetos/Adding_bouncing_balls_features -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

Nesta avaliação, espera-se que você use a demonstração de bolas saltantes do artigo anterior como ponto de partida e adicione alguns recursos novos e interessantes a ela.

- - - - - - - - - - - - -
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of JavaScript objects and object-oriented constructs
- -

Ponto de partida

- -

Para iniciar essa avaliação, faça uma cópia local de index-finished.html, style.css, e main-finished.js do nosso último artigo em um novo diretório em seu computador local.

- -
-

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <script>/<style> elements inside the HTML page.

-
- -

Resumo do projeto

- -

Nossa demo com bola saltitante é divertida, mas agora queremos torná-la um pouco mais interativa, adicionando um círculo maligno controlado pelo usuário, que vai comer as bolas se elas forem capturadas. Também queremos testar suas habilidades de construção de objetos criando um objeto Shape() genérico do qual nossas bolas e círculo maligno podem herdar. Por fim, queremos adicionar um contador de pontuação para rastrear o número de bolas a serem capturadas.

- -

A imagem seguinte dá-lhe uma ideia do que deve ser o programa final:

- -

- - - -

Para lhe dar mais uma ideia, dê uma olhada no exemplo finalizado (não espreitar o código-fonte!)

- -

Passos para concluir

- -

As seções a seguir descrevem o que você precisa fazer.

- -

Criando nossos novos objetos

- -

Primeiro de tudo, altere seu construtor Ball() existente para que ele se torne um construtor Shape() e adicione um novo construtor Ball():

- -
    -
  1. O construtor Shape()  deve definir as propriedades x, y, velX, e velY da mesma maneira que o construtor Ball() fez originalmente, mas não as propriedades de color e size.
    2. -
  2. Também deve definir uma nova propriedade chamada exists, que é usada para rastrear se as bolas existem no programa (não foram comidas pelo círculo do mal). Este deve ser um booleano (true/false).
    3. -
  3. O construtor Ball() deve herdar as propriedades x, y, velX, velY, e exists do construtor Shape().
    4. -
  4. Ele também deve definir uma propriedade color e uma size, como fez o construtor  Ball() original.
    5. -
  5. Lembre-se de definir o prototype e o constructor do construtor Ball() adequadamente.
    6. -
- -

As definições do método ball draw(), update(), e collisionDetect() devem permanecer exatamente iguais às anteriores.

- -

Você também precisa adicionar um novo parâmetro à nova chamada de construtor new Ball() ( ... ) — o parâmetro exists deve ser o quinto parâmetro, e deve receber um valor true.

- -

Neste ponto, tente recarregar o código — ele deve funcionar da mesma forma que antes, com nossos objetos redesenhados.

- -

Definindo EvilCircle()

- -

Agora é hora de conhecer o cara mau — o EvilCircle()! Nosso jogo só envolverá um círculo maligno, mas ainda vamos defini-lo usando um construtor que herda de Shape() para lhe dar alguma prática. Você pode querer adicionar outro círculo ao aplicativo mais tarde, que pode ser controlado por outro jogador, ou ter vários círculos malignos controlados por computador. Você provavelmente não vai dominar o mundo com um único círculo maligno, mas fará por essa avaliação.

- -

O construtor EvilCircle() deve herdar  x, y, velX, velY, e exists de Shape(), mas velX e velY devem sempre ser iguais a 20.

- -

Você deveria fazer algo como Shape.call(this, x, y, 20, 20, exists);

- -

Ele também deve definir suas próprias propriedades, da seguinte maneira:

- - - -

Novamente, lembre-se de definir suas propriedades herdadas como parâmetros no construtor e defina as propriedades prototype e constructor corretamente.

- -

Definindo os métodos de EvilCircle()

- -

EvilCircle() deve ter quatro métodos, conforme descrito abaixo.

- -

draw()

- -

Este método tem o mesmo propósito que o método draw() de Ball(): Ele desenha a instância do objeto na tela. Ele funcionará de maneira muito semelhante, portanto, você pode começar copiando a definição Ball.prototype.draw. Você deve então fazer as seguintes alterações:

- - - -

checkBounds()

- -

Este método fará a mesma coisa que a primeira parte da função update() do Ball() — olhe para ver se o círculo do mal vai sair da borda da tela, e pare de fazer isso. Novamente, você pode simplesmente copiar a definição de Ball.prototype.update, mas há algumas alterações que você deve fazer:

- - - -

setControls()

- -

Esse método adicionará um ouvinte de evento  onkeydown ao objeto window para que, quando determinadas teclas do teclado forem pressionadas, possamos mover o círculo maligno ao redor. O bloco de código a seguir deve ser colocado dentro da definição do método:

- -
var _this = this;
-window.onkeydown = function(e) {
-    if (e.keyCode === 65) {
-      _this.x -= _this.velX;
-    } else if (e.keyCode === 68) {
-      _this.x += _this.velX;
-    } else if (e.keyCode === 87) {
-      _this.y -= _this.velY;
-    } else if (e.keyCode === 83) {
-      _this.y += _this.velY;
-    }
-  }
- -

Assim, quando uma tecla é pressionada, a propriedade keyCode é consultada para ver qual tecla é pressionada. Se for um dos quatro representados pelos códigos de teclas especificados, o círculo maligno se moverá para a esquerda / direita / para cima / para baixo.

- - - -

collisionDetect()

- -

Este método irá agir de forma muito semelhante ao método collisionDetect() do Ball(), então você pode usar uma cópia disso como base deste novo método. Mas há algumas diferenças:

- - - -

Trazendo o círculo do mal para o programa

- -

Agora nós definimos o círculo do mal, precisamos realmente fazer isso aparecer em nossa cena. Para fazer isso, você precisa fazer algumas alterações na função loop().

- - - -

Implementando o contador de pontuação

- -

Para implementar o contador de pontuação, siga os seguintes passos:

- -
    -
  1. No seu arquivo HTML, adicione um elemento {{HTMLElement("p")}} logo abaixo do elemento {{HTMLElement("h1")}} contendo o texto "Contagem de bolas:".
    2. -
  2. No seu arquivo CSS, adicione a seguinte regra na parte inferior: - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. Em seu JavaScript, faça as seguintes atualizações: -
      -
    • Crie uma variável que armazene uma referência ao parágrafo.
      • -
    • Mantenha uma contagem do número de bolas na tela de alguma forma.
      • -
    • Incrementar a contagem e exibir o número atualizado de bolas cada vez que uma bola é adicionada à cena.
      • -
    • Decrementar a contagem e exibir o número atualizado de bolas cada vez que o círculo maligno come uma bola (faz com que ele não exista).
      • -
    -
    4. -
- -

Dicas e sugestões

- - - -

Avaliação

- -

Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então você pode obter o guia de marcação com bastante facilidade, perguntando no tópico de discussão para este exercício, ou no canal de #mdn IRC da Mozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- -

 

- -

Neste módulo

- - - -

 

diff --git "a/files/pt-br/aprender/javascript/objetos/b\303\241sico/index.html" "b/files/pt-br/aprender/javascript/objetos/b\303\241sico/index.html" deleted file mode 100644 index ef9cb18c95..0000000000 --- "a/files/pt-br/aprender/javascript/objetos/b\303\241sico/index.html" +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: O básico sobre objetos JavaScript -slug: Aprender/JavaScript/Objetos/Básico -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Neste artigo, veremos a sintaxe fundamental de objetos JavaScript e revisitaremos alguns recursos JavaScript vistos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já utilizou são objetos.

- - - - - - - - - - - - -
Pré-requisitos:Interação básica com o computador, entendimento básico de HTML e CSS, familiaridade com o básico de JavaScript (ver Primeiros passos e Elementos construtivos).
Objetivo:Entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com o JavaScript ("quase tudo é objeto"), e como começar a trabalhar com objetos JavaScript.
- -

Objeto, noções básicas

- -

Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.

- -

Para começar, faça uma cópia do nosso arquivo oojs.html. Isto contém muito pouco — um elemento {{HTMLElement("script")}} para escrevermos nosso código-fonte. Vamos usar isto como base para explorar a sintaxe básica do objeto. Ao trabalhar com este exemplo, você deve ter seu console de ferramentas de desenvolvedor JavaScript aberto e pronto para digitar alguns comandos.

- -

Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:

- -
var pessoa = {};
- -

Se você inserir pessoa no seu console JS e pressionar o botão, deverá obter o seguinte resultado:

- -
[object Object]
- -

Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:

- -
var pessoa = {
-  nome: ['Bob', 'Smith'],
-  idade: 32,
-  sexo: 'masculino',
-  interesses: ['música', 'esquiar'],
-  bio: function() {
-    alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.');
-  },
-  saudacao: function() {
-    alert('Oi! Eu sou ' + this.nome[0] + '.');
-  }
-};
-
- -

Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:

- -
pessoa.nome
-pessoa.nome[0]
-pessoa.idade
-pessoa.interesses[1]
-pessoa.bio()
-pessoa.saudacao()
- -

Agora você tem alguns dados e funcionalidades dentro de seu objeto e é capaz de acessá-los com uma sintaxe simples e agradável!

- -
-

Nota: Se você está tendo problemas para fazer isto funcionar, tente comparar seu código com a nossa versão — veja oojs-finished.html (ou veja um exemplo funcionando). O exemplo lhe dará uma tela em branco, mas tudo bem — novamente, abra seu devtools e tente digitar os comandos acima para ver a estrutura do objeto.

-
- -

Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um  com um nome (ex.: nome e idade vistos acima), e um valor (ex.: ['Bob', 'Smith'] e 32). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:

- -
var nomeDoObjeto = {
-  nomeMembro1: valorMembro1,
-  nomeMembro2: valorMembro2,
-  nomeMembro3: valorMembro3
-};
- -

O valor de um membro do objeto pode ser praticamente qualquer coisa. Em nosso objeto pessoa, temos uma string, um número, dois arrays e duas functions. Os primeiros quatro são data items (dados) e são referenciados como propriedades do objeto. Enquanto os dois últimos ítens são funções que permitem que o objeto faça algo com esses dados. São chamados de métodos do objeto.

- -

Um objeto como esse é chamado de  objeto literal — ao pé da letra, escrevemos o conteúdo do objeto conforme o criamos. Isto está em contraste com objetos instanciados de classes, que veremos mais adiante.

- -

É muito comum criar um objeto usando um objeto literal quando você deseja transferir uma série de itens de dados relacionados estruturados de alguma maneira, por exemplo, enviando uma solicitação para o servidor para ser colocado em um banco de dados. Enviar um único objeto é muito mais eficiente do que enviar vários itens individualmente, e é mais fácil trabalhar com um array, quando você deseja identificar itens individuais pelo nome.

- -

Notação de ponto

- -

Acima, você acessou as propriedades de objetos e métodos usando notação de ponto. O objeto nome (pessoa) atua como namespace (espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa encapsulada dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo: 

- -
pessoa.idade
-pessoa.interesse[1]
-pessoa.bio()
- -

Sub-namespaces

- -

É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:

- -
nome: ['Bob', 'Smith'],
- -

para

- -
nome : {
-  primeiro: 'Bob',
-  ultimo: 'Smith'
-},
- -

Aqui estamos efetivamente criando um sub-namespace. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:

- -
pessoa.nome.primeiro
-pessoa.nome.ultimo
- -

Importante: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de

- -
nome[0]
-nome[1]
- -

para

- -
nome.primeiro
-nome.ultimo
- -

Caso contrário seus métodos não funcionarão.

- -

Notação de colchetes

- -

Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:

- -
pessoa.idade
-pessoa.nome.primeiro
- -

Você pode usar:

- -
pessoa['idade']
-pessoa['nome']['primeiro']
- -

Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de arrays associativos — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.

- -

Setando membros do objeto

- -

Até agora nós apenas procuramos receber (ou apanhar) membros de objetos — podemos também setar (atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:

- -
pessoa.idade = 45;
-pessoa['nome']['ultimo'] = 'Cratchit';
- -

Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:

- -
pessoa.idade
-pessoa['nome']['ultimo']
- -

Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:

- -
pessoa['olhos'] = 'castanho'.
-pessoa.despedida = function() { alert( "Adeus a todos!" ); }
- -

Podemos testar nossos novos membros:

- -
pessoa['olhos'];
-pessoa.despedida();
- -

Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

Podemos, então, adicionar esse novo nome e valor ao objeto pessoa assim:

- -
pessoa[myDataName] = myDataValue;
- -

Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto pessoa :

- -
var myDataName = 'altura';
-var myDataValue = '1.75m';
-pessoa[myDataName] = myDataValue;
- -

Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:

- -
pessoa.altura
- -

Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.

- -

O que é o "this"?

- -

Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:

- -
saudacao: function(){
-  alert("Oi! Meu nome é " + this.nome.primeiro + ".");
-}
- -

Você deve estar se perguntando o que é o "this". A palavra-chave this se refere ao objeto atual em que o código está sendo escrito — nesse caso o this se refere a pessoa. Então por que simplesmente não escrever pessoa? Como verá no artigo Orientaçã a objeto em JavaScript para iniciantes, quando começamos a criar funções construtoras, etc, o this é muito útil — sempre lhe assegurará que os valores corretos estão sendo usados quando o contexto de um mebro muda (exemplo: duas instâncias diferentes do objeto pessoa podem ter diferentes nomes, mas vão querer usar seu próprio nome ao usar a saudação).

- -

Vamos ilustrar o que queremos dizer com um par de objetos pessoa:

- -
var pessoa1 = {
-  nome: 'Chris',
-  saudacao: function() {
-    alert('Oi! Meu nome é ' + this.nome + '.');
-  }
-}
-
-var pessoa2 = {
-  nome: 'Brian',
-  saudacao: function() {
-    alert('Oi! Meu nome é ' + this.nome + '.');
-  }
-} 
- -

Neste caso, pessoa1.saudacao() gerará "Oi! Meu nome é Chris."; No entanto, pessoa2.saudacao() retornará "Oi! Meu nome é Brian.", mesmo que os códigos dos métodos sejam idênticos. Como dissemos antes, o this é igual ao código do objeto dentro dele — não é exatamente útil quando estamos escrevendo objetos literais na mão, mas é realmente incrível quando adicionamos objetos gerados dinamicamente (por exemplo usando construtores). Tudo ficará mais claro mais para frente.

- -

Você vem usando objetos o tempo todo

- -

Enquanto passava por esses exemplos, você provavelmente andou pensando que essa notação de ponto que estamos usando é muito familiar. Isso é porque você vem usando isso durante todo o curso! Todas as vezes que trabalhamos num exemplo que usa uma API interna do navegador ou objetos Javascript, estamos usando objetos, porque esses recursos são construídos usando exatamente o mesmo tipo de estrutura de objetos que vimos aqui, embora mais complexos do que nossos exemplos básicos.

- -

Então quando usamos métodos de strings como:

- -
minhaString.split(',');
- -

Estamos usando um método disponível na instância da class String. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de String, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.

- -

Quando você acessa o document object model usando linhas como estas:

- -
var minhaDiv = document.createElement('div');
-var meuVideo = document.querySelector('video');
- -

Você está usando métodos disponíveis na instância da class Document. Cada vez que a página é recarrecada, uma instância de Document é criada, chamando document, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.

- -

O mesmo pode ser dito de basicamente qualquer outro objeto/API embutido que esteja usando — Array, Math, etc.

- -

Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a API de Notificações — que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:

- -
var minhaNotificacao = new Notification('Hello!');
- -

Novamente, olharemos constructores num artigo mais na frente.

- -
-

Nota: É útil pensar sobre como os objetos se comunicam passando mensagens - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.

-
- -

Teste suas habilidades !

- -

Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante  — veja  Test your skills: Object basics.

- -

Resumo

- -

Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto pessoa como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.

- -

No próximo artigo vamos começar a ver a teoria de programação orientada a objetos (OOP) e em como suas técnicas podem ser usadas em Javascript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

- -

Nesse módulo

- - diff --git "a/files/pt-br/aprender/javascript/objetos/heran\303\247a/index.html" "b/files/pt-br/aprender/javascript/objetos/heran\303\247a/index.html" deleted file mode 100644 index 81acc88a92..0000000000 --- "a/files/pt-br/aprender/javascript/objetos/heran\303\247a/index.html" +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Herança em JavaScript -slug: Aprender/JavaScript/Objetos/Herança -translation_of: Learn/JavaScript/Objects/Inheritance ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
- -

Com a maior parte dos detalhes principais do OOJS agora explicados, este artigo mostra como criar classes de objetos "child" (construtores) que herdam recursos de suas classes "parent". Além disso, apresentamos alguns conselhos sobre quando e onde você pode usar o OOJS e veja como as classes são tratadas na sintaxe moderna do ECMAScript.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico de computação, conhecimento básico de HTML e CSS, familiaridade com com o básico de Javascript (veja Primeiros passos e Construindo blocos) e OOJS básico (veja Introdução a objetos).
Objetivo:Entender como é possível implementar a herança em Javascript.
- -

Herança Prototipada

- -

Até agora vimos alguma herança em ação — vimos como funcionam as cadeias de protótipos e como os membros são herdados subindo em uma cadeia. Mas principalmente isso envolveu funções internas do navegador. Como criamos um objeto em JavaScript que herda de outro objeto?

- -

Vamos explorar como fazer isso com um exemplo concreto.

- -

Começando

- -

Primeiro de tudo, faça uma cópia local do arquivo oojs-class-inheritance-start.html (veja também ao vivo). Aqui dentro você encontrará o mesmo exemplo de construtor  Person() que utilizamos durante todo o módulo, com uma pequena diferença — definimos apenas as propriedades dentro do construtor:

- -
function Person(first, last, age, gender, interests) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-};
- -

Os métodos são todos definidos no protótipo do construtor. Por exemplo:

- -
Person.prototype.greeting = function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-};
- -
-

Nota: No código fonte, você também verá os métodos bio() e farewell() definidos. Depois você verá como eles podem ser herdados por outros construtores.

-
- -

Digamos que quiséssemos criar uma classe Teacher, como a que descrevemos em nossa definição inicial orientada a objetos, que herda todos os membros de Person, mas também inclui:

- -
    -
  1. Uma nova propriedade, subject — isso irá conter o assunto que o professor ensina.
    2. -
  2. Um método greeting() atualizado, que soa um pouco mais formal do que o método padrão  greeting() — mais adequado para um professor que se dirige a alguns alunos da escola.
    3. -
- -

Definindo uma função construtora Teacher()

- -

A primeira coisa que precisamos fazer é criar um construtor Teacher() — adicione o seguinte abaixo do código existente:

- -
function Teacher(first, last, age, gender, interests, subject) {
-  Person.call(this, first, last, age, gender, interests);
-
-  this.subject = subject;
-}
- -

Isto parece similar ao construtor Person de várias maneiras, mas há algo estranho aqui que nós não vimos antes — a função call(). Esta função basicamente permite chamar uma função definida em outro lugar, mas no contexto atual. O primeiro parâmetro especifica o valor this que você deseja usar ao executar a função, e os outros parâmetros são aqueles que devem ser passados para a função quando ela é invocada.

- -

Nós queremos que o construtor Teacher() pegue os mesmos parâmetros que o construtor Person() de onde ele está herdando, então especificamos todos eles como parâmetros na chamada call().

- -

A última linha dentro do construtor simplesmente define a nova propriedade subject que os professores terão, que pessoas genéricas não possuem.

- -

Como nota, poderíamos simplesmente ter feito isso:

- -
function Teacher(first, last, age, gender, interests, subject) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.subject = subject;
-}
- -

Mas isso é apenas redefinir as propriedades de novo, não herdá-las de  Person(), de modo que ela derrota o ponto que estamos tentando fazer. Também leva mais linhas de código.

- -

Herdando de um construtor sem parâmetros

- -

Observe que, se o construtor do qual você está herdando não tomar seus valores de propriedade de parâmetros, não será necessário especificá-los como argumentos adicionais em call(). Então, por exemplo, se você tivesse algo realmente simples assim:

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Você pode herdar as propriedades width e height fazendo isso (assim como as outras etapas descritas abaixo, é claro):

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Observe que apenas especificamos this dentro de call() — nenhum outro parâmetro é necessário, já que não estamos herdando propriedades do pai que são configuradas por meio de parâmetros.

- -

Definindo o protótipo e referência de construtor do Teacher()

- -

Tudo está bem até agora, mas nós temos um problema. Nós definimos um novo construtor, e ele tem uma propriedade  prototype, que por padrão apenas contém uma referência à própria função construtora. Ele não contém os métodos da propriedade prototype do construtor Person. Para ver isso, insira Object.getOwnPropertyNames(Teacher.prototype) no campo de entrada de texto ou no seu console JavaScript. Em seguida, insira-o novamente, substituindo Teacher por Person. O novo construtor também não herda esses métodos. Para ver isso, compare as saídas de Person.prototype.greeting e Teacher.prototype.greeting. Precisamos obter Teacher() para herdar os métodos definidos no protótipo Person(). Então, como fazemos isso?

- -
    -
  1. Adicione a seguinte linha abaixo da sua adição anterior: - 
    Teacher.prototype = Object.create(Person.prototype);
    - Aqui nosso amigo create() vem para o resgate novamente. Nesse caso, estamos usando para criar um novo objeto e torná-lo o valor de Teacher.prototype. O novo objeto tem Person.prototype como seu protótipo e, portanto, herdará, se e quando necessário, todos os métodos disponíveis no Person.prototype.
    2. -
  2. Precisamos fazer mais uma coisa antes de prosseguirmos. Depois de adicionar a última linha, a propriedade constructor de Teacher.prototype agora é igual a Person(), porque apenas definimos Teacher.prototype para fazer referência a um objeto que herda suas propriedades de Person.prototype! Tente salvar seu código, carregar a página em um navegador e inserir Teacher.prototype.constructor no console para verificar.
    3. -
  3. Isso pode se tornar um problema, então precisamos definir isso corretamente. Você pode fazer isso voltando ao seu código-fonte e adicionando a seguinte linha na parte inferior: - 
    Object.defineProperty(Teacher.prototype, 'constructor', {
-    value: Teacher,
-    enumerable: false, // so that it does not appear in 'for in' loop
-    writable: true });
    -
    4. -
  4. Agora, se você salvar e atualizar, entrar em Teacher.prototype.constructor deve retornar Teacher(), conforme desejado, além de estarmos herdando de Person()!
    5. -
- -

Dar a Teacher() uma nova função greeting() 

- -

Para finalizar nosso código, precisamos definir uma nova função greeting() no construtor Teacher().

- -

A maneira mais fácil de fazer isso é defini-lo no protótipo do Teacher() — adicione o seguinte na parte inferior do seu código:

- -
Teacher.prototype.greeting = function() {
-  var prefix;
-
-  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
-    prefix = 'Mr.';
-  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
-    prefix = 'Mrs.';
-  } else {
-    prefix = 'Mx.';
-  }
-
-  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
-};
- -

Isso alerta a saudação do professor, que também usa um prefixo de nome apropriado para seu gênero, elaborado usando uma instrução condicional.

- -

Testando o exemplo

- -

Agora que você digitou todo o código, tente criar uma instância de objeto do Teacher() colocando o seguinte na parte inferior do seu JavaScript (ou algo semelhante à sua escolha):

- -
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
- -

Agora salve e atualize e tente acessar as propriedades e os métodos do novo objeto teacher1, por exemplo:

- -
teacher1.name.first;
-teacher1.interests[0];
-teacher1.bio();
-teacher1.subject;
-teacher1.greeting();
-teacher1.farewell();
- -

Tudo isso deve funcionar bem. As consultas nas linhas 1, 2, 3 e 6 acessam membros herdados do construtor genérico Person() (class). A consulta na linha 4 acessa um membro que está disponível somente no construtor mais especializado  Teacher() (class). A consulta na linha 5 teria acessado um membro herdado de Person(), exceto pelo fato de que Teacher() tem seu próprio membro com o mesmo nome, portanto, a consulta acessa esse membro.

- -
-

Note: If you have trouble getting this to work, compare your code to our finished version (see it running live also).

-
- -

A técnica que abordamos aqui não é a única maneira de criar classes herdadas em JavaScript, mas funciona bem e dá uma boa idéia sobre como implementar a herança em JavaScript.

- -

Você também pode estar interessado em conferir alguns dos novos recursos {{glossary("ECMAScript")}} que nos permitem fazer herança mais claramente em JavaScript (veja Classes). Nós não cobrimos esses aqui, pois eles ainda não são suportados amplamente pelos navegadores. Todas as outras construções de código que discutimos neste conjunto de artigos são suportadas desde o IE9 ou anterior, e existem maneiras de obter suporte anterior a isso.

- -

Uma maneira comum é usar uma biblioteca JavaScript — a maioria das opções populares tem um conjunto fácil de funcionalidade disponível para fazer herança com mais facilidade e rapidez. CoffeeScript por exemplo, fornece class, extends, etc.

- -

Um exercício adicional

- -

Em nossa seção de teoria OOP, incluímos também uma classe Student como um conceito, que herda todos os recursos de Person, e também tem um método  greeting() diferente de Person que é muito mais informal do que a saudação do Teacher. Dê uma olhada na aparência da saudação do aluno nessa seção e tente implementar seu próprio construtor Student() que herda todos os recursos de Person(), e implemente a função greeting() diferente.

- -
-

Note: If you have trouble getting this to work, have a look at our finished version (see it running live also).

-
- -

Sumário de membro do objeto

- -

Resumindo, você basicamente tem três tipos de propriedade / método para se preocupar:

- -
    -
  1. Aqueles definidos dentro de uma função construtora que são dadas a instâncias de objetos. Estes são bastante fáceis de detectar — em seu próprio código personalizado, eles são os membros definidos dentro de um construtor usando as linhas this.x = x ; no código do navegador, eles são os membros disponíveis apenas para instâncias de objetos (geralmente criados chamando um construtor usando a palavra-chave new, por exemplo, var myInstance = new myConstructor()).
    2. -
  2. Aqueles definidos diretamente no próprio construtor, que estão disponíveis apenas no construtor. Geralmente, eles estão disponíveis apenas em objetos de navegador internos e são reconhecidos por serem encadeados diretamente em um construtor, não em uma instância. Por exemplo, Object.keys().
    3. -
  3. Aqueles definidos no protótipo de um construtor, que são herdados por todas as instâncias e herdam as classes de objetos. Estes incluem qualquer membro definido na propriedade de protótipo de um Construtor, por ex. myConstructor.prototype.x().
    4. -
- -

Se você não tem certeza de qual é qual, não se preocupe com isso ainda — você ainda está aprendendo e a familiaridade virá com a prática.

- -

Classes ECMAScript 2015

- -

O ECMAScript 2015 introduz a sintaxe de classe em JavaScript como uma maneira de escrever classes reutilizáveis usando uma sintaxe mais fácil e mais limpa, que é mais semelhante a classes em C ++ ou Java. Nesta seção, converteremos os exemplos Pessoa e Professor da herança protótipo para as classes, para mostrar como é feito.

- -
-

Nota: Essa forma moderna de escrever classes é suportada em todos os navegadores modernos, mas ainda vale a pena saber como a herança prototípica subjacente, caso você trabalhe em um projeto que exija suporte a um navegador que não suporte essa sintaxe (mais notavelmente o Internet Explorer) .

-
- -

Vejamos uma versão reescrita do exemplo Person, estilo de classe:

- -
class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  greeting() {
-    console.log(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
- -

A declaração class indica que estamos criando uma nova classe. Dentro deste bloco, definimos todos os recursos da classe:

- - - -

Agora podemos instanciar instâncias de objeto usando o operador new, da mesma maneira que fizemos antes:

- -
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
-han.greeting();
-// Hi! I'm Han
-
-let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
-leia.farewell();
-// Leia has left the building. Bye for now
-
- -
-

Nota: Sob o capô, suas classes estão sendo convertidas em modelos de herança protótipos — isso é apenas açúcar sintático. Mas tenho certeza que você concordará que é mais fácil escrever.

-
- -

Herança com sintaxe de classe

- -

Acima nós criamos uma classe para representar uma pessoa. Eles têm uma série de atributos que são comuns a todas as pessoas; Nesta seção, criaremos nossa classe especializada Teacher, tornando-a herdada de Person usando a sintaxe de classe moderna. Isso é chamado de criação de uma subclasse ou subclasse.

- -

Para criar uma subclasse, usamos a palavra-chave extends para informar ao JavaScript a classe na qual queremos basear nossa classe.

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    this.name = {
-      first,
-      last
-    };
-
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  // subject and grade are specific to Teacher
-  this.subject = subject;
-  this.grade = grade;
-  }
-}
- -

Podemos tornar o código mais legível definindo o operador super() como o primeiro item dentro do constructor(). Isso chamará o construtor da classe pai e herdará os membros que especificarmos como parâmetros de super(), desde que sejam definidos lá:

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    super(first, last, age, gender, interests);
-
-    // subject and grade are specific to Teacher
-    this.subject = subject;
-    this.grade = grade;
-  }
-}
-
- -

Quando instanciamos instâncias de objeto Teacher , podemos agora chamar métodos e propriedades definidos em Teacher e Person, como seria de esperar:

- -
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
-snape.greeting(); // Hi! I'm Severus.
-snape.farewell(); // Severus has left the building. Bye for now.
-snape.age // 58
-snape.subject; // Dark arts
-
- -

Como fizemos com Teachers, poderíamos criar outras subclasses de Person para torná-las mais especializadas sem modificar a classe base.

- -
-

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

-
- -

Getters e Setters

- -

Pode haver momentos em que queremos alterar os valores de um atributo nas classes que criamos ou não sabemos qual será o valor final de um atributo. Usando o exemplo Teacher, podemos não saber o assunto que o professor ensinará antes de criá-lo, ou o assunto pode mudar entre os termos.

- -

Podemos lidar com essas situações com getters e setters.

- -

Vamos melhorar a classe Professor com getters e setters. A aula começa da mesma forma que foi a última vez que olhamos para ela.

- -

Os getters e setters trabalham em pares. Um getter retorna o valor atual da variável e seu setter correspondente altera o valor da variável para o que ela define.

- -

A classe Teacher modificada é assim:

- -
class Teacher extends Person {
-  constructor(first, last, age, gender, interests, subject, grade) {
-    super(first, last, age, gender, interests);
-    // subject and grade are specific to Teacher
-    this._subject = subject;
-    this.grade = grade;
-  }
-
-  get subject() {
-    return this._subject;
-  }
-
-  set subject(newSubject) {
-    this._subject = newSubject;
-  }
-}
-
- -

Em nossa classe acima, temos um getter e setter para a propriedade subject. Usamos  _  para criar um valor separado no qual armazenar nossa propriedade de nome. Sem usar essa convenção, obteríamos erros toda vez que chamássemos get ou set. Neste ponto:

- - - -

O exemplo abaixo mostra os dois recursos em ação:

- -
// Check the default value
-console.log(snape.subject) // Returns "Dark arts"
-
-// Change the value
-snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
-
-// Check it again and see if it matches the new value
-console.log(snape.subject) // Returns "Balloon animals"
-
- -
-

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

-
- -

Quando você usaria a herança em JavaScript?

- -

Particularmente após este último artigo, você pode estar pensando "woo, isso é complicado". Bem, você está certo. Protótipos e herança representam alguns dos aspectos mais complexos do JavaScript, mas muito do poder e flexibilidade do JavaScript vem de sua estrutura e herança de objetos, e vale a pena entender como ele funciona.

- -

De certa forma, você usa herança o tempo todo. Sempre que você usa vários recursos de uma API da Web ou métodos / propriedades definidos em um objeto de navegador interno que você chama em suas cadeias de caracteres, matrizes, etc., você está implicitamente usando herança.

- -

Em termos de usar a herança em seu próprio código, você provavelmente não a usará com frequência, principalmente no começo e em pequenos projetos. É uma perda de tempo usar objetos e herança apenas por causa dela quando você não precisa deles. Mas à medida que suas bases de código aumentam, é mais provável que você encontre uma necessidade para isso. Se você estiver começando a criar vários objetos com recursos semelhantes, criar um tipo de objeto genérico para conter toda a funcionalidade compartilhada e herdar esses recursos em tipos de objetos mais especializados pode ser conveniente e útil.

- -
-

Nota: Por causa da maneira como o JavaScript funciona, com a cadeia de protótipos, etc., o compartilhamento de funcionalidade entre objetos é frequentemente chamado de delegação. Os objetos especializados delegam a funcionalidade a um tipo de objeto genérico.

-
- -

Ao usar a herança, você é aconselhado a não ter muitos níveis de herança, e manter um controle cuidadoso de onde você define seus métodos e propriedades. É possível começar a escrever código que modifica temporariamente os protótipos dos objetos do navegador interno, mas você não deve fazer isso a menos que tenha um bom motivo. Demasiada herança pode levar a confusão sem fim, e dor infinita quando você tenta depurar esse código.

- -

Em última análise, os objetos são apenas outra forma de reutilização de código, como funções ou loops, com seus próprios papéis e vantagens específicos. Se você estiver criando um monte de variáveis e funções relacionadas e quiser rastreá-las todas juntas e empacotá-las perfeitamente, um objeto é uma boa ideia. Objetos também são muito úteis quando você quer passar uma coleção de dados de um lugar para outro. Ambas as coisas podem ser alcançadas sem o uso de construtores ou herança. Se você precisa apenas de uma única instância de um objeto, provavelmente é melhor usar apenas um literal de objeto e certamente não precisa de herança.

- -

Alternativas para estender a cadeia de protótipos

- -

Em JavaScript, existem várias maneiras diferentes de estender o protótipo de um objeto além do que mostramos acima. Para saber mais sobre as outras formas, visite nosso artigo Herança e a cadeia de protótipos.

- -

Sumário

- -

Este artigo cobriu o restante da teoria e sintaxe central do OOJS que achamos que você deveria saber agora. Neste ponto, você deve entender os princípios de objeto e OOP JavaScript, protótipos e herança prototypal, como criar classes (construtores) e instâncias de objetos, adicionar recursos a classes e criar subclasses que herdam de outras classes.

- -

No próximo artigo, veremos como trabalhar com JavaScript Object Notation (JSON), um formato comum de troca de dados escrito usando objetos JavaScript.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/objetos/index.html b/files/pt-br/aprender/javascript/objetos/index.html deleted file mode 100644 index 4c19a1956b..0000000000 --- a/files/pt-br/aprender/javascript/objetos/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Introdução a objetos em Javascript -slug: Aprender/JavaScript/Objetos -tags: - - Iniciante - - JavaScript - - Objetos -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

Em JavaScript, quase tudo é objeto. Desde as funcionalidades padrão, como strings e arrays, até as APIs para navegadores baseadas na linguagem. Até você pode criar seus próprios objetos. Você pode encapsular funções e variáveis relacionadas de uma forma eficiente. Os objetos agem como uma espécie de manipuladores de dados. Compreender a natureza da orientação a objetos do JavaScript é crucial para aprofundar os conhecimentos acerca da linguagem. Por isso, nós elaboramos esse módulo para auxiliá-lo. Ensinaremos a teoria de objetos em detalhes. Crie seus próprios objetos!

- -

Antes de iniciar este módulo, você deve possuir alguma familiaridade com HTML e CSS. Se não possui, antes de continuar os estudos dos Objetos em Javascript, indicamos os módulos Introdução ao HTML e Introdução ao CSS .

- -

Você precisa possuir também alguma familiaridade com os conceitos básicos de Javascript. Para isso indicamos o módulo Primeitos Passos: JavaScript e Blocos de Construção do JavaScript.

- -
-

Nota: Se você está trabalhando em um computador/tablet/outros equipamentos , ao qual  não é possível  criar seus próprios arquivos , você pode testar (em grande parte) os nossos códigos de exemplo,  em um editor de código online , tal como o JSBin  ou o Thimble .

-
- -

Guias

- -
-
Objetos: O básico.
-
No primeiro artigo sobre objetos em Javascript, vamos analisar a sintaxe básica de objetos e rever algumas caracterísitcas. Nós já notamos, como mencionado anteriomente, que muitas funcionalidades que você já teve algum contato são, na verdade, Objetos .
-
JavaScript Orientado a Objetos para iniciantes
-
Com pelo menos o básico, agora vamos focar na Orientação a Objetos JavaScript  (OOJS) — este artigo cobre uma visão básica da teoria da Programação Orientada a Objetos (POO). Depois iremos explorar como o JavaScript emula classes de objetos via funções construtoras e como criar instâncias de objetos.
-
Prototipação de Objetos
-
Prototypes é o mecanismo pelo qual os objetos JavaScript herdam características de outros e como eles funcionam de uma forma diferente dos mecanismos de herança de linguagens de programação clássicas. Neste artigo, vamos explorar essas diferenças, explicar como a cadeia de protótipos trabalha e perceber como a propriedade prototype pode ser usada para adicionar métodos a contrutores existentes.
-
Herança em JavaScript
-
Com a parte central da OOJS já explicada, este artigo mostra como criar classes de objetos "filhos" (construtores) que herdam características das suas classes "pais". Nós daremos ainda algumas dicas sobre quando e onde você pode usar OOJS.
-
Trabalhando com dados JSON
-
JavaScript Object Notation (JSON) é um formato padronizado para representar estruturas de dados em objetos JavaScript,  que é comunmente usado para representar e transmitir dados em sites da web (i.e. enviar alguma informação do serviror para o cliente, para ser exibido na página). Neste artigo vamos mostrar o que você precisa para trabalhar com JSON usando JavaScript, inclusive acesso a itens de dados num objeto JSON. Além disso, mostraremos como criar seu próprio JSON.
-
Prática de Construção de Objetos
-
No artigo anterior, nós vimos toda a parte essencial da teoria de Objetos em JavaScript, além de detalhes de sintaxe, fornecendo assim uma base sólida para você seguir adiante. No presente artigo, vamos nos aprofundar com exercícios práticos na construção de objetos personalizados. Faremos algo divertido e colorido  — algumas bolas coloridas saltitantes!
-
- -

Aprender mais...

- -
-
Acrescentando funcionalidades a nossa demo de bolas saltitantes
-
Nesse "aprenda mais...", incentivamos você a usar a demo das bolas saltitantes do artigo anterior como ponto de partida para acrescentar algumas novas e interessantes funcionalidades.
-
diff --git a/files/pt-br/aprender/javascript/objetos/json/index.html b/files/pt-br/aprender/javascript/objetos/json/index.html deleted file mode 100644 index e10e3e27a6..0000000000 --- a/files/pt-br/aprender/javascript/objetos/json/index.html +++ /dev/null @@ -1,350 +0,0 @@ ---- -title: Trabalhando com JSON -slug: Aprender/JavaScript/Objetos/JSON -tags: - - JSON - - JavaScript - - assíncrono -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

JavaScript Object Notation (JSON) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Você se deparará com isso com bastante frequência, portanto, neste artigo, oferecemos tudo o que você precisa para trabalhar com o JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar os dados dentro dele e criar o JSON.

- - - - - - - - - - - - -
Pré-requisitos -

Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja Primeiros passos e Construindo blocos) e o básico de OOJS (veja Introdução a objetos).

-
Objetivo: -

Para entender como trabalhar com dados armazenados em JSON e criar seus próprios objetos JSON.

-
- -

Não, sério, o que é o JSON?

- -

{{glossary("JSON")}} é um formato de dados baseado em texto seguindo a sintaxe do objeto JavaScript, que foi popularizada por  Douglas Crockford. Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON

- -

O JSON existe como uma string — útil quando você deseja transmitir dados por uma rede. Ele precisa ser convertido em um objeto JavaScript nativo quando você quiser acessar os dados. Isso não é um grande problema —  o JavaScript fornece um objeto JSON global que possui métodos disponíveis para conversão entre os dois.

- -
-

Nota: Converter uma string em um objeto nativo é chamado de análise, enquanto a conversão de um objeto nativo em uma string para que possa ser transmitida pela rede é chamada de stringification.

-
- -

Um objeto JSON pode ser armazenado em seu próprio arquivo, que é basicamente apenas um arquivo de texto com uma extensão de .json, e um {{glossary("MIME type")}} de application/json.

- -

Estrutura JSON

- -

Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Se nós carregássemos esse objeto em um programa JavaScript, analisado em uma variável chamada superHeroes por exemplo, poderíamos então acessar os dados dentro dele usando a mesma notação dot / bracket que observamos no artigo básico do objeto JavaScript. Por exemplo:

- -
superHeroes.homeTown
-superHeroes['active']
- -

Para acessar os dados mais abaixo na hierarquia, basta encadear os nomes de propriedades e os índices de array necessários juntos. Por exemplo, para acessar o terceiro superpoder do segundo herói listado na lista de membros, você faria isso:

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Primeiro temos o nome da variável — superHeroes.
    2. -
  2. Por dentro, queremos acessar a propriedade dos members, então usamos ["members"].
    3. -
  3. members contém uma matriz preenchida por objetos. Queremos acessar o segundo objeto dentro da matriz, então usamos [1].
    4. -
  4. Dentro deste objeto, queremos acessar a propriedade powers, então usamos ["powers"].
    5. -
  5. Dentro da propriedade  powers está um array contendo os superpoderes do herói selecionado. Nós queremos o terceiro, então nós usamos
    - [2].
    6. -
- -
-

Nota: Nós fizemos o JSON visto acima disponível dentro de uma variável em nosso exemplo JSONTest.html (veja o código fonte). Tente carregar isso e depois acessar os dados dentro da variável pelo console JavaScript do seu navegador.

-
- -

Matrizes como JSON

- -

Acima, mencionamos que o texto JSON basicamente se parece com um objeto JavaScript, e isso é basicamente correto. A razão pela qual dissemos "principalmente certo" é que uma matriz também é válida como JSON, por exemplo:

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

O código acima é um JSON perfeitamente válido. Você teria que acessar itens de matriz (em sua versão analisada) iniciando com um índice de matriz, por exemplo [0]["powers"][0].

- -

Outras notas

- - - -

Aprendizado ativo: trabalhando por meio de um exemplo de JSON

- -

Então, vamos trabalhar em um exemplo para mostrar como poderíamos usar alguns dados JSON em um site.

- -

Começando

- -

Para começar, faça cópias locais de nossos arquivos heroes.html e style.css. O último contém alguns CSS simples para estilizar nossa página, enquanto o primeiro contém um HTML muito simples:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Mais um elemento {{HTMLElement("script")}} para conter o código JavaScript que escreveremos neste exercício. No momento, ele contém apenas duas linhas, que pegam referências aos elementos {{HTMLElement("header")}} e {{HTMLElement("section")}} e os armazenam em variáveis:

- -
var header = document.querySelector('header');
-var section = document.querySelector('section');
- -

Disponibilizamos nossos dados JSON em nosso GitHub, emhttps://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

Vamos carregá-lo em nossa página e usar algumas manipulações de DOM nifty para exibi-lo, assim:

- -

- -

Obtendo o JSON

- -

Para obter o JSON, vamos usar uma API chamada {{domxref("XMLHttpRequest")}} (geralmente chamada de XHR). Esse é um objeto JavaScript muito útil que nos permite fazer solicitações de rede para recuperar recursos de um servidor via JavaScript (por exemplo, imagens, texto, JSON e até trechos de código HTML), o que significa que podemos atualizar pequenas seções de conteúdo sem ter que recarregar todo página. Isso levou a páginas da Web mais responsivas e parece empolgante, mas está além do escopo deste artigo ensinar isso com muito mais detalhes.

- -
    -
  1. Para começar, vamos armazenar a URL do JSON que queremos recuperar em uma variável. Adicione o seguinte na parte inferior do seu código JavaScript: - 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. Para criar uma solicitação, precisamos criar uma nova instância de objeto de solicitação a partir do construtor XMLHttpRequest usando a palavra-chave new. Adicione o seguinte abaixo sua última linha: - 
    var request = new XMLHttpRequest();
    -
    3. -
  3. Agora precisamos abrir uma nova solicitação usando o método open() . Adicione a seguinte linha: - 
    request.open('GET', requestURL);
    - -

    Isso leva pelo menos dois parâmetros — existem outros parâmetros opcionais disponíveis. Nós só precisamos dos dois obrigatórios para este exemplo simples:

    - -
      -
    • O método HTTP a ser usado ao fazer a solicitação de rede. Neste caso, GET é bom, pois estamos apenas recuperando alguns dados simples.
      • -
    • O URL para fazer a solicitação — esta é a URL do arquivo JSON que armazenamos anteriormente.
      • -
    -
    4. -
  4. Em seguida, adicione as duas linhas a seguir — aqui estamos definindo o  responseType como JSON, para que o XHR saiba que o servidor retornará o JSON e que isso deve ser convertido nos bastidores em um objeto JavaScript. Em seguida, enviamos a solicitação com o método send(): - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. A última parte desta seção envolve aguardar a resposta retornar do servidor e, em seguida, lidar com ela. Adicione o seguinte código abaixo do seu código anterior: - 
    request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Aqui estamos armazenando a resposta ao nosso pedido (disponível na propriedade response) em uma variável chamada superHeroes; essa variável agora conterá o objeto JavaScript com base no JSON! Então, estamos passando esse objeto para duas chamadas de função — a primeira preencherá o <header> com os dados corretos, enquanto a segunda criará uma ficha de informações para cada herói da equipe e a inserirá na <section>.

- -

Envolvemos o código em um manipulador de eventos que é executado quando o evento de carregamento é acionado no objeto de solicitação (consulte onload) — isso ocorre porque o evento load é acionado quando a resposta é retornada com sucesso; Fazê-lo desta forma garante que request.response estará definitivamente disponível quando chegarmos a tentar fazer algo com ele.

- -

Preenchendo o Cabeçalho

- -

Agora, recuperamos os dados JSON e os convertemos em um objeto JavaScript, vamos usá-lo escrevendo as duas funções mencionadas acima. Primeiro de tudo, adicione a seguinte definição de função abaixo do código anterior:

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

Nós chamamos o parâmetro jsonObj, para nos lembrarmos que esse objeto JavaScript foi originado do JSON. Aqui, primeiro criamos um elemento {{HTMLElement("h1")}} como createElement(), definimos seu textContent para igualar a propriedade squadName do objeto e, em seguida, o adicionamos ao cabeçalho usando appendChild(). Em seguida, fazemos uma operação muito semelhante com um parágrafo: criá-lo, definir seu conteúdo de texto e anexá-lo ao cabeçalho. A única diferença é que seu texto é definido como uma string concatenada contendo as propriedades homeTown e formed do objeto.

- -

Criando os cartões de informações do herói

- -

Em seguida, adicione a seguinte função na parte inferior do código, que cria e exibe as cartas de super-heróis:

- -
function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
-
-  for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    var superPowers = heroes[i].powers;
-    for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

Para começar, armazenamos a propriedade  members do objeto JavaScript em uma nova variável. Esta matriz contém vários objetos que contêm as informações para cada herói.

- -

Em seguida, usamos um loop for para percorrer cada objeto na matriz. Para cada um, nós:

- -
    -
  1. Criamos vários novos elementos: um <article>, um <h2>, três <p>s, e um <ul>.
    2. -
  2. Definimos o <h2> para conter o name do herói atual.
    3. -
  3. Preenchemos os três parágrafos com sua secretIdentity, age, e uma linha dizendo "Superpoderes:" para introduzir as informações na lista.
    4. -
  4. Armazenamos a propriedade powers em outra nova variável chamada superPowers — isso contém uma matriz que lista os superpoderes do herói atual.
    5. -
  5. Usamos outro loop for para percorrer os superpoderes do herói atual — para cada um criamos um elemento <li> colocamos o super poder dentro dele e colocamos o listItem dentro do elemento <ul> (myList) usando appendChild().
    6. -
  6. A última coisa que fizemos foi acrescentar os <h2>, <p>s, e <ul> dentro do <article> (myArticle), depois acrescentar o <article> dentro do <section>. A ordem em que as coisas são anexadas é importante, pois essa é a ordem em que elas serão exibidas dentro do HTML.
    7. -
- -
-

Nota: Se você está com problemas pegue um exemplo para trabalhar, tente nosso código fonte heroes-finished.html (veja isso ao vivo também.)

-
- -
-

Nota: Se você está tendo problemas para seguir a notação ponto / colchete que estamos usando para acessar o objeto JavaScript, pode ajudar a abrir o arquivo superheroes.json em outra guia ou em seu editor de texto, e consultá-lo enquanto observa nosso JavaScript. Você também pode consultar o artigo sobre conceitos O básico de objetos JavaScript para obter mais informações sobre a notação de pontos e colchetes.

-
- -

Conversão entre objetos e texto

- -

O exemplo acima foi simples em termos de acesso ao objeto JavaScript, porque definimos a solicitação XHR para converter a resposta JSON diretamente em um objeto JavaScript usando:

- -
request.responseType = 'json';
- -

Mas às vezes não temos muita sorte — às vezes recebemos uma string JSON bruta e precisaremos convertê-la em um objeto por conta própria. E quando queremos enviar um objeto JavaScript pela rede, precisamos convertê-lo em JSON (uma string) antes de enviá-lo. Felizmente, esses dois problemas são tão comuns no desenvolvimento da Web que um objeto JSON interno está disponível nos navegadores, o que contém os dois métodos a seguir:

- - - -

Você pode ver o primeiro em ação em nosso exemplo heroes-finished-json-parse.html (veja o source code) — isso faz exatamente a mesma coisa que o exemplo que construímos anteriormente, exceto pelo fato de configurarmos o XHR para retornar texto JSON bruto, em seguida, usado parse() para convertê-lo em um objeto JavaScript real. O trecho principal do código está aqui:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  var superHeroesText = request.response; // get the string from the response
-  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

Como você pode imaginar, stringify() funciona da maneira oposta. Tente inserir as seguintes linhas no console JavaScript de seu navegador, uma por uma, para vê-lo em ação:

- -
var myJSON = { "name": "Chris", "age": "38" };
-myJSON
-var myString = JSON.stringify(myJSON);
-myString
- -

Aqui estamos criando um objeto JavaScript, em seguida, verificando o que ele contém, convertendo-o em uma string JSON usando stringify() — salvando o valor de retorno em uma nova variável — e, em seguida, verificando-o novamente.

- -

Sumário

- -

Neste artigo, fornecemos um guia simples para usar o JSON em seus programas, incluindo como criar e analisar o JSON e como acessar dados bloqueados nele. No próximo artigo começaremos a analisar o JavaScript orientado a objetos.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

Nesse módulo

- - diff --git a/files/pt-br/aprender/javascript/objetos/object-oriented_js/index.html b/files/pt-br/aprender/javascript/objetos/object-oriented_js/index.html deleted file mode 100644 index 7772eec5cf..0000000000 --- a/files/pt-br/aprender/javascript/objetos/object-oriented_js/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: JavaScript orientado a objetos para iniciantes -slug: Aprender/JavaScript/Objetos/Object-oriented_JS -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Com o básico fora do caminho, agora vamos nos concentrar no JavaScript orientado a objetos (OOJS) — Este artigo apresenta uma visão básica da teoria de programação orientada a objeto (OOP), em seguida, explora como o JavaScript emula as classes de objetos através de funções de construtor e como criar instâncias de objeto.

- - - - - - - - - - - - -
Pré-requisitos:Alfabetização básica em informática, um entendimento básico de HTML e CSS, familiaridade com o básico do JavaScript (consulte Primeiros passos e Blocos de construção) e noções básicas do OOJS (consulte Introdução aos objetos).
Objetivo:Para entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com JavaScript ("tudo é um objeto") e como criar construtores e instâncias de objetos.
- -

Programação orientada a objetos - o básico

- -

Para começar, vamos dar uma visão simplista e de alto nível do que é programação orientada a objeto (OOP). Dizemos simplista, porque a OOP pode rapidamente se tornar muito complicada, e dar a ela um tratamento completo agora provavelmente confundiria mais do que ajuda. A idéia básica da OOP é que usamos objetos para modelar coisas do mundo real que queremos representar dentro de nossos programas, e / ou fornecer uma maneira simples de acessar funcionalidades que de outra forma seriam difíceis ou impossíveis de usar.

- -

Os objetos podem conter dados e códigos relacionados, que representam informações sobre o que você está tentando modelar e a funcionalidade ou o comportamento que você deseja ter. Dados de objeto (e muitas vezes, funções também) podem ser armazenados ordenadamente (a palavra oficial é encapsulados) dentro de um pacote de objetos (que pode ser dado um nome específico para se referir, que é às vezes chamado de namespace), tornando fácil de estruturar e acessar; objetos também são comumente usados como armazenamentos de dados que podem ser facilmente enviados pela rede.

- -

Definindo um modelo de objeto

- -

Vamos considerar um programa simples que exibe informações sobre os alunos e professores de uma escola. Aqui vamos olhar para a teoria OOP em geral, não no contexto de qualquer linguagem de programação específica.

- -

Para começar, poderíamos retornar ao nosso tipo de objeto Person do nosso primeiro artigo de objetos, que define os dados genéricos e a funcionalidade de uma pessoa. Há muitas coisas que você poderia saber sobre uma pessoa (endereço, altura, tamanho do sapato, perfil de DNA, número de passaporte, traços de personalidade significativos ...), mas neste caso estamos interessados apenas em mostrar seu nome, idade, sexo e interesses, e também queremos ser capazes de escrever uma breve introdução sobre eles com base nesses dados e fazê-los dizer oi. Isso é conhecido como abstração — criando um modelo simples de uma coisa mais complexa, que representa seus aspectos mais importantes de uma forma que é fácil trabalhar com os objetivos do nosso programa.

- -

- -

Criando objetos reais

- -

De nossa classe, podemos criar instâncias de objeto — objetos que contêm os dados e a funcionalidade definidos na classe. Da nossa classe Person, podemos criar algumas pessoas reais:

- -

- -

Quando uma instância de objeto é criada a partir de uma classe, a função construtora da classe é executada para criá-la. Esse processo de criação de uma instância de objeto de uma classe é chamado de instanciação — a instância do objeto é instanciada a partir da classe.

- -

Classes especialistas

- -

Neste caso, não queremos pessoas genéricas — queremos professores e alunos, que são tipos mais específicos de pessoas. Em OOP, podemos criar novas classes com base em outras classes — essas novas classes filhas podem herdar os recursos de dados e código de sua classe pai, para que você possa reutilizar a funcionalidade comum a todos os tipos de objetos em vez de duplicá-los. Onde a funcionalidade difere entre as classes, você pode definir recursos especializados diretamente sobre eles, conforme necessário.

- -

- -

Isso é realmente útil — professores e alunos compartilham muitos recursos comuns, como nome, sexo e idade, por isso é conveniente definir apenas esses recursos uma vez. Você também pode definir o mesmo recurso separadamente em classes diferentes, já que cada definição desse recurso estará em um namespace diferente. Por exemplo, a saudação de um aluno pode estar no formato "Yo, I'm [firstName]" (por exemplo, Yo, I'm Sam), enquanto um professor pode usar algo mais formal, como "Olá, meu nome é [Prefixo [lastName], e eu ensino [Subject]. " (por exemplo Olá, Meu nome é Mr Griffiths, e eu ensino Química).

- -
-

Nota: A palavra chique para a capacidade de múltiplos tipos de objeto de implementar a mesma funcionalidade é o polimorfismo. Apenas no caso de você estar se perguntando.

-
- -

Agora você pode criar instâncias de objetos de suas classes filhas. Por exemplo:

- -

- -

No restante do artigo, começaremos a analisar como a teoria da POO pode ser colocada em prática no JavaScript.

- -

Construtores e instâncias de objeto

- -

O JavaScript usa funções especiais chamadas funções construtoras para definir objetos e seus recursos. Eles são úteis porque muitas vezes você encontrará situações em que não sabe quantos objetos estará criando; Os construtores fornecem os meios para criar quantos objetos forem necessários de forma eficaz, anexando dados e funções a eles, conforme necessário.

- -

Vamos explorar a criação de classes por meio de construtores e criar instâncias de objeto a partir deles em JavaScript. Primeiro de tudo, gostaríamos que você fizesse uma nova cópia local do arquivo oojs.html que vimos em nosso primeiro artigo Objetos.

- -

Um exemplo simples

- -
    -
  1. Vamos começar observando como você pode definir uma pessoa com uma função normal. Adicione esta função dentro do elemento script: - - 
    function createNewPerson(name) {
-  var obj = {};
-  obj.name = name;
-  obj.greeting = function() {
-    alert('Hi! I\'m ' + obj.name + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Agora você pode criar uma nova pessoa chamando essa função — tente as seguintes linhas no console JavaScript do seu navegador: - 
    var salva = createNewPerson('Salva');
-salva.name;
-salva.greeting();
    - Isso funciona bem o suficiente, mas é um pouco prolixo; Se sabemos que queremos criar um objeto, por que precisamos criar explicitamente um novo objeto vazio e devolvê-lo? Felizmente, o JavaScript nos fornece um atalho útil, na forma de funções de construtor — vamos criar um agora!
    3. -
  3. Substitua sua função anterior pelo seguinte: - 
    function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
    -
    4. -
- -

A função de construtor é a versão do JavaScript de uma classe. Você notará que ela tem todos os recursos que você espera em uma função, embora ela não retorne nada ou crie explicitamente um objeto — ela basicamente define propriedades e métodos. Você verá a palavra-chave this sendo usada aqui também — é basicamente dizer que sempre que uma dessas instâncias de objeto é criada, a propriedade name  do objeto será igual ao valor do nome passado à chamada do construtor, e o método greeting() usará o valor do nome passado para a chamada do construtor também.

- -
-

Nota: Um nome de função de construtor geralmente começa com uma letra maiúscula — essa convenção é usada para tornar as funções do construtor mais fáceis de reconhecer no código.

-
- -

Então, como podemos chamar um construtor para criar alguns objetos?

- -
    -
  1. Adicione as seguintes linhas abaixo da sua adição de código anterior: - 
    var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
    -
    2. -
  2. Salve seu código e recarregue-o no navegador e tente inserir as seguintes linhas em seu console JS: - 
    person1.name
-person1.greeting()
-person2.name
-person2.greeting()
    -
    3. -
- -

Legal! Você verá agora que temos dois novos objetos na página, cada um deles armazenado em um namespace diferente — quando você acessa suas propriedades e métodos, é necessário iniciar chamadas com person1 ou person2; a funcionalidade contida é cuidadosamente empacotada para que não entre em conflito com outras funcionalidades. Eles, no entanto, têm a mesma propriedade de name e o método greeting() disponível. Observe que eles estão usando seu próprio valor de name que foi atribuído a eles quando foram criados; Esta é uma razão pela qual é muito importante usar this, então eles usarão seus próprios valores e não algum outro valor.

- -

Vamos ver novamente as chamadas do construtor:

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

Em cada caso, a palavra-chave new é usada para informar ao navegador que queremos criar uma nova instância de objeto, seguida pelo nome da função com seus parâmetros obrigatórios contidos entre parênteses, e o resultado é armazenado em uma variável — muito semelhante a como uma função padrão é chamada. Cada instância é criada de acordo com esta definição:

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

Após a criação dos novos objetos, as variáveis person1 e person2 contêm os seguintes objetos:

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

Note que quando estamos chamando nossa função de construtor, estamos definindo greeting() toda vez, o que não é ideal. Para evitar isso, podemos definir funções no protótipo, que veremos mais adiante.

- -

Criando nosso construtor acabado

- -

O exemplo que vimos acima foi apenas um exemplo simples para começarmos. Vamos agora começar e criar nossa função final do construtor Person().

- -
    -
  1. Remova o código que você inseriu até agora e inclua este construtor de substituição — isso é exatamente o mesmo que o exemplo simples em princípio, com um pouco mais de complexidade: - 
    function Person(first, last, age, gender, interests) {
-  this.name = {
-    'first': first,
-    'last' : last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-}
    -
    2. -
  2. Agora adicione a seguinte linha abaixo, para criar uma instância de objeto a partir dela: - 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
    3. -
- -

Agora você verá que pode acessar as propriedades e os métodos exatamente como fizemos anteriormente — Tente isso no seu console JS:

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

Nota: Se você está tendo problemas para fazer isso funcionar, tente comparar seu código com a nossa versão — veja o código em oojs-class-finished.html (também você pode ve-lo sendo executado aqui).

-
- -

Exercícios adicionais

- -

Para começar, tente adicionar mais algumas linhas de criação de objetos e tente obter e configurar os membros das instâncias de objetos resultantes.

- -

Além disso, há alguns problemas com nosso método  bio() — a saída sempre inclui o pronome "Ele", mesmo que sua pessoa seja do sexo feminino ou alguma outra classificação de gênero preferida. E a biografia incluirá apenas dois interesses, mesmo que mais sejam listados na matriz interests. Você pode descobrir como corrigir isso na definição de classe (construtor)? Você pode colocar qualquer código que você gosta dentro de um construtor (você provavelmente precisará de alguns condicionais e um loop). Pense em como as sentenças devem ser estruturadas de maneira diferente dependendo do gênero e dependendo se o número de interesses listados é 1, 2 ou mais de 2.

- -
-

Note: If you get stuck, we have provided an answer inside our GitHub repo (see it live) — try writing it yourself first though!

-
- -

Outras maneiras de criar instâncias de objeto

- -

Até agora, vimos duas maneiras diferentes de criar uma instância de objeto — declarar um literal de objeto, e usar uma função de construtor (veja acima).

- -

Isso faz sentido, mas existem outras maneiras — queremos familiarizá-lo com essas informações caso você as encontre em suas viagens pela Web.

- -

O construtor Object() 

- -

Primeiro de tudo, você pode usar o construtor Object() para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio.

- -
    -
  1. Tente inserir isso no console JavaScript do seu navegador: - 
    var person1 = new Object();
    -
    2. -
  2. Isso armazena um objeto vazio na variável person1. Você pode adicionar propriedades e métodos a esse objeto usando a notação de pontos ou colchetes conforme desejado; tente estes exemplos no seu console: - 
    person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-};
    -
    3. -
  3. Você também pode passar um literal de objeto para o construtor Object() como um parâmetro, para preenchê-lo com propriedades / métodos. Tente isso no seu console JS: - 
    var person1 = new Object({
-  name: 'Chris',
-  age: 38,
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
    -
    4. -
- -

Usando o método create()

- -

Os construtores podem ajudá-lo a fornecer seu pedido de código — você pode criar construtores em um único local e, em seguida, criar instâncias conforme necessário, e fica claro de onde eles vieram.

- -

No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado create() que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente.

- -
    -
  1. Com o exercício concluído das seções anteriores carregadas no navegador, tente isso no seu console JavaScript: - 
    var person2 = Object.create(person1);
    -
    2. -
  2. Agora tente estes: - 
    person2.name
-person2.greeting()
    -
    3. -
- -

Você verá que a person2 foi criada com base na  person1  —  ela tem as mesmas propriedades e métodos disponíveis para ela.

- -

Uma limitação do create()  é que o IE8 não o suporta. Então os construtores são mais efetivos se você quiser que funcione em navegadores antigos.

- -

Vamos explorar os efeitos de create() em mais detalhes posteriormente.

- -

Sumário

- -

Este artigo forneceu uma visão simplificada da teoria orientada a objetos — isso não é toda a história, mas dá uma idéia do que estamos lidando aqui. Além disso, começamos a analisar diferentes maneiras de gerar instâncias de objetos.

- -

No próximo artigo, vamos explorar os protótipos de objetos JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

Neste módulo

- - diff --git a/files/pt-br/aprender/javascript/objetos/object_building_practice/index.html b/files/pt-br/aprender/javascript/objetos/object_building_practice/index.html deleted file mode 100644 index 4c4ab6c629..0000000000 --- a/files/pt-br/aprender/javascript/objetos/object_building_practice/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: Prática de construção de objetos -slug: Aprender/JavaScript/Objetos/Object_building_practice -translation_of: Learn/JavaScript/Objects/Object_building_practice ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

Nos artigos anteriores, analisamos todos os detalhes essenciais da teoria e da sintaxe do objeto JavaScript, fornecendo uma base sólida para começar. Neste artigo, vamos mergulhar em um exercício prático, dando a você mais prática na construção de objetos JavaScript personalizados, com um resultado divertido e colorido.

- - - - - - - - - - - - -
Prerequisites:Conhecimentos básicos de informática, conhecimento básico de HTML e CSS, familiaridade com o básico de JavaScript (veja First steps e Building blocks) e o básico de OOJS (veja Introduction to objects).
Objective:Adiquirir alguma prática no uso de objetos e técnicas de orientação a objetos num contexto real.
- -

Vamos saltitar algumas bolas

- -

Neste artigo, vamos escrever uma demo clássica de "bolas saltitantes", para mostrar o quão úteis os objetos podem ser em JavaScript. Nossas bolinhas vão saltar pela tela e mudam de cor quando se tocam. O exemplo acabado vai parecer um pouco assim:

- -
    -
- -

Este exemplo fará uso da Canvas API, para desenhar as bolas na tela, e da requestAnimationFrame API para animar toda a exibição — você não precisa ter nenhum conhecimento prévio dessas APIs e esperamos que, no momento em que você terminar este artigo, você esteja interessado em explorá-los mais. Ao longo do caminho, faremos uso de alguns objetos bacanas, e mostraremos algumas técnicas legais, como bolas quicando nas paredes, e verificando se elas se chocaram (também conhecidas como detecção de colisão).

- -

Começando

- -

Para começar, faça cópias locais de nossos arquivos  index.html, style.css, e main.js. Estes contêm o seguinte, respectivamente:

- -
    -
  1. Um documento HTML muito simples com um elemento {{HTMLElement("h1")}}, um elemento {{HTMLElement("canvas")}} para desenhar nossas bolas e elementos para aplicar nosso CSS e JavaScript em nosso HTML.
    2. -
  2. Alguns estilos muito simples, que servem principalmente para estilizar e posicionar o <h1>, e se livrar de qualquer barra de rolagem ou margem ao redor da borda da página (para que fique bonito e arrumado).
    3. -
  3. Algum JavaScript que serve para configurar o elemento <canvas> e fornecer uma função geral que vamos usar.
    4. -
- -

A primeira parte do script é assim:

- -
const canvas = document.querySelector('canvas');
-
-const ctx = canvas.getContext('2d');
-
-const width = canvas.width = window.innerWidth;
-const height = canvas.height = window.innerHeight;
- -

Esse script obtém uma referência ao elemento <canvas> e, em seguida, chama o método getContext() para nos fornecer um contexto no qual podemos começar a desenhar. A variável resultante (ctx) é o objeto que representa diretamente a área de desenho da tela e nos permite desenhar formas 2D nela.

- -

Em seguida, definimos variáveis chamadas width e height, e a largura e altura do elemento canvas (representado pelas propriedades canvas.width e canvas.height) para igualar a largura e a altura da viewport do navegador (a área em que a página da Web aparece — isso pode ser obtido das propriedades {{domxref("Window.innerWidth")}} e {{domxref("Window.innerHeight")}} ).

- -

Você verá aqui que estamos encadeando várias tarefas juntas, para que as variáveis sejam todas mais rápidas — isso é perfeitamente aceitável.

- -

A última parte do script inicial é a seguinte:

- -
function random(min, max) {
-  const num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Essa função usa dois números como argumentos e retorna um número aleatório no intervalo entre os dois.

- -

Modelando uma bola no nosso programa

- -

Nosso programa contará com muitas bolas saltando ao redor da tela. Como todas essas bolas se comportarão da mesma maneira, faz sentido representá-las com um objeto. Vamos começar adicionando o construtor a seguir ao final do código.

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
-}
- -

Aqui incluímos alguns parâmetros que definem as propriedades que cada bola precisa para funcionar em nosso programa:

- - - -

Isso classifica as propriedades, mas e os métodos? Queremos realmente fazer com que nossas bolas façam algo em nosso programa.

- -

Desenhando a bola

- -

Primeiro adicione o seguinte método draw() ao prototype do Ball():

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

Usando esta função, podemos dizer a nossa bola para desenhar-se na tela, chamando uma série de membros do contexto de tela 2D que definimos anteriormente (ctx). O contexto é como o papel, e agora queremos comandar nossa caneta para desenhar algo nela:

- - - -

Você pode começar a testar seu objeto já.

- -
    -
  1. Salve o código até o momento e carregue o arquivo HTML em um navegador.
    2. -
  2. Abra o console JavaScript do navegador e, em seguida, atualize a página para que o tamanho da tela mude para a viewport menor visível deixada quando o console for aberto.
    3. -
  3. Digite o seguinte para criar uma nova instância de bola: - 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Tente chamar seus membros: - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. Quando você entra na última linha, você deve ver a bola se desenhando em algum lugar na sua tela.
    6. -
- -

Atualizando os dados da bola

- -

Podemos desenhar a bola na posição, mas para começar a mover a bola, precisamos de uma função de atualização de algum tipo. Adicione o seguinte código na parte inferior do seu arquivo JavaScript, para adicionar um método  update() ao prototype do Ball():

- -
Ball.prototype.update = function() {
-  if ((this.x + this.size) >= width) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.x - this.size) <= 0) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.y + this.size) >= height) {
-    this.velY = -(this.velY);
-  }
-
-  if ((this.y - this.size) <= 0) {
-    this.velY = -(this.velY);
-  }
-
-  this.x += this.velX;
-  this.y += this.velY;
-}
- -

As primeiras quatro partes da função verificam se a bola atingiu a borda da tela. Se tiver, invertemos a polaridade da velocidade relevante para fazer a bola viajar na direção oposta. Assim, por exemplo, se a bola estava viajando para cima (positivo velY), então a velocidade vertical é alterada de forma que ela comece a viajar para baixo (negativo velY).

- -

Nos quatro casos, estamos verificando se:

- - - -

Em cada caso, estamos incluindo o size da bola no cálculo, porque as coordenadas x/y estão no centro da bola, mas queremos que a borda da bola saia do perímetro — não queremos a bola para fique no meio da tela antes de quicar de volta.

- -

As duas últimas linhas adicionam o valor velX à coordenada x, e o valor velY à coordenada y —  a bola é efitivamente movida cada vez que este método é chamado.

- -

Isso é o que será feito por ora; vamos continuar com alguma animação!

- -

Animando a bola

- -

Agora vamos tornar isso divertido. Vamos começar a adicionar bolas à tela e a animá-las.

- -
    -
  1. Primeiro, precisamos de um lugar para armazenar todas as nossas bolas. O array a seguir fará esse trabalho — adicione-o ao final do seu código agora: - 
    let balls = [];
    - -

    Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas.

    -
    2. -
  2. Adicione o seguinte ao final do seu código agora: - 
    function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  while (balls.length < 25) {
-    let size = random(10,20);
-    let ball = new Ball(
-      // ball position always drawn at least one ball width
-      // away from the edge of the canvas, to avoid drawing errors
-      random(0 + size,width - size),
-      random(0 + size,height - size),
-      random(-7,7),
-      random(-7,7),
-      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-      size
-    );
-    balls.push(ball);
-  }
-
-  for (let i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
    - -

    Nossa função loop() faz o seguinte:

    - -
      -
    • Define a cor de preenchimento da tela como preto semitransparente e desenha um retângulo com a cor em toda a largura e altura da tela, usando fillRect() (os quatro parâmetros fornecem uma coordenada de início e uma largura e altura para o retângulo desenhado ). Isso serve para encobrir o desenho do quadro anterior antes que o próximo seja desenhado. Se você não fizer isso, você verá apenas longas cobras se movimentando ao redor da tela, em vez de mover as bolas! A cor do preenchimento é definida como semitransparente, rgba(0,0,0,0.25), para permitir que os poucos quadros anteriores brilhem levemente, produzindo as pequenas trilhas atrás das bolas à medida que elas se movem. Se você mudou 0,25 para 1, você não vai mais vê-los. Tente variar esse número para ver o efeito que ele tem.
      • -
    • Cria uma nova instância de nossa  Ball() usando valores aleatórios gerados com a nossa função  random() então push()para o final de nosso array de bolas, mas somente enquanto o número de bolas no array é menor que 25. Então quando temos 25 bolas na tela, não aparecem mais bolas. Você pode tentar variar o número emballs.length < 25 para obter mais ou menos bolas na tela. Dependendo de quanto poder de processamento seu computador / navegador possui, especificar vários milhares de bolas pode retardar bastante a animação!
      • -
    • Faz um loop em todas as balls no array de bolas e executa a função draw() e update() de cada bola para desenhar cada uma delas na tela, depois faz as atualizações necessárias para a posição e a velocidade no tempo para o próximo quadro.
      • -
    • Executa a função novamente usando o método requestAnimationFrame() — quando esse método é executado constantemente e passa o mesmo nome de função, ele executará essa função um número definido de vezes por segundo para criar uma animação suave. Isso geralmente é feito de forma recursiva — o que significa que a função está chamando a si mesma toda vez que é executada, portanto, ela será executada repetidas vezes.
      • -
    -
    3. -
  3. Por último mas não menos importante, adicione a seguinte linha à parte inferior do seu código — precisamos chamar a função uma vez para iniciar a animação. - 
    loop();
    -
    4. -
- -

É isso para o básico — tente salvar e atualizar para testar suas bolas quicando!

- -

Adicionando detecção de colisão

- -

Agora, para um pouco de diversão, vamos adicionar alguma detecção de colisão ao nosso programa, para que nossas bolas saibam quando bateram em outra bola.

- -
    -
  1. Primeiro de tudo, adicione a seguinte definição de método abaixo onde você definiu o método  update() (ou seja, o bloco Ball.prototype.update). - - 
    Ball.prototype.collisionDetect = function() {
-  for (let j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      const dx = this.x - balls[j].x;
-      const dy = this.y - balls[j].y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
-      }
-    }
-  }
-}
    - -

    Esse método é um pouco complexo, então não se preocupe se você não entender exatamente como isso funciona agora. Uma explicação a seguir:

    - -
      -
    • Para cada bola, precisamos checar todas as outras bolas para ver se ela colidiu com a bola atual. Para fazer isso, abrimos outro loop for para percorrer todas as bolas no array balls[].
      • -
    • Imediatamente dentro de nosso loop for, usamos uma instrução  if para verificar se a bola atual em loop é a mesma bola que estamos verificando no momento. Não queremos verificar se uma bola colidiu consigo mesma! Para fazer isso, verificamos se a bola atual (ou seja, a bola cujo método collisionDetect está sendo invocado) é a mesma que a bola de loop (ou seja, a bola que está sendo referenciada pela iteração atual do loop for no collisionDetect método). Nós então usamos ! para negar a verificação, para que o código dentro da instrução if seja executado apenas se eles não forem iguais.
      • -
    • Em seguida, usamos um algoritmo comum para verificar a colisão de dois círculos. Estamos basicamente verificando se alguma das áreas dos dois círculos se sobrepõe. Isso é explicado ainda mais na 2D collision detection.
      • -
    • Se uma colisão for detectada, o código dentro da instrução if interna será executado. Neste caso, estamos apenas definindo a propriedade color de ambos os círculos para uma nova cor aleatória. Poderíamos ter feito algo muito mais complexo, como fazer com que as bolas saltassem umas das outras de forma realista, mas isso teria sido muito mais complexo de implementar. Para essas simulações físicas, os desenvolvedores tendem a usar jogos ou bibliotecas físicas, como PhysicsJS, matter.js, Phaser, etc.
      • -
    -
    2. -
  2. Você também precisa chamar esse método em cada quadro da animação. Adicione o seguinte abaixo do balls[i].update();: - 
    balls[i].collisionDetect();
    -
    3. -
  3. Salve e atualize a demonstração novamente, e você verá suas bolas mudando de cor quando colidirem!
    4. -
- -
-

Note: If you have trouble getting this example to work, try comparing your JavaScript code against our finished version (also see it running live).

-
- -

Sumário

- -

Esperamos que você tenha se divertido escrevendo seu próprio exemplo de bolas saltitantes aleatórias do mundo real, usando várias técnicas orientadas a objetos e objetos de todo o módulo! Isso deve ter lhe dado alguma prática útil no uso de objetos e um bom contexto do mundo real.

- -

É isso para artigos de objetos — tudo o que resta agora é para você testar suas habilidades na avaliação de objetos.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/pt-br/aprender/javascript/objetos/object_prototypes/index.html b/files/pt-br/aprender/javascript/objetos/object_prototypes/index.html deleted file mode 100644 index c574781301..0000000000 --- a/files/pt-br/aprender/javascript/objetos/object_prototypes/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Protótipos de objetos -slug: Aprender/JavaScript/Objetos/Object_prototypes -translation_of: Learn/JavaScript/Objects/Object_prototypes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

Protótipos são o mecanismo pelo qual objetos JavaScript herdam recursos uns dos outros. Neste artigo, explicamos como as cadeias de protótipos funcionam e observamos como a propriedade prototype pode ser usada para adicionar métodos aos construtores existentes.

- - - - - - - - - - - - -
Pré-requisitos:Entender como funções em JavaScript funcionam, familiaridade com o básico de JavaScript (veja Primeiros Passos e Elementos Construtivos), e o básico de Orientação a Objetos em JavaScript (veja Introdução a Objetos).
Objetivo:Entender protótipos de objetos JavaScript, como a cadeia de protótipos funciona, e como adicionar novos métodos à propriedade prototype.
- -

Uma linguagem baseada em protótipos?

- -

O JavaScript é frequentemente descrito como uma linguagem baseada em protótipos — para fornecer herança, os objetos podem ter um objeto de protótipo, que atua como um objeto de modelo do qual herda métodos e propriedades. O objeto de protótipo de um objeto também pode ter um objeto de protótipo, do qual herda métodos e propriedades, e assim por diante. Isso geralmente é chamado de cadeia de protótipos e explica por que objetos diferentes têm propriedades e métodos definidos em outros objetos disponíveis para eles.

- -

Bem, para ser exato, as propriedades e os métodos são definidos na propriedade prototype nas funções construtoras dos Objetos, não nas próprias instâncias do objeto.

- -

Em JavaScript, é feito um link entre a instância do objeto e seu protótipo (sua propriedade  __proto__, que é derivada da propriedade prototype no construtor), e as propriedades e os métodos são encontrados percorrendo a cadeia de protótipos.

- -
-

Note: É importante entender que há uma distinção entre o protótipo de um objeto (que está disponível por meio de Object.getPrototypeOf(obj), ou por meio da propriedade __proto__ ) e a propriedade prototype em funções construtoras. O primeiro é a propriedade em cada instância e o último é a propriedade no construtor. Ou seja, Object.getPrototypeOf(new Foobar()) efere-se ao mesmo objeto que Foobar.prototype.

-
- -

Vejamos um exemplo para tornar isso um pouco mais claro.

- -

Noções básicas sobre objetos de protótipo

- -

Aqui voltaremos ao exemplo em que terminamos de escrever nosso construtor Person() — carregamos o exemplo em seu navegador. Se você ainda não o conseguiu trabalhar no último artigo, use nosso exemplo  oojs-class-further-exercises.html (veja também o código-fonte).

- -

Neste exemplo, definimos uma função construtora, assim:

- -
function Person(first, last, age, gender, interests) {
-
-  // property and method definitions
-  this.first = first;
-  this.last = last;
-//...
-}
- -

Nós criamos então uma instância de objeto como esta:

- -
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
- -

Se você digitar "person1." em seu console JavaScript, você deve ver o navegador tentar concluir automaticamente isso com os nomes de membros disponíveis neste objeto:

- -

- -

Nesta lista, você verá os membros definidos no construtor de person1's constructor — Person() — name, age, gender, interests, bio, e greeting. No entanto, você também verá alguns outros membros — watch, valueOf, etc — estes estão definidos no objeto de protótipo do Person(), que é Object.

- -

- -

O que acontece se você chamar um método em person1, que é realmente definido em Object? Por exemplo:

- -
person1.valueOf()
- -

Este método — Object.valueOf() é herdado por  person1 porque seu construtor é Person(), e o protótipo de Person() é  Object(). valueOf() retorna o valor do objeto em que é chamado — experimente e veja! Nesse caso, o que acontece é:

- - - -
-

Nota: Queremos reiterar que os métodos e as propriedades não são copiados de um objeto para outro na cadeia de protótipos — eles são acessados ao percorrer a cadeia como descrito acima.

-
- -
-

Nota: Não existe uma maneira oficial de acessar diretamente o objeto protótipo de um objeto — os "links" entre os itens da cadeia são definidos em uma propriedade interna, chamada de [[prototype]] na especificação da linguagem JavaScript (veja {{glossary("ECMAScript")}}). A maioria dos navegadores modernos, no entanto, tem uma propriedade disponível neles chamada __proto__ (que é sublinhada em ambos os lados), que contém o objeto de protótipo do construtor do objeto. Por exemplo, tente person1.__proto__ and person1.__proto__.__proto__ para ver como a cadeia se parece no código!

- -

Desde ECMAScript 2015 você pode acessar o objeto protótipo de um objeto indiretamente via Object.getPrototypeOf(obj).

-
- -

A propriedade prototype: Onde os membros herdados são definidos

- -

Então, onde estão as propriedades e os métodos herdados definidos? Se você observar a página de referência do  Object, verá, à esquerda, um grande número de propriedades e métodos — muito mais do que o número de membros herdados que vimos disponíveis no objeto person1. Alguns são herdados e outros não — por que isso acontece?

- -

Como mencionado acima, os herdados são os definidos na propriedade  prototype (você poderia chamá-lo de um subespaço de nomes) — ou seja, aqueles que começam com Object.prototype., e não os que começam com apenas Object. O valor da propriedade prototype é um objeto, que é basicamente um bucket para armazenar propriedades e métodos que queremos que sejam herdados por objetos mais abaixo na cadeia de protótipos.

- -

Portanto, Object.prototype.watch(), Object.prototype.valueOf(), etc., estão disponíveis para qualquer tipo de objeto que herda de Object.prototype, incluindo novas instâncias de objeto criadas a partir do construtor Person().

- -

Object.is(), Object.keys(), e outros membros não definidos dentro do bloco prototype não são herdados por instâncias de objetos ou tipos de objetos que herdam de Object.prototype. Eles são métodos / propriedades disponíveis apenas no próprio construtor Object().

- -
-

Nota: Isso parece estranho — como você pode ter um método definido em um construtor, que é em si uma função? Bem, uma função também é um tipo de objeto — veja a referência do construtor Function() se você não acredita em nós.

-
- -
    -
  1. Você pode conferir as propriedades de protótipo existentes para si mesmo — volte ao nosso exemplo anterior e tente inserir o seguinte no console JavaScript: - 
    Person.prototype
    -
    2. -
  2. A saída não mostrará muito porque não definimos nada no protótipo do nosso construtor personalizado! Por padrão, o  prototype de um construtor sempre começa vazio. Agora tente o seguinte: - 
    Object.prototype
    -
    3. -
- -

Você verá um grande número de métodos definidos na propriedade prototype  do  Object, que estão disponíveis em objetos que herdam  Object, como mostrado anteriormente.

- -

Você verá outros exemplos de herança de cadeia de protótipos em todo o JavaScript — tente procurar os métodos e propriedades definidos no protótipo dos objetos globais String, Date, Number, e Array, por exemplo. Estes todos têm um número de membros definidos em seu protótipo, e é por isso que, por exemplo, quando você cria uma string, como esta:

- -
var myString = 'This is my string.';
- -

myString imediatamente tem vários métodos úteis disponíveis, como split(), indexOf(), replace(), etc.

- -
-

Nota: Vale a pena ler nosso guia mais aprofundado sobre Como usar protótipos em JavaScript, uma vez que você tenha entendido esta seção e queira saber mais. Esta seção é intencionalmente simplificada para tornar esses conceitos um pouco mais fáceis de entender quando você os conhecer pela primeira vez.

-
- -
-

Importante: A propriedade prototype é uma das partes com o nome mais confuso do JavaScript — você pode pensar que this aponta para o objeto de protótipo do objeto atual, mas não (esse é um objeto interno que pode ser acessado por __proto__, lembra?) . Em vez disso, prototype é uma propriedade que contém um objeto no qual você define os membros que deseja herdar.

-
- -

Revisitando create()

- -

Anteriormente mostramos como o método Object.create() pode ser usado para criar uma nova instância de objeto.

- -
    -
  1. Por exemplo, tente isso no console JavaScript do seu exemplo anterior: - 
    var person2 = Object.create(person1);
    -
    2. -
  2. O que create() realmente faz é criar um novo objeto a partir de um objeto de protótipo especificado. Aqui, person2 está sendo criado usando  person1 como um objeto de protótipo. Você pode verificar isso inserindo o seguinte no console: - 
    person2.__proto__
    -
    3. -
- -

Isso retornará o person1.

- -

A propriedade do construtor

- -

Toda função de construtor possui uma propriedade prototype cujo valor é um objeto que contém uma propriedade constructor. Esta propriedade construtora aponta para a função construtora original. Como você verá na próxima seção, as propriedades definidas na propriedade Person.prototype (ou, em geral, na propriedade prototype de uma função construtora, que é um objeto, conforme mencionado na seção acima) tornam-se disponíveis para todos os objetos de instância criados usando Construtor Person(). Portanto, a propriedade constructor também está disponível para os objetos person1 e person2.

- -
    -
  1. Por exemplo, tente estes comandos no console: - 
    person1.constructor
-person2.constructor
    - -

    Estes devem retornar o construtor Person(), pois contém a definição original dessas instâncias.

    - -

    Um truque inteligente é que você pode colocar parênteses no final da propriedade do constructor (contendo quaisquer parâmetros necessários) para criar outra instância de objeto daquele construtor. O construtor é uma função depois de tudo, então pode ser chamado usando parênteses; você só precisa incluir a palavra-chave new para especificar que deseja usar a função como um construtor.

    -
    2. -
  2. Tente isso no console: - 
    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    -
    3. -
  3. Agora tente acessar os recursos do seu novo objeto, por exemplo: - 
    person3.name.first
-person3.age
-person3.bio()
    -
    4. -
- -

Isso funciona bem. Você não precisará usá-lo com frequência, mas pode ser realmente útil quando você deseja criar uma nova instância e não tem uma referência ao construtor original facilmente disponível por algum motivo.

- -

A propriedade do constructor tem outros usos. Por exemplo, se você tiver uma instância de objeto e desejar retornar o nome do construtor do qual ela é uma instância, use o seguinte:

- -
instanceName.constructor.name
- -

Tente isso, por exemplo:

- -
person1.constructor.name
-
- -
-

Nota: O valor de  constructor.name pode mudar (devido à herança prototípica, ligação, pré-processadores, transpilers, etc.), portanto, para exemplos mais complexos, você desejará usar o operador instanceof. 

-
- -
    -
- -

Modificando Protótipos

- -

Vamos dar uma olhada em um exemplo de modificação da propriedade prototype de uma função construtora — os métodos adicionados ao protótipo estão então disponíveis em todas as instâncias de objeto criadas a partir do construtor. Neste ponto, finalmente adicionaremos algo ao protótipo do nosso construtor Person().

- -
    -
  1. Volte para o nosso exemplo de oojs-class-further-exercises.html e faça uma cópia local do código-fonte. Abaixo do JavaScript existente, adicione o seguinte código, que adiciona um novo método à propriedade prototype do construtor: - - 
    Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
    -
    2. -
  2. Salve o código e carregue a página no navegador e tente inserir o seguinte na entrada de texto: - 
    person1.farewell();
    -
    3. -
- -

Você deve receber uma mensagem de alerta, mostrando o nome da pessoa, conforme definido dentro do construtor. Isso é realmente útil, mas o que é ainda mais útil é que toda a cadeia de herança foi atualizada dinamicamente, disponibilizando automaticamente esse novo método em todas as instâncias de objeto derivadas do construtor.

- -

Pense nisso por um momento. Em nosso código, definimos o construtor, então criamos um objeto de instância a partir do construtor, então adicionamos um novo método ao protótipo do construtor:

- -
function Person(first, last, age, gender, interests) {
-
-  // property and method definitions
-
-}
-
-var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
-
-Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
- -

Mas o método  farewell() ainda está disponível na instância do objeto  person1 — seus membros foram atualizados automaticamente para incluir o método farewell().

- -
-

Note: Se você está tendo problemas para fazer este exemplo funcionar, dê uma olhada no nosso exemplo oojs-class-prototype.html (veja também running live).

-
- -

Você raramente verá propriedades definidas na propriedade prototype, porque elas não são muito flexíveis quando definidas dessa forma. Por exemplo, você poderia adicionar uma propriedade assim:

- -
Person.prototype.fullName = 'Bob Smith';
- -

sso não é muito flexível, pois a pessoa pode não ser chamada assim. Seria muito melhor construir o fullName fora do name.first e name.last:

- -
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
- -

No entanto, isso não funciona, pois  this fará referência ao escopo global nesse caso, não ao escopo da função. Chamar essa propriedade retornaria undefined undefined. Isso funcionou bem no método que definimos anteriormente no protótipo porque ele está dentro um escopo de função, que será transferido com sucesso para o escopo da instância do objeto, portanto, você pode definir propriedades constantes no protótipo (ou seja, aquelas que nunca precisam ser alteradas), mas geralmente funciona melhor definir propriedades dentro do construtor.

- -

Na verdade, um padrão bastante comum para mais definições de objetos é definir as propriedades dentro do construtor e os métodos no protótipo. Isso torna o código mais fácil de ler, pois o construtor contém apenas as definições de propriedade e os métodos são divididos em blocos separados. Por exemplo:

- -
// Constructor with property definitions
-
-function Test(a, b, c, d) {
-  // property definitions
-}
-
-// First method definition
-
-Test.prototype.x = function() { ... };
-
-// Second method definition
-
-Test.prototype.y = function() { ... };
-
-// etc.
- -

Esse padrão pode ser visto em ação no exemplo de aplicativo de plano escolar de Piotr Zalewa.

- -

Sumário

- -

Este artigo abrangeu protótipos de objetos JavaScript, incluindo como cadeias de objetos de protótipos permitem que objetos herdem recursos uns dos outros, a propriedade prototype e como ela pode ser usada para adicionar métodos a construtores e outros tópicos relacionados.

- -

No próximo artigo, veremos como você pode implementar a herança de funcionalidade entre dois dos seus próprios objetos personalizados.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

- - - -

Neste módulo

- - diff --git a/files/pt-br/aprender/learning_and_getting_help/index.html b/files/pt-br/aprender/learning_and_getting_help/index.html deleted file mode 100644 index 39d219bae4..0000000000 --- a/files/pt-br/aprender/learning_and_getting_help/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Learning and getting help -slug: Aprender/Learning_and_getting_help -translation_of: Learn/Learning_and_getting_help ---- -

{{learnsidebar}}{{draft}}

- -

É muito bom aplicar seu tempo e esforço para aprender a fazer coisas novas, mas seu aprendizado poderá ser mais eficaz se você adotar boas práticas durante o percurso. Nem sempre você terá sucesso em realizar uma tarefa; se você não for uma pessoa com transtorno hiperativo, poderá ficar preso a uma tarefa devido a determinação de nunca desistir enquanto não conseguir realizar o objetivo traçado. Se não conseguir pode ficar frustrado. Mesmo desenvolvedores profissionais sentem-se assim de vez em quando. Para quem é sempre focado, vale a pena descobrir maneiras eficazes de pedir e receber ajuda para não ficar atolado em uma tarefa e consequentemente progredir na capacitação técnica. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..

- -

Effective learning

- -

Let's move straight on and think about effective learning.

- -

Different learning methods

- -

It is interesting to consider that there are two main ways in whch your brain learns things — focused and diffuse learning:

- - - -

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage on both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality both are very important.

- -

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. 

- -

For that you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

- -

This is why it is usually good to read some introductory material first to get a high level understanding of an area, before you leap into the specific details.

- -

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

- -
    -
  1. Know how to fix problem A with tool A.
    2. -
  2. Know how to fix problem B with tool B.
    3. -
  3. Not know how to fix problem C.
    4. -
- -

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

- -

Different learning materials

- -

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

- -

Textual articles

- -

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS background property"?)

- -

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

- -

There are also several other great resources on the web, some of which we'll mention below.

- -
-

Note: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem solving and learning patterns than it is about learning lots of syntax.

-
- -

Videos

- -

There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.

- -

Interactive code playgrounds

- -

You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. Codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.

- -

Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!

- -
-

Note: Online code editors are also really useful for sharing code you've written, for example if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You cna share the web address of the example with them so they can see it.

-
- -
-

Note: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.

-
- -

Making a plan

- -

It is a good idea to create a plan to help you achieve what you want to achieve through your learning.

- -

A goal statement

- -

It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:

- - - -

The following are not quite as reasonable:

- - - -

What do you need to get there?

- -

Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:

- -

Materials I need:

- - - -

Knowledge I need:

- - - -

How much time and money will it take?

- -

Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.

- -

How many hours per week do I need to do?

- -

Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:

- -

"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."

- -

How much time you can spend on this of course depends on what your circumstances are. If you at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.

- -

If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!

- -

When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple speadsheet or even in a notebook!

- -

Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:

- - - -

Keep thinking about how much progress you are making, and adjust your plan if needs be.

- -

Staying motivated

- -

It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:

- - - -

Effective problem solving

- -

There is no one effective way to solve all problems (and learn all things) associated wth web design and development, but there some general bits of advice that will serve you well in most cases.

- -

Break things down into chunks

- -

For a start, when you are trying to implement something specific and it sems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.

- -

For example, if you are looking a task of "Build a simple two column website", you could break it down as follows:

- - - -

Then you could break it down further, for example "Implement horizontal navigation menu" could be written out as:

- - - -

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!

- -

Learn and recognise the patterns

- -

As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll problem immediately start thinking of a solution like this:

- -

A nav menu is usually created from a list of links, something like:

- -
<ul>
-  <li>First menu item</li>
-  <li>Second menu item</li>
-  <li>Third menu item</li>
-  <li>etc.</li>
-</ul>
-
- -

To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:

- -
ul {
-  display: flex;
-}
- -

To remove unneeded spacing and bullet points, we can do this:

- -
ul {
-  list-style-type: none;
-  padding: 0;
-}
- -

etc.

- -

If you are a complete beginner to web development, you'll have to do some study and web searches, and look up solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of syntax that you forgot since then.

- -

When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.

- -

In addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.

- -
-

Note: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.

-
- -
-

Note: The simplest solution is often the best.

-
- -

Getting practice

- -

The more you practice solving a problem, the stronger your brain's neutral pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.

- -

Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.

- -

Getting help

- -

Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.

- -

There are a variety of ways to get help, and what follows are some tips for doing so more effectively.

- -

Effective web searches

- -

One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? 

- -

It is often fairly obvious what to search for. For example:

- - - -

If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.

- - - -

Error messages

- -

If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.

- -
-

Note: Stack Overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.

-
- -

Browser testing

- -

It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:

- - - -

Using MDN

- -

The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.

- -

We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.

- -

If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality, or better still, use your favorite search engine and put "mdn" in front of the search term, for example "mdn responsive web design" or "mdn background-color".

- -

Other online resources

- -

We already mentioned Stack Overflow, but there are other online resources that can help.

- -

It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:

- - - -

However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.

- -

Physical meetups

- -

Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater for beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.

- -

You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example student or diversity tickets.

- -

See also

- - diff --git a/files/pt-br/aprender/release_notes/index.html b/files/pt-br/aprender/release_notes/index.html deleted file mode 100644 index d90c63c81b..0000000000 --- a/files/pt-br/aprender/release_notes/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Learning area release notes -slug: Aprender/Release_notes -translation_of: Learn/Release_notes ---- -
{{learnsidebar}}
- -

Esta página detalha as mudanças significativas feitas na área de aprendizagem. Volte aqui se quiser saber qual conteúdo novo está disponível e qual conteúdo existente foi aprimorado.

- -

Se você quiser dar feedback sobre qualquer uma dessas novas adições, deixe seus comentários em nosso Fórum de discussão.

- -

Junho 2020

- -

Nosso Caminho de aprendizagem para desenvolvedores da web de front-end foi oficialmente lançado! confira um caminho opcional a seguir  para o desenvolvimento de front-end de aprendizagem! Consulte também  nossa postagem sobro hacks — Apresentando o caminho de aprendizagem do desenvolvimento do MDN Web Docs Front-end — para obter mais informações sobre a lógica por trás disso.

- -

Maio 2020

- -

Nosso módulo Entendendo as estruturas do Client-side JavaScript  já está disponível. Aprenda por que existem frameworks, quando você deve usar um (e quando não deveria), que tipos de recursos são comuns a todos os frameworks e como eles se relacionam com o JavaScript básico que você conhece. Depois de ter uma compreensão geral das estruturas, vá para a série de tutoriais que abrangem estruturas populares como React, Ember e Vue.

- -

Nosso aprendizado de  Web Forms agora tem avaliações "Teste suas habilidades" que acompanham os artigos.

- -

Abril 2020

- -

Nosso novo módulo Entendendo as ferramentas de desenvolvimento client-side web foi lançado! Aprenda os fundamentos das ferramentas de desenvolvimento da web, incluindo os tipos de ferrramentas existentes, as linhas de comando, gerenciadores de pacotes e como montar sua própria cadeia de ferramentas funcionais.

- -

Março 2020

- -

Agora você encontrará avaliações "Teste suas habilidades" que acompanham os artigos nos seguintes módulos:

- - - -

Janeiro 2020

- -

O módulo de formulários HTML foi significativamente atualizado:

- - - -

Mais seções "Teste suas habilidades" foram adicionadas. Você pode ver isso em:

- - - -

Dezembro 2019

- -

estamos adicionando um novo tipo de artigo de avaliação à área de aprendizado — "Teste suas habilidades" — que oferecerá várias perguntas curtas destinadas a testar rapidadmente se você entendeu o que está acontecendo. Isso é uma adição aos artigos de avaliação mais longos que você já encontrará em alguns módulos de aprendizagem. Você encontrará esses novos artigos com links nas seções "Teste suas habilidades" na parte inferior dos artigos relevantes. Você pode ver isso em:

- - diff --git a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..7880e00f6d --- /dev/null +++ b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,128 @@ +--- +title: Cascata e herança +slug: Web/CSS/Getting_Started/Cascading_and_inheritance +tags: + - Guía + - Iniciante +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.

+ +

Informação: Cascata e Herança

+ +

O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.

+ +

Existem três fontes principais de estilos que constituem a cascata. São elas:

+ + + +

O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.

+ +
+
Exemplo
+ +

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

+ +

Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo userContent.css do seu navegador.

+ +

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

+
+ +

Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.

+ +

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

+ +

Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.

+ +

Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.

+ +

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

+ +

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

+ +

Mais detalhes

+ +
+

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

+ +

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

+ +

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

+
+ +

Ação: Usando herança

+ +
    +
  1. Edite o seu arquivo CSS.
    2. +
  2. Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.
    + +

    Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.

    +
    4. +
+ + +
+ + + + + + + + +
Antes
Cascading Style Sheets
+ + + + + + + + +
Depois
Cascading Style Sheets
+ +
+
Desafio
+Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Veja a solução do desafio.
+ +

Qual o próximo?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais seletores.

diff --git a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..3870c68936 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,430 @@ +--- +title: Seletores +slug: Web/CSS/Getting_Started/Seletores +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.

+ +

Informações: Seletores

+ +

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

+ +
strong {
+  color: red;
+}
+
+ +

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

+ +
+
Mais detalhes
+ +

A parte dentro das chaves é a declaração.

+ +

A palavra-chave color é uma propriedade e red é um valor.

+ +

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

+ +

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

+
+ +

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

+ +

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

+ +

Dois atributos são especiais para o CSS. São eles o class e o id.

+ +

Seletores com Classe

+ +

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

+ +

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

+ +

Seletores com ID

+ +

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

+ +

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

+ +
+
Exemplo
+Esta tag HTML tem tanto um atributo class quanto um atributo id: + +
<p class="chave" id="principal">
+
+ +

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

+ +

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

+ +
.chave {
+  color: green;
+}
+
+ +

Esta regra torna negrito um elemento com id principal:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Seletores de Atributo

+ +

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:

+ +
+
[disabled]
+
Seleciona todos os elementos com o atributo "disabled".
+
[type='button']
+
Seleciona todos os elementos do tipo "button".
+
[class~=key]
+
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
+
[lang|=es]
+
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
+
[title*="example" i]
+
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
+
a[href^="https://"]
+
Seleciona links seguros.
+
img[src$=".png"]
+
IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.
+
+ +

Seletores de pseudo-classes

+ +

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

+ +

Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite CSS3 Selectors working spec.

+ +
+
Syntax
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Lista de pseudo-classes

+ + + +

Informação: Especificidade

+ +

Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais específico. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.

+ +
+
Mais detalhes
+ +

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

+
+ +

Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.

+ +

Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.

+ +

Information: Selectors based on relationships

+ +

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
+ +

You can combine these to express complex relationships.

+ +

You can also use the symbol * (asterisk) to mean "any element".

+ +
+
Example
+ +

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:

+ +
    #data-table-1 td:first-child {text-decoration: underline;}
+    #data-table-1 td:first-child + td {text-decoration: line-through;}
+
+ +

The result looks like:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
More details
+ +

In the usual way, if you make a selector more specific, then you increase its priority.

+ +

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

+ +

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

+ +

For more examples about tables, see Tables in the CSS Reference page.

+
+ +

Action: Using class and ID selectors

+ +
    +
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. +
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Now edit your CSS file. Replace the entire contents with: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Save the files and refresh your browser to see the result: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    + +

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    + +

    The ID selector #first has priority over the class and tag selectors.

    +
    5. +
+ +
+
Challenges
+ +
    +
  1. Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Action: Using pseudo-classes selectors

+ +
    +
  1. Create an HTML file with following content: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Now edit your CSS file. Replace the entire contents with: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Action: Using selectors based on relationships and pseudo-classes

+ +

With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

to be applied to an HTML structure like the following:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

See our complete CSS-based dropdown menu example for a possible cue.

+ +

What next?

+ +

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..2ead5ccae7 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,126 @@ +--- +title: Como o CSS funciona +slug: Web/CSS/Getting_Started/Como_CSS_funciona +tags: + - 'CSS:PrimeirosPassos' + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. 

+ +

Informação: Como o CSS funciona

+ +

Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:

+ +
    +
  1. O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
    2. +
  2. O navegador exibe o conteúdo do DOM.
    3. +
+ +

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

+ +

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

+ +

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

+ +

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

+ +
+
Exemplo
+No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Exemplo em tempo real

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Ação: Analisando um DOM

+ +

Utilizando Inspetor DOM

+ +

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

+ +
    +
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. +
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. +
    +
    Mais detalhes
    + +

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    + +

    Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.

    +
    +
    3. +
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. +

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    + +

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

    + +

    Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

    +
    4. +
+ +
+
Desafio
+ +

No DOMi, clique em um nó STRONG.

+ +

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

+ + +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+Veja a solução para o desafio.
+ +

Usando Raio-X Goggles da Web

+ +

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

+ +
    +
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. +
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. +
  3. Abra o seu documento HTML de exemplo.
    4. +
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. +
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. +
+ +

O que vem depois?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html new file mode 100644 index 0000000000..1ccc04f0ce --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html @@ -0,0 +1,112 @@ +--- +title: O que é CSS +slug: Web/CSS/Getting_Started/Oque_é_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

+ +

O que é CSS ?

+ +

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

+ +

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

+ +
+
Examples
+ + +
+ +

Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.

+ +
+
Mais detalhes
+ +

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

+ +

Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.

+ +

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
+ +

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

+
+ +

Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.

+ +
+
Mais detalhes
+ +

CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

+ +

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

+
+ +

Ação: Criando um documento

+ +
    +
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. +
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Documento de exemplo</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. +

    Você deve ver o texto  com as letras iniciais em negrito, como este:

    + + + + + + + +
    Cascading Style Sheets
    + +

    O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.

    +
    4. +
+ +

O que veremos depois?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html new file mode 100644 index 0000000000..453aa4c966 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html @@ -0,0 +1,106 @@ +--- +title: Por que usar CSS? +slug: Web/CSS/Getting_Started/Porque_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

+ +

Informação: Por que usar CSS?

+ +

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

+ +

Uma folha de estilo externa, tem muitas vantagens.:

+ + + +
+
Exemplo
+ +

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

+ +

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

+ +

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

+
+ +

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

+ +
+
Mais detalhes
+ +

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

+ +

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

+ +

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

+
+ +

Ação: Criando uma folha de estilo

+ +
    +
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. +
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. +
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: + 
    strong {color: red;}
+
    +
    4. +
+ +

Linkando seu documento para sua folha de estilo

+ +
    +
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Documento Simples com CSS</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

+ +
+
Desafio
+ +

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

+ +

Encontre mais cinco nomes de cores que as CSS trabalham.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+Veja a solução para este desafio.
+ +

O que veremos?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/index.html b/files/pt-br/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..389962ab07 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,98 @@ +--- +title: Iniciando com o CSS +slug: Web/CSS/Getting_Started +tags: + - CSS + - Guia(2) + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

 

+ +

Introdução

+ +

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

+ + + + + +

Esse tutorial é baseado na Especificação do CSS 2.1.

+ +

Quem deve usar esse tutorial?

+ +

Esse tutorial é, principalmente, para iniciantes no CSS.

+ +

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

+ +

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

+ +

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

+ +

O que você precisa saber antes de começar?

+ +

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

+ +

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

+ +

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

+ + + +

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

+ +

Como usar esse tutorial

+ +

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

+ +

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

+ +

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

+ +

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

+ +

Parte I do Tutorial

+ +

Uma guia básico passo a passo do CSS

+ +
    +
  1. O que é o CSS
    2. +
  2. Porque usar o CSS
    3. +
  3. Como o CSS funciona
    4. +
  4. Cascata e herança
    5. +
  5. Seletores
    6. +
  6. CSS legível
    7. +
  7. Estilos de texto
    8. +
  8. Cores
    9. +
  9. Conteúdo
    10. +
  10. Listas
    11. +
  11. Caixas
    12. +
  12. Layout
    13. +
  13. Tabelas
    14. +
  14. Mídia
    15. +
+ +

Parte II do Tutorial

+ +

Exemplos do uso do CSS juntamente com outras tecnologias

+ +
    +
  1. JavaScript
    2. +
  2. Gráficos SVG
    3. +
  3. Dados XML
    4. +
  4. Ligações XBL
    5. +
  5. Interfaces de usuário XUL
    6. +
+ +

{{ CSSTutorialTOC() }}

+ +

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..4577341105 --- /dev/null +++ b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,240 @@ +--- +title: Utilizando áudio e vídeo com HTML5 +slug: Web/HTML/Using_HTML5_audio_and_video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +

O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.

+ +

Incorporando mídia:

+ +

Incorporar mídia em documentos HTML é simples:

+ +
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+
+ +

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

+ +

Aqui há um exemplo de áudio incorporado em um documento HTML

+ +
<audio src="/test/audio.ogg">
+<p>Seu nevegador não suporta o elemento audio.</p>
+</audio>
+
+ +

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

+ +
<audio src="audio.ogg" controls autoplay loop>
+<p>Seu navegador não suporta o elemento audio </p>
+</audio>
+
+ +

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

+ + + +
<audio src="audio.mp3" preload="auto" controls></audio>
+
+ +

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

+ + + +

Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4" type="video/mp4">
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+
+ +

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista media formats supported by the audio and video elements para detalhes.

+ +

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+ +

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

+ +

Se o atributo type não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo source é verificado.

+ +

Veja Media events para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja Media formats supported by the audio and video elements.

+ +

Controlando a reprodução de mídia

+ +

Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:

+ +
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+ +

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

+ +

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

+ +
<audio id="demo" src="audio.mp3"></audio>
+<div>
+  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
+  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
+  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
+  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
+</div>
+
+ +

Parando o download de mídia

+ +

Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.

+ +

Esta é um modo para parar o download imediatamente:

+ +
var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src = "";
+
+ +

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

+ + + +

Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade currentTime no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.

+ +

Você pode usar a propriedade seekable para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.

+ +
var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
+mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
+mediaElement.currentTime = 122; // Ir para 122 segundos
+mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
+
+ +

Especificando o intervalo de reprodução

+ +

Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.

+ +

O intervalo é especificado usando a sintaxe:

+ +
#t=[tempoinicial],[tempofinal]
+
+ +

O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).

+ +

Alguns exemplos:

+ +
+
http://foo.com/video.ogg#t=10,20
+
Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
+
http://foo.com/video.ogg#t=,10.5
+
Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.
+
http://foo.com/video.ogg#t=,02:00:00
+
Especifica que o vídeo deve ser reproduzido do início até 2 horas.
+
http://foo.com/video.ogg#t=60,
+
Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.
+
+ +
+

{{ gecko_callout_heading("9.0") }}

+ +

O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da Media Fragments URI specification implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.

+
+ +

Opções alternativas

+ +

O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.

+ +

Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.

+ +

Utilizando Flash

+ +

Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:

+ +
<video src="video.ogv" controls>
+    <object data="flvplayer.swf" type="application/x-shockwave-flash">
+      <param value="flvplayer.swf" name="movie"/>
+    </object>
+</video>
+
+ +

Note que você não deve incluir classid na tag object para que outros navegadores além do Internet Explorer sejam compatíveis.

+ +

Reproduzindo vídeos em Ogg usando uma applet Java

+ +

Existe uma applet Java chamada Cortado que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:

+ +
<video src="my_ogg_video.ogg" controls width="320" height="240">
+  <object type="application/x-java-applet"
+          width="320" height="240">
+     <param name="archive" value="cortado.jar">
+     <param name="code" value="com.fluendo.player.Cortado.class">
+     <param name="url" value="my_ogg_video.ogg">
+     <p>You need to install Java to play this file.</p>
+  </object>
+</video>
+
+ +

Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.

+ +

{{ h1_gecko_minversion("Error handling", "2.0") }}

+ +

A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento error ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.

+ +

Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:

+ +
<video>
+<source id="mp4_src"
+        src="video.mp4"
+        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+        src="video.3gp"
+        type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+        src="video.ogv"
+        type='video/ogg; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos error antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.

+ +

Detectando quando nenhuma fonte foi carregada

+ +

Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo networkState do elemento media. Se esse valor for HTMLMediaElement.NETWORK_NO_SOURCE, você saberá que todas as fontes falharam o carregamento.

+ +

Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.

+ +

Veja também

+ + + +

{{ HTML5ArticleTOC() }}

+ +
{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}
diff --git a/files/pt-br/conflicting/learn/javascript/objects/index.html b/files/pt-br/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..aaab9150b3 --- /dev/null +++ b/files/pt-br/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,352 @@ +--- +title: Introdução ao JavaScript Orientado a Objeto +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - Construtor + - Encapsular + - Herança + - Intermediário + - Membros + - Objeto + - Orientado a Objeto + - POO +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +

JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.

+ +

Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.

+ +

Revisão do Javascript

+ +

Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em Uma reintrodução ao JavaScript. Você também pode consultar o Core JavaScript 1.5 Guide.

+ +

Programação Orientada a Objetos

+ +

Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).

+ +

A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.

+ +

A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.

+ +

Terminologia

+ +
+
Namespaces
+
Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.
+
+ +
+
Classe
+
Define as características do objeto. Uma classe é uma definição modelo das propriedades e métodos de um objeto.
+
Objeto
+
Um exemplar de uma classe.
+
Atributo
+
Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.
+
Método
+
Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.
+
Construtor
+
Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.
+
Herança
+
Uma classe pode herdar características de outra classe.
+
Encapsulamento
+
Uma maneira de agrupar os dados e os métodos que usam os dados.
+
Abstração
+
A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.
+
Polimorfismo
+
Diferentes classes podem definir o mesmo método ou propriedade.
+
+ +

Para uma descrição mais extensiva sobre programação orientada a objetos, veja Orientação a objetos na Wikipédia.

+ +

Programação Baseada em Protótipos

+ +

Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como protótipos. Este modelo também é conhecido como sem classes, orientado a protótipo, ou programação baseada em exemplares.

+ +

O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o framework Viewer para manipular componentes do Morphic) e várias outras.

+ +

Programação Orientada a Objetos em Javascript

+ +

Namespaces

+ +

Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.

+ +
+

Nota: É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).

+
+ +

A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.

+ +

Vamos criar um objeto global chamado MEUAPP:

+ +
// namespaces global
+var MEUAPP = MEUAPP || {};
+ +

No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos

+ +

Podemos também criar sub-espaços de nomes.

+ +
// sub namespaces
+MEUAPP.eventos = {};
+ +

A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:

+ +
// Criando um recipiente chamado MEUAPP.metodosEmComum
+// para métodos e propriedades em comum
+
+MEUAPP.metodosEmComum = {
+
+  regexParaNome: "", // definindo uma expressao regular
+                     // para validação de nomes
+
+  regexParaTelefone: "",  // define uma expressao regular para
+                          //validacao de numeros de telefone
+}
+
+// Objeto junto a declaracoes de método
+
+MEUAPP.eventos = {
+
+    adicionarTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    removerTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    obterEvento: function(e) {
+
+    // codigos
+
+    }
+
+    // é possível adicionar outros métodos e propriedades
+
+}
+
+// Sintaxe para usar o método adicionarTratador:
+
+MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);
+ +

Objetos inclusos por padrão

+ +

JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().

+ +
console.log(Math.random());
+
+ +
Nota: Este e todos os exemplos a seguir presumem que uma função console.log() está definida globalmente. A função console.log() não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.
+ +

Veja Core JavaScript 1.5 Reference:Global Objects para a lista dos objetos inclusos por padrão em JavaScript.

+ +

Cada objeto em JavaScript é um exemplar do objeto Object e, portanto, herda todas as suas propriedades e métodos.

+ +

Objetos Personalizados

+ +

A Classe

+ +

JavaScript é uma linguagem baseada em protótipos e não contém a declaração class, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.

+ +
var Pessoa = function () {};
+ +

O objeto (exemplar de uma classe)

+ +

Para criar um novo exemplar de um objeto obj, usamos a declaração new obj, atribuindo o resultado (que é do tipo obj) a uma variável que será acessada depois.

+ +

No exemplo acima, definimos uma classe chamada Pessoa. No exemplo abaixo, criamos dois exemplares (pessoa1 e pessoa2).

+ +
var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+
+ +
Nota: Por favor, veja também Object.create para um novo e alternativo método que cria um exemplar não-inicializado.
+ +

O Construtor

+ +

O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.

+ +

O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.

+ +

No exemplo abaixo, o construtor da classe Pessoa envia uma mensagem ao log quando um exemplar de Pessoa é criado.

+ +
var Pessoa = function () {
+  console.log("exemplar criado");
+}
+
+var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+
+ +

Propriedades (atributos de objetos)

+ +

Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.

+ +

A palavra-chave this, que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe NomeDoExemplar.Propriedade, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)

+ +
var Pessoa = function(nome) {
+  this.nome = nome;
+  console.log('Exemplar de Pessoa criado');
+};
+
+var pessoa1 = new Pessoa('Alice');
+var pessoa2 = new Pessoa('Bob');
+
+// mostrando as propriedades nome dos objetos
+console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
+console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log
+ +

Métodos

+ +

Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca () no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do prototype da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.

+ +

No exemplo abaixo, definimos e usarmos o método dizerOla() na classe Pessoa .

+ +
var Pessoa = function (genero) {
+  this.genero = genero;
+  alert('Pessoa instanciada');
+}
+
+Pessoa.prototype.dizerOla = function()
+{
+  alert ('hello');
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var pessoa2 = new Pessoa('Feminino');
+
+// Chamando o método dizerOla em Pessoa .
+pessoa1.dizerOla(); // hello
+
+ +

Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: 

+ +
function Pessoa(genero) {
+  this.genero = genero;
+}
+
+Pessoa.prototype.dizGenero = function()
+{
+  alert(this.genero);
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var informaGenero = pessoa1.dizGenero;
+
+pessoa1.dizGenero(); // 'Masculino'
+informaGenero(); // undefined
+alert(informaGenero === pessoa1.dizGenero); //true
+alert(informaGenero === Pessoa.prototype.dizGenero); //true
+
+ +

Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto Function, da seguinte maneira:

+ +
informaGenero.call(pessoa1); //alerts 'Masculino'
+
+ +
Veja mais sobre em Function.call e Function.apply
+ +

Herança

+ +

Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (JavaScript suporta apenas herança de classe única). A classe especializada é comumente chamada de filha, e a outra classe é comumente chamada de pai. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar Object.create para implementar herança.

+ +
+

JavaScript não detecta o  prototype.constructor da classe filha, veja a propriedade Core JavaScript 1.5 Reference:Global Objects:Object:prototype, então devemos declará-la manualmente.

+
+ +

No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().

+ +
// define a classe Pessoa
+function Pessoa() {}
+
+Pessoa.prototype.caminhar = function(){
+  alert ('Estou Caminhando!');
+};
+Pessoa.prototype.dizOi = function(){
+  alert ('Oi!');
+};
+
+// define a classe  Estudante
+function Estudante() {
+  // Chama o método pai
+  Pessoa.call(this);
+}
+
+// herda de Pessoa
+Estudante.prototype = new Pessoa();
+
+// corrige o ponteiro construtor, que aponta para Pessoa
+Estudante.prototype.constructor = Estudante;
+
+// adiciona o método dizOi
+Estudante.prototype.dizOi = function(){
+  alert('Oi, eu sou estudante');
+}
+
+// adiciona o método dizTchau
+Estudante.prototype.dizTchau = function(){
+  alert('tchau');
+}
+
+var estudante1 = new Estudante();
+estudante1.dizOi();
+estudante1.caminhar();
+estudante1.dizTchau();
+
+// checa a herança
+alert(estudante1 instanceof Pessoa); // true
+alert(estudante1 instanceof Estudante); // true
+
+ +

Utilizando Object.create a linha de herança deveria ser:

+ +
Estudante.prototype = Object.create(Pessoa.prototype);
+ +

Encapsulamento

+ +

Em exemplo anterior, Estudante não precisava saber como o método caminhar() da classe Pessoa seria implementada, mas ainda pode utilizar esté método; a classe Estudante não possui necessidade explícita de definir o método desde que não queremos alterar-lo. Isso se chama encapsulamento, pelo qual cada classe herda os métodos de seu pai e só precisa definir as coisas que deseja mudar.

+ +

Abstração

+ +

A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript alcança especialização por herança, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.

+ +

A Função de classe do JavaScript é hedar da classe Object (isso demonstra a especialização do modelo). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)

+ +
var foo = function(){};
+alert( 'foo é um Function: ' + (foo instanceof Function) );
+alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
+
+ +

Polimorfismo

+ +

Assim como todos os métodos e propriedades são definidos dentro da propriedade prototype, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).

+ +

Notas

+ +

As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.

+ +

As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. 

+ +

Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.

+ +

Referências

+ +
    +
  1. Mozilla. "Core JavaScript 1.5 Guide", https://developer.mozilla.org/docs/Web/JavaScript/Guide
    2. +
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. +
+ +
+

Original Document Information

+ + +
+ +

Es: https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos 

diff --git a/files/pt-br/conflicting/mdn/contribute/getting_started/index.html b/files/pt-br/conflicting/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..26ae1e7a9a --- /dev/null +++ b/files/pt-br/conflicting/mdn/contribute/getting_started/index.html @@ -0,0 +1,134 @@ +--- +title: Como ajudar a MDN +slug: 'Projeto:Como_ajudar_com_MDN' +translation_of: MDN/Contribute/Getting_started +translation_of_original: MDN/Contribute/Tasks +--- +
{{MDNSidebar}}
+ +

Somos uma comunidade aberta de desenvolvedores criando recursos para uma web ainda melhor, independente do nosso navegador, programas ou marca. Qualquer um pode contribuir e cada pessoa que participa nos faz mais forte. Juntos, podemos continuar a impulsionar a inovação na web para servir o bem maior. Tudo começa aqui, com você.

+ +

Junte-se a Comunidade

+ +

Se quiser conselhos, ajuda, ou apenas nos conhecer, por favor, junte-se a nós nos seguintes canais:

+ +

Canais no IRC – para conversar com colaboradores MDN:

+ + + +

A reunião da comunidade MDN acontece a cada duas quartas-feiras às 10:00 da manhã, horário do pacífico (18:00 UTC inverno; 17:00 UTC verão) no canal  #devmo no irc.mozilla.org.

+ +

Para entrar no IRC, siga essas instruções da wiki: https://wiki.mozilla.org/IRC#Getting_Started

+ +

Listas de Email – comunicações menos frequentes para toda a comunidade MDN:

+ + + +

Acesse o MDN

+ +

Para adicionar, editar, ou traduzir um documento, você precisará entrar no site da MDN:

+ +

https://developer.org

+ +

Uma vez no site, você terá que criar uma conta na MDN. A Mozilla Developer Network usa o Persona (também conhecido como BrowserID) para gerenciar contas. O Persona é uma opção segura e fácil que protege a privacidade do usuário.

+ +

Criando sua conta

+ +
    +
  1. Clique no botão Entrar na parte superior da página. Uma janela abrirá com o login do Persona.
    + Screenshot of MDN site header, including Sign In button
    2. +
  2. Coloque o seu endereço de e-mail e clique em próximo.
    + Screenshot of the Persona window for a new user
    3. +
+ +

O que acontece depois dependerá se você já usou este endereço de e-mail com o Persona antes.

+ +
    +
  1. Se você ainda não tiver o e-mail no Persona, uma janela abrirá solicitando que você escolha uma senha. Digite a senha duas vezes e clique em verificar.
    2. +
  2. Screenshot of the Persona window for setting a password +
      +
    1. Faça a verificação do seu e-mail, acessando sua conta. Você receberá um e-mail do BrowserID@browserid.org (verifique sua caixa de SPAM se necessário).
      2. +
    2. Ao abrir o e-mail clique no link de registro.
      3. +
    3. Digite a senha para este endereço de e-mail (duas vezes), e clique em Concluir. Na guia MDN ou na janela (onde originalmente você clicou para entrar), o MDN mostrará uma página de criação de conta.
      4. +
    4. Digite um nome de usuário para associar à sua conta e clique em criar novo perfil. Observe que o nome de usuário não pode conter espaços.
      5. +
    +
    3. +
  3. Se você já usou o Persona antes, digite sua senha existente para este endereço de e-mail e clique em verificar.
    4. +
+ +

Parabéns, agora você tem uma conta na MDN e poderá criar, editar e traduzir o conteúdo da documentação.

+ +

Editando um conteúdo na MDN

+ +

Comece editando uma página

+ +
    +
  1. Verifique se você está logado na MDN (veja a seção acima para instruções)
    2. +
  2. Mude a página para o modo de edição. O conteúdo da página aparecerá dentro de um editor.
    + Screenshot of History, Watch, and Edit buttons in MDN
    + Screenshot of MDN editor
    3. +
+ +

Salve o seu trabalho

+ +

O editor do MDN oferece várias maneiras para você verificar e salvar seu trabalho.
+ Screenshot of MDN's file management buttons, including "Save and Keep Editing", "Save Changes", "Preview Changes" and "Discard Changes"

+ +
    +
  1. Save changes: Salva as alterações e sai do modo de edição, voltando à página para modo de leitura. Este é o mesmo que o botão Salvar e Sair na barra de ferramentas do editor.
    2. +
  2. Save and keep editing: Salva as alterações, mantendo-se no modo de edição. Este é o mesmo que o botão de Salvar e Continuar Editando na barra de ferramentas do editor.
    3. +
  3. Preview changes: Aplica as alterações em outra aba do navegador. Esta aba executa todos os modelos que são referenciados na página, para que você possa ver como os modelos aparecerão para os leitores.
    4. +
  4. Discard changes: Joga fora suas alterações desde a última gravação, e retorna a página para modo de leitura.
    5. +
+ +

Modifique a informação da página

+ +

Enquanto uma página está em modo de edição, você pode modificar alguns metadados da mesma. Clique no botão "i" para abrir os campos de informações das páginas.

+ + + +

Quaisquer alterações a estes campos são salvos quando você salva a página como um todo.

+ +

Formatação do Texto

+ +

O editor oferece várias ferramentas, que poderão ajuda-lo a formatar o texto. Algumas delas são comuns em muitos editores e não precisam de explicação.

+ + + +

Traduzindo uma página

+ +
    +
  1. No menu Languages​​, clique em Add Translation.
    + Screenshot of MDN's languages menu, with "Add translation" selected
    2. +
  2. A página do idioma selecionado aparecerá.
    + Screenshot of MDN's list of languages available for translation
    3. +
  3. Clique no idioma que deseja traduzir. Deverá abrir o Translating Article, com o texto no idioma original apresentado no lado esquerdo.
    + Screenshot of MDN's translation user interface
    4. +
  4. Traduza o título e o conteúdo da página para a língua selecionada. Para isso, clique no botão "i" para aparecer as informações que você pode editar.
    5. +
  5. Clique em salvar mudanças quando tiver terminado.
    6. +
+ +

Nota: Os elementos da interface do usuário "Translating Article" são inicialmente mostrados em Inglês.

+ +

Editando uma página traduzida

+ +

Em uma página traduzida, clique no botão Editar (que pode estar na sua língua nativa). A "Visão do Artigo Traduzido" se abrirá.
+ Screenshot of MDN's translation user interface

diff --git a/files/pt-br/conflicting/mozilla/add-ons/index.html b/files/pt-br/conflicting/mozilla/add-ons/index.html new file mode 100644 index 0000000000..9661e309ae --- /dev/null +++ b/files/pt-br/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,263 @@ +--- +title: Construindo um complemento +slug: Construindo_um_complemento +tags: + - Add-ons + - Complementos + - Tutorial +translation_of: Mozilla/Add-ons +translation_of_original: Building_an_Extension +--- +

Introdução

+

This tutorial will take you through the steps required to build a very basic extension - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!".

+
+ Note: The extension created by this tutorial won't work in Firefox versions that don't have a static status bar (that is, Firefox 4 and up). You can find a more up-to-date tutorial in the XUL School tutorial The Essentials of an Extension.
+

Since Firefox 4 (and other Mozilla 2 based applications) there are two types of extensions:

+ +

This article explains how to build a traditional extension for Firefox. For information on bootstrapped or restartless extensions, see Bootstrapped extensions.

+

For a tutorial on building an extension for Thunderbird, see Building a Thunderbird extension.

+

Início rápido

+

A Hello World extension similar to what you can generate with the Extension Wizard is explained line-by-line in another tutorial from MozillaZine Knowledge Base.

+

Configurando o ambiente de desenvolvimento

+

Extensions are packaged and distributed in ZIP files or Bundles, with the XPI file extension.

+

An example of the content within a typical XPI file:

+
my_extension.xpi:                         //Equal to a folder named my_extension/
+          /install.rdf                    //General information about your extension
+          /chrome.manifest                //Registers your content with the Chrome engine
+          /chrome/
+          /chrome/content/                //Contents of your extension such as XUL and JavaScript files
+          /chrome/icons/default/*         //Default Icons of the extension
+          /chrome/locale/*                //Building an Extension# Localization
+          /defaults/preferences/*.js      //Building an Extension# Defaults Files
+          /plugins/*
+          /components/*
+          /components/cmdline.js
+

We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your extension somewhere on your hard disk (e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/). Inside your new extension folder, create another folder called chrome, and inside the chrome folder create a folder called content.

+

Inside the root directory of your extension folder, create two new empty text files, called chrome.manifest and install.rdf. In the chrome/content directory, create a new empty text file called sample.xul.

+

You should end up with this directory structure:

+ +

<pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre> Please read the additional information about setting up your development environment in the article Setting up extension development environment.

+

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

+

Criando o Manifesto de Instalação

+

Open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@example.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>4.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>sample</em:name>
+    <em:description>A test extension</em:description>
+    <em:creator>Your Name Here</em:creator>
+    <em:homepageURL>http://www.example.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +
+ Note: If you get a message that the install.rdf is malformed, it is helpful to load it into Firefox using the File->Open File command and it will report XML errors to you.
+

Extensions designed to work with Firefox 2.0.0.x at the latest should set the maximum version to "2.0.0.*". Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to "1.5.0.*".

+

See Install Manifests for a complete listing of the required and optional properties.

+

Save the file.

+

Extendendo o navegador com XUL

+

Firefox's user interface is written in XUL and JavaScript. XUL is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.

+

To extend the browser, we modify parts of the browser UI by adding or modifying widgets. We add widgets by inserting new XUL DOM elements into the browser window and modify them by using script and attaching event handlers.

+

The browser is implemented in a XUL file called browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contains content/browser/browser.xul). In browser.xul we can find the status bar, which looks something like this:

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.

+

XUL Overlays

+

XUL Overlays are a way of attaching other UI widgets to a XUL document at runtime. A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document. These fragments can specify widgets to be inserted, removed, or modified.

+

Example XUL Overlay Document

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"  />
+ </statusbar>
+</overlay>
+
+

The <statusbar> called status-bar specifies the "merge point" within the browser window that we want to attach to.

+

The <statusbarpanel> child is a new widget that we want to insert within the merge point.

+

Take this sample code above and save it into your file called sample.xul inside the chrome/content folder you created.

+

For more information about merging widgets and modifying the user interface using Overlays, see below.

+

Chrome URIs

+

XUL files are part of "Chrome Packages" - bundles of user interface components which are loaded via chrome:// URIs. Rather than load the browser from disk using a file:// URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to XUL content that the installed application knows about.

+

The browser window is: chrome://browser/content/browser.xul. Try typing this URL into the location bar in Firefox!

+

Chrome URIs consist of several components:

+ +

So, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section.

+

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).

+

Criando um Manifesto Chrome

+

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

+

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

+

Add in this code:

+
content     sample    chrome/content/
+
+

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

+

This specifies the:

+
    +
  1. type of material within a chrome package
    2. +
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})
    3. +
  3. location of the chrome packages' files
    4. +
+

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

+

Note that content, locale, and skin files must be kept inside folders called content, locale, and skin within your chrome subdirectory.

+

Save the file. When you launch Firefox with your extension (later in this tutorial), this will register the chrome package.

+

Register an Overlay

+

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

+

Teste

+

First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.

+
    +
  1. Locate your profile folder and beneath it the profile you want to work with (e.g., Firefox/Profiles/<profile_id>.default/).
    2. +
  2. Open the extensions/ folder, creating it if need be.
    3. +
  3. Create a new text file and put the full path to your development folder inside (e.g., C:\extensions\my_extension\ or ~/extensions/my_extension/). Windows users should retain the OS slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
    4. +
  4. Save the file with the id of your extension as its name (e.g., sample@example.net). No file extension.
    5. +
+

Now you should be ready to test your extension!

+

Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.

+

You can now go back and make changes to the .xul file, close and restart Firefox, and they should appear.

+

Empacotando

+

Now that your extension works, you can package it for deployment and installation.

+

Zip up the contents of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!

+

On Mac OS X, you can right-click on the contents of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the zip command on the command line to create the zip file.

+

On Linux, you would likewise use the command-line zip tool.

+

If you have the 'Extension Builder' extension installed, it can compile the .xpi file for you (Tools -> Extension Developer -> Extension Builder). Merely navigate to the directory where your extension is (install.rdf, etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.

+

Now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -> Extensions in Firefox 1.5.0.x, or Tools -> Add-ons in later versions.

+

Instalando a partir de uma página web

+

There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the InstallTrigger method to install XPIs, as it provides the best experience to users.

+

Usando addons.mozilla.org

+

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

+

Visit http://addons.mozilla.org/developers/ to create an account and begin distributing your extensions!

+

Note: Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.

+

Instalando complementos usando uma instalador um instalador separado

+

It's possible to install an extension in a special directory and it will be installed the next time the application starts. The extension will be available to any profile. See Installing extensions for more information.

+

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the application starts. This allows application installers to easily add integration hooks as extensions. See Adding Extensions using the Windows Registry for more information.

+

Mais sobre XUL Overlays

+

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

+ +
<statusbarpanel position="1" ...  />
+
+<statusbarpanel insertbefore="other-id" ...  />
+
+<statusbarpanel insertafter="other-id" ...  />
+
+

Criando novos componentes de interface com o usuário

+

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors, etc.

+

View the XUL documentation for more resources for XUL developers.

+

Arquivos padrão

+

Defaults files that you use to seed a user's profile with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

+

An example default preference file:

+
pref("extensions.sample.username", "Joe"); //a string pref
+pref("extensions.sample.sort", 2); //an int pref
+pref("extensions.sample.showAdvanced", true); //a boolean pref
+
+

Componentes XPCOM

+

Firefox supports XPCOM components in extensions. You can create your own components easily in JavaScript or in C++ (using the Gecko SDK).

+

Place all of your .js or .dll files in the components/ directory - they are automatically registered the first time Firefox runs after your extension is installed.

+

For more information see How to Build an XPCOM Component in Javascript, How to build a binary XPCOM component using Visual Studio, and the Creating XPCOM Components book.

+

Aplicação de linha de comando

+

One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:

+
 firefox.exe -myapp
+
+

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). See Chrome: Command Line and a forum discussion for details.

+

Localização

+

To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this while you are developing your extension, rather than come back and do it later!

+

Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create two directories nested as "locale/en-US" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:

+
locale sample en-US chrome/locale/en-US/
+
+

To create localizable attribute values in XUL, you can place the values in a .dtd file (sample.dtd for our sample extension). This file should be placed in the locale directory and looks like this:

+
<!ENTITY  my-panel.label  "Hello, World">
+
+

And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:

+
<?xml version="1.0"?>
+<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
+...
+
+

where window is the localName value of the root element of the XUL document, and the value of the SYSTEM property is the chrome URI to the entity file.

+

For our sample extension, replace window with overlay (root element), packagename with sample, and filename.dtd with sample.dtd.

+

To use the entities, modify your XUL to look like this:

+
<statusbarpanel id="my-panel" label="&my-panel.label;"  />
+
+

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

+

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

+
key=value
+
+

and then use {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} or the {{ XULElem("stringbundle") }} tag to load the values into script.

+

Entendendo o navegador

+

Use the DOM Inspector to inspect the browser window or any other XUL window you want to extend.

+

Note: DOM Inspector is not part of the Standard Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from Firefox Add-ons as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose DOM Inspector (or Developer Tools in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.

+

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this, the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

+

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the load event fires on the master XUL window.

+

Debugando complementos

+

Analytical Tools for Debugging

+ +

printf debugging

+ +

Advanced debugging

+ +

Further information

+ diff --git a/files/pt-br/conflicting/mozilla/firefox/releases/index.html b/files/pt-br/conflicting/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..c74b2f5b90 --- /dev/null +++ b/files/pt-br/conflicting/mozilla/firefox/releases/index.html @@ -0,0 +1,428 @@ +--- +title: Notas de lançamento +slug: Tools/Notas_de_lancamento +tags: + - Notas de lançamento +translation_of: Mozilla/Firefox/Releases +translation_of_original: Tools/Release_notes +--- +
{{ToolsSidebar}}

Firefox 53

+ + + +

Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53.

+ +

Firefox 52

+ + + +

All devtools bugs fixed between Firefox 51 and Firefox 52.

+ +

Firefox 51

+ + + +

All devtools bugs fixed between Firefox 50 and Firefox 51.

+ +

Firefox 50

+ + + +

All devtools bugs fixed between Firefox 49 and Firefox 50.

+ +

Firefox 49

+ + + +

All devtools bugs fixed between Firefox 48 and Firefox 49.

+ +

Firefox 48

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 47 and Firefox 48.

+ +

Firefox 47

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 46 and Firefox 47.

+ +

Firefox 46

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 45 and Firefox 46.

+ +

Firefox 45

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 44 and Firefox 45.

+ +

Firefox 44

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 43 and Firefox 44.

+ +

Firefox 43

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 42 and Firefox 43.

+ +

Firefox 42

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 41 and Firefox 42.

+ +

Firefox 41

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 40 and Firefox 41. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

+ +

Firefox 40

+ +

Highlights:

+ + + +

More:

+ + + +

Everything: all devtools bugs fixed between Firefox 39 and Firefox 40.

+ +

Firefox 39

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 38 and Firefox 39.

+ +

Firefox 38

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 37 and Firefox 38.

+ +

Firefox 37

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 36 and Firefox 37.

+ +

Firefox 36

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 35 and Firefox 36.

+ +

Firefox 35

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 34 and Firefox 35.

+ +

Firefox 34

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 33 and Firefox 34.

+ +

Firefox 33

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 32 and Firefox 33.

+ +

Firefox 32

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 31 and Firefox 32.

+ +

Firefox 31

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 30 and Firefox 31.

+ +

Firefox 30

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 29 and Firefox 30.

+ +

Firefox 29

+ +

Firefox 29 Hacks post. Highlights:

+ + + +

Firefox 28

+ +

Firefox 28 Hacks post. Highlights:

+ + + +

Firefox 27

+ +

Firefox 27 Hacks post. Highlights:

+ + diff --git a/files/pt-br/conflicting/web/accessibility/index.html b/files/pt-br/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..51a4ad7843 --- /dev/null +++ b/files/pt-br/conflicting/web/accessibility/index.html @@ -0,0 +1,55 @@ +--- +title: Desenvolvimento Web +slug: Web/Acessibilidade/Desenvolvimento_Web +tags: + - ARIA + - Accessibility + - Acessibilidade + - DHTML + - Desenvolvimento Web + - WebMechanics + - Widgets acessíveis + - XUL +translation_of: Web/Accessibility +translation_of_original: Web/Accessibility/Web_Development +--- +

Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades web e XUL

+ + + + + + + + +
+

Acessibilidade na Rede Mundial

+ +
+
ARIA para desenvolvedores
+
O conjunto ARIA possibilita a acessibilidade em conteúdo dinâmico HTML. São exemplos de uso de ARIA os conteúdos de regiões dinâmicas e widgets com JavaScript.
+
JavaScript para widgets navegáveis pelo teclado
+
Até agora, programadores web construiam seus modelos de widgets baseados em <div> e <span>, por faltarem as técnicas adequadas. A acessibilidade através do teclado é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.
+
+ +

Acessibilidade XUL

+ +
+
 
+
Construindo componentes personalizados e acessíveis com XUL
+
A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.
+
Acessibilidade XUL - diretrizes de autoria
+
Quando a autoria está de acordo com estas diretrizes, a XUL é capaz de gerar interfaces acessíveis. Codificadores, revisores, construtores e engenheiros de produção (QA) devem se familiarizar com elas.
+
+ 		+

Recursos Externos

+ +
+
Mergulhe na Acessibilidade
+
Este livro responde a duas questões e a primeira, é: "Por que eu devo tornar meu sítio mais acessível?". A segunda, é: "Como eu posso fazer meu sítio mais acessível?"
+
Construindo páginas acessíveis
+
Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.
+
+
+ +

 

diff --git a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..e0dbd0a970 --- /dev/null +++ b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,109 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - RandomSource + - Referencia + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +

{{APIRef("Web Crypto API")}}

+ +

RandomSource representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.

+ +

RandomSource não é uma interface e nenhum objeto deste tipo pode ser criado.

+ +

Propriedades

+ +

RandomSource não define ou herda nenhuma propriedade.

+ +
+
+ +

Métodos

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.
+
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Definição inicial.
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] Apesar da RandomSource estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.

+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/api/cryptokey/index.html b/files/pt-br/conflicting/web/api/cryptokey/index.html new file mode 100644 index 0000000000..d80199a4ed --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey/index.html @@ -0,0 +1,113 @@ +--- +title: CryptoKey.algorithm +slug: Web/API/CryptoKey/algorithm +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/algorithm +--- +

{{APIRef("Web Crypto API")}}

+ +

A propriedade CryptoKey.algorithm de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.

+ +

Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.

+ +

Sintaxe

+ +
result = key.algorithm
+
+ +

Valor de retorno

+ + + +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}{{ Spec2('Web Crypto API') }}Definição inicial.
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +

Veja também

+ + + +

Dicionário

+ +

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html new file mode 100644 index 0000000000..666de87d23 --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html @@ -0,0 +1,118 @@ +--- +title: CryptoKey.type +slug: Web/API/CryptoKey/type +tags: + - API + - Apenas Leitura + - CryptoKey + - Propriedades + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/type +--- +

{{APIRef("Web Crypto API")}}

+ +

O CryptoKey.type é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico ("secret") ou, para um algoritmo assimétrico, ("public" ou "private", dependendo do seu propósito).

+ +

Sintaxe

+ +
result = key.type
+
+ +

Valor de retorno

+ + + +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}{{ Spec2('Web Crypto API') }}Definição inicial.
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +

Veja também

+ + + +

Dicionário:

+ +

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html new file mode 100644 index 0000000000..4fe2885cbc --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html @@ -0,0 +1,111 @@ +--- +title: CryptoKey.extractable +slug: Web/API/CryptoKey/extractable +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/extractable +--- +

{{APIRef("Web Crypto API")}}

+ +

A propriedade de apenas leitura CryptoKey.extractable que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.

+ +

Sintaxe

+ +
result = key.extractable
+
+ +

Valor de retorno

+ + + +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}{{ Spec2('Web Crypto API') }}Definição inicial.
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +

Veja também

+ + + +

Dicionário

+ +

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html new file mode 100644 index 0000000000..c74a658a32 --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html @@ -0,0 +1,124 @@ +--- +title: CryptoKey.usages +slug: Web/API/CryptoKey/usages +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/usages +--- +

{{APIRef("Web Crypto API")}}

+ +

A propriedade de apenas leitura CryptoKey.usages é um conjunto enumerado que indica os propósitos da key.

+ +

Possíveis valores são:

+ + + +

Sintaxe

+ +
result = key.usages
+
+ +

Valor de retorno

+ + + +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}{{ Spec2('Web Crypto API') }}Definição inicial.
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
+
+ +

Veja também

+ + + +

Dicionário:

+ +

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/document_object_model/index.html b/files/pt-br/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..4b8372f55d --- /dev/null +++ b/files/pt-br/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,89 @@ +--- +title: Document Object Model (DOM) +slug: DOM +tags: + - DOM + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +
+ Using the W3C DOM Level 1 Core
+ Introduction to the W3C DOM.
+
+

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

+
+
+
+

Documentation about the DOM

+
+
+ Gecko DOM Reference
+
+ The Gecko Document Object Model Reference.
+
+ About the Document Object Model
+
+ A short introduction to the DOM.
+
+ The DOM and JavaScript
+
+ What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.
+
+ Using dynamic styling information
+
+ How to obtain information on and manipulate styling via the DOM.
+
+ DOM event reference
+
+ Lists all the DOM events and their meanings.
+
+ History API: Manipulating the browser history
+
+ Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.
+
+ File API: Using files from web applications
+
+ Describes the HTML5-introduced capability to select a local file and read data from it.
+
+ Using the Page Visibility API
+
+ Explains how to detect and use information about a web page being in the foreground or in the background.
+
+ Fullscreen API: Using the fullscreen mode
+
+ Describes how to set up a page that use the whole screen, without any browser UI around it.
+
+ Determining the dimensions of elements
+
+ How to figure out the right way to determine the dimensions of elements, given your needs.
+
+ Dynamically modifying XUL-based user interface
+
+ The basics of manipulating the XUL UI with DOM methods.
+
+

View All...

+
+
+

Getting help from the community

+

You need help on a DOM-related problem and can't find the solution in the documentation?

+
    +
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+

Tools easing working with the DOM

+ +

View All...

+ + +
+
+

 

diff --git a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..e5e756482a --- /dev/null +++ b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,99 @@ +--- +title: window.onscroll +slug: Web/API/Window/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +translation_of_original: Web/API/Window/onscroll +--- +

{{ ApiRef() }}

+

Sumário

+

Especifica a função a ser chamada quando é feito o scroll na janela.

+

Sintaxe

+
window.onscroll = funcRef;
+
+ +

Exemplos

+

Exemplo 1: Genérico

+
window.onscroll = function (oEvent) {
+  // executa um bloco de código ou funções, quando o scroll é feito na janela.
+}
+
+

Examplo 2: Dectando a rolagem

+

O exemplo a seguir, irá disparar um alerta sempre que o usuário rolar a página .

+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>onscroll test</title>
+<script type="text/javascript">
+window.onscroll = scroll;
+
+function scroll () {
+ alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
+ // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
+}
+</script>
+</head>
+
+<body>
+<p>Redimensione a janela</p>
+<p>para um tamanho pequeno,</p>
+<p>e use a barra de rolagem</p>
+<p>para mover ao redor do conteúdo da página</p>
+<p>na janela.</p>
+</body>
+</html>
+
+ +

O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels

+

 

+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+var bAppended = false, oBookmark = document.createElement("div");
+oBookmark.id = "arrowUp";
+oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";
+
+onscroll = function() {
+  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
+  bAppended = nVScroll > 500 ?
+    bAppended || (document.body.appendChild(oBookmark), true)
+    : bAppended && (document.body.removeChild(oBookmark), false);
+};
+</script>
+<style type="text/css">
+#arrowUp {
+  position: fixed;
+  height: auto;
+  width: auto;
+  right: 10px;
+  top: 10px;
+  font-size: 48px;
+}
+#arrowUp a {
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+  font-family: serif;
+}
+</style>
+</head>
+
+<body>
+<p>Conteúdo da página aqui!</p>
+</body>
+
+</html>
+

Notas

+

{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.
+ Esse bug foi corrigido no Gecko 1.8/Firefox 1.5

+

Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.

+

Especificação

+ +

{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}

diff --git a/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html b/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: DragDrop +--- +

 

+

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/pt-br/conflicting/web/api/index.html b/files/pt-br/conflicting/web/api/index.html new file mode 100644 index 0000000000..93f5faee9a --- /dev/null +++ b/files/pt-br/conflicting/web/api/index.html @@ -0,0 +1,80 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - NeedsBrowserCompatibility + - NeedsUpdate + - Property + - Reference + - Web +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +

{{ APIRef("DOM") }}

+ +

Summary

+ +

name recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.

+ +
+

Nota: A propriedade name não existe para outros elementos; diferente de tagName e nodeName, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

+
+ +

name pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um form ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.

+ +

Sintaxe

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Exemplo

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Recebe uma referência ao primeiro elemento no formulário
+  var formElement = document.forms['formA'].elements[0];
+
+  // Fornece um name a ele
+  formElement.name = 'inputA';
+
+  // Exibe o valor do input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notas

+ +

No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade name de objetos do DOM criados com {{ domxref("document.createElement()") }}.

+ +

Especificação

+ +

Especificação W3C DOM 2 HTML:

+ + diff --git a/files/pt-br/conflicting/web/api/url/index.html b/files/pt-br/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..1dec25bd24 --- /dev/null +++ b/files/pt-br/conflicting/web/api/url/index.html @@ -0,0 +1,101 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

A propriedade Window.URL retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Sintaxe

+ +

Chamando um método estático:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

Construindo um novo objeto:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
+ +

Compatibilidade do navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno nsIDOMMozURLProperty não padrão. Na prática, isso não fez diferença.

+ +

[2] Implementado sob o nome não padronizado webkitURL.

+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/api/webrtc_api/index.html b/files/pt-br/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..9b1cff261d --- /dev/null +++ b/files/pt-br/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,81 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - Media + - NeedsContent + - NeedsTranslation + - TopicStub + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +

O RTC na WebRTC significa comunicações em tempo real, tecnologia que permite transmissão de áudio/vídeo e compartilhamento de dados entre navegador clientes (pares). Como um conjunto de padrões, a WebRTC fornece a qualquer navegador com à capacidade de compartilhar dados de aplicativos e realizar teleconferências de ponto a ponto, sem a necessidade de instalar plug-ins ou software de terceiros.

+ +

Os componentes WebRTC são acessados com APIs JavaScript. Atualmente em desenvolvimento estão a API Network Stream, que representa um fluxo de dados de áudio ou vídeo, e a API PeerConnection, que permite que dois ou mais usuários se comuniquem entre navegadores. Também está em desenvolvimento uma API DataChannel que permite a comunicação de outros tipos de dados para jogos em tempo real, bate-papo de texto, transferência de arquivos e assim por diante.

+ +
+

Note: Grande parte desse co nteúdo está desatualizado. Vamos atualizá-lo em breve.

+
+ +

Quer descobrir WebRTC? Assista a este vídeo introdutório na web!!

+ + + + + + + + +
+

Documentação sobre WebRTC

+ +
+
Introdução ao WebRTC
+
Um guia introdutório sobre o que é WebRTC e como funciona. +
+
Usando a API Network Stream
+
Um guia para usar a API Network Stream para transmitir áudio e vídeo.
+
Comunicações ponto a ponto com WebRTC
+
Como executar comunicações ponto a ponto usando as APIs WebRTC.
+
Capturando imagens de uma webcam
+
Um guia introdutório sobre o que é WebRTC e como funciona.
+
API MediaStream
+
A API que suporta a geração e manipulação de objetos de fluxo de mídia.
+
getUserMedia()
+
A função de navegador que fornece acesso aos dispositivos de mídia do sistema.
+
+ +

Saiba mais...

+ +

Exemplos

+ + + 		+

Obter ajuda da comunidade

+Ao desenvolver sites e aplicações web que aproveitarão as tecnologias WebRTC, pode ser útil conversar com outras pessoas do mesmo modo.

+ +
    +
  • Consulte o fórum de tópicos da mídia: {{ DiscussionList("dev-media", "mozilla.dev.media") }}
    • +
+ +
    +
  • Faça sua pergunta no canal IRC de mídia da Mozilla: #media
    • +
+ +

Não se esqueça da etiqueta...

+ + + + +

Recursos

+ + +
diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f51b72c102 --- /dev/null +++ b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,121 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..8be6ca7e8b --- /dev/null +++ b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,117 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..c7eb86d426 --- /dev/null +++ b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,134 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile +translation_of: Web/API +translation_of_original: WebAPI +--- +

WebAPI é um termo usado para se referir a um conjunto de compatibilidade de dispositivos e acessar APIs que permitem que aplicativos Web e conteúdos para acessar o hardware do dispositivo (como o estado da bateria ou o hardware de vibração do dispositivo), bem como o acesso aos dados armazenados no dispositivo (como como o calendário ou lista de contatos). Ao acrescentar estas APIs, esperamos expandir o que a Web pode fazer hoje e apenas plataformas proprietárias foram capazes de fazer no passado.

+ +
+

Nota: Esta documentação é maior do que parece, os links ainda não estão todos adicionados aqui. Estamos trabalhando ativamente para melhorar isso e esperamos ver as coisas muito melhor nas próximas semanas. Veja a página de status da documentação da WebAPI, onde estamos acompanhando o trabalho em documentos WebAPI.

+
+ +
+

Nota: para uma breve explicação de cada distintivo, consulte a documentação do pacote de aplicativos.

+
+ +
+
+

APIs de Comunicação

+ +
+
Network Information API (API de Informação de Rede)
+
Fornece informações básicas sobre a conexão de rede atual, como a velocidade de conexão.
+
Bluetooth {{NonStandardBadge}}
+
A API WebBluetooth fornece acesso de baixo nível ao hardware Bluetooth do dispositivo.
+
Mobile Connection API (API de Conexão Móvel) {{NonStandardBadge}}
+
Expões informações sobre a conectividade do celular, como a força do sinal, informação da operadora, assim por diante.
+
Network Stats API (API de Estatísticas de Rede) {{NonStandardBadge}}
+
Monitora a utilização de dados e expõe esses dados para aplicações privilegiadas.
+
Telephony (Telefonia) {{NonStandardBadge}}
+
Permite aplicações efectuar e atender chamadas telefônicas e usar a interface de usuário de telefonia embutida.
+
WebSMS {{NonStandardBadge}}
+
Permite que aplicações enviem e recebam mensagens de texto SMS, bem como para acessar e gerenciar as mensagens armazenadas no dispositivo.
+
WiFi Information API (API de Informações WiFi) {{NonStandardBadge}}
+
+
+
Uma API privilegiada que fornece informações sobre a força do sinal, o nome da rede atual, as redes Wi-Fi disponíveis, e assim por diante.
+
+
+
+ +

APIs de Acesso ao Hardware

+ +
+
Ambiente Light Sensor API (API do Sensor de Luz Ambiente)
+
Fornece acesso ao sensor de luz ambiente, que permite que seu aplicativo detecte o nível de luz ao redor do dispositivo.
+
Battery Status API (API de Estado da Bateria)
+
Fornece informações sobre nível de carregamento da bateria e quando ou não o dispositivo está plugado e carregando.
+
Geolocation API (API de Geolocalização)
+
Provê informação sobre a localização física do dispositivo.
+
Pointer Lock API (API de Bloqueio do mouse)
+
Permitir aplicativos bloquearem o acesso ao mouse e ter acesso a deltas de movimento ao invés de coordenadas absolutas, o que é ótimo para jogos.
+
Proximity API (API de Proximidade)
+
Permite dectar a proximidade do dispositivo a objetos próximos, como o rosto do usuário.
+
Device Orientation API (API de Orientação do Dispositivo)
+
Fornece notificações quando a orientação do dispositivo muda.
+
Screen Orientation API (API de Orientação de Tela)
+
Fornece notificações quando a tela do dispositivo muda. Você também uasr a API para permitir seu aplicativo indicar qual orientação é preferida.
+
Vibration API (API de Vibração)
+
Permite aplicativos controlarem o hardware de vibração do dispositivo para coisas como feedback tátil em jogos. Não é a intenção para utilização como vibrações de notificação. Veja a API de Alarme para isso.
+
Camera API (API de Camera) {{NonStandardBadge}}
+
Permite aplicativos tirarem fotograficas e/ou gravar vídeos usando a camera do dispositivo.
+
Power Management API (API Gerenciamento de Energia) {{NonStandardBadge}}
+
Permite aplicativos ligar ou desligar a tela, CPU e energia do dispositivo, assim por diante. Também fornece suporte para verificar a inspecionar recursos em eventos de bloqueio.Ver todos...
+
+
+ +
+

APIs de Gerenciamento de Dados

+ +
+
FileHandle API
+
Fornece suporte para escrever arquivos com suporte a bloqueio.
+
IndexedDB
+
Armazenamento do lado do cliente de dados estruturados, com suporte para pesquisas de alto desempenho.
+
Settings API (API de Configurações) {{NonStandardBadge}}
+
Permite apps examinarem e alterar todas opções de configuração do sistema que são permanentemente armazenadas no dispositivo.
+
+ +

Outras APIs

+ +
+
Alarm API (API de Alarme)
+
Permite apps agendarem notificações. Também fornece suporte para automaticamente abrir um app em um tempo específico.
+
Simple Push API
+
Permite a plataforma enviar mensagens de notificação para aplicações específicas.
+
Notificações Web
+
Permites aplicações enviarem notificacões mostradas no nível do sistema.
+
Apps API {{NonStandardBadge}}
+
As WebApps APIs abertas fornecem suporte para instalar e gerenciar WebApps. Em complemento, suporte é dado para permitir apps determinem informações de pagamento.
+
Web Activities (Atividades Web) {{NonStandardBadge}}
+
Permite um app delegar uma atividade para outro app; por exemplo, um app pode perguntar outro app para selecionar (ou criar) e retornar uma foto. Tipicamente o usuário é capaz de configurar que apps são usados para cada atividade.
+
WebPayment API (API Pagamento Web) {{NonStandardBadge}}
+
Permite conteúdos web iniciar pagamentos e restituição para bens virtuais.
+
Browser API {{NonStandardBadge}}
+
Fornece suporte para a construção de um navegador Web completamente utilizando tecnologias da Web (em essência, um navegador em um navegador).
+
+ +
+
Idle API(Notificações em Segundo Plano)
+
Permite apps receberem notificações quando o usuário não estiver ativamente utilizando o dispositivo.
+
Permissions API(API de Permissões) {{NonStandardBadge}}
+
Gerencia permissão de apps em localização centralizada. Utilizado pelo app de Configurações.
+
Time/Clock API (API de Tempo/Relógio)  {{NonStandardBadge}}
+
Fornece suporte para configuração do tempo atual. O fuso horário é definido utilizando a Settings API (API de Configurações).
+
+ +

Comunidade WebAPI

+ +

Se você precisa de ajuda com alguma dessas APIs, aqui estão várias maneiras que você pode conversar com outros desenvolvedores que as estão utilizando.

+ +
    +
  • Consultar forum de WebAPI {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • +
  • Visite o canal no IRC WebAPI: #webapi
    • +
+ +

Don't forget about the netiquette...

+ + + + +
+
+ +

 

diff --git a/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..00dbf6fca6 --- /dev/null +++ b/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,328 @@ +--- +title: Usando CSS flexible boxes (Caixas Flexíveis) +slug: CSS/Usando_caixas_flexiveis_css +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +--- +

{{ SeeCompatTable() }}

+ +

CSS Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis de CSS), também conhecida como "flexbox", é parte do rascunho da especificação do CSS3. Ele provê uma CSS Box Model otimizada para o design de interfaces com o usuário. Elementos filhos no layout flex podem ser posicionados em qualquer direção e possuem dimensões flexíveis para se adaptar ao espaço disponível. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser construídos de uma maneira mais clara e limpa. A ordem de exibição dos elementos é independente da ordem no código fonte.

+ +
Nota: a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com -ms-, -moz-, -o- e -webkit- para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.
+ +

Veja Flexbox para uma introdução à API.

+ +

Conceito de Caixas Flexíveis

+ +

O algoritmo de layout flexbox é agnóstico a direcionamento, em oposição ao layout de bloco (block layout), que é orientado verticalmente, ou ao layout inline, que é orientado horizontamente. Enquanto o layout de bloco funciona bem para páginas, ele carece de definição suficiente para suportar componentes de aplicação que necessitam mudar de orientação, tamanho, aumentar ou encolher, redirecionar da vertical para horizontal, e assim por diante. Flexbox layout é o mais apropriado para os componentes de uma aplicação, ou layouts de pequena escala, enquanto o (emergente) layout de Grid (Grid layout) é planejado para larga escala. Ambos fazem parte de um esforço mais amplo com o CSS3 para proporcionar uma maior interoperabilidade de aplicações web com diferentes agentes de usuário, diferentes modos de escrita, e outras demandas de flexibilidade.

+ +

Terminologia de Caixas Flexíveis

+ +

Ainda que a discussão sobre flexbox gire em torno de termos como eixos horizontais ou em linha, ou eixos verticais ou em bloco, faz-se necessário uma nova terminologia para melhor descrever esse novo modelo. O diagrama abaixo ilustra os termos que serão apresentados a seguir. Ele mostra um container flex que tem uma direção no sentido da linha (NT: flex-direction of row), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: main axis) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.

+ +

flex_terms.png

+ +
+
Container Flex
+
O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores flex ou inline-flex da propriedade display.
+
Item Flex
+
+

Cada nó filho de um container flex é um item flex. Quando um texto é adicionado diretamente ao container flex, ele é encapsulado e um item flex anônimo.

+ +
Nota: Se um bloco anônimo contém apenas espaços em braco, o box poderá não ser gerado se ele tiver a propriedade display:none.
+ +
Nota: Os filhos de um container flex que que possuem posicionamento absoluto são posicionados staticamente de acordo com o canto inicial (NT: head start corner) do container flex pai.
+
+
Eixos
+
+

Cada layout flexbox possui dois eixos: o eixo principal (NT: main axis), por onde os itens flex seguem uns aos outros e o eixo cruzado (NT: cross axis), perpendicular ao eixo principal.

+ +
    +
  • A propriedade flex-direction define o eixo principal.
    • +
  • A propriedade justify-content define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.
    • +
  • A propriedade align-items define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.
    • +
  • A propriedade align-self define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por align-items.
    • +
+
+
Directions
+
+

The main start/main end and cross start/cross end sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

+ +
    +
  • The order property assigns elements to ordinal groups and determines which elements appear first.
    • +
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
    • +
+
+
Lines
+
+

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

+
+
Dimensions
+
+

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

+ + +
+
+ +

Designando uma flexible box

+ +

Para designar o CSS parar elementos usandos esse estilo, a propriedade display deve ser setada da seguinte forma:

+ +
display :  flex
+ +

ou

+ +
display : inline-flex
+ +

Definindo o elemento como flex container e seus filhos como flex items. O valor flex faz o conteiner uma elemento de block-level. O valor inline-flex faz o flex conteiner um elemento  inline-level atmico.

+ +
Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-flex.
+ +

Flexible box properties

+ +

 {{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }} 

+ +
+
+ +

Propriedades que não afetam container flexíveis

+ +

Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.

+ + + +

Examples

+ +

These examples run in Chrome version 21 (or Chrome Canary which you can install in addition to Chrome). You can run the examples by creating a file with the code provided and loading it in Chrome Canary.

+ +

Basic flex example

+ +

This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. 

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Holy Grail Layout example

+ +

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

+ +

HolyGrailLayout.png

+ +

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

+ +
​
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Things to keep in mind

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexibles boxes are laid out in conformance of the writing mode. Which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before and break-inside as well as CSS 2.1   page-break-before, page-break-after and page-break-inside properties are accepted on a flex container, flex items and inside flex items.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}21.0{{ property_prefix("-webkit") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/pt-br/conflicting/web/css/cursor/index.html b/files/pt-br/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..6e5b44d286 --- /dev/null +++ b/files/pt-br/conflicting/web/css/cursor/index.html @@ -0,0 +1,9 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +
{{CSSRef}} {{deprecated_header}}
+ +

Não use esse valor! Use o valor cursor {{cssxref("cursor#cell","cell")}} em seu lugar.

diff --git a/files/pt-br/conflicting/web/guide/index.html b/files/pt-br/conflicting/web/guide/index.html new file mode 100644 index 0000000000..b98429a656 --- /dev/null +++ b/files/pt-br/conflicting/web/guide/index.html @@ -0,0 +1,95 @@ +--- +title: Desenvolvimento Web +slug: desenvolvimento_web +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

Desenvolvimento web compreende todos os aspectos do desenvolvimento de um site ou aplicação web.

+

Aprenda a criar qualquer coisa desde um site simples até sites complexos e altamente interativos que incluem as mais recentes tecnologias da Web, lendo os artigos que você encontrará aqui.

+ + + + + + + +
+

Documentation topics

+

Technologies

+
+
+ Introduction to Web development
+
+ A guide to learning how to develop for the Web.
+
+ HTML
+
+ HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
+
+ CSS
+
+ Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
+
+ JavaScript
+
+ JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
+
+ DOM
+
+ The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
+
+ AJAX
+
+ Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
+
+ XHTML
+
+ Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
+
+ SVG
+
+ Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
+
+

Strategies

+
+
+ Web standards
+
+ Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
+
+ Responsive Web design
+
+ Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
+
+ Writing forward-compatible websites
+
+ Best practices for creating websites that do not break when browsers are updated.
+
+ Mobile Web development
+
+ Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
+
+ Mozilla Web developer FAQ
+
+ Frequently asked questions from Web developers. With answers!
+
+

View All...

+ 		+

Community

+ +

Tools

+ +

View All...

+
+

 

diff --git a/files/pt-br/conflicting/web/guide/mobile/index.html b/files/pt-br/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..6a651575dc --- /dev/null +++ b/files/pt-br/conflicting/web/guide/mobile/index.html @@ -0,0 +1,17 @@ +--- +title: Desenvolvimento Web móvel +slug: Web_Development/Mobile +tags: + - Mobile + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Desenvolvimento de sites para ser visualizado em dispositivos móveis requer abordagens que certifique-se de que um site funciona também em dispositivos móveis, como faz em navegadores desktop. Os seguintes artigos descrevem algumas dessas abordagens.

+ diff --git a/files/pt-br/conflicting/web/http/cors/index.html b/files/pt-br/conflicting/web/http/cors/index.html new file mode 100644 index 0000000000..b1cb255383 --- /dev/null +++ b/files/pt-br/conflicting/web/http/cors/index.html @@ -0,0 +1,213 @@ +--- +title: Controle de Acesso do lado do servidor (CORS) +slug: Web/HTTP/Server-Side_Access_Control +translation_of: Web/HTTP/CORS +translation_of_original: Web/HTTP/Server-Side_Access_Control +--- +

Os sistemas de controle de acesso realizam   identificação de autorização ,  autenticação , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo  senhas , números de identificação pessoal (PINs),   varreduras biométricas e chaves físicas ou eletrônicas.

+ +

O controle de acesso é uma técnica de segurança que pode ser usada para regular quem ou o que pode exibir ou usar recursos em um ambiente de computação.

+ +

{{HTTPSidebar}}

+ +

Os navegadores enviam Cabeçalhos HTTP específicos para solicitações entre sites iniciadas de dentro XMLHttpRequest ou da Fetch Api . Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. Uma visão geral desses cabeçalhos, incluindo amostra de código JavaScript que inicia solicitações e processa respostas do servidor, além de uma discussão sobre cada cabeçalho, pode ser encontrada no artigo HTTP Access Control (CORS) article e deve ser lida como um artigo complementar para este. Este artigo aborda o processamento de solicitações de controle de acesso e a formulação de respostas de controle de acessoem PHP. O público-alvo deste artigo são programadores ou administradores de servidores. Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; em geral, esses conceitos podem ser aplicados a qualquer ambiente de programação do servidor que processa solicitações HTTP e formula dinamicamente respostas HTTP.

+ +

Discussão de cabeçalhos HTTP

+ +

O artigo que cobre os cabeçalhos HTTP usados por clientes e servidores deve ser considerado leitura de pré-requisito.

+ +

Amostras de código de trabalho

+ +

Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das amostras de código de trabalho postadas aqui. Eles funcionarão em navegadores que implementam sites cruzados {{domxref("XMLHttpRequest")}}.

+ +

Solicitações simples entre sites

+ +

Solicitações simples de controle de acesso são iniciadas quando:

+ + + +

Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.

+ + + +

A seção Solicitações de controle de acesso simples mostra as trocas de cabeçalho entre cliente e servidor. Aqui está um segmento de código PHP que lida com uma solicitação simples:

+ +
<?php
+
+// Consideremos acesso apenas ao domínio arunranga.com
+// Que achamos seguro acessar esse recurso como aplicattion / xml
+
+if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-type: application/xml');
+    readfile('arunerDotNetResource.xml');
+} else {
+  header('Content-Type: text/html');
+  echo "<html>";
+  echo "<head>";
+  echo "   <title>Another Resource</title>";
+  echo "</head>";
+  echo "<body>",
+       "<p>This resource behaves two-fold:";
+  echo "<ul>",
+         "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>";
+  echo   "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
+  echo   "you get this HTML document</li>",
+       "</ul>",
+     "</body>",
+   "</html>";
+}
+?>
+
+ +

O Origin item acima verifica se o cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' http://arunranga.com '. Se sim, ele retorna . Este exemplo pode ser visto em execução aqui . Access-Control-Allow-Origin: http://arunranga.com

+ +

Solicitações comprovadas

+ +

Solicitações de controle de acesso comprovadas ocorrem quando:

+ + + +

A seção Solicitações de controle de acesso comprovado mostra uma troca de cabeçalho entre cliente e servidor. Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:

+ + + +

Aqui está um exemplo no PHP de manipulação de uma solicitação preflighted :

+ +
<?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+
+  header('Content-Type: text/plain');
+  echo "This HTTP resource is designed to handle POSTed XML input";
+  echo "from arunranga.com and not be retrieved with GET";
+
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // Diga ao cliente que apoiamos arunranga.com
+  // e que esse comprovante seja válido por 20 dias
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
+    header('Access-Control-Allow-Headers: X-PINGARUNER');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+    //exit(0);
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+
+} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
+  //  Manipula o post primeiro obtendo o blob XML POST
+  // e, em seguida, fazendo algo e enviando resultados para o cliente
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    $postData = file_get_contents('php://input');
+    $document = simplexml_load_string($postData);
+
+    // Faça algo com os dados POST
+
+    $ping = $_SERVER['HTTP_X_PINGARUNER'];
+
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-Type: text/plain');
+    echo // some string response after processing
+  } else {
+    die("POSTing Only Allowed from arunranga.com");
+  }
+} else {
+    die("No Other Methods Allowed");
+}
+?>
+
+ +

Observe os cabeçalhos apropriados sendo enviados de volta em resposta à OPTIONS comprovação, bem como aos POST dados. Um recurso lida com a comprovação e com a solicitação real. Na resposta à OPTIONS solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o POST método e campos de cabeçalho como X-PINGARUNERpodem ser enviados com a solicitação real. Este exemplo pode ser visto em execução aqui .

+ +

Solicitações credenciadas

+ +

Solicitações de controle de acesso credenciadas - ou seja, solicitações acompanhadas de informações sobre cookies ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser simples ou comprovadas , dependendo dos métodos de solicitação utilizados.

+ +

Em um cenário de solicitação simples , a solicitação será enviada com cookies (por exemplo, se o withCredentials sinalizador estiver ativado XMLHttpRequest). Se o servidor responder com anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. Em uma solicitação comprovada , Se o servidor responder com Access-Control-Allow-Credentials: true anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da Web. Em uma Solicitação Comprovada, o servidor pode responder com Acesso-Controle-Permitir Credenciais: true à solicitação OPTIONS.

+ +

Aqui está um PHP que lida com solicitações credenciadas:

+ +
<?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+  header('Access-Control-Allow-Origin: http://arunranga.com');
+  header('Access-Control-Allow-Credentials: true');
+  header('Cache-Control: no-cache');
+  header('Pragma: no-cache');
+  header('Content-Type: text/plain');
+
+  // Primeiro, veja se existe um cookie
+  if (!isset($_COOKIE["pageAccess"])) {
+    setcookie("pageAccess", 1, time()+2592000);
+    echo 'I do not know you or anyone like you so I am going to';
+    echo 'mark you with a Cookie :-)';
+  } else {
+    $accesses = $_COOKIE['pageAccess'];
+    setcookie('pageAccess', ++$accesses, time()+2592000);
+    echo 'Hello -- I know you or something a lot like you!';
+    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
+    echo 'at least ', $accesses-1, ' time(s) before!';
+  }
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // Diga ao cliente que esse comprovante permanece válido por apenas 20 dias
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: GET, OPTIONS');
+    header('Access-Control-Allow-Credentials: true');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+} else {
+  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
+}
+?>
+
+ +

Observe que, no caso de solicitações credenciadas, o Access-Control-Allow-Origin: cabeçalho não deve ter um valor curinga de "*". Ele deve mencionar um domínio de origem válido. O exemplo acima pode ser visto em execução aqui .

+ +

Exemplos do Apache

+ +

Restringir o acesso a determinados URIs

+ +

Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar Access-Control-Allow-*a determinados URIs. Isso é útil, por exemplo, para restringir solicitações de origem cruzada a GET /api(.*).jsonsolicitações sem credenciais:

+ +
RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
+Header set Access-Control-Allow-Origin "*" env=CORS
+Header set Access-Control-Allow-Methods "GET" env=CORS
+Header set Access-Control-Allow-Credentials "false" env=CORS
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html b/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..57f1c2fdcc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,259 @@ +--- +title: Igualdade em JavaScript +slug: Web/JavaScript/Guide/Igualdade +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +translation_of_original: Web/JavaScript/Guide/Sameness +--- +

A ES6 possui três facilidades internas para determinar se algum x e algum y são "os mesmos". Elas são: igualdade ou "igual duplo" (==), igualdade rigorosa ou "igual triplo" (===), e Object.is. (Note que Object.is foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)

+

Visão geral

+

Para demonstração, aqui estão as três comparações de igualdade em uso:

+
x == y
+
x === y
+
Object.is(x, y)
+

De modo breve, o operador igual duplo irá realizar uma conversão de tipo na hora de  comparar duas coisas; o operador igual triplo fará a mesma comparação sem conversão de tipo (simplesmente sempre retornando false se os tipos forem diferentes); e Object.is se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com NaN e -0 e +0 de modo que os dois últimos não são considerados os mesmos, enquanto que Object.is(NaN, NaN) será true. (Comparar NaN com NaN geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em false, de acordo com a IEEE 754.)

+

Note que a distinção entre todas essas formas de comparação tem a ver com a forma com que lidam com primitivos; nenhuma delas compara se os parâmetros são conceitualmente similares em estrutura. Para quaisquer objetos não-primitivos x e y que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor false.

+

Por exemplo:

+
let x = { value: 17 };
+let y = { value: 17 };
+console.log(Object.is(x, y)); // false;
+console.log(x === y);         // false
+console.log(x == y);          // false
+

Igualdade abstrata, igualdade rigorosa, e mesmo valor

+

Na ES5, a comparação realizada por == é descrita na Seção 11.9.3, O Algoritmo de Igualdade Abstrata. A comparação === é descrita em 11.9.6, O Algoritmo de Igualdade Rigorosa. (Dê uma olhada nestes. Eles são rápidos e legíveis. Dica: leia o algoritmo de igualdade rigorosa primeiro.) A ES5 também descreve, na Seção 9.12, O Algoritmo de MesmoValor para ser usado internamente pelo engine JS. Ele é em sua maioria similar ao Algoritmo de Igualdade Rigorosa, com exceção de que 11.9.6.4 e 9.12.4 diferem na forma de lidar com Numbers (números). A ES6 simplesmente propõe expôr esse algoritmo através de Object.is.

+

Podemos ver que com os operadores igual duplo e igual triplo, com a exceção de fazer uma checagem de tipo de início em 11.9.6.1, o Algoritmo de Igualdade Rigorosa é um subconjunto do Algoritmo de Igualdade Abstrata, pois 11.9.6.2–7 corresponde a 11.9.3.1.a–f.

+

Um modelo para entender comparações de igualdade?

+

Antes da ES6, você pode ter dito, a respeito dos operadores igual duplo e igual triplo, que um é uma versão "melhorada" do outro. Por exemplo, alguém poderia dizer que o operador igual duplo é uma versão extendidad do operador igual triplo, pois o primeiro faz tudo que o último faz, com conversão de tipo em seus operandos (por exemplo, de modo que 6 == "6"). Alternativamente, alguém poderia dizer que o operador igual triplo é uma versão melhorada do operador igual duplo, pois requer que os dois operandos sejam do mesmo tipo. Qual é melhor depende de qual é a sua idéia de patamar.

+

No entanto, essa forma de pensar sobre os operados de igualdade internos não é um modelo que pode ser "esticado" para permitir um lugar para o Object.is da ES6 nesse "espectro". O Object.is não é simplesmente "menos restrito" do que o operador igual duplo ou "mais restrito" do que o operador igual triplo, nem cabe em algum lugar entre esses níveis (isto é, sendo mais restrito que o operador igual duplo, mas menos restrito que o operador igual triplo). Nós podemos ver da tabela de comparações de igualdade abaixo que isto é devido à forma com que Object.is lida com NaN. Perceba que se Object.is(NaN, NaN) resultasse no valor false, nós poderíamos dizer que ele cabe no espectro pouco restrito/restrito como uma forma ainda mais restrita do operador igual triplo, uma que faz distinção entre -0 e +0. A forma de lidar com NaN significa que isso não é verdade, no entanto. Infelizmente, Object.is simplesmente deve ser considerado em termos de duas características específicas, ao invés de sua rigorosidade (ou falta da mesma) com respeito aos operadores de igualdade.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Comparações de Igualdade
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
+

Quando usar Object.is versus o operador igual triplo

+

Além da forma com que trata o valor it NaN, de modo geral, o único caso em o comportamento especial de Object.is com a relação a zeros é capaz de ser de interesse é na busca de certos esquemas de metaprogramação, especialmente em relação a descritores de propriedade quando é desejável que seu trabalho espelhe algumas das características de Object.defineProperty. Se seu caso de uso não requer isso, sugere-se evitar-se Object.is e usar-se o operador === ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores NaN resultem em true, de modo geral é mais fácil fazer-se uma checagem especial por NaNs (usando-se o método isNaN disponíveis de versões anteritores da ECMAScript) do que lidar com como computações externas possam afetar o sinal de quaisquer zeros que você possa encontrar em sua comparação.

+

Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre -0 e +0 se manifeste em seu código:

+
+
+ - (negação unária)
+
+
+
+

É óbvio que negar 0 produz -0. Mas a abstração de uma expressão pode fazer com o valor -0 apareça de modo despercebido. Por exemplo, considere o seguinte:

+ 
let stoppingForce = obj.mass * -obj.velocity
+

Se obj.velocity é 0 (ou resulta no valor 0), um -0 é introduzido naquele ponto e propaga-se para stoppingForce.

+
+
+
+
+ Math.atan2
+
+ Math.ceil
+
+ Math.pow
+
+ Math.round
+
+
+
+ É possível que um -0 seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum -0 existe como um dos parâmetros. Por exemplo, usando-se Math.pow para elevar o valor -Infinity à potência de qualquer expoente negativo ímpar resulta no valor -0. Veja a documentação para os métodos individuais.
+
+
+
+ Math.floor
+
+ Math.max
+
+ Math.min
+
+ Math.sin
+
+ Math.sqrt
+
+ Math.tan
+
+
+
+ É possível obter-se um valor de retorno -0 desses métodos em alguns casos quando um -0 existe como um dos parâmetros. Por exemplo, Math.min(-0, +0) resulta no valor -0. Veja a documentação para os métodos individuais.
+
+
+
+ ~
+
+ <<
+
+ >>
+
+ Cada um desses operadores usa o algoritmo ToInt32 internamente. Uma vez que só há uma representação para o valor 0 no tipo inteiro de 32 bits interno, o valor -0 não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos Object.is(~~(-0), -0) e Object.is(-0 << 2 >> 2, -0) resultam no valor false.
+
+

Contar com Object.is quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre -0 e +0, ele faz exatamente o que é desejado.gual

diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..99603a019f --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,112 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef}}
+ +

A propriedade Boolean.prototype representa o prototype para o construtor de {{jsxref("Boolean")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descrição

+ +

Instancias de {{jsxref("Boolean")}} herdam de Boolean.prototype. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.

+ +

Propriedades

+ +
+
Boolean.prototype.constructor
+
Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.
+
+ +

Métodos

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna a string contendo o codigo do objeto {{jsxref("Boolean")}} ;  pode-se usar esta string para criar um objeto equivalente. Sobreescreve o método {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Boolean.prototype.toString()")}}
+
Retorna uma string com valor "true" ou "false" dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementano no JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..3b45ee5fe2 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,95 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +
{{JSRef}}
+ +

A propriedade Function.prototype representa o objeto prototype de {{jsxref("Function")}}.

+ +

Descrição

+ +

Objetos {{jsxref("Function")}} herdam de Function.prototype.  Function.prototype não pode ser modificado.

+ +

Propriedades

+ +
+
{{jsxref("Function.arguments")}} {{deprecated_inline}}
+
Um vetor correspondente aos argumentos passados a uma função. Isto é depreciado como propriedade de {{jsxref("Function")}}. Use em vez disso o objeto {{jsxref("Functions/arguments", "arguments")}} disponível dentro da função.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.
+
{{jsxref("Function.caller")}} {{non-standard_inline}}
+
Especifica a função que invocou a função sendo executada.
+
{{jsxref("Function.length")}}
+
Especifica o número de argumentos esperados pela função.
+
{{jsxref("Function.name")}}
+
O nome da função.
+
{{jsxref("Function.displayName")}} {{non-standard_inline}}
+
O nome de exibição da função.
+
Function.prototype.constructor
+
Especifica a função que cria o prototype do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.
+
+ +

Métodos

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Chama uma função e define seu this com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.
+
{{jsxref("Function.prototype.bind()")}}
+
Cria uma nova função que, quando chamada, tem seu this definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.
+
{{jsxref("Function.prototype.call()")}}
+
Chama (executa) uma função e define seu this com o valor fornecido. Argumentos podem ser passados como são.
+
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
+
Retorna true se a função é um gerador; se não, retorna false.
+
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementada no JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade de navegadores

+ +
+ + +

{{Compat("javascript.builtins.Function.prototype")}}

+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..dce89ef41e --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,126 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +tags: + - Internacionalização + - JavaScript + - NumberFormat + - Property + - Propriedade + - Prototipo + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +
{{JSRef}}
+ +

A propriedade Intl.NumberFormat.prototype representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descrição

+ +

Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de Intl.NumberFormat.

+ +

As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de Intl.NumberFormat.prototype. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

+ +

Propriedades

+ +
+
Intl.NumberFormat.prototype.constructor
+
Uma referência a Intl.NumberFormat.
+
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
+
Getter; retorna uma função que formata um número de acordo com a localização e as opçõe de formatação do objeto {{jsxref("NumberFormat")}}.
+
+ +

Métodos

+ +
+
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
+
Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Definição inicial.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome("24")}}{{CompatGeckoDesktop("29")}}{{CompatIE("11")}}{{CompatOpera("15")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatChrome("26")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..b20baf56cc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,136 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

A propriedade Map.prototype representa o protótipo para o construtor {{jsxref("Map")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descrição

+ +

Instâncias de {{jsxref("Map")}} herdam de {{jsxref("Map.prototype")}}. Você pode utilizar o objeto protótipo do  construtor para adicionar propriedades ou métodos para todas as instâncias de Map.

+ +

Propriedades

+ +
+
Map.prototype.constructor
+
Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.
+
{{jsxref("Map.prototype.size")}}
+
Retorna o número de pares chave/valor no objeto Map.
+
+ +

Metódos

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Remove todas os pares chave/valor do objeto Map.
+
{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}
+
Remove qualquer valor associado à chave passada e retorna o valor que Map.prototype.has(chave) deveria retornar anteriormente. Map.prototype.has(chave) irá retornar false após tal remoção ser feita.
+
{{jsxref("Map.prototype.entries()")}}
+
Retorna um novo objeto Iterador que contem um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Chama callbackFn uma vez para cada par chave/valor presente no objeto Map, pela ordem de inserção. Se um parâmetro thisArg for fornecido para o forEach, ele será utilizado como o valor this para cada callback.
+
{{jsxref("Map.get", "Map.prototype.get(chave)")}}
+
Retorna o valor associado para a chave, ou undefined se esta não existir no objeto Map.
+
{{jsxref("Map.has", "Map.prototype.has(key)")}}
+
Retorna um valor booleano caso um valor tenha sido associado à chave no objeto Map ou não.
+
{{jsxref("Map.prototype.keys()")}}
+
Retorna um novo objeto Iterador que contem as chaves para cada elemento no objeto Map object pela ordem de inserção.
+
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
+
Configura o valor par a chave no objeto Map. Retorna o objeto Map.
+
{{jsxref("Map.prototype.values()")}}
+
Retorna um novo objeto Iterador que contém os valores para cada elemento no objeto Map pela ordem de inserção.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Retorna um novo objeto Iterator que contém um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade com os navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..9dd96bc9b3 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,140 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +tags: + - JavaScript + - Número + - Propriedade + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

A propriedade Number.prototype representa o protótipo para o construtor {{jsxref("Number")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descrição

+ +

Todas instâncias {{jsxref("Number")}} herdam de Number.prototype. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.

+ +

Propriedades

+ +
+
Number.prototype.constructor
+
Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.
+
+ +

Métodos

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Retorna uma 'string' representando o número em notação exponencial.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Retorna uma 'string' representando o número em notação em ponto fixo.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Retorna uma 'string'  com uma representação sensível ao idioma deste número.  Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna uma objeto literal representando um objeto específicado {{jsxref("Number")}}; você pode usar este valor para criar um novo objeto. Substitui o método {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentários
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementado em JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ConfiguraçãoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ConfiguraçãoAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..d0c07076a0 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,227 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Objeto + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef("Global_Objects", "Object")}}
+ +

Sumário

+ +

A propriedade Object.prototype representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.

+ +

{{js_property_attributes(0, 0, 0)}}

+ +

Descrição

+ +

Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de Object.prototype, embora possam ser sobrescritos (exceto um Objeto com protótipo nulo, i.e. Object.create(null)). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.

+ +

Modificações no Objeto protótipo do objeto são propagadas a todos objetos através do encadeamento de protótipos, a menos que as propriedades e métodos  submetidos às mudanças sejam sobrescritos mais além no encadeamento dos protótipos. Este recurso oferece um mecânismo muito poderoso apesar de perigoso para sobrescrita e extensão de objetos.

+ +

Propriedades

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Especifica a função que cria um objeto protótipo.
+
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
+
Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.
+
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
+
Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.
+
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
+
Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.
+
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
+
Usado para apontar a um contexto do objeto, mas foi removida.
+
+ +

Métodos

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.
+
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.
+
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.
+
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Retorna um boolean indicando se um objeto contém a propriedade especificada como uma propriedade direta de um objeto e não herdada através da cadeia de protótipo.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Retorna um boolean indicando se o atributo interno ECMAScript DontEnum attribute está definido.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna uma string contendo o código de um objeto literal representando o objeto que este método é  chamado; você pode usar este valor para criar um novo objeto.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Chama {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Retorna uma representação do objeto em forma de string.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
Remove um ponto de escuta da propriedade do objeto.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Retorna o valor primitivo do objeto especificado.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Adiciona um ponto de escuta à propriedade do objeto.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.
+
+ +

Exemplos

+ +

Quando é alterado o comportamento de um método de um Objeto protótipo, considere injetar código envolvendo sua extensão antes ou depois ta lógica existente. Por exemplo, este (não testado) código irá pré-condicionalmente executar uma lógica personalizada antes da lógica embutida ou a extensão de alguém será executada.

+ +

Quando uma função é chamada os argumentos para a chamada são segurados no array de argumentos como "variável". Por exemplo, na chamada "minhaFuncao(a, b, c)", os argumentos no corpo da minhaFuncao irão conter 3 elementos array correspondentes a (a, b, c). Quando modificamos os protótipos com ganchos, simplesmente passamos this & a variável arguments (o estado de chamada) para o comportamento atual pela chamada apply() na função. Este padrão pode ser usado por qualquer protótipo, tal como Node.prototype, Function.prototype, etc.

+ +
var current = Object.prototype.valueOf;
+
+// Desde que minha propriedade "-prop-value" é transversal e não está
+// sempre na mesma cadeia de protótipo, desejo modificar Object.prototype:
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty("-prop-value") {
+    return this["-prop-value"];
+  } else {
+    // Isto não parece com um de meus objetos, então vamos retroceder ao
+    // comportamento padrão para reproduzir o comportamento atual o que
+    // pudermos. O apply se comporta como o"super" em outras linguagens.
+    // Mesmo que valueOf() não receba argumentos, alguns outros ganchos podem.
+    return current.apply(this, arguments);
+  }
+}
+ +

Desde que JavaScript não tem exatamente objetos de subclasse, protótipo é uma forma usual de trabalhar para fazer um objeto "classe base" de certas funções que agem como objetos. Por exemplo:

+ +
var Person = function() {
+  this.canTalk = true;
+  this.greet = function() {
+    if (this.canTalk) {
+      console.log('Hi, I\'m ' + this.name);
+    }
+  };
+};
+
+var Employee = function(name, title) {
+  this.name = name;
+  this.title = title;
+  this.greet = function() {
+    if (this.canTalk) {
+      console.log("Hi, I'm " + this.name + ", the " + this.title);
+    }
+  };
+};
+Employee.prototype = new Person();
+
+var Customer = function(name) {
+  this.name = name;
+};
+Customer.prototype = new Person();
+
+var Mime = function(name) {
+  this.name = name;
+  this.canTalk = false;
+};
+Mime.prototype = new Person();
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+bob.greet();
+joe.greet();
+rg.greet();
+mike.greet();
+mime.greet();
+
+ +

O retorno será:

+ +
Hi, I'm Bob, the Builder
+Hi, I'm Joe
+Hi, I'm Red Green, the Handyman
+Hi, I'm Mike
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesSituaçãoComentário
ECMAScript 1st Edition. Implemented in JavaScript 1.0.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilidade com Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
AspectoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
AspectoAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico.{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..d0be3d870c --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,114 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +
{{JSRef("Global_Objects", "Promise")}}
+ +

Sumário

+ +

A propriedade Promise.prototype representa o protótipo para o construtor {{jsxref("Promise")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descrição

+ +

{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos  para todas as instâncias de Promise.

+ +

Propriedades

+ +
+
Promise.prototype.constructor
+
Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.
+
+ +

Métodos

+ +
+
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
+
Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.
+
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
+
Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support32{{CompatGeckoDesktop(24.0)}} as Future
+ {{CompatGeckoDesktop(25.0)}} as Promise behind a flag[1]
+ {{CompatGeckoDesktop(29.0)}} by default		{{CompatNo}}197.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(24.0)}} as Future
+ {{CompatGeckoMobile(25.0)}} as Promise behind a flag[1]
+ {{CompatGeckoMobile(29.0)}} by default		{{CompatNo}}{{CompatNo}}iOS 832
+
+ +

[1] Gecko 24 has an experimental implementation of Promise, under the initial name of Future. It got renamed to its final name in Gecko 25, but disabled by default behind the flag dom.promise.enabled. Bug 918806 enabled Promises by default in Gecko 29.

+ +

See also

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..1f2ca2c70b --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,85 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +tags: + - Propriedade + - Prototipo + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +
{{JSRef}}
+ +

A propriedade Set.prototype representa o protótipo do construtor do objeto {{jsxref("Set")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descrição

+ +

Instâncias de {{jsxref("Set")}} herdam de {{jsxref("Set.prototype")}}. Você pode usar o construtor do objeto protótipo para adicionar propriedades ou métodos para todas as instâncias de Set .

+ +

Propriedades

+ +
+
Set.prototype.constructor
+
Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.
+
{{jsxref("Set.prototype.size")}}
+
Retorna o número de valores no objeto Set.
+
+ +

Métodos

+ +
+
{{jsxref("Set.add", "Set.prototype.add(value)")}}
+
Anexa um novo elemento com o valor passado ao objeto Set . Retorna o objeto Set.
+
{{jsxref("Set.prototype.clear()")}}
+
Remove todos os elementos do objeto Set.
+
{{jsxref("Set.delete", "Set.prototype.delete(value)")}}
+
Remove o elemento associado ao value e retorna o valor que Set.prototype.has(value) teria retornado anteriormente. Set.prototype.has(value) irá retornar false depois disso.
+
{{jsxref("Set.prototype.entries()")}}
+
Retorna um novo objeto Iterator que contém um array de [value, value] para cada elemento no objeto Set , em ordem de inserção. Isso é similar ao objeto Map, para que cada entrada tenha o mesmo valor para sua chave evalor aqui.
+
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
+
Chama callbackFn uma vez para cada valor presente no objeto Set, em ordem de inserção. Se um parâmetro thisArg for passado para o forEach, ele será usado como valor de this para cada callback.
+
{{jsxref("Set.has", "Set.prototype.has(value)")}}
+
Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto Set ou não.
+
{{jsxref("Set.prototype.keys()")}}
+
É a mesma função que a função values() e retorna um novo objeto Iterator que contém os valores para cada elemento no objeto Set  em ordem de inserção.
+
{{jsxref("Set.prototype.values()")}}
+
Retorna um novo objeto Iterator que contém os values para cada elemento no objeto Set  em ordem de inserção.
+
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
+
Retorna um novo objeto Iterator que contém os values para cada elemento do objeto Set em ordem de inserção.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("javascript.builtins.Set.prototype")}}

+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..a0df7b93ea --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,177 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +
{{JSRef}}
+ +

A String.prototype representa o prototipo de objeto  {{jsxref("String")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Descrição

+ +

Todas as instâncias {{jsxref("String")}} herdam de String.prototype. Alterações na String são propagadas para todas as instâncias {{jsxref("String")}}.

+ +

Propriedades

+ +
+
String.prototype.constructor
+
Especifica a função que cria o protótipo de um objeto.
+
{{jsxref("String.prototype.length")}}
+
Reflete o comprimento da string.
+
N
+
Usado para acessar o caractere na posição N onde N é um número inteiro entre 0 e um menor que o valor da length. Estas propriedades são apenas de leitura.
+
+ +

Métodos

+ +

Métodos não relacionados ao HTML

+ +
+
{{jsxref("String.prototype.charAt()")}}
+
Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.
+
{{jsxref("String.prototype.charCodeAt()")}}
+
Retorna um número que é o valor da unidade de código UTF-16 em dado índice.
+
{{jsxref("String.prototype.codePointAt()")}}
+
Retorna um número inteiro não negativo Number que é o valor de posição de código da posição de código inicial em dado índice.
+
{{jsxref("String.prototype.concat()")}}
+
Combina o texto de duas strings e retorna uma nova string.
+
{{jsxref("String.prototype.includes()")}}
+
 Determina se uma string deve ser encontrada dentro de outra string.
+
{{jsxref("String.prototype.endsWith()")}}
+
Determina se uma string termina com os caracteres de outra string.
+
{{jsxref("String.prototype.indexOf()")}}
+
Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.
+
{{jsxref("String.prototype.lastIndexOf()")}}
+
Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.
+
{{jsxref("String.prototype.localeCompare()")}}
+
Retorna um número indicando se uma string de referência vem antes ou depois ou é o mesmo que uma string dada em ordem de classificação.
+
{{jsxref("String.prototype.match()")}}
+
Usado para combinar uma expressão regular com uma string.
+
{{jsxref("String.prototype.normalize()")}}
+
Retorna o Formulário de Normalização Unicode do valor string chamado.
+
{{jsxref("String.prototype.padEnd()")}}
+
Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.
+
{{jsxref("String.prototype.padStart()")}}
+
Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.
+
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
+
Envolve a cadeia entre aspas duplas ("" ").
+
{{jsxref("String.prototype.repeat()")}}
+
Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.
+
{{jsxref("String.prototype.replace()")}}
+
Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.
+
{{jsxref("String.prototype.search()")}}
+
Executa a procura por uma combinação entre uma expressão regular e uma string especificada.
+
{{jsxref("String.prototype.slice()")}}
+
Extrai uma seção de uma string e retorna uma nova string.
+
{{jsxref("String.prototype.split()")}}
+
Separa um objeto String em um array de strings separando a string em substrings.
+
{{jsxref("String.prototype.startsWith()")}}
+
Determina se uma string começa com os caracteres de outra string.
+
{{jsxref("String.prototype.substr()")}}
+
Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.
+
{{jsxref("String.prototype.substring()")}}
+
Retorna os caracteres em uma string entre dois índices na string.
+
{{jsxref("String.prototype.toLocaleLowerCase()")}}
+
Os caracteres dentro de uma string são convertidos para letras minúsculas enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toLowerCase().
+
{{jsxref("String.prototype.toLocaleUpperCase()")}}
+
Os caracteres dentro de uma string são convertidas para letra maiúscula enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toUpperCase().
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Retorna o valor da string de chamada convertido em minúsculas.
+
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna um objeto literal representando o objeto especificado; Você pode usar esse valor para criar um novo objeto. Substitui o metodo:{{jsxref("Object.prototype.toSource()")}}
+
{{jsxref("String.prototype.toString()")}}
+
Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Retorna o valor da string de chamada convertido em maiúscula.
+
{{jsxref("String.prototype.trim()")}}
+
Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.
+
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
+
Retira o espaço em branco do lado esquerdo da string.
+
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
+
Retira o espaço em branco do lado esquerdo da string.
+
{{jsxref("String.prototype.valueOf()")}}
+
Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} 
+
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}
+
Retorna um novo objeto  Iterator que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.
+
+ +

Métodos de envoltório HTML

+ +

Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.

+ +
+
{{jsxref("String.prototype.anchor()")}}
+
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (alvo hipertexto)
+
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
+
{{HTMLElement("big")}}
+
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
+
{{HTMLElement("blink")}}
+
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
+
{{HTMLElement("b")}}
+
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
+
{{HTMLElement("tt")}}
+
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
+
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
+
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
+
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
+
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
+
{{HTMLElement("i")}}
+
{{jsxref("String.prototype.link()")}}
+
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link para URL)
+
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
+
{{HTMLElement("small")}}
+
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
+
{{HTMLElement("strike")}}
+
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
+
{{HTMLElement("sub")}}
+
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
+
{{HTMLElement("sup")}}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacoesStatusComentarios
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade entre browsers

+ + + +

{{Compat("javascript.builtins.String.prototype")}}

+ +

Veja também 

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..c3e0334a3b --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,118 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +
{{JSRef("Global_Objects", "WeakMap")}}
+ +

Sumário

+ +

A propriedade WeakMap.prototype representa o prototype fara o construtor {{jsxref("WeakMap")}}.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Descrição

+ +

Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto prototype do construtor para adicionar propriedades ou métodos para todas as instâncias WeakMap.

+ +

Propriedades

+ +
+
WeakMap.prototype.constructor
+
Retorna a função construtora das instâncias, neste caso a própria {{jsxref("WeakMap")}}.
+
+ +

Metodos

+ +
+
{{jsxref("WeakMap.prototype.clear()")}}
+
Remove todos os pares chave/valor do objeto WeakMap
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
+
Remove qualquer valor associado à  key. WeakMap.prototype.has(key) e retorna false após.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
+
Retorna o valor associado a key, ou undefined se nenhum existir.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
+
Retorna um Boolean verificando se há algum valor associado a key no objeto WeakMap ou não.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
+
Configura um valor para key no objeto WeakMap. Retorna undefined.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Especificação inicial.
+ +

Compatibilidade de browsers 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (SpiderMonkey)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}11{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (SpiderMonkey)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Notas para o Chrome

+ + + +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..4ca87eaddd --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,329 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operadores +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
{{jsSidebar("Operadores")}}
+ +

Operadores aritméticos tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).

+ +

Adição (+)

+ +

O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.

+ +

Sintaxe

+ +
Operador: x + y
+
+ +

Exemplos

+ +
// Número + Número -> adição
+1 + 2 // 3
+
+// Booleano + Número -> adição
+true + 1 // 2
+
+// Booleano + Booleano -> adição
+false + false // 0
+
+// Número + String -> concatenação
+5 + "foo" // "5foo"
+
+// String + Booleano -> concatenação
+"foo" + false // "foofalse"
+
+// String + String -> concatenação
+"foo" + "bar" // "foobar"
+
+ +

Subtração (-)

+ +

O operador de subtração subtrai os dois operandos, produzindo sua diferença.

+ +

Sintaxe

+ +
Operador: x - y
+
+ +

Exemplos

+ +
5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN
+ +

Divisão (/)

+ +

O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.

+ +

Sintaxe

+ +
Operador: x / y
+
+ +

Exemplos

+ +
1 / 2      // retorna 0.5 em JavaScript
+1 / 2      // retorna 0 em Java
+// (nenhum dos números é explicitamente um número de ponto flutuante)
+
+1.0 / 2.0  // retorna 0.5 em JavaScript e Java
+
+2.0 / 0    // retorna Infinity em JavaScript
+2.0 / 0.0  // retorna Infinity também
+2.0 / -0.0 // retorna -Infinity em JavaScript
+ +

Multiplicação (*)

+ +

O operador de multiplicação produz o produto dos operandos.

+ +

Sintaxe

+ +
Operador: x * y
+
+ +

Exemplos

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+
+ +

Módulo (%)

+ +

O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.

+ +

Sintaxe

+ +
Operador: var1 % var2
+
+ +

Examples

+ +
12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+
+ +

Exponenciação (**)

+ +

O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que var1var2, onde var1 e var2 são variáveis. O operador de exponenciação é associativo à direita, ou seja, a ** b ** c é igual a a ** (b ** c).

+ +

Sintaxe

+ +
Operador: var1 ** var2
+
+ +

Notas

+ +

Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e  -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (+/-/~/!/delete/void/typeof) imediatamente antes do número base.

+ +
-2 ** 2;
+// 4 no Bash, -4 em outras linguagens.
+// Isso é inválido no JavaScript, pois a operação é ambígua.
+
+
+-(2 ** 2);
+// -4 no JavaScript e a intenção do autor não é ambígua.
+
+ +

Exemplos

+ +
2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+
+ +

Para inverter o sinal do resultado de uma expressão de exponenciação:

+ +
-(2 ** 2) // -4
+
+ +

Para forçar a base de uma expressão de exponenciação para ser um número negativo:

+ +
(-2) ** 2 // 4
+
+ +
+

Nota: JavaScript também tem  um operador de lógica binária ^ (XOR). ** e ^ são diferentes (por exemplo : 2 ** 3 === 8 enquanto 2 ^ 3 === 1.)

+
+ +

Incremento (++)

+ +

O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;

+ + + +

Sintaxe

+ +
Operador: x++ or ++x
+
+ +

Exemplos

+ +
// Posfixo
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefixo
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Decremento (--)

+ +

O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.

+ + + +

Sintaxe

+ +
Operador: x-- or --x
+
+ +

Exemplos

+ +
// Posfixo
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefixo
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Negação Unária (-)

+ +

O operador de negação unária precede seu operando e o nega.

+ +

Sintaxe

+ +
Operador: -x
+
+ +

Exemplos

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+ +

Soma Unária (+)

+ +

O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string true, false, e null. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará NaN.

+ +

Sintaxe

+ +
Operador: +x
+
+ +

Exemplos

+ +
+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
ECMAScript 1ª Edição.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
{{SpecName('ES6', '#sec-postfix-expressions')}}{{Spec2('ES6')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
+ +

Compatibilidade com Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..a877d131bc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,201 @@ +--- +title: Spread operator +slug: Web/JavaScript/Reference/Operators/Spread_operator +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +--- +
{{jsSidebar("Operators")}}
+ +

A sintaxe de propagação (Spread) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.

+ +

Sintaxe

+ +

Para chamadas de função:

+ +
minhaFuncao(...objIteravel);
+
+ +

Para array literais:

+ +
[...objIteravel, 4, 5, 6]
+ +

Desestruturação:

+ +
[a, b, ...objIteravel] = [1, 2, 3, 4, 5];
+ +

Exemplos

+ +

Uma melhor aplicação

+ +

Exemplo: é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.

+ +
function minhaFuncao(x, y, z) { }
+var args = [0, 1, 2];
+minhaFuncao.apply(null, args);
+ +

Com o spread do ES2015 você pode agora escrever isso acima como:

+ +
function minhaFuncao(x, y, z) { }
+var args = [0, 1, 2];
+minhaFuncao(...args);
+ +

Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.

+ +
function minhaFuncao(v, w, x, y, z) { }
+var args = [0, 1];
+minhaFuncao(-1, ...args, 2, ...[3]);
+ +

Um literal array mais poderoso

+ +

Exemplo:  Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de push, splice, concat, etc. Com a sintaxe spread isso se torna muito mais sucinto:

+ +
var partes = ['ombros', 'joelhos'];
+var letra = ['cabeca', ...partes, 'e', 'dedos']; // ["cabeca", "ombros", "joelhos", "e", "dedos"]
+
+ +

Assim como em spread para listas de argumentos ... pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.

+ +

Apply para new

+ +

Exemplo: No ES5 não é possível usar new com apply. (Em ES5 termos, apply faz uma [[Call]] e nao um [[Construct]].) Em ES2015 a sintaxe spread naturalmente suporta isso:

+ +
var camposData = lerCamposData(bancoDeDados);
+var d = new Date(...camposData);
+ +

Um push melhor

+ +

Exemplo: {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Acrescenta todos itens do arr2 ao arr1
+Array.prototype.push.apply(arr1, arr2);
+ +

No ES2015 com spread isso se torna:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definido em várias seções da especificação: Inicializador do array, Listas de argumento
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade com browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Operação spread em array literais{{CompatChrome("46")}}{{ CompatGeckoDesktop("16") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em chamadas de função{{CompatChrome("46")}}{{ CompatGeckoDesktop("27") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em desestruturação{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Operação spread em array literais{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("16") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em chamadas de função{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("27") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em desestruturação{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html new file mode 100644 index 0000000000..d5e946a438 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html @@ -0,0 +1,251 @@ +--- +title: Operadores de comparação +slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação +tags: + - Comparando String + - Comparação + - Igualdade + - Operadores + - Relacionais +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., ===) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. ==) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <=), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.

+ +

Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.

+ +
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
+ + + +

Características de comparação:

+ + + +

Operadores de Igualdade 

+ +

Igualdade (==)

+ +

O operador de igualdade converte o operando se ele não for do mesmo tipo, então aplica a comparação estrita. Se ambos os operandos são objetos, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.

+ +

Sintaxe

+ +
x == y
+
+ +

Exemplos

+ +
1    ==  1         // verdade
+'1'  ==  1         // verdade
+1    == '1'        // verdade
+0    == false      // verdade
+0    == null       // falso
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 == object2 // falso
+0    == undefined  // falso
+null == undefined  // verdade
+
+ +

Desigualdade (!=)

+ +

O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos não são do mesmo tipo, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se ambos os operandos são objetos, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.

+ +

Sintaxe

+ +
x != y
+ +

Exemplos

+ +
1 !=   2     // verdade
+1 !=  '1'    // falso
+1 !=  "1"    // falso
+1 !=  true   // falso
+0 !=  false  // falso
+
+ +

Identidade / igualdade estrita (===)

+ +

O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) sem conversão de tipo. 

+ +

Sintaxe

+ +
x === y
+ +

Exemplos

+ +
3 === 3   // verdade
+3 === '3' // falso
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 //f also
+ +

Non-identity / desigualdade estrita (!==)

+ +

O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos não são iguais e / ou não são do mesmo tipo.

+ +

Sintaxe

+ +
x !== y
+ +

Exemplos

+ +
3 !== '3' // verdade
+4 !== 3   // verdade
+
+ +

Operadores relacionais

+ +

Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.

+ +

Operador Maior (>)

+ +

O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.

+ +

Sintaxe

+ +
x > y
+ +

Exemplos

+ +
4 > 3 // verdade
+
+ +

Operador maior ou igual (>=)

+ +

O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.

+ +

Sintaxe

+ +
 x >= y
+ +

Exemplos

+ +
4 >= 3 // verdade
+3 >= 3 // verdade
+
+ +

Operador Menor (<)

+ +

O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.

+ +

Sintaxe

+ +
 x < y
+ +

Exemplos

+ +
3 < 4 // verdade
+
+ +

Operador menor ou igual (<=)

+ +

O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.

+ +

Sintaxe

+ +
 x <= y
+ +

Exemplos

+ +
3 <= 4 // verdade
+
+ +

Usando Operadores de Igualdade

+ +

Os operadores de igualdade padrão (== e! =) Usam o Algoritmo de Comparação de Igualdade Abstrata 

+ +

para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.

+ +

Os operadores de igualdade estrita (=== e! ==) usam o Algoritmo de comparação estrita de igualdade e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.
+
+ Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.
+
+ Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:

+ + + +
Nota: Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:
+ +
// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
+a == b
+
+// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
+a === b
+
+// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a)
+// é convertido para String ('foo') antes da comparação
+a == 'foo'
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição Inicial. Implementado em JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Adicionandos os operadores === e !== . Implementado em JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
+ +

Compatilidade entre navegadores

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

Consulte também

+ + + +
+
+
diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..b8b2e654c4 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,559 @@ +--- +title: Bitwise operators +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +
+ +
Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.
+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
+ + + +

A seguinte tabela resume os Operadores bit-a-bit:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorUsoDescrição
Bitwise ANDa & bRetorna 1 em cada posição de bit para à qual o bit correspondente de ambos eram 1s.
Bitwise ORa | b +

Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram 1s.

+
Bitwise XORa ^ bRetorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram 1s.
Bitwise NOT~ aInverte os bits de seus operandos.
Left shifta << bJogam a  em representação binária b (< 32) bits à esquerda, mudando de zeros à diretia.
Sign-propagating right shifta >> bJogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off.
Zero-fill right shifta >>> b  Jogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off, e jogando 0s para à esquerda.
+ +

Inteiros assinados em 32-bit

+ +

Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:

+ +
00000000000000000000000100111010
+
+ +

Os seguintes encodes ~314, i.e. são os únicos complementos de  314:

+ +
11111111111111111111111011000101
+
+ +

Finalmente, os seguintes encodes -314, i.e. são dois complementos de 314:

+ +
11111111111111111111111011000110
+
+ +

As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de sign bit ou bit assinalado.

+ +

O número 0 é o inteiro composto completamente de 0 bits.

+ +
0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+ +

O número -1 é o inteiro que é composto completamente de 1 bits.

+ +
-1 (base 10) = 11111111111111111111111111111111 (base 2)
+
+ +

O número -2147483648 (representação hexadecimal: -0x80000000) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.

+ +
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+
+ +

O número 2147483647 (representação hexadecimal: 0x7fffffff) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).

+ +
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+
+ +

Os números -2147483648 e 2147483647 são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.

+ +

Operadores lógico bit-abit

+ +

Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:

+ + + +

& (Bitwise AND)

+ +

Performa a operação AND em cada par de bits. a AND b retorna 1, apenas quando a e b são 1. A tabela verdade para a operação AND é:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+
+ +

Performar a operação AND bit-a-bit de qualquer número x com 0 retornará 0. Performar a operação AND bit-a-bit de qualquer número x com -1 retornará x.

+ +

| (Bitwise OR)

+ +

Performa a operação OR em cada par de bits. a OR b retorna 1 se pelo menos a ou pelo menos b é 1. As tabela versão para a operação OR é:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+
+ +

Performar a operação OR de qulalquer número x com 0 retornará 0. Performar a operação OR de qualquer número X com -1 retornará -1.

+ +

^ (Bitwise XOR)

+ +

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+
+ +

Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.

+ +

~ (Bitwise NOT)

+ +

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+
+ +

Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.

+ +

Note that due to using 32-bit representation for numbers both ~-1 and ~4294967295 (232-1) results in 0.

+ +

Operadores de deslocamento bit a bit

+ +

The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.

+ +

Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.

+ +

<< (Left shift)

+ +

This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

+ +

For example, 9 << 2 yields 36:

+ +
.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+
+ +

Bitwise shifting any number x to the left by y bits yields x * 2 ** y.

+ +

>> (Sign-propagating right shift)

+ +

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

+ +

For example, 9 >> 2 yields 2:

+ +
.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

Likewise, -9 >> 2 yields -3, because the sign is preserved:

+ +
.    -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+
+ +

>>> (Zero-fill right shift)

+ +

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.

+ +

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

+ +
.     9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

+ +
.     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+
+ +

Examples

+ +

Flags and bitmasks

+ +

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).

+ +

Suppose there are 4 flags:

+ + + +

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

+ +
var flags = 5;   // binary 0101
+
+ +

This value indicates:

+ + + +

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

+ +

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask masks out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:

+ +
// if we own a cat
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // do stuff
+}
+
+ +

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

+ +
// if we own a bat or we own a cat
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // do stuff
+}
+
+ +
// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // do stuff
+}
+
+ +

Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:

+ +
// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:

+ +
// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

+ +
// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:

+ +
// if we didn't have a bat, we have one now,
+// and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finally, the flags can all be flipped with the NOT operator:

+ +
// entering parallel universe...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Conversion snippets

+ +

Convert a binary String to a decimal Number:

+ +
var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+
+ +

Convert a decimal Number to a binary String:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+
+ +

Automate Mask Creation

+ +

You can create multiple masks from a set of Boolean values, like this:

+ +
function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+
+ +

Reverse algorithm: an array of booleans from a mask

+ +

If you want to create an Array of Booleans from a mask you can use this code:

+ +
function arrayFromMask(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

You can test both algorithms at the same time…

+ +
var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

For the didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a String containing the binary representation of a Number, rather than an Array of Booleans:

+ +
function createBinaryString(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.bitwise")}}

+ +

See also

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html new file mode 100644 index 0000000000..e3a3ee6e8c --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html @@ -0,0 +1,343 @@ +--- +title: Operadores Lógicos +slug: Web/JavaScript/Reference/Operators/Operadores_Logicos +tags: + - Operador + - Operadores lógicos + - Referencia + - e + - não + - ou +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Resumo

+ +

Operadores lógicos são tipicamente usados com valores Booleanos (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores && e || de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.

+ +

Descrição

+ +

Os operadores lógicos são descritos na tabela abaixo:

+ + + + + + + + + + + + + + + + + + + + + + + + +
OperadorUtilizaçãoDescrição
Logical AND (&&)expr1 && expr2Retorna expr1 se essa pode ser convertido para falso; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, && retorna verdadeiro se ambos os operandos forem verdadeiro ; senão, retorna falso.
Logical OR (||)expr1 || expr2Retorna expr1 se essa pode ser convertido para verdadeiro; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, || retorna verdadeiro se qualquer dos operandos for verdadeiro; se ambos são falso, retorna falso.
Logical NOT (!)!expr +

Retorna falsose o seu operando pode ser convertido para verdadeiro; senão, retorna verdadeiro.

+
+ +

Se um valor pode ser convertido para verdadeiro, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para falso, este valor é chamado de {{Glossary("falsy")}}.

+ +

Exemplos de expressões que podem ser convertidas para falso são:

+ + + +

Mesmo que os operadores && and || possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.

+ +

Avaliação de Curto-Circuito (Short-Circuit) 

+ +

Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:

+ + + +

As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção qualquer coisa das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também  que a parte qualquer coisa das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos parênteses).

+ +

Por exemplo, as duas funções a seguir são equivalentes.

+ +
function shortCircuitEvaluation() {
+  // logical OR (||)
+  doSomething() || doSomethingElse();
+
+  // logical AND (&&)
+  doSomething() && doSomethingElse();
+}
+
+function equivalentEvaluation() {
+
+  // logical OR (||)
+  var orFlag = doSomething();
+  if (!orFlag) {
+    doSomethingElse();
+  }
+
+
+  // logical AND (&&)
+  var andFlag = doSomething();
+  if (andFlag) {
+    doSomethingElse();
+  }
+}
+ +

Contudo, as expressões a seguir não são equivalentes, devido a precedência do operador, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário).

+ +
 false && true || true       // retorna true
+ false && (true || true)     // retorna falso
+ +

AND Lógico (&&)

+ +

O código a seguir demonstra exemplos do operador && (AND lógico). 

+ +
a1 = true  && true       // t && t retorna true
+a2 = true  && false      // t && f retorna false
+a3 = false && true       // f && t retorna false
+a4 = false && (3 == 4)   // f && f retorna false
+a5 = 'Cat' && 'Dog'      // t && t retorna "Dog"
+a6 = false && 'Cat'      // f && t retorna false
+a7 = 'Cat' && false      // t && f retorna false
+a8 = ''    && false      // f && f retorna ""
+a9 = false && ''         // f && t retorna false
+
+ +

OR Lógico (||)

+ +

O código a seguir demonstra exemplos do operador || (OR lógico).

+ +
o1 = true  || true       // t || t retorna true
+o2 = false || true       // f || t retorna true
+o3 = true  || false      // t || f retorna true
+o4 = false || (3 == 4)   // f || f retorna false
+o5 = 'Cat' || 'Dog'      // t || t retorna "Cat"
+o6 = false || 'Cat'      // f || t retorna "Cat"
+o7 = 'Cat' || false      // t || f retorna "Cat"
+o8 = ''    || false      // f || f retorna false
+o9 = false || ''         // f || f retorna ""
+ +

NOT Logico (!)

+ +

O código a seguir demonstra exemplos do operador ! (NOT lógico) .

+ +
n1 = !true               // !t returns false
+n2 = !false              // !f returns true
+n3 = !'Cat'              // !t returns false
+ +

Regras de conversão

+ +

Convertendo AND para OR

+ +

A operação a seguir, envolvendo Booleanos:

+ +
bCondition1 && bCondition2
+ +

é sempre igual a:

+ +
!(!bCondition1 || !bCondition2)
+ +

Convertendo OR to AND

+ +

A operação a seguir, envolvendo Booleanos:

+ +
bCondition1 || bCondition2
+ +

é sempre igual a:

+ +
!(!bCondition1 && !bCondition2)
+ +

Convertendo entre dois NOT

+ +

A seguinte operação envolvendo Booleanos:

+ +
!!bCondition
+ +

é sempre igual a:

+ +
bCondition
+ +

Removendo parenteses aninhados

+ +

Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:

+ +

Removendo AND aninhado

+ +

A seguinte operação composta envolvendo Booleanos:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

é igual a :

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Removendo OR aninhado

+ +

A operação composta a seguir, envolvendo Booleanos:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

é sempre igual a:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstatusComentário
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}
+ {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}		{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}
+ {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}		{{Spec2('ES6')}}
+ +

Compatibilidade com o Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Retrocompatibilidade: Comportamento no  JavaScript 1.0 e1.1

+ +

Os operadores  && and || se comportam da seguinte maneira:

+ + + + + + + + + + + + + + + + + + + +
OperadorUtilizaçãoComportamento
&&expr1 && expr2Se o primeiro operando (expr1) pode ser convertido para falso, o operador &&  retorna false ao invés do valor do expr1.
||expr1 || expr2If the first operand (expr1) can be converted to true, the || operator retorna true rather than the value of expr1.
+ +

Veja Também

+ + diff --git a/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html b/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..8e0fb07927 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,187 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Palavra-chave +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +
{{jsSidebar("Statements")}}
+ +

A palavra-chave default pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.

+ +

Sintaxe

+ +

Com uma declaração {{jsxref("Statements/switch", "switch")}}:

+ +
switch (expressao) {
+  case value1:
+    //Declarações executadas quando o resultado da expressao for value1
+    [break;]
+  default:
+    //Declarações executadas quando nenhum dos valores for igual o da expressao
+    [break;]
+}
+ +

Com a declaração {{jsxref("Statements/export", "export")}}:

+ +
export default nameN
+ +

Descrição

+ +

Para mais detalhes, veja as páginas:

+ + + +

Exemplos

+ +

Usando default em declarações switch

+ +

No exemplo a seguir, se a variável expr for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças"  e executa a declaração correspondente. A palavra-chave default vai ajudar em qualquer outro caso e executará a declaração associada.

+ +
switch (expr) {
+  case 'Laranjas':
+    console.log('Laranjas custam R$0,59.');
+    break;
+  case 'Maças':
+    console.log('Maças custam R$0,32.');
+    break;
+  default:
+    console.log('Desculpe, nós não temos ' + expr + '.');
+}
+ +

Usando default com export

+ +

Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:

+ +
// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

Então, no outro script, isso pode ser passado direto para o import do default export:

+ +
// module "my-module.js"
+import myFunction from 'my-module';
+console.log(myFunction(3)); // 27
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/conflicting/web/progressive_web_apps/index.html b/files/pt-br/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..f379b2647a --- /dev/null +++ b/files/pt-br/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,68 @@ +--- +title: Design Responsivo +slug: Web_Development/Mobile/Design_responsivo +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

Como uma reação aos problemas associados com a abordagem de sites separados para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente bastante antiga) está crescendo em popularidade: abandona a detecção do agente de usuário, e em vez disso faz sua pagína responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para A List Apart, veio a ser conhecido como Responsive Web Design. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.

+ +

As Vantagens

+ +

Embora ele não foi inicialmente proposto como metodo para criação de sites móveis, design responsivo foi recentemente ganhou muita atenção como uma forma de tomar alguns primeiros passos no sentido de amizade móvel no lugar de um site móvel separado.

+ +
    +
  1. Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.
    2. +
  2. Design Responsivo fornece cada página com uma URL única e original.
    3. +
  3. Estatísticas de compartilhamento social (Curtidas no Facebook, Tweets, +1 no Google+) não dividem, desde que as versões desktop e móveis de páginas web usam uma URL única e exclusiva.
    4. +
  4. Design Responsivo não se preocupa sobre agentes de usuário.
    5. +
+ +

Há alguns aspectos muito bom para essa abordagem. Desde que ele não confie na detecção do agente de usuário, é mais resistente e à prova futurística da abordagem de sites separados. Para sites simples, ele também pode ser significativamente mais fácil de implementar e manter do que outras opções.

+ +

Os Negativos

+ +

Essa abordagem não é sem suas limitações. Porque o conteúdo deve ser alterado no lado cliente com JavaScript, apenas mínimas alterações de conteúdo são encorajadas. Em geral, as coisas podem ficar muito cabeludo muito rapidamente se você estiver tentando codificar dois conjuntos distintos de JavaScript para funcionar com o mesmo DOM. Esta é uma grande razão por que aplicativos web não tendem a adotar esta abordagem.

+ +

Dar a seu site existente um design responsivo também envolve uma reconfiguração de seus estilos se você não está ostentando ainda um layout flexível. Esta poderia ser uma benção disfarçada, embora; fazer o layout do seu site responsivo poderia ser uma boa oportunidade para modernizar e limpar o CSS do seu site.

+ +

Finalmente, uma vez que você está adicionando o código para seus scripts e estilos, desempenho pode ser pior do que a abordagem de Sites Separados. Não há realmente nenhuma maneira de contonar isso, embora uma refatoração pensativo de seus scripts e estilos pode realmente salvar alguns bytes em longo prazo.

+ +

Quando há que escolher esta opção

+ +

teixido_responsive-300x177.pngComo mencionado acima, porque as alterações de conteúdo podem ser difíceis, quando você usar essa abordagem, você não é capaz de dar aos usuários uma experiência surpreendentemente diferente no celular sem um aumento significativo na complexidade de código. Disse que, se as versões desktop e móvel do seu site são muito semelhantes, então esta abordagem é uma ótima opção. É bem adequado para sites centrados em documentos cujo um caso de uso primário é consistente em dispositivos, como as páginas de produtos. Você pode notar que os exemplos abaixo são todos blogs ou portfolios!

+ +

Exemplos

+ +

Embora não seja tão popular como a abordagem de locais diferentes, existem mais e mais sites que empregam essa técnica todos os dias. Felizmente, uma vez que todo o código é lado cliente, se você gostaria de ver como um site tecnicamente implementa esta abordagem, é tão simples como visitar o site e clicando em “Ver Código-Fonte da Página.” Aqui estão alguns exemplos:

+ + + +

Apesar de ser uma abordagem relativamente jovem, já existem algumas prátivas recomendadas emergentes. Por exemplo, se você estiver criando um site do zero com essa opção em mente, é geralmente útil para criar um design de tela pequena primeiro, para que as restrições do site móvel com você desde o início. Também é ótimo para usar o aprimoramento progressivo para seus estilos em vez de ocultar elementos do seus site existente com media queries. Desta forma, navegadores mais antigos que podem não oferecer suporte a media queries ainda mostrem o layout adequado. Uma excelente apresentação sobre o mérito desse método está disponível aqui.

+ +

Abordagem para desenvolvimento web móvel

+ +

Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.

+ + + +

Veja também

+ + + +
+

Informação Original do Documento

+ +

Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "Approaches to Mobile Web Development Part 3 - Responsive Design", por Jason Grlicky.

+
diff --git a/files/pt-br/construindo_um_complemento/index.html b/files/pt-br/construindo_um_complemento/index.html deleted file mode 100644 index 9661e309ae..0000000000 --- a/files/pt-br/construindo_um_complemento/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: Construindo um complemento -slug: Construindo_um_complemento -tags: - - Add-ons - - Complementos - - Tutorial -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension ---- -

Introdução

-

This tutorial will take you through the steps required to build a very basic extension - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!".

-
- Note: The extension created by this tutorial won't work in Firefox versions that don't have a static status bar (that is, Firefox 4 and up). You can find a more up-to-date tutorial in the XUL School tutorial The Essentials of an Extension.
-

Since Firefox 4 (and other Mozilla 2 based applications) there are two types of extensions:

- -

This article explains how to build a traditional extension for Firefox. For information on bootstrapped or restartless extensions, see Bootstrapped extensions.

-

For a tutorial on building an extension for Thunderbird, see Building a Thunderbird extension.

-

Início rápido

-

A Hello World extension similar to what you can generate with the Extension Wizard is explained line-by-line in another tutorial from MozillaZine Knowledge Base.

-

Configurando o ambiente de desenvolvimento

-

Extensions are packaged and distributed in ZIP files or Bundles, with the XPI file extension.

-

An example of the content within a typical XPI file:

-
my_extension.xpi:                         //Equal to a folder named my_extension/
-          /install.rdf                    //General information about your extension
-          /chrome.manifest                //Registers your content with the Chrome engine
-          /chrome/
-          /chrome/content/                //Contents of your extension such as XUL and JavaScript files
-          /chrome/icons/default/*         //Default Icons of the extension
-          /chrome/locale/*                //Building an Extension# Localization
-          /defaults/preferences/*.js      //Building an Extension# Defaults Files
-          /plugins/*
-          /components/*
-          /components/cmdline.js
-

We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your extension somewhere on your hard disk (e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/). Inside your new extension folder, create another folder called chrome, and inside the chrome folder create a folder called content.

-

Inside the root directory of your extension folder, create two new empty text files, called chrome.manifest and install.rdf. In the chrome/content directory, create a new empty text file called sample.xul.

-

You should end up with this directory structure:

- -

<pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre> Please read the additional information about setting up your development environment in the article Setting up extension development environment.

-

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

-

Criando o Manifesto de Instalação

-

Open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside:

-
<?xml version="1.0"?>
-
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
-
-  <Description about="urn:mozilla:install-manifest">
-    <em:id>sample@example.net</em:id>
-    <em:version>1.0</em:version>
-    <em:type>2</em:type>
-
-    <!-- Target Application this extension can install into,
-         with minimum and maximum supported versions. -->
-    <em:targetApplication>
-      <Description>
-        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-        <em:minVersion>1.5</em:minVersion>
-        <em:maxVersion>4.0.*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>sample</em:name>
-    <em:description>A test extension</em:description>
-    <em:creator>Your Name Here</em:creator>
-    <em:homepageURL>http://www.example.com/</em:homepageURL>
-  </Description>
-</RDF>
-
- -
- Note: If you get a message that the install.rdf is malformed, it is helpful to load it into Firefox using the File->Open File command and it will report XML errors to you.
-

Extensions designed to work with Firefox 2.0.0.x at the latest should set the maximum version to "2.0.0.*". Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to "1.5.0.*".

-

See Install Manifests for a complete listing of the required and optional properties.

-

Save the file.

-

Extendendo o navegador com XUL

-

Firefox's user interface is written in XUL and JavaScript. XUL is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.

-

To extend the browser, we modify parts of the browser UI by adding or modifying widgets. We add widgets by inserting new XUL DOM elements into the browser window and modify them by using script and attaching event handlers.

-

The browser is implemented in a XUL file called browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contains content/browser/browser.xul). In browser.xul we can find the status bar, which looks something like this:

-
<statusbar id="status-bar">
- ... <statusbarpanel>s ...
-</statusbar>
-
-

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.

-

XUL Overlays

-

XUL Overlays are a way of attaching other UI widgets to a XUL document at runtime. A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document. These fragments can specify widgets to be inserted, removed, or modified.

-

Example XUL Overlay Document

-
<?xml version="1.0"?>
-<overlay id="sample"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
- <statusbar id="status-bar">
-  <statusbarpanel id="my-panel" label="Hello, World"  />
- </statusbar>
-</overlay>
-
-

The <statusbar> called status-bar specifies the "merge point" within the browser window that we want to attach to.

-

The <statusbarpanel> child is a new widget that we want to insert within the merge point.

-

Take this sample code above and save it into your file called sample.xul inside the chrome/content folder you created.

-

For more information about merging widgets and modifying the user interface using Overlays, see below.

-

Chrome URIs

-

XUL files are part of "Chrome Packages" - bundles of user interface components which are loaded via chrome:// URIs. Rather than load the browser from disk using a file:// URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to XUL content that the installed application knows about.

-

The browser window is: chrome://browser/content/browser.xul. Try typing this URL into the location bar in Firefox!

-

Chrome URIs consist of several components:

- -

So, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section.

-

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).

-

Criando um Manifesto Chrome

-

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

-

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

-

Add in this code:

-
content     sample    chrome/content/
-
-

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

-

This specifies the:

-
    -
  1. type of material within a chrome package
    2. -
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})
    3. -
  3. location of the chrome packages' files
    4. -
-

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

-

Note that content, locale, and skin files must be kept inside folders called content, locale, and skin within your chrome subdirectory.

-

Save the file. When you launch Firefox with your extension (later in this tutorial), this will register the chrome package.

-

Register an Overlay

-

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

-
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
-
-

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

-

Teste

-

First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.

-
    -
  1. Locate your profile folder and beneath it the profile you want to work with (e.g., Firefox/Profiles/<profile_id>.default/).
    2. -
  2. Open the extensions/ folder, creating it if need be.
    3. -
  3. Create a new text file and put the full path to your development folder inside (e.g., C:\extensions\my_extension\ or ~/extensions/my_extension/). Windows users should retain the OS slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
    4. -
  4. Save the file with the id of your extension as its name (e.g., sample@example.net). No file extension.
    5. -
-

Now you should be ready to test your extension!

-

Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.

-

You can now go back and make changes to the .xul file, close and restart Firefox, and they should appear.

-

Empacotando

-

Now that your extension works, you can package it for deployment and installation.

-

Zip up the contents of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!

-

On Mac OS X, you can right-click on the contents of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the zip command on the command line to create the zip file.

-

On Linux, you would likewise use the command-line zip tool.

-

If you have the 'Extension Builder' extension installed, it can compile the .xpi file for you (Tools -> Extension Developer -> Extension Builder). Merely navigate to the directory where your extension is (install.rdf, etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.

-

Now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -> Extensions in Firefox 1.5.0.x, or Tools -> Add-ons in later versions.

-

Instalando a partir de uma página web

-

There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the InstallTrigger method to install XPIs, as it provides the best experience to users.

-

Usando addons.mozilla.org

-

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

-

Visit http://addons.mozilla.org/developers/ to create an account and begin distributing your extensions!

-

Note: Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.

-

Instalando complementos usando uma instalador um instalador separado

-

It's possible to install an extension in a special directory and it will be installed the next time the application starts. The extension will be available to any profile. See Installing extensions for more information.

-

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the application starts. This allows application installers to easily add integration hooks as extensions. See Adding Extensions using the Windows Registry for more information.

-

Mais sobre XUL Overlays

-

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

- -
<statusbarpanel position="1" ...  />
-
-<statusbarpanel insertbefore="other-id" ...  />
-
-<statusbarpanel insertafter="other-id" ...  />
-
-

Criando novos componentes de interface com o usuário

-

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors, etc.

-

View the XUL documentation for more resources for XUL developers.

-

Arquivos padrão

-

Defaults files that you use to seed a user's profile with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

-

An example default preference file:

-
pref("extensions.sample.username", "Joe"); //a string pref
-pref("extensions.sample.sort", 2); //an int pref
-pref("extensions.sample.showAdvanced", true); //a boolean pref
-
-

Componentes XPCOM

-

Firefox supports XPCOM components in extensions. You can create your own components easily in JavaScript or in C++ (using the Gecko SDK).

-

Place all of your .js or .dll files in the components/ directory - they are automatically registered the first time Firefox runs after your extension is installed.

-

For more information see How to Build an XPCOM Component in Javascript, How to build a binary XPCOM component using Visual Studio, and the Creating XPCOM Components book.

-

Aplicação de linha de comando

-

One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:

-
 firefox.exe -myapp
-
-

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). See Chrome: Command Line and a forum discussion for details.

-

Localização

-

To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this while you are developing your extension, rather than come back and do it later!

-

Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create two directories nested as "locale/en-US" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:

-
locale sample en-US chrome/locale/en-US/
-
-

To create localizable attribute values in XUL, you can place the values in a .dtd file (sample.dtd for our sample extension). This file should be placed in the locale directory and looks like this:

-
<!ENTITY  my-panel.label  "Hello, World">
-
-

And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:

-
<?xml version="1.0"?>
-<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
-...
-
-

where window is the localName value of the root element of the XUL document, and the value of the SYSTEM property is the chrome URI to the entity file.

-

For our sample extension, replace window with overlay (root element), packagename with sample, and filename.dtd with sample.dtd.

-

To use the entities, modify your XUL to look like this:

-
<statusbarpanel id="my-panel" label="&my-panel.label;"  />
-
-

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

-

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

-
key=value
-
-

and then use {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} or the {{ XULElem("stringbundle") }} tag to load the values into script.

-

Entendendo o navegador

-

Use the DOM Inspector to inspect the browser window or any other XUL window you want to extend.

-

Note: DOM Inspector is not part of the Standard Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from Firefox Add-ons as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose DOM Inspector (or Developer Tools in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.

-

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this, the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

-

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the load event fires on the master XUL window.

-

Debugando complementos

-

Analytical Tools for Debugging

- -

printf debugging

- -

Advanced debugging

- -

Further information

- diff --git a/files/pt-br/css/usando_caixas_flexiveis_css/index.html b/files/pt-br/css/usando_caixas_flexiveis_css/index.html deleted file mode 100644 index 00dbf6fca6..0000000000 --- a/files/pt-br/css/usando_caixas_flexiveis_css/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Usando CSS flexible boxes (Caixas Flexíveis) -slug: CSS/Usando_caixas_flexiveis_css -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -

{{ SeeCompatTable() }}

- -

CSS Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis de CSS), também conhecida como "flexbox", é parte do rascunho da especificação do CSS3. Ele provê uma CSS Box Model otimizada para o design de interfaces com o usuário. Elementos filhos no layout flex podem ser posicionados em qualquer direção e possuem dimensões flexíveis para se adaptar ao espaço disponível. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser construídos de uma maneira mais clara e limpa. A ordem de exibição dos elementos é independente da ordem no código fonte.

- -
Nota: a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com -ms-, -moz-, -o- e -webkit- para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.
- -

Veja Flexbox para uma introdução à API.

- -

Conceito de Caixas Flexíveis

- -

O algoritmo de layout flexbox é agnóstico a direcionamento, em oposição ao layout de bloco (block layout), que é orientado verticalmente, ou ao layout inline, que é orientado horizontamente. Enquanto o layout de bloco funciona bem para páginas, ele carece de definição suficiente para suportar componentes de aplicação que necessitam mudar de orientação, tamanho, aumentar ou encolher, redirecionar da vertical para horizontal, e assim por diante. Flexbox layout é o mais apropriado para os componentes de uma aplicação, ou layouts de pequena escala, enquanto o (emergente) layout de Grid (Grid layout) é planejado para larga escala. Ambos fazem parte de um esforço mais amplo com o CSS3 para proporcionar uma maior interoperabilidade de aplicações web com diferentes agentes de usuário, diferentes modos de escrita, e outras demandas de flexibilidade.

- -

Terminologia de Caixas Flexíveis

- -

Ainda que a discussão sobre flexbox gire em torno de termos como eixos horizontais ou em linha, ou eixos verticais ou em bloco, faz-se necessário uma nova terminologia para melhor descrever esse novo modelo. O diagrama abaixo ilustra os termos que serão apresentados a seguir. Ele mostra um container flex que tem uma direção no sentido da linha (NT: flex-direction of row), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: main axis) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.

- -

flex_terms.png

- -
-
Container Flex
-
O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores flex ou inline-flex da propriedade display.
-
Item Flex
-
-

Cada nó filho de um container flex é um item flex. Quando um texto é adicionado diretamente ao container flex, ele é encapsulado e um item flex anônimo.

- -
Nota: Se um bloco anônimo contém apenas espaços em braco, o box poderá não ser gerado se ele tiver a propriedade display:none.
- -
Nota: Os filhos de um container flex que que possuem posicionamento absoluto são posicionados staticamente de acordo com o canto inicial (NT: head start corner) do container flex pai.
-
-
Eixos
-
-

Cada layout flexbox possui dois eixos: o eixo principal (NT: main axis), por onde os itens flex seguem uns aos outros e o eixo cruzado (NT: cross axis), perpendicular ao eixo principal.

- -
    -
  • A propriedade flex-direction define o eixo principal.
    • -
  • A propriedade justify-content define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.
    • -
  • A propriedade align-items define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.
    • -
  • A propriedade align-self define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por align-items.
    • -
-
-
Directions
-
-

The main start/main end and cross start/cross end sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

- -
    -
  • The order property assigns elements to ordinal groups and determines which elements appear first.
    • -
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
    • -
-
-
Lines
-
-

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

-
-
Dimensions
-
-

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

- - -
-
- -

Designando uma flexible box

- -

Para designar o CSS parar elementos usandos esse estilo, a propriedade display deve ser setada da seguinte forma:

- -
display :  flex
- -

ou

- -
display : inline-flex
- -

Definindo o elemento como flex container e seus filhos como flex items. O valor flex faz o conteiner uma elemento de block-level. O valor inline-flex faz o flex conteiner um elemento  inline-level atmico.

- -
Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-flex.
- -

Flexible box properties

- -

 {{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }} 

- -
-
- -

Propriedades que não afetam container flexíveis

- -

Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.

- - - -

Examples

- -

These examples run in Chrome version 21 (or Chrome Canary which you can install in addition to Chrome). You can run the examples by creating a file with the code provided and loading it in Chrome Canary.

- -

Basic flex example

- -

This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. 

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* basic styling */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /* flexbox setup */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex > div:nth-child(1){ background : #009246; }
-   .flex > div:nth-child(2){ background : #F1F2F1; }
-   .flex > div:nth-child(3){ background : #CE2B37; }
-
-   .flex > div:hover
-   {
-        width: 200px;
-   }
-
-   </style>
-
- </head>
- <body>
-  <p>Flexbox nuovo</p>
-  <div class="flex">
-    <div>uno</div>
-    <div>due</div>
-    <div>tre</div>
-  </div>
- </body>
-</html>
- -

Holy Grail Layout example

- -

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

- -

HolyGrailLayout.png

- -

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

- -
​
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* Too narrow to support three columns */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-flow: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* Return them to document order */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main > nav, #main > aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- </style>
-  </head>
-  <body>
- <header>header</header>
- <div id='main'>
-    <article>article</article>
-    <nav>nav</nav>
-    <aside>aside</aside>
- </div>
- <footer>footer</footer>
-  </body>
-</html>
- -

Things to keep in mind

- -

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

- -

Flexibles boxes are laid out in conformance of the writing mode. Which means that main start and main end are laid out according to the position of start and end.

- -

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

- -

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before and break-inside as well as CSS 2.1   page-break-before, page-break-after and page-break-inside properties are accepted on a flex container, flex items and inside flex items.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}21.0{{ property_prefix("-webkit") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
diff --git a/files/pt-br/desenvolvimento_web/index.html b/files/pt-br/desenvolvimento_web/index.html deleted file mode 100644 index b98429a656..0000000000 --- a/files/pt-br/desenvolvimento_web/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Desenvolvimento Web -slug: desenvolvimento_web -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

Desenvolvimento web compreende todos os aspectos do desenvolvimento de um site ou aplicação web.

-

Aprenda a criar qualquer coisa desde um site simples até sites complexos e altamente interativos que incluem as mais recentes tecnologias da Web, lendo os artigos que você encontrará aqui.

- - - - - - - -
-

Documentation topics

-

Technologies

-
-
- Introduction to Web development
-
- A guide to learning how to develop for the Web.
-
- HTML
-
- HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
-
- CSS
-
- Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
-
- JavaScript
-
- JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
-
- DOM
-
- The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
-
- AJAX
-
- Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
-
- XHTML
-
- Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
-
- SVG
-
- Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
-
-

Strategies

-
-
- Web standards
-
- Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
-
- Responsive Web design
-
- Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
-
- Writing forward-compatible websites
-
- Best practices for creating websites that do not break when browsers are updated.
-
- Mobile Web development
-
- Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
-
- Mozilla Web developer FAQ
-
- Frequently asked questions from Web developers. With answers!
-
-

View All...

- 		-

Community

- -

Tools

- -

View All...

-
-

 

diff --git a/files/pt-br/dez_anos_de_mdn/index.html b/files/pt-br/dez_anos_de_mdn/index.html deleted file mode 100644 index 4955a114d4..0000000000 --- a/files/pt-br/dez_anos_de_mdn/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: 10 anos de MDN -slug: dez_anos_de_MDN -tags: - - História - - MDN -translation_of: MDN_at_ten ---- -
Celebrando 10 anos documentando sua Web.
- -
-
-

A história do MDN

- -

No início de 2005, um pequeno time de sonhadores se propôs a criar um novo e livre recurso online contruído pela comunidade para todos os desenvolvedores Web. Sua brilhante mas inconvêncional ideia se tornou o Mozilla Developer Network— recurso essencial para todas as tecnologias Web livres. Dez anos depois, nossa comunidade global está maior do que nunca, e juntos nós ainda estamos criando documentações, amostras de código e recursos de aprendizagem para todas as tecnologias Web livres, incluindo CSS, HTML, JavaScript e tudo mais que faz a Web livre tão poderosa quanto é.

- -

Aprenda mais about the history

- - -

Contribuindo com o MDN

- -

Por dez anos a comunidade do MDN tem documentado a Web livre. Desde corrigir pequenos erros a escrever uma API completamente nova todo mundo tem alguma coisa a oferecer, e nenhuma contribuição é menor ou maior que a outra. Nós temos mais de 90.000 páginas de conteúdo que tem sido escritas ou traduzidas por membros de nossa fantástica comunidade de Mozillians. Você pode se tornar um de nós.

- -

Aprenda mais about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. 10 anos de MDN
    2. -
  2. A história do MDN
    3. -
  3. Contribuindo com o MDN
    4. -
-
diff --git a/files/pt-br/dom/index.html b/files/pt-br/dom/index.html deleted file mode 100644 index 4b8372f55d..0000000000 --- a/files/pt-br/dom/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: DOM -tags: - - DOM - - NeedsTranslation - - References - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM ---- -
- Using the W3C DOM Level 1 Core
- Introduction to the W3C DOM.
-
-

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

-
-
-
-

Documentation about the DOM

-
-
- Gecko DOM Reference
-
- The Gecko Document Object Model Reference.
-
- About the Document Object Model
-
- A short introduction to the DOM.
-
- The DOM and JavaScript
-
- What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.
-
- Using dynamic styling information
-
- How to obtain information on and manipulate styling via the DOM.
-
- DOM event reference
-
- Lists all the DOM events and their meanings.
-
- History API: Manipulating the browser history
-
- Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.
-
- File API: Using files from web applications
-
- Describes the HTML5-introduced capability to select a local file and read data from it.
-
- Using the Page Visibility API
-
- Explains how to detect and use information about a web page being in the foreground or in the background.
-
- Fullscreen API: Using the fullscreen mode
-
- Describes how to set up a page that use the whole screen, without any browser UI around it.
-
- Determining the dimensions of elements
-
- How to figure out the right way to determine the dimensions of elements, given your needs.
-
- Dynamically modifying XUL-based user interface
-
- The basics of manipulating the XUL UI with DOM methods.
-
-

View All...

-
-
-

Getting help from the community

-

You need help on a DOM-related problem and can't find the solution in the documentation?

-
    -
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • -
-

Tools easing working with the DOM

- -

View All...

- - -
-
-

 

diff --git a/files/pt-br/dom/referencia_do_dom/events/index.html b/files/pt-br/dom/referencia_do_dom/events/index.html deleted file mode 100644 index 4d04915450..0000000000 --- a/files/pt-br/dom/referencia_do_dom/events/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Events and the DOM -slug: DOM/Referencia_do_DOM/Events -translation_of: Web/API/Document_Object_Model/Events ---- -
{{DefaultAPISidebar("DOM")}}
- -

Introdução

- -

Este capítulo descreve o Modelo de Eventos do DOM. A interface de Eventos é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e event listeners, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.

- -

Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em DOM Level 3 Events draft.

- -

Registrando event listeners

- -

Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.

- -

{{domxref("EventTarget.addEventListener")}}

- -
// Assuming myButton is a button element
-myButton.addEventListener('click', greet, false)
-function greet(event){
-    // print and have a look at the event object
-    // always print arguments in case of overlooking any other arguments
-    console.log('greet:', arguments)
-    alert('hello world')
-}
-
- -

Este é o método que você deve usar em páginas web modernas.

- -
-

Nota: Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.

-
- -

Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.

- -

atributo HTML

- -
<button onclick="alert('Hello world!')">
-
- -

O código JavaScript no atributo é passado para o objeto Evento através do parâmetro event . O valor return é tratado de uma maneira especial, descrita na especificação HTML.

- -
-

Cuidado: Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.

-
- -

DOM element properties

- -
// Supondo que myButton seja um elemento button
-myButton.onclick = function(event){alert('Hello world')}
-
- -

A função pode ser definida para receber um parâmetro event . O valor return é tratado de maneira especial, descrita na especificação HTML.

- -

O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.

- -

Acessando interfaces doEvento

- -

Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.

- -

A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.

- -
function print(evt) {
-  // the evt parameter is automatically assigned the event object
-  // take care of the differences between console.log & alert
-  console.log('print:', evt)
-  alert(evt)
-}
-// any function should have an appropriate name, that's what called semantic
-table_el.onclick = print
-
- - - - diff --git a/files/pt-br/dom/referencia_do_dom/examples/index.html b/files/pt-br/dom/referencia_do_dom/examples/index.html deleted file mode 100644 index 87ec3601e2..0000000000 --- a/files/pt-br/dom/referencia_do_dom/examples/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Examples of web and XML development using the DOM -slug: DOM/Referencia_do_DOM/Examples -translation_of: Web/API/Document_Object_Model/Examples ---- -

Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.

- -

Exemplo 1: altura e largura

- -

O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>width/height example</title>
-<script>
-function init() {
-  var arrImages = new Array(3);
-
-  arrImages[0] = document.getElementById("image1");
-  arrImages[1] = document.getElementById("image2");
-  arrImages[2] = document.getElementById("image3");
-
-  var objOutput = document.getElementById("output");
-  var strHtml = "<ul>";
-
-  for (var i = 0; i < arrImages.length; i++) {
-    strHtml += "<li>image" + (i+1) +
-            ": height=" + arrImages[i].height +
-            ", width=" + arrImages[i].width +
-            ", style.height=" + arrImages[i].style.height +
-            ", style.width=" + arrImages[i].style.width +
-            "<\/li>";
-  }
-
-  strHtml += "<\/ul>";
-
-  objOutput.innerHTML = strHtml;
-}
-</script>
-</head>
-<body onload="init();">
-
-<p>Image 1: no height, width, or style
-  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
-</p>
-
-<p>Image 2: height="50", width="500", but no style
-  <img id="image2"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       height="50" width="500">
-</p>
-
-<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
-  <img id="image3"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       style="height: 50px; width: 500px;">
-</p>
-
-<div id="output"> </div>
-</body>
-</html>
-
- -

Exemplo 2: Atributos de Imagem

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Modifying an image border</title>
-
-<script>
-function setBorderWidth(width) {
-  document.getElementById("img1").style.borderWidth = width + "px";
-}
-</script>
-</head>
-
-<body>
-<p>
-  <img id="img1"
-       src="image1.gif"
-       style="border: 5px solid green;"
-       width="100" height="100" alt="border test">
-</p>
-
-<form name="FormName">
-  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
-  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
-</form>
-
-</body>
-</html>
-
- -

Exemplo 3: Manipulando Estilos

- -

Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Changing color and font-size example</title>
-
-<script>
-function changeText() {
-  var p = document.getElementById("pid");
-
-  p.style.color = "blue"
-  p.style.fontSize = "18pt"
-}
-</script>
-</head>
-<body>
-
-<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
-
-<form>
-  <p><input value="rec" type="button" onclick="changeText();" /></p>
-</form>
-
-</body>
-</html>
-
- -

Exemplo 4: Usando folhas de estilo

- -

A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.

- -
var ss = document.styleSheets;
-
-for(var i = 0; i < ss.length; i++) {
-  for(var j = 0; j < ss[i].cssRules.length; j++) {
-    dump( ss[i].cssRules[j].selectorText + "\n" );
-  }
-}
- -

Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:

- -
body { background-color: darkblue; }
-p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
-#lumpy { display: none; }
-
- -

Este script produz o seguinte:

- -
BODY
-P
-#LUMPY
-
- -

 

- -

Exemplo 5: Propagação de Eventos

- -

Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.

- -

No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Event Propagation</title>
-
-<style>
-#t-daddy { border: 1px solid red }
-#c1 { background-color: pink; }
-</style>
-
-<script>
-function stopEvent(ev) {
-  c2 = document.getElementById("c2");
-  c2.innerHTML = "hello";
-
-  // this ought to keep t-daddy from getting the click.
-  ev.stopPropagation();
-  alert("event propagation halted.");
-}
-
-function load() {
-  elem = document.getElementById("tbl1");
-  elem.addEventListener("click", stopEvent, false);
-}
-</script>
-</head>
-
-<body onload="load();">
-
-<table id="t-daddy" onclick="alert('hi');">
-  <tr id="tbl1">
-    <td id="c1">one</td>
-  </tr>
-  <tr>
-    <td id="c2">two</td>
-  </tr>
-</table>
-
-</body>
-</html>
-
- -

Exemplo 6: getComputedStyle

- -

Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na Lista de Propriedades do DOM CSS.

- -

GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-
-<title>getComputedStyle example</title>
-
-<script>
-function cStyles() {
-  var RefDiv = document.getElementById("d1");
-  var txtHeight = document.getElementById("t1");
-  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
-
-  txtHeight.value = h_style;
-
-  var txtWidth = document.getElementById("t2");
-  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
-
-  txtWidth.value = w_style;
-
-  var txtBackgroundColor = document.getElementById("t3");
-  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
-
-  txtBackgroundColor.value = b_style;
-}
-</script>
-
-<style>
-#d1 {
-  margin-left: 10px;
-  background-color: rgb(173, 216, 230);
-  height: 20px;
-  max-width: 20px;
-}
-</style>
-
-</head>
-
-<body>
-
-<div id="d1">&nbsp;</div>
-
-<form action="">
-  <p>
-    <button type="button" onclick="cStyles();">getComputedStyle</button>
-    height<input id="t1" type="text" value="1" />
-    max-width<input id="t2" type="text" value="2" />
-    bg-color<input id="t3" type="text" value="3" />
-  </p>
-</form>
-
-</body>
-</html>
-
- -

Exemplo 7: Exibindo Propriedades de Evento do Objeto

- -

Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.

- -

As propriedades dos objetos de evento diferem muito entre os navegadores, o WHATWG DOM Standard lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.

- -

Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Show Event properties</title>
-
-<style>
-table { border-collapse: collapse; }
-thead { font-weight: bold; }
-td { padding: 2px 10px 2px 10px; }
-
-.odd { background-color: #efdfef; }
-.even { background-color: #ffffff; }
-</style>
-
-<script>
-
-function showEventProperties(e) {
-  function addCell(row, text) {
-    var cell = row.insertCell(-1);
-    cell.appendChild(document.createTextNode(text));
-  }
-
-  var e = e || window.event;
-  document.getElementById('eventType').innerHTML = e.type;
-
-  var table = document.createElement('table');
-  var thead = table.createTHead();
-  var row = thead.insertRow(-1);
-  var lableList = ['#', 'Property', 'Value'];
-  var len = lableList.length;
-
-  for (var i=0; i<len; i++) {
-    addCell(row, lableList[i]);
-  }
-
-  var tbody = document.createElement('tbody');
-  table.appendChild(tbody);
-
-  for (var p in e) {
-    row = tbody.insertRow(-1);
-    row.className = (row.rowIndex % 2)? 'odd':'even';
-    addCell(row, row.rowIndex);
-    addCell(row, p);
-    addCell(row, e[p]);
-  }
-
-  document.body.appendChild(table);
-}
-
-window.onload = function(event){
-  showEventProperties(event);
-}
-</script>
-</head>
-
-<body>
-<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
-</body>
-
-</html>
-
- -

Exemplo 8: Usando a interface de tabela  do DOM

- -

A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.

- -

Para adicionar uma linha e algumas células a uma tabela existente:

- -
<table id="table0">
- <tr>
-  <td>Row 0 Cell 0</td>
-  <td>Row 0 Cell 1</td>
- </tr>
-</table>
-
-<script>
-var table = document.getElementById('table0');
-var row = table.insertRow(-1);
-var cell,
-    text;
-
-for (var i = 0; i < 2; i++) {
-  cell = row.insertCell(-1);
-  text = 'Row ' + row.rowIndex + ' Cell ' + i;
-  cell.appendChild(document.createTextNode(text));
-}
-</script>
-
- -


- Notas

- - - - - - diff --git a/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html b/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html deleted file mode 100644 index e6dd923fb5..0000000000 --- a/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: How to create a DOM tree -slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree -translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree ---- -

{{draft}}

- -

Esta página descreve como usar DOM Core API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)

- -

Criando uma árvore DOM dinamicamente

- -

Considere o seguinte documento XML:

- -
<?xml version="1.0"?>
-<people>
-  <person first-name="eric" middle-initial="H" last-name="jung">
-    <address street="321 south st" city="denver" state="co" country="usa"/>
-    <address street="123 main st" city="arlington" state="ma" country="usa"/>
-  </person>
-
-  <person first-name="jed" last-name="brown">
-    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
-    <address street="123 west st" city="seattle" state="wa" country="usa"/>
-    <address street="321 south avenue" city="denver" state="co" country="usa"/>
-  </person>
-</people>
-
- -

A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:

- -
var doc = document.implementation.createDocument("", "", null);
-var peopleElem = doc.createElement("people");
-
-var personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-var addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-var addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-var personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-var addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-var addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-var addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-
- -

Veja também o capítulo DOM chapter of the XUL Tutorial.

- -

Você pode automatizar a criação de uma árvore DOM usando um algoritmo reverso JXON em associação com a seguinte representação JSON:

- -
{
-  "people": {
-    "person": [{
-      "address": [{
-        "@street": "321 south st",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }, {
-        "@street": "123 main st",
-        "@city": "arlington",
-        "@state": "ma",
-        "@country": "usa"
-      }],
-      "@first-name": "eric",
-      "@middle-initial": "H",
-      "@last-name": "jung"
-    }, {
-      "address": [{
-        "@street": "321 north st",
-        "@city": "atlanta",
-        "@state": "ga",
-        "@country": "usa"
-      }, {
-        "@street": "123 west st",
-        "@city": "seattle",
-        "@state": "wa",
-        "@country": "usa"
-      }, {
-        "@street": "321 south avenue",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }],
-      "@first-name": "jed",
-      "@last-name": "brown"
-    }]
-  }
-}
-
- -

E daí?

- -

As árvores DOM podem ser consultadas usando expressões XPath, convertidas em strings ou gravadas em arquivos locais ou remotos usando XMLSerializer (sem ter que primeiro converter para uma string), POSTed para um servidor web (via XMLHttpRequest), transformado usando XSLT, XLink, convertido para um objeto JavaScript através de um algoritmo JXON, etc.

- -

Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.

- -

Veja também

- - - -

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/pt-br/dom/referencia_do_dom/index.html b/files/pt-br/dom/referencia_do_dom/index.html deleted file mode 100644 index b0ae4420a6..0000000000 --- a/files/pt-br/dom/referencia_do_dom/index.html +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: Modelo de Objeto de Documento (DOM) -slug: DOM/Referencia_do_DOM -translation_of: Web/API/Document_Object_Model ---- -

{{DefaultAPISidebar("DOM")}}

- -

O Modelo de Objeto de Documento  (DOM) é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.

- -

Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.

- -

Uma introdução ao DOM está disponível.

- -

DOM interfaces

- -
- -
- -

Interfaces DOM obsoletas

- -

O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:

- -
- -
- -

Interfaces HTML

- -

Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.

- -

Um objeto HTMLDocument também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.

- -

HTML elemento interfaces

- -
- -
- -

Outras interfaces

- -
- -
- -

Obsoleto HTML interfaces

- -
- -
- -

SVG interfaces

- -

SVG elemento  interfaces

- -
- -
- -

SVG data type interfaces

- -

Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.

- -
-

Nota: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

-
- -

Static type

- -
- -
- -

Animated type

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

Other SVG interfaces

- -
- -
- -

Veja também

- - diff --git "a/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" "b/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" deleted file mode 100644 index 010a5ecd54..0000000000 --- "a/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Introdução ao DOM -slug: DOM/Referencia_do_DOM/Introdução -translation_of: Web/API/Document_Object_Model/Introduction ---- -

O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.

- -

O que é o DOM?

- -

O Document Object Model (DOM) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.

- -

Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.

- -

Os padrões W3C DOM e WHATWG DOM são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.

- -

Por exemplo, o DOM padrão especifica que o método getElementsByTagName no código abaixo deve retornar uma lista de todos os elementos <p> no documento:

- -
var paragraphs = document.getElementsByTagName("p");
-// paragraphs[0] is the first <p> element
-// paragraphs[1] is the second <p> element, etc.
-alert(paragraphs[0].nodeName);
-
- -

Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de document que representa o próprio documento, o objeto de table que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}}  para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.

- -

O DOM moderno é construído usando várias APIs que trabalham juntas. O DOM principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a HTML DOM API adiciona suporte para representar documentos HTML no DOM principal.

- -

DOM e JavaScript

- -

O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.

- -

No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:

- -

API (página HTML ou XML) = DOM + JS (linguagem de script)

- -

O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:

- -
# exemplo de DOM com Python
-import xml.dom.minidom as m
-doc = m.parse(r"C:\Projects\Py\chap1.xml")
-doc.nodeName # propriedade do objeto de documento DOM
-p_list = doc.getElementsByTagName("para")
-
- -

Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte JavaScript technologies overview.

- -

Acessando o DOM

- -

Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.

- -

Quando você cria um script - seja embutido em um elemento(tag) <script> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.

- -

O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):

- -
<body onload="window.alert('Welcome to my home page!');">
-
- -

Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o H1 à árvore deste documento:

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Tipos de dados fundamentais

- -

Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.

- -
-

Nota: Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como elementos, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.

-
- -

A tabela a seguir descreve brevemente esses tipos de dados.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipos de dados (Interface)Descrição
{{domxref("Document")}}Quando um membro retorna um objeto do tipo document (por exemplo, a propriedade ownerDocument de um elemento retorna o document ao qual ele pertence),esse objeto é o próprio objeto de  document raiz. O capítulo DOM document Reference descreve o objeto do document .
{{domxref("Node")}}Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.
{{domxref("Element")}} -

O tipo do element é baseado em node. Isso se refere a um elemento ou um nó do tipo element retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}}  retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o element que acabou de ser criado no DOM. Os objetos do element  implementam a interface DOM Element e também a mais básica interface Node, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).

-
{{domxref("NodeList")}}Uma nodeList é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa nodeList são acessados por índices em uma das duas formas: -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- Esses dois são equivalentes. No primeiro, item() é o método único no objeto da nodeList. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.
{{domxref("Attribute")}}Quando um attribute é retornado por um membro (por exemplo, pelo método createAttribute()), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.
{{domxref("NamedNodeMap")}} -

 é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

- -

Um namedNodeMap é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O namedNodeMap possui um método item() para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

-
- -

Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um attribute, por exemplo, e referir-se a um array de nós DOM como um nodeList. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.

- -

DOM interfaces

- -

Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML form pega a propriedade name da interface do HTMLFormElement mas a sua propriedade className vem da interface HTMLElement. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.

- -

Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.

- -

Interfaces e Objetos

- -

Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como createCaption e insertRow. Mas como é também um elemento HTML, table implementa a interface Element descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface Node mais básica, de onde deriva Element.

- -

Quando você pegar a referência para um objeto table, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.

- -
var tabela = document.getElementById("table");
-var atributosTabela = tabela.attributes; // interface Node/Element
-for (var i = 0; i < atributosTabela.length; i++) {
-  // interface HTMLTableElement: atributo border
-  if (atributosTabela[i].nodeName.toLowerCase() == "border")
-    tabela.border = "1";
-}
-// interface HTMLTableElement: atributo summary
-table.summary = "nota: aumento de borda";
-
- -

Interfaces Core no DOM

- -

Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de DOM Examples ao fim desse livro.

- -

Objetos Document e window são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto window representa algo como o browser, e o objeto document é a raiz de todo o documento em si. Element herda dessa interface Node genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto table na seção anterior.

- -

A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.

- - - -

Testando a DOM API

- -

Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <script>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.

- -

Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <script> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.

- -

Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função test() como achar necessário, criar mais botões ou adicionar elementos se necessário.

- -
<html>
-  <head>
-    <title>Testes DOM</title>
-    <script type="application/javascript">
-    function setBodyAttr(attr, value){
-      if (document.body) eval('document.body.'+attr+'="'+value+'"');
-      else notSupported();
-    }
-    </script>
-  </head>
-  <body>
-    <div style="margin: .5in; height: 400;">
-      <p><b><tt>text</tt></b></p>
-      <form>
-        <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-          <option value="black">preto
-          <option value="darkblue">azul escuro
-        </select>
-        <p><b><tt>bgColor</tt></b></p>
-        <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-          <option value="white">branco
-          <option value="lightgrey">cinza
-        </select>
-        <p><b><tt>link</tt></b></p>
-        <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-          <option value="blue">azul
-          <option value="green">verde
-        </select>  <small>
-        <a href="http://algum.website.tld/pagina.html" id="amostra">
-        (link)</a></small><br>
-      </form>
-      <form>
-        <input type="button" value="version" onclick="ver()" />
-      </form>
-    </div>
-  </body>
-</html>
-
- -

Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.

- -
-
Figura 0.1 Página de Teste DOM
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (bgColor), a cor dos hiperlinks (aLink), e a cor do texto (text). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html b/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html deleted file mode 100644 index f4bebc3678..0000000000 --- a/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Whitespace no DOM -slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM -tags: - - DOM - - Intermediário -translation_of: Web/API/Document_Object_Model/Whitespace ---- -

O problema

- -

A presença de espaço branco no DOM pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui whitespace entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que white-space: pre irá funcionar em CSS). Isso significa que:

- - - -

Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):

- -
<!-- Meu documento -->
-<html>
-<head>
-  <title>Meu documento</title>
-</head>
-<body>
-  <h1>Cabeçalho</h1>
-  <p>
-    Parágrafo
-  </p>
-</body>
-</html>
-
- -

- -

Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o whitespace.

- -

Facilitando as coisas

- -

É possível formatar o código como mostrado abaixo para contornar o problema:

- -
<!-- Impressão bonita convencional
-     com espaços brancos (whitespaces) entre as tags:
- -->
-<div>
- <ul>
-  <li>Posição 1</li>
-  <li>Posição 2</li>
-  <li>Posição 3</li>
- </ul>
-</div>
-
-<!-- Impressão bonita ajustada ao problema:
- -->
-<div
- ><ul
-  ><li>Posição 1</li
-  ><li>Posição 2</li
-  ><li>Posição 3</li
- ></ul
-></div>
-
- -


- O código Javascript abaixo define funções diversas que fazem a manipulação de whitespace no DOM mais fácil.

- -
/**
- * Em todo, o whitespace é definido como um dos caracteres
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * Isto não usa o "\s" do Javascript porque inclui espaços
- * que não quebram (e alguns outros caracteres).
- */
-
-
-/**
- * Determina se um conteúdo de texto do nó é inteiramente whitespace.
- *
- * @param nod  Um nó implementando a interface |CharacterData| (por exemplo:
- *             |Text|, |Comment|, ou nó |CDATASection|
- * @return     Verdadeiro se todo conteúdo de texto de |nod| é whitespace,
- *             de outra forma é falso.
- */
-function is_all_ws( nod )
-{
-  // Usa as características do ECMA-262 Edition 3 String e RegExp
-  return !(/[^\t\n\r ]/.test(nod.textContent));
-}
-
-
-/**
- * Determina se um nó deve ser ignorado pela função de iterador.
- *
- * @param nod  Um objeto implementando a interface DOM1 |Node|.
- * @return     verdadeiro se o nó é:
- *                1) Um nó |Text| que é todo whitespace
- *                2) Um nó |Comment|
- *             do contrário é falso.
- */
-
-function is_ignorable( nod )
-{
-  return ( nod.nodeType == 8) || // Um nó de comentário
-         ( (nod.nodeType == 3) && is_all_ws(nod) ); // um nó de texto, todo whitespace
-}
-
-/**
- * Versão de |previousSibling| que pula nós que são inteiramente
- * whitespace ou comentários.  (Normalmente |previousSibling| é uma propriedade
- * de todos os nós do DOM que dá o nó irmão, o nó que é
- * um filho do mesmo parente, que ocorre imediatamente antes do
- * nó de referência.)
- *
- * @param sib  O nó de referência.
- * @return     Ou:
- *               1) O irmão mais próximo do |sib| que não é
- *                  ignorável de acordo com |is_ignorable|, ou
- *               2) nulo se tal nó não existe.
- */
-function node_before( sib )
-{
-  while ((sib = sib.previousSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Versão de |nextSibling| que pula nós que são inteiramente
- * whitespace ou comentários.
- *
- * @param sib  O nó de referência.
- * @return     Ou:
- *               1) O irmão mais próximo do |sib| que não é
- *                  ignorável de acordo com |is_ignorable|, ou
- *               2) nulo se tal nó não existe.
- */
-function node_after( sib )
-{
-  while ((sib = sib.nextSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Versão de  |lastChild| que pula nós que são inteiramente
- * whitespace ou comentários.  (Normalmente |lastChild| é uma propriedade
- * de todos os nós do DOM que dá o último dos nós contidos
- * diretamente no nó de referência.)
- *
- * @param sib  O nó de referência.
- * @return     Ou:
- *               1) O último filho do |sib| que não é
- *                  ignorável de acordo com |is_ignorable|, ou
- *               2) nulo se tal nó não existe.
- */
-function last_child( par )
-{
-  var res=par.lastChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.previousSibling;
-  }
-  return null;
-}
-
-/**
- * Versão de |firstChild| que pula nós que são inteiramente
- * whitespace ou comentários.
- *
- * @param sib  O nó de referência.
- * @return     Ou:
- *               1) O primeiro nó do |sib| que não é
- *                  ignorável de acordo com |is_ignorable|, ou
- *               2) nulo se tal nó não existe.
- */
-function first_child( par )
-{
-  var res=par.firstChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.nextSibling;
-  }
-  return null;
-}
-
-/**
- * Versão de |data| que não inclui whitespace no início
- * e final e normaliza todos whitespaces para um espaço individual.  (Normalmente
- * |data| é uma propriedade de nós de texto que dá o texto do nó.)
- *
- * @param txt  O nó de texto do qual data deve ser retornado
- * @return     Uma string dando os conteúdos de um nó de texto com
- *             whitespace colapsado.
- */
-function data_of( txt )
-{
-  var data = txt.textContent;
-  // Usa características do ECMA-262 Edition 3 String e RegExp
-  data = data.replace(/[\t\n\r ]+/g, " ");
-  if (data.charAt(0) == " ")
-    data = data.substring(1, data.length);
-  if (data.charAt(data.length - 1) == " ")
-    data = data.substring(0, data.length - 1);
-  return data;
-}
-
- -

Exemplo

- -

O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja "Este é o terceiro parágrafo", e então muda o atributo da classe e os conteúdos daquele parágrafo.

- -
var cur = first_child(document.getElementById("teste"));
-while (cur)
-{
-  if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.")
-  {
-      cur.className = "mágica";
-      cur.firstChild.textContent = "Este é o parágrafo mágico";
-  }
-  cur = node_after(cur);
-}
-
diff --git a/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html b/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html deleted file mode 100644 index 13609ee260..0000000000 --- a/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Arrastar e soltar arquivos -slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos -translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do gerenciador de arquivos da plataforma subjacente e soltado s em uma página da Web.

- -

Os principais passos para o drag and drop é definir a drop zone (ou seja  definir um elemento para a queda dos arquivos) e definir  event handlers para os eventos {{event("drop")}} e {{event("dragover")}} . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em MDN's drag-and-drop repository (pull requests e/ou issues são bem-vindas).

- -

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).

- -

Definindo a drop zone

- -

O elemento de destino do evento {{event("drop")}} precisa de um event handler global  {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("div")}}

- -
<div id="drop_zone" ondrop="dropHandler(event);">
-  <p>Drag one or more files to this Drop Zone ...</p>
-</div>
- -

Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

- -
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
-  <p>Drag one or more files to this Drop Zone ...</p>
-</div>
-
- -

Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:

- -
#drop_zone {
-  border: 5px solid blue;
-  width:  200px;
-  height: 100px;
-}
-
- -
-

Nota: Observe que os eventos dragstart e dragend não são acionados ao arrastar um arquivo para o navegador do OS.

-
- -

Processo de drop

- -

O evento {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","files")}} para acessar cada arquivo.

- -

Este exemplo mostra como escrever o nome de cada arquivo arrastado,  no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o {{domxref("File","File API")}}.

- -

Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.

- -
function dropHandler(ev) {
-  console.log('File(s) dropped');
-
-  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
-  ev.preventDefault();
-
-  if (ev.dataTransfer.items) {
-    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
-    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
-      // Se os itens soltos não forem arquivos, rejeite-os
-      if (ev.dataTransfer.items[i].kind === 'file') {
-        var file = ev.dataTransfer.items[i].getAsFile();
-        console.log('... file[' + i + '].name = ' + file.name);
-      }
-    }
-  } else {
-    // Use a interface DataTransfer para acessar o (s) arquivo (s)
-    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
-      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
-    }
-  }
-}
- -

Impedir o evento de arrastar padrão do navegador

- -

O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDefault","preventDefault()")}} para desativar o manipulador padrão de arrastar e soltar do navegador.

- -
function dragOverHandler(ev) {
-  console.log('File(s) in drop zone');
-
-  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
-  ev.preventDefault();
-}
-
- -

Veja também

- - diff --git a/files/pt-br/dragdrop/drag_and_drop/index.html b/files/pt-br/dragdrop/drag_and_drop/index.html deleted file mode 100644 index 10e5592b91..0000000000 --- a/files/pt-br/dragdrop/drag_and_drop/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Arrastar e soltar -slug: DragDrop/Drag_and_Drop -tags: - - Avançado - - Guia(2) - - HTML5 - - Visão Geral - - XUL - - arrastar e soltar - - eventos -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (draggable) com o mouse, arrastar elementos até um elemento soltável (droppable), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (draggable) seguem o ponteiro do mouse durante a operação de arrastar (drag).

- -

Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).

- -

NT: Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos drag e drop e seus variantes conforme texto original. Sendo portanto mantidos também os termos draggable e droppable.

- -

Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.

- -

Eventos Drag

- -

O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os {{domxref("DragEvent","eventos drag")}} são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.

- -

Todos os tipos de evento drag são associados a um manipulador global de eventos. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventOn Event HandlerDescription
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}Acionado quando um elemento ou seleção de texto está sendo arrastado.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja Terminando um evento Drag.)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja Determinando Drop Targets.)
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja Começando uma Operação Drag.)
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja Realizando um Drop.)
- -

Note que eventos dragstart e dragend não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.

- -

Interfaces

- -

A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.

- -

A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo copy ou move), os dados do do evento drag (um ou mais itens) e o tipo de cada item drag (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.

- -

Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único drag item e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o tipo(kind) de data (seja ela string ou file) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.

- -

O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.

- -

A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.

- -

Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.

- -

Interfaces específicas para o Gecko

- -

A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são cfunções convenientes para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja Dragging and Dropping Multiple Items. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as propriedades específicas para o Gecko e Métodos específicos para o Gecko.

- -

O básico

- -

Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.

- -

Identificando o que é arrastável (draggable)

- -

Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir

- -
function dragstart_handler(ev) {
- console.log("dragStart");
- // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer)
- ev.dataTransfer.setData("text/plain", ev.target.id);
-}
-
-<body>
- <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
-</body>
-
- -

Veja a referência do atributo draggable e o Guia de operações drag para mais informações.

- -

Defina os dados do drag

- -

A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo text/html.

- -

Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que segura os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para gerenciar os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.

- -
function dragstart_handler(ev) {
-  // Adiciona os dados do arraste (drag)
-  ev.dataTransfer.setData("text/plain", ev.target.id);
-  ev.dataTransfer.setData("text/html", "<p>Parágrafo de exemplo</p>");
-  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
-}
-
- -

Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja Tipos recomendados de Drag Types e para mais informações sobre os dados do arraste (drag data), veja Drag Data.

- -

Defina uma imagem de arraste (drag image)

- -

Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.

- -
function dragstart_handler(ev) {
-  // Cria uma imagem e então a utiliza como a "drag image".
-  // NOTA: mude "example.gif" como uma imagem existente, caso contrário
-  // ela não será criada e a imagem padrão será utilizada como padrão.
-  var img = new Image();
-  img.src = 'example.gif';
-  ev.dataTransfer.setDragImage(img, 10, 10);
-}
-
- -

Para aprender mais sobre arrastar imagens de retorno, veja Definindo a imagem de retorno do arraste (Drag).

- -

Defina o efeito do arraste (Drag effect)

- -

A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso hover) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.

- -

Três efeitos podem ser definidos: 

- -

copy indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do drop). 

- -

move indica que os dados sendo arrastados irá ser movido.

- -

link indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). 

- -

Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.

- -

O exemplo a seguir mostra como utilizar essa propriedade.

- -
function dragstart_handler(ev) {
-  // Determina o efeito de arraste para copy
-  ev.dataTransfer.dropEffect = "copy";
-}
-
- -

Veja Efeitos do Arraste (Drag Effects) para mais detalhes.

- -

Defina uma zona de soltura (drop zone)

- -

Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (drop zone) ou que seja soltável (droppable), o elemento precisa ter ambos os atributos  {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.

- -
function dragover_handler(ev) {
- ev.preventDefault();
- // Define o dropEffect para ser do tipo move
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-<body>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
-</body>
-
- -

Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).

- -

Para mais informações, veja Especificando pontos de soltura (Drop Targets).

- -

Manipulando o efeito de soltura (drop)

- -

O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.

- -

O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).

- -
function dragstart_handler(ev) {
- // Adiciona o id do elemento alvo para o objeto de transferência de dados
- ev.dataTransfer.setData("text/plain", ev.target.id);
- ev.dropEffect = "move";
-}
-function dragover_handler(ev) {
- ev.preventDefault();
- // Define o dropEffect para ser do tipo move
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-<body>
- <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
-</body>
-
- -

Para mais informações, veja Realizando uma soltura (Drop).

- -

Fim da soltura (Drag end)

- -

No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (source) - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.

- -

Para mais informações sobre manipular o final de uma operação de arraste, veja Finalizando um arraste (Drag).

- -

Interoperabilidade

- -

Como podem ser visto no DataTransferItem interface's Browser Compatibility table, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}  que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.

- -

Exemplos e demonstrações

- - - -

Veja também

- - diff --git a/files/pt-br/dragdrop/index.html b/files/pt-br/dragdrop/index.html deleted file mode 100644 index 292b860888..0000000000 --- a/files/pt-br/dragdrop/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: DragDrop -slug: DragDrop -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop ---- -

 

-

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/pt-br/games/introduction_to_html5_game_development/index.html b/files/pt-br/games/introduction_to_html5_game_development/index.html new file mode 100644 index 0000000000..4401455ab9 --- /dev/null +++ b/files/pt-br/games/introduction_to_html5_game_development/index.html @@ -0,0 +1,113 @@ +--- +title: Introduction to HTML5 Game Development (summary) +slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) +tags: + - API + - Desenvolvimento Web + - Desenvolvimento mobile + - Firefox OS + - HTML5 + - JavaScript + - Jogos +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Vantagens

+ +
    +
  1. Os Jogos criados com HTML5 funcionam em Smartphones, tablets, PCs e smart TVs.
    2. +
  2. Anuncie e promova seu jogo na Web, bem como em outros meios de comunicação.
    3. +
  3. Pagamentos. Carregue o que quiser e use o serviço de processamento de pagamento que desejar.
    4. +
  4. Atualize seu jogo sempre que quiser.
    5. +
  5. Colete suas próprias análises.
    6. +
  6. Conecte-se com seus clientes mais de perto.
    7. +
  7. Usuários podem jogar sempre que quiserem e quando quiserem.
    8. +
+ +

Tecnologias da Web

+
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionTecnologias
AudioWeb Audio API
GráficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, sensores de dispositivos, WebRTC, Full Screen API, Pointer Lock API
LinguagensJavaScript (ou C/C++ usando Emscripten para compilar o JavaScript)
NetworkingWebRTC e/ou WebSockets
ArmazenamentoIndexedDB ou a "nuvem"
WebHTML, CSS, SVG, Social API (e muito mais!)
+ +
+
+
Full Screen API
+
gameplay de tela cheia
+
Gamepad API
+
Use gamepads ou outros controladores de jogos.
+
HTML e CSS
+
Contrua, estilize e disponha a interface de usuário do seu jogo.
+
HTML audio
+
Reproduza facilmente efeitos sonoros simples e música.
+
IndexedDB
+
Armazene os dados de usuário em seu próprio computador ou dispositivo.
+
JavaScript
+
Linguagem de programação web rápida para escrever o código do seu jogo, para portar facilmente seus jogos existentes Emscripten ou Asm.js.
+
Pointer Lock API
+
Bloquei o mouse ou outro dispositivo apontador na interface do seu jogo.
+
SVG (Gráficos Vetorias Escaláveis)
+
Crie gráficos vetoriais que sejam dimensionados sem problemas, independemente do tamanho ou da resolução da exibição do usuário.
+
+ +
+
Typed Arrays
+
Acessar dados binários brutos de dentro do JavaScript; Manipule texturas GL, dados de jogos ou qualquer outra coisa.
+
Web Audio API
+
Controle a reprodução, síntese e manipulação de aúdio em tempo real.
+
WebGL
+
Crie gráficos 2D e 3D acelerados por hardware de alto desempenho. OpenGL ES 2.0.
+
WebRTC
+
Comunicações em tempo real para controlar dados de aúdio e vídeo, incluindo teleconferência e transmissão de outros dados de aplicativos entre dois usuários, como bate-papo.
+
WebSockets
+
Conecte seu aplicativo ou site a um servidor para transmitir dados em tempo real. Perfeito para ação de jogo multiplayer, serviços de bate-papo e assim por diante.
+
Web Workers
+
Crie threads em segundo plano executando seu próprio código JavaScript para processadres multi-core.
+
XMLHttpRequest e File API
+
Envie e receba quaisquer tipo de dados que você quiser de um servidor da Web, como baixar novos níveis de jogos e ilustrações para transmitir informações de status de jogos não em tempo real.
+
+
+ +

 

diff --git a/files/pt-br/games/introduction_to_html5_game_gevelopment_(summary)/index.html b/files/pt-br/games/introduction_to_html5_game_gevelopment_(summary)/index.html deleted file mode 100644 index 4401455ab9..0000000000 --- a/files/pt-br/games/introduction_to_html5_game_gevelopment_(summary)/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Introduction to HTML5 Game Development (summary) -slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) -tags: - - API - - Desenvolvimento Web - - Desenvolvimento mobile - - Firefox OS - - HTML5 - - JavaScript - - Jogos -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Vantagens

- -
    -
  1. Os Jogos criados com HTML5 funcionam em Smartphones, tablets, PCs e smart TVs.
    2. -
  2. Anuncie e promova seu jogo na Web, bem como em outros meios de comunicação.
    3. -
  3. Pagamentos. Carregue o que quiser e use o serviço de processamento de pagamento que desejar.
    4. -
  4. Atualize seu jogo sempre que quiser.
    5. -
  5. Colete suas próprias análises.
    6. -
  6. Conecte-se com seus clientes mais de perto.
    7. -
  7. Usuários podem jogar sempre que quiserem e quando quiserem.
    8. -
- -

Tecnologias da Web

-
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunctionTecnologias
AudioWeb Audio API
GráficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, sensores de dispositivos, WebRTC, Full Screen API, Pointer Lock API
LinguagensJavaScript (ou C/C++ usando Emscripten para compilar o JavaScript)
NetworkingWebRTC e/ou WebSockets
ArmazenamentoIndexedDB ou a "nuvem"
WebHTML, CSS, SVG, Social API (e muito mais!)
- -
-
-
Full Screen API
-
gameplay de tela cheia
-
Gamepad API
-
Use gamepads ou outros controladores de jogos.
-
HTML e CSS
-
Contrua, estilize e disponha a interface de usuário do seu jogo.
-
HTML audio
-
Reproduza facilmente efeitos sonoros simples e música.
-
IndexedDB
-
Armazene os dados de usuário em seu próprio computador ou dispositivo.
-
JavaScript
-
Linguagem de programação web rápida para escrever o código do seu jogo, para portar facilmente seus jogos existentes Emscripten ou Asm.js.
-
Pointer Lock API
-
Bloquei o mouse ou outro dispositivo apontador na interface do seu jogo.
-
SVG (Gráficos Vetorias Escaláveis)
-
Crie gráficos vetoriais que sejam dimensionados sem problemas, independemente do tamanho ou da resolução da exibição do usuário.
-
- -
-
Typed Arrays
-
Acessar dados binários brutos de dentro do JavaScript; Manipule texturas GL, dados de jogos ou qualquer outra coisa.
-
Web Audio API
-
Controle a reprodução, síntese e manipulação de aúdio em tempo real.
-
WebGL
-
Crie gráficos 2D e 3D acelerados por hardware de alto desempenho. OpenGL ES 2.0.
-
WebRTC
-
Comunicações em tempo real para controlar dados de aúdio e vídeo, incluindo teleconferência e transmissão de outros dados de aplicativos entre dois usuários, como bate-papo.
-
WebSockets
-
Conecte seu aplicativo ou site a um servidor para transmitir dados em tempo real. Perfeito para ação de jogo multiplayer, serviços de bate-papo e assim por diante.
-
Web Workers
-
Crie threads em segundo plano executando seu próprio código JavaScript para processadres multi-core.
-
XMLHttpRequest e File API
-
Envie e receba quaisquer tipo de dados que você quiser de um servidor da Web, como baixar novos níveis de jogos e ilustrações para transmitir informações de status de jogos não em tempo real.
-
-
- -

 

diff --git a/files/pt-br/glossario/404/index.html b/files/pt-br/glossario/404/index.html deleted file mode 100644 index bb287ab6ea..0000000000 --- a/files/pt-br/glossario/404/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: '404' -slug: Glossario/404 -tags: - - Erros HTTP - - Glossário - - Infraestrutura - - Navegação -translation_of: Glossary/404 ---- -

O 404 é um código de resposta padrão que significa que o {{Glossary("Server", "server")}} não consegue encontrar o recurso solicitado.

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/502/index.html b/files/pt-br/glossario/502/index.html deleted file mode 100644 index f2590b71fe..0000000000 --- a/files/pt-br/glossario/502/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: '502' -slug: Glossario/502 -translation_of: Glossary/502 ---- -

Um erro {{Glossary("HTTP")}}  que significa "Bad Gateway".

- -

O {{Glossary("Servidor","Servidor")}} pode agir como um gateway ou proxy (go-between) entre um cliente  (como seu navegador web) ou outro, servidor de upstream. Quando sua requisição tenta acessar uma {{Glossary("URL")}}, o servidor de gateway pode retransmitir sua requisição para o servidor de upstream. "502" significa que o servidor de upstream retorou uma resposta inválida.

- -

Normalmente o servidor de upstream não esta fora (ou seja, não fornece resposta ao gateway/proxy), mas simplesmente não entende o mesmo protocolo de troca de dados(data-exchange) como o gateway/proxy. Os {{Glossary("Protocol", "protocols")}} de Internet são bem explícitos, então um 502 normalmente significa que uma ou ambas as maquinas estão programadas incorretamente ou parcialmente.

- -

Aprenda mais

- - diff --git "a/files/pt-br/glossario/abstra\303\247\303\243o/index.html" "b/files/pt-br/glossario/abstra\303\247\303\243o/index.html" deleted file mode 100644 index dc3b2df79e..0000000000 --- "a/files/pt-br/glossario/abstra\303\247\303\243o/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Abstração -slug: Glossario/Abstração -tags: - - Abstração - - Glossário - - Linguagem de Programação - - Programação -translation_of: Glossary/Abstraction ---- -

Abstração em {{Glossary("programação de computadores")}} é uma forma de reduzir a complexidade e tornar o projeto e a implementação mais eficientes em sistemas complexos de software. Ela esconde a complexidade técnica de um sistema por trás de uma {{Glossary("API", "APIs")}} mais simples.

- -

Saiba mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/acessibilidade/index.html b/files/pt-br/glossario/acessibilidade/index.html deleted file mode 100644 index 053c6be755..0000000000 --- a/files/pt-br/glossario/acessibilidade/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Acessibilidade -slug: Glossario/Acessibilidade -tags: - - Acessibilidade - - Glossário -translation_of: Glossary/Accessibility ---- -

Acessibilidade na Web (Web Accessibility) (A11Y) refere-se às melhores práticas para manter um site útil, apesar das restrições físicas e técnicas. A acessibilidade da Web é formalmente definida e discutida no {{Glossary("W3C")}} através de {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

- -

Leia Mais

- -

Conhecimento Geral

- - - -

Aprenda sobre acessibilidade na web

- - - -

Referências Técnicas

- - diff --git a/files/pt-br/glossario/adobe_flash/index.html b/files/pt-br/glossario/adobe_flash/index.html deleted file mode 100644 index 5699633794..0000000000 --- a/files/pt-br/glossario/adobe_flash/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Adobe Flash -slug: Glossario/Adobe_Flash -tags: - - Flash - - Glossário - - Infraestrutura -translation_of: Glossary/Adobe_Flash ---- -

Flash é uma tecnologia obsolescente desenvolvida pela Adobe que possibilita aplicativos Web, gráficos de vetor e multimídia. Você precisa instalar o plugin certo para usar o Flash dentro de um {{Glossary("Navegador","navegador web")}}.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/ajax/index.html b/files/pt-br/glossario/ajax/index.html deleted file mode 100644 index e83a091e72..0000000000 --- a/files/pt-br/glossario/ajax/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: AJAX -slug: Glossario/AJAX -tags: - - AJAX - - Glossário - - Infraestrutura - - Intro - - Introdução -translation_of: Glossary/AJAX ---- -

AJAX (Asynchronous {{glossary("JavaScript")}} e {{glossary("XML")}}) é uma prática de programação da combinação de {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, o {{glossary("DOM")}}, e o XMLHttpRequest {{glossary("object")}} para a construção de páginas web mais complexas.

- -

O que o AJAX permite é que você faça apenas atualizações em partes de uma página web ao invés de recarregá-la inteira novamente. O AJAX também permite que você trabalhe de forma assíncrona, o que significa que o seu código continua rodando enquanto uma parte da sua página está em processo de carregamento (em comparação com síncrono, que irá bloquear a execução do seu código até que toda a sua página web seja recarregada).

- -

Com websites interativos e padrões web modernos, o AJAX está sendo substituído gradualmente por funcões presentes em frameworks JavaScript e o padrão oficial Fetch API.

- -

Saiba mais

- -

Conhecimentos gerais

- - - -

Informações técnicas

- - diff --git a/files/pt-br/glossario/algoritmo/index.html b/files/pt-br/glossario/algoritmo/index.html deleted file mode 100644 index ed80819f54..0000000000 --- a/files/pt-br/glossario/algoritmo/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Algoritmo -slug: Glossario/Algoritmo -tags: - - CodingScripting - - Glossário - - Programação -translation_of: Glossary/Algorithm ---- -

Um algoritmo é uma série de instruções independentes que executam uma função.

diff --git a/files/pt-br/glossario/alpha/index.html b/files/pt-br/glossario/alpha/index.html deleted file mode 100644 index 53b1e183ff..0000000000 --- a/files/pt-br/glossario/alpha/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Alpha (canal alfa) -slug: Glossario/Alpha -tags: - - Alfa - - Canal Alfa - - Desenhando - - Glossário - - Translucidez - - Translucido - - Transparente - - Transparência - - WebGL - - WebXR - - canal - - cor - - graficos - - pixel -translation_of: Glossary/Alpha ---- -

Cores são representadas no formato digital como uma coleção de números, cada qual sinalizando o nível de força ou intensidade de dado componente da cor. Cada um desses componententes é chamado de canal. Num típico arquivo de imagem, o canais de cores descritos devem ser vermelho, verde e azul, que serão usados para definir a cor final. Para representar uma cor que através dela um plano de fundo possa ser visto, um quarto canal é adicionado a ela: o canal alfa. O canal alfa define o nível de opacidade da cor.

- -

Por exemplo, a cor #8921F2 (também descrita como rgb(137, 33, 242) ou hsl(270, 89%, 54)) é um belo tom de roxo. Abaixo você pode ver um pequeno retângulo no canto superior esquerdo e outro com a mesma cor, mas tendo um canal alfa defino em 0.5 (50% de opacidade). Os dois retângulos estão desenhados sobre o paragrafo de texto.

- -

Image showing the effect of an alpha channel on a color.

- -

Como você pode notar, a cor sem o canal alfa bloqueia completamente o texto ao fundo, enquanto o retângulo com canal alfa definido permite visibilidade através do plano de fundo com cor roxa.

- -

Saiba mais

- -

Conhecimento geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/api/index.html b/files/pt-br/glossario/api/index.html deleted file mode 100644 index c964801e48..0000000000 --- a/files/pt-br/glossario/api/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: API -slug: Glossario/API -tags: - - Glossario(2) -translation_of: Glossary/API ---- -

Uma API (Application Programming Interface) é um conjunto de características e regras existentes em uma aplicação que possibilitam interações com essa através de um software - ao contrário de uma interface de usuário humana. A API pode ser entendida como um simples contrato entre a aplicação que a fornece e outros itens, como outros componentes do software, ou software de terceiros.

- -

No desenvolvimento Web, uma API é geralmente um conjunto de {{glossary("method","methods")}} padronizados, {{Glossary("property","properties")}}, eventos, e {{Glossary("URL","URLs")}} que um desenvolvedor pode usar em seus aplicativos para interagir com componentes do navegador da Web de um usuário ou outro software / hardware no computador do usuário ou sites e serviços de terceiros.

- -

Exemplos

- - - -

Aprenda mais

- -

Conhecimento geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/apple_safari/index.html b/files/pt-br/glossario/apple_safari/index.html deleted file mode 100644 index d32aa243b2..0000000000 --- a/files/pt-br/glossario/apple_safari/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Apple Safari -slug: Glossario/Apple_Safari -tags: - - Glossário - - Mecanismos Web - - Navegação -translation_of: Glossary/Apple_Safari ---- -

Safari é um {{Glossary("navegador","navegador Web")}} desenvolvido pela Apple e fornecido com ambos Mac OS X e iOS. Baseia-se com o mecanismo de código aberto WebKit.

- -

Saiba mais

- -

Conhecimento geral

- - - -

Informação técnica

- - diff --git a/files/pt-br/glossario/argument/index.html b/files/pt-br/glossario/argument/index.html deleted file mode 100644 index 72e470fba0..0000000000 --- a/files/pt-br/glossario/argument/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Argumento -slug: Glossario/Argument -tags: - - EntendendoJS - - Glossário - - JavaScript -translation_of: Glossary/Argument ---- -

Um argumento é um {{glossary("valor")}} ({{Glossary("primitivo")}} ou um {{Glossary("objeto")}})  passado como um input (entrada) para uma {{Glossary("função")}}.

- -

Leia mais

- -

Conhecimento Geral

- - - -

Referencia Técnica

- - diff --git a/files/pt-br/glossario/arpanet/index.html b/files/pt-br/glossario/arpanet/index.html deleted file mode 100644 index 19e9b45df4..0000000000 --- a/files/pt-br/glossario/arpanet/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Arpanet -slug: Glossario/Arpanet -tags: - - Glossário - - Infraestrutura -translation_of: Glossary/Arpanet ---- -

A ARPAnet (Advanced Research Projects Agency Network, em português, Rede da Agência de Pesquisas em Projetos Avançados) foi a primeira rede de computadores, construída em 1969 como um meio robusto para transmitir dados militares sigilosos e para interligar os departamentos de pesquisa por todo os Estados Unidos. ARPAnet primeiro executou NCP (Network Control Protocol, em português, Protocolo de Controle de Rede) e posteriormente a primeira versão do protocolo de internet ou o conjunto de protocolos {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (Transmission Control Protocol/Internet Protocol, em português, Protocolo de Controle de Transmissão/Protocolo de Internet), fazendo da ARPAnet uma parte proeminente da nascente {{glossary("Internet")}}. ARPAnet foi fechado no início de 1990.

- -

Saiba mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/array/index.html b/files/pt-br/glossario/array/index.html deleted file mode 100644 index 4d1f3cf866..0000000000 --- a/files/pt-br/glossario/array/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Array -slug: Glossario/array -tags: - - Iniciante - - JavaScript -translation_of: Glossary/array ---- -

Um array (arranjo ou vetor) é um conjunto de dados (que pode assumir os mais diversos tipos, desde do tipo {{Glossary("primitivo")}}, a {{Glossary("objeto")}} dependendo da linguagem de programação). Arrays são utilizados para armazenar mais de um valor em uma única variável. Isso é comparável a uma variável que pode armazenar apenas um valor.

- -

Cada item do array tem um número ligado a ele, chamado de índice numérico, que permite acesso a cada "valor" armazenado na váriavel.

- -

Em {{glossary("JavaScript")}}, um {{jsxref("array")}} começa no índice zero e pode ser manipulado a partir de vários {{Glossary("Method", "métodos")}}.

- -

Um exemplo simples de Array em Javascript: 

- -
var myArray = [1, 2, 3, 4];
-
-var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
-
-//Um array em JavaScript pode conter vários tipos de dados, como mostrado acima.
- -

Saiba mais

- -

Conhecimentos Gerais

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/arvore_de_acessibilidade/index.html b/files/pt-br/glossario/arvore_de_acessibilidade/index.html deleted file mode 100644 index f05c237cf1..0000000000 --- a/files/pt-br/glossario/arvore_de_acessibilidade/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Árvore de Acessibilidade -slug: Glossario/arvore_de_acessibilidade -tags: - - AOM - - Acessibilidade - - DOM - - Glossário - - Referencia -translation_of: Glossary/Accessibility_tree ---- -

A árvore de acessibilidade contém informação relacionada à {{Glossary("accessibility", "acessibilidade")}} para a maioria dos elementos HTML.

- -

Navegadores convertem a marcação em uma representação interna chamada árvore do DOM. A árvore do DOM contém objetos representando todas as marcações de elementos, atributos e nós de texto. Os navegadores, então, criam uma árvore de acessibilidade baseada na árvore do DOM, a qual é usada por APIs específicas de plataforma para fornecer uma representação que possa ser entendida por tecnologias assistivas, como leitores de tela.

- -

Há quatro coisas em um objeto da árvore de acessibilidade:

- -
-
nome
-
Como podemos nos referir a esse objeto? Por exemplo, um link com o texto "Leia mais" terá "Leia mais" como seu atributo name (saiba mais como os nomes são computados em Accessible Name and Description Computation spec).
-
descrição
-
Como podemos descrever esse objeto se quisermos fornecer mais detalhes além do nome? A descrição de uma tabela pode explicar que tipo de informação ela contém.
-
função
-
Que tipo de objeto é esse? Por exemplo, é um botão, uma barra de navegação ou uma lista de items?
-
estado
-
Tem um estado? Os exemplos incluem caixas de seleção marcadas ou desmarcadas, e recolhido ou expandido para o elemento <summary>·
-
- -

Adicionalmente, a árvore de acessibilidade frequentemente contém informação sobre o que pode ser feito com um elemento: um link pode ser seguido, uma entrada de texto pode ser digitada, entre outras coisas.

- -

Enquanto continua em forma de rascunho na Web Incubator Community Group, o Modelo de Objeto de Acessibilidade (Accessibility Object Model, AOM), tem a intenção de incubar APIs que facilitam expressar a semântica de acessibilidade e potencialmente permitir acesso de leitura à árvore de acessibilidade computada.

- - - - diff --git a/files/pt-br/glossario/ascii/index.html b/files/pt-br/glossario/ascii/index.html deleted file mode 100644 index eee1f0d2c3..0000000000 --- a/files/pt-br/glossario/ascii/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ASCII -slug: Glossario/ASCII -tags: - - ASCII - - Caracteres ASCII - - Glossário - - Padrão de codificação - - Símbolos ASCII -translation_of: Glossary/ASCII ---- -

ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, UTF-8 substituiu-o na web.

- -

Aprenda mais

- -

Conhecimento geral

- -

{{Interwiki("wikipedia", "ASCII")}} no Wikipedia

diff --git a/files/pt-br/glossario/assincrono/index.html b/files/pt-br/glossario/assincrono/index.html deleted file mode 100644 index 5fdc23acfc..0000000000 --- a/files/pt-br/glossario/assincrono/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Assíncrono -slug: Glossario/Assincrono -tags: - - Glossário - - Mecanismos Web - - Web -translation_of: Glossary/Asynchronous ---- -

Assíncrono refere-se a um ambiente de comunicação onde cada parte recebe e processa mensagens quando for conveniente ou possível em vez de imediatamente.

- -

Isto pode ser usado para descrever um ambiente de comunicação humana como o e-mail — o remetente enviará um e-mail, e o destinatário irá responder quando for conveniente; eles não precisam responder imediatamente.

- -

Também pode ser usado para descrever um ambiente de comunicação programática, por exemplo, {{domxref("Ajax")}}é um mecanismo assíncrono para solicitar pequenos bits de dados por HTTP; o resultado é enviado de volta quando a resposta está completa, não imediatamente.

- -

Saiba mais

- -

Referência técnica

- - diff --git a/files/pt-br/glossario/atributo/index.html b/files/pt-br/glossario/atributo/index.html deleted file mode 100644 index f36e6f7fed..0000000000 --- a/files/pt-br/glossario/atributo/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Atributo HTML -slug: Glossario/Atributo -tags: - - Atributos - - Glossário - - HTML - - Tags -translation_of: Glossary/Attribute ---- -

Atributos estendem uma {{Glossary("tag")}} ("etiqueta"), modificando o comportamento dela ou fornecendo meta dados.
- Um atributo sempre tem a forma nome=valor (especificando o identificador do atributo e o valor associado a ele).

- -

Exemplo:

- -

<div id="principal" class="principal">  Neste cado o id e class são o atributo e o nome pricipal o valor.

- -

Aprenda mais

- -

Referência Técnica

- - diff --git a/files/pt-br/glossario/bandwidth/index.html b/files/pt-br/glossario/bandwidth/index.html deleted file mode 100644 index e986f11f4a..0000000000 --- a/files/pt-br/glossario/bandwidth/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Bandwidth -slug: Glossario/Bandwidth -translation_of: Glossary/Bandwidth ---- -

Largura de banda é a medida de quanta informação pode trafegar através de uma conexão de dados, em um determinado espaço de tempo. É geralmente medida em multiplos de bits por segundo (bps),  por exemplo megabits por segundo (Mbps) ou gigabits por segundo (Gbps).

- -

Learn more

- - diff --git a/files/pt-br/glossario/bigint/index.html b/files/pt-br/glossario/bigint/index.html deleted file mode 100644 index 004b5a3b80..0000000000 --- a/files/pt-br/glossario/bigint/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: BigInt -slug: Glossario/BigInt -translation_of: Glossary/BigInt ---- -

No {{Glossary("JavaScript")}}, BigInt é um tipo de dado numérico que representa inteiros no formato de precisão arbritrária. Em outras linguagens de programação existem tipos numéricos diferentes, como por exemplo: Integers, Floats, Doubles ou Bignums.

- -

 

- -

Saiba mais

- -

General knowledge

- - - -

Technical reference

- - - -

 

diff --git a/files/pt-br/glossario/booleano/index.html b/files/pt-br/glossario/booleano/index.html deleted file mode 100644 index f1b5a80c38..0000000000 --- a/files/pt-br/glossario/booleano/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Booleano -slug: Glossario/Booleano -translation_of: Glossary/Boolean ---- -

Um booleano, em ciência da computação, é um tipo de dado lógico que pode ter apenas um de dois valores possíveis: verdadeiro ou falso. Por exemplo, em JavaScript, condicionais booleanas são usadas para decidir quais trechos do cógigo serão executados ou repetidas.

- -

 

- -
if (condicao booleana) {
-   // codigo a executar se o booleano for TRUE
-}
-
-if (condicao booleana) {
-  console.log("booleano é verdadeiro");
-} else {
-  console.log("booleano é falso");
-}
-
-
-/* JavaScript for loop */
-for (variavel de controle; condicao booleana; contador) {
-  // codigo a se repetir se o booleano for TRUE
-}
-
-for (var i=0; i < 4; i++) {
-  console.log("codigo a executar se a condicao for verdadeira, ou seja até 'i' atingir o valor de 4 ");
-}
- -

 

- -

Veja mais

- -

Referências externas

- - - -

Referência

- - diff --git a/files/pt-br/glossario/cabecalho_http/index.html b/files/pt-br/glossario/cabecalho_http/index.html deleted file mode 100644 index 24bbb51bb6..0000000000 --- a/files/pt-br/glossario/cabecalho_http/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Cabeçalho HTTP -slug: Glossario/Cabecalho_HTTP -tags: - - Cabeçalho HTTP - - Glossary - - Glossário - - HTTP Header - - Mecânicas da Web - - WebMechanics -translation_of: Glossary/HTTP_header ---- -

Um Cabeçalho HTTP é um campo de uma requisição ou resposta HTTP que passa informações adicionais, alterando ou melhorando a precisão da semântica da mensagem ou do corpo. Cabeçalhos são case-insensitive, iniciam-se no começo da linha e são seguidos imediamente por um ':' e um valor dependendo do cabeçalho em si. O valor termina no próximo CRLF ou no fim da mensagem.

- -

Tradicionalmente, cabeçalhos são classificados em categorias, apesar disso, essa classificação não faz mais parte de nenhuma especificação:

- - - -

Uma requisição básica com um cabeçalho:

- -
GET /example.http HTTP/1.1
-Host: example.com
-
- -

Redirecionamentos possuem cabeçalhos mandatários ({{HTTPHeader("Location")}}):

- -
302 Found
-Location: /NewPage.html
-
- -

Um típicos conjunto de cabeçalhos:

- -
304 Not Modified
-Access-Control-Allow-Origin: *
-Age: 2318192
-Cache-Control: public, max-age=315360000
-Connection: keep-alive
-Date: Mon, 18 Jul 2016 16:06:00 GMT
-Server: Apache
-Vary: Accept-Encoding
-Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
-X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
-X-Backend-Server: developer6.webapp.scl3.mozilla.com
-X-Cache: Hit from cloudfront
-X-Cache-Info: cached
-
- - diff --git a/files/pt-br/glossario/cache/index.html b/files/pt-br/glossario/cache/index.html deleted file mode 100644 index 69fc7caf49..0000000000 --- a/files/pt-br/glossario/cache/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Cache -slug: Glossario/Cache -tags: - - Cache - - Glossário - - HTTP - - web cache -translation_of: Glossary/Cache ---- -

O cache (web cache ou HTTP cache) é uma forma de armazenar dados que foram recebidos por respostas HTTP temporariamente para que possam ser usados em requisições HTTP subsequentes enquanto as condições de seu uso forem satisfeitas.

- -

O cache ajuda a reduzir o tempo de resposta de uma página após a primeira requisição à mesma. Arquivos estáticos como o HTML e o CSS que não se modificam com frequência, scripts e imagens, ao serem salvos no cache, não precisam ser baixados do servidor novamente, sendo assim, só informações dinâmicas vão precisar ser requeridas. Lembrando que, qualquer modificação dos arquivos estáticos, o navegador do cliente terá de baixar novamente para receber as atualizações deste arquivo.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/call_stack/index.html b/files/pt-br/glossario/call_stack/index.html deleted file mode 100644 index 73e99316be..0000000000 --- a/files/pt-br/glossario/call_stack/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Call stack (Pilha de chamadas) -slug: Glossario/Call_stack -translation_of: Glossary/Call_stack ---- -

A pilha de chamadas (call stack) é um mecanismo do interpretador de uma linguagem que organiza o funcionamento do script quando são chamadas muitas funções, qual função está sendo executada no momento, e quais serão chamadas dentro de alguma função, etc.

- - - -

Exemplo

- -
function saudacao() {
-   // [1] Algum código aqui
-   digaOi();
-   // [2] Algum código aqui
-}
-function digaOi() {
-   return "Olá!";
-}
-
-// Chamando a função `saudacao`
-saudacao();
-
-// [3] Algum código aqui
-
- -

O código acima será executado desta forma pelo interpretador:

- -
    -
  1. Todas as funções serão ignoradas, até chegar na chamada da função saudacao().
    2. -
  2. Adiciona a função saudacao() para a pilha de chamadas. -
    -

    Pilha de chamadas:
    - - saudacao

    -
    -
    3. -
  3. Executa todas as linhas de código da função saudacao().
    4. -
  4. Chama a função digaOi().
    5. -
  5. Adiciona a função digaOi() na pilha de chamadas. -
    -

    Pilha de chamadas:
    - - saudacao
    - - digaOi

    -
    -
    6. -
  6. Executa todas as linhas de código da função digaOi() até o final.
    7. -
  7. Retorna a execução na linha onde foi chamada a função digaOi() e continua a execução do resto da função saudacao().
    8. -
  8. Deleta a função digaOi() da pilha de chamadas. -
    -

    Pilha de chamadas:
    - - saudacao

    -
    -
    9. -
  9. Quando todas as linhas da função saudacao() forem executadas, retorna para a linha onde a função foi invocada, e continua a execução do resto do código.
    10. -
  10. Deleta a função saudacao() da Pilha de chamadas. -
    -

    Pilha de chamadas:
    - EMPTY

    -
    -
    11. -
- -

Começamos com uma pilha de chamadas vazia, e sempre que chamamos uma função, ela é automaticamente adicionada à pilha de chamadas, e depois de todas as linhas serem executadas, é automaticamente removida da pilha de chamadas. No final, a pilha está vazia novamente.

- -

Veja mais

- -

General knowledge

- - - - diff --git a/files/pt-br/glossario/callback_function/index.html b/files/pt-br/glossario/callback_function/index.html deleted file mode 100644 index 42e67bcde6..0000000000 --- a/files/pt-br/glossario/callback_function/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Função Callback -slug: Glossario/Callback_function -translation_of: Glossary/Callback_function ---- -

Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.

- -

Aqui está um pequeno exemplo:

- -
function greeting(name) {
-  alert('Hello ' + name);
-}
-
-function processUserInput(callback) {
-  var name = prompt('Please enter your name.');
-  callback(name);
-}
-
-processUserInput(greeting);
- -

O exemplo acima é de um {{glossary("synchronous")}} callback, como é executado imediatamente.

- -

Note, no entanto, que callbacks são normalmente utilizados para continuar a execução do código após uma operação {{glossary("asynchronous")}} ser terminada — essas são chamadas asynchronous callbacks. Por exemplo, nosso simples exemplo maps-example.html (veja uma versão "live" aqui) usa o Google Maps API e a API de geolocalização para mostrar em um mapa a localização atual do nosso dispositivo.

- -

Como obter as coordenadas atuais do nosso GPS é uma ação assíncrona (nós não sabemos exatamente quando os dados serão retornados), o método {{domxref("Geolocation.getCurrentPosition()")}} pega um função callback anônima como um parametro, que pega os dados retornados da coordenada como parâmetro. Essa função só é executada quando os dados da coordenada são retornados.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/caractere/index.html b/files/pt-br/glossario/caractere/index.html deleted file mode 100644 index 7ce3a97b55..0000000000 --- a/files/pt-br/glossario/caractere/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Caractere -slug: Glossario/Caractere -tags: - - CodingScripting - - Glossário - - strings -translation_of: Glossary/Character ---- -

Um caractere é um símbolo (letras, números, pontuação)  ou de controle não imprimível (por exemplo, carriage return ou hífen). {{glossary ("UTF-8")}} é o conjunto de caracteres mais comum e inclui os grafemas dos idiomas humanos mais populares.

- -

Saiba Mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/caret/index.html b/files/pt-br/glossario/caret/index.html deleted file mode 100644 index 584a1ae8f1..0000000000 --- a/files/pt-br/glossario/caret/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: caret -slug: Glossario/caret -translation_of: Glossary/caret ---- -

Um caret (às vezes chamado de "cursor de texto") é um indicador exibido na tela para indicar onde a entrada de texto será inserida. A maioria das interfaces de usuário representam o caret usando uma linha vertical fina ou uma caixa do tamanho de um caractere que pisca, mas isso pode variar. Este ponto do texto é chamado de ponto de inserção. A palavra "careta" diferencia o ponto de inserção de texto do cursor do mouse.

- -

Na web, um caret é usado para representar o ponto de inserção em {{HTMLElement("input")}} e {{HTMLElement("textarea")}} elementos, bem como quaisquer elementos cujo atributo {{htmlattrxref("contenteditable")}} está definido, permitindo assim que o conteúdo do elemento seja editado pelo usuário.

- -

Saiba Mais

- -

Conhecimento geral

- - - -

CSS relacionado com o caret

- -

Você pode definir a cor do caret para o conteúdo editável de um determinado elemento definindo a propriedade CSS {{cssxref ("caret-color")}} para o valor apropriado {{cssxref("<color>")}}

- -

Elementos HTML que podem apresentar um caret

- -

Esses elementos fornecem campos de entrada de texto ou caixas e, portanto, fazem uso do caret.

- - diff --git a/files/pt-br/glossario/cdn/index.html b/files/pt-br/glossario/cdn/index.html deleted file mode 100644 index e539a279ae..0000000000 --- a/files/pt-br/glossario/cdn/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: CDN -slug: Glossario/CDN -tags: - - Glossario(2) - - Infraestrutura - - Rede de fornecimento de conteúdo - - cdn -translation_of: Glossary/CDN ---- -

CDN é a sigla para (Content Delivery Network) ou seja, Rede de Fornecimento de Conteúdo na tradução livre. É um grupo de servidores espalhados em muitos locais. Esses servidores armazenam cópias duplicadas de dados para que os servidores possam atender às solicitações de dados com base nos quais servidores estão mais próximos dos respectivos usuários finais. CDNs deixa os servidores menos sobrecarregados quando possuem alto tráfego de dados.

diff --git a/files/pt-br/glossario/character_encoding/index.html b/files/pt-br/glossario/character_encoding/index.html deleted file mode 100644 index b1748642cf..0000000000 --- a/files/pt-br/glossario/character_encoding/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Character encoding -slug: Glossario/character_encoding -translation_of: Glossary/character_encoding ---- -

Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como UTF-8), especificamos como a sequência de bytes deve ser interpretada.

- -

Por exemplo, em HTML, normalmente declaramos uma codificação de caracteres UTF-8, usando a seguinte linha:

- -
-
<meta charset="utf-8">
- -

Isso garante que você possa usar caracteres de praticamente qualquer idioma humano em seu documento HTML e eles serão exibidos com de forma confiável.

-
- -

Leia mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/chrome/index.html b/files/pt-br/glossario/chrome/index.html deleted file mode 100644 index d16366cc3d..0000000000 --- a/files/pt-br/glossario/chrome/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Chrome -slug: Glossario/Chrome -tags: - - Chrome - - Glossário - - Navegador -translation_of: Glossary/Chrome ---- -

Em um navegador, o chrome é qualquer aspecto visível do navegador aparte das páginas web (ex., barra de ferramentas, menus, abas). Não deve ser confundido com o {{glossary("Google Chrome")}} navegador.

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/class/index.html b/files/pt-br/glossario/class/index.html deleted file mode 100644 index 688df4d764..0000000000 --- a/files/pt-br/glossario/class/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Class -slug: Glossario/Class -tags: - - Classe - - Glossário -translation_of: Glossary/Class ---- -

Em {{glossary("OOP","programação orientada a objeto")}}, uma classe define as características de um {{glossary("object","objecto")}}. A classe é uma definição de  modelo de {{glossary("property","propriedades")}} e {{glossary("method","metódos")}} de um objeto, o "projeto" a partir do qual outras instâncias mais específicas do objeto são desenhados.

- -

Aprenda mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/cms/index.html b/files/pt-br/glossario/cms/index.html deleted file mode 100644 index e0501a2bbc..0000000000 --- a/files/pt-br/glossario/cms/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: CMS -slug: Glossario/CMS -tags: - - CMS - - Glossário - - Sistema de gerenciamento de conteúdo -translation_of: Glossary/CMS ---- -

O CMS da sigla em inglês( Content Management System) ou seja, Sistema de Gerenciamento de Conteúdo, é um software que permite usuários publicar, organizar, mudar ou remover vários tipos de conteúdo, não apenas textos mas também incorporação de imagens, vídeos , aúdios e códigos interativos

- -

Saiba mais

- -

Conhecimento Geral

- - - -

 

diff --git a/files/pt-br/glossario/conteiner_de_alinhamento/index.html b/files/pt-br/glossario/conteiner_de_alinhamento/index.html deleted file mode 100644 index e181c3a0ca..0000000000 --- a/files/pt-br/glossario/conteiner_de_alinhamento/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Contêiner de Alinhamento -slug: Glossario/conteiner_de_alinhamento -tags: - - Alinhamento de contêiner - - CSS - - Glossário - - alinhamento -translation_of: Glossary/Alignment_Container ---- -

O contêiner de alinhamento é um retângulo dentro do qual os tópicos de alinhamento são alinhados, isto é, definidos. Isso é definido pelo modelo de layout; geralmente é o bloco que contém o tópico de alinhamento, e assume o modo de escrita do box estabelecendo o bloco de conteúdo.

- -

Saiba mais

- - diff --git a/files/pt-br/glossario/conversao_de_tipo/index.html b/files/pt-br/glossario/conversao_de_tipo/index.html deleted file mode 100644 index 7c105b70ae..0000000000 --- a/files/pt-br/glossario/conversao_de_tipo/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Conversão de Tipo -slug: Glossario/Conversao_de_Tipo -translation_of: Glossary/Type_Conversion ---- -

Conversão de Tipo (ou typecasting) significa transferência de dados de um tipo de dado para o outro. A conversão implícita ocorre quando o compilador atribui automaticamente os tipos de dados, mas o código fonte também pode explicitamente exigir uma conversão de tipo. Por exemplo, dada a instrução 5+2.0, o float 2.0 será implicitamente convertido para integer, mas dada a instrução Number("0x11"), a string  "0x11" será explicitamente convertida para o número 17.

- -

Aprender mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/cors/index.html b/files/pt-br/glossario/cors/index.html deleted file mode 100644 index 3fbec520a7..0000000000 --- a/files/pt-br/glossario/cors/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: CORS -slug: Glossario/CORS -tags: - - Glossary - - Glossário - - Infraestrutura - - Infrastructure - - Security - - Segurança -translation_of: Glossary/CORS ---- -

CORS (Cross-Origin Resource Sharing) é um sistema que consiste na transmissão de {{Glossary("Header", "HTTP headers")}}, que determina se navegadores vão bloquear código JavaScript de acessarem respostas provindas de requisições entre origens.

- -

A same-origin security policy proíbe acesso aos recursos entre origens. Mas CORS dá aos servidores web a habilidade de dizer quando eles querem optar em permitir o acesso aos seus recursos entre origens.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Cabeçalhos CORS

- -
-
{{HTTPHeader("Access-Control-Allow-Origin")}}
-
Indica quando uma resposta pode ser compartilhada.
-
{{HTTPHeader("Access-Control-Allow-Credentials")}}
-
Indica quando uma resposta a uma requisição pode ou não ser exposta quando a bandeira de credenciais é verdadeira.
-
{{HTTPHeader("Access-Control-Allow-Headers")}}
-
Usado na resposta a uma requisição on-the-fly que indica quais cabeçalhos HTTP podem ser usados quando a requisição verdadeira for feita.
-
{{HTTPHeader("Access-Control-Allow-Methods")}}
-
Especifica o método ou métodos de acesso ao recurso na requisição on-the-fly.
-
{{HTTPHeader("Access-Control-Expose-Headers")}}
-
Indica quais cabeçalhos podem ser expostos como parte da resposta listando seus nomes.
-
{{HTTPHeader("Access-Control-Max-Age")}}
-
Indica quanto tempo os resultados da requisição on-the-fly podem ser cacheados.
-
{{HTTPHeader("Access-Control-Request-Headers")}}
-
Usado ao emitir uma requisição on-the-fly para deixar o servidor sabendo quais cabeçalhos HTTP serão utilizados quando a requisição verdadeira for feita.
-
{{HTTPHeader("Access-Control-Request-Method")}}
-
Usado ao emitir uma requisição on-the-fly para deixar o servidor sabendo qual  método HTTP será usado quando a requisição verdadeira for feita.
-
{{HTTPHeader("Origin")}}
-
Indica de onde uma busca se origina.
-
- -

Referência técnica

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/pt-br/glossario/crud/index.html b/files/pt-br/glossario/crud/index.html deleted file mode 100644 index 5a5ab4e30d..0000000000 --- a/files/pt-br/glossario/crud/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CRUD -slug: Glossario/CRUD -tags: - - Glossário - - Infraestrutura -translation_of: Glossary/CRUD ---- -

CRUD (Create, Read, Update, Delete) é um acrônimo para as maneiras de se operar em informação armazenada. É um mnemônico para as quatro operações básicas de armazenamento persistente. CRUD tipicamente refere-se a operações perfomadas em um banco de dados ou base de dados, mas também pode aplicar-se para funções de alto nível de uma aplicação, como exclusões reversíveis, onde a informação não é realmente deletada, mas é marcada como deletada via status.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/css/index.html b/files/pt-br/glossario/css/index.html deleted file mode 100644 index f3efc39ca6..0000000000 --- a/files/pt-br/glossario/css/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: CSS -slug: Glossario/CSS -tags: - - CSS - - Glossário - - Web -translation_of: Glossary/CSS ---- -

CSS (Cascading Style Sheets) é uma linguagem declarativa que controla a apresentação visual de páginas web em um {{glossary("browser","navegador")}}. O navegador aplica as declarações de estilo CSS aos elementos selecionados para exibi-los apropriadamente. Uma declaração de estilo contem as propriedades e seus valores, que determinam a aparência de uma página web.

- -

CSS é uma das três principais tecnologias Web, junto com {{Glossary("HTML")}} e {{Glossary("JavaScript")}}. CSS normalmente estiliza {{Glossary("Element","Elementos HTML")}}, mas também pode ser usada com outras linguagens de marcação como {{Glossary("SVG")}} ou {{Glossary("XML")}}.

- -

Uma regra CSS é um conjunto de {{Glossary("CSS Property","propriedades")}} associados a um {{Glossary("selector","seletor")}}. Aqui está um exemplo que faz com que todos os parágrafos HTML fiquem amarelos num fundo preto:

- -
/* O seletor "p" indica que todos os paragrafos no documento serão afetados por essa regra */
-p {
-  /* A propriedade "color" define a cor do texto, neste caso amarelo. */
-  color: yellow;
-
-  /* A propriedade "background-color" define a cor ao fundo, neste caso preto. */
-  background-color: black
-}
- -

"Cascading" ("em cascata") se refere às regras que decidem como seletores são priorizados ao mudar a aparência de uma página. Isso é uma característica muito importante, já que um website complexo pode ter milhares de regras CSS.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referências técnicas

- - - -

Aprenda CSS

- - diff --git a/files/pt-br/glossario/css_pixel/index.html b/files/pt-br/glossario/css_pixel/index.html deleted file mode 100644 index 327c7e0147..0000000000 --- a/files/pt-br/glossario/css_pixel/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Pixel CSS -slug: Glossario/CSS_pixel -tags: - - CSS - - Glossário - - Pixel CSS - - altura - - comprimento - - largura - - pixel - - tamanho - - unidade -translation_of: Glossary/CSS_pixel ---- -

O Pixel CSS - denotado no {{Glossary("CSS")}} pelo sufixo px - é uma unidade de comprimento que corresponde aproximadamente a largura ou altura de um ponto único que pode ser confortavelmente visto pelos olhos humanos sem esforço, mas é o menor possível. Por definição, esse é o tamanho físico de um único píxel em uma densidade de 96 DPI, situado a um braço de distância dos olhos do observador.

- -

Essa definição, é claro, se demonstra ser muito vaga, e termos como "confortavelmente visto" e "braço de distância" são imprecisas, variando de pessoa para pessoa. Por exemplo, quando um usuário se senta em sua mesa, defronte a sua área de trabalho, o monitor geralmente estará longe dos seus olhos enquanto ele estiver usando o celular.

- -

Assim sendo, geralmente basta dizer que quando a unidade de px é usada, o objetivo é tentar manter a distancia de 96px equivalentes a 1 polegada na tela, independentemente da densidade da tela. Em outras palavras, se o usuário está em celular com uma densidade de pixel de 266 DPI, e há um elemento colocado na tela com uma largura de 96px, então este elemento ocupará uma largura de 266px nos {{Glossary("device pixels", "pixels do dispositivo")}}.

- -

Saiba mais

- -

Referência técnica

- - - -

Aprenda sobre

- - diff --git a/files/pt-br/glossario/css_preprocessor/index.html b/files/pt-br/glossario/css_preprocessor/index.html deleted file mode 100644 index d41fb8f1a5..0000000000 --- a/files/pt-br/glossario/css_preprocessor/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Pré-processador CSS -slug: Glossario/CSS_preprocessor -tags: - - CSS - - Glossário -translation_of: Glossary/CSS_preprocessor ---- -

Um pré-processador CSS é um programa que permite você gerar {{Glossary("CSS")}} a partir de uma {{Glossary("syntax", "sintaxe")}} única desse pré-processador. Existem muitos pré-processadores CSS para escolha, no entanto, a maioria deles irá adicionar algumas funcionalidades extras que não existem no CSS puro, como um mixin, seletores aninhados, herança de seletores, e assim por diante. Essas funcionalidades fazem a estrutura do CSS mais legível e fácil de manter.

- -

Para usar um pré-processador, você deve instalar um compilador CSS no seu servidor web; Ou usar o pré-processador CSS para compilar no ambiente de desenvolvimento, e então fazer upload do arquivo CSS compilado para o servidor web.

- - diff --git a/files/pt-br/glossario/css_selector/index.html b/files/pt-br/glossario/css_selector/index.html deleted file mode 100644 index b45e0cdc77..0000000000 --- a/files/pt-br/glossario/css_selector/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Selector (CSS) -slug: Glossario/CSS_Selector -translation_of: Glossary/CSS_Selector ---- -

O seletor CSS é parte da regra do CSS que lhe permite selecionar qual elemento(s) vai receber o estilo pela regra. Por exemplo:

- -
***HTML***
-<div> Eu estou dentro do elemento. </div>
-<p> Eu estou dentro de um elemento de parágrafo. </p>
-
-
-***CSS***
-div {
- color: green;
-}
-
-p {
- color: red;
-}
-
- -

Nessa primeira regra do CSS, eu estou selecionando o elemento da div estilizando-a colorindo o texto para verde. Na segunda regra do CSS, eu estou selecionando o elemento "p" e estilizando-a colorindo o texto para vermelho. Aqui estão os resultados:

- -

CSS selector coding results

- -

 

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referência técnica

- -

{{SpecName("CSS3 Selectors")}}

diff --git a/files/pt-br/glossario/cssom/index.html b/files/pt-br/glossario/cssom/index.html deleted file mode 100644 index 834f607810..0000000000 --- a/files/pt-br/glossario/cssom/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Modelo de Objeto CSS (CSSOM) -slug: Glossario/CSSOM -tags: - - CSS - - CSSOM - - DOM - - Glossário - - Performance Web -translation_of: Glossary/CSSOM ---- -

O Modelo de Objeto CSS (CSSOM) é um mapeamento de todos os seletores CSS e propriedades relevantes para cada seletor no formato de árvore, com um nó raiz, irmão, descendente, filho e outro relacionamento. O CSSOM é muito similar ao {{glossary('DOM', 'Modelo de Objeto de Documento (DOM)')}}. Ambos são parte do caminho de renderização crítica, o qual é uma série de etapas que devem acontecer para renderizar o site corretamente.

- -

O CSSOM, junto ao DOM, para construir a árvore de renderização, que por sua vez é usada pelo navegador para apresentar e estilizar a página.

- -

CSSOM API

- -

O Modelo de Objeto CSS é também um conjunto de APIs que permitem manipulação de CSS a partir do JavaScript. É semelhante ao DOM, mas para o CSS invés de HTML. Permite os seus usuários lerem e modificar o CSS dinamicamente.

- -

Saiba mais

- - diff --git "a/files/pt-br/glossario/declara\303\247\303\243o/index.html" "b/files/pt-br/glossario/declara\303\247\303\243o/index.html" deleted file mode 100644 index aada0eeb58..0000000000 --- "a/files/pt-br/glossario/declara\303\247\303\243o/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Declaração -slug: Glossario/Declaração -tags: - - Glossário - - Iniciante - - declarações -translation_of: Glossary/Statement ---- -

Em uma linguagem de programação, uma declaração é uma linha de código que dá comando para execução de uma tarefa. Cada programa é composto por uma sequência de declarações.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referencia técnica

- - - - diff --git "a/files/pt-br/glossario/degrada\303\247\303\243o_graciosa/index.html" "b/files/pt-br/glossario/degrada\303\247\303\243o_graciosa/index.html" deleted file mode 100644 index 42655ffe1e..0000000000 --- "a/files/pt-br/glossario/degrada\303\247\303\243o_graciosa/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Degradação graciosa -slug: Glossario/degradação_graciosa -translation_of: Glossary/Graceful_degradation ---- -

Degradação graciosa é uma filosofia de design centrada na tentativa de criar um site/aplicativo moderno que funcione nos navegadores mais recentes, mas recorre a uma experiência que, embora não tão boa, ainda oferece conteúdo e funcionalidade essenciais para os navegadores antigos.

- -

{{Glossary("Polyfill","Polyfills")}} podem ser usados para criar com JavaScript recursos ausentes, mas alternativas aceitáveis para recursos como estilo e layout devem ser fornecidas sempre que possível, por exemplo, usando a cascata CSS ou o comportamento de HTML substituto. Alguns bons exemplos podem ser encontrados em Handling common HTML and CSS problems.

- -

É uma técnica útil que permite aos desenvolvedores da Web se concentrarem no desenvolvimento dos melhores sites possíveis, uma vez que esses sites são acessados por vários user-agents desconhecidos.
- {{Glossary("Progressive enhancement")}} está relacionado, mas é diferente - geralmente visto como na direção oposta à degradação graciosa. Na realidade, ambas as abordagens são válidas e geralmente podem se complementar.

- - diff --git a/files/pt-br/glossario/doctype/index.html b/files/pt-br/glossario/doctype/index.html deleted file mode 100644 index f21ccfd7fd..0000000000 --- a/files/pt-br/glossario/doctype/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Doctype -slug: Glossario/Doctype -translation_of: Glossary/Doctype ---- -

No {{Glossary("HTML")}}, o doctype é a introdução "<!DOCTYPE html>" encontrada no topo de todos os documentos. Seu único propósito é evitar que o {{Glossary("browser")}} mude para os chamados “quirks mode” quando renderizar um documento; isto é, o "<!DOCTYPE html>" doctype garante que o browser faça um esforço na tentativa de seguir as especificações relevantes, em vez de usar um modo de renderização diferente e que seja incompatível com algumas especificações.

- -

Saiba mais

- -

Conhecimento Geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/dom/index.html b/files/pt-br/glossario/dom/index.html deleted file mode 100644 index 0b6954aad3..0000000000 --- a/files/pt-br/glossario/dom/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: DOM -slug: Glossario/DOM -tags: - - DOM - - Glossário -translation_of: Glossary/DOM ---- -

O Modelo de Objeto de Documentos (do inglês Document Object Model, DOM) é uma {{Glossary("API")}} definida pelo {{Glossary("W3C")}} para representar e interagir com qualquer documento {{Glossary("HTML")}} ou {{Glossary("XML")}}.

- -

O DOM é um modelo de documento carregado pelo {{Glossary("navegador")}}. Este documento é representado através de uma árvore de nós, onde cada um destes nós representa uma parte do documento (por ex. um {{Glossary("elemento")}}, texto ou comentário).

- -

O DOM é uma das {{Glossary("API")}}s mais usadas na {{Glossary("World Wide Web","Web")}} porque ele permite que cada código rodando no {{Glossary("navegador")}} acesse e interaja com cada nó do documento.
- Os nós podem ser criados, movidos ou modificados. Listeners de evento podem também ser adicionados aos nós para serem disparados quando um dado evento ocorrer.

- -

O DOM não foi originalmente especificado. Ele apareceu quando os navegadores começaram a implementar o {{Glossary("JavaScript")}}. Este legado é às vezes chamado de DOM 0.
- Hoje o W3C conduz a especificação do DOM; e o DOM Working Group está atualmente preparando a versão 4.

- -

Saiba mais

- -

Conhecimentos Gerais

- - - -

Referência Técnica

- - diff --git "a/files/pt-br/glossario/dom\303\255nio/index.html" "b/files/pt-br/glossario/dom\303\255nio/index.html" deleted file mode 100644 index 11aceba517..0000000000 --- "a/files/pt-br/glossario/dom\303\255nio/index.html" +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Domínio -slug: Glossario/Domínio -tags: - - Domínio - - Glossário - - Infraestrutura - - Navegador - - Networking -translation_of: Glossary/Domain ---- -

Um domínio é uma autoridade na internet que controla seus próprios recursos. Seu "nome de domínio" é uma forma de endereçar essa autoridade como parte da hierarquia de uma {{Glossary("URL")}} — normalmente a parte mais memorável dela, por exemplo por ser uma marca.

- -

Um nome de domínio totalmente qualificado (FQDN — sigla em inglês) contém todas as partes necessárias para pesquisar essa autoridade pelo seu nome, sem ambiguidade, usando o sistema {{Glossary("DNS")}} da internet.

- -

Por exemplo, em "developer.mozilla.org":

- -
    -
  1. "org" é chamado de {{interwiki("wikipedia", "Top-level_domain", "domínio de alto nível")}}. Eles são registrados como um padrão da internet pela {{interwiki("wikipedia", "Internet_Assigned_Numbers_Authority", "IANA - autoridade de atribuição de números da internet")}}. Aqui "org" significa "organização" que está definido num registro de domínio de alto nível.
    2. -
  2. "mozilla" é o domínio. Se você quiser ter um domínio, você precisa registrá-lo com algum dos muitos {{interwiki("wikipedia", "Domain_name_registrar", "registrars - registradores")}} que são quem tem permissão para fazer isso num registro de domínio de alto nível.
    3. -
  3. "developer" é um "sub-domínio", algo que você como dono de um domínio pode definir sozinho. Muitos donos de domínio escolhem ter um subdomínio "www" apontando para o recurso {{Glossary("World_Wide_Web")}}, mas isso não é obrigatório (e tem caído em desuso).
    4. -
- -

Saiba mais

- - diff --git a/files/pt-br/glossario/ecma/index.html b/files/pt-br/glossario/ecma/index.html deleted file mode 100644 index 4e51c82b8c..0000000000 --- a/files/pt-br/glossario/ecma/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ECMA -slug: Glossario/ECMA -tags: - - Glossário - - Mecanismos Web -translation_of: Glossary/ECMA ---- -

Ecma International (oficialmente Associação Européia dos Fabricantes de Computadores) é uma organização sem fins lucrativos que desenvolve os padrões para hardware de computadores, comunicações e linguagens de programação.

- -

Na web ela é famosa por ser a organização que mantém a especificação ECMA-262 (também conhecida por {{Glossary("ECMAScript")}}), que é a especificação núcleo para a linguagem {{Glossary("JavaScript")}}.

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/elemento/index.html b/files/pt-br/glossario/elemento/index.html deleted file mode 100644 index 70420db414..0000000000 --- a/files/pt-br/glossario/elemento/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Elemento -slug: Glossario/Elemento -tags: - - Codificação de Scripts - - Glossário - - HTML -translation_of: Glossary/Element ---- -

Um elemento é parte de uma página web. Em XML e HTML, um elemento pode conter um item de dados, ou um bloco de texto, ou uma imagem, ou talvez nada. Um elemento típico inclui uma tag de abertura com alguns atributos, o conteúdo de texto incluído e uma tag de fechamento.
- Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

- -

Elementos e tags não são a mesma coisa. As tags começam ou terminam um elemento no código fonte, enquanto os elementos são parte do {{Glossary("DOM")}}, o modelo do documento para exibir a página no {{glossary("browser", "navegador")}}.

- -

Veja também

- - diff --git a/files/pt-br/glossario/endereco_ip/index.html b/files/pt-br/glossario/endereco_ip/index.html deleted file mode 100644 index a6d7fb91c1..0000000000 --- a/files/pt-br/glossario/endereco_ip/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Endereço IP -slug: Glossario/Endereco_IP -tags: - - Glossário - - Infraestrutura - - Iniciante - - Web -translation_of: Glossary/IP_Address ---- -

Um endereço IP é um número atribuído a cada dispositivo conectado a uma rede que usa o protocolo de Internet.

- -

"Endereço IP" geralmente refere-se a endereços  {{Glossary("IPv4")}} de 32 bits até que o {{Glossary("IPv6")}} seja implantado de forma mais ampla.

- -

Saiba mais

- -

General knowledge

- - diff --git a/files/pt-br/glossario/endianness/index.html b/files/pt-br/glossario/endianness/index.html deleted file mode 100644 index f08312ce91..0000000000 --- a/files/pt-br/glossario/endianness/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Endianness -slug: Glossario/Endianness -tags: - - Coding - - CodingScripting - - Glossary -translation_of: Glossary/Endianness ---- -

"Endian" and "endianness" (ou "ordem-de-bytes") descrevem como os computadores organizam os bytes que compõem os números.

- -

Cada local de armazenamento de memória possui um indice ou endereço. Cada byte pode ser armazenado em um numero de 8-bits (ou seja, entre 0x00 e 0xff), então você deve reservar mais que um byte para armazenar um numero maior. De longe, o mais comum na ordenação de múltiplos bytes em um único número é o little-endian, que é usado em todos os processadores Intel. Little-endian significa armazenar bytes na ordem do menor para o mais significativo (onde o byte menos significativo ocupa o primeiro, ou menor, endereço), comparável a maneira comum de escrever datas na Europa (por exemplo, 31 Dezembro de 2050).

- -

Naturalmente, big-endian é a ordem oposta, comparável a uma data ISO (2050-12-31). Big-endian é frequentemente chamada de "ordem de bytes de rede", por que os padrões da internet geralmente exigem que os dados sejam armazenados em big-endian, começando pelo nivel padrão do socket UNIX e indo a todas as estruturas padronizadas de dados binários da Web. Além disso, os computadores Mac mais antigos, que usam a série 68000 e microprocessadores PowerPC, usavam o big-endian.

- -

Exemplos com o numero 0x12345678 (ou seja, 305 419 896 em decimal):

- - - -

Veja também

- - diff --git a/files/pt-br/glossario/entity_header/index.html b/files/pt-br/glossario/entity_header/index.html deleted file mode 100644 index 8c49620d03..0000000000 --- a/files/pt-br/glossario/entity_header/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Cabeçalho de entidade -slug: Glossario/Entity_header -translation_of: Glossary/Entity_header ---- -

Um cabeçalho de entidade é um {{glossary("header", "HTTP header")}} descrevendo o conteúdo do corpo da mensagem. Cabeçalhos da entidade são usados em ambos, respostas e requerimentos HTTP. Cabeçalhos como {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} são cabeçalhos de entidade.

- -

Mesmo se cabeçalhos de entidade não sejam requerimentos ou cabeçalhos de resposta, eles são muitas vezes incluídos nestes termos.

- -

No exemplo a seguir, {{HTTPHeader("Content-Length")}} é um cabeçalho de entidade, enquanto {{HTTPHeader("Host")}} e {{HTTPHeader("User-Agent")}} são {{glossary("request header", "request headers")}}:

- -
POST /myform.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Content-Length: 128
- -

Aprenda mais

- -

Conhecimento técnico

- - diff --git a/files/pt-br/glossario/escopo/index.html b/files/pt-br/glossario/escopo/index.html deleted file mode 100644 index 5dc1b896c0..0000000000 --- a/files/pt-br/glossario/escopo/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Escopo -slug: Glossario/Escopo -tags: - - Glossary -translation_of: Glossary/Scope ---- -

É o contexto atual de {{glossary("execute","execução")}}, em que {{glossary("valor","valores")}} e expressões são "visíveis" ou podem ser referenciadas. Se uma variável ou outra expressão não estiver "no escopo atual", então não está disponível para uso. Os escopos também podem ser em camadas em uma hierarquia, de modo que os escopos filhos tenham acesso aos escopos pais, mas não vice-versa.

- -

Uma {{glossary("function")}} serve como um procedimento em {{glossary("JavaScript")}}, e portanto, cria um escopo, de modo que (por exemplo) uma variável definida exclusivamente dentro da função não pode ser acessada de fora da função ou dentro de outras funções.

- -

Aprender mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/falsy/index.html b/files/pt-br/glossario/falsy/index.html deleted file mode 100644 index 977b819979..0000000000 --- a/files/pt-br/glossario/falsy/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Falsy -slug: Glossario/Falsy -translation_of: Glossary/Falsy ---- -

Um valor falsy é um valor que se traduz em falso quando avaliado em um contexto {{Glossary("Boolean")}}.

- -

{{Glossary("JavaScript")}} usa tipo {{Glossary("Type_Conversion", "coercion")}} em contextos booleanos.

- -

Exemplos de valores falsy em JavaScript (que se traduzirá em false e assim ignorar o bloco if):

- -
if (false)
-if (null)
-if (undefined)
-if (0)
-if (NaN)
-if ('')
-if (document.all) [1]
- -

[1] document.all tem sido utilizado para a detecção do navegador no passado e a especificação HTML define uma violação intencional do padrão ECMAScript aqui para manter a compatibilidade com código legado (if (document.all) { // Internet Explorer code here } ou usando document.all sem verificar sua presença em primeiro lugar: document.all.foo).

- -

Aprender mais

- - diff --git a/files/pt-br/glossario/flex/index.html b/files/pt-br/glossario/flex/index.html deleted file mode 100644 index 08bd53ec1a..0000000000 --- a/files/pt-br/glossario/flex/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Flex -slug: Glossario/Flex -translation_of: Glossary/Flex ---- -

flex é um novo valor adicionado à propriedade {{cssxref("display")}}. Junto com o inline-flex, este valor faz com que o elemento aplicado seja um {{glossary("flex container")}}, e seus filhos se transformem então em {{glossary("flex item")}}.Os itens então farão parte de um layout flex, e todas as propriedades definidas no CSS Flexbox poderão ser aplicadas.

- -

A propriedade flex é um atalho para as propriedades flexboxflex-grow, flex-shrink e flex-basis.

- -

Além disso, <flex> pode ser também uma unidade flexível em um CSS Grid Layout.

- -

Veja mais

- -

Referências

- -
- -
- -

Leitura complementar

- - diff --git a/files/pt-br/glossario/forbidden_header_name/index.html b/files/pt-br/glossario/forbidden_header_name/index.html deleted file mode 100644 index 0eef8a148a..0000000000 --- a/files/pt-br/glossario/forbidden_header_name/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Nome de cabeçalho proibido -slug: Glossario/Forbidden_header_name -translation_of: Glossary/Forbidden_header_name ---- -

Um nome de cabeçalho proibido é o nome de qualquer cabeçalho HTTP que não pode ser modificado programaticamente; especificamente, um nome de cabeçalho de solicitação HTTP (em contraste com um {{Glossary("Forbidden response header name")}}).

- -

Modificar esses cabeçalhos é proibido porque o agente do usuário retém o controle total sobre eles. Nomes começando com ` Sec-` são reservados para criar novos cabeçalhos seguros de {{glossary("API","APIs")}} usando Fetch que concedem aos desenvolvedores controle sobre cabeçalhos, como {{domxref("XMLHttpRequest")}}.

- -

Nomes de cabeçalho proibidos começam com Proxy-ou Sec-, ou são um dos seguintes nomes:

- - - -
-

Nota: O cabeçalho User-Agent não é mais proibido, de acordo com a especificação - consulte a lista de nomes de cabeçalhos proibidos (isso foi implementado no Firefox 43) - agora ele pode ser definido em um objeto e busca de Headers, ou via XHR setRequestHeader().

-
diff --git a/files/pt-br/glossario/forbidden_response_header_name/index.html b/files/pt-br/glossario/forbidden_response_header_name/index.html deleted file mode 100644 index 4acb9a5835..0000000000 --- a/files/pt-br/glossario/forbidden_response_header_name/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Forbidden response header name -slug: Glossario/Forbidden_response_header_name -tags: - - Glossário - - HTTP - - Response - - forbidden -translation_of: Glossary/Forbidden_response_header_name ---- -

Um nome de cabeçalho de resposta proibido é um  nome de cabeçalho HTTP  (ou `Set-Cookie` ou ` Set-Cookie2`) que não pode ser modificado programaticamente.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}}{{Spec2('Fetch')}} 
diff --git a/files/pt-br/glossario/funcao-first-class/index.html b/files/pt-br/glossario/funcao-first-class/index.html deleted file mode 100644 index 552b841dfa..0000000000 --- a/files/pt-br/glossario/funcao-first-class/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Função First-class -slug: Glossario/Funcao-First-class -translation_of: Glossary/First-class_Function ---- -

Entede-se que uma linguagem de programação tem Função First-class quando suas funções são tratadas como qualquer outra variável. Por exemplo, numa linguagem desse tipo, a função pode ser passada como argumento pra outras funções, ser retornada por outra função e pode ser atribuída como um valor à uma variável.

- -

Exemplo | Atribuir uma função à uma variável

- -

JavaScript

- -
const foo = function() {
-   console.log("foobar");
-}
-// Chamar a função usando a variável
-foo();
-
- -

Nós atribuímos uma Função Anônima à uma Variável, então usamos a variável pra chamar a função adicionando parênteses () no fim.

- -
-

Mesmo se sua função for nomeada, você pode usar o nome da variável pra chamá-la. Nomeá-la será útil quando for debugar seu código. Mas não afetará a maneira que à chamamos.

-
- -

Exemplo | Passar uma função como um Argumento

- -

JavaScript

- -
function sayHello() {
-   return "Hello, ";
-}
-function greeting(helloMessage, name) {
-  console.log(helloMessage() + name);
-}
-// Passar `sayHello` como um argumento pra função `greeting`
-greeting(sayHello, "JavaScript!");
-
- -

Nós estamos passando a função sayHello() como um argumento pra função greeting(), isso explica como estamos tratando a função como um valor.

- -
-

A função que passamos como um argumento pra outra função, chamou uma Função Callback. sayHello é uma Função Callback.

-
- -

Exemplo | Retornar uma função

- -

JavaScript

- -
function sayHello() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-
- -

Neste exemplo; Precisamos retornar uma função de outra função - Podemos retornar uma função porque tratamos função em JavaScript como um valor.

- -
-

Uma função que retorna uma função é chamada de Higher-Order Function

-
- -

De volta ao nosso exemplo; Agora, precisamos chamar a função sayHello e a Função anônima retornada. Existem duas maneiras para fazermos isso:

- -

1- Usando uma variável

- -
const sayHello = function() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-const myFunc = sayHello();
-myFunc();
-
- -

Dessa maneira, ela retorna a mensagem Hello!.

- -
-

Você tem que usar outra variável. Se você fosse chamar sayHello diretamente, ela retornaria a função em si sem chamar a função retornada.

-
- -

2- Usando parênteses duplo

- -
function sayHello() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-sayHello()();
-
- -

Estamos usando parênteses duplo ()() pra chamar também a função retornada.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git "a/files/pt-br/glossario/fun\303\247\303\243o/index.html" "b/files/pt-br/glossario/fun\303\247\303\243o/index.html" deleted file mode 100644 index e3a195cabd..0000000000 --- "a/files/pt-br/glossario/fun\303\247\303\243o/index.html" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Função -slug: Glossario/Função -tags: - - Glossário - - Iniciante - - Intro - - JavaScript -translation_of: Glossary/Function ---- -

 

- -

Uma função (function) é um fragmento de código que pode ser invocado por outro código, por si mesmo ou uma {{Glossary ("variável")}} que se refere à função. Quando uma função é invocada, o {{Glossary ("Argument", "argumento")}} é passado para a função como input (entrada) e a função pode opcionalmente retornar um output (saída). Uma função em {{glossary ("JavaScript")}} também é um {{glossary ("objeto")}}.

- -

O nome da função é um {{Glossary ("identificador")}} declarado como parte de uma declaração de função ou expressão de função. O nome da função {{Glossary ("escopo")}} depende se o nome da função é uma declaração ou expressão.

- -

Diferentes tipos de funções

- -

Uma função anônima é uma função sem o nome da função:

- -
function () {};
-// or using the ECMAScript 2015 arrow notation
-() => {};
-
- -

 

- -

Uma função nomeada é uma função com o nome da função:

- -
function foo() {};
-// or using the ECMAScript 2015 arrow notation
-const foo = () => {};
-
- -

Uma função interna é uma função dentro de outra função (square nesse caso). Uma função externa é uma função contendo uma função (addSquares nesse caso):

- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-};
-//Using ECMAScript 2015 arrow notation
-const addSquares = (a,b) => {
-   const square = x => x*x;
-   return square(a) + square(b);
-};
-
- -

Uma função recursiva é uma função que invoca a si mesma. Veja {{Glossary("Recursão", "recursão")}}.

- -
function loop(x) {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
-//Using ECMAScript 2015 arrow notation
-const loop = x => {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
-
- -

Uma Expressão de Função Invocada Imediatamente (IIFE em Inglês) é uma função que é invocada diretamente após a função ser carregada no compilador do navegador. A maneira de identificar um IIFE é localizar os parênteses extra esquerdo e direito no final da declaração da função.

- -
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-/*
-​function foo() {
-    console.log('Hello Foo');
-}();
-*/
-
-(function foo() {
-    console.log("Hello Foo");
-}());
-
-(function food() {
-    console.log("Hello Food");
-})();
-
-
- -

Se gostaria de saber mais sobre o IIFE, confira a seguinte página no Wikipédia : Immediately Invoked Function Expression

- -

Leia mais

- -

Referência técnica

- - diff --git a/files/pt-br/glossario/fuzzing/index.html b/files/pt-br/glossario/fuzzing/index.html deleted file mode 100644 index 6d6a97581a..0000000000 --- a/files/pt-br/glossario/fuzzing/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Teste de Fuzzing -slug: Glossario/Fuzzing -tags: - - Firefox - - Fuzzing - - Mozilla - - QA - - Segurança - - Teste -translation_of: Glossary/Fuzzing ---- -

O Fuzzing é uma técnica para testar o software usando ferramentas automáticas para fornecer entradas inválidas ou inesperadas para um programa ou função em um programa, logo verificando os resultados para ver se o programa falha ou age de forma inapropriada. Essa é uma forma importante para garantir que o software está estável, confiável e seguro, e nós usamos muito o fuzzing no Mozilla.

- - diff --git a/files/pt-br/glossario/gecko/index.html b/files/pt-br/glossario/gecko/index.html deleted file mode 100644 index 4de4954dda..0000000000 --- a/files/pt-br/glossario/gecko/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Gecko -slug: Glossario/Gecko -tags: - - Firefox OS - - Gecko - - Glossary - - Infrastructure - - Intro - - Mozilla -translation_of: Glossary/Gecko ---- -

Gecko é um motor de layout desenvolvido pela Mozilla Project e utilizado em vários apps/dispositivos, incluindo {{glossary("Mozilla Firefox","Firefox")}} e {{glossary("Firefox OS")}}.

- -

Web {{glossary("browser","browsers")}} precisam de um software chamado de motor de layout para interpretar {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}}, e conteúdos embutidos (como imagens) e desenhar tudo para a sua tela. Apesar disso, Gecko garante que {{glossary("API","APIs")}} associadas funcionem bem em qualquer sistema operacional que o Gecko suporte, e que APIs apropriadas sejam expotas somente aos alvos relevantes. Isso significa que o Gecko inclui, além de outras coisas, uma pilha de conexão de rede, pilha gráfica, motor de layout, uma máquina virtual de JavaScript  e portando camadas.

- -

Como todos os aplicativos do Firefox OS são Web apps, o Firefox OS usa o Gecko como seu aplicativo de execução também.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referência técnica

- - - -


-  

diff --git a/files/pt-br/glossario/general_header/index.html b/files/pt-br/glossario/general_header/index.html deleted file mode 100644 index c86f962300..0000000000 --- a/files/pt-br/glossario/general_header/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Cabeçalho Genérico -slug: Glossario/General_header -translation_of: Glossary/General_header ---- -

Um cabeçalho genérico  é um {{glossary('Header', ' cabeçalho HTTP')}} que pode ser de mensagens de solicitação e resposta, mas isso não é aplicado ao seu conteúdo. De acordo com o contexto em que são usados, podem ser cabeçalho de {{glossary("Response header", "resposta")}} ou de {{glossary("request header", "Requisição")}}. Entranto, não são {{glossary("entity header", "cabeçalhos de entidade")}}.

- -

O uso mais comum para cabeçalho genérico é {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.

diff --git a/files/pt-br/glossario/global_object/index.html b/files/pt-br/glossario/global_object/index.html deleted file mode 100644 index 85302bf2cc..0000000000 --- a/files/pt-br/glossario/global_object/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Global object -slug: Glossario/Global_object -translation_of: Glossary/Global_object ---- -

Um objeto global é um {{Glossary("objeto")}} que sempre está definido no {{Glossary("escopo global")}}.

- -

Em JavaScript, um objeto global é sempre definido. No browser, quando scripts criam variáveis globais, elas são criadas como membros desse objeto global (Em {{Glossary("Node.js")}} isso não se aplica). A {{Glossary("interface")}} do objeto global depende do contexto de execução no qual o script está sendo executado. Por exemplo:

- - diff --git a/files/pt-br/glossario/grade/index.html b/files/pt-br/glossario/grade/index.html deleted file mode 100644 index ee60bf19a9..0000000000 --- a/files/pt-br/glossario/grade/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Grade -slug: Glossario/Grade -translation_of: Glossary/Grid ---- -

Uma grade no CSS é definida usando o valor grid da propriedade {{cssxref("display")}}; você pode definir colunas e linhas na sua grade usando as propridades {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}.

- -

A grade que você define usando essas propriedades é descrita como uma grade explícita.

- -

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais {{glossary("grid tracks", "tracks")}} para manter {{glossary("grid item", "grid items")}}, então serão criadas faixas extras na grade implícita. A grade implícita é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

- -

No exemplo abaixo, criamos uma grade explícita de três colunas e duas linhas. A terceira linha da grade é uma faixa implícita de linha da grade, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 100px 100px;
-}
-
- -
<div class="wrapper">
-<div> Um </div>
-    <div> dois </div>
-    <div> três </div>
-    <div> quatro </div>
-    <div> cinco </div>
-    <div> seis </div>
-    <div> sete </div>
-    <div> oito </div>
-</div>
-
-
- -

{{ EmbedLiveSample('example', '500', '330') }}

- - diff --git a/files/pt-br/glossario/grid_areas/index.html b/files/pt-br/glossario/grid_areas/index.html deleted file mode 100644 index 0e9969dd3d..0000000000 --- a/files/pt-br/glossario/grid_areas/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Grid Areas -slug: Glossario/Grid_Areas -translation_of: Glossary/Grid_Areas ---- -

Um  grid area  é um ou mais {{glossary("grid cell", "grid cells")}} que compõem uma área retangular do grid.  As Grid Areas quando se coloca um item  usando line-based placement (posicionamento baseado em colunas e linha)ou quando define áreas usando named grid areas(substituindo o nome).

- -

Image showing a highlighted grid area

- -

Áreas do Grid devem ser de natureza regutangular; não é possível criar por exemplo uma área de grid em forma de T ou L .

- -

No exemplo abaixo temos um grid contêiner com dois items de grid, nomeamos esses com a propriedade {{cssxref("grid-area")}} e em seguida colocamos eles no grid usando {{cssxref("grid-template-areas")}}. Isso  cria duas áreas de grid, uma cobrindo 4 áreas do grid e a outra duas áreas do grid.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  grid-template-rows: 100px 100px;
-  grid-template-areas:
-    "a a b"
-    "a a b";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-
- -
<div class="wrapper">
-   <div class="item1">Item</div>
-   <div class="item2">Item</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '300', '280') }}

-
- -

Saiba Mais

- -

Property reference

- - - -

Further reading

- - diff --git a/files/pt-br/glossario/hoisting/index.html b/files/pt-br/glossario/hoisting/index.html deleted file mode 100644 index a60854cad1..0000000000 --- a/files/pt-br/glossario/hoisting/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Hoisting -slug: Glossario/Hoisting -translation_of: Glossary/Hoisting ---- -

Hoisting (içamento, em português) é um termo que você não encontrará usado em nenhuma prosa de especificação normativa antes da especificação de idioma do ECMAScript® 2015. Hoisting foi pensado como uma maneira geral de pensar sobre como os contextos de execução (especificamente as fases de criação e execução) funcionam em JavaScript. No entanto, o conceito pode ser um pouco confuso a princípio.

- -

Conceitualmente, por exemplo, uma definição estrita de elevação sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código, mas isso não é realmente o que acontece. Em vez disso, as declarações de variável e função são colocadas na memória durante a fase de compilação, mas permanecem exatamente onde você as digitou no seu código.

- -

Aprenda mais

- -

Exemplo técnico

- -

Variáveis:

- -

Uma das vantagens do JavaScript em colocar declarações de função na memória antes de executar qualquer segmento de código é que ele permite que você use uma função antes de declara-la em seu código. Por exemplo:

- -
function catName(name) {
-  console.log("O nome do meu gato é " + name);
-}
-
-catName("Tigger");
-
-/*
-O resultado do código acima é: "O nome do meu gato é Tigger"
-*/
-
- -

O trecho de código acima é como você escreveria o código para que ele funcionasse. Agora, vamos ver o que acontece quando chamamos a função antes de escrevê-la:

- -
catName("Chloe");
-
-function catName(name) {
-  console.log("O nome do meu gato é " + name);
-}
-/*
-O resultado do código acima é: "O nome do meu gato é Chloe"
-*/
-
- -

Mesmo que chamemos a função em nosso código primeiro, antes que a função seja escrita, o código ainda funciona. Isto ocorre por conta de como a execução de contexto funciona em JavaScript.

- -

Hoisting funciona bem com outros tipos de dados e variáveis. As variáveis podem ser inicializadas e usadas antes de serem declaradas.

- -

Apenas declarações são hoisted(içadas, em português)

- -

O JavaScript apenas eleva (hoists) as declarações, não as inicializações. Se uma variável for declarada e inicializada após usá-la, o valor será undefined. Por exemplo:

- -
console.log(num); // Retorna undefined
-var num;
-num = 6;
- -

Se você declarar a variável depois que ela for usada, mas inicializá-la antecipadamente, ela retornará o valor:

- -
num = 6;
-console.log(num); // retorna 6
-var num;
-
- -

Abaixo estão mais exemplos demonstrando a elevação (hoisting).

- -
//Exemplo 1 - Não eleva (hoist)
-var x = 1; // Inicializa x
-console.log(x + " " + y); // '1 undefined'
-var y = 2; // Initialize y
-//Isso não funcionará, pois o JavaScript apenas eleva declarações
-
-//Example 2 - Hoists
-var num1 = 3; //Declara e inicializa num1
-num2 = 4; //Inicializa num2
-console.log(num1 + " " + num2); //'3 4'
-var num2; //Declara num2 para hoisting
-
-//Example 3 - Hoists
-a = 'Cran'; //Inicializa a
-b = 'berry'; //Inicializa b
-console.log(a + "" + b); // 'Cranberry'
-var a, b; //Declara ambos a & b para hoisting
-
- -

Referência técnica

- - diff --git a/files/pt-br/glossario/hsts/index.html b/files/pt-br/glossario/hsts/index.html deleted file mode 100644 index 0ea7646bd3..0000000000 --- a/files/pt-br/glossario/hsts/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: HSTS -slug: Glossario/HSTS -tags: - - HSTS - - HTTP - - Segurança -translation_of: Glossary/HSTS ---- -

O HTTP Strict Transport Security permite que um site informe ao navegador que ele nunca deve carregar o site usando HTTP e deve converter automaticamente todas as tentativas de acessar o site usando HTTP para solicitações HTTPS. Consiste em um cabeçalho HTTP Strict-Transport-Security, enviado de volta pelo servidor com o recurso.

- -

Em outras palavras, ele diz ao navegador que apenas altere o protocolo de HTTP para HTTPS em uma url (e será mais seguro) e solicitará que o navegador faça isso para cada solicitação.

- -

 

- -
-

Leia Mais

- - -
diff --git a/files/pt-br/glossario/html/index.html b/files/pt-br/glossario/html/index.html deleted file mode 100644 index ed6e0dfc0d..0000000000 --- a/files/pt-br/glossario/html/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: HTML -slug: Glossario/HTML -tags: - - Glossário - - HTML - - Web - - scripts -translation_of: Glossary/HTML ---- -

HTML (HyperText Markup Language) é uma linguagem descritiva que especifica a estrutura de uma página web.

- -

Breve história

- -

Em 1990, Tim Berners-Lee definiu o conceito de {{glossary("hipertexto")}} como parte de sua visão da {{glossary("World Wide Web","Web")}} , a qual Berners-Lee formalizou no ano seguinte através de uma marcação baseada em {{glossary("SGML")}}. O {{glossary("IETF")}} começou a especificar formalmente o HTML em 1993, e depois de vários rascunhos, lançou a versão 2.0 em 1995. Em 1994 Berners-Lee fundou a  {{glossary("W3C")}} para desenvolver a Web. Em 1996, a W3C assumiu o HTML e publicou a recomendação HTML 3.2 um ano depois. A recomendação HTML 4.0 foi lançada em 1999 e se tornou um padrão {{glossary("ISO")}} em 2000.

- -

Nesse momento, a W3C quase abandonou o HTML em favor do  {{glossary("XHTML")}}, levando a fundação de um grupo independente chamado de {{glossary("WHATWG")}} em 2004. Graças ao WHATWG, o trabalho em {{glossary("HTML5")}} continuou: as duas organizações lançaram o primeiro rascunho em 2008 e o padrão final em 2014.

- -

Conceito e sintaxe

- -

Um documento HTML é um documento de texto simples estruturado com {{glossary("element","elementos")}}. Elementos são acompanhados de abertura e fechamento de {{Glossary("tag","tags")}}. Cada tag começa e termina com colchetes angulares (<>). Existem algumas tags vazias ou sem conteúdo que não podem incluir qualquer texto, como por exemplo a tag {{htmlelement("img")}}.

- -

Você pode estender tags HTML com {{Glossary("attribute","atributos")}}, os quais fornecem informações adicionais que afetam como o navegador interpreta o elemento:

- -

Detalhes da estrutura de um elemento HTML

- -

Um arquivo HTML normalmente é salvo com uma extensão .htm ou .html, é disponibilizado por um {{Glossary("Server","servidor web")}}, e pode ser renderizado por qualquer {{Glossary("Browser","navegador")}}.

- -

Leia mais

- -

Conhecimento Geral

- - - -

Aprendendo HTML

- - - -

Referência Técnica

- - diff --git a/files/pt-br/glossario/http/index.html b/files/pt-br/glossario/http/index.html deleted file mode 100644 index 6e3ea45f9c..0000000000 --- a/files/pt-br/glossario/http/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: HTTP -slug: Glossario/HTTP -tags: - - Glossário - - HTTP - - Infraestrutura - - Iniciante - - Protocolos -translation_of: Glossary/HTTP ---- -

 

- -

HTTP (HyperText Transfer Protocol) é o {{glossary("protocolo")}} básico que habilita a transferência de arquivos na {{glossary("World Wide Web","Web")}}, normalmente entre um navegador e um servidor para que os humanos possam lê-los. A versão atual da especificação HTTP é chamada HTTP / 2.

- -

Como parte de um {{glossary("URI")}}, o "http: //" é chamado de "esquema" e geralmente fica no início de um endereço, por exemplo em "https://developer.mozilla.org" para indicar ao navegador que solicite o documento usando o protocolo HTTP. O https neste caso refere-se à versão segura do protocolo HTTP, {{glossary("SSL")}} (também chamado TLS).

- -

O HTTP é textual (toda a comunicação é feita em texto simples) e sem estado (nenhuma comunicação está ciente das comunicações anteriores). Esta propriedade torna ideal para humanos ler documentos (sites) na web. No entanto, o HTTP também pode ser usado como base para os serviços da Web {{glossary("REST")}} de servidor para servidor ou solicitações {{glossary("AJAX")}} dentro de sites para torná-los mais dinâmicos.

- -
-

Leia mais

- - -
- -

 

diff --git a/files/pt-br/glossario/http_2/index.html b/files/pt-br/glossario/http_2/index.html deleted file mode 100644 index d1884d16d3..0000000000 --- a/files/pt-br/glossario/http_2/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: HTTP/2 -slug: Glossario/HTTP_2 -tags: - - Glossário - - HTTP - - Infraestrutura - - Performance na Web - - Referencia - - 'l10n:prioridade' -translation_of: Glossary/HTTP_2 ---- -

HTTP/2 é a principal revisão do protocolo de rede HTTP. Os princiais objetivos do HTTP/2 são reduzir a latência, permitindo a multiplexação total das requisições e respostas, minimizar a sobrecarga do protocolo por meio da compactação eficiente dos campos do cabeçalho HTTP e adicionar suporte para priorização de requisições e notificações dos servidores.

- -

HTTP/2 não modifica a semântica de aplicativo do HTTP de nenhuma maneira. Todos os principais conceitos encontrados no HTTP 1.1, como métodos HTTP, códigos de status, URIs e campos de cabeçalho, permanecem no lugar. Em vez disso, o HTTP/2 modifica como os dados são formatados (enquadrados) e transportados entre o cliente e o servidor, sendo que ambos gerenciam todo o processo e ocultam a complexidade do aplicativo na nova camada de enquadramento. Como resultado, todas as aplicações existentes podem ser entregues sem modificação.

- -

Veja também

- - diff --git a/files/pt-br/glossario/https/index.html b/files/pt-br/glossario/https/index.html deleted file mode 100644 index 577c1d37c8..0000000000 --- a/files/pt-br/glossario/https/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: HTTPS -slug: Glossario/https -tags: - - Glossário - - HTTPS - - Infraestrutura - - Segurança -translation_of: Glossary/https ---- -

HTTPS (HTTP Secure) é uma versão do protocolo {{Glossary("HTTP")}} criptografado. É normalmente usado {{Glossary("SSL")}} ou {{Glossary("TLS")}} para criptografar toda a comunicação entre um cliente e um servidor. Essa conexão segura permite aos clientes trocar com segurança dados confidenciais com o servidor, por exemplo, para atividades bancárias ou compras online.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/idempotente/index.html b/files/pt-br/glossario/idempotente/index.html deleted file mode 100644 index 8966157c34..0000000000 --- a/files/pt-br/glossario/idempotente/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Idempotente -slug: Glossario/Idempotente -tags: - - Glossary - - Glossário - - Mecânicas da Web - - WebMechanics -translation_of: Glossary/Idempotent ---- -

Um método HTTP é idempotente se uma requisição idêntica pode ser feita uma ou mais vezes em sequência com o mesmo efeito enquanto deixa o servidor no mesmo estado. Em outras palavras, um método idempotente não deveria possuir nenhum efeito colateral (exceto para manter estatísticas). Implementados corretamente, o {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, e {{HTTPMethod("DELETE")}} são métodos idempotentes, mas não o método {{HTTPMethod("POST")}}. Todos os métodos  {{glossary("seguro")}}s também são idempotentes.

- -

Para ser idempotente, somente o estado atual do back-end de um servidor deve ser considerado, o código de status retornado por cada requisição pode variar: a primeira chamada de um {{HTTPMethod("DELETE")}} vai provavelmente retornar um {{HTTPStatus("200")}}, enquanto as chamadas sucessivas vão provavelmente retornar {{HTTPStatus("404")}}. Outra implicação do {{HTTPMethod("DELETE")}} ser idempotente é de que os desenvolvedores não deveriam implementar APIs RESTful com a funcionalidade de deleção de última entrada usando o método DELETE.

- -

Note que a idempotência de um método não é garantida pelo servidor, algumas aplicações também podem quebrar a constante de idempotência.

- -

GET /pageX HTTP/1.1 é idempotente. Chamado diversas vezes em sequência, ele vai retornar o mesmo resultado:

- -
GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-
- -

POST /add_row HTTP/1.1 não é idempotente. Se ele for chamado diversas vezes, ele adicionará novas entradas:

- -
POST /add_row HTTP/1.1
-POST /add_row HTTP/1.1   -> Adiciona a 2ª linha
-POST /add_row HTTP/1.1   -> Adiciona a 3ª linha
-
- -

DELETE /idX/delete HTTP/1.1 é idempotente, mesmo que o código de status mude entre requisições:

- -
DELETE /idX/delete HTTP/1.1   -> Retorna 200 se idX existe
-DELETE /idX/delete HTTP/1.1   -> Returna 404 como ele acabou de ser deletado
-DELETE /idX/delete HTTP/1.1   -> Returna 404
- -

Aprenda mais

- -

Conhecimento geral

- - - -

Conhecimento técnico

- - diff --git a/files/pt-br/glossario/identificador/index.html b/files/pt-br/glossario/identificador/index.html deleted file mode 100644 index a94516e145..0000000000 --- a/files/pt-br/glossario/identificador/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Identificador (Identifier) -slug: Glossario/Identificador -tags: - - Compatilhando - - Glossário - - Iniciante -translation_of: Glossary/Identifier ---- -

Uma sequência de caracteres no código, que identifica uma {{glossary("variável")}}, {{glossary("função")}}, ou {{glossary("propriedade")}}.

- -

Em {{glossary("JavaScript")}}, identificadores podem conter somente caracteres alfanuméricos (ou "$" ou "_"), e não podem iniciar com um dígito. Um identificador difere de uma string no sentido de que uma string é informação, enquanto um identificador é parte do código. Em JavaScript, não existe uma forma de converter identificadores para strings, mas as vezes é possível converter strings em identificadores.

- -

Saiba mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/iife/index.html b/files/pt-br/glossario/iife/index.html deleted file mode 100644 index cff1519346..0000000000 --- a/files/pt-br/glossario/iife/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: IIFE -slug: Glossario/IIFE -tags: - - DesignPattern - - Glossário - - JavaScript -translation_of: Glossary/IIFE ---- -

IIFE (Immediately Invoked Function Expression) é uma função em {{glossary("JavaScript")}} que é executada assim que definida.

- -

É um {{glossary("Design Pattern")}} também conhecido como {{glossary("Self-Executing Anonymous Function")}} e contém duas partes principais. A primeira é a função anônima cujo escopo léxico é encapsulado entre parênteses. Isso previne o acesso externo às variáveis declaradas na IIFE, bem como evita que estas variáveis locais poluam o escopo global.

- -

A segunda parte corresponde à criação da expressão (), por meio da qual o interpretador JavaScript avaliará e executará a função.

- -

Exemplos

- -

A função se torna uma expressão que é imediatamente executada. A variável definida dentro da expressão não pode ser acessada fora de seu escopo.

- -
(function () {
-    var nome = "Felipe";
-})();
-// A variável nome não é acessível fora do escopo da expressão 
-nome // gerará o erro "Uncaught ReferenceError: nome is not defined"
- -

Atribuir uma IIFE a uma variável não armazenará a função em si, mas o resultado da função.

- -
var result = (function () {
-    var nome = "Felipe";
-    return nome;
-})();
-// Imediatamente gera a saída: 
-result; // "Felipe"
- -

Aprenda Mais

- -

Aprenda mais sobre IFFE

- - - -

Conhecimentos Gerais

- - diff --git a/files/pt-br/glossario/index.html b/files/pt-br/glossario/index.html deleted file mode 100644 index 48bbbd527d..0000000000 --- a/files/pt-br/glossario/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Glossário -slug: Glossario -tags: - - Glossário - - Iniciante -translation_of: Glossary ---- -
{{LearnBox({"title":"Aprenda um novo termo:"})}}
- -

Tecnologias da Web contém longas listas de jargões e abreviações usadas em documentação e codificação. Este glossário fornece definições de palavras e abreviaturas que você precisa saber para entender e desenvolver para a web com sucesso.

- -

Glossário de Termos

- -

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

- -

Contribua

- -

Este glossário é um trabalho em constante atualização. Você pode ajudar a melhorá-lo, escrevendo novas entradas ou fazendo as existentes ainda melhores. A maneira mais fácil de começar é apertar o botão seguinte ou escolher um dos termos sugeridos abaixo.

- -

Adicione um novo termo ao glossário

- -

{{GlossaryList({"terms":["TTL"], "filter":"notdefined", "css":"multiColumnList"})}}

- -

Se você quer saber mais sobre como contribuir com este glossário, confira a página de status de documentação do glossário.

diff --git a/files/pt-br/glossario/indexeddb/index.html b/files/pt-br/glossario/indexeddb/index.html deleted file mode 100644 index 94bd23015a..0000000000 --- a/files/pt-br/glossario/indexeddb/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: IndexedDB -slug: Glossario/IndexedDB -tags: - - API - - Banco de Dados - - Glossário - - Sql -translation_of: Glossary/IndexedDB ---- -

IndexedDB é uma {{glossary("API")}} de web para armazenar volumosas estruturas de dados dentro dos navegadores e indexá-los para buscas de alta performance. Sendo um RDBMS baseado em {{glossary("SQL")}}, IndexedDB é um sistema de banco de dados transacionais. Porém ele usa objetos {{glossary("JavaScript")}} ao invés de tabelas em colunas fixas para armazenar os dados.

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/internet/index.html b/files/pt-br/glossario/internet/index.html deleted file mode 100644 index c03661d276..0000000000 --- a/files/pt-br/glossario/internet/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Internet -slug: Glossario/Internet -tags: - - Glossário - - Guía - - Iniciante - - Introdução - - Mecanismos Web - - Precisa de Conteúdo - - Tutorial - - Web -translation_of: Glossary/Internet ---- -

A Internet é a rede mundial de redes que utiliza o conjunto de protocolos da Internet (também chamado {{glossary("TCP")}}/{{glossary("IPv6","IP")}} dos seus dois mais importantes {{glossary("protocol","protocolos")}}).

- -

Aprenda mais

- -

Saiba mais sobre isso

- - diff --git a/files/pt-br/glossario/ipv4/index.html b/files/pt-br/glossario/ipv4/index.html deleted file mode 100644 index 909b8fe17d..0000000000 --- a/files/pt-br/glossario/ipv4/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: IPv4 -slug: Glossario/IPv4 -tags: - - Glossário - - IPv4 - - Infraestrutura - - Protocolo - - Protocolo de Internet -translation_of: Glossary/IPv4 ---- -

IPv4 é a quarta versão do {{Glossary("protocolo")}} de comunicação subjacente à {{glossary("Internet")}} e a primeira versão a ser amplamente implantada.

- -

Formalizada primeiramente em 1981, o IPv4 traça suas raízes para o trabalho de desenvolvimento inicial do ARPAnet. IPv4 é um protocolo sem conexão para ser usado na comutação de dados em redes da camada de enlace de dados (ethernet). {{glossary("IPv6")}} está gradualmente substituindo o IPv4 devido a problemas de segurança que o IPv4 possui e as limitações de seus campos de endereços. (Versão número 5 foi atribuído em 1979 para o experimental Internet Stream Protocol, que no entanto, nunca foi chamado de IPv5).

- -

Saiba mais

- -

Conhecimento Geral

- -

{{interwiki("wikipedia", "IPv4", "IPv4")}} na Wikipedia

diff --git a/files/pt-br/glossario/ipv6/index.html b/files/pt-br/glossario/ipv6/index.html deleted file mode 100644 index a301ed653e..0000000000 --- a/files/pt-br/glossario/ipv6/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: IPv6 -slug: Glossario/IPv6 -tags: - - Glossário - - IPv6 - - Infraestrutura - - Intermediário - - Web - - WebMechanics -translation_of: Glossary/IPv6 ---- -

IPv6 é a versão mais atual do {{glossary("protocol","protocolo")}} de comunicação subjacente da {{glossary("Internet")}}. Lentamente o IPv6 está substituindo o {{Glossary("IPv4")}}, dentre outras razões porque o IPv6 permite vários {{Glossary("Endereço IP","endereços IPs")}} diferentes.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/irc/index.html b/files/pt-br/glossario/irc/index.html deleted file mode 100644 index 6cf5f86f06..0000000000 --- a/files/pt-br/glossario/irc/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: IRC -slug: Glossario/IRC -tags: - - Glossário - - Infraestrutura - - Protocolo Aberto - - Sistema de Chat - - irc -translation_of: Glossary/IRC ---- -

O IRC (Internet Relay Chat) é um sistema de chat mundial que requer uma conexão à Internet e um cliente de IRC, que envia e recebe mensagens através do servidor de IRC.

- -

Projetado no final dos anos 80 por Jarrko Oikarinen, o IRC usa {{glossary ("TCP")}} e é um protocolo aberto. O servidor de IRC transmite mensagens para todos os usuários conectados a um dos muitos canais de IRC (cada um com seu próprio ID).

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/iso/index.html b/files/pt-br/glossario/iso/index.html deleted file mode 100644 index 7781a2109f..0000000000 --- a/files/pt-br/glossario/iso/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ISO -slug: Glossario/ISO -tags: - - ISO - - Normas - - padrões -translation_of: Glossary/ISO ---- -

A Organização Internacional de Padronização, popularmente conhecida como ISO (em inglês: International Organization for Standardization), é uma organização internacional que cria padrões/normas para cada tipo de indústria, visando uma melhor coordenação e união internacional. Atualmente 164 países fazem parte da ISO.

- -

Veja mais

- - diff --git a/files/pt-br/glossario/jank/index.html b/files/pt-br/glossario/jank/index.html deleted file mode 100644 index 0b52d83572..0000000000 --- a/files/pt-br/glossario/jank/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Jank -slug: Glossario/Jank -tags: - - CodingScripting - - Glosário(2) - - Performance -translation_of: Glossary/Jank ---- -

Jank se refere à lentidão em uma interface de usuário, geralmente causado por execução de tarefas longas na Thread principal, o bloqueio de renderização, ou esforço demais do processador com processos em segundo plano.

diff --git a/files/pt-br/glossario/javascript/index.html b/files/pt-br/glossario/javascript/index.html deleted file mode 100644 index de5987ece0..0000000000 --- a/files/pt-br/glossario/javascript/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: JavaScript -slug: Glossario/JavaScript -tags: - - ECMAScript6 - - Glossario(2) - - Iniciante - - JS - - JavaSc - - JavaScript - - scripts -translation_of: Glossary/JavaScript ---- -

Sumário

- -

- JavaScript (ou "JS") é uma linguagem de programação utilizada principalmente para scripts dinâmicos do lado do cliente em páginas web, podendo também ser utilizada no lado do {{Glossary("Server","servidor")}}, usando um interpretador (em inglês: runtime) como o Node.js. -

- -

- O JavaScript não deve ser confundido com a {{interwiki("wikipedia", "Java_(linguagem_de_programação)", "linguagem de programação Java")}}. Apesar de "Java" e "JavaScript" serem marcas comerciais (ou marcas registradas) da Oracle nos EUA e em outros países, essas duas linguagens de programação são significativamente diferentes em sintaxe, semântica e casos de uso. -

- -

- O JavaScript é utilizado principalmente no navegador, permitindo que os desenvolvedores manipulem o conteúdo de uma página web por meio do {{Glossary("DOM")}}, manipulem dados com o {{Glossary("AJAX")}} e o {{Glossary("IndexedDB")}}, desenhem gráficos com o {{Glossary("canvas")}}, interajam com o dispositivo que está executando o navegador através de várias {{Glossary("API","APIs")}} e muito mais. JavaScript é uma das linguagens mais utilizadas no mundo, devido ao recente crescimento e melhoria de desempenho das {{Glossary("API","APIs")}} disponíveis nos navegadores. -

- -

Origem e História

- -

- Concebido como uma linguagem do lado do servidor por Brendan Eich (então empregado pela Netscape Corporation), o JavaScript logo chegou ao Netscape Navigator 2.0 em setembro de 1995. O JavaScript obteve sucesso imediato e o {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduziu o suporte ao JavaScript sob o nome JScript em agosto de 1996. -

- -

- Em novembro de 1996, a Netscape começou a trabalhar com a ECMA International para tornar o JavaScript um padrão do setor. Desde então, o JavaScript padronizado é chamado de - ECMAScript e especificado sob a ECMA-262, cuja última edição (décima primeira, ES2020) está disponível desde junho de 2020. -

- -

- Recentemente, a popularidade do JavaScript se expandiu ainda mais através do bem-sucedido Node.js, o interpretador multiplataforma mais popular de ambiente de execução JavaScript fora do navegador. Node.js foi criado utilizando o {{interwiki("wikipedia", "V8_(JavaScript)", "V8 Javascript Engine")}} permitindo que os desenvolvedores utilizem o JavaScript como linguagem de script para automatizar as coisas em um PC e criar servidores {{Glossary("HTTP")}} e {{Glossary("Web Sockets", "WebSocket")}} totalmente funcionais. -

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Aprendendo JavaScript

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/jpeg/index.html b/files/pt-br/glossario/jpeg/index.html deleted file mode 100644 index b875385242..0000000000 --- a/files/pt-br/glossario/jpeg/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: JPEG -slug: Glossario/JPEG -tags: - - Glossário - - Iniciante - - JPEG -translation_of: Glossary/jpeg ---- -

JPEG (Joint Photographic Experts Group) é um método de compreensão com perda geralmente usado para imagens digitais.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/jquery/index.html b/files/pt-br/glossario/jquery/index.html deleted file mode 100644 index 8eb1ccaffb..0000000000 --- a/files/pt-br/glossario/jquery/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: jQuery -slug: Glossario/jQuery -tags: - - Jquery em português -translation_of: Glossary/jQuery ---- -

jQuery é uma {{Glossary("Biblioteca")}} {{Glossary("JavaScript")}} que visa a simplificação na manipulação do {{Glossary("DOM")}} , nas chamadas de {{Glossary("AJAX")}} e no gerenciamento de {{Glossary("Eventos")}} . É muito utilizado por desenvolvedores de Javascript.

- -

jQuery usa o formato $(seletor).acão() para atribuir um evento a um elemento. Resumindo, $(seletor) chamará jQuery, que selecionará elemento(s) com base no 'seletor' e atribuirá um evento {{Glossary("API")}} chamado .acão().

- -
$(document).ready(function(){
-  alert("Hello World!");
-  $("#blackBox").hide();
-});
- -

O codigo acima tem a mesma funcionalidade que o codigo abaixo:

- -
window.onload = function() {
-  alert( "Hello World!" );
-  document.getElementById("blackBox").style.display = "none";
-};
- -

Download jQuery

- - - - - - - - - - - - - - - - -
npmbower (solo file)Google CDN
npm install jquerybower install https://code.jquery.com/jquery-3.2.1.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
- -

Veja mais

- -

General knowledge

- - - -

Technical information

- - diff --git a/files/pt-br/glossario/key/index.html b/files/pt-br/glossario/key/index.html deleted file mode 100644 index d4c5a998d0..0000000000 --- a/files/pt-br/glossario/key/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Key -slug: Glossario/Key -tags: - - Criptografía - - Glossário - - Segurança -translation_of: Glossary/Key ---- -

Uma key é uma parte de informação utilizada por um {{Glossary("cipher")}} para {{Glossary("encryption")}} e/ou {{Glossary("decryption")}}.Mensagens criptografadas devem permanecer seguras mesmo se tudo envolvendo o {{Glossary("cryptosystem")}}, com exceção da key, for de caráter público.

- -

Em {{Glossary("symmetric-key cryptography")}}, a mesma chave é utilizada para criptografar e descriptografar. Em {{Glossary("public-key cryptography")}}, existem keys relacionadas conhecidas como keys públicas e keys privadas. A key pública é disponibilizada gratuitamente, enquanto, a key privada é mantida "em segredo". A key pública é capaz de criptografar mensagens as quais apenas a key privada correspondente é capaz de descriptografar, e vice-versa.

- -

 

- -

Aprenda mais

- - - -

Dicionário:

- -

"Key": "Chave"

diff --git "a/files/pt-br/glossario/linguagem_de_programa\303\247\303\243o_din\303\242mica/index.html" "b/files/pt-br/glossario/linguagem_de_programa\303\247\303\243o_din\303\242mica/index.html" deleted file mode 100644 index 8932c14227..0000000000 --- "a/files/pt-br/glossario/linguagem_de_programa\303\247\303\243o_din\303\242mica/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Linguagem de programação dinâmica -slug: Glossario/Linguagem_de_programação_dinâmica -tags: - - Glossário - - Iniciante - - ScriptingDeCodificação -translation_of: Glossary/Dynamic_programming_language ---- -

Uma linguagem de programação dinâmica é uma linguagem de programação na qual determinadas operações podem ser feitas em tempo de execução em vez de em tempo de compilação. Por exemplo, em JavaScript é possível mudar o tipo de uma variável ou adicionar novas propriedades ou métodos a um objeto enquanto o programa está sendo executado.

- -

Isso é o oposto das linguagens denominadas linguagens de programação estática, nas quais tais mudanças normalmente não são possíveis.

- -
-

Note que, embora exista de fato uma conexão entre essa propriedade dinâmica/estática das linguagens de programação e a tipagem dinâmica/estática, ambas estão longe de serem sinônimas.

-
- -

Aprenda mais

- -

Conhecimento geral

- - diff --git "a/files/pt-br/glossario/marca\303\247\303\243o/index.html" "b/files/pt-br/glossario/marca\303\247\303\243o/index.html" deleted file mode 100644 index aea536f5c9..0000000000 --- "a/files/pt-br/glossario/marca\303\247\303\243o/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: marcação -slug: Glossario/marcação -tags: - - Glossário - - Intro - - Marcação -translation_of: Glossary/markup ---- -

- Uma linguagem de marcação é aquela projetada para definir e apresentar textos. - HTML (Linguagem de Marcação de Hipertexto), é um exemplo de linguagem - de marcação. -

- -

- Em um arquivo de texto, como um arquivo HTML, os elementos são marcados utilizando tags, que explica o - objetivo dessa parte do conteúdo. -

- -

Tipos de linguagem de marcação

- -
-
Marcação de Apresentação (em inglês: Presentational Markup):
-
- Tradicionalmente utilizado pelos pelos processadores de texto, são marcações incorporadas no texto que produzem o efeito - WYSIWYG ("O que você vê é o que você obtém"). Sem a necessidade de manipulação direta de código, - geralmente essas marcações são feitas para serem ocultas dos usuários humanos, autores ou editores. De maneira mais apropriada, esses sistemas usam a - marcação procedimental e/ou descritiva "por debaixo dos panos", mas as convertem para apresentar pro usuário de maneira renderizada. -
-
Marcação Procedimental (em inglês: Procedural Markup):
-
- Fornece instruções para os programas processarem o texto. Exemplos conhecidos incluem troff, TeX e PostScript. Espera-se que o processador execute o texto - do começo ao fim, seguindo as instruções encontradas. O texto com essa marcação geralmente é editado com a marcação visível e manipulada diretamente pelo - autor. Os sistemas procedimentais mais populares geralmente incluem construções de programação, e macros ou sub-rotinas que são comumente definidas para que - conjuntos complexos de instruções possam ser chamados por um nome simples (e talvez alguns parâmetros). Isso é muito mais rápido, menos propenso a erros e - fácil de manutenção do que repor as mesmas instruções ou instruções semelhantes em muitos lugares. -
-
Marcação Descritiva (em inglês: Descriptive Markup):
-
- Usada especificamente para rotular partes do documento como elas são, e não como devem ser processadas. Sistemas conhecidos que fornecem muitos desses - rótulos incluem LaTeX, HTML e XML. O objetivo é dissociar a estrutura do documento de qualquer tratamento ou representação particular. Essa marcação é - frequentemente descrita como "semântica". Um exemplo de uma marcação descritiva seria a tag - <cite> do HTML, usada para rotular uma citação. Essa marcação incentiva os autores a - escrever de uma maneira que descreva o material conceitualmente, em vez de apenas visualmente. -
-
- -

- Há um borrão considerável das linhas entre os tipos de marcação. Nos sistemas modernos de processamento de texto, a marcação de apresentação é geralmente - salva em sistemas orientados a marcação descritiva, como XML, e depois processada procedimentalmente por outras sistemas. O TeX, linguagem de marcação - procedimental, pode ser usada para criar sistemas de marcação com natureza mais descritiva, como o LaTeX. -

diff --git a/files/pt-br/glossario/metadata/index.html b/files/pt-br/glossario/metadata/index.html deleted file mode 100644 index 8877d38c2e..0000000000 --- a/files/pt-br/glossario/metadata/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Metadata -slug: Glossario/Metadata -tags: - - Glossário - - HTML - - Script de codificação - - metadados -translation_of: Glossary/Metadata ---- -

Os metadados são — em sua definição mais simples — dados que descrevem dados. Por exemplo, um documento {{glossary("HTML")}} é um dado, mas o HTML, também, pode conter metadados em seu elemento {{htmlelement("head")}} que descreve o documento — por exemplo, quem o escreveu e seu resumo.

- -

Saiba mais

- -

Conhecimento geral

- - - -

Metadados HTML

- - diff --git a/files/pt-br/glossario/mozilla_firefox/index.html b/files/pt-br/glossario/mozilla_firefox/index.html deleted file mode 100644 index 4150cbe75e..0000000000 --- a/files/pt-br/glossario/mozilla_firefox/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Mozilla Firefox -slug: Glossario/Mozilla_Firefox -tags: - - Browser - - Firefox - - Glossary - - Infrastructure - - Mozilla - - Mozilla Firefox -translation_of: Glossary/Mozilla_Firefox ---- -

Mozilla Firefox é um {{Glossary("browser")}} open-source cujo desenvolvimento é supervisionado pela Mozilla Corporation. Firefox roda em Windows, OS X, Linux, e Android.

- -

O primeiro lançamento foi em Novembro de 2004, Firefox é completamente customizável com temas, plug-ins, e complementos.  Firefox usa o {{glossary("Gecko")}} para renderizar páginas web, e implementa ambos padrões corrente e a vir da Web.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/mutavel/index.html b/files/pt-br/glossario/mutavel/index.html deleted file mode 100644 index fa45a08981..0000000000 --- a/files/pt-br/glossario/mutavel/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Mutável -slug: Glossario/Mutavel -tags: - - mutavel -translation_of: Glossary/Mutable ---- -

Mutável é o tipo da variável que pode ser alterada. Em {{glossary("JavaScript")}}, somente {{Glossary("Object","objetos")}} e {{Glossary("Array","arrays")}} são mutáveis, {{Glossary("primitive", "valores primitivos")}} não.

- -

(Você pode fazer o nome da variável apontar para um novo valor, mas o valor anterior continua na memória. Logo, a necessidade da coleta de lixo, "garbage collection")

- -

Um objeto mutável é um objeto cujo estado pode ser modificado após sua criação.

- -

Imutáveis são os objetos cujo o estado não podem ser mudados uma vez criados.

- -

Strings e Numbers são imutáveis. Vamos entender isso com um exemplo:

- -
var stringImutavel = 'Hello';
-
-// No código acima, um novo objeto com o valor string é criado.
-
-stringImutavel = stringImutavel + 'World';
-
-// Agora nós estamos anexando 'World' ao valor existente.
- -

Ao anexar a 'stringImutavel' com um valor de string, os seguintes eventos ocorrem:

- -
    -
  1. O valor existente de 'stringImutavel' é recuperado.
    2. -
  2. 'World' é anexado ao valor existente de 'stringImutavel'.
    3. -
  3. O valor resultante é então alocado para um novo bloco na memória.
    4. -
  4. O objeto 'stringImutavel' agora aponta para um novo espaço de memória criado.
    5. -
  5. O espaço de memória criado anteriormente está habilitado para a coleta de lixo.
    6. -
- -

 

- -

Aprenda mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/navegador/index.html b/files/pt-br/glossario/navegador/index.html deleted file mode 100644 index 7fa7f3cbaa..0000000000 --- a/files/pt-br/glossario/navegador/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Navegador -slug: Glossario/Navegador -tags: - - Glossário - - Navegação -translation_of: Glossary/Browser ---- -

Um navegador Web é um programa que obtém e exibe páginas da {{Glossary("World Wide Web","Web")}}, e permite que os usuários acessem outras páginas através de {{Glossary("hyperlink","hyperlinks")}}.

- -

Saiba mais

- -

Conhecimento geral

- - - -

Baixar um navegador

- - diff --git a/files/pt-br/glossario/navegador_opera/index.html b/files/pt-br/glossario/navegador_opera/index.html deleted file mode 100644 index 7d90528cb8..0000000000 --- a/files/pt-br/glossario/navegador_opera/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Navegador Opera -slug: Glossario/Navegador_Opera -tags: - - Glossário - - Navegador - - Navegador Opera - - Navegação - - Opera -translation_of: Glossary/Opera_Browser ---- -

Opera é o quinto {{glossary("navegador")}} web mais usado, publicamente lançado em 1996 e inicialmente executando somente em Windows. Opera usa {{glossary("Blink")}} como seu mecanismo de layout desde 2013 (antes disso, {{glossary("Presto")}}). Opera também existe nas versões móveis e tablets.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/node.js/index.html b/files/pt-br/glossario/node.js/index.html deleted file mode 100644 index 647ebaa66e..0000000000 --- a/files/pt-br/glossario/node.js/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Node.js -slug: Glossario/Node.js -tags: - - Glossário - - Infraestrutura - - JavaScript - - node.js -translation_of: Glossary/Node.js ---- -

Node.js é um ambiente de execução multi-plataforma em {{Glossary("JavaScript")}} que permite aos desenvolvedores produzirem aplicações para rede e {{Glossary("Servidor","server-side")}} usando o JavaScript.

- -

Aprenda mais

- -

Conhecimentos gerais

- - - -

Referência técnica

- - diff --git "a/files/pt-br/glossario/nome_de_dom\303\255nio/index.html" "b/files/pt-br/glossario/nome_de_dom\303\255nio/index.html" deleted file mode 100644 index 26b2366540..0000000000 --- "a/files/pt-br/glossario/nome_de_dom\303\255nio/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Nome de domínio -slug: Glossario/Nome_de_domínio -tags: - - Glossário - - Mecanismos Web - - Nome de domínio - - Protocolo -translation_of: Glossary/Domain_name ---- -

Um nome de domínio é um endereço de uma página na {{Glossary("Internet")}}. Nomes de domínios são usados em {{Glossary("URL","URLs")}} para identificar a qual servidor uma página específica pertence. O domínio consiste de uma sequência hierárquica de nomes (rótulo) separados por períodos (pontos) e terminando com uma {{Glossary("TLD","extensão")}}.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/nulo/index.html b/files/pt-br/glossario/nulo/index.html deleted file mode 100644 index 0a0983a944..0000000000 --- a/files/pt-br/glossario/nulo/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Nulo -slug: Glossario/Nulo -translation_of: Glossary/Null ---- -

Em ciência da computação, um valor nulo representa uma referencia que aponta, geralmente de maneira intencional, para um objeto ou endereço de memória inválido ou inexistente. O significado do valor nulo varia entre as implementações das linguagens.

- -

Em {{Glossary("JavaScript")}}, o null é um dos {{Glossary("Primitivo", "tipos primitivos")}}.

- -

Veja mais

- -

Referência técnica

- - - -

Referências externas

- - - -
-
diff --git "a/files/pt-br/glossario/n\303\272mero/index.html" "b/files/pt-br/glossario/n\303\272mero/index.html" deleted file mode 100644 index 958172fc8c..0000000000 --- "a/files/pt-br/glossario/n\303\272mero/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Number -slug: Glossario/Número -translation_of: Glossary/Number ---- -

No {{Glossary("JavaScript")}}, Number é um tipo de dado numérico no double-precision 64-bit floating point format (IEEE 754). Em outras linguagens de programação diferentes tipos numéricos podem existir, por exemplo: Integers (Inteiros), Floats (Pontos Flutuantes), Doubles (Dobros), ou Bignums.

- -

Leia mais

- -

Conhecimento Geral

- - - -

Technical reference

- - diff --git a/files/pt-br/glossario/objeto/index.html b/files/pt-br/glossario/objeto/index.html deleted file mode 100644 index bf4c959e18..0000000000 --- a/files/pt-br/glossario/objeto/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Objeto -slug: Glossario/Objeto -tags: - - Glossário - - Objeto -translation_of: Glossary/Object ---- -

Objeto refere-se a uma estrutura de dados contendo dados e instruções para se trabalhar com estes dados. Objetos algumas vezes se referem a coisas do mundo real, por exemplo um objeto de carro ou um mapa em um jogo de corrida. {{glossary("JavaScript")}}, Java, C++, Python, e Ruby são exemplos de Linguagens orientadas à objeto ({{glossary("OOP","object-oriented programming")}}).

- -

Aprenda mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/oop/index.html b/files/pt-br/glossario/oop/index.html deleted file mode 100644 index edfde266bf..0000000000 --- a/files/pt-br/glossario/oop/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: OOP -slug: Glossario/OOP -translation_of: Glossary/OOP ---- -

OOP (Object-Oriented Programming) é uma abordagem na programação em qual os dados são encapsulados em {{glossary("object","objects")}} e o proprio objeto é operado, em vez de suas partes componentes.

- -

{{glossary("JavaScript")}} é altamente orientado à objeto. Isto segue um modelo baseado em prototypes (as opposed to class-based).

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/opengl/index.html b/files/pt-br/glossario/opengl/index.html deleted file mode 100644 index 91bea9c670..0000000000 --- a/files/pt-br/glossario/opengl/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: OpenGL -slug: Glossario/OpenGL -tags: - - Glossário - - OpenGL -translation_of: Glossary/OpenGL ---- -

OpenGL (Open Graphics Library) é uma API (Application Programming Interface) multiplataforma e multilíngue para renderizar gráficos vetoriais 2D e 3D. A API é normalmente usada para interagir com uma GPU (Graphics Processing Unit) para obter renderização acelerada por hardware.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/operador/index.html b/files/pt-br/glossario/operador/index.html deleted file mode 100644 index 77d2d7c306..0000000000 --- a/files/pt-br/glossario/operador/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Operador -slug: Glossario/Operador -tags: - - Codificação de Scripts - - Glossário -translation_of: Glossary/Operator ---- -

Sintaxe reservada que consiste em pontuação ou caracteres alfanuméricos que executam a funcionalidade incorporada. Por exemplo, em JavaScript, o operador de adição ("+") soma números juntos e concatena strings, enquanto o operador "não" ("!") nega uma expressão — por exemplo, fazendo uma declaração verdadeira retornar falso.

- -

Aprenda mais

- -

Conhecimento geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/operando/index.html b/files/pt-br/glossario/operando/index.html deleted file mode 100644 index 9f460ea876..0000000000 --- a/files/pt-br/glossario/operando/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Operando -slug: Glossario/Operando -translation_of: Glossary/Operand ---- -

An operand is the part of an instruction representing the data manipulated by the {{glossary("operator")}}. For example, when you add two numbers, the numbers are the operand and "+" is the operator.

- -

Learn more

- - diff --git a/files/pt-br/glossario/origem/index.html b/files/pt-br/glossario/origem/index.html deleted file mode 100644 index f1aae2640b..0000000000 --- a/files/pt-br/glossario/origem/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Origem -slug: Glossario/Origem -tags: - - Glossary - - Glossário - - Origem - - Security - - Segurança - - WebMechanics - - origin -translation_of: Glossary/Origin ---- -

O conteúdo de origem é definido pelo esquema (protocolo), host (domínio), e porta da {{Glossary("URL")}} usada para acessá-lo. Dois objetos tem a mesma origem somente quando o esquema, host, e porta batem.

- -

Algumas operações são restritas para conteúdos de mesma origem, e essa restrição pode ser ultrapassada usando {{Glossary("CORS")}}.

- -

Exemplos de mesma origem

- - - - - - - - - - - - -
http://example.com/app1/index.html
- http://example.com/app2/index.html		Mesma origem pois possuem o mesmo esquema (http) e mesmo host (example.com)
http://Example.com:80
- http://example.com		Mesma origem pois o servidor entrega conteúdo HTTP através da porta 80 por padrão.
- -

Exemplos de origens diferentes

- - - - - - - - - - - - - - - - -
http://example.com/app1
- https://example.com/app2		Esquemas diferentes
http://example.com
- http://www.example.com
- http://myapp.example.com		Hosts diferentes
http://example.com
- http://example.com:8080		Portas diferentes
- -

Especificações

- - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#origin', 'origin')}}{{Spec2('HTML WHATWG')}}
- -

Aprenda mais

- -

Veja Same-origin policy para mais informações.

- -
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/pt-br/glossario/ota/index.html b/files/pt-br/glossario/ota/index.html deleted file mode 100644 index a8680d0871..0000000000 --- a/files/pt-br/glossario/ota/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: OTA -slug: Glossario/OTA -tags: - - Glossário - - Infraestrutura - - OTA - - Wireless - - updates -translation_of: Glossary/OTA ---- -

Over-The-Air (OTA ou "Pelo-Ar") refere-se à atualização automática de programas de dispositivos conectados a partir de um servidor central. Todos os proprietários de dispositivos recebendo um determinado conjunto de atualizações estão sob o mesmo "canal"; e cada dispositivo pode amiúde acessar vários canais (e.g. para "builds" de produção ou engenharia).

- -

Aprenda mais

- -

Conhecimentos Gerais

- - diff --git a/files/pt-br/glossario/palavra-chave/index.html b/files/pt-br/glossario/palavra-chave/index.html deleted file mode 100644 index d50fe81350..0000000000 --- a/files/pt-br/glossario/palavra-chave/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Palavra-chave -slug: Glossario/Palavra-chave -tags: - - Busca palavra-chave - - Glossário - - Palavra-chave - - Search - - busca -translation_of: Glossary/Keyword ---- -

Uma palavra-chave é a palavra ou a frase que descreve conteúdo. Palavras-chave on-line são utilizadas como pistas para buscadores ou como um conjunto de palavras que identifica e sintetiza o conteúdo dos sites.

- -

Quando você usa uma máquina de busca, utiliza palavras ou expressões para especificar o conteúdo que está procurando e, como resultado, a máquina de busca retorna endereços e páginas relevantes para os termos apresentados. Para resultados mais apurados, tente utilizar palavras mais específicas, a exemplo "Blue Mustang GTO" ao invés de simplesmente "Mustang". Páginas de internet também utilizam palavras na forma de meta tags (na seção {{htmlelement("head")}} para descrever o conteúdo da página, assim os buscadores podem identificar e organizar de forma melhorada as páginas da internet.

- -

Aprenda Mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/php/index.html b/files/pt-br/glossario/php/index.html deleted file mode 100644 index 19370528dc..0000000000 --- a/files/pt-br/glossario/php/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: PHP -slug: Glossario/PHP -tags: - - Back End - - Iniciante - - Introdução - - PHP -translation_of: Glossary/PHP ---- -

PHP (um inicialismo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script do lado do servidor de código aberto que pode ser ultilizada junto com HTML para construir aplicações web e sites dinâmicos.

- -

HTML pode ser usando dentro do PHP, mas não vice versa.

- -
 // Sintaxe básica do PHP
-<? php
- // Imprime dados na tela
- echo "Olá mundo!";
-
- // ou
- print "Olá mundo!";
-?>
- -

A melhor coisa em usar o PHP é que ele é extremamente simples para um iniciante, mas oferece muitos recursos avançados para um programador profissional. Não tenha medo de ler a longa lista de recursos do PHP. Pode entrar com tudo, o mais rápido que puder, e começar a escrever scripts simples em poucas horas.

- - - -

Variáveis em PHP

- -
<?php
- // Variáveis
- $nome='Jorge';
- $sobrenome='Clésio';
- $pais='Brasil';
- $email='jorgeclesio@mozilla.org';
-
- // Imprimir variáveis
- echo $nome;
- echo $sobrenome;
- echo $pais;
- echo $email;
-?>
- -

Conheça mais sobre variáveis em PHP

- - - -

Tratando Formulários com PHP

- -

Confira aqui.

- - - -

Saber mais

- - diff --git a/files/pt-br/glossario/pixel/index.html b/files/pt-br/glossario/pixel/index.html deleted file mode 100644 index 4940fb76fb..0000000000 --- a/files/pt-br/glossario/pixel/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Pixel -slug: Glossario/Pixel -tags: - - Glossário -translation_of: Glossary/Pixel ---- -

Um pixel é o menor elemento de um dispositivo de exibição como, por exemplo, um monitor.

- -

A resolução de exibição pode ser expressada utilizando-se pixels como unidade. Por exemplo, uma resolução de "800x600" pixels significa que podem ser exibidos 800 pixels na largura e 600 pixels na altura.

- -

Aprenda mais

- -

Referência técnica

- - diff --git a/files/pt-br/glossario/polyfill/index.html b/files/pt-br/glossario/polyfill/index.html deleted file mode 100644 index 706abd976c..0000000000 --- a/files/pt-br/glossario/polyfill/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Polyfill -slug: Glossario/Polyfill -tags: - - ECMAScript6 - - polyfill -translation_of: Glossary/Polyfill ---- -

Um polyfill é um pedaço de código (geralmente JavaScript na Web) usado para fornecer funcionalidades modernas em navegadores mais antigos que não o suportam nativamente.

- -

Por exemplo, um polyfill pode ser usado para imitar a funcionalidade de um elemento HTML Canvas no Microsoft Internet Explorer 7, usando um plugin Silverlight, ou imitar o suporte para unidades rem CSS, ou {{cssxref ("text-shadow")}}, ou o que você quiser.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/port/index.html b/files/pt-br/glossario/port/index.html deleted file mode 100644 index cc28a9ebae..0000000000 --- a/files/pt-br/glossario/port/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Port -slug: Glossario/Port -tags: - - porta - - porta segura - - portas de comunicação -translation_of: Glossary/Port ---- -

Porta

- -

Para um computador se conectar à rede mundial de computadores com um endereço de IP(Protocolo de internet - Internet Protocol),
- uma porta é um ponto terminal de comunicação.
- Portas são designadas por números, e abaixo são especificados 1024 portas que é associado por padrão com um protocolo específico.

- -

Por exemplo, a porta padrão para a HTTP (Protocolo de transferência de hiper texto - Hyper Text Transfer Protocol) é 80 e o 
- padrão para o HTTPS (Protocolo de transferência de hiper texto Seguro - Hyper Text Transfer Protocol Secure) é 443,
- então um http servidor espera pelas requisições naquelas portas.Cada protocolo de internet está associado com uma porta padrão:
- SMTP(25), POP3(110), IMAP(143), IRC(194) e assim em diante.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/prefixos_vendor/index.html b/files/pt-br/glossario/prefixos_vendor/index.html deleted file mode 100644 index d1cc0fe991..0000000000 --- a/files/pt-br/glossario/prefixos_vendor/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Prefixos vendor -slug: Glossario/Prefixos_vendor -tags: - - Glossário -translation_of: Glossary/Vendor_Prefix ---- -

Os fabricantes de browsers, por vezes, adicionam prefixos às propriedades experimentais ou fora dos padrões CSS, de modo que os desenvolvedores podem experimentá-las, enquanto —em teoria— as mudanças no comportamento dos navegadores não quebrarão o código durante o processo de padonização. Os desenvolvedores devem esperar para incluir a propriedade não pré-fixada até que o comportamento do navegador seja padronizado.

- -
-

Os fabricantes de browsers estão trabalhando para parar de usar prefixos de fornecedores para recursos experimentais. Os desenvolvedores da Web têm vindo a usá-los em sites de produção, apesar de sua natureza experimental. Isso tornou mais difícil para os fornecedores de navegadores garantir a compatibilidade e trabalhar com novos recursos; também foi prejudicial aos navegadores menores que acabam forçados a adicionar prefixos de outros navegadores para carregar sites populares.

- -

Ultimamente, a tendência é adicionar recursos experimentais por trás das bandeiras controladas pelo usuário e trabalhar com especificações menores que alcancem a estabilidade muito mais rápido.

-
- -

Normalmente, os vendors usam esses prefixos:

- - - -

Os vendedores também usam prefixos em APIs. Em interfaces, eles normalmente usam:

- - - -

Em propriedades e métodos, eles normalmente usam:

- - - -

Aprender mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/preflight_request/index.html b/files/pt-br/glossario/preflight_request/index.html deleted file mode 100644 index 4e70aced76..0000000000 --- a/files/pt-br/glossario/preflight_request/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Requisição Preflight -slug: Glossario/Preflight_request -tags: - - CORS - - Glossário - - HTTP - - Preflight - - requisição -translation_of: Glossary/Preflight_request ---- -

Uma requisição preflight de CORS é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.

- -

É uma requisição {{HTTPMethod("OPTIONS")}}, que usa três cabeçalhos de solicitação HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, e o cabeçalho {{HTTPHeader("Origin")}}.

- -

Uma requisição preflight é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada "para ser preflighted"  e omitida para requisições simples.

- -

Por exemplo, o cliente pode perguntar ao servidor se este permitiria uma requisição {{HTTPMethod ("DELETE")}}, antes de enviá-la, usando uma requisição preflight:

- -
OPTIONS /resource/foo
-Access-Control-Request-Method: DELETE
-Access-Control-Request-Headers: origin, x-requested-with
-Origin: https://foo.bar.org
- -

Se o servidor permitir, ele responderá à requisição preflight: com um cabeçalho de resposta {{HTTPHeader ("Access-Control-Allow-Methods")}}, que lista DELETE:

- -
HTTP/1.1 204 No Content
-Connection: keep-alive
-Access-Control-Allow-Origin: https://foo.bar.org
-Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
-Access-Control-Max-Age: 86400
- -

A resposta da requisição preflight pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho Access-Control-Max-Age como no exemplo acima.

- -

Veja também

- - diff --git a/files/pt-br/glossario/primitivo/index.html b/files/pt-br/glossario/primitivo/index.html deleted file mode 100644 index 0ae1f362d5..0000000000 --- a/files/pt-br/glossario/primitivo/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Primitivo -slug: Glossario/Primitivo -translation_of: Glossary/Primitive ---- -

Resumo

- -

Um primitivo (valor primitivo, tipo de dados primitivo) é um dado que não é representado através de um {{Glossary("Objeto")}} e, por consequência, não possui métodos.

- -

Em detalhes

- -

Na maior parte do tempo, um valor primitivo é representado diretamente através do mais baixo nível da implementação de uma linguagem.

- -

No {{Glossary("JavaScript")}}, existem 6 tipos primitivos:

- - - -

Todos os primitivos são imutáveis (não podem ter o seu valor modificado).

- -

Wrappers em JavaScript

- -
-

NT: O termo "wrapper" em português significa "que envolve". No entanto, em tecnologia, é comum se usar a versão em inglês que possui o mesmo significado.

-
- -

À exceção do null e do undefined, todos os primitivos tem um objeto wrapper equivalente:

- - - -

O método valueOf() do objeto wrapper retorna o valor primitivo.

- -
-

NT: É possível verificar o tipo da variável digitando typeof+nomedavariavel. Para saber mais, verifique typeof.

-
- -

Referências externas

- - diff --git "a/files/pt-br/glossario/programa\303\247\303\243o_de_computadores/index.html" "b/files/pt-br/glossario/programa\303\247\303\243o_de_computadores/index.html" deleted file mode 100644 index 34dff2ed11..0000000000 --- "a/files/pt-br/glossario/programa\303\247\303\243o_de_computadores/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Programação de Computadores -slug: Glossario/Programação_de_Computadores -tags: - - Linguagem de Programação - - Programação - - Programação de Computadores -translation_of: Glossary/Computer_Programming ---- -

Programação é o processo que formula a solução de um problema computacional ou automatiza uma tarefa repetitiva na forma de uma série de instruções sequenciais em um programa executável.

- -

Saiba mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/progressive_web_apps/index.html b/files/pt-br/glossario/progressive_web_apps/index.html deleted file mode 100644 index 93105b3b30..0000000000 --- a/files/pt-br/glossario/progressive_web_apps/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Progressive web apps -slug: Glossario/Progressive_web_apps -tags: - - Composição - - Glossário - - Progressive web apps -translation_of: Glossary/Progressive_web_apps ---- -

Progressive web apps é um termo usado para descrever o estado moderno do desenvolvimento de aplicações web. Isso envolve pegar web sites/apps que aproveitam de todas as melhores partes da Web - como descobertas por mecanismos de busca, tornando-se linkaveis via {{Glossary("URL")}}s, e trabalho em vários fatores de formas - e sobrecarregá-los com APIs modernas (como Service Works e Push) e funcionalidades que conferem outros benefícios comumente atribuídos para apps nativos.

- -

Essas funcionalidades incluem possibilidade de instalação, funcionamento offline e ser de fácil sincronização e reconexão do usuário com o servidor.

- -

Saiba mais

- - diff --git a/files/pt-br/glossario/property/css/index.html b/files/pt-br/glossario/property/css/index.html deleted file mode 100644 index 748f37002d..0000000000 --- a/files/pt-br/glossario/property/css/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Propriedade (CSS) -slug: Glossario/property/CSS -tags: - - CodingScripting - - Glossário -translation_of: Glossary/property/CSS ---- -

Uma propriedade CSS é uma característica (como a cor) cujo valor define o aspecto de como o navegador deve exibir o elemento.

- -

Aqui está um exemplo de uma regra do CSS:

- -
/* "div" é um seletor indicando que todos os elementos div */
-/* no documento serão estilizados por essa regra */
-div {
-  /* A propriedade "color" (cor) com o valor "black" (preto) indica que */
-  /* todos os textos terão a cor preta */
-  color: black;
-
-  /* A propredade "background-color" (cor de fundo) com o valor "white" */
-  /* (branco) indica que a cor de fundo dos elementos será branca */
-  background-color: white;
-}
- -

Saiba Mais

- -

Conhecimentos Gerais

- - - -

Referências Técnicas

- - - -

 

diff --git a/files/pt-br/glossario/property/index.html b/files/pt-br/glossario/property/index.html deleted file mode 100644 index a837434992..0000000000 --- a/files/pt-br/glossario/property/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Propriedade -slug: Glossario/property -tags: - - Desambiguação - - Glossário -translation_of: Glossary/property ---- -

O termo propriedade (property) pode ter diversos siginificados depenedendo do contexto. Ele pode se referir a:

- -

{{GlossaryDisambiguation}}

diff --git a/files/pt-br/glossario/property/javascript/index.html b/files/pt-br/glossario/property/javascript/index.html deleted file mode 100644 index 94cb51484f..0000000000 --- a/files/pt-br/glossario/property/javascript/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Propriedade (JavaScript) -slug: Glossario/property/JavaScript -tags: - - CodingScripting - - Glossário -translation_of: Glossary/property/JavaScript ---- -

Uma propriedade Javascript é uma característica de um objeto, frequentemente descrita como atributos associados à uma estrutura de dados.

- -

Há dois tipos de propriedades: 

- - - -

Uma propriedade tem nome (uma {{glossary("string")}}) e um valor ({{glossary("primitive", "primitivo")}}, {{glossary("method", "método")}} ou uma {{glossary("object reference", "referência a um objeto")}}). Perceba que quando dizemos que "uma propriedade contém um objeto", é apenas um atalho para "uma propriedade contém uma referência a um objeto". Essa distinção é importante porque o objeto referenciado original continua inalterado quando você altera o valor da propriedade.

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/protocolo/index.html b/files/pt-br/glossario/protocolo/index.html deleted file mode 100644 index 95d78f010f..0000000000 --- a/files/pt-br/glossario/protocolo/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Protocolo -slug: Glossario/Protocolo -tags: - - Infraestrutura - - Protocolos -translation_of: Glossary/Protocol ---- -

Um protocolo é um sistema de regras que define como o dado é trafegado dentro ou entre computadores. Comunicações entre dispositivos requer que estes concordem com o formato do dado que estiver sendo trafegado. O conjunto de regras que define esse formato é chamado de protocolo.

- -

Saiba mais

- -

Conhecimento Geral

- - - -

 

diff --git a/files/pt-br/glossario/prototype/index.html b/files/pt-br/glossario/prototype/index.html deleted file mode 100644 index e2d05ee2ba..0000000000 --- a/files/pt-br/glossario/prototype/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Prototype -slug: Glossario/Prototype -translation_of: Glossary/Prototype ---- -

A prototype é um modelo que exibe a aparência e o comportamento de um aplicativo ou produto no início do ciclo de vida do desenvolvimento.

- -

See Inheritance and the prototype chain

- -

Saiba mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/proxy_server/index.html b/files/pt-br/glossario/proxy_server/index.html deleted file mode 100644 index 0748080f16..0000000000 --- a/files/pt-br/glossario/proxy_server/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Proxy server -slug: Glossario/Proxy_server -translation_of: Glossary/Proxy_server ---- -

Um servidor proxy é um computador ou programa intermediário usado ao navegar em conexões de internet diferentes. Eles facilitam o acesso ao conteúdo na rede mundial de computadores. Um proxy intercepta pedidos e exibe respostas; pode encaminhar os pedidos, ou não (por exemplo no caso de uma cache), e pode modificá-los (por exemplo alterando cabeçalhos, no limite entre duas redes)

- -

Um proxy pode estar no computador local do usuário, or em qualquer lugar entre o computador do usuário e um servidor de destino na internet. Em geral, existem dois tipos principais de servidores proxy:

- - - -

Aprenda Mais

- - diff --git a/files/pt-br/glossario/pseudo-class/index.html b/files/pt-br/glossario/pseudo-class/index.html deleted file mode 100644 index 6221c38d62..0000000000 --- a/files/pt-br/glossario/pseudo-class/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Pseudo-class -slug: Glossario/Pseudo-class -tags: - - CSS - - Codificação de Scripts - - Glossário - - Seletor -translation_of: Glossary/Pseudo-class ---- -

No CSS, um seletor do tipo pseudo-classe referencia um elemento dependendo do seu estado e não de informações da arvore do documento. Por exemplo, o seletor a{{ cssxref(":visited") }} aplica estilo somente aos links que o usuário já visitou

- -

Saiba mais

- -

Referencia técnica

- - diff --git a/files/pt-br/glossario/pseudo-element/index.html b/files/pt-br/glossario/pseudo-element/index.html deleted file mode 100644 index 6f28c4d702..0000000000 --- a/files/pt-br/glossario/pseudo-element/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Pseudo-element -slug: Glossario/Pseudo-element -translation_of: Glossary/Pseudo-element ---- -

Em CSS, um seletor pseudo-element aplica estilos em partes do conteúdo do seu documento em cenários onde não há elementos HTML específicos para selecionar. Por exemplo, em vez de colocar a primeira letra para cada parágrafo em seu próprio elemento. você pode estilizá-los todos com p{{ Cssxref("::first-letter") }}.

- -

Aprenda mais

- -

Referência técnica

- - diff --git a/files/pt-br/glossario/python/index.html b/files/pt-br/glossario/python/index.html deleted file mode 100644 index e4f254553c..0000000000 --- a/files/pt-br/glossario/python/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Python -slug: Glossario/Python -tags: - - Codificação de Scripts - - Glossário - - Linguagem - - Programação - - Python -translation_of: Glossary/Python ---- -

Python é uma linguagem de programação de alto nível e de uso geral. Ele usa uma abordagem multi-paradigma, o que significa que ele suporta procedural, orientação a objetos, e algumas construções de programação funcional.

- -

Ele foi criado por Guido van Rossum como sucessor de outra linguagem (chamado ABC) entre 1985 e 1990, e atualmente é usado em uma grande variedade de domínios, como desenvolvimento web, como linguagem de script para outras aplicações e para construir aplicações reais.

- -

Saiba Mais

- - diff --git "a/files/pt-br/glossario/recurs\303\243o/index.html" "b/files/pt-br/glossario/recurs\303\243o/index.html" deleted file mode 100644 index eb43639f84..0000000000 --- "a/files/pt-br/glossario/recurs\303\243o/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Recursão -slug: Glossario/Recursão -tags: - - Glossário - - Iniciante - - Programando -translation_of: Glossary/Recursion ---- -

Um ato de uma função invocando a si mesma. A recursão é usada para resolver problemas que contêm subproblemas menores. Uma função recursiva pode receber dois inputs (entradas): um caso base (termina a recursão) ou um caso recursivo (continua a recursão).

- -

Leia mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/reflow/index.html b/files/pt-br/glossario/reflow/index.html deleted file mode 100644 index 3df9513d4d..0000000000 --- a/files/pt-br/glossario/reflow/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Reflow -slug: Glossario/Reflow -translation_of: Glossary/Reflow ---- -

Reflow acontece quando o {{glossary("browser")}} deve processar e desenhar parte ou toda a página novamente, como após uma atualização em  um site interativo.

- -

Aprenda mais

- - diff --git a/files/pt-br/glossario/request_header/index.html b/files/pt-br/glossario/request_header/index.html deleted file mode 100644 index f8c72a0f4c..0000000000 --- a/files/pt-br/glossario/request_header/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Cabeçalho de Requisição -slug: Glossario/Request_header -translation_of: Glossary/Request_header ---- -

Um cabeçalho de requisição é um {{glossary("header", "cabeçalho HTTP")}} que pode ser utilizado em uma requisição HTTP, e não é relacionado ao conteúdo da mensagem. Cabeçalhos de requisição, como {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}}, ou ainda {{HTTPHeader("If-Modified-Since", "If-*")}} permitem realizar requisições condicionais; outros como {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} ou {{HTTPHeader("Referer")}} deixa o contexto mais preciso para que o servidor possa adaptar melhor a resposta.

- -

Nem todos os cabeçalhos exibidos em uma requisição são cabeçalhos de requisição. Por exemplo, o {{HTTPHeader("Content-Length")}} exibido em uma requisição {{HTTPMethod("POST")}} é na realidade uma {{glossary("entity header")}}, que referência o tamanho do corpo da mensagem de requisição. Porém, esses cabeçalhos de entidade muitas vezes são chamados de cabeçalhos de requisição.

- -

Adicionalmente, o sistema CORS define um subconjunto de cabeçalhos de requisição como {{glossary('simple header', 'simple headers')}}, cabeçalhos de requisição que sempre são considerados como autorizados e não são explicitamente listados em respostas de requisições {{glossary("preflight request", "preflight")}}.

- -

Um certo número de cabeçalhos de requisição após uma requisição {{HTTPMethod("GET")}}:

- -
GET /home.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-US,en;q=0.5
-Accept-Encoding: gzip, deflate, br
-Referer: https://developer.mozilla.org/testpage.html
-Connection: keep-alive
-Upgrade-Insecure-Requests: 1
-If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
-If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
-Cache-Control: max-age=0
- -

Estritamente, o cabeçalho {{HTTPHeader("Content-Length")}} neste exemplo não é um cabeçalho de requisição como os outros, mas sim uma {{glossary("entity header")}}:

- -
POST /myform.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Content-Length: 128
-
- -

Learn more

- -

Technical knowledge

- - diff --git a/files/pt-br/glossario/responsive_web_design/index.html b/files/pt-br/glossario/responsive_web_design/index.html deleted file mode 100644 index 602e2ba05a..0000000000 --- a/files/pt-br/glossario/responsive_web_design/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Web Design Responsivo -slug: Glossario/Responsive_web_design -tags: - - Acessibilidade - - Design - - Glossário - - Web Design Responsivo -translation_of: Glossary/Responsive_web_design ---- -

Web Design Responsivo (RWD em Inglês) é um conceito de desenvolvimento Web focado em fazer a experiência e comportamento de websites mais otimizada para todos os dispositivos, desde o desktop até um dispositivo móvel.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/rest/index.html b/files/pt-br/glossario/rest/index.html deleted file mode 100644 index 1a7346bee1..0000000000 --- a/files/pt-br/glossario/rest/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: REST -slug: Glossario/REST -tags: - - Arquitetura - - Glossário - - HTTP - - Iniciante - - Rest -translation_of: Glossary/REST ---- -

REST (Representational State Transfer) refere-se a um grupo de restrições de design dentro da arquitetura de software que geram sistemas distribuídos eficientes, confiáveis e escaláveis. Um sistema é denominado RESTful quando adere a todas essas restrições.

- -

A ideia básica do REST é que um recurso, por exemplo um documento, seja transferido com seu estado bem definido, padronização de operações e formatos, ou serviços que se autodenominem RESTful, quando modificam diretamente o tipo de documento, ao invés de desencadear ações em algum lugar.

- -

Como o HTTP, protocolo padrão por trás da "World Wide Web", a "Web" também transfere documentos e links de hipertexto. APIs HTTP simples são às vezes chamadas de APIs RESTful, serviços RESTful ou simplesmente serviços REST, embora não adotem todas as restrições REST necessariamente. Os iniciantes podem presumir que uma API REST significa um serviço HTTP que pode ser chamado usando bibliotecas e ferramentas padrões da web.

- -

Saiba mais

- - - -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/ruby/index.html b/files/pt-br/glossario/ruby/index.html deleted file mode 100644 index b247016e17..0000000000 --- a/files/pt-br/glossario/ruby/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Ruby -slug: Glossario/Ruby -tags: - - Glossário - - Ruby -translation_of: Glossary/Ruby ---- -

Ruby é uma linguagem de programação de código aberto. Em um contexto {{glossary("world wide web","Web")}}, Ruby é geralmente usado em servidores com o framework Ruby On Rails (ROR) para produzir websites/apps.

- -

Aprenda Mais

- -

Conhecimento geral

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/sdp/index.html b/files/pt-br/glossario/sdp/index.html deleted file mode 100644 index 71c8d86e5a..0000000000 --- a/files/pt-br/glossario/sdp/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: SDP -slug: Glossario/SDP -tags: - - Avançado - - Colaborativo - - Comunicação - - Infraestrutura - - Ponto a ponto - - Tempo Real -translation_of: Glossary/SDP ---- -

SDP (Session Description {{glossary("Protocol")}}) é o padrão que descreve uma conexão {{Glossary("P2P","ponto a ponto")}}. SDP contém o {{Glossary("codec")}}, o endereço de origem e as informações de tempo de áudio e vídeo.

- -

Aqui está uma mensagem SDP típica:

- -
v=0
-o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
-s=
-c=IN IP4 host.anywhere.com
-t=0 0
-m=audio 49170 RTP/AVP 0
-a=rtpmap:0 PCMU/8000
-m=video 51372 RTP/AVP 31
-a=rtpmap:31 H261/90000
-m=video 53000 RTP/AVP 32
-a=rtpmap:32 MPV/90000
- -

O SDP nunca é usado sozinho, mas por protocolos como {{Glossary("RTP")}} e {{Glossary("RTSP")}}. O SDP também é um componente do {{Glossary("WebRTC")}}, que usa o SDP como forma de descrever uma sessão.

- -

Leia mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/seguro/index.html b/files/pt-br/glossario/seguro/index.html deleted file mode 100644 index bb16dc429c..0000000000 --- a/files/pt-br/glossario/seguro/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Seguro -slug: Glossario/seguro -tags: - - Glossary - - Glossário - - Mecânicas da Web - - WebMechanics -translation_of: Glossary/safe ---- -

Um método HTTP é seguro se ele não altera o estado do servidor. Em outras palavras, um método é seguro se ele leva a uma operação de somente leitura. Diversos métodos de HTTP são seguros: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, ou {{HTTPMethod("OPTIONS")}}. Todos os métodos seguros também são {{glossary("idempotente")}}s, mas nem todos os métodos idempotentes são seguros. Por exemplo, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} são ambos idempotentes, entretanto são inseguros.

- -

Mesmo se métodos seguros possuem a semântica de somente leitura, servidores podem alterar o seu estado (e.g., eles podem manter log ou estatísticas). O que é importante aqui, é de que chamando um método seguro, o cliente não requer que o servidor mude seu estado, e portanto não gerará carga desnecessária ao servidor. Navegadores podem chamar métodos seguros sem medo de causarem nenhum dano ao servidor: isso permite a eles a possibilidade de fazer atividades como pré-carregamento sem nenhum risco. Web crawlers também usam métodos seguros.

- -

Métodos seguros não servem somente para buscar arquivos estáticos, o servidor pode gerar uma resposta para um método seguro no voô, enquanto o script gerador garantir segurança: ele não deve ativar gatilhos externos, como ativar um pedido de compras em um site.

- -

É responsabilidade da aplicação no servidor implementar a semântica segura corretamente, o servidor web em si, sendo Apache, nginx ou IIS, não pode forçar ela por si só. Em particular, a aplicação não deve permitir que requisições {{HTTPMethod("GET")}} alterem seu estado.

- -

Uma chamada a um método seguro, não alterando o estado do servidor:

- -
GET /pageX.html HTTP/1.1
-
- -

Uma chamada a um método não seguro, que pode alterar o estado do servidor:

- -
POST /pageX.html HTTP/1.1
- -

Uma chamada a um método idempotente, mas não seguro:

- -
DELETE /idX/delete HTTP/1.1
- -

Aprenda mais

- -

Conhecimento geral

- - - -

Conhecimento técnico

- - diff --git a/files/pt-br/glossario/self-executing_anonymous_function/index.html b/files/pt-br/glossario/self-executing_anonymous_function/index.html deleted file mode 100644 index 06f693ba9a..0000000000 --- a/files/pt-br/glossario/self-executing_anonymous_function/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Self-Executing Anonymous Function -slug: Glossario/Self-Executing_Anonymous_Function -translation_of: Glossary/Self-Executing_Anonymous_Function ---- -

(Self-Executing Anonymous Function) é uma função {{glossary("JavaScript")}} que é executada assim que definida. Ela também é conhecida como IIFE (Immediately Invoked Function Expression).

- -

Veja a página {{glossary("IIFE")}} para mais informações.

diff --git a/files/pt-br/glossario/semantica/index.html b/files/pt-br/glossario/semantica/index.html deleted file mode 100644 index db39cb33a2..0000000000 --- a/files/pt-br/glossario/semantica/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Semântica -slug: Glossario/Semantica -tags: - - Codificação de Script - - Glossário - - HTML - - semántica -translation_of: Glossary/Semantics ---- -

Na programação, a Semântica se refere ao significado de um trecho de código — por exemplo, "que efeito tem a execução dessa linha de JavaScript?", Ou "que finalidade ou função esse elemento HTML tem" (em vez de "como ele se parece?").

- -

Semântica em JavaScript

- -

Em JavaScript, considere uma função que aceita um parâmetro de string e retorne um elemento {{htmlelement("li")}} com essa string como seu textContent. Você precisaria examinar o código para entender o que a função fazia se fosse chamada build('Peach'), ou createLiWithContent('Peach')?

- -

Semântica em CSS

- -

No CSS, considere criar uma lista com elementos li representando diferentes tipos de frutas. Você saberia qual parte do DOM está sendo selecionada com div > ul > li, ou .fruits__item?

- -

Semântica em HTML

- -

Em HTML, por exemplo, o {{htmlelement("h1")}} é um elemento semântico, que fornece o texto que envolve a representação (ou o significado) de "um cabeçalho de nível superior em sua página".

- -
<h1>This is a top level heading</h1>
- -

Por padrão, a maioria das folhas de estilo do agente do usuário do navegador, estilizará um {{htmlelement("h1")}} com um tamanho de fonte grande para parecer um título (embora você possa estilizá-lo como quiser).

- -

Por outro lado, você pode fazer qualquer elemento parecer um cabeçalho de nível superior. Considere o seguinte:

- -
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
- -

Isso fará com que pareça um cabeçalho de nível superior, mas não tem valor semântico. Portanto, não obterá nenhum benefício extra, conforme descrito acima. Assim, é uma boa idéia usar o elemento HTML certo, para o trabalho certo.

- -

O HTML deve ser codificado para representar a data que será preenchida e não com base em seu estilo de apresentação padrão. A apresentação (como deve ser) é de responsabilidade exclusiva do CSS.

- -

Alguns dos benefícios de se escrever a marcação semântica:

- - - -

Ao abordar qual marcação usar, pergunte a si mesmo: "Quais elementos melhor descrevem/representam os dados que vou preencher?" Por exemplo, é uma lista de dados? ordenado, não ordenado? é um artigo com seções e uma parte de informações relacionadas? lista as definições? é uma figura ou imagem que precisa de legenda? deve ter um cabeçalho e rodapé, além do cabeçalho e rodapé em todo o site? etc.

- -

Elementos semânticos

- -

Estes são alguns dos aproximadamente 100 elementos semânticos disponíveis:

- - - -

Saiba mais

- - - - diff --git a/files/pt-br/glossario/seo/index.html b/files/pt-br/glossario/seo/index.html deleted file mode 100644 index bd71aa5856..0000000000 --- a/files/pt-br/glossario/seo/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: SEO - Otimização dos Mecanismos de Buscas -slug: Glossario/SEO -tags: - - Beginner - - Glossário - - Introdução - - Otimização dos Mecanismos de Busca - - SEO - - Search - - pesquisa -translation_of: Glossary/SEO ---- -

SEO (Search Engine Optimization - Otimização dos Mecanismos de Pesquisa) é o processo de fazer com que um sítio fique mais visível nos resultados da procura, também denominado melhoramento na classificação da busca.

- -

Os mecanismos de pesquisa {{Glossary("Crawler", "crawl")}} vasculham a web seguindo vínculos de uma página para outra (link) e listando os resultados encontrados. Quando se faz uma busca, o mecanismo de pesquisa exibe o conteúdo classificado. Os rastreadores seguem regras. Se você seguir essas regras, metodicamente, ao fazer uma SEO para um sítio, existirão melhores chances de que o mesmo apareça entre os primeiros resultados, aumentando o tráfego e as possibilidades de rendimentos (pelo comércio eletrônico e publicidade).

- -

Os motores de busca oferecem algumas diretrizes para SEO, mas os maiores deles mantém a classificação de resultados como um segredo comercial. A otimização - SEO - é uma combinação de orientações oficiais do mecanismo de pesquisa, conhecimento prático, entendimento de artigos científicos, ou patentes.

- -

Os métodos SEO dividem-se em três grandes classes:

- -
-
técnico
-
Rotular o conteúdo usando semântica {{Glossary("HTML")}}. Ao explorar os sítios da web os rastreadores devem encontrar, apenas, o conteúdo que você quer indexado.
-
autoria
-
Escrever conteúdos utilizando o vocabulário dos visitantes. Empregar texto e imagens de forma que os rastreadores possam entender do que se trata.
-
popularidade
-
Você consegue muito mais tráfego quando existem vínculos com outros sítios famosos.
-
- -

Aprenda mais

- -

Conhecimento Geral

- - - -

Aprenda SEO

- - diff --git a/files/pt-br/glossario/servidor/index.html b/files/pt-br/glossario/servidor/index.html deleted file mode 100644 index 4275c0496c..0000000000 --- a/files/pt-br/glossario/servidor/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Servidor -slug: Glossario/Servidor -tags: - - Glossário - - Infraestrutura - - Protocolo - - Rede - - Servidor -translation_of: Glossary/Server ---- -

Um servidor hardware é um computador compartilhado em uma rede que provê serviços a clientes. Um servidor software é um programa que provê serviços a programas clientes.

- -

Os serviços são providos normalmente pela rede local ou por redes remotas. Programas cliente e servidor tradicionalmente se conectam enviando mensagens por meio de um {{glossary("protocolo")}}.

- -

Os servidores mais comuns numa rede local são os de arquivos, nomes, emails, impressoras e fax. Outro exemplo comum de servidor é o de páginas da web conectado à Internet. Os minicomputadores, mainframes e super computadores nas centrais de dados também são servidores.

- -

Aprenda mais

- -

Conhecimentos Gerais

- - diff --git a/files/pt-br/glossario/sgml/index.html b/files/pt-br/glossario/sgml/index.html deleted file mode 100644 index ceca8484b7..0000000000 --- a/files/pt-br/glossario/sgml/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: SGML -slug: Glossario/SGML -translation_of: Glossary/SGML ---- -

O Standard Generalized Markup Language (SGML) é uma {{Glossary("ISO")}} especificação que veio para definir as declarações/sintaxe Linguagens de Marcação.

- -

On the web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, and {{Glossary("XML")}} are popular SGML-based languages. It is worth noting that since its fifth edition, HTML is no longer SGML-based and has its own parsing rules.

- -

Leia mais

- - diff --git a/files/pt-br/glossario/sincrono/index.html b/files/pt-br/glossario/sincrono/index.html deleted file mode 100644 index f37257d974..0000000000 --- a/files/pt-br/glossario/sincrono/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Síncrono -slug: Glossario/Sincrono -tags: - - Glossário - - Mecanismos Web - - Web -translation_of: Glossary/Synchronous ---- -

Síncrono refere-se a comunicação em tempo real onde cada parte recebe ( e se necessário, processa e responde) mensagens instantaneamente (ou o mais próximo possível do instantâneo).

- -

Um exemplo humano é o telefone  — durante uma chamada telefônica você costuma responder para outra pessoa imediatamente.

- -

Muitos comandos de programação são também síncronos — por exemplo quando você digita um cálculo, o ambiente irá retornar o resultado para você instantaneamente, a menos que você programe para não fazer.

- -

Saiba mais

- -

Technical reference

- - diff --git a/files/pt-br/glossario/sloppy_mode/index.html b/files/pt-br/glossario/sloppy_mode/index.html deleted file mode 100644 index 09d9dd3dc4..0000000000 --- a/files/pt-br/glossario/sloppy_mode/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Sloppy mode -slug: Glossario/Sloppy_mode -tags: - - CodingScripting - - Glossário - - JavaScript - - Sloppy -translation_of: Glossary/Sloppy_mode ---- -

A partir do {{Glossary("ECMAScript")}} 5 é possível optar pelo novo strict mode (modo estrito), que altera a semântica do JavaScript de várias maneiras para melhorar sua resiliência e facilitar a compreensão do que está acontecendo quando há problemas.

- -

O modo normal e non-strict (não estrito) do JavaScript é às vezes chamado de sloppy mode (modo desleixado, literalmente). Esta não é uma designação oficial, mas você provavelmente irá se deparar com ela se passar algum tempo escrevendo código JavaScript.

- -

Saiba mais

- -

Conecimentos Gerais

- - diff --git a/files/pt-br/glossario/stacking_context/index.html b/files/pt-br/glossario/stacking_context/index.html deleted file mode 100644 index 19e5be1656..0000000000 --- a/files/pt-br/glossario/stacking_context/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Stacking context -slug: Glossario/Stacking_context -translation_of: Glossary/Stacking_context ---- -

Stacking context refere-se refere a como elementos de uma página se empilham sobre outros elementos, assim como você pode organizar cards em cima de sua mesa, lado a lado ou sobrepostas.

- -

Leia mais

- -

General knowledge

- - diff --git a/files/pt-br/glossario/string/index.html b/files/pt-br/glossario/string/index.html deleted file mode 100644 index d825d3a869..0000000000 --- a/files/pt-br/glossario/string/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: String -slug: Glossario/String -tags: - - CodingScript - - Glossário - - Iniciante - - String -translation_of: Glossary/String ---- -

Em qualquer linguagem de programação, uma string é uma sequência de {{Glossary("character","caracteres")}} usados para representar texto

- -

Em {{Glossary("JavaScript")}}, uma String é um dos {{Glossary("Primitive", "valores primitivos")}} e o objeto {{jsxref("String")}} é um {{Glossary("wrapper")}} em cima do tipo primitivo string.

- -

Leia mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/svg/index.html b/files/pt-br/glossario/svg/index.html deleted file mode 100644 index dc2c942196..0000000000 --- a/files/pt-br/glossario/svg/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: SVG -slug: Glossario/SVG -tags: - - Glossário - - Iniciante - - SVG - - graficos - - 'l10n:priority' -translation_of: Glossary/SVG ---- -

Scalable Vector Graphics (SVG) é um formato de imagem vetorial 2D baseado em uma sintaxe {{Glossary("XML")}}.

- -

A {{Glossary("W3C")}} iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando o {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 foi lançado com suporte a SVG. Atualmente a maioria dos {{Glossary("browser","navegadores")}} suportam SVG.

- -

Baseado na sintaxe de {{Glossary("XML")}}, SVG pode ser estilizado com {{Glossary("CSS")}} e apresentar interatividade usando {{Glossary("JavaScript")}}. Em HTML5 é possível embutir diretamente {{Glossary("Tag","tags")}} SVG em um documento {{Glossary("HTML")}}.

- -

Sendo um formato para gráficos vetoriais, imagens SVG podem ser redimensionadas infinitamente, tendo um valor inestimável em {{Glossary("responsive design","design responsivo")}}, já que você pode criar elementos de interface e gráficos que se comportam bem em qualquer tamanho de tela. SVG também traz um conjunto de funcionalidades úteis, como clipping, máscaras, filtros e animações.

- -

Exemplo

- -

Abaixo você pode conferir a renderização de dois círculos de tamanhos e cores diferentes utilizando SVG. 

- -
<svg width="100" height="300">
-   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="10" fill="red" />
-   <circle cx="50" cy="150" r="20" stroke="green" stroke-width="10" fill="yellow" />
-</svg>
- -

Repare que cx e cy são para definir as coordenadas x e y do círculo, r é para definir o raio do círculo, o preenchimento é definido com fill, a largura do contorno é definida com stroke-width e a cor do contorno é definida com stroke. Lembrando que a largura e altura do svg em si são definidas no próprio elemento.

- -

Saiba mais

- -

Conhecimento Geral

- - - -

Aprendendo SVG

- - - -

Informação técnica

- - diff --git a/files/pt-br/glossario/symbol/index.html b/files/pt-br/glossario/symbol/index.html deleted file mode 100644 index 82309a12e5..0000000000 --- a/files/pt-br/glossario/symbol/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Symbol -slug: Glossario/Symbol -translation_of: Glossary/Symbol ---- -

Esse termo do glossário descreve tanto o tipo de dados chamado "symbol", quando a função/classe "{{jsxref("Symbol")}}()", que entre outras coisas, cria instâncias do tipo de dados symbol.

- -

O tipo de dados "symbol" é qualificado como um primitivo, onde valores desse tipo podem ser usados para fazer propriedades de objetos anônimos. Ele pode ser usado como chave de uma propriedade de objeto quando este tem a intenção de ser privada, para uso interno da classe ou do tipo do objeto em questão. Como exemplo, chaves do tipo symbol existem em vários objetos internos do JavaScript. Da mesma forma, pode-se construir classes que tenham membros privados usando essa técnica. O tipo de dados symbol é de propósito altamente especializado, o que o torna pouco versátil; uma instância de Symbol pode ser atribuída à um L-value, e pode ter sua identidade examinada, nada mais; nenhuma outra operação poderá ser aplicada, o que contrasta, por exemplo, com uma instância de Number para um inteiro cujo valor é 42, que por sua vez tem diversas operações para comparar, combinar com outros tipos de dados, etc.

- -

Um valor do tipo de dados "symbol" pode ser referenciado como um "valor symbol". Em JavaScript, um valor symbol é criado através da função Symbol(), que dinamicamente produz um valor único e anônimo. A única utilização sensata para para essa construção é armazená-la em uma variável que será utilizada como chave para uma propriedade de objeto cujo objetivo é torná-lo anônimo.

- -

O exemplo abaixo guarda um valor symbol em uma variável myPrivateMethod para usar como chave do objeto this:

- -
let myPrivateMethod = Symbol();
-this[myPrivateMethod] = function() {...};
- -

Quando um valor de um symbol é usado como o identificador em uma atribuição de propriedade, a propriedade (como o symbol) é anônima; e também é não-enumerável. Como a propriedade não é enumerável, ela não será mostrada como um membro na construção de loop "for( ... in ...)" e, como a propriedade é anônima, ela não será mostrada no array de resultados de "Object.getOwnPropertyNames()". A propriedade pode ser acessada usando o symbol original que a criou ou iterando o array de resultados de "Object.getOwnPropertySymbols() ". No exemplo de código anterior, o acesso à propriedade será através do valor armazenado na variável myPrivateMethod.

- -

The built-in function "{{jsxref("Symbol")}}()" is an incomplete class that returns a symbol value when called as a function, that throws an error upon attempts to use it as a constructor with the syntax "new Symbol()", that has static methods for accessing JavaScript's global symbol table, and that has static properties for addressing certain symbols that are present in commonly used objects. The creation of symbol values by the Symbol() function was explained above. The throwing of an error upon attempts to use Symbol() as a constructor is explained as a precaution against the accidental creation of an object that might cause confusion. The methods that access the global symbol registry are "Symbol.for()" and "Symbol.keyFor()"; these mediate between the global symbol table (or "registry") and the run-time environment. The symbol registry is mostly built by JavaScript's compiler infrastructure, and the symbol registry's content is not available to JavaScript's run-time infrastructure, except through these reflective methods. The method Symbol.for("tokenString") returns a symbol value from the registry, and Symbol.keyFor(symbolValue) returns a token string from the registry; each is the other's inverse, so the following is true:

- -
Symbol.keyFor(Symbol.for("tokenString"))=="tokenString";  // true
-
- -

The Symbol class has some static properties that have the ironic effect of naming the anonymous. There are only a few of these; they are for some so-called "well known" symbols. These are symbols for some selected method properties that are found in certain built-in objects. The exposure of these symbols makes it possible to have direct access to these behaviors; such access might be useful, for example, in the definition of a custom class. Examples of well-known symbols are: "Symbol.iterator" for array-like objects, and "Symbol.search" for string objects. 

- -

The Symbol() function and the symbol values it creates might be useful to programers designing a custom class. Symbol values provide a way by which custom classes can create private members, and maintain a symbol registry that pertains just to that class. A custom class can use symbol values to create "own" properties that are shielded from unwanted, casual discovery. Within the class definition, the dynamically created symbol value is saved to a scoped variable, available only privately within the class definition. There is no token string; the scoped variable plays the equivalent role of a token.

- -

In some programming languages the symbol data type is referred to as an "atom."  

- -

In {{Glossary("JavaScript")}}, Symbol is a {{Glossary("Primitive", "primitive value")}}.

- -

Symbol can have an optional description, but for debugging purposes only.

- -

Symbol type is a new feature in ECMAScript 2015 and there is no ECMAScript 5 equivalent for symbol.

- -
Symbol("foo") !== Symbol("foo")
-const foo = Symbol()
-const bar = Symbol()
-typeof foo === "symbol"
-typeof bar === "symbol"
-let obj = {}
-obj[foo] = "foo"
-obj[bar] = "bar"
-JSON.stringify(obj) // {}
-Object.keys(obj) // []
-Object.getOwnPropertyNames(obj) // []
-Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]
- -

Learn more

- -

General knowledge

- - diff --git a/files/pt-br/glossario/tag/index.html b/files/pt-br/glossario/tag/index.html deleted file mode 100644 index 23182eef2d..0000000000 --- a/files/pt-br/glossario/tag/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Tag -slug: Glossario/Tag -tags: - - Codificação de Scripts - - Glossário - - HTML - - Introdução -translation_of: Glossary/Tag ---- -

Em {{Glossary("HTML")}} a tag é usada para criar um {{Glossary("element", "elemento")}}.  O nome de um elemento HTML é o nome usado entre colchetes angulares como "<p>" para criar parágrafos. Note que ao fechar uma tag ela tem uma barra antes de seu nome, "</p>" , e que em elementos vazios a tag final não é requirida e nem permitida. Se os {{Glossary("Attribute", "atributos")}} não forem mencionados, os valores padrões serão usados em cada caso.

- -

Aprenda mais

- -

Conhecimentos gerais

- - - -

Referência técnica

- - diff --git a/files/pt-br/glossario/tcp/index.html b/files/pt-br/glossario/tcp/index.html deleted file mode 100644 index 56247facce..0000000000 --- a/files/pt-br/glossario/tcp/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: TCP -slug: Glossario/TCP -tags: - - Glossário - - Infraestrutura - - Redes - - TCP - - Transmission Control Protocol - - dados -translation_of: Glossary/TCP ---- -

TCP (Transmission Control Protocol, em português, Protocolo de Controle de Transmissão) é um importante {{Glossary("protocol", "protocolo")}} de rede que permite dois hosts se conectem e troquem dados. TCP garante a entrega de dados e pacotes na mesma ordem que foram enviados. Vint Cerf e Bob Kahn, que na época eram cientistas da DARPA (Defense Advanced Research Projects Agency, em português, Agência de Pesquisas em Projetos Avançados de Defesa), projetaram TCP na década de 1970.

- -

Saiba Mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/three_js/index.html b/files/pt-br/glossario/three_js/index.html deleted file mode 100644 index 8d3415b661..0000000000 --- a/files/pt-br/glossario/three_js/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Three js -slug: Glossario/Three_js -tags: - - CodingScripting - - JavaScript - - Linguagem de Programação - - Navegador - - three.js -translation_of: Glossary/Three_js ---- -

three.js é um motor {{Glossary("WebGL")}} baseado em {{Glossary("JavaScript")}} que pode executar jogos movidos com GPU ou outros aplicativos gráficos diretamente do {{Glossary("navegador")}}. A biblioteca three.js fornece várias funções e {{Glossary("API","APIs")}} para desenhar cenas 3D em seu navegador.

- -

Saiba mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/tls/index.html b/files/pt-br/glossario/tls/index.html deleted file mode 100644 index 4cfbc209ee..0000000000 --- a/files/pt-br/glossario/tls/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: TLS -slug: Glossario/TLS -tags: - - Criptografía - - Glossário - - Infraestrutura - - Segurança -translation_of: Glossary/TLS ---- -

Transport Layer Security (TLS), previamente conhecido como Secure Sockets Layer (SSL), é um {{Glossary("protocolo")}} usado por aplicativos para se comunicar de forma segura em toda a rede, evitando adulteração e espionagem no email, navegador, mensagens e outros protocolos.

- -

Todos os navegadores atuais suportam o protocolo TLS, exigindo que o servidor forneça um {{Glossary("Digital certificate", "certificado digital")}} válido que confirme sua identidade para estabelecer uma conexão segura. É possível para ambos, o cliente e o servidor, se autentiquem mutuamente, se ambas partes providenciar seus próprios certificados digitais individuais.

- -

Conhecimento geral

- - - -

Especificações

- - diff --git a/files/pt-br/glossario/topico_de_alinhamento/index.html b/files/pt-br/glossario/topico_de_alinhamento/index.html deleted file mode 100644 index cfaebfb6ce..0000000000 --- a/files/pt-br/glossario/topico_de_alinhamento/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Tópico de Alinhamento -slug: Glossario/topico_de_alinhamento -tags: - - CSS - - Glossário - - alinhamento - - assunto de alinhamento - - tópico de alinhamento -translation_of: Glossary/Alignment_Subject ---- -

No Alinhamento de Box do CSS, o tópico (assunto) de alinhamento é a coisa (ou coisas) que está sendo alinhada pelas propriedades.

- -

Para o {{cssxref("justify-self")}} e {{cssxref("align-self")}}, o tópico de alinhamento é o box de margem do box em que a propriedade está definida, usando o modo de escrita desse box.

- -

Para o {{cssxref("justify-content")}} e {{cssxref("align-content")}}, o modo de escrita do box também é usado. A definição do tópico de alinhamento depende do modo de layout que está sendo usado.

- -
-
Contêineres de bloco (incluindo células de tabela)
-
Todo o conteúdo do bloco como uma única unidade.
-
Contêineres de colunas múltiplas (multicol)
-
As caixas de colunas, com qualquer espaçamento inserido entre as caixas de colunas adicionado às lacunas de coluna relevantes.
-
Contêineres flexíveis
-
Para {{cssxref("justify-content")}}, os items flexíveis em cada linha flexível.
- Para {{cssxref("align-content")}}, as linhas flexíveis. Perceba que, isso só tem efeito em contêineres flexíveis de múltiplas linhas.
-
Contêineres grid
-
As trilhas do grid nos eixos apropriados, com qualquer espaçamento inserido entre trilhas adicionado à gutters relevantes. Gutters colapsados são tratados como uma oportunidade única para inserção no espaço.
-
- -

Saiba mais

- - - -
-
-
diff --git "a/files/pt-br/glossario/tratando_formul\303\241rios_com_php/index.html" "b/files/pt-br/glossario/tratando_formul\303\241rios_com_php/index.html" deleted file mode 100644 index db1791d5e7..0000000000 --- "a/files/pt-br/glossario/tratando_formul\303\241rios_com_php/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Tratando Formulários com PHP -slug: Glossario/Tratando_Formulários_com_PHP -tags: - - Método POST - - PHP -translation_of: Glossary/Tratando_Formulários_com_PHP ---- -

Uma das características mais fortes do PHP é o jeito como ele trata formulários HTML. O conceito básico que é importante entender é que qualquer elemento de formulário irá automaticamente ficar disponível para seus scripts PHP. Por favor leia a seção Variáveis externas do PHP para mais informações e exemplos de como usar formulários com PHP. Aqui vai um exemplo de formulário HTML:

- -

Enviando Dados com método POST

- -

 

- -
<form action="arquivo.php" method="post">
- <p>Nome: <input type="text" name="nnome" /></p>
- <p>idade: <input type="text" name="idade" /></p>
- <p><input type="submit" /></p>
-</form>
- -

 

diff --git a/files/pt-br/glossario/truthy/index.html b/files/pt-br/glossario/truthy/index.html deleted file mode 100644 index 872e53df91..0000000000 --- a/files/pt-br/glossario/truthy/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Truthy -slug: Glossario/Truthy -tags: - - CodingScripting - - Glossário - - JavaScript -translation_of: Glossary/Truthy ---- -

Em {{Glossary("JavaScript")}}, um valor truthy é um valor que se traduz em verdadeiro quando avaliado em um contexto {{Glossary("Booleano")}}. Todos os valores são truthy a menos que eles sejam definidos como {{Glossary("Falsy", "falsy")}} (ou seja., exceto para false, 0, "", null, undefined, e NaN).

- -

O {{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerção")}} de tipo em contextos booleanos.

- -

Exemplos de valores truthy em JavaScript (que se traduzirão em true, e então executar o bloco if):

- -
if (true)
-if ({})
-if ([])
-if (42)
-if ("foo")
-if (new Date())
-if (-42)
-if (3.14)
-if (-3.14)
-if (Infinity)
-if (-Infinity)
- -

Veja também

- - diff --git a/files/pt-br/glossario/undefined/index.html b/files/pt-br/glossario/undefined/index.html deleted file mode 100644 index cda7c27ea3..0000000000 --- a/files/pt-br/glossario/undefined/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: undefined -slug: Glossario/undefined -translation_of: Glossary/undefined ---- -

Um valor  {{Glossary("primitive")}} automaticamente atribuido para variaveis que foram recentemente declaradas ou para {{Glossary("Argument","arguments")}} formais para qual não existem argumentos atualmente.

- -

Aprenda mais

- -

Conhecimentos gerais

- - - -

Referência Técnica

- - diff --git a/files/pt-br/glossario/uri/index.html b/files/pt-br/glossario/uri/index.html deleted file mode 100644 index 50c9ede26d..0000000000 --- a/files/pt-br/glossario/uri/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: URI -slug: Glossario/URI -translation_of: Glossary/URI ---- -

A URI (Uniform Resource Identifier, ou Identificador Uniforme de Recursos) é uma string (sequência de caracteres) que se refere a um recurso. A mais comum é a {{Glossary("URL")}}, que identifica o recurso localizando-o na Web. {{Glossary("URN","URNs")}}, em contraste, refere-se a um recurso pelo nome, em dado namespace. Ex: o ISBN de um livro.

- -

Aprenda mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/url/index.html b/files/pt-br/glossario/url/index.html deleted file mode 100644 index 1012b7004e..0000000000 --- a/files/pt-br/glossario/url/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: URL -slug: Glossario/URL -tags: - - Glossário - - Infraestrutura -translation_of: Glossary/URL ---- -

Uniform Resource Locator (URL) é uma sequência de texto que especifica onde um recurso pode ser encontrado na Internet.

- -

No contexto de {{Glossary("HTTP")}}, URLs são chamadas de "Endereços web" ou "link". Seu navegador exibe as URLs na barra de endereços, por exemplo https://developer.mozilla.org

- -

URLs também podem ser usadas para transferir arquivos por ({{Glossary("FTP")}}) , emails ({{Glossary("SMTP")}}), e outras aplicações.

- -

Aprenda mais

- -

Conhecimento Geral

- - - -

Saiba mais

- - diff --git a/files/pt-br/glossario/utf-8/index.html b/files/pt-br/glossario/utf-8/index.html deleted file mode 100644 index a056fe392a..0000000000 --- a/files/pt-br/glossario/utf-8/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: UTF-8 -slug: Glossario/UTF-8 -translation_of: Glossary/UTF-8 ---- -

UTF-8 (UCS Transformation Format 8) é a codificação de caracteres mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do ASCII e pode representar qualquer caractere Unicode padrão.

- -

Os primeiros 128 caracteres UTF-8 correspondem exatamente aos primeiros 128 caracteres ASCII (numerados de 0 a 127), o que significa que o texto ASCII existente já é UTF-8 válido. Todos os outros caracteres usam dois a quatro bytes. Cada byte tem alguns bits reservados para fins de codificação. Como caracteres não ASCII requerem mais de um byte para armazenamento, eles correm o risco de serem corrompidos se os bytes forem separados e não forem recombinados.

- -

Leia mais

- -

Conhecimento Geral

- - diff --git a/files/pt-br/glossario/ux/index.html b/files/pt-br/glossario/ux/index.html deleted file mode 100644 index b2037753e6..0000000000 --- a/files/pt-br/glossario/ux/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: UX -slug: Glossario/UX -tags: - - Acessibilidade - - Composição - - Design - - Glossário - - Navegação -translation_of: Glossary/UX ---- -

UX é um acrônimo que significa experiência do usuário (User eXperience). É o estudo da interação entre usuários e um sistema. Seu objetivo é tornar um sistema fácil de interagir do ponto de vista do usuário.

- -

O sistema pode ser qualquer produto ou aplicativo com o qual um usuário final deve interagir. Os estudos de UX realizados em uma página da web podem demostrar, por exemplo, se é fácil para os usuários entenderem a página, navegarem para diferentes áreas e concluírem tarefas comuns, e onde tais processos poderiam ter menos fricção.

- -

Saber mais

- -

Conhecimento geral

- - diff --git a/files/pt-br/glossario/valor/index.html b/files/pt-br/glossario/valor/index.html deleted file mode 100644 index b03c28a030..0000000000 --- a/files/pt-br/glossario/valor/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Valor -slug: Glossario/Valor -tags: - - Glossário -translation_of: Glossary/Value ---- -

No contexto de dados ou um objeto {{Glossary("Wrapper", "wrapper")}} em torno desses dados, o valor é um {{Glossary("Primitive","valor primitivo")}} que contém o wrapper do objeto. No contexto de uma {{Glossary("Variável","variável")}} ou {{Glossary("Property","propriedade")}}, o valor pode ser primitivo ou {{Glossary("Object reference","refêrencia de um objeto")}}.

- -

Aprender mais

- -

Conhecimento geral

- - diff --git "a/files/pt-br/glossario/vari\303\241vel/index.html" "b/files/pt-br/glossario/vari\303\241vel/index.html" deleted file mode 100644 index 6daf0decae..0000000000 --- "a/files/pt-br/glossario/vari\303\241vel/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Variável -slug: Glossario/Variável -tags: - - JavaScript - - Programando -translation_of: Glossary/Variable ---- -

Uma variável (variable) é um local nomeado para armazenar um {{Glossary("Valor", "valor")}}. Dessa forma, um valor pode ser acessado através de um nome predeterminado.

- -

Leia mais

- -

Conhecimento geral

- - - -

Referências técnicas

- - diff --git a/files/pt-br/glossario/viewport/index.html b/files/pt-br/glossario/viewport/index.html deleted file mode 100644 index b8a740ac92..0000000000 --- a/files/pt-br/glossario/viewport/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Viewport -slug: Glossario/Viewport -tags: - - Glossário - - Tradução - - pt-br - - viewport -translation_of: Glossary/Viewport ---- -

Uma viewport representa uma área poligonal (normalmente retangular) que está sendo exibida no momento. Em termos de navegador web, se refere a parte do documento que é exibida na janela (ou tela, se o documento estiver exibido em modo tela-cheia). Conteúdos fora da viewport não são visíveis na janela/tela até que seja rolado para sua área de visualização.

- -

A porção da viewport que está visível no momento é chamada de visual viewport . Esta pode ser menor que a viewport de layout, assim é quando o usuário efetua uma pinçada/zoom. O viewport de layout permanece o mesmo, mas a visual viewport se torna menor.

- - diff --git a/files/pt-br/glossario/w3c/index.html b/files/pt-br/glossario/w3c/index.html deleted file mode 100644 index eafc150620..0000000000 --- a/files/pt-br/glossario/w3c/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: W3C -slug: Glossario/W3C -tags: - - Comunidade - - Consórcio - - Consórcio Web - - Glossário - - Introdução - - W3C -translation_of: Glossary/W3C ---- -

O Consórcio da Rede Mundial (tradução livre de World Wide Web Consortium), ou simplesmente W3C é uma sociedade internacional que mantém as regras e  frameworks {{Glossary("World Wide Web", "relacionadas à Web")}}

- -

Consiste de mais de 350 membros e organizações que, conjuntamente, desenvolvem a padronização da Internet, coordenam programas de divulgação, e mantém um fórum aberto para falar de Internet. O W3C coordena empresas na indústria para certificar que elas implementam os mesmos padrões da W3C.

- -

Cada padrão passa por quatro estágios de maturidade: Rascunho em Desenvolvimento (WD - Working Draft), Candidato a Recomendação (CR - Candidate Recommendation), Recomendação Proposta (PR - Proposed Recommendation), e Recomendação da W3C (REC - Recommended by the W3C).

- -

Saiba mais

- -

Conhecimentos Gerais

- - diff --git a/files/pt-br/glossario/webp/index.html b/files/pt-br/glossario/webp/index.html deleted file mode 100644 index c323b6a3de..0000000000 --- a/files/pt-br/glossario/webp/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: WebP -slug: Glossario/webp -translation_of: Glossary/webp ---- -

WebP é um formato de compressão de imagem lossless e lossy desenvolvido pelo Google.

- -

Saiba mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/websockets/index.html b/files/pt-br/glossario/websockets/index.html deleted file mode 100644 index bb0f72368c..0000000000 --- a/files/pt-br/glossario/websockets/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebSockets -slug: Glossario/WebSockets -translation_of: Glossary/WebSockets ---- -

WebSocket é um {{Glossary("protocolo")}} que permite persistir conexões {{Glossary("TCP")}} entre o {{Glossary("servidor")}} e o cliente de modo que se possa trocar dados a qualquer momento.

- -

Qualquer aplicação de servidor ou cliente pode usar WebSocket, mas principalmente {{Glossary("Navegador", "navegadores")}} web e web servers. Através do WebSocket, servidores podem passar dados a um cliente sem um pedido prévio desse cliente, permitindo atualizações dinâmicas de conteúdo.

- -

 

- -

 

- -

Learn more

- -

 

- -

General knowledge

- - - -

Technical reference

- - - -

Learn about it

- - diff --git a/files/pt-br/glossario/whatwg/index.html b/files/pt-br/glossario/whatwg/index.html deleted file mode 100644 index e743a0543a..0000000000 --- a/files/pt-br/glossario/whatwg/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: WHATWG -slug: Glossario/WHATWG -tags: - - Comunidade - - GRUTTAH - - Glossário - - HTML - - HTML5 - - Internet - - WHATWG - - Web -translation_of: Glossary/WHATWG ---- -

O GRUTTAH (WHATWG - sigla em inglês) (Grupo de Trabalho da Tecnologia de Aplicação Hipertexto da Web tradução livre de Web Hypertext Application Working Group) é uma organização que mantém e desenvolve o {{Glossary("HTML")}} e as {{Glossary("API", "APIs")}} para aplicações Web. Antigos funcionários da Apple, Mozilla e Opera, estabeleceram o GRUTTAH em 2004.

- -

Os editores de especificações na GRUTTAH pesquisam e colhem feedbacks para a especificação de documentos. O grupo també tem um pequeno comitê de membros convidados e autorizados a sobrescrever ou substituir as especificações dos editores.
- Você também pode se juntar como contribuidor, assinando a lista de correspondência.

- -

De acordo com o site deles, GRUTTAH é uma resposta ao lento progresso de padronização da Web da {{Glossary("W3C", "W3C's")}}, especialmente o HTML, que teve seu desenvolvimento parado para a W3C concentrar no {{Glossary("XHTML")}}.

- -

O GRUTTAH mantém especificações para {{Glossary("HTML")}}, {{Glossary("DOM")}} e {{Glossary("JavaScript")}}.

- -

Saiba mais

- -

Conhecimentos gerais

- - diff --git a/files/pt-br/glossario/wrapper/index.html b/files/pt-br/glossario/wrapper/index.html deleted file mode 100644 index 1af1581d67..0000000000 --- a/files/pt-br/glossario/wrapper/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Wrapper -slug: Glossario/Wrapper -tags: - - CodingScripting - - Glossary - - Wrapper -translation_of: Glossary/Wrapper ---- -

Em linguagens de programação, como o JavaScript, um wrapper é uma função destinada a chamar uma ou mais funções, às vezes diretamente por conveniência, e às vezes adaptá-las para fazer uma tarefa ligeiramente diferente no processo.

- -

Por exemplo, as bibliotecas do SDK para AWS são exemplos de wrappers.

- -

Aprender mais

- -

Conhecimento Geral

- -

{{Interwiki("wikipedia", "Wrapper function")}} em Wikipedia

diff --git a/files/pt-br/glossario/xhr_(xmlhttprequest)/index.html b/files/pt-br/glossario/xhr_(xmlhttprequest)/index.html deleted file mode 100644 index 0b39fd44f1..0000000000 --- a/files/pt-br/glossario/xhr_(xmlhttprequest)/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: XHR (XMLHttpRequest) -slug: Glossario/XHR_(XMLHttpRequest) -translation_of: Glossary/XHR_(XMLHttpRequest) ---- -

{{domxref("XMLHttpRequest")}} (XHR) é uma {{Glossary("API")}} {{Glossary("JavaScript")}} para criar requisições {{Glossary("AJAX")}}. Os métodos desta API fornecem opções para enviar requisições entre o {{Glossary("browser")}} e o {{Glossary("server")}}.

- -

Veja mais

- -

Geral

- - - -

Informações técnicas

- - diff --git a/files/pt-br/glossario/xml/index.html b/files/pt-br/glossario/xml/index.html deleted file mode 100644 index 76e5938dc0..0000000000 --- a/files/pt-br/glossario/xml/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: XML -slug: Glossario/XML -tags: - - Glossário - - XML -translation_of: Glossary/XML ---- -

eXtensible Markup Language (XML) é uma linguagem de marcação genérica especificada pela W3C. A indústria de tecnologia da informação (TI) utiliza várias linguagens baseadas em XML para descrição de dados.

- -

Tags XML são muito semelhantes a tags HTML, mas XML é muito mais flexível porque permite os usuários definirem suas próprias tags. Dessa forma o XML atua como uma meta-linguagem — isto é, pode ser usada para definir outras linguagens, como {{Glossary("RSS")}}. Além disso, HTML é uma linguagem para apresentação, enquanto XML é uma linguagem para descrever dados. Isto significa que XML tem aplicações muito mais amplas do que apenas a Web. Por exemplo, Web services podem usar XML para trocar requisições e respostas.

- -

Saiba mais

- - diff --git a/files/pt-br/glossary/404/index.html b/files/pt-br/glossary/404/index.html new file mode 100644 index 0000000000..bb287ab6ea --- /dev/null +++ b/files/pt-br/glossary/404/index.html @@ -0,0 +1,18 @@ +--- +title: '404' +slug: Glossario/404 +tags: + - Erros HTTP + - Glossário + - Infraestrutura + - Navegação +translation_of: Glossary/404 +--- +

O 404 é um código de resposta padrão que significa que o {{Glossary("Server", "server")}} não consegue encontrar o recurso solicitado.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/502/index.html b/files/pt-br/glossary/502/index.html new file mode 100644 index 0000000000..f2590b71fe --- /dev/null +++ b/files/pt-br/glossary/502/index.html @@ -0,0 +1,16 @@ +--- +title: '502' +slug: Glossario/502 +translation_of: Glossary/502 +--- +

Um erro {{Glossary("HTTP")}}  que significa "Bad Gateway".

+ +

O {{Glossary("Servidor","Servidor")}} pode agir como um gateway ou proxy (go-between) entre um cliente  (como seu navegador web) ou outro, servidor de upstream. Quando sua requisição tenta acessar uma {{Glossary("URL")}}, o servidor de gateway pode retransmitir sua requisição para o servidor de upstream. "502" significa que o servidor de upstream retorou uma resposta inválida.

+ +

Normalmente o servidor de upstream não esta fora (ou seja, não fornece resposta ao gateway/proxy), mas simplesmente não entende o mesmo protocolo de troca de dados(data-exchange) como o gateway/proxy. Os {{Glossary("Protocol", "protocols")}} de Internet são bem explícitos, então um 502 normalmente significa que uma ou ambas as maquinas estão programadas incorretamente ou parcialmente.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/abstraction/index.html b/files/pt-br/glossary/abstraction/index.html new file mode 100644 index 0000000000..dc3b2df79e --- /dev/null +++ b/files/pt-br/glossary/abstraction/index.html @@ -0,0 +1,19 @@ +--- +title: Abstração +slug: Glossario/Abstração +tags: + - Abstração + - Glossário + - Linguagem de Programação + - Programação +translation_of: Glossary/Abstraction +--- +

Abstração em {{Glossary("programação de computadores")}} é uma forma de reduzir a complexidade e tornar o projeto e a implementação mais eficientes em sistemas complexos de software. Ela esconde a complexidade técnica de um sistema por trás de uma {{Glossary("API", "APIs")}} mais simples.

+ +

Saiba mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/accessibility/index.html b/files/pt-br/glossary/accessibility/index.html new file mode 100644 index 0000000000..053c6be755 --- /dev/null +++ b/files/pt-br/glossary/accessibility/index.html @@ -0,0 +1,32 @@ +--- +title: Acessibilidade +slug: Glossario/Acessibilidade +tags: + - Acessibilidade + - Glossário +translation_of: Glossary/Accessibility +--- +

Acessibilidade na Web (Web Accessibility) (A11Y) refere-se às melhores práticas para manter um site útil, apesar das restrições físicas e técnicas. A acessibilidade da Web é formalmente definida e discutida no {{Glossary("W3C")}} através de {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

+ +

Leia Mais

+ +

Conhecimento Geral

+ + + +

Aprenda sobre acessibilidade na web

+ + + +

Referências Técnicas

+ + diff --git a/files/pt-br/glossary/accessibility_tree/index.html b/files/pt-br/glossary/accessibility_tree/index.html new file mode 100644 index 0000000000..f05c237cf1 --- /dev/null +++ b/files/pt-br/glossary/accessibility_tree/index.html @@ -0,0 +1,45 @@ +--- +title: Árvore de Acessibilidade +slug: Glossario/arvore_de_acessibilidade +tags: + - AOM + - Acessibilidade + - DOM + - Glossário + - Referencia +translation_of: Glossary/Accessibility_tree +--- +

A árvore de acessibilidade contém informação relacionada à {{Glossary("accessibility", "acessibilidade")}} para a maioria dos elementos HTML.

+ +

Navegadores convertem a marcação em uma representação interna chamada árvore do DOM. A árvore do DOM contém objetos representando todas as marcações de elementos, atributos e nós de texto. Os navegadores, então, criam uma árvore de acessibilidade baseada na árvore do DOM, a qual é usada por APIs específicas de plataforma para fornecer uma representação que possa ser entendida por tecnologias assistivas, como leitores de tela.

+ +

Há quatro coisas em um objeto da árvore de acessibilidade:

+ +
+
nome
+
Como podemos nos referir a esse objeto? Por exemplo, um link com o texto "Leia mais" terá "Leia mais" como seu atributo name (saiba mais como os nomes são computados em Accessible Name and Description Computation spec).
+
descrição
+
Como podemos descrever esse objeto se quisermos fornecer mais detalhes além do nome? A descrição de uma tabela pode explicar que tipo de informação ela contém.
+
função
+
Que tipo de objeto é esse? Por exemplo, é um botão, uma barra de navegação ou uma lista de items?
+
estado
+
Tem um estado? Os exemplos incluem caixas de seleção marcadas ou desmarcadas, e recolhido ou expandido para o elemento <summary>·
+
+ +

Adicionalmente, a árvore de acessibilidade frequentemente contém informação sobre o que pode ser feito com um elemento: um link pode ser seguido, uma entrada de texto pode ser digitada, entre outras coisas.

+ +

Enquanto continua em forma de rascunho na Web Incubator Community Group, o Modelo de Objeto de Acessibilidade (Accessibility Object Model, AOM), tem a intenção de incubar APIs que facilitam expressar a semântica de acessibilidade e potencialmente permitir acesso de leitura à árvore de acessibilidade computada.

+ + + + diff --git a/files/pt-br/glossary/adobe_flash/index.html b/files/pt-br/glossary/adobe_flash/index.html new file mode 100644 index 0000000000..5699633794 --- /dev/null +++ b/files/pt-br/glossary/adobe_flash/index.html @@ -0,0 +1,20 @@ +--- +title: Adobe Flash +slug: Glossario/Adobe_Flash +tags: + - Flash + - Glossário + - Infraestrutura +translation_of: Glossary/Adobe_Flash +--- +

Flash é uma tecnologia obsolescente desenvolvida pela Adobe que possibilita aplicativos Web, gráficos de vetor e multimídia. Você precisa instalar o plugin certo para usar o Flash dentro de um {{Glossary("Navegador","navegador web")}}.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/ajax/index.html b/files/pt-br/glossary/ajax/index.html new file mode 100644 index 0000000000..e83a091e72 --- /dev/null +++ b/files/pt-br/glossary/ajax/index.html @@ -0,0 +1,32 @@ +--- +title: AJAX +slug: Glossario/AJAX +tags: + - AJAX + - Glossário + - Infraestrutura + - Intro + - Introdução +translation_of: Glossary/AJAX +--- +

AJAX (Asynchronous {{glossary("JavaScript")}} e {{glossary("XML")}}) é uma prática de programação da combinação de {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, o {{glossary("DOM")}}, e o XMLHttpRequest {{glossary("object")}} para a construção de páginas web mais complexas.

+ +

O que o AJAX permite é que você faça apenas atualizações em partes de uma página web ao invés de recarregá-la inteira novamente. O AJAX também permite que você trabalhe de forma assíncrona, o que significa que o seu código continua rodando enquanto uma parte da sua página está em processo de carregamento (em comparação com síncrono, que irá bloquear a execução do seu código até que toda a sua página web seja recarregada).

+ +

Com websites interativos e padrões web modernos, o AJAX está sendo substituído gradualmente por funcões presentes em frameworks JavaScript e o padrão oficial Fetch API.

+ +

Saiba mais

+ +

Conhecimentos gerais

+ + + +

Informações técnicas

+ + diff --git a/files/pt-br/glossary/algorithm/index.html b/files/pt-br/glossary/algorithm/index.html new file mode 100644 index 0000000000..ed80819f54 --- /dev/null +++ b/files/pt-br/glossary/algorithm/index.html @@ -0,0 +1,10 @@ +--- +title: Algoritmo +slug: Glossario/Algoritmo +tags: + - CodingScripting + - Glossário + - Programação +translation_of: Glossary/Algorithm +--- +

Um algoritmo é uma série de instruções independentes que executam uma função.

diff --git a/files/pt-br/glossary/alignment_container/index.html b/files/pt-br/glossary/alignment_container/index.html new file mode 100644 index 0000000000..e181c3a0ca --- /dev/null +++ b/files/pt-br/glossary/alignment_container/index.html @@ -0,0 +1,17 @@ +--- +title: Contêiner de Alinhamento +slug: Glossario/conteiner_de_alinhamento +tags: + - Alinhamento de contêiner + - CSS + - Glossário + - alinhamento +translation_of: Glossary/Alignment_Container +--- +

O contêiner de alinhamento é um retângulo dentro do qual os tópicos de alinhamento são alinhados, isto é, definidos. Isso é definido pelo modelo de layout; geralmente é o bloco que contém o tópico de alinhamento, e assume o modo de escrita do box estabelecendo o bloco de conteúdo.

+ +

Saiba mais

+ + diff --git a/files/pt-br/glossary/alignment_subject/index.html b/files/pt-br/glossary/alignment_subject/index.html new file mode 100644 index 0000000000..cfaebfb6ce --- /dev/null +++ b/files/pt-br/glossary/alignment_subject/index.html @@ -0,0 +1,38 @@ +--- +title: Tópico de Alinhamento +slug: Glossario/topico_de_alinhamento +tags: + - CSS + - Glossário + - alinhamento + - assunto de alinhamento + - tópico de alinhamento +translation_of: Glossary/Alignment_Subject +--- +

No Alinhamento de Box do CSS, o tópico (assunto) de alinhamento é a coisa (ou coisas) que está sendo alinhada pelas propriedades.

+ +

Para o {{cssxref("justify-self")}} e {{cssxref("align-self")}}, o tópico de alinhamento é o box de margem do box em que a propriedade está definida, usando o modo de escrita desse box.

+ +

Para o {{cssxref("justify-content")}} e {{cssxref("align-content")}}, o modo de escrita do box também é usado. A definição do tópico de alinhamento depende do modo de layout que está sendo usado.

+ +
+
Contêineres de bloco (incluindo células de tabela)
+
Todo o conteúdo do bloco como uma única unidade.
+
Contêineres de colunas múltiplas (multicol)
+
As caixas de colunas, com qualquer espaçamento inserido entre as caixas de colunas adicionado às lacunas de coluna relevantes.
+
Contêineres flexíveis
+
Para {{cssxref("justify-content")}}, os items flexíveis em cada linha flexível.
+ Para {{cssxref("align-content")}}, as linhas flexíveis. Perceba que, isso só tem efeito em contêineres flexíveis de múltiplas linhas.
+
Contêineres grid
+
As trilhas do grid nos eixos apropriados, com qualquer espaçamento inserido entre trilhas adicionado à gutters relevantes. Gutters colapsados são tratados como uma oportunidade única para inserção no espaço.
+
+ +

Saiba mais

+ + + +
+
+
diff --git a/files/pt-br/glossary/alpha/index.html b/files/pt-br/glossary/alpha/index.html new file mode 100644 index 0000000000..53b1e183ff --- /dev/null +++ b/files/pt-br/glossary/alpha/index.html @@ -0,0 +1,43 @@ +--- +title: Alpha (canal alfa) +slug: Glossario/Alpha +tags: + - Alfa + - Canal Alfa + - Desenhando + - Glossário + - Translucidez + - Translucido + - Transparente + - Transparência + - WebGL + - WebXR + - canal + - cor + - graficos + - pixel +translation_of: Glossary/Alpha +--- +

Cores são representadas no formato digital como uma coleção de números, cada qual sinalizando o nível de força ou intensidade de dado componente da cor. Cada um desses componententes é chamado de canal. Num típico arquivo de imagem, o canais de cores descritos devem ser vermelho, verde e azul, que serão usados para definir a cor final. Para representar uma cor que através dela um plano de fundo possa ser visto, um quarto canal é adicionado a ela: o canal alfa. O canal alfa define o nível de opacidade da cor.

+ +

Por exemplo, a cor #8921F2 (também descrita como rgb(137, 33, 242) ou hsl(270, 89%, 54)) é um belo tom de roxo. Abaixo você pode ver um pequeno retângulo no canto superior esquerdo e outro com a mesma cor, mas tendo um canal alfa defino em 0.5 (50% de opacidade). Os dois retângulos estão desenhados sobre o paragrafo de texto.

+ +

Image showing the effect of an alpha channel on a color.

+ +

Como você pode notar, a cor sem o canal alfa bloqueia completamente o texto ao fundo, enquanto o retângulo com canal alfa definido permite visibilidade através do plano de fundo com cor roxa.

+ +

Saiba mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/api/index.html b/files/pt-br/glossary/api/index.html new file mode 100644 index 0000000000..c964801e48 --- /dev/null +++ b/files/pt-br/glossary/api/index.html @@ -0,0 +1,33 @@ +--- +title: API +slug: Glossario/API +tags: + - Glossario(2) +translation_of: Glossary/API +--- +

Uma API (Application Programming Interface) é um conjunto de características e regras existentes em uma aplicação que possibilitam interações com essa através de um software - ao contrário de uma interface de usuário humana. A API pode ser entendida como um simples contrato entre a aplicação que a fornece e outros itens, como outros componentes do software, ou software de terceiros.

+ +

No desenvolvimento Web, uma API é geralmente um conjunto de {{glossary("method","methods")}} padronizados, {{Glossary("property","properties")}}, eventos, e {{Glossary("URL","URLs")}} que um desenvolvedor pode usar em seus aplicativos para interagir com componentes do navegador da Web de um usuário ou outro software / hardware no computador do usuário ou sites e serviços de terceiros.

+ +

Exemplos

+ + + +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/apple_safari/index.html b/files/pt-br/glossary/apple_safari/index.html new file mode 100644 index 0000000000..d32aa243b2 --- /dev/null +++ b/files/pt-br/glossary/apple_safari/index.html @@ -0,0 +1,27 @@ +--- +title: Apple Safari +slug: Glossario/Apple_Safari +tags: + - Glossário + - Mecanismos Web + - Navegação +translation_of: Glossary/Apple_Safari +--- +

Safari é um {{Glossary("navegador","navegador Web")}} desenvolvido pela Apple e fornecido com ambos Mac OS X e iOS. Baseia-se com o mecanismo de código aberto WebKit.

+ +

Saiba mais

+ +

Conhecimento geral

+ + + +

Informação técnica

+ + diff --git a/files/pt-br/glossary/argument/index.html b/files/pt-br/glossary/argument/index.html new file mode 100644 index 0000000000..72e470fba0 --- /dev/null +++ b/files/pt-br/glossary/argument/index.html @@ -0,0 +1,24 @@ +--- +title: Argumento +slug: Glossario/Argument +tags: + - EntendendoJS + - Glossário + - JavaScript +translation_of: Glossary/Argument +--- +

Um argumento é um {{glossary("valor")}} ({{Glossary("primitivo")}} ou um {{Glossary("objeto")}})  passado como um input (entrada) para uma {{Glossary("função")}}.

+ +

Leia mais

+ +

Conhecimento Geral

+ + + +

Referencia Técnica

+ + diff --git a/files/pt-br/glossary/arpanet/index.html b/files/pt-br/glossary/arpanet/index.html new file mode 100644 index 0000000000..19e9b45df4 --- /dev/null +++ b/files/pt-br/glossary/arpanet/index.html @@ -0,0 +1,17 @@ +--- +title: Arpanet +slug: Glossario/Arpanet +tags: + - Glossário + - Infraestrutura +translation_of: Glossary/Arpanet +--- +

A ARPAnet (Advanced Research Projects Agency Network, em português, Rede da Agência de Pesquisas em Projetos Avançados) foi a primeira rede de computadores, construída em 1969 como um meio robusto para transmitir dados militares sigilosos e para interligar os departamentos de pesquisa por todo os Estados Unidos. ARPAnet primeiro executou NCP (Network Control Protocol, em português, Protocolo de Controle de Rede) e posteriormente a primeira versão do protocolo de internet ou o conjunto de protocolos {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (Transmission Control Protocol/Internet Protocol, em português, Protocolo de Controle de Transmissão/Protocolo de Internet), fazendo da ARPAnet uma parte proeminente da nascente {{glossary("Internet")}}. ARPAnet foi fechado no início de 1990.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/array/index.html b/files/pt-br/glossary/array/index.html new file mode 100644 index 0000000000..4d1f3cf866 --- /dev/null +++ b/files/pt-br/glossary/array/index.html @@ -0,0 +1,35 @@ +--- +title: Array +slug: Glossario/array +tags: + - Iniciante + - JavaScript +translation_of: Glossary/array +--- +

Um array (arranjo ou vetor) é um conjunto de dados (que pode assumir os mais diversos tipos, desde do tipo {{Glossary("primitivo")}}, a {{Glossary("objeto")}} dependendo da linguagem de programação). Arrays são utilizados para armazenar mais de um valor em uma única variável. Isso é comparável a uma variável que pode armazenar apenas um valor.

+ +

Cada item do array tem um número ligado a ele, chamado de índice numérico, que permite acesso a cada "valor" armazenado na váriavel.

+ +

Em {{glossary("JavaScript")}}, um {{jsxref("array")}} começa no índice zero e pode ser manipulado a partir de vários {{Glossary("Method", "métodos")}}.

+ +

Um exemplo simples de Array em Javascript: 

+ +
var myArray = [1, 2, 3, 4];
+
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+
+//Um array em JavaScript pode conter vários tipos de dados, como mostrado acima.
+ +

Saiba mais

+ +

Conhecimentos Gerais

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/ascii/index.html b/files/pt-br/glossary/ascii/index.html new file mode 100644 index 0000000000..eee1f0d2c3 --- /dev/null +++ b/files/pt-br/glossary/ascii/index.html @@ -0,0 +1,18 @@ +--- +title: ASCII +slug: Glossario/ASCII +tags: + - ASCII + - Caracteres ASCII + - Glossário + - Padrão de codificação + - Símbolos ASCII +translation_of: Glossary/ASCII +--- +

ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, UTF-8 substituiu-o na web.

+ +

Aprenda mais

+ +

Conhecimento geral

+ +

{{Interwiki("wikipedia", "ASCII")}} no Wikipedia

diff --git a/files/pt-br/glossary/asynchronous/index.html b/files/pt-br/glossary/asynchronous/index.html new file mode 100644 index 0000000000..5fdc23acfc --- /dev/null +++ b/files/pt-br/glossary/asynchronous/index.html @@ -0,0 +1,23 @@ +--- +title: Assíncrono +slug: Glossario/Assincrono +tags: + - Glossário + - Mecanismos Web + - Web +translation_of: Glossary/Asynchronous +--- +

Assíncrono refere-se a um ambiente de comunicação onde cada parte recebe e processa mensagens quando for conveniente ou possível em vez de imediatamente.

+ +

Isto pode ser usado para descrever um ambiente de comunicação humana como o e-mail — o remetente enviará um e-mail, e o destinatário irá responder quando for conveniente; eles não precisam responder imediatamente.

+ +

Também pode ser usado para descrever um ambiente de comunicação programática, por exemplo, {{domxref("Ajax")}}é um mecanismo assíncrono para solicitar pequenos bits de dados por HTTP; o resultado é enviado de volta quando a resposta está completa, não imediatamente.

+ +

Saiba mais

+ +

Referência técnica

+ + diff --git a/files/pt-br/glossary/attribute/index.html b/files/pt-br/glossary/attribute/index.html new file mode 100644 index 0000000000..f36e6f7fed --- /dev/null +++ b/files/pt-br/glossary/attribute/index.html @@ -0,0 +1,25 @@ +--- +title: Atributo HTML +slug: Glossario/Atributo +tags: + - Atributos + - Glossário + - HTML + - Tags +translation_of: Glossary/Attribute +--- +

Atributos estendem uma {{Glossary("tag")}} ("etiqueta"), modificando o comportamento dela ou fornecendo meta dados.
+ Um atributo sempre tem a forma nome=valor (especificando o identificador do atributo e o valor associado a ele).

+ +

Exemplo:

+ +

<div id="principal" class="principal">  Neste cado o id e class são o atributo e o nome pricipal o valor.

+ +

Aprenda mais

+ +

Referência Técnica

+ + diff --git a/files/pt-br/glossary/bandwidth/index.html b/files/pt-br/glossary/bandwidth/index.html new file mode 100644 index 0000000000..e986f11f4a --- /dev/null +++ b/files/pt-br/glossary/bandwidth/index.html @@ -0,0 +1,12 @@ +--- +title: Bandwidth +slug: Glossario/Bandwidth +translation_of: Glossary/Bandwidth +--- +

Largura de banda é a medida de quanta informação pode trafegar através de uma conexão de dados, em um determinado espaço de tempo. É geralmente medida em multiplos de bits por segundo (bps),  por exemplo megabits por segundo (Mbps) ou gigabits por segundo (Gbps).

+ +

Learn more

+ + diff --git a/files/pt-br/glossary/bigint/index.html b/files/pt-br/glossary/bigint/index.html new file mode 100644 index 0000000000..004b5a3b80 --- /dev/null +++ b/files/pt-br/glossary/bigint/index.html @@ -0,0 +1,27 @@ +--- +title: BigInt +slug: Glossario/BigInt +translation_of: Glossary/BigInt +--- +

No {{Glossary("JavaScript")}}, BigInt é um tipo de dado numérico que representa inteiros no formato de precisão arbritrária. Em outras linguagens de programação existem tipos numéricos diferentes, como por exemplo: Integers, Floats, Doubles ou Bignums.

+ +

 

+ +

Saiba mais

+ +

General knowledge

+ + + +

Technical reference

+ + + +

 

diff --git a/files/pt-br/glossary/boolean/index.html b/files/pt-br/glossary/boolean/index.html new file mode 100644 index 0000000000..f1b5a80c38 --- /dev/null +++ b/files/pt-br/glossary/boolean/index.html @@ -0,0 +1,45 @@ +--- +title: Booleano +slug: Glossario/Booleano +translation_of: Glossary/Boolean +--- +

Um booleano, em ciência da computação, é um tipo de dado lógico que pode ter apenas um de dois valores possíveis: verdadeiro ou falso. Por exemplo, em JavaScript, condicionais booleanas são usadas para decidir quais trechos do cógigo serão executados ou repetidas.

+ +

 

+ +
if (condicao booleana) {
+   // codigo a executar se o booleano for TRUE
+}
+
+if (condicao booleana) {
+  console.log("booleano é verdadeiro");
+} else {
+  console.log("booleano é falso");
+}
+
+
+/* JavaScript for loop */
+for (variavel de controle; condicao booleana; contador) {
+  // codigo a se repetir se o booleano for TRUE
+}
+
+for (var i=0; i < 4; i++) {
+  console.log("codigo a executar se a condicao for verdadeira, ou seja até 'i' atingir o valor de 4 ");
+}
+ +

 

+ +

Veja mais

+ +

Referências externas

+ + + +

Referência

+ + diff --git a/files/pt-br/glossary/browser/index.html b/files/pt-br/glossary/browser/index.html new file mode 100644 index 0000000000..7fa7f3cbaa --- /dev/null +++ b/files/pt-br/glossary/browser/index.html @@ -0,0 +1,27 @@ +--- +title: Navegador +slug: Glossario/Navegador +tags: + - Glossário + - Navegação +translation_of: Glossary/Browser +--- +

Um navegador Web é um programa que obtém e exibe páginas da {{Glossary("World Wide Web","Web")}}, e permite que os usuários acessem outras páginas através de {{Glossary("hyperlink","hyperlinks")}}.

+ +

Saiba mais

+ +

Conhecimento geral

+ + + +

Baixar um navegador

+ + diff --git a/files/pt-br/glossary/cache/index.html b/files/pt-br/glossary/cache/index.html new file mode 100644 index 0000000000..69fc7caf49 --- /dev/null +++ b/files/pt-br/glossary/cache/index.html @@ -0,0 +1,21 @@ +--- +title: Cache +slug: Glossario/Cache +tags: + - Cache + - Glossário + - HTTP + - web cache +translation_of: Glossary/Cache +--- +

O cache (web cache ou HTTP cache) é uma forma de armazenar dados que foram recebidos por respostas HTTP temporariamente para que possam ser usados em requisições HTTP subsequentes enquanto as condições de seu uso forem satisfeitas.

+ +

O cache ajuda a reduzir o tempo de resposta de uma página após a primeira requisição à mesma. Arquivos estáticos como o HTML e o CSS que não se modificam com frequência, scripts e imagens, ao serem salvos no cache, não precisam ser baixados do servidor novamente, sendo assim, só informações dinâmicas vão precisar ser requeridas. Lembrando que, qualquer modificação dos arquivos estáticos, o navegador do cliente terá de baixar novamente para receber as atualizações deste arquivo.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/call_stack/index.html b/files/pt-br/glossary/call_stack/index.html new file mode 100644 index 0000000000..73e99316be --- /dev/null +++ b/files/pt-br/glossary/call_stack/index.html @@ -0,0 +1,88 @@ +--- +title: Call stack (Pilha de chamadas) +slug: Glossario/Call_stack +translation_of: Glossary/Call_stack +--- +

A pilha de chamadas (call stack) é um mecanismo do interpretador de uma linguagem que organiza o funcionamento do script quando são chamadas muitas funções, qual função está sendo executada no momento, e quais serão chamadas dentro de alguma função, etc.

+ + + +

Exemplo

+ +
function saudacao() {
+   // [1] Algum código aqui
+   digaOi();
+   // [2] Algum código aqui
+}
+function digaOi() {
+   return "Olá!";
+}
+
+// Chamando a função `saudacao`
+saudacao();
+
+// [3] Algum código aqui
+
+ +

O código acima será executado desta forma pelo interpretador:

+ +
    +
  1. Todas as funções serão ignoradas, até chegar na chamada da função saudacao().
    2. +
  2. Adiciona a função saudacao() para a pilha de chamadas. +
    +

    Pilha de chamadas:
    + - saudacao

    +
    +
    3. +
  3. Executa todas as linhas de código da função saudacao().
    4. +
  4. Chama a função digaOi().
    5. +
  5. Adiciona a função digaOi() na pilha de chamadas. +
    +

    Pilha de chamadas:
    + - saudacao
    + - digaOi

    +
    +
    6. +
  6. Executa todas as linhas de código da função digaOi() até o final.
    7. +
  7. Retorna a execução na linha onde foi chamada a função digaOi() e continua a execução do resto da função saudacao().
    8. +
  8. Deleta a função digaOi() da pilha de chamadas. +
    +

    Pilha de chamadas:
    + - saudacao

    +
    +
    9. +
  9. Quando todas as linhas da função saudacao() forem executadas, retorna para a linha onde a função foi invocada, e continua a execução do resto do código.
    10. +
  10. Deleta a função saudacao() da Pilha de chamadas. +
    +

    Pilha de chamadas:
    + EMPTY

    +
    +
    11. +
+ +

Começamos com uma pilha de chamadas vazia, e sempre que chamamos uma função, ela é automaticamente adicionada à pilha de chamadas, e depois de todas as linhas serem executadas, é automaticamente removida da pilha de chamadas. No final, a pilha está vazia novamente.

+ +

Veja mais

+ +

General knowledge

+ + + + diff --git a/files/pt-br/glossary/callback_function/index.html b/files/pt-br/glossary/callback_function/index.html new file mode 100644 index 0000000000..42e67bcde6 --- /dev/null +++ b/files/pt-br/glossary/callback_function/index.html @@ -0,0 +1,33 @@ +--- +title: Função Callback +slug: Glossario/Callback_function +translation_of: Glossary/Callback_function +--- +

Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.

+ +

Aqui está um pequeno exemplo:

+ +
function greeting(name) {
+  alert('Hello ' + name);
+}
+
+function processUserInput(callback) {
+  var name = prompt('Please enter your name.');
+  callback(name);
+}
+
+processUserInput(greeting);
+ +

O exemplo acima é de um {{glossary("synchronous")}} callback, como é executado imediatamente.

+ +

Note, no entanto, que callbacks são normalmente utilizados para continuar a execução do código após uma operação {{glossary("asynchronous")}} ser terminada — essas são chamadas asynchronous callbacks. Por exemplo, nosso simples exemplo maps-example.html (veja uma versão "live" aqui) usa o Google Maps API e a API de geolocalização para mostrar em um mapa a localização atual do nosso dispositivo.

+ +

Como obter as coordenadas atuais do nosso GPS é uma ação assíncrona (nós não sabemos exatamente quando os dados serão retornados), o método {{domxref("Geolocation.getCurrentPosition()")}} pega um função callback anônima como um parametro, que pega os dados retornados da coordenada como parâmetro. Essa função só é executada quando os dados da coordenada são retornados.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/caret/index.html b/files/pt-br/glossary/caret/index.html new file mode 100644 index 0000000000..584a1ae8f1 --- /dev/null +++ b/files/pt-br/glossary/caret/index.html @@ -0,0 +1,35 @@ +--- +title: caret +slug: Glossario/caret +translation_of: Glossary/caret +--- +

Um caret (às vezes chamado de "cursor de texto") é um indicador exibido na tela para indicar onde a entrada de texto será inserida. A maioria das interfaces de usuário representam o caret usando uma linha vertical fina ou uma caixa do tamanho de um caractere que pisca, mas isso pode variar. Este ponto do texto é chamado de ponto de inserção. A palavra "careta" diferencia o ponto de inserção de texto do cursor do mouse.

+ +

Na web, um caret é usado para representar o ponto de inserção em {{HTMLElement("input")}} e {{HTMLElement("textarea")}} elementos, bem como quaisquer elementos cujo atributo {{htmlattrxref("contenteditable")}} está definido, permitindo assim que o conteúdo do elemento seja editado pelo usuário.

+ +

Saiba Mais

+ +

Conhecimento geral

+ + + +

CSS relacionado com o caret

+ +

Você pode definir a cor do caret para o conteúdo editável de um determinado elemento definindo a propriedade CSS {{cssxref ("caret-color")}} para o valor apropriado {{cssxref("<color>")}}

+ +

Elementos HTML que podem apresentar um caret

+ +

Esses elementos fornecem campos de entrada de texto ou caixas e, portanto, fazem uso do caret.

+ + diff --git a/files/pt-br/glossary/cdn/index.html b/files/pt-br/glossary/cdn/index.html new file mode 100644 index 0000000000..e539a279ae --- /dev/null +++ b/files/pt-br/glossary/cdn/index.html @@ -0,0 +1,11 @@ +--- +title: CDN +slug: Glossario/CDN +tags: + - Glossario(2) + - Infraestrutura + - Rede de fornecimento de conteúdo + - cdn +translation_of: Glossary/CDN +--- +

CDN é a sigla para (Content Delivery Network) ou seja, Rede de Fornecimento de Conteúdo na tradução livre. É um grupo de servidores espalhados em muitos locais. Esses servidores armazenam cópias duplicadas de dados para que os servidores possam atender às solicitações de dados com base nos quais servidores estão mais próximos dos respectivos usuários finais. CDNs deixa os servidores menos sobrecarregados quando possuem alto tráfego de dados.

diff --git a/files/pt-br/glossary/character/index.html b/files/pt-br/glossary/character/index.html new file mode 100644 index 0000000000..7ce3a97b55 --- /dev/null +++ b/files/pt-br/glossary/character/index.html @@ -0,0 +1,22 @@ +--- +title: Caractere +slug: Glossario/Caractere +tags: + - CodingScripting + - Glossário + - strings +translation_of: Glossary/Character +--- +

Um caractere é um símbolo (letras, números, pontuação)  ou de controle não imprimível (por exemplo, carriage return ou hífen). {{glossary ("UTF-8")}} é o conjunto de caracteres mais comum e inclui os grafemas dos idiomas humanos mais populares.

+ +

Saiba Mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/character_encoding/index.html b/files/pt-br/glossary/character_encoding/index.html new file mode 100644 index 0000000000..b1748642cf --- /dev/null +++ b/files/pt-br/glossary/character_encoding/index.html @@ -0,0 +1,23 @@ +--- +title: Character encoding +slug: Glossario/character_encoding +translation_of: Glossary/character_encoding +--- +

Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como UTF-8), especificamos como a sequência de bytes deve ser interpretada.

+ +

Por exemplo, em HTML, normalmente declaramos uma codificação de caracteres UTF-8, usando a seguinte linha:

+ +
+
<meta charset="utf-8">
+ +

Isso garante que você possa usar caracteres de praticamente qualquer idioma humano em seu documento HTML e eles serão exibidos com de forma confiável.

+
+ +

Leia mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/chrome/index.html b/files/pt-br/glossary/chrome/index.html new file mode 100644 index 0000000000..d16366cc3d --- /dev/null +++ b/files/pt-br/glossary/chrome/index.html @@ -0,0 +1,16 @@ +--- +title: Chrome +slug: Glossario/Chrome +tags: + - Chrome + - Glossário + - Navegador +translation_of: Glossary/Chrome +--- +

Em um navegador, o chrome é qualquer aspecto visível do navegador aparte das páginas web (ex., barra de ferramentas, menus, abas). Não deve ser confundido com o {{glossary("Google Chrome")}} navegador.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/class/index.html b/files/pt-br/glossary/class/index.html new file mode 100644 index 0000000000..688df4d764 --- /dev/null +++ b/files/pt-br/glossary/class/index.html @@ -0,0 +1,20 @@ +--- +title: Class +slug: Glossario/Class +tags: + - Classe + - Glossário +translation_of: Glossary/Class +--- +

Em {{glossary("OOP","programação orientada a objeto")}}, uma classe define as características de um {{glossary("object","objecto")}}. A classe é uma definição de  modelo de {{glossary("property","propriedades")}} e {{glossary("method","metódos")}} de um objeto, o "projeto" a partir do qual outras instâncias mais específicas do objeto são desenhados.

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/cms/index.html b/files/pt-br/glossary/cms/index.html new file mode 100644 index 0000000000..e0501a2bbc --- /dev/null +++ b/files/pt-br/glossary/cms/index.html @@ -0,0 +1,20 @@ +--- +title: CMS +slug: Glossario/CMS +tags: + - CMS + - Glossário + - Sistema de gerenciamento de conteúdo +translation_of: Glossary/CMS +--- +

O CMS da sigla em inglês( Content Management System) ou seja, Sistema de Gerenciamento de Conteúdo, é um software que permite usuários publicar, organizar, mudar ou remover vários tipos de conteúdo, não apenas textos mas também incorporação de imagens, vídeos , aúdios e códigos interativos

+ +

Saiba mais

+ +

Conhecimento Geral

+ + + +

 

diff --git a/files/pt-br/glossary/computer_programming/index.html b/files/pt-br/glossary/computer_programming/index.html new file mode 100644 index 0000000000..34dff2ed11 --- /dev/null +++ b/files/pt-br/glossary/computer_programming/index.html @@ -0,0 +1,18 @@ +--- +title: Programação de Computadores +slug: Glossario/Programação_de_Computadores +tags: + - Linguagem de Programação + - Programação + - Programação de Computadores +translation_of: Glossary/Computer_Programming +--- +

Programação é o processo que formula a solução de um problema computacional ou automatiza uma tarefa repetitiva na forma de uma série de instruções sequenciais em um programa executável.

+ +

Saiba mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/cors/index.html b/files/pt-br/glossary/cors/index.html new file mode 100644 index 0000000000..3fbec520a7 --- /dev/null +++ b/files/pt-br/glossary/cors/index.html @@ -0,0 +1,55 @@ +--- +title: CORS +slug: Glossario/CORS +tags: + - Glossary + - Glossário + - Infraestrutura + - Infrastructure + - Security + - Segurança +translation_of: Glossary/CORS +--- +

CORS (Cross-Origin Resource Sharing) é um sistema que consiste na transmissão de {{Glossary("Header", "HTTP headers")}}, que determina se navegadores vão bloquear código JavaScript de acessarem respostas provindas de requisições entre origens.

+ +

A same-origin security policy proíbe acesso aos recursos entre origens. Mas CORS dá aos servidores web a habilidade de dizer quando eles querem optar em permitir o acesso aos seus recursos entre origens.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Cabeçalhos CORS

+ +
+
{{HTTPHeader("Access-Control-Allow-Origin")}}
+
Indica quando uma resposta pode ser compartilhada.
+
{{HTTPHeader("Access-Control-Allow-Credentials")}}
+
Indica quando uma resposta a uma requisição pode ou não ser exposta quando a bandeira de credenciais é verdadeira.
+
{{HTTPHeader("Access-Control-Allow-Headers")}}
+
Usado na resposta a uma requisição on-the-fly que indica quais cabeçalhos HTTP podem ser usados quando a requisição verdadeira for feita.
+
{{HTTPHeader("Access-Control-Allow-Methods")}}
+
Especifica o método ou métodos de acesso ao recurso na requisição on-the-fly.
+
{{HTTPHeader("Access-Control-Expose-Headers")}}
+
Indica quais cabeçalhos podem ser expostos como parte da resposta listando seus nomes.
+
{{HTTPHeader("Access-Control-Max-Age")}}
+
Indica quanto tempo os resultados da requisição on-the-fly podem ser cacheados.
+
{{HTTPHeader("Access-Control-Request-Headers")}}
+
Usado ao emitir uma requisição on-the-fly para deixar o servidor sabendo quais cabeçalhos HTTP serão utilizados quando a requisição verdadeira for feita.
+
{{HTTPHeader("Access-Control-Request-Method")}}
+
Usado ao emitir uma requisição on-the-fly para deixar o servidor sabendo qual  método HTTP será usado quando a requisição verdadeira for feita.
+
{{HTTPHeader("Origin")}}
+
Indica de onde uma busca se origina.
+
+ +

Referência técnica

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/pt-br/glossary/crud/index.html b/files/pt-br/glossary/crud/index.html new file mode 100644 index 0000000000..5a5ab4e30d --- /dev/null +++ b/files/pt-br/glossary/crud/index.html @@ -0,0 +1,17 @@ +--- +title: CRUD +slug: Glossario/CRUD +tags: + - Glossário + - Infraestrutura +translation_of: Glossary/CRUD +--- +

CRUD (Create, Read, Update, Delete) é um acrônimo para as maneiras de se operar em informação armazenada. É um mnemônico para as quatro operações básicas de armazenamento persistente. CRUD tipicamente refere-se a operações perfomadas em um banco de dados ou base de dados, mas também pode aplicar-se para funções de alto nível de uma aplicação, como exclusões reversíveis, onde a informação não é realmente deletada, mas é marcada como deletada via status.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/css/index.html b/files/pt-br/glossary/css/index.html new file mode 100644 index 0000000000..f3efc39ca6 --- /dev/null +++ b/files/pt-br/glossary/css/index.html @@ -0,0 +1,48 @@ +--- +title: CSS +slug: Glossario/CSS +tags: + - CSS + - Glossário + - Web +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets) é uma linguagem declarativa que controla a apresentação visual de páginas web em um {{glossary("browser","navegador")}}. O navegador aplica as declarações de estilo CSS aos elementos selecionados para exibi-los apropriadamente. Uma declaração de estilo contem as propriedades e seus valores, que determinam a aparência de uma página web.

+ +

CSS é uma das três principais tecnologias Web, junto com {{Glossary("HTML")}} e {{Glossary("JavaScript")}}. CSS normalmente estiliza {{Glossary("Element","Elementos HTML")}}, mas também pode ser usada com outras linguagens de marcação como {{Glossary("SVG")}} ou {{Glossary("XML")}}.

+ +

Uma regra CSS é um conjunto de {{Glossary("CSS Property","propriedades")}} associados a um {{Glossary("selector","seletor")}}. Aqui está um exemplo que faz com que todos os parágrafos HTML fiquem amarelos num fundo preto:

+ +
/* O seletor "p" indica que todos os paragrafos no documento serão afetados por essa regra */
+p {
+  /* A propriedade "color" define a cor do texto, neste caso amarelo. */
+  color: yellow;
+
+  /* A propriedade "background-color" define a cor ao fundo, neste caso preto. */
+  background-color: black
+}
+ +

"Cascading" ("em cascata") se refere às regras que decidem como seletores são priorizados ao mudar a aparência de uma página. Isso é uma característica muito importante, já que um website complexo pode ter milhares de regras CSS.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referências técnicas

+ + + +

Aprenda CSS

+ + diff --git a/files/pt-br/glossary/css_pixel/index.html b/files/pt-br/glossary/css_pixel/index.html new file mode 100644 index 0000000000..327c7e0147 --- /dev/null +++ b/files/pt-br/glossary/css_pixel/index.html @@ -0,0 +1,34 @@ +--- +title: Pixel CSS +slug: Glossario/CSS_pixel +tags: + - CSS + - Glossário + - Pixel CSS + - altura + - comprimento + - largura + - pixel + - tamanho + - unidade +translation_of: Glossary/CSS_pixel +--- +

O Pixel CSS - denotado no {{Glossary("CSS")}} pelo sufixo px - é uma unidade de comprimento que corresponde aproximadamente a largura ou altura de um ponto único que pode ser confortavelmente visto pelos olhos humanos sem esforço, mas é o menor possível. Por definição, esse é o tamanho físico de um único píxel em uma densidade de 96 DPI, situado a um braço de distância dos olhos do observador.

+ +

Essa definição, é claro, se demonstra ser muito vaga, e termos como "confortavelmente visto" e "braço de distância" são imprecisas, variando de pessoa para pessoa. Por exemplo, quando um usuário se senta em sua mesa, defronte a sua área de trabalho, o monitor geralmente estará longe dos seus olhos enquanto ele estiver usando o celular.

+ +

Assim sendo, geralmente basta dizer que quando a unidade de px é usada, o objetivo é tentar manter a distancia de 96px equivalentes a 1 polegada na tela, independentemente da densidade da tela. Em outras palavras, se o usuário está em celular com uma densidade de pixel de 266 DPI, e há um elemento colocado na tela com uma largura de 96px, então este elemento ocupará uma largura de 266px nos {{Glossary("device pixels", "pixels do dispositivo")}}.

+ +

Saiba mais

+ +

Referência técnica

+ + + +

Aprenda sobre

+ + diff --git a/files/pt-br/glossary/css_preprocessor/index.html b/files/pt-br/glossary/css_preprocessor/index.html new file mode 100644 index 0000000000..d41fb8f1a5 --- /dev/null +++ b/files/pt-br/glossary/css_preprocessor/index.html @@ -0,0 +1,29 @@ +--- +title: Pré-processador CSS +slug: Glossario/CSS_preprocessor +tags: + - CSS + - Glossário +translation_of: Glossary/CSS_preprocessor +--- +

Um pré-processador CSS é um programa que permite você gerar {{Glossary("CSS")}} a partir de uma {{Glossary("syntax", "sintaxe")}} única desse pré-processador. Existem muitos pré-processadores CSS para escolha, no entanto, a maioria deles irá adicionar algumas funcionalidades extras que não existem no CSS puro, como um mixin, seletores aninhados, herança de seletores, e assim por diante. Essas funcionalidades fazem a estrutura do CSS mais legível e fácil de manter.

+ +

Para usar um pré-processador, você deve instalar um compilador CSS no seu servidor web; Ou usar o pré-processador CSS para compilar no ambiente de desenvolvimento, e então fazer upload do arquivo CSS compilado para o servidor web.

+ + diff --git a/files/pt-br/glossary/css_selector/index.html b/files/pt-br/glossary/css_selector/index.html new file mode 100644 index 0000000000..b45e0cdc77 --- /dev/null +++ b/files/pt-br/glossary/css_selector/index.html @@ -0,0 +1,58 @@ +--- +title: Selector (CSS) +slug: Glossario/CSS_Selector +translation_of: Glossary/CSS_Selector +--- +

O seletor CSS é parte da regra do CSS que lhe permite selecionar qual elemento(s) vai receber o estilo pela regra. Por exemplo:

+ +
***HTML***
+<div> Eu estou dentro do elemento. </div>
+<p> Eu estou dentro de um elemento de parágrafo. </p>
+
+
+***CSS***
+div {
+ color: green;
+}
+
+p {
+ color: red;
+}
+
+ +

Nessa primeira regra do CSS, eu estou selecionando o elemento da div estilizando-a colorindo o texto para verde. Na segunda regra do CSS, eu estou selecionando o elemento "p" e estilizando-a colorindo o texto para vermelho. Aqui estão os resultados:

+ +

CSS selector coding results

+ +

 

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ +

{{SpecName("CSS3 Selectors")}}

diff --git a/files/pt-br/glossary/cssom/index.html b/files/pt-br/glossary/cssom/index.html new file mode 100644 index 0000000000..834f607810 --- /dev/null +++ b/files/pt-br/glossary/cssom/index.html @@ -0,0 +1,24 @@ +--- +title: Modelo de Objeto CSS (CSSOM) +slug: Glossario/CSSOM +tags: + - CSS + - CSSOM + - DOM + - Glossário + - Performance Web +translation_of: Glossary/CSSOM +--- +

O Modelo de Objeto CSS (CSSOM) é um mapeamento de todos os seletores CSS e propriedades relevantes para cada seletor no formato de árvore, com um nó raiz, irmão, descendente, filho e outro relacionamento. O CSSOM é muito similar ao {{glossary('DOM', 'Modelo de Objeto de Documento (DOM)')}}. Ambos são parte do caminho de renderização crítica, o qual é uma série de etapas que devem acontecer para renderizar o site corretamente.

+ +

O CSSOM, junto ao DOM, para construir a árvore de renderização, que por sua vez é usada pelo navegador para apresentar e estilizar a página.

+ +

CSSOM API

+ +

O Modelo de Objeto CSS é também um conjunto de APIs que permitem manipulação de CSS a partir do JavaScript. É semelhante ao DOM, mas para o CSS invés de HTML. Permite os seus usuários lerem e modificar o CSS dinamicamente.

+ +

Saiba mais

+ + diff --git a/files/pt-br/glossary/doctype/index.html b/files/pt-br/glossary/doctype/index.html new file mode 100644 index 0000000000..f21ccfd7fd --- /dev/null +++ b/files/pt-br/glossary/doctype/index.html @@ -0,0 +1,21 @@ +--- +title: Doctype +slug: Glossario/Doctype +translation_of: Glossary/Doctype +--- +

No {{Glossary("HTML")}}, o doctype é a introdução "<!DOCTYPE html>" encontrada no topo de todos os documentos. Seu único propósito é evitar que o {{Glossary("browser")}} mude para os chamados “quirks mode” quando renderizar um documento; isto é, o "<!DOCTYPE html>" doctype garante que o browser faça um esforço na tentativa de seguir as especificações relevantes, em vez de usar um modo de renderização diferente e que seja incompatível com algumas especificações.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/dom/index.html b/files/pt-br/glossary/dom/index.html new file mode 100644 index 0000000000..0b6954aad3 --- /dev/null +++ b/files/pt-br/glossary/dom/index.html @@ -0,0 +1,32 @@ +--- +title: DOM +slug: Glossario/DOM +tags: + - DOM + - Glossário +translation_of: Glossary/DOM +--- +

O Modelo de Objeto de Documentos (do inglês Document Object Model, DOM) é uma {{Glossary("API")}} definida pelo {{Glossary("W3C")}} para representar e interagir com qualquer documento {{Glossary("HTML")}} ou {{Glossary("XML")}}.

+ +

O DOM é um modelo de documento carregado pelo {{Glossary("navegador")}}. Este documento é representado através de uma árvore de nós, onde cada um destes nós representa uma parte do documento (por ex. um {{Glossary("elemento")}}, texto ou comentário).

+ +

O DOM é uma das {{Glossary("API")}}s mais usadas na {{Glossary("World Wide Web","Web")}} porque ele permite que cada código rodando no {{Glossary("navegador")}} acesse e interaja com cada nó do documento.
+ Os nós podem ser criados, movidos ou modificados. Listeners de evento podem também ser adicionados aos nós para serem disparados quando um dado evento ocorrer.

+ +

O DOM não foi originalmente especificado. Ele apareceu quando os navegadores começaram a implementar o {{Glossary("JavaScript")}}. Este legado é às vezes chamado de DOM 0.
+ Hoje o W3C conduz a especificação do DOM; e o DOM Working Group está atualmente preparando a versão 4.

+ +

Saiba mais

+ +

Conhecimentos Gerais

+ + + +

Referência Técnica

+ + diff --git a/files/pt-br/glossary/domain/index.html b/files/pt-br/glossary/domain/index.html new file mode 100644 index 0000000000..11aceba517 --- /dev/null +++ b/files/pt-br/glossary/domain/index.html @@ -0,0 +1,28 @@ +--- +title: Domínio +slug: Glossario/Domínio +tags: + - Domínio + - Glossário + - Infraestrutura + - Navegador + - Networking +translation_of: Glossary/Domain +--- +

Um domínio é uma autoridade na internet que controla seus próprios recursos. Seu "nome de domínio" é uma forma de endereçar essa autoridade como parte da hierarquia de uma {{Glossary("URL")}} — normalmente a parte mais memorável dela, por exemplo por ser uma marca.

+ +

Um nome de domínio totalmente qualificado (FQDN — sigla em inglês) contém todas as partes necessárias para pesquisar essa autoridade pelo seu nome, sem ambiguidade, usando o sistema {{Glossary("DNS")}} da internet.

+ +

Por exemplo, em "developer.mozilla.org":

+ +
    +
  1. "org" é chamado de {{interwiki("wikipedia", "Top-level_domain", "domínio de alto nível")}}. Eles são registrados como um padrão da internet pela {{interwiki("wikipedia", "Internet_Assigned_Numbers_Authority", "IANA - autoridade de atribuição de números da internet")}}. Aqui "org" significa "organização" que está definido num registro de domínio de alto nível.
    2. +
  2. "mozilla" é o domínio. Se você quiser ter um domínio, você precisa registrá-lo com algum dos muitos {{interwiki("wikipedia", "Domain_name_registrar", "registrars - registradores")}} que são quem tem permissão para fazer isso num registro de domínio de alto nível.
    3. +
  3. "developer" é um "sub-domínio", algo que você como dono de um domínio pode definir sozinho. Muitos donos de domínio escolhem ter um subdomínio "www" apontando para o recurso {{Glossary("World_Wide_Web")}}, mas isso não é obrigatório (e tem caído em desuso).
    4. +
+ +

Saiba mais

+ + diff --git a/files/pt-br/glossary/domain_name/index.html b/files/pt-br/glossary/domain_name/index.html new file mode 100644 index 0000000000..26b2366540 --- /dev/null +++ b/files/pt-br/glossary/domain_name/index.html @@ -0,0 +1,20 @@ +--- +title: Nome de domínio +slug: Glossario/Nome_de_domínio +tags: + - Glossário + - Mecanismos Web + - Nome de domínio + - Protocolo +translation_of: Glossary/Domain_name +--- +

Um nome de domínio é um endereço de uma página na {{Glossary("Internet")}}. Nomes de domínios são usados em {{Glossary("URL","URLs")}} para identificar a qual servidor uma página específica pertence. O domínio consiste de uma sequência hierárquica de nomes (rótulo) separados por períodos (pontos) e terminando com uma {{Glossary("TLD","extensão")}}.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/dynamic_programming_language/index.html b/files/pt-br/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..8932c14227 --- /dev/null +++ b/files/pt-br/glossary/dynamic_programming_language/index.html @@ -0,0 +1,24 @@ +--- +title: Linguagem de programação dinâmica +slug: Glossario/Linguagem_de_programação_dinâmica +tags: + - Glossário + - Iniciante + - ScriptingDeCodificação +translation_of: Glossary/Dynamic_programming_language +--- +

Uma linguagem de programação dinâmica é uma linguagem de programação na qual determinadas operações podem ser feitas em tempo de execução em vez de em tempo de compilação. Por exemplo, em JavaScript é possível mudar o tipo de uma variável ou adicionar novas propriedades ou métodos a um objeto enquanto o programa está sendo executado.

+ +

Isso é o oposto das linguagens denominadas linguagens de programação estática, nas quais tais mudanças normalmente não são possíveis.

+ +
+

Note que, embora exista de fato uma conexão entre essa propriedade dinâmica/estática das linguagens de programação e a tipagem dinâmica/estática, ambas estão longe de serem sinônimas.

+
+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/ecma/index.html b/files/pt-br/glossary/ecma/index.html new file mode 100644 index 0000000000..4e51c82b8c --- /dev/null +++ b/files/pt-br/glossary/ecma/index.html @@ -0,0 +1,18 @@ +--- +title: ECMA +slug: Glossario/ECMA +tags: + - Glossário + - Mecanismos Web +translation_of: Glossary/ECMA +--- +

Ecma International (oficialmente Associação Européia dos Fabricantes de Computadores) é uma organização sem fins lucrativos que desenvolve os padrões para hardware de computadores, comunicações e linguagens de programação.

+ +

Na web ela é famosa por ser a organização que mantém a especificação ECMA-262 (também conhecida por {{Glossary("ECMAScript")}}), que é a especificação núcleo para a linguagem {{Glossary("JavaScript")}}.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/element/index.html b/files/pt-br/glossary/element/index.html new file mode 100644 index 0000000000..70420db414 --- /dev/null +++ b/files/pt-br/glossary/element/index.html @@ -0,0 +1,21 @@ +--- +title: Elemento +slug: Glossario/Elemento +tags: + - Codificação de Scripts + - Glossário + - HTML +translation_of: Glossary/Element +--- +

Um elemento é parte de uma página web. Em XML e HTML, um elemento pode conter um item de dados, ou um bloco de texto, ou uma imagem, ou talvez nada. Um elemento típico inclui uma tag de abertura com alguns atributos, o conteúdo de texto incluído e uma tag de fechamento.
+ Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

+ +

Elementos e tags não são a mesma coisa. As tags começam ou terminam um elemento no código fonte, enquanto os elementos são parte do {{Glossary("DOM")}}, o modelo do documento para exibir a página no {{glossary("browser", "navegador")}}.

+ +

Veja também

+ + diff --git a/files/pt-br/glossary/endianness/index.html b/files/pt-br/glossary/endianness/index.html new file mode 100644 index 0000000000..f08312ce91 --- /dev/null +++ b/files/pt-br/glossary/endianness/index.html @@ -0,0 +1,31 @@ +--- +title: Endianness +slug: Glossario/Endianness +tags: + - Coding + - CodingScripting + - Glossary +translation_of: Glossary/Endianness +--- +

"Endian" and "endianness" (ou "ordem-de-bytes") descrevem como os computadores organizam os bytes que compõem os números.

+ +

Cada local de armazenamento de memória possui um indice ou endereço. Cada byte pode ser armazenado em um numero de 8-bits (ou seja, entre 0x00 e 0xff), então você deve reservar mais que um byte para armazenar um numero maior. De longe, o mais comum na ordenação de múltiplos bytes em um único número é o little-endian, que é usado em todos os processadores Intel. Little-endian significa armazenar bytes na ordem do menor para o mais significativo (onde o byte menos significativo ocupa o primeiro, ou menor, endereço), comparável a maneira comum de escrever datas na Europa (por exemplo, 31 Dezembro de 2050).

+ +

Naturalmente, big-endian é a ordem oposta, comparável a uma data ISO (2050-12-31). Big-endian é frequentemente chamada de "ordem de bytes de rede", por que os padrões da internet geralmente exigem que os dados sejam armazenados em big-endian, começando pelo nivel padrão do socket UNIX e indo a todas as estruturas padronizadas de dados binários da Web. Além disso, os computadores Mac mais antigos, que usam a série 68000 e microprocessadores PowerPC, usavam o big-endian.

+ +

Exemplos com o numero 0x12345678 (ou seja, 305 419 896 em decimal):

+ + + +

Veja também

+ + diff --git a/files/pt-br/glossary/entity_header/index.html b/files/pt-br/glossary/entity_header/index.html new file mode 100644 index 0000000000..8c49620d03 --- /dev/null +++ b/files/pt-br/glossary/entity_header/index.html @@ -0,0 +1,23 @@ +--- +title: Cabeçalho de entidade +slug: Glossario/Entity_header +translation_of: Glossary/Entity_header +--- +

Um cabeçalho de entidade é um {{glossary("header", "HTTP header")}} descrevendo o conteúdo do corpo da mensagem. Cabeçalhos da entidade são usados em ambos, respostas e requerimentos HTTP. Cabeçalhos como {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} são cabeçalhos de entidade.

+ +

Mesmo se cabeçalhos de entidade não sejam requerimentos ou cabeçalhos de resposta, eles são muitas vezes incluídos nestes termos.

+ +

No exemplo a seguir, {{HTTPHeader("Content-Length")}} é um cabeçalho de entidade, enquanto {{HTTPHeader("Host")}} e {{HTTPHeader("User-Agent")}} são {{glossary("request header", "request headers")}}:

+ +
POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128
+ +

Aprenda mais

+ +

Conhecimento técnico

+ + diff --git a/files/pt-br/glossary/falsy/index.html b/files/pt-br/glossary/falsy/index.html new file mode 100644 index 0000000000..977b819979 --- /dev/null +++ b/files/pt-br/glossary/falsy/index.html @@ -0,0 +1,28 @@ +--- +title: Falsy +slug: Glossario/Falsy +translation_of: Glossary/Falsy +--- +

Um valor falsy é um valor que se traduz em falso quando avaliado em um contexto {{Glossary("Boolean")}}.

+ +

{{Glossary("JavaScript")}} usa tipo {{Glossary("Type_Conversion", "coercion")}} em contextos booleanos.

+ +

Exemplos de valores falsy em JavaScript (que se traduzirá em false e assim ignorar o bloco if):

+ +
if (false)
+if (null)
+if (undefined)
+if (0)
+if (NaN)
+if ('')
+if (document.all) [1]
+ +

[1] document.all tem sido utilizado para a detecção do navegador no passado e a especificação HTML define uma violação intencional do padrão ECMAScript aqui para manter a compatibilidade com código legado (if (document.all) { // Internet Explorer code here } ou usando document.all sem verificar sua presença em primeiro lugar: document.all.foo).

+ +

Aprender mais

+ + diff --git a/files/pt-br/glossary/first-class_function/index.html b/files/pt-br/glossary/first-class_function/index.html new file mode 100644 index 0000000000..552b841dfa --- /dev/null +++ b/files/pt-br/glossary/first-class_function/index.html @@ -0,0 +1,99 @@ +--- +title: Função First-class +slug: Glossario/Funcao-First-class +translation_of: Glossary/First-class_Function +--- +

Entede-se que uma linguagem de programação tem Função First-class quando suas funções são tratadas como qualquer outra variável. Por exemplo, numa linguagem desse tipo, a função pode ser passada como argumento pra outras funções, ser retornada por outra função e pode ser atribuída como um valor à uma variável.

+ +

Exemplo | Atribuir uma função à uma variável

+ +

JavaScript

+ +
const foo = function() {
+   console.log("foobar");
+}
+// Chamar a função usando a variável
+foo();
+
+ +

Nós atribuímos uma Função Anônima à uma Variável, então usamos a variável pra chamar a função adicionando parênteses () no fim.

+ +
+

Mesmo se sua função for nomeada, você pode usar o nome da variável pra chamá-la. Nomeá-la será útil quando for debugar seu código. Mas não afetará a maneira que à chamamos.

+
+ +

Exemplo | Passar uma função como um Argumento

+ +

JavaScript

+ +
function sayHello() {
+   return "Hello, ";
+}
+function greeting(helloMessage, name) {
+  console.log(helloMessage() + name);
+}
+// Passar `sayHello` como um argumento pra função `greeting`
+greeting(sayHello, "JavaScript!");
+
+ +

Nós estamos passando a função sayHello() como um argumento pra função greeting(), isso explica como estamos tratando a função como um valor.

+ +
+

A função que passamos como um argumento pra outra função, chamou uma Função Callback. sayHello é uma Função Callback.

+
+ +

Exemplo | Retornar uma função

+ +

JavaScript

+ +
function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+
+ +

Neste exemplo; Precisamos retornar uma função de outra função - Podemos retornar uma função porque tratamos função em JavaScript como um valor.

+ +
+

Uma função que retorna uma função é chamada de Higher-Order Function

+
+ +

De volta ao nosso exemplo; Agora, precisamos chamar a função sayHello e a Função anônima retornada. Existem duas maneiras para fazermos isso:

+ +

1- Usando uma variável

+ +
const sayHello = function() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+const myFunc = sayHello();
+myFunc();
+
+ +

Dessa maneira, ela retorna a mensagem Hello!.

+ +
+

Você tem que usar outra variável. Se você fosse chamar sayHello diretamente, ela retornaria a função em si sem chamar a função retornada.

+
+ +

2- Usando parênteses duplo

+ +
function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+sayHello()();
+
+ +

Estamos usando parênteses duplo ()() pra chamar também a função retornada.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/flex/index.html b/files/pt-br/glossary/flex/index.html new file mode 100644 index 0000000000..08bd53ec1a --- /dev/null +++ b/files/pt-br/glossary/flex/index.html @@ -0,0 +1,44 @@ +--- +title: Flex +slug: Glossario/Flex +translation_of: Glossary/Flex +--- +

flex é um novo valor adicionado à propriedade {{cssxref("display")}}. Junto com o inline-flex, este valor faz com que o elemento aplicado seja um {{glossary("flex container")}}, e seus filhos se transformem então em {{glossary("flex item")}}.Os itens então farão parte de um layout flex, e todas as propriedades definidas no CSS Flexbox poderão ser aplicadas.

+ +

A propriedade flex é um atalho para as propriedades flexboxflex-grow, flex-shrink e flex-basis.

+ +

Além disso, <flex> pode ser também uma unidade flexível em um CSS Grid Layout.

+ +

Veja mais

+ +

Referências

+ +
+ +
+ +

Leitura complementar

+ + diff --git a/files/pt-br/glossary/forbidden_header_name/index.html b/files/pt-br/glossary/forbidden_header_name/index.html new file mode 100644 index 0000000000..0eef8a148a --- /dev/null +++ b/files/pt-br/glossary/forbidden_header_name/index.html @@ -0,0 +1,39 @@ +--- +title: Nome de cabeçalho proibido +slug: Glossario/Forbidden_header_name +translation_of: Glossary/Forbidden_header_name +--- +

Um nome de cabeçalho proibido é o nome de qualquer cabeçalho HTTP que não pode ser modificado programaticamente; especificamente, um nome de cabeçalho de solicitação HTTP (em contraste com um {{Glossary("Forbidden response header name")}}).

+ +

Modificar esses cabeçalhos é proibido porque o agente do usuário retém o controle total sobre eles. Nomes começando com ` Sec-` são reservados para criar novos cabeçalhos seguros de {{glossary("API","APIs")}} usando Fetch que concedem aos desenvolvedores controle sobre cabeçalhos, como {{domxref("XMLHttpRequest")}}.

+ +

Nomes de cabeçalho proibidos começam com Proxy-ou Sec-, ou são um dos seguintes nomes:

+ + + +
+

Nota: O cabeçalho User-Agent não é mais proibido, de acordo com a especificação - consulte a lista de nomes de cabeçalhos proibidos (isso foi implementado no Firefox 43) - agora ele pode ser definido em um objeto e busca de Headers, ou via XHR setRequestHeader().

+
diff --git a/files/pt-br/glossary/forbidden_response_header_name/index.html b/files/pt-br/glossary/forbidden_response_header_name/index.html new file mode 100644 index 0000000000..4acb9a5835 --- /dev/null +++ b/files/pt-br/glossary/forbidden_response_header_name/index.html @@ -0,0 +1,30 @@ +--- +title: Forbidden response header name +slug: Glossario/Forbidden_response_header_name +tags: + - Glossário + - HTTP + - Response + - forbidden +translation_of: Glossary/Forbidden_response_header_name +--- +

Um nome de cabeçalho de resposta proibido é um  nome de cabeçalho HTTP  (ou `Set-Cookie` ou ` Set-Cookie2`) que não pode ser modificado programaticamente.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}}{{Spec2('Fetch')}} 
diff --git a/files/pt-br/glossary/function/index.html b/files/pt-br/glossary/function/index.html new file mode 100644 index 0000000000..e3a195cabd --- /dev/null +++ b/files/pt-br/glossary/function/index.html @@ -0,0 +1,93 @@ +--- +title: Função +slug: Glossario/Função +tags: + - Glossário + - Iniciante + - Intro + - JavaScript +translation_of: Glossary/Function +--- +

 

+ +

Uma função (function) é um fragmento de código que pode ser invocado por outro código, por si mesmo ou uma {{Glossary ("variável")}} que se refere à função. Quando uma função é invocada, o {{Glossary ("Argument", "argumento")}} é passado para a função como input (entrada) e a função pode opcionalmente retornar um output (saída). Uma função em {{glossary ("JavaScript")}} também é um {{glossary ("objeto")}}.

+ +

O nome da função é um {{Glossary ("identificador")}} declarado como parte de uma declaração de função ou expressão de função. O nome da função {{Glossary ("escopo")}} depende se o nome da função é uma declaração ou expressão.

+ +

Diferentes tipos de funções

+ +

Uma função anônima é uma função sem o nome da função:

+ +
function () {};
+// or using the ECMAScript 2015 arrow notation
+() => {};
+
+ +

 

+ +

Uma função nomeada é uma função com o nome da função:

+ +
function foo() {};
+// or using the ECMAScript 2015 arrow notation
+const foo = () => {};
+
+ +

Uma função interna é uma função dentro de outra função (square nesse caso). Uma função externa é uma função contendo uma função (addSquares nesse caso):

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+};
+//Using ECMAScript 2015 arrow notation
+const addSquares = (a,b) => {
+   const square = x => x*x;
+   return square(a) + square(b);
+};
+
+ +

Uma função recursiva é uma função que invoca a si mesma. Veja {{Glossary("Recursão", "recursão")}}.

+ +
function loop(x) {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+//Using ECMAScript 2015 arrow notation
+const loop = x => {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+
+ +

Uma Expressão de Função Invocada Imediatamente (IIFE em Inglês) é uma função que é invocada diretamente após a função ser carregada no compilador do navegador. A maneira de identificar um IIFE é localizar os parênteses extra esquerdo e direito no final da declaração da função.

+ +
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+
+ +

Se gostaria de saber mais sobre o IIFE, confira a seguinte página no Wikipédia : Immediately Invoked Function Expression

+ +

Leia mais

+ +

Referência técnica

+ + diff --git a/files/pt-br/glossary/fuzzing/index.html b/files/pt-br/glossary/fuzzing/index.html new file mode 100644 index 0000000000..6d6a97581a --- /dev/null +++ b/files/pt-br/glossary/fuzzing/index.html @@ -0,0 +1,19 @@ +--- +title: Teste de Fuzzing +slug: Glossario/Fuzzing +tags: + - Firefox + - Fuzzing + - Mozilla + - QA + - Segurança + - Teste +translation_of: Glossary/Fuzzing +--- +

O Fuzzing é uma técnica para testar o software usando ferramentas automáticas para fornecer entradas inválidas ou inesperadas para um programa ou função em um programa, logo verificando os resultados para ver se o programa falha ou age de forma inapropriada. Essa é uma forma importante para garantir que o software está estável, confiável e seguro, e nós usamos muito o fuzzing no Mozilla.

+ + diff --git a/files/pt-br/glossary/gecko/index.html b/files/pt-br/glossary/gecko/index.html new file mode 100644 index 0000000000..4de4954dda --- /dev/null +++ b/files/pt-br/glossary/gecko/index.html @@ -0,0 +1,34 @@ +--- +title: Gecko +slug: Glossario/Gecko +tags: + - Firefox OS + - Gecko + - Glossary + - Infrastructure + - Intro + - Mozilla +translation_of: Glossary/Gecko +--- +

Gecko é um motor de layout desenvolvido pela Mozilla Project e utilizado em vários apps/dispositivos, incluindo {{glossary("Mozilla Firefox","Firefox")}} e {{glossary("Firefox OS")}}.

+ +

Web {{glossary("browser","browsers")}} precisam de um software chamado de motor de layout para interpretar {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}}, e conteúdos embutidos (como imagens) e desenhar tudo para a sua tela. Apesar disso, Gecko garante que {{glossary("API","APIs")}} associadas funcionem bem em qualquer sistema operacional que o Gecko suporte, e que APIs apropriadas sejam expotas somente aos alvos relevantes. Isso significa que o Gecko inclui, além de outras coisas, uma pilha de conexão de rede, pilha gráfica, motor de layout, uma máquina virtual de JavaScript  e portando camadas.

+ +

Como todos os aplicativos do Firefox OS são Web apps, o Firefox OS usa o Gecko como seu aplicativo de execução também.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + + +


+  

diff --git a/files/pt-br/glossary/general_header/index.html b/files/pt-br/glossary/general_header/index.html new file mode 100644 index 0000000000..c86f962300 --- /dev/null +++ b/files/pt-br/glossary/general_header/index.html @@ -0,0 +1,8 @@ +--- +title: Cabeçalho Genérico +slug: Glossario/General_header +translation_of: Glossary/General_header +--- +

Um cabeçalho genérico  é um {{glossary('Header', ' cabeçalho HTTP')}} que pode ser de mensagens de solicitação e resposta, mas isso não é aplicado ao seu conteúdo. De acordo com o contexto em que são usados, podem ser cabeçalho de {{glossary("Response header", "resposta")}} ou de {{glossary("request header", "Requisição")}}. Entranto, não são {{glossary("entity header", "cabeçalhos de entidade")}}.

+ +

O uso mais comum para cabeçalho genérico é {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.

diff --git a/files/pt-br/glossary/global_object/index.html b/files/pt-br/glossary/global_object/index.html new file mode 100644 index 0000000000..85302bf2cc --- /dev/null +++ b/files/pt-br/glossary/global_object/index.html @@ -0,0 +1,14 @@ +--- +title: Global object +slug: Glossario/Global_object +translation_of: Glossary/Global_object +--- +

Um objeto global é um {{Glossary("objeto")}} que sempre está definido no {{Glossary("escopo global")}}.

+ +

Em JavaScript, um objeto global é sempre definido. No browser, quando scripts criam variáveis globais, elas são criadas como membros desse objeto global (Em {{Glossary("Node.js")}} isso não se aplica). A {{Glossary("interface")}} do objeto global depende do contexto de execução no qual o script está sendo executado. Por exemplo:

+ + diff --git a/files/pt-br/glossary/graceful_degradation/index.html b/files/pt-br/glossary/graceful_degradation/index.html new file mode 100644 index 0000000000..42655ffe1e --- /dev/null +++ b/files/pt-br/glossary/graceful_degradation/index.html @@ -0,0 +1,26 @@ +--- +title: Degradação graciosa +slug: Glossario/degradação_graciosa +translation_of: Glossary/Graceful_degradation +--- +

Degradação graciosa é uma filosofia de design centrada na tentativa de criar um site/aplicativo moderno que funcione nos navegadores mais recentes, mas recorre a uma experiência que, embora não tão boa, ainda oferece conteúdo e funcionalidade essenciais para os navegadores antigos.

+ +

{{Glossary("Polyfill","Polyfills")}} podem ser usados para criar com JavaScript recursos ausentes, mas alternativas aceitáveis para recursos como estilo e layout devem ser fornecidas sempre que possível, por exemplo, usando a cascata CSS ou o comportamento de HTML substituto. Alguns bons exemplos podem ser encontrados em Handling common HTML and CSS problems.

+ +

É uma técnica útil que permite aos desenvolvedores da Web se concentrarem no desenvolvimento dos melhores sites possíveis, uma vez que esses sites são acessados por vários user-agents desconhecidos.
+ {{Glossary("Progressive enhancement")}} está relacionado, mas é diferente - geralmente visto como na direção oposta à degradação graciosa. Na realidade, ambas as abordagens são válidas e geralmente podem se complementar.

+ + diff --git a/files/pt-br/glossary/grid/index.html b/files/pt-br/glossary/grid/index.html new file mode 100644 index 0000000000..ee60bf19a9 --- /dev/null +++ b/files/pt-br/glossary/grid/index.html @@ -0,0 +1,69 @@ +--- +title: Grade +slug: Glossario/Grade +translation_of: Glossary/Grid +--- +

Uma grade no CSS é definida usando o valor grid da propriedade {{cssxref("display")}}; você pode definir colunas e linhas na sua grade usando as propridades {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}.

+ +

A grade que você define usando essas propriedades é descrita como uma grade explícita.

+ +

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais {{glossary("grid tracks", "tracks")}} para manter {{glossary("grid item", "grid items")}}, então serão criadas faixas extras na grade implícita. A grade implícita é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

+ +

No exemplo abaixo, criamos uma grade explícita de três colunas e duas linhas. A terceira linha da grade é uma faixa implícita de linha da grade, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+<div> Um </div>
+    <div> dois </div>
+    <div> três </div>
+    <div> quatro </div>
+    <div> cinco </div>
+    <div> seis </div>
+    <div> sete </div>
+    <div> oito </div>
+</div>
+
+
+ +

{{ EmbedLiveSample('example', '500', '330') }}

+ + diff --git a/files/pt-br/glossary/grid_areas/index.html b/files/pt-br/glossary/grid_areas/index.html new file mode 100644 index 0000000000..0e9969dd3d --- /dev/null +++ b/files/pt-br/glossary/grid_areas/index.html @@ -0,0 +1,78 @@ +--- +title: Grid Areas +slug: Glossario/Grid_Areas +translation_of: Glossary/Grid_Areas +--- +

Um  grid area  é um ou mais {{glossary("grid cell", "grid cells")}} que compõem uma área retangular do grid.  As Grid Areas quando se coloca um item  usando line-based placement (posicionamento baseado em colunas e linha)ou quando define áreas usando named grid areas(substituindo o nome).

+ +

Image showing a highlighted grid area

+ +

Áreas do Grid devem ser de natureza regutangular; não é possível criar por exemplo uma área de grid em forma de T ou L .

+ +

No exemplo abaixo temos um grid contêiner com dois items de grid, nomeamos esses com a propriedade {{cssxref("grid-area")}} e em seguida colocamos eles no grid usando {{cssxref("grid-template-areas")}}. Isso  cria duas áreas de grid, uma cobrindo 4 áreas do grid e a outra duas áreas do grid.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-template-rows: 100px 100px;
+  grid-template-areas:
+    "a a b"
+    "a a b";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+
+ +
<div class="wrapper">
+   <div class="item1">Item</div>
+   <div class="item2">Item</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

Saiba Mais

+ +

Property reference

+ + + +

Further reading

+ + diff --git a/files/pt-br/glossary/hoisting/index.html b/files/pt-br/glossary/hoisting/index.html new file mode 100644 index 0000000000..a60854cad1 --- /dev/null +++ b/files/pt-br/glossary/hoisting/index.html @@ -0,0 +1,86 @@ +--- +title: Hoisting +slug: Glossario/Hoisting +translation_of: Glossary/Hoisting +--- +

Hoisting (içamento, em português) é um termo que você não encontrará usado em nenhuma prosa de especificação normativa antes da especificação de idioma do ECMAScript® 2015. Hoisting foi pensado como uma maneira geral de pensar sobre como os contextos de execução (especificamente as fases de criação e execução) funcionam em JavaScript. No entanto, o conceito pode ser um pouco confuso a princípio.

+ +

Conceitualmente, por exemplo, uma definição estrita de elevação sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código, mas isso não é realmente o que acontece. Em vez disso, as declarações de variável e função são colocadas na memória durante a fase de compilação, mas permanecem exatamente onde você as digitou no seu código.

+ +

Aprenda mais

+ +

Exemplo técnico

+ +

Variáveis:

+ +

Uma das vantagens do JavaScript em colocar declarações de função na memória antes de executar qualquer segmento de código é que ele permite que você use uma função antes de declara-la em seu código. Por exemplo:

+ +
function catName(name) {
+  console.log("O nome do meu gato é " + name);
+}
+
+catName("Tigger");
+
+/*
+O resultado do código acima é: "O nome do meu gato é Tigger"
+*/
+
+ +

O trecho de código acima é como você escreveria o código para que ele funcionasse. Agora, vamos ver o que acontece quando chamamos a função antes de escrevê-la:

+ +
catName("Chloe");
+
+function catName(name) {
+  console.log("O nome do meu gato é " + name);
+}
+/*
+O resultado do código acima é: "O nome do meu gato é Chloe"
+*/
+
+ +

Mesmo que chamemos a função em nosso código primeiro, antes que a função seja escrita, o código ainda funciona. Isto ocorre por conta de como a execução de contexto funciona em JavaScript.

+ +

Hoisting funciona bem com outros tipos de dados e variáveis. As variáveis podem ser inicializadas e usadas antes de serem declaradas.

+ +

Apenas declarações são hoisted(içadas, em português)

+ +

O JavaScript apenas eleva (hoists) as declarações, não as inicializações. Se uma variável for declarada e inicializada após usá-la, o valor será undefined. Por exemplo:

+ +
console.log(num); // Retorna undefined
+var num;
+num = 6;
+ +

Se você declarar a variável depois que ela for usada, mas inicializá-la antecipadamente, ela retornará o valor:

+ +
num = 6;
+console.log(num); // retorna 6
+var num;
+
+ +

Abaixo estão mais exemplos demonstrando a elevação (hoisting).

+ +
//Exemplo 1 - Não eleva (hoist)
+var x = 1; // Inicializa x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialize y
+//Isso não funcionará, pois o JavaScript apenas eleva declarações
+
+//Example 2 - Hoists
+var num1 = 3; //Declara e inicializa num1
+num2 = 4; //Inicializa num2
+console.log(num1 + " " + num2); //'3 4'
+var num2; //Declara num2 para hoisting
+
+//Example 3 - Hoists
+a = 'Cran'; //Inicializa a
+b = 'berry'; //Inicializa b
+console.log(a + "" + b); // 'Cranberry'
+var a, b; //Declara ambos a & b para hoisting
+
+ +

Referência técnica

+ + diff --git a/files/pt-br/glossary/hsts/index.html b/files/pt-br/glossary/hsts/index.html new file mode 100644 index 0000000000..0ea7646bd3 --- /dev/null +++ b/files/pt-br/glossary/hsts/index.html @@ -0,0 +1,24 @@ +--- +title: HSTS +slug: Glossario/HSTS +tags: + - HSTS + - HTTP + - Segurança +translation_of: Glossary/HSTS +--- +

O HTTP Strict Transport Security permite que um site informe ao navegador que ele nunca deve carregar o site usando HTTP e deve converter automaticamente todas as tentativas de acessar o site usando HTTP para solicitações HTTPS. Consiste em um cabeçalho HTTP Strict-Transport-Security, enviado de volta pelo servidor com o recurso.

+ +

Em outras palavras, ele diz ao navegador que apenas altere o protocolo de HTTP para HTTPS em uma url (e será mais seguro) e solicitará que o navegador faça isso para cada solicitação.

+ +

 

+ +
+

Leia Mais

+ + +
diff --git a/files/pt-br/glossary/html/index.html b/files/pt-br/glossary/html/index.html new file mode 100644 index 0000000000..ed6e0dfc0d --- /dev/null +++ b/files/pt-br/glossary/html/index.html @@ -0,0 +1,49 @@ +--- +title: HTML +slug: Glossario/HTML +tags: + - Glossário + - HTML + - Web + - scripts +translation_of: Glossary/HTML +--- +

HTML (HyperText Markup Language) é uma linguagem descritiva que especifica a estrutura de uma página web.

+ +

Breve história

+ +

Em 1990, Tim Berners-Lee definiu o conceito de {{glossary("hipertexto")}} como parte de sua visão da {{glossary("World Wide Web","Web")}} , a qual Berners-Lee formalizou no ano seguinte através de uma marcação baseada em {{glossary("SGML")}}. O {{glossary("IETF")}} começou a especificar formalmente o HTML em 1993, e depois de vários rascunhos, lançou a versão 2.0 em 1995. Em 1994 Berners-Lee fundou a  {{glossary("W3C")}} para desenvolver a Web. Em 1996, a W3C assumiu o HTML e publicou a recomendação HTML 3.2 um ano depois. A recomendação HTML 4.0 foi lançada em 1999 e se tornou um padrão {{glossary("ISO")}} em 2000.

+ +

Nesse momento, a W3C quase abandonou o HTML em favor do  {{glossary("XHTML")}}, levando a fundação de um grupo independente chamado de {{glossary("WHATWG")}} em 2004. Graças ao WHATWG, o trabalho em {{glossary("HTML5")}} continuou: as duas organizações lançaram o primeiro rascunho em 2008 e o padrão final em 2014.

+ +

Conceito e sintaxe

+ +

Um documento HTML é um documento de texto simples estruturado com {{glossary("element","elementos")}}. Elementos são acompanhados de abertura e fechamento de {{Glossary("tag","tags")}}. Cada tag começa e termina com colchetes angulares (<>). Existem algumas tags vazias ou sem conteúdo que não podem incluir qualquer texto, como por exemplo a tag {{htmlelement("img")}}.

+ +

Você pode estender tags HTML com {{Glossary("attribute","atributos")}}, os quais fornecem informações adicionais que afetam como o navegador interpreta o elemento:

+ +

Detalhes da estrutura de um elemento HTML

+ +

Um arquivo HTML normalmente é salvo com uma extensão .htm ou .html, é disponibilizado por um {{Glossary("Server","servidor web")}}, e pode ser renderizado por qualquer {{Glossary("Browser","navegador")}}.

+ +

Leia mais

+ +

Conhecimento Geral

+ + + +

Aprendendo HTML

+ + + +

Referência Técnica

+ + diff --git a/files/pt-br/glossary/http/index.html b/files/pt-br/glossary/http/index.html new file mode 100644 index 0000000000..6e3ea45f9c --- /dev/null +++ b/files/pt-br/glossary/http/index.html @@ -0,0 +1,29 @@ +--- +title: HTTP +slug: Glossario/HTTP +tags: + - Glossário + - HTTP + - Infraestrutura + - Iniciante + - Protocolos +translation_of: Glossary/HTTP +--- +

 

+ +

HTTP (HyperText Transfer Protocol) é o {{glossary("protocolo")}} básico que habilita a transferência de arquivos na {{glossary("World Wide Web","Web")}}, normalmente entre um navegador e um servidor para que os humanos possam lê-los. A versão atual da especificação HTTP é chamada HTTP / 2.

+ +

Como parte de um {{glossary("URI")}}, o "http: //" é chamado de "esquema" e geralmente fica no início de um endereço, por exemplo em "https://developer.mozilla.org" para indicar ao navegador que solicite o documento usando o protocolo HTTP. O https neste caso refere-se à versão segura do protocolo HTTP, {{glossary("SSL")}} (também chamado TLS).

+ +

O HTTP é textual (toda a comunicação é feita em texto simples) e sem estado (nenhuma comunicação está ciente das comunicações anteriores). Esta propriedade torna ideal para humanos ler documentos (sites) na web. No entanto, o HTTP também pode ser usado como base para os serviços da Web {{glossary("REST")}} de servidor para servidor ou solicitações {{glossary("AJAX")}} dentro de sites para torná-los mais dinâmicos.

+ +
+

Leia mais

+ + +
+ +

 

diff --git a/files/pt-br/glossary/http_2/index.html b/files/pt-br/glossary/http_2/index.html new file mode 100644 index 0000000000..d1884d16d3 --- /dev/null +++ b/files/pt-br/glossary/http_2/index.html @@ -0,0 +1,22 @@ +--- +title: HTTP/2 +slug: Glossario/HTTP_2 +tags: + - Glossário + - HTTP + - Infraestrutura + - Performance na Web + - Referencia + - 'l10n:prioridade' +translation_of: Glossary/HTTP_2 +--- +

HTTP/2 é a principal revisão do protocolo de rede HTTP. Os princiais objetivos do HTTP/2 são reduzir a latência, permitindo a multiplexação total das requisições e respostas, minimizar a sobrecarga do protocolo por meio da compactação eficiente dos campos do cabeçalho HTTP e adicionar suporte para priorização de requisições e notificações dos servidores.

+ +

HTTP/2 não modifica a semântica de aplicativo do HTTP de nenhuma maneira. Todos os principais conceitos encontrados no HTTP 1.1, como métodos HTTP, códigos de status, URIs e campos de cabeçalho, permanecem no lugar. Em vez disso, o HTTP/2 modifica como os dados são formatados (enquadrados) e transportados entre o cliente e o servidor, sendo que ambos gerenciam todo o processo e ocultam a complexidade do aplicativo na nova camada de enquadramento. Como resultado, todas as aplicações existentes podem ser entregues sem modificação.

+ +

Veja também

+ + diff --git a/files/pt-br/glossary/http_header/index.html b/files/pt-br/glossary/http_header/index.html new file mode 100644 index 0000000000..24bbb51bb6 --- /dev/null +++ b/files/pt-br/glossary/http_header/index.html @@ -0,0 +1,79 @@ +--- +title: Cabeçalho HTTP +slug: Glossario/Cabecalho_HTTP +tags: + - Cabeçalho HTTP + - Glossary + - Glossário + - HTTP Header + - Mecânicas da Web + - WebMechanics +translation_of: Glossary/HTTP_header +--- +

Um Cabeçalho HTTP é um campo de uma requisição ou resposta HTTP que passa informações adicionais, alterando ou melhorando a precisão da semântica da mensagem ou do corpo. Cabeçalhos são case-insensitive, iniciam-se no começo da linha e são seguidos imediamente por um ':' e um valor dependendo do cabeçalho em si. O valor termina no próximo CRLF ou no fim da mensagem.

+ +

Tradicionalmente, cabeçalhos são classificados em categorias, apesar disso, essa classificação não faz mais parte de nenhuma especificação:

+ + + +

Uma requisição básica com um cabeçalho:

+ +
GET /example.http HTTP/1.1
+Host: example.com
+
+ +

Redirecionamentos possuem cabeçalhos mandatários ({{HTTPHeader("Location")}}):

+ +
302 Found
+Location: /NewPage.html
+
+ +

Um típicos conjunto de cabeçalhos:

+ +
304 Not Modified
+Access-Control-Allow-Origin: *
+Age: 2318192
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Server: Apache
+Vary: Accept-Encoding
+Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
+X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
+X-Backend-Server: developer6.webapp.scl3.mozilla.com
+X-Cache: Hit from cloudfront
+X-Cache-Info: cached
+
+ + diff --git a/files/pt-br/glossary/https/index.html b/files/pt-br/glossary/https/index.html new file mode 100644 index 0000000000..577c1d37c8 --- /dev/null +++ b/files/pt-br/glossary/https/index.html @@ -0,0 +1,19 @@ +--- +title: HTTPS +slug: Glossario/https +tags: + - Glossário + - HTTPS + - Infraestrutura + - Segurança +translation_of: Glossary/https +--- +

HTTPS (HTTP Secure) é uma versão do protocolo {{Glossary("HTTP")}} criptografado. É normalmente usado {{Glossary("SSL")}} ou {{Glossary("TLS")}} para criptografar toda a comunicação entre um cliente e um servidor. Essa conexão segura permite aos clientes trocar com segurança dados confidenciais com o servidor, por exemplo, para atividades bancárias ou compras online.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/idempotent/index.html b/files/pt-br/glossary/idempotent/index.html new file mode 100644 index 0000000000..8966157c34 --- /dev/null +++ b/files/pt-br/glossary/idempotent/index.html @@ -0,0 +1,51 @@ +--- +title: Idempotente +slug: Glossario/Idempotente +tags: + - Glossary + - Glossário + - Mecânicas da Web + - WebMechanics +translation_of: Glossary/Idempotent +--- +

Um método HTTP é idempotente se uma requisição idêntica pode ser feita uma ou mais vezes em sequência com o mesmo efeito enquanto deixa o servidor no mesmo estado. Em outras palavras, um método idempotente não deveria possuir nenhum efeito colateral (exceto para manter estatísticas). Implementados corretamente, o {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, e {{HTTPMethod("DELETE")}} são métodos idempotentes, mas não o método {{HTTPMethod("POST")}}. Todos os métodos  {{glossary("seguro")}}s também são idempotentes.

+ +

Para ser idempotente, somente o estado atual do back-end de um servidor deve ser considerado, o código de status retornado por cada requisição pode variar: a primeira chamada de um {{HTTPMethod("DELETE")}} vai provavelmente retornar um {{HTTPStatus("200")}}, enquanto as chamadas sucessivas vão provavelmente retornar {{HTTPStatus("404")}}. Outra implicação do {{HTTPMethod("DELETE")}} ser idempotente é de que os desenvolvedores não deveriam implementar APIs RESTful com a funcionalidade de deleção de última entrada usando o método DELETE.

+ +

Note que a idempotência de um método não é garantida pelo servidor, algumas aplicações também podem quebrar a constante de idempotência.

+ +

GET /pageX HTTP/1.1 é idempotente. Chamado diversas vezes em sequência, ele vai retornar o mesmo resultado:

+ +
GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+
+ +

POST /add_row HTTP/1.1 não é idempotente. Se ele for chamado diversas vezes, ele adicionará novas entradas:

+ +
POST /add_row HTTP/1.1
+POST /add_row HTTP/1.1   -> Adiciona a 2ª linha
+POST /add_row HTTP/1.1   -> Adiciona a 3ª linha
+
+ +

DELETE /idX/delete HTTP/1.1 é idempotente, mesmo que o código de status mude entre requisições:

+ +
DELETE /idX/delete HTTP/1.1   -> Retorna 200 se idX existe
+DELETE /idX/delete HTTP/1.1   -> Returna 404 como ele acabou de ser deletado
+DELETE /idX/delete HTTP/1.1   -> Returna 404
+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Conhecimento técnico

+ + diff --git a/files/pt-br/glossary/identifier/index.html b/files/pt-br/glossary/identifier/index.html new file mode 100644 index 0000000000..a94516e145 --- /dev/null +++ b/files/pt-br/glossary/identifier/index.html @@ -0,0 +1,20 @@ +--- +title: Identificador (Identifier) +slug: Glossario/Identificador +tags: + - Compatilhando + - Glossário + - Iniciante +translation_of: Glossary/Identifier +--- +

Uma sequência de caracteres no código, que identifica uma {{glossary("variável")}}, {{glossary("função")}}, ou {{glossary("propriedade")}}.

+ +

Em {{glossary("JavaScript")}}, identificadores podem conter somente caracteres alfanuméricos (ou "$" ou "_"), e não podem iniciar com um dígito. Um identificador difere de uma string no sentido de que uma string é informação, enquanto um identificador é parte do código. Em JavaScript, não existe uma forma de converter identificadores para strings, mas as vezes é possível converter strings em identificadores.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/iife/index.html b/files/pt-br/glossary/iife/index.html new file mode 100644 index 0000000000..cff1519346 --- /dev/null +++ b/files/pt-br/glossary/iife/index.html @@ -0,0 +1,48 @@ +--- +title: IIFE +slug: Glossario/IIFE +tags: + - DesignPattern + - Glossário + - JavaScript +translation_of: Glossary/IIFE +--- +

IIFE (Immediately Invoked Function Expression) é uma função em {{glossary("JavaScript")}} que é executada assim que definida.

+ +

É um {{glossary("Design Pattern")}} também conhecido como {{glossary("Self-Executing Anonymous Function")}} e contém duas partes principais. A primeira é a função anônima cujo escopo léxico é encapsulado entre parênteses. Isso previne o acesso externo às variáveis declaradas na IIFE, bem como evita que estas variáveis locais poluam o escopo global.

+ +

A segunda parte corresponde à criação da expressão (), por meio da qual o interpretador JavaScript avaliará e executará a função.

+ +

Exemplos

+ +

A função se torna uma expressão que é imediatamente executada. A variável definida dentro da expressão não pode ser acessada fora de seu escopo.

+ +
(function () {
+    var nome = "Felipe";
+})();
+// A variável nome não é acessível fora do escopo da expressão 
+nome // gerará o erro "Uncaught ReferenceError: nome is not defined"
+ +

Atribuir uma IIFE a uma variável não armazenará a função em si, mas o resultado da função.

+ +
var result = (function () {
+    var nome = "Felipe";
+    return nome;
+})();
+// Imediatamente gera a saída: 
+result; // "Felipe"
+ +

Aprenda Mais

+ +

Aprenda mais sobre IFFE

+ + + +

Conhecimentos Gerais

+ + diff --git a/files/pt-br/glossary/index.html b/files/pt-br/glossary/index.html new file mode 100644 index 0000000000..48bbbd527d --- /dev/null +++ b/files/pt-br/glossary/index.html @@ -0,0 +1,25 @@ +--- +title: Glossário +slug: Glossario +tags: + - Glossário + - Iniciante +translation_of: Glossary +--- +
{{LearnBox({"title":"Aprenda um novo termo:"})}}
+ +

Tecnologias da Web contém longas listas de jargões e abreviações usadas em documentação e codificação. Este glossário fornece definições de palavras e abreviaturas que você precisa saber para entender e desenvolver para a web com sucesso.

+ +

Glossário de Termos

+ +

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

+ +

Contribua

+ +

Este glossário é um trabalho em constante atualização. Você pode ajudar a melhorá-lo, escrevendo novas entradas ou fazendo as existentes ainda melhores. A maneira mais fácil de começar é apertar o botão seguinte ou escolher um dos termos sugeridos abaixo.

+ +

Adicione um novo termo ao glossário

+ +

{{GlossaryList({"terms":["TTL"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

Se você quer saber mais sobre como contribuir com este glossário, confira a página de status de documentação do glossário.

diff --git a/files/pt-br/glossary/indexeddb/index.html b/files/pt-br/glossary/indexeddb/index.html new file mode 100644 index 0000000000..94bd23015a --- /dev/null +++ b/files/pt-br/glossary/indexeddb/index.html @@ -0,0 +1,18 @@ +--- +title: IndexedDB +slug: Glossario/IndexedDB +tags: + - API + - Banco de Dados + - Glossário + - Sql +translation_of: Glossary/IndexedDB +--- +

IndexedDB é uma {{glossary("API")}} de web para armazenar volumosas estruturas de dados dentro dos navegadores e indexá-los para buscas de alta performance. Sendo um RDBMS baseado em {{glossary("SQL")}}, IndexedDB é um sistema de banco de dados transacionais. Porém ele usa objetos {{glossary("JavaScript")}} ao invés de tabelas em colunas fixas para armazenar os dados.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/internet/index.html b/files/pt-br/glossary/internet/index.html new file mode 100644 index 0000000000..c03661d276 --- /dev/null +++ b/files/pt-br/glossary/internet/index.html @@ -0,0 +1,23 @@ +--- +title: Internet +slug: Glossario/Internet +tags: + - Glossário + - Guía + - Iniciante + - Introdução + - Mecanismos Web + - Precisa de Conteúdo + - Tutorial + - Web +translation_of: Glossary/Internet +--- +

A Internet é a rede mundial de redes que utiliza o conjunto de protocolos da Internet (também chamado {{glossary("TCP")}}/{{glossary("IPv6","IP")}} dos seus dois mais importantes {{glossary("protocol","protocolos")}}).

+ +

Aprenda mais

+ +

Saiba mais sobre isso

+ + diff --git a/files/pt-br/glossary/ip_address/index.html b/files/pt-br/glossary/ip_address/index.html new file mode 100644 index 0000000000..a6d7fb91c1 --- /dev/null +++ b/files/pt-br/glossary/ip_address/index.html @@ -0,0 +1,21 @@ +--- +title: Endereço IP +slug: Glossario/Endereco_IP +tags: + - Glossário + - Infraestrutura + - Iniciante + - Web +translation_of: Glossary/IP_Address +--- +

Um endereço IP é um número atribuído a cada dispositivo conectado a uma rede que usa o protocolo de Internet.

+ +

"Endereço IP" geralmente refere-se a endereços  {{Glossary("IPv4")}} de 32 bits até que o {{Glossary("IPv6")}} seja implantado de forma mais ampla.

+ +

Saiba mais

+ +

General knowledge

+ + diff --git a/files/pt-br/glossary/ipv4/index.html b/files/pt-br/glossary/ipv4/index.html new file mode 100644 index 0000000000..909b8fe17d --- /dev/null +++ b/files/pt-br/glossary/ipv4/index.html @@ -0,0 +1,20 @@ +--- +title: IPv4 +slug: Glossario/IPv4 +tags: + - Glossário + - IPv4 + - Infraestrutura + - Protocolo + - Protocolo de Internet +translation_of: Glossary/IPv4 +--- +

IPv4 é a quarta versão do {{Glossary("protocolo")}} de comunicação subjacente à {{glossary("Internet")}} e a primeira versão a ser amplamente implantada.

+ +

Formalizada primeiramente em 1981, o IPv4 traça suas raízes para o trabalho de desenvolvimento inicial do ARPAnet. IPv4 é um protocolo sem conexão para ser usado na comutação de dados em redes da camada de enlace de dados (ethernet). {{glossary("IPv6")}} está gradualmente substituindo o IPv4 devido a problemas de segurança que o IPv4 possui e as limitações de seus campos de endereços. (Versão número 5 foi atribuído em 1979 para o experimental Internet Stream Protocol, que no entanto, nunca foi chamado de IPv5).

+ +

Saiba mais

+ +

Conhecimento Geral

+ +

{{interwiki("wikipedia", "IPv4", "IPv4")}} na Wikipedia

diff --git a/files/pt-br/glossary/ipv6/index.html b/files/pt-br/glossary/ipv6/index.html new file mode 100644 index 0000000000..a301ed653e --- /dev/null +++ b/files/pt-br/glossary/ipv6/index.html @@ -0,0 +1,21 @@ +--- +title: IPv6 +slug: Glossario/IPv6 +tags: + - Glossário + - IPv6 + - Infraestrutura + - Intermediário + - Web + - WebMechanics +translation_of: Glossary/IPv6 +--- +

IPv6 é a versão mais atual do {{glossary("protocol","protocolo")}} de comunicação subjacente da {{glossary("Internet")}}. Lentamente o IPv6 está substituindo o {{Glossary("IPv4")}}, dentre outras razões porque o IPv6 permite vários {{Glossary("Endereço IP","endereços IPs")}} diferentes.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/irc/index.html b/files/pt-br/glossary/irc/index.html new file mode 100644 index 0000000000..6cf5f86f06 --- /dev/null +++ b/files/pt-br/glossary/irc/index.html @@ -0,0 +1,21 @@ +--- +title: IRC +slug: Glossario/IRC +tags: + - Glossário + - Infraestrutura + - Protocolo Aberto + - Sistema de Chat + - irc +translation_of: Glossary/IRC +--- +

O IRC (Internet Relay Chat) é um sistema de chat mundial que requer uma conexão à Internet e um cliente de IRC, que envia e recebe mensagens através do servidor de IRC.

+ +

Projetado no final dos anos 80 por Jarrko Oikarinen, o IRC usa {{glossary ("TCP")}} e é um protocolo aberto. O servidor de IRC transmite mensagens para todos os usuários conectados a um dos muitos canais de IRC (cada um com seu próprio ID).

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/iso/index.html b/files/pt-br/glossary/iso/index.html new file mode 100644 index 0000000000..7781a2109f --- /dev/null +++ b/files/pt-br/glossary/iso/index.html @@ -0,0 +1,16 @@ +--- +title: ISO +slug: Glossario/ISO +tags: + - ISO + - Normas + - padrões +translation_of: Glossary/ISO +--- +

A Organização Internacional de Padronização, popularmente conhecida como ISO (em inglês: International Organization for Standardization), é uma organização internacional que cria padrões/normas para cada tipo de indústria, visando uma melhor coordenação e união internacional. Atualmente 164 países fazem parte da ISO.

+ +

Veja mais

+ + diff --git a/files/pt-br/glossary/jank/index.html b/files/pt-br/glossary/jank/index.html new file mode 100644 index 0000000000..0b52d83572 --- /dev/null +++ b/files/pt-br/glossary/jank/index.html @@ -0,0 +1,10 @@ +--- +title: Jank +slug: Glossario/Jank +tags: + - CodingScripting + - Glosário(2) + - Performance +translation_of: Glossary/Jank +--- +

Jank se refere à lentidão em uma interface de usuário, geralmente causado por execução de tarefas longas na Thread principal, o bloqueio de renderização, ou esforço demais do processador com processos em segundo plano.

diff --git a/files/pt-br/glossary/javascript/index.html b/files/pt-br/glossary/javascript/index.html new file mode 100644 index 0000000000..de5987ece0 --- /dev/null +++ b/files/pt-br/glossary/javascript/index.html @@ -0,0 +1,68 @@ +--- +title: JavaScript +slug: Glossario/JavaScript +tags: + - ECMAScript6 + - Glossario(2) + - Iniciante + - JS + - JavaSc + - JavaScript + - scripts +translation_of: Glossary/JavaScript +--- +

Sumário

+ +

+ JavaScript (ou "JS") é uma linguagem de programação utilizada principalmente para scripts dinâmicos do lado do cliente em páginas web, podendo também ser utilizada no lado do {{Glossary("Server","servidor")}}, usando um interpretador (em inglês: runtime) como o Node.js. +

+ +

+ O JavaScript não deve ser confundido com a {{interwiki("wikipedia", "Java_(linguagem_de_programação)", "linguagem de programação Java")}}. Apesar de "Java" e "JavaScript" serem marcas comerciais (ou marcas registradas) da Oracle nos EUA e em outros países, essas duas linguagens de programação são significativamente diferentes em sintaxe, semântica e casos de uso. +

+ +

+ O JavaScript é utilizado principalmente no navegador, permitindo que os desenvolvedores manipulem o conteúdo de uma página web por meio do {{Glossary("DOM")}}, manipulem dados com o {{Glossary("AJAX")}} e o {{Glossary("IndexedDB")}}, desenhem gráficos com o {{Glossary("canvas")}}, interajam com o dispositivo que está executando o navegador através de várias {{Glossary("API","APIs")}} e muito mais. JavaScript é uma das linguagens mais utilizadas no mundo, devido ao recente crescimento e melhoria de desempenho das {{Glossary("API","APIs")}} disponíveis nos navegadores. +

+ +

Origem e História

+ +

+ Concebido como uma linguagem do lado do servidor por Brendan Eich (então empregado pela Netscape Corporation), o JavaScript logo chegou ao Netscape Navigator 2.0 em setembro de 1995. O JavaScript obteve sucesso imediato e o {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduziu o suporte ao JavaScript sob o nome JScript em agosto de 1996. +

+ +

+ Em novembro de 1996, a Netscape começou a trabalhar com a ECMA International para tornar o JavaScript um padrão do setor. Desde então, o JavaScript padronizado é chamado de + ECMAScript e especificado sob a ECMA-262, cuja última edição (décima primeira, ES2020) está disponível desde junho de 2020. +

+ +

+ Recentemente, a popularidade do JavaScript se expandiu ainda mais através do bem-sucedido Node.js, o interpretador multiplataforma mais popular de ambiente de execução JavaScript fora do navegador. Node.js foi criado utilizando o {{interwiki("wikipedia", "V8_(JavaScript)", "V8 Javascript Engine")}} permitindo que os desenvolvedores utilizem o JavaScript como linguagem de script para automatizar as coisas em um PC e criar servidores {{Glossary("HTTP")}} e {{Glossary("Web Sockets", "WebSocket")}} totalmente funcionais. +

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Aprendendo JavaScript

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/jpeg/index.html b/files/pt-br/glossary/jpeg/index.html new file mode 100644 index 0000000000..b875385242 --- /dev/null +++ b/files/pt-br/glossary/jpeg/index.html @@ -0,0 +1,18 @@ +--- +title: JPEG +slug: Glossario/JPEG +tags: + - Glossário + - Iniciante + - JPEG +translation_of: Glossary/jpeg +--- +

JPEG (Joint Photographic Experts Group) é um método de compreensão com perda geralmente usado para imagens digitais.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/jquery/index.html b/files/pt-br/glossary/jquery/index.html new file mode 100644 index 0000000000..8eb1ccaffb --- /dev/null +++ b/files/pt-br/glossary/jquery/index.html @@ -0,0 +1,56 @@ +--- +title: jQuery +slug: Glossario/jQuery +tags: + - Jquery em português +translation_of: Glossary/jQuery +--- +

jQuery é uma {{Glossary("Biblioteca")}} {{Glossary("JavaScript")}} que visa a simplificação na manipulação do {{Glossary("DOM")}} , nas chamadas de {{Glossary("AJAX")}} e no gerenciamento de {{Glossary("Eventos")}} . É muito utilizado por desenvolvedores de Javascript.

+ +

jQuery usa o formato $(seletor).acão() para atribuir um evento a um elemento. Resumindo, $(seletor) chamará jQuery, que selecionará elemento(s) com base no 'seletor' e atribuirá um evento {{Glossary("API")}} chamado .acão().

+ +
$(document).ready(function(){
+  alert("Hello World!");
+  $("#blackBox").hide();
+});
+ +

O codigo acima tem a mesma funcionalidade que o codigo abaixo:

+ +
window.onload = function() {
+  alert( "Hello World!" );
+  document.getElementById("blackBox").style.display = "none";
+};
+ +

Download jQuery

+ + + + + + + + + + + + + + + + +
npmbower (solo file)Google CDN
npm install jquerybower install https://code.jquery.com/jquery-3.2.1.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
+ +

Veja mais

+ +

General knowledge

+ + + +

Technical information

+ + diff --git a/files/pt-br/glossary/json/index.html b/files/pt-br/glossary/json/index.html new file mode 100644 index 0000000000..5212f7c589 --- /dev/null +++ b/files/pt-br/glossary/json/index.html @@ -0,0 +1,134 @@ +--- +title: JSON +slug: JSON +translation_of: Glossary/JSON +--- +

JSON (Notação de Objetos JavaScript) e um formato de dados permutável. Ele assemelha - se próximo a um sub tipo da sintaxe do JavaScript, mas ele não é um tipo de script. (Veja JSON em Referências JavaScript para todos os detalhes). Isto é útil quando escrevemos qualquer tipo de aplicação baseada em JavaScript, incluindo web sites e extensões de navegadores. Por exemplo, você pode armazenar informações no formato em JSON no formato de cookies, ou você pode armazenar as preferências de extensões em JSON como valor de texto nas preferências do navegador.

+

JSON e capaz de representar números, booleanos, textos, vazios, e listas (sequência ordenada de valores) e objetos (mapeamento de valores de texto) composto por estes valores (ou por outras listas e objetos). Ele não representa nativamente tipos complexos de dados como funções, expressões regulares, datas, e muito mais. (Objetos de dados por padrão inicializam como texto contendo os dados no formato ISO, enquanto eles não mudam, a informação não é completamente perdida.) Se você precisa preservar muitos valores, você pode transformar valores como eles são inicializados, ou prioritariamente descontinuados, para habilitar JSON para representar tipos de dados adicionais.

+ + + + + + + +
+

Documentação

+
+
+ Objetos JSON
+
+ Os objetos JSON contém métodos para converter valores para Notação de objetos javascript (JSON) e para converter JSON para valores.
+
+
+
+ Usando o JSON nativo
+
+ Este artigo cobre o ECMAScript 5 compilando a linguagem nativa JSON somado em Gecko 1.9.1.
+
+
+
+ Caminho JSON
+
+ Caminho JSON significa o uso XPath como sintaxe para a estrutura de requisições do JSON. Ele não é o padrão, mas apresenta maneiras de requisição em JavaScript diretamente sem precisar converte - la para xml.
+
+  
+
+ Baixando JSON e extensões em Javascript
+
+ A pratica habitual encontrada em muitas extensões está usando XMLHttpRequest (ou outros mecanismos) para baixar Javascript ou JSON (eles são diferentes) para um site web remoto. Uma vez o conteúdo já sido baixado, a extensão escrita procedida pelo uso eval() para decodificar o texto contendo objetos JavaScript, a escolha e uma prática perigosa e não deve, de fato passar na revisão AMO. Este artigo mostra como evitar isto.
+
+
+
+ JXON
+
+ JXON padrões sem perdas de Notação de Objetos JavaScript XML, ele é um nome genérico pelo qual e definida a representação da árvore dos objetos JavaScript (JSON) usando XML.
+
+
+
+ Método JSON.stringify
+
+ Converta valores para JSON, opcionalmente substituindo valores se a função for específica, ou opcionalmente incluindo somente propriedades especificas se a substituição na lista for especifica.
+
+
+
+ Método JSON.parse
+
+ Analisa a string como JSON, opcionalmente transforma o valor produzido pela análise.
+
+

Veja Todos...

+ 		+

Comunidade

+
    +
  • Veja os foruns Mozilla...
    • +
  •  
    • +
+
    +
  • {{DiscussionList("dev-tech-json","mozilla.dev.tech.json") }}
    • +
+

Ferramentas

+ +

Veja Todos...

+ +
+
+ AJAX, JavaScript, XUL
+
+
+

Usando JSON atráves de objetos JavaScript JSON

+

O mais simples, fácil caminho para usar JSON e através do padrão de objetos JSON em JavaScript.  Use JSON.stringify para inicializar valores em JSON, e use JSON.parse para deserializar um valor JSON.

+

Por exemplo, para inicializar um objeto JavaScript, use o método JSON.stringify():

+
var foo = {};
+foo.bar = "new property";
+foo.baz = 3;
+
+var JSONfoo = JSON.stringify(foo);
+
+

JSONfoo now holds {"bar":"new property","baz":3}. Para fazer JSONfoo voltar a ser um objeto JavaScript faça:

+
var backToJS = JSON.parse(JSONfoo);
+
+

Para mais informações, veja a documentação de objetos JSON.

+

Método toJSON()

+

Se um objeto define o método toJSON(), JSON.stringify pode se chamar estes métodos para determinar a representação de objetos JSON. Por exemplo:

+
x = {};
+x.foo = "foo";
+x.toJSON = function() { return "bar"; };
+var json1 = JSON.stringify(x);
+
+

json1 now contains '"bar"'.

+

Limitações

+

Você não pode inicializar objetos que sejam membros escolhidos para funções. As especificações JSON não permitem. Por exemplo:

+
foo.qwerty = function(){alert('foobar');};
+foo.qwerty()
+var JSONfoo = JSON.toString(foo);
+
+

will raise a TypeError on line XXX: No JSON representation for this object!

+

Usando JSON através do nsIJSON

+

Versões do Firefox anteriores a 3.5 nativamente não suportam JSON, e há um único caminho para acessar as funcionalidades JSON é através do componente nsIJSON, implementado desde o Firefox 3. Codificando e decodificando são executados através nsIJON's métodos de codificação e decodificação. Estes métodos não acessam o JSON através de objetos JSON, e eles somente suportam valores escolhidos por listas de objetos, sem textos, booleanos, números ou vazios. (Estes valores são suportados somente por listas e objetos: o simples número 5 não irá funcionar, mas o objeto {"valor": 5} funcionará.)

+

Por causa nsIJSON não ser tão eficaz como um objeto JSON, ele codifica e decodifica métodos já removidos para Firefox 7. Desenvolvedores devem escolher para uso objeto JSON.

+

O seguinte código inicializa um objeto JavaScript usando nsIJSON:

+
var Ci = Components.interfaces;
+var Cc = Components.classes;
+
+var foo = {};
+foo.bar = "new property";
+foo.baz = 3;
+
+var nativeJSON = Cc["@mozilla.org/dom/json;1"].createInstance(Ci.nsIJSON);
+var JSONfoo = nativeJSON.encode(foo);
+
+

The JSONfoo variable now holds the string {"bar":"new property","baz":3}. To create an object corresponding to JSONfoo, just do:

+
var backToJS = nativeJSON.decode(JSONfoo);
+
+

Usando JSON em outras situações

+

Enquanto na teoria e possível usar JSON usando eval (mas somente para descerializar objetos, e não para inicializar textos) ou usando json2.js, Está não é uma boa ideia. Isto não e seguro para analisar JSON usando eval por que ele permite muito mais sintaxe que JSON faz (Melhora para execução de um código aleatório). Como para json2.js, este problema e que ele adiciona métodos para compilação como Object.prototype, escolha o mais útil para parar a execução do código antecipando está possibilidade.

+

Você deve quase sempre usa - lo ou os métodos formulados para usar JSON em preferências para qualquer outro caminho.

+

Veja também

+ +

{{ languages( { "ja": "ja/JSON", "zh-cn": "zh-cn/JSON" } ) }}

diff --git a/files/pt-br/glossary/key/index.html b/files/pt-br/glossary/key/index.html new file mode 100644 index 0000000000..d4c5a998d0 --- /dev/null +++ b/files/pt-br/glossary/key/index.html @@ -0,0 +1,24 @@ +--- +title: Key +slug: Glossario/Key +tags: + - Criptografía + - Glossário + - Segurança +translation_of: Glossary/Key +--- +

Uma key é uma parte de informação utilizada por um {{Glossary("cipher")}} para {{Glossary("encryption")}} e/ou {{Glossary("decryption")}}.Mensagens criptografadas devem permanecer seguras mesmo se tudo envolvendo o {{Glossary("cryptosystem")}}, com exceção da key, for de caráter público.

+ +

Em {{Glossary("symmetric-key cryptography")}}, a mesma chave é utilizada para criptografar e descriptografar. Em {{Glossary("public-key cryptography")}}, existem keys relacionadas conhecidas como keys públicas e keys privadas. A key pública é disponibilizada gratuitamente, enquanto, a key privada é mantida "em segredo". A key pública é capaz de criptografar mensagens as quais apenas a key privada correspondente é capaz de descriptografar, e vice-versa.

+ +

 

+ +

Aprenda mais

+ + + +

Dicionário:

+ +

"Key": "Chave"

diff --git a/files/pt-br/glossary/keyword/index.html b/files/pt-br/glossary/keyword/index.html new file mode 100644 index 0000000000..d50fe81350 --- /dev/null +++ b/files/pt-br/glossary/keyword/index.html @@ -0,0 +1,25 @@ +--- +title: Palavra-chave +slug: Glossario/Palavra-chave +tags: + - Busca palavra-chave + - Glossário + - Palavra-chave + - Search + - busca +translation_of: Glossary/Keyword +--- +

Uma palavra-chave é a palavra ou a frase que descreve conteúdo. Palavras-chave on-line são utilizadas como pistas para buscadores ou como um conjunto de palavras que identifica e sintetiza o conteúdo dos sites.

+ +

Quando você usa uma máquina de busca, utiliza palavras ou expressões para especificar o conteúdo que está procurando e, como resultado, a máquina de busca retorna endereços e páginas relevantes para os termos apresentados. Para resultados mais apurados, tente utilizar palavras mais específicas, a exemplo "Blue Mustang GTO" ao invés de simplesmente "Mustang". Páginas de internet também utilizam palavras na forma de meta tags (na seção {{htmlelement("head")}} para descrever o conteúdo da página, assim os buscadores podem identificar e organizar de forma melhorada as páginas da internet.

+ +

Aprenda Mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/localization/index.html b/files/pt-br/glossary/localization/index.html new file mode 100644 index 0000000000..42a6f72865 --- /dev/null +++ b/files/pt-br/glossary/localization/index.html @@ -0,0 +1,62 @@ +--- +title: Localização +slug: Localização +translation_of: Glossary/Localization +--- +

Localização (L10n) é o processo de tradução de interfaces de software a partir de uma língua para outra e adaptá-lo para atender a uma cultura estrangeira. Esses recursos são para qualquer pessoa com interesse nos aspectos técnicos envolvidos na localização. Eles são para os desenvolvedores e todos os colaboradores.

+ + + + + + + +
+

Documentação

+
+
+ Localização Guia Rápido
+
+ First read for volunteers wanting to start localizing.
+
+ XUL Tutorial:Localization
+
+ XUL Tutorial section on localizing XUL applications.
+
+ Writing localizable code
+
+ Best practices and guidelines for programmers to play nicely with localization.
+
+ Localizing Help files
+
+ How to separate content from HTML to make these files more easy to localize.
+
+ Custom dialog size
+
+ How to adjust window sizes to fit specific localizations.
+
+ Localizing extension descriptions
+
+ To localize the description of an extension (the string that shows up under extension's name in the Extensions window), you need to use a special preference key to override the description specified in your install.rdf file. This article contains instructions on how to modify this preference key.
+
+ Frequently Asked Localization Questions
+
+ Frequently asked questions about localization.
+
+

View All...

+ 		+

Comunidade

+
    +
  • View Mozilla forums...
    • +
+

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

+ + + +
+

 

diff --git a/files/pt-br/glossary/markup/index.html b/files/pt-br/glossary/markup/index.html new file mode 100644 index 0000000000..aea536f5c9 --- /dev/null +++ b/files/pt-br/glossary/markup/index.html @@ -0,0 +1,53 @@ +--- +title: marcação +slug: Glossario/marcação +tags: + - Glossário + - Intro + - Marcação +translation_of: Glossary/markup +--- +

+ Uma linguagem de marcação é aquela projetada para definir e apresentar textos. + HTML (Linguagem de Marcação de Hipertexto), é um exemplo de linguagem + de marcação. +

+ +

+ Em um arquivo de texto, como um arquivo HTML, os elementos são marcados utilizando tags, que explica o + objetivo dessa parte do conteúdo. +

+ +

Tipos de linguagem de marcação

+ +
+
Marcação de Apresentação (em inglês: Presentational Markup):
+
+ Tradicionalmente utilizado pelos pelos processadores de texto, são marcações incorporadas no texto que produzem o efeito + WYSIWYG ("O que você vê é o que você obtém"). Sem a necessidade de manipulação direta de código, + geralmente essas marcações são feitas para serem ocultas dos usuários humanos, autores ou editores. De maneira mais apropriada, esses sistemas usam a + marcação procedimental e/ou descritiva "por debaixo dos panos", mas as convertem para apresentar pro usuário de maneira renderizada. +
+
Marcação Procedimental (em inglês: Procedural Markup):
+
+ Fornece instruções para os programas processarem o texto. Exemplos conhecidos incluem troff, TeX e PostScript. Espera-se que o processador execute o texto + do começo ao fim, seguindo as instruções encontradas. O texto com essa marcação geralmente é editado com a marcação visível e manipulada diretamente pelo + autor. Os sistemas procedimentais mais populares geralmente incluem construções de programação, e macros ou sub-rotinas que são comumente definidas para que + conjuntos complexos de instruções possam ser chamados por um nome simples (e talvez alguns parâmetros). Isso é muito mais rápido, menos propenso a erros e + fácil de manutenção do que repor as mesmas instruções ou instruções semelhantes em muitos lugares. +
+
Marcação Descritiva (em inglês: Descriptive Markup):
+
+ Usada especificamente para rotular partes do documento como elas são, e não como devem ser processadas. Sistemas conhecidos que fornecem muitos desses + rótulos incluem LaTeX, HTML e XML. O objetivo é dissociar a estrutura do documento de qualquer tratamento ou representação particular. Essa marcação é + frequentemente descrita como "semântica". Um exemplo de uma marcação descritiva seria a tag + <cite> do HTML, usada para rotular uma citação. Essa marcação incentiva os autores a + escrever de uma maneira que descreva o material conceitualmente, em vez de apenas visualmente. +
+
+ +

+ Há um borrão considerável das linhas entre os tipos de marcação. Nos sistemas modernos de processamento de texto, a marcação de apresentação é geralmente + salva em sistemas orientados a marcação descritiva, como XML, e depois processada procedimentalmente por outras sistemas. O TeX, linguagem de marcação + procedimental, pode ser usada para criar sistemas de marcação com natureza mais descritiva, como o LaTeX. +

diff --git a/files/pt-br/glossary/metadata/index.html b/files/pt-br/glossary/metadata/index.html new file mode 100644 index 0000000000..8877d38c2e --- /dev/null +++ b/files/pt-br/glossary/metadata/index.html @@ -0,0 +1,25 @@ +--- +title: Metadata +slug: Glossario/Metadata +tags: + - Glossário + - HTML + - Script de codificação + - metadados +translation_of: Glossary/Metadata +--- +

Os metadados são — em sua definição mais simples — dados que descrevem dados. Por exemplo, um documento {{glossary("HTML")}} é um dado, mas o HTML, também, pode conter metadados em seu elemento {{htmlelement("head")}} que descreve o documento — por exemplo, quem o escreveu e seu resumo.

+ +

Saiba mais

+ +

Conhecimento geral

+ + + +

Metadados HTML

+ + diff --git a/files/pt-br/glossary/mozilla_firefox/index.html b/files/pt-br/glossary/mozilla_firefox/index.html new file mode 100644 index 0000000000..4150cbe75e --- /dev/null +++ b/files/pt-br/glossary/mozilla_firefox/index.html @@ -0,0 +1,29 @@ +--- +title: Mozilla Firefox +slug: Glossario/Mozilla_Firefox +tags: + - Browser + - Firefox + - Glossary + - Infrastructure + - Mozilla + - Mozilla Firefox +translation_of: Glossary/Mozilla_Firefox +--- +

Mozilla Firefox é um {{Glossary("browser")}} open-source cujo desenvolvimento é supervisionado pela Mozilla Corporation. Firefox roda em Windows, OS X, Linux, e Android.

+ +

O primeiro lançamento foi em Novembro de 2004, Firefox é completamente customizável com temas, plug-ins, e complementos.  Firefox usa o {{glossary("Gecko")}} para renderizar páginas web, e implementa ambos padrões corrente e a vir da Web.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/mutable/index.html b/files/pt-br/glossary/mutable/index.html new file mode 100644 index 0000000000..fa45a08981 --- /dev/null +++ b/files/pt-br/glossary/mutable/index.html @@ -0,0 +1,44 @@ +--- +title: Mutável +slug: Glossario/Mutavel +tags: + - mutavel +translation_of: Glossary/Mutable +--- +

Mutável é o tipo da variável que pode ser alterada. Em {{glossary("JavaScript")}}, somente {{Glossary("Object","objetos")}} e {{Glossary("Array","arrays")}} são mutáveis, {{Glossary("primitive", "valores primitivos")}} não.

+ +

(Você pode fazer o nome da variável apontar para um novo valor, mas o valor anterior continua na memória. Logo, a necessidade da coleta de lixo, "garbage collection")

+ +

Um objeto mutável é um objeto cujo estado pode ser modificado após sua criação.

+ +

Imutáveis são os objetos cujo o estado não podem ser mudados uma vez criados.

+ +

Strings e Numbers são imutáveis. Vamos entender isso com um exemplo:

+ +
var stringImutavel = 'Hello';
+
+// No código acima, um novo objeto com o valor string é criado.
+
+stringImutavel = stringImutavel + 'World';
+
+// Agora nós estamos anexando 'World' ao valor existente.
+ +

Ao anexar a 'stringImutavel' com um valor de string, os seguintes eventos ocorrem:

+ +
    +
  1. O valor existente de 'stringImutavel' é recuperado.
    2. +
  2. 'World' é anexado ao valor existente de 'stringImutavel'.
    3. +
  3. O valor resultante é então alocado para um novo bloco na memória.
    4. +
  4. O objeto 'stringImutavel' agora aponta para um novo espaço de memória criado.
    5. +
  5. O espaço de memória criado anteriormente está habilitado para a coleta de lixo.
    6. +
+ +

 

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/node.js/index.html b/files/pt-br/glossary/node.js/index.html new file mode 100644 index 0000000000..647ebaa66e --- /dev/null +++ b/files/pt-br/glossary/node.js/index.html @@ -0,0 +1,27 @@ +--- +title: Node.js +slug: Glossario/Node.js +tags: + - Glossário + - Infraestrutura + - JavaScript + - node.js +translation_of: Glossary/Node.js +--- +

Node.js é um ambiente de execução multi-plataforma em {{Glossary("JavaScript")}} que permite aos desenvolvedores produzirem aplicações para rede e {{Glossary("Servidor","server-side")}} usando o JavaScript.

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/null/index.html b/files/pt-br/glossary/null/index.html new file mode 100644 index 0000000000..0a0983a944 --- /dev/null +++ b/files/pt-br/glossary/null/index.html @@ -0,0 +1,25 @@ +--- +title: Nulo +slug: Glossario/Nulo +translation_of: Glossary/Null +--- +

Em ciência da computação, um valor nulo representa uma referencia que aponta, geralmente de maneira intencional, para um objeto ou endereço de memória inválido ou inexistente. O significado do valor nulo varia entre as implementações das linguagens.

+ +

Em {{Glossary("JavaScript")}}, o null é um dos {{Glossary("Primitivo", "tipos primitivos")}}.

+ +

Veja mais

+ +

Referência técnica

+ + + +

Referências externas

+ + + +
+
diff --git a/files/pt-br/glossary/number/index.html b/files/pt-br/glossary/number/index.html new file mode 100644 index 0000000000..958172fc8c --- /dev/null +++ b/files/pt-br/glossary/number/index.html @@ -0,0 +1,29 @@ +--- +title: Number +slug: Glossario/Número +translation_of: Glossary/Number +--- +

No {{Glossary("JavaScript")}}, Number é um tipo de dado numérico no double-precision 64-bit floating point format (IEEE 754). Em outras linguagens de programação diferentes tipos numéricos podem existir, por exemplo: Integers (Inteiros), Floats (Pontos Flutuantes), Doubles (Dobros), ou Bignums.

+ +

Leia mais

+ +

Conhecimento Geral

+ + + +

Technical reference

+ + diff --git a/files/pt-br/glossary/object/index.html b/files/pt-br/glossary/object/index.html new file mode 100644 index 0000000000..bf4c959e18 --- /dev/null +++ b/files/pt-br/glossary/object/index.html @@ -0,0 +1,19 @@ +--- +title: Objeto +slug: Glossario/Objeto +tags: + - Glossário + - Objeto +translation_of: Glossary/Object +--- +

Objeto refere-se a uma estrutura de dados contendo dados e instruções para se trabalhar com estes dados. Objetos algumas vezes se referem a coisas do mundo real, por exemplo um objeto de carro ou um mapa em um jogo de corrida. {{glossary("JavaScript")}}, Java, C++, Python, e Ruby são exemplos de Linguagens orientadas à objeto ({{glossary("OOP","object-oriented programming")}}).

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/oop/index.html b/files/pt-br/glossary/oop/index.html new file mode 100644 index 0000000000..edfde266bf --- /dev/null +++ b/files/pt-br/glossary/oop/index.html @@ -0,0 +1,17 @@ +--- +title: OOP +slug: Glossario/OOP +translation_of: Glossary/OOP +--- +

OOP (Object-Oriented Programming) é uma abordagem na programação em qual os dados são encapsulados em {{glossary("object","objects")}} e o proprio objeto é operado, em vez de suas partes componentes.

+ +

{{glossary("JavaScript")}} é altamente orientado à objeto. Isto segue um modelo baseado em prototypes (as opposed to class-based).

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/opengl/index.html b/files/pt-br/glossary/opengl/index.html new file mode 100644 index 0000000000..91bea9c670 --- /dev/null +++ b/files/pt-br/glossary/opengl/index.html @@ -0,0 +1,17 @@ +--- +title: OpenGL +slug: Glossario/OpenGL +tags: + - Glossário + - OpenGL +translation_of: Glossary/OpenGL +--- +

OpenGL (Open Graphics Library) é uma API (Application Programming Interface) multiplataforma e multilíngue para renderizar gráficos vetoriais 2D e 3D. A API é normalmente usada para interagir com uma GPU (Graphics Processing Unit) para obter renderização acelerada por hardware.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/opera_browser/index.html b/files/pt-br/glossary/opera_browser/index.html new file mode 100644 index 0000000000..7d90528cb8 --- /dev/null +++ b/files/pt-br/glossary/opera_browser/index.html @@ -0,0 +1,21 @@ +--- +title: Navegador Opera +slug: Glossario/Navegador_Opera +tags: + - Glossário + - Navegador + - Navegador Opera + - Navegação + - Opera +translation_of: Glossary/Opera_Browser +--- +

Opera é o quinto {{glossary("navegador")}} web mais usado, publicamente lançado em 1996 e inicialmente executando somente em Windows. Opera usa {{glossary("Blink")}} como seu mecanismo de layout desde 2013 (antes disso, {{glossary("Presto")}}). Opera também existe nas versões móveis e tablets.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/operand/index.html b/files/pt-br/glossary/operand/index.html new file mode 100644 index 0000000000..9f460ea876 --- /dev/null +++ b/files/pt-br/glossary/operand/index.html @@ -0,0 +1,12 @@ +--- +title: Operando +slug: Glossario/Operando +translation_of: Glossary/Operand +--- +

An operand is the part of an instruction representing the data manipulated by the {{glossary("operator")}}. For example, when you add two numbers, the numbers are the operand and "+" is the operator.

+ +

Learn more

+ + diff --git a/files/pt-br/glossary/operator/index.html b/files/pt-br/glossary/operator/index.html new file mode 100644 index 0000000000..77d2d7c306 --- /dev/null +++ b/files/pt-br/glossary/operator/index.html @@ -0,0 +1,23 @@ +--- +title: Operador +slug: Glossario/Operador +tags: + - Codificação de Scripts + - Glossário +translation_of: Glossary/Operator +--- +

Sintaxe reservada que consiste em pontuação ou caracteres alfanuméricos que executam a funcionalidade incorporada. Por exemplo, em JavaScript, o operador de adição ("+") soma números juntos e concatena strings, enquanto o operador "não" ("!") nega uma expressão — por exemplo, fazendo uma declaração verdadeira retornar falso.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/origin/index.html b/files/pt-br/glossary/origin/index.html new file mode 100644 index 0000000000..f1aae2640b --- /dev/null +++ b/files/pt-br/glossary/origin/index.html @@ -0,0 +1,83 @@ +--- +title: Origem +slug: Glossario/Origem +tags: + - Glossary + - Glossário + - Origem + - Security + - Segurança + - WebMechanics + - origin +translation_of: Glossary/Origin +--- +

O conteúdo de origem é definido pelo esquema (protocolo), host (domínio), e porta da {{Glossary("URL")}} usada para acessá-lo. Dois objetos tem a mesma origem somente quando o esquema, host, e porta batem.

+ +

Algumas operações são restritas para conteúdos de mesma origem, e essa restrição pode ser ultrapassada usando {{Glossary("CORS")}}.

+ +

Exemplos de mesma origem

+ + + + + + + + + + + + +
http://example.com/app1/index.html
+ http://example.com/app2/index.html		Mesma origem pois possuem o mesmo esquema (http) e mesmo host (example.com)
http://Example.com:80
+ http://example.com		Mesma origem pois o servidor entrega conteúdo HTTP através da porta 80 por padrão.
+ +

Exemplos de origens diferentes

+ + + + + + + + + + + + + + + + +
http://example.com/app1
+ https://example.com/app2		Esquemas diferentes
http://example.com
+ http://www.example.com
+ http://myapp.example.com		Hosts diferentes
http://example.com
+ http://example.com:8080		Portas diferentes
+ +

Especificações

+ + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#origin', 'origin')}}{{Spec2('HTML WHATWG')}}
+ +

Aprenda mais

+ +

Veja Same-origin policy para mais informações.

+ +
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/pt-br/glossary/ota/index.html b/files/pt-br/glossary/ota/index.html new file mode 100644 index 0000000000..a8680d0871 --- /dev/null +++ b/files/pt-br/glossary/ota/index.html @@ -0,0 +1,21 @@ +--- +title: OTA +slug: Glossario/OTA +tags: + - Glossário + - Infraestrutura + - OTA + - Wireless + - updates +translation_of: Glossary/OTA +--- +

Over-The-Air (OTA ou "Pelo-Ar") refere-se à atualização automática de programas de dispositivos conectados a partir de um servidor central. Todos os proprietários de dispositivos recebendo um determinado conjunto de atualizações estão sob o mesmo "canal"; e cada dispositivo pode amiúde acessar vários canais (e.g. para "builds" de produção ou engenharia).

+ +

Aprenda mais

+ +

Conhecimentos Gerais

+ + diff --git a/files/pt-br/glossary/php/index.html b/files/pt-br/glossary/php/index.html new file mode 100644 index 0000000000..19370528dc --- /dev/null +++ b/files/pt-br/glossary/php/index.html @@ -0,0 +1,61 @@ +--- +title: PHP +slug: Glossario/PHP +tags: + - Back End + - Iniciante + - Introdução + - PHP +translation_of: Glossary/PHP +--- +

PHP (um inicialismo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script do lado do servidor de código aberto que pode ser ultilizada junto com HTML para construir aplicações web e sites dinâmicos.

+ +

HTML pode ser usando dentro do PHP, mas não vice versa.

+ +
 // Sintaxe básica do PHP
+<? php
+ // Imprime dados na tela
+ echo "Olá mundo!";
+
+ // ou
+ print "Olá mundo!";
+?>
+ +

A melhor coisa em usar o PHP é que ele é extremamente simples para um iniciante, mas oferece muitos recursos avançados para um programador profissional. Não tenha medo de ler a longa lista de recursos do PHP. Pode entrar com tudo, o mais rápido que puder, e começar a escrever scripts simples em poucas horas.

+ + + +

Variáveis em PHP

+ +
<?php
+ // Variáveis
+ $nome='Jorge';
+ $sobrenome='Clésio';
+ $pais='Brasil';
+ $email='jorgeclesio@mozilla.org';
+
+ // Imprimir variáveis
+ echo $nome;
+ echo $sobrenome;
+ echo $pais;
+ echo $email;
+?>
+ +

Conheça mais sobre variáveis em PHP

+ + + +

Tratando Formulários com PHP

+ +

Confira aqui.

+ + + +

Saber mais

+ + diff --git a/files/pt-br/glossary/pixel/index.html b/files/pt-br/glossary/pixel/index.html new file mode 100644 index 0000000000..4940fb76fb --- /dev/null +++ b/files/pt-br/glossary/pixel/index.html @@ -0,0 +1,18 @@ +--- +title: Pixel +slug: Glossario/Pixel +tags: + - Glossário +translation_of: Glossary/Pixel +--- +

Um pixel é o menor elemento de um dispositivo de exibição como, por exemplo, um monitor.

+ +

A resolução de exibição pode ser expressada utilizando-se pixels como unidade. Por exemplo, uma resolução de "800x600" pixels significa que podem ser exibidos 800 pixels na largura e 600 pixels na altura.

+ +

Aprenda mais

+ +

Referência técnica

+ + diff --git a/files/pt-br/glossary/polyfill/index.html b/files/pt-br/glossary/polyfill/index.html new file mode 100644 index 0000000000..706abd976c --- /dev/null +++ b/files/pt-br/glossary/polyfill/index.html @@ -0,0 +1,19 @@ +--- +title: Polyfill +slug: Glossario/Polyfill +tags: + - ECMAScript6 + - polyfill +translation_of: Glossary/Polyfill +--- +

Um polyfill é um pedaço de código (geralmente JavaScript na Web) usado para fornecer funcionalidades modernas em navegadores mais antigos que não o suportam nativamente.

+ +

Por exemplo, um polyfill pode ser usado para imitar a funcionalidade de um elemento HTML Canvas no Microsoft Internet Explorer 7, usando um plugin Silverlight, ou imitar o suporte para unidades rem CSS, ou {{cssxref ("text-shadow")}}, ou o que você quiser.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/port/index.html b/files/pt-br/glossary/port/index.html new file mode 100644 index 0000000000..cc28a9ebae --- /dev/null +++ b/files/pt-br/glossary/port/index.html @@ -0,0 +1,27 @@ +--- +title: Port +slug: Glossario/Port +tags: + - porta + - porta segura + - portas de comunicação +translation_of: Glossary/Port +--- +

Porta

+ +

Para um computador se conectar à rede mundial de computadores com um endereço de IP(Protocolo de internet - Internet Protocol),
+ uma porta é um ponto terminal de comunicação.
+ Portas são designadas por números, e abaixo são especificados 1024 portas que é associado por padrão com um protocolo específico.

+ +

Por exemplo, a porta padrão para a HTTP (Protocolo de transferência de hiper texto - Hyper Text Transfer Protocol) é 80 e o 
+ padrão para o HTTPS (Protocolo de transferência de hiper texto Seguro - Hyper Text Transfer Protocol Secure) é 443,
+ então um http servidor espera pelas requisições naquelas portas.Cada protocolo de internet está associado com uma porta padrão:
+ SMTP(25), POP3(110), IMAP(143), IRC(194) e assim em diante.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/preflight_request/index.html b/files/pt-br/glossary/preflight_request/index.html new file mode 100644 index 0000000000..4e70aced76 --- /dev/null +++ b/files/pt-br/glossary/preflight_request/index.html @@ -0,0 +1,40 @@ +--- +title: Requisição Preflight +slug: Glossario/Preflight_request +tags: + - CORS + - Glossário + - HTTP + - Preflight + - requisição +translation_of: Glossary/Preflight_request +--- +

Uma requisição preflight de CORS é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.

+ +

É uma requisição {{HTTPMethod("OPTIONS")}}, que usa três cabeçalhos de solicitação HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, e o cabeçalho {{HTTPHeader("Origin")}}.

+ +

Uma requisição preflight é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada "para ser preflighted"  e omitida para requisições simples.

+ +

Por exemplo, o cliente pode perguntar ao servidor se este permitiria uma requisição {{HTTPMethod ("DELETE")}}, antes de enviá-la, usando uma requisição preflight:

+ +
OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org
+ +

Se o servidor permitir, ele responderá à requisição preflight: com um cabeçalho de resposta {{HTTPHeader ("Access-Control-Allow-Methods")}}, que lista DELETE:

+ +
HTTP/1.1 204 No Content
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400
+ +

A resposta da requisição preflight pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho Access-Control-Max-Age como no exemplo acima.

+ +

Veja também

+ + diff --git a/files/pt-br/glossary/primitive/index.html b/files/pt-br/glossary/primitive/index.html new file mode 100644 index 0000000000..0ae1f362d5 --- /dev/null +++ b/files/pt-br/glossary/primitive/index.html @@ -0,0 +1,53 @@ +--- +title: Primitivo +slug: Glossario/Primitivo +translation_of: Glossary/Primitive +--- +

Resumo

+ +

Um primitivo (valor primitivo, tipo de dados primitivo) é um dado que não é representado através de um {{Glossary("Objeto")}} e, por consequência, não possui métodos.

+ +

Em detalhes

+ +

Na maior parte do tempo, um valor primitivo é representado diretamente através do mais baixo nível da implementação de uma linguagem.

+ +

No {{Glossary("JavaScript")}}, existem 6 tipos primitivos:

+ + + +

Todos os primitivos são imutáveis (não podem ter o seu valor modificado).

+ +

Wrappers em JavaScript

+ +
+

NT: O termo "wrapper" em português significa "que envolve". No entanto, em tecnologia, é comum se usar a versão em inglês que possui o mesmo significado.

+
+ +

À exceção do null e do undefined, todos os primitivos tem um objeto wrapper equivalente:

+ + + +

O método valueOf() do objeto wrapper retorna o valor primitivo.

+ +
+

NT: É possível verificar o tipo da variável digitando typeof+nomedavariavel. Para saber mais, verifique typeof.

+
+ +

Referências externas

+ + diff --git a/files/pt-br/glossary/progressive_web_apps/index.html b/files/pt-br/glossary/progressive_web_apps/index.html new file mode 100644 index 0000000000..93105b3b30 --- /dev/null +++ b/files/pt-br/glossary/progressive_web_apps/index.html @@ -0,0 +1,19 @@ +--- +title: Progressive web apps +slug: Glossario/Progressive_web_apps +tags: + - Composição + - Glossário + - Progressive web apps +translation_of: Glossary/Progressive_web_apps +--- +

Progressive web apps é um termo usado para descrever o estado moderno do desenvolvimento de aplicações web. Isso envolve pegar web sites/apps que aproveitam de todas as melhores partes da Web - como descobertas por mecanismos de busca, tornando-se linkaveis via {{Glossary("URL")}}s, e trabalho em vários fatores de formas - e sobrecarregá-los com APIs modernas (como Service Works e Push) e funcionalidades que conferem outros benefícios comumente atribuídos para apps nativos.

+ +

Essas funcionalidades incluem possibilidade de instalação, funcionamento offline e ser de fácil sincronização e reconexão do usuário com o servidor.

+ +

Saiba mais

+ + diff --git a/files/pt-br/glossary/property/css/index.html b/files/pt-br/glossary/property/css/index.html new file mode 100644 index 0000000000..748f37002d --- /dev/null +++ b/files/pt-br/glossary/property/css/index.html @@ -0,0 +1,40 @@ +--- +title: Propriedade (CSS) +slug: Glossario/property/CSS +tags: + - CodingScripting + - Glossário +translation_of: Glossary/property/CSS +--- +

Uma propriedade CSS é uma característica (como a cor) cujo valor define o aspecto de como o navegador deve exibir o elemento.

+ +

Aqui está um exemplo de uma regra do CSS:

+ +
/* "div" é um seletor indicando que todos os elementos div */
+/* no documento serão estilizados por essa regra */
+div {
+  /* A propriedade "color" (cor) com o valor "black" (preto) indica que */
+  /* todos os textos terão a cor preta */
+  color: black;
+
+  /* A propredade "background-color" (cor de fundo) com o valor "white" */
+  /* (branco) indica que a cor de fundo dos elementos será branca */
+  background-color: white;
+}
+ +

Saiba Mais

+ +

Conhecimentos Gerais

+ + + +

Referências Técnicas

+ + + +

 

diff --git a/files/pt-br/glossary/property/index.html b/files/pt-br/glossary/property/index.html new file mode 100644 index 0000000000..a837434992 --- /dev/null +++ b/files/pt-br/glossary/property/index.html @@ -0,0 +1,11 @@ +--- +title: Propriedade +slug: Glossario/property +tags: + - Desambiguação + - Glossário +translation_of: Glossary/property +--- +

O termo propriedade (property) pode ter diversos siginificados depenedendo do contexto. Ele pode se referir a:

+ +

{{GlossaryDisambiguation}}

diff --git a/files/pt-br/glossary/property/javascript/index.html b/files/pt-br/glossary/property/javascript/index.html new file mode 100644 index 0000000000..94cb51484f --- /dev/null +++ b/files/pt-br/glossary/property/javascript/index.html @@ -0,0 +1,27 @@ +--- +title: Propriedade (JavaScript) +slug: Glossario/property/JavaScript +tags: + - CodingScripting + - Glossário +translation_of: Glossary/property/JavaScript +--- +

Uma propriedade Javascript é uma característica de um objeto, frequentemente descrita como atributos associados à uma estrutura de dados.

+ +

Há dois tipos de propriedades: 

+ + + +

Uma propriedade tem nome (uma {{glossary("string")}}) e um valor ({{glossary("primitive", "primitivo")}}, {{glossary("method", "método")}} ou uma {{glossary("object reference", "referência a um objeto")}}). Perceba que quando dizemos que "uma propriedade contém um objeto", é apenas um atalho para "uma propriedade contém uma referência a um objeto". Essa distinção é importante porque o objeto referenciado original continua inalterado quando você altera o valor da propriedade.

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/protocol/index.html b/files/pt-br/glossary/protocol/index.html new file mode 100644 index 0000000000..95d78f010f --- /dev/null +++ b/files/pt-br/glossary/protocol/index.html @@ -0,0 +1,20 @@ +--- +title: Protocolo +slug: Glossario/Protocolo +tags: + - Infraestrutura + - Protocolos +translation_of: Glossary/Protocol +--- +

Um protocolo é um sistema de regras que define como o dado é trafegado dentro ou entre computadores. Comunicações entre dispositivos requer que estes concordem com o formato do dado que estiver sendo trafegado. O conjunto de regras que define esse formato é chamado de protocolo.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + + +

 

diff --git a/files/pt-br/glossary/prototype/index.html b/files/pt-br/glossary/prototype/index.html new file mode 100644 index 0000000000..e2d05ee2ba --- /dev/null +++ b/files/pt-br/glossary/prototype/index.html @@ -0,0 +1,16 @@ +--- +title: Prototype +slug: Glossario/Prototype +translation_of: Glossary/Prototype +--- +

A prototype é um modelo que exibe a aparência e o comportamento de um aplicativo ou produto no início do ciclo de vida do desenvolvimento.

+ +

See Inheritance and the prototype chain

+ +

Saiba mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/proxy_server/index.html b/files/pt-br/glossary/proxy_server/index.html new file mode 100644 index 0000000000..0748080f16 --- /dev/null +++ b/files/pt-br/glossary/proxy_server/index.html @@ -0,0 +1,20 @@ +--- +title: Proxy server +slug: Glossario/Proxy_server +translation_of: Glossary/Proxy_server +--- +

Um servidor proxy é um computador ou programa intermediário usado ao navegar em conexões de internet diferentes. Eles facilitam o acesso ao conteúdo na rede mundial de computadores. Um proxy intercepta pedidos e exibe respostas; pode encaminhar os pedidos, ou não (por exemplo no caso de uma cache), e pode modificá-los (por exemplo alterando cabeçalhos, no limite entre duas redes)

+ +

Um proxy pode estar no computador local do usuário, or em qualquer lugar entre o computador do usuário e um servidor de destino na internet. Em geral, existem dois tipos principais de servidores proxy:

+ + + +

Aprenda Mais

+ + diff --git a/files/pt-br/glossary/pseudo-class/index.html b/files/pt-br/glossary/pseudo-class/index.html new file mode 100644 index 0000000000..6221c38d62 --- /dev/null +++ b/files/pt-br/glossary/pseudo-class/index.html @@ -0,0 +1,19 @@ +--- +title: Pseudo-class +slug: Glossario/Pseudo-class +tags: + - CSS + - Codificação de Scripts + - Glossário + - Seletor +translation_of: Glossary/Pseudo-class +--- +

No CSS, um seletor do tipo pseudo-classe referencia um elemento dependendo do seu estado e não de informações da arvore do documento. Por exemplo, o seletor a{{ cssxref(":visited") }} aplica estilo somente aos links que o usuário já visitou

+ +

Saiba mais

+ +

Referencia técnica

+ + diff --git a/files/pt-br/glossary/pseudo-element/index.html b/files/pt-br/glossary/pseudo-element/index.html new file mode 100644 index 0000000000..6f28c4d702 --- /dev/null +++ b/files/pt-br/glossary/pseudo-element/index.html @@ -0,0 +1,14 @@ +--- +title: Pseudo-element +slug: Glossario/Pseudo-element +translation_of: Glossary/Pseudo-element +--- +

Em CSS, um seletor pseudo-element aplica estilos em partes do conteúdo do seu documento em cenários onde não há elementos HTML específicos para selecionar. Por exemplo, em vez de colocar a primeira letra para cada parágrafo em seu próprio elemento. você pode estilizá-los todos com p{{ Cssxref("::first-letter") }}.

+ +

Aprenda mais

+ +

Referência técnica

+ + diff --git a/files/pt-br/glossary/python/index.html b/files/pt-br/glossary/python/index.html new file mode 100644 index 0000000000..e4f254553c --- /dev/null +++ b/files/pt-br/glossary/python/index.html @@ -0,0 +1,21 @@ +--- +title: Python +slug: Glossario/Python +tags: + - Codificação de Scripts + - Glossário + - Linguagem + - Programação + - Python +translation_of: Glossary/Python +--- +

Python é uma linguagem de programação de alto nível e de uso geral. Ele usa uma abordagem multi-paradigma, o que significa que ele suporta procedural, orientação a objetos, e algumas construções de programação funcional.

+ +

Ele foi criado por Guido van Rossum como sucessor de outra linguagem (chamado ABC) entre 1985 e 1990, e atualmente é usado em uma grande variedade de domínios, como desenvolvimento web, como linguagem de script para outras aplicações e para construir aplicações reais.

+ +

Saiba Mais

+ + diff --git a/files/pt-br/glossary/recursion/index.html b/files/pt-br/glossary/recursion/index.html new file mode 100644 index 0000000000..eb43639f84 --- /dev/null +++ b/files/pt-br/glossary/recursion/index.html @@ -0,0 +1,19 @@ +--- +title: Recursão +slug: Glossario/Recursão +tags: + - Glossário + - Iniciante + - Programando +translation_of: Glossary/Recursion +--- +

Um ato de uma função invocando a si mesma. A recursão é usada para resolver problemas que contêm subproblemas menores. Uma função recursiva pode receber dois inputs (entradas): um caso base (termina a recursão) ou um caso recursivo (continua a recursão).

+ +

Leia mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/reflow/index.html b/files/pt-br/glossary/reflow/index.html new file mode 100644 index 0000000000..3df9513d4d --- /dev/null +++ b/files/pt-br/glossary/reflow/index.html @@ -0,0 +1,12 @@ +--- +title: Reflow +slug: Glossario/Reflow +translation_of: Glossary/Reflow +--- +

Reflow acontece quando o {{glossary("browser")}} deve processar e desenhar parte ou toda a página novamente, como após uma atualização em  um site interativo.

+ +

Aprenda mais

+ + diff --git a/files/pt-br/glossary/request_header/index.html b/files/pt-br/glossary/request_header/index.html new file mode 100644 index 0000000000..f8c72a0f4c --- /dev/null +++ b/files/pt-br/glossary/request_header/index.html @@ -0,0 +1,41 @@ +--- +title: Cabeçalho de Requisição +slug: Glossario/Request_header +translation_of: Glossary/Request_header +--- +

Um cabeçalho de requisição é um {{glossary("header", "cabeçalho HTTP")}} que pode ser utilizado em uma requisição HTTP, e não é relacionado ao conteúdo da mensagem. Cabeçalhos de requisição, como {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}}, ou ainda {{HTTPHeader("If-Modified-Since", "If-*")}} permitem realizar requisições condicionais; outros como {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} ou {{HTTPHeader("Referer")}} deixa o contexto mais preciso para que o servidor possa adaptar melhor a resposta.

+ +

Nem todos os cabeçalhos exibidos em uma requisição são cabeçalhos de requisição. Por exemplo, o {{HTTPHeader("Content-Length")}} exibido em uma requisição {{HTTPMethod("POST")}} é na realidade uma {{glossary("entity header")}}, que referência o tamanho do corpo da mensagem de requisição. Porém, esses cabeçalhos de entidade muitas vezes são chamados de cabeçalhos de requisição.

+ +

Adicionalmente, o sistema CORS define um subconjunto de cabeçalhos de requisição como {{glossary('simple header', 'simple headers')}}, cabeçalhos de requisição que sempre são considerados como autorizados e não são explicitamente listados em respostas de requisições {{glossary("preflight request", "preflight")}}.

+ +

Um certo número de cabeçalhos de requisição após uma requisição {{HTTPMethod("GET")}}:

+ +
GET /home.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/testpage.html
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
+If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
+Cache-Control: max-age=0
+ +

Estritamente, o cabeçalho {{HTTPHeader("Content-Length")}} neste exemplo não é um cabeçalho de requisição como os outros, mas sim uma {{glossary("entity header")}}:

+ +
POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128
+
+ +

Learn more

+ +

Technical knowledge

+ + diff --git a/files/pt-br/glossary/responsive_web_design/index.html b/files/pt-br/glossary/responsive_web_design/index.html new file mode 100644 index 0000000000..602e2ba05a --- /dev/null +++ b/files/pt-br/glossary/responsive_web_design/index.html @@ -0,0 +1,20 @@ +--- +title: Web Design Responsivo +slug: Glossario/Responsive_web_design +tags: + - Acessibilidade + - Design + - Glossário + - Web Design Responsivo +translation_of: Glossary/Responsive_web_design +--- +

Web Design Responsivo (RWD em Inglês) é um conceito de desenvolvimento Web focado em fazer a experiência e comportamento de websites mais otimizada para todos os dispositivos, desde o desktop até um dispositivo móvel.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/rest/index.html b/files/pt-br/glossary/rest/index.html new file mode 100644 index 0000000000..1a7346bee1 --- /dev/null +++ b/files/pt-br/glossary/rest/index.html @@ -0,0 +1,30 @@ +--- +title: REST +slug: Glossario/REST +tags: + - Arquitetura + - Glossário + - HTTP + - Iniciante + - Rest +translation_of: Glossary/REST +--- +

REST (Representational State Transfer) refere-se a um grupo de restrições de design dentro da arquitetura de software que geram sistemas distribuídos eficientes, confiáveis e escaláveis. Um sistema é denominado RESTful quando adere a todas essas restrições.

+ +

A ideia básica do REST é que um recurso, por exemplo um documento, seja transferido com seu estado bem definido, padronização de operações e formatos, ou serviços que se autodenominem RESTful, quando modificam diretamente o tipo de documento, ao invés de desencadear ações em algum lugar.

+ +

Como o HTTP, protocolo padrão por trás da "World Wide Web", a "Web" também transfere documentos e links de hipertexto. APIs HTTP simples são às vezes chamadas de APIs RESTful, serviços RESTful ou simplesmente serviços REST, embora não adotem todas as restrições REST necessariamente. Os iniciantes podem presumir que uma API REST significa um serviço HTTP que pode ser chamado usando bibliotecas e ferramentas padrões da web.

+ +

Saiba mais

+ + + +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/ruby/index.html b/files/pt-br/glossary/ruby/index.html new file mode 100644 index 0000000000..b247016e17 --- /dev/null +++ b/files/pt-br/glossary/ruby/index.html @@ -0,0 +1,24 @@ +--- +title: Ruby +slug: Glossario/Ruby +tags: + - Glossário + - Ruby +translation_of: Glossary/Ruby +--- +

Ruby é uma linguagem de programação de código aberto. Em um contexto {{glossary("world wide web","Web")}}, Ruby é geralmente usado em servidores com o framework Ruby On Rails (ROR) para produzir websites/apps.

+ +

Aprenda Mais

+ +

Conhecimento geral

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/safe/index.html b/files/pt-br/glossary/safe/index.html new file mode 100644 index 0000000000..bb16dc429c --- /dev/null +++ b/files/pt-br/glossary/safe/index.html @@ -0,0 +1,45 @@ +--- +title: Seguro +slug: Glossario/seguro +tags: + - Glossary + - Glossário + - Mecânicas da Web + - WebMechanics +translation_of: Glossary/safe +--- +

Um método HTTP é seguro se ele não altera o estado do servidor. Em outras palavras, um método é seguro se ele leva a uma operação de somente leitura. Diversos métodos de HTTP são seguros: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, ou {{HTTPMethod("OPTIONS")}}. Todos os métodos seguros também são {{glossary("idempotente")}}s, mas nem todos os métodos idempotentes são seguros. Por exemplo, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} são ambos idempotentes, entretanto são inseguros.

+ +

Mesmo se métodos seguros possuem a semântica de somente leitura, servidores podem alterar o seu estado (e.g., eles podem manter log ou estatísticas). O que é importante aqui, é de que chamando um método seguro, o cliente não requer que o servidor mude seu estado, e portanto não gerará carga desnecessária ao servidor. Navegadores podem chamar métodos seguros sem medo de causarem nenhum dano ao servidor: isso permite a eles a possibilidade de fazer atividades como pré-carregamento sem nenhum risco. Web crawlers também usam métodos seguros.

+ +

Métodos seguros não servem somente para buscar arquivos estáticos, o servidor pode gerar uma resposta para um método seguro no voô, enquanto o script gerador garantir segurança: ele não deve ativar gatilhos externos, como ativar um pedido de compras em um site.

+ +

É responsabilidade da aplicação no servidor implementar a semântica segura corretamente, o servidor web em si, sendo Apache, nginx ou IIS, não pode forçar ela por si só. Em particular, a aplicação não deve permitir que requisições {{HTTPMethod("GET")}} alterem seu estado.

+ +

Uma chamada a um método seguro, não alterando o estado do servidor:

+ +
GET /pageX.html HTTP/1.1
+
+ +

Uma chamada a um método não seguro, que pode alterar o estado do servidor:

+ +
POST /pageX.html HTTP/1.1
+ +

Uma chamada a um método idempotente, mas não seguro:

+ +
DELETE /idX/delete HTTP/1.1
+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Conhecimento técnico

+ + diff --git a/files/pt-br/glossary/scope/index.html b/files/pt-br/glossary/scope/index.html new file mode 100644 index 0000000000..5dc1b896c0 --- /dev/null +++ b/files/pt-br/glossary/scope/index.html @@ -0,0 +1,18 @@ +--- +title: Escopo +slug: Glossario/Escopo +tags: + - Glossary +translation_of: Glossary/Scope +--- +

É o contexto atual de {{glossary("execute","execução")}}, em que {{glossary("valor","valores")}} e expressões são "visíveis" ou podem ser referenciadas. Se uma variável ou outra expressão não estiver "no escopo atual", então não está disponível para uso. Os escopos também podem ser em camadas em uma hierarquia, de modo que os escopos filhos tenham acesso aos escopos pais, mas não vice-versa.

+ +

Uma {{glossary("function")}} serve como um procedimento em {{glossary("JavaScript")}}, e portanto, cria um escopo, de modo que (por exemplo) uma variável definida exclusivamente dentro da função não pode ser acessada de fora da função ou dentro de outras funções.

+ +

Aprender mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/sdp/index.html b/files/pt-br/glossary/sdp/index.html new file mode 100644 index 0000000000..71c8d86e5a --- /dev/null +++ b/files/pt-br/glossary/sdp/index.html @@ -0,0 +1,38 @@ +--- +title: SDP +slug: Glossario/SDP +tags: + - Avançado + - Colaborativo + - Comunicação + - Infraestrutura + - Ponto a ponto + - Tempo Real +translation_of: Glossary/SDP +--- +

SDP (Session Description {{glossary("Protocol")}}) é o padrão que descreve uma conexão {{Glossary("P2P","ponto a ponto")}}. SDP contém o {{Glossary("codec")}}, o endereço de origem e as informações de tempo de áudio e vídeo.

+ +

Aqui está uma mensagem SDP típica:

+ +
v=0
+o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
+s=
+c=IN IP4 host.anywhere.com
+t=0 0
+m=audio 49170 RTP/AVP 0
+a=rtpmap:0 PCMU/8000
+m=video 51372 RTP/AVP 31
+a=rtpmap:31 H261/90000
+m=video 53000 RTP/AVP 32
+a=rtpmap:32 MPV/90000
+ +

O SDP nunca é usado sozinho, mas por protocolos como {{Glossary("RTP")}} e {{Glossary("RTSP")}}. O SDP também é um componente do {{Glossary("WebRTC")}}, que usa o SDP como forma de descrever uma sessão.

+ +

Leia mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/self-executing_anonymous_function/index.html b/files/pt-br/glossary/self-executing_anonymous_function/index.html new file mode 100644 index 0000000000..06f693ba9a --- /dev/null +++ b/files/pt-br/glossary/self-executing_anonymous_function/index.html @@ -0,0 +1,8 @@ +--- +title: Self-Executing Anonymous Function +slug: Glossario/Self-Executing_Anonymous_Function +translation_of: Glossary/Self-Executing_Anonymous_Function +--- +

(Self-Executing Anonymous Function) é uma função {{glossary("JavaScript")}} que é executada assim que definida. Ela também é conhecida como IIFE (Immediately Invoked Function Expression).

+ +

Veja a página {{glossary("IIFE")}} para mais informações.

diff --git a/files/pt-br/glossary/semantics/index.html b/files/pt-br/glossary/semantics/index.html new file mode 100644 index 0000000000..db39cb33a2 --- /dev/null +++ b/files/pt-br/glossary/semantics/index.html @@ -0,0 +1,103 @@ +--- +title: Semântica +slug: Glossario/Semantica +tags: + - Codificação de Script + - Glossário + - HTML + - semántica +translation_of: Glossary/Semantics +--- +

Na programação, a Semântica se refere ao significado de um trecho de código — por exemplo, "que efeito tem a execução dessa linha de JavaScript?", Ou "que finalidade ou função esse elemento HTML tem" (em vez de "como ele se parece?").

+ +

Semântica em JavaScript

+ +

Em JavaScript, considere uma função que aceita um parâmetro de string e retorne um elemento {{htmlelement("li")}} com essa string como seu textContent. Você precisaria examinar o código para entender o que a função fazia se fosse chamada build('Peach'), ou createLiWithContent('Peach')?

+ +

Semântica em CSS

+ +

No CSS, considere criar uma lista com elementos li representando diferentes tipos de frutas. Você saberia qual parte do DOM está sendo selecionada com div > ul > li, ou .fruits__item?

+ +

Semântica em HTML

+ +

Em HTML, por exemplo, o {{htmlelement("h1")}} é um elemento semântico, que fornece o texto que envolve a representação (ou o significado) de "um cabeçalho de nível superior em sua página".

+ +
<h1>This is a top level heading</h1>
+ +

Por padrão, a maioria das folhas de estilo do agente do usuário do navegador, estilizará um {{htmlelement("h1")}} com um tamanho de fonte grande para parecer um título (embora você possa estilizá-lo como quiser).

+ +

Por outro lado, você pode fazer qualquer elemento parecer um cabeçalho de nível superior. Considere o seguinte:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Isso fará com que pareça um cabeçalho de nível superior, mas não tem valor semântico. Portanto, não obterá nenhum benefício extra, conforme descrito acima. Assim, é uma boa idéia usar o elemento HTML certo, para o trabalho certo.

+ +

O HTML deve ser codificado para representar a data que será preenchida e não com base em seu estilo de apresentação padrão. A apresentação (como deve ser) é de responsabilidade exclusiva do CSS.

+ +

Alguns dos benefícios de se escrever a marcação semântica:

+ + + +

Ao abordar qual marcação usar, pergunte a si mesmo: "Quais elementos melhor descrevem/representam os dados que vou preencher?" Por exemplo, é uma lista de dados? ordenado, não ordenado? é um artigo com seções e uma parte de informações relacionadas? lista as definições? é uma figura ou imagem que precisa de legenda? deve ter um cabeçalho e rodapé, além do cabeçalho e rodapé em todo o site? etc.

+ +

Elementos semânticos

+ +

Estes são alguns dos aproximadamente 100 elementos semânticos disponíveis:

+ + + +

Saiba mais

+ + + + diff --git a/files/pt-br/glossary/seo/index.html b/files/pt-br/glossary/seo/index.html new file mode 100644 index 0000000000..bd71aa5856 --- /dev/null +++ b/files/pt-br/glossary/seo/index.html @@ -0,0 +1,43 @@ +--- +title: SEO - Otimização dos Mecanismos de Buscas +slug: Glossario/SEO +tags: + - Beginner + - Glossário + - Introdução + - Otimização dos Mecanismos de Busca + - SEO + - Search + - pesquisa +translation_of: Glossary/SEO +--- +

SEO (Search Engine Optimization - Otimização dos Mecanismos de Pesquisa) é o processo de fazer com que um sítio fique mais visível nos resultados da procura, também denominado melhoramento na classificação da busca.

+ +

Os mecanismos de pesquisa {{Glossary("Crawler", "crawl")}} vasculham a web seguindo vínculos de uma página para outra (link) e listando os resultados encontrados. Quando se faz uma busca, o mecanismo de pesquisa exibe o conteúdo classificado. Os rastreadores seguem regras. Se você seguir essas regras, metodicamente, ao fazer uma SEO para um sítio, existirão melhores chances de que o mesmo apareça entre os primeiros resultados, aumentando o tráfego e as possibilidades de rendimentos (pelo comércio eletrônico e publicidade).

+ +

Os motores de busca oferecem algumas diretrizes para SEO, mas os maiores deles mantém a classificação de resultados como um segredo comercial. A otimização - SEO - é uma combinação de orientações oficiais do mecanismo de pesquisa, conhecimento prático, entendimento de artigos científicos, ou patentes.

+ +

Os métodos SEO dividem-se em três grandes classes:

+ +
+
técnico
+
Rotular o conteúdo usando semântica {{Glossary("HTML")}}. Ao explorar os sítios da web os rastreadores devem encontrar, apenas, o conteúdo que você quer indexado.
+
autoria
+
Escrever conteúdos utilizando o vocabulário dos visitantes. Empregar texto e imagens de forma que os rastreadores possam entender do que se trata.
+
popularidade
+
Você consegue muito mais tráfego quando existem vínculos com outros sítios famosos.
+
+ +

Aprenda mais

+ +

Conhecimento Geral

+ + + +

Aprenda SEO

+ + diff --git a/files/pt-br/glossary/server/index.html b/files/pt-br/glossary/server/index.html new file mode 100644 index 0000000000..4275c0496c --- /dev/null +++ b/files/pt-br/glossary/server/index.html @@ -0,0 +1,25 @@ +--- +title: Servidor +slug: Glossario/Servidor +tags: + - Glossário + - Infraestrutura + - Protocolo + - Rede + - Servidor +translation_of: Glossary/Server +--- +

Um servidor hardware é um computador compartilhado em uma rede que provê serviços a clientes. Um servidor software é um programa que provê serviços a programas clientes.

+ +

Os serviços são providos normalmente pela rede local ou por redes remotas. Programas cliente e servidor tradicionalmente se conectam enviando mensagens por meio de um {{glossary("protocolo")}}.

+ +

Os servidores mais comuns numa rede local são os de arquivos, nomes, emails, impressoras e fax. Outro exemplo comum de servidor é o de páginas da web conectado à Internet. Os minicomputadores, mainframes e super computadores nas centrais de dados também são servidores.

+ +

Aprenda mais

+ +

Conhecimentos Gerais

+ + diff --git a/files/pt-br/glossary/sgml/index.html b/files/pt-br/glossary/sgml/index.html new file mode 100644 index 0000000000..ceca8484b7 --- /dev/null +++ b/files/pt-br/glossary/sgml/index.html @@ -0,0 +1,15 @@ +--- +title: SGML +slug: Glossario/SGML +translation_of: Glossary/SGML +--- +

O Standard Generalized Markup Language (SGML) é uma {{Glossary("ISO")}} especificação que veio para definir as declarações/sintaxe Linguagens de Marcação.

+ +

On the web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, and {{Glossary("XML")}} are popular SGML-based languages. It is worth noting that since its fifth edition, HTML is no longer SGML-based and has its own parsing rules.

+ +

Leia mais

+ + diff --git a/files/pt-br/glossary/sloppy_mode/index.html b/files/pt-br/glossary/sloppy_mode/index.html new file mode 100644 index 0000000000..09d9dd3dc4 --- /dev/null +++ b/files/pt-br/glossary/sloppy_mode/index.html @@ -0,0 +1,21 @@ +--- +title: Sloppy mode +slug: Glossario/Sloppy_mode +tags: + - CodingScripting + - Glossário + - JavaScript + - Sloppy +translation_of: Glossary/Sloppy_mode +--- +

A partir do {{Glossary("ECMAScript")}} 5 é possível optar pelo novo strict mode (modo estrito), que altera a semântica do JavaScript de várias maneiras para melhorar sua resiliência e facilitar a compreensão do que está acontecendo quando há problemas.

+ +

O modo normal e non-strict (não estrito) do JavaScript é às vezes chamado de sloppy mode (modo desleixado, literalmente). Esta não é uma designação oficial, mas você provavelmente irá se deparar com ela se passar algum tempo escrevendo código JavaScript.

+ +

Saiba mais

+ +

Conecimentos Gerais

+ + diff --git a/files/pt-br/glossary/speculative_parsing/index.html b/files/pt-br/glossary/speculative_parsing/index.html new file mode 100644 index 0000000000..5da1c3efa2 --- /dev/null +++ b/files/pt-br/glossary/speculative_parsing/index.html @@ -0,0 +1,23 @@ +--- +title: Optimizing your pages for speculative parsing +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +translation_of: Glossary/speculative_parsing +--- +

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

+

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

+

Making speculative loads succeed

+

There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:

+ +

Avoiding losing tree builder output

+

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

+ diff --git a/files/pt-br/glossary/stacking_context/index.html b/files/pt-br/glossary/stacking_context/index.html new file mode 100644 index 0000000000..19e5be1656 --- /dev/null +++ b/files/pt-br/glossary/stacking_context/index.html @@ -0,0 +1,14 @@ +--- +title: Stacking context +slug: Glossario/Stacking_context +translation_of: Glossary/Stacking_context +--- +

Stacking context refere-se refere a como elementos de uma página se empilham sobre outros elementos, assim como você pode organizar cards em cima de sua mesa, lado a lado ou sobrepostas.

+ +

Leia mais

+ +

General knowledge

+ + diff --git a/files/pt-br/glossary/statement/index.html b/files/pt-br/glossary/statement/index.html new file mode 100644 index 0000000000..aada0eeb58 --- /dev/null +++ b/files/pt-br/glossary/statement/index.html @@ -0,0 +1,27 @@ +--- +title: Declaração +slug: Glossario/Declaração +tags: + - Glossário + - Iniciante + - declarações +translation_of: Glossary/Statement +--- +

Em uma linguagem de programação, uma declaração é uma linha de código que dá comando para execução de uma tarefa. Cada programa é composto por uma sequência de declarações.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + + +

Referencia técnica

+ + + + diff --git a/files/pt-br/glossary/string/index.html b/files/pt-br/glossary/string/index.html new file mode 100644 index 0000000000..d825d3a869 --- /dev/null +++ b/files/pt-br/glossary/string/index.html @@ -0,0 +1,22 @@ +--- +title: String +slug: Glossario/String +tags: + - CodingScript + - Glossário + - Iniciante + - String +translation_of: Glossary/String +--- +

Em qualquer linguagem de programação, uma string é uma sequência de {{Glossary("character","caracteres")}} usados para representar texto

+ +

Em {{Glossary("JavaScript")}}, uma String é um dos {{Glossary("Primitive", "valores primitivos")}} e o objeto {{jsxref("String")}} é um {{Glossary("wrapper")}} em cima do tipo primitivo string.

+ +

Leia mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/svg/index.html b/files/pt-br/glossary/svg/index.html new file mode 100644 index 0000000000..dc2c942196 --- /dev/null +++ b/files/pt-br/glossary/svg/index.html @@ -0,0 +1,50 @@ +--- +title: SVG +slug: Glossario/SVG +tags: + - Glossário + - Iniciante + - SVG + - graficos + - 'l10n:priority' +translation_of: Glossary/SVG +--- +

Scalable Vector Graphics (SVG) é um formato de imagem vetorial 2D baseado em uma sintaxe {{Glossary("XML")}}.

+ +

A {{Glossary("W3C")}} iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando o {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 foi lançado com suporte a SVG. Atualmente a maioria dos {{Glossary("browser","navegadores")}} suportam SVG.

+ +

Baseado na sintaxe de {{Glossary("XML")}}, SVG pode ser estilizado com {{Glossary("CSS")}} e apresentar interatividade usando {{Glossary("JavaScript")}}. Em HTML5 é possível embutir diretamente {{Glossary("Tag","tags")}} SVG em um documento {{Glossary("HTML")}}.

+ +

Sendo um formato para gráficos vetoriais, imagens SVG podem ser redimensionadas infinitamente, tendo um valor inestimável em {{Glossary("responsive design","design responsivo")}}, já que você pode criar elementos de interface e gráficos que se comportam bem em qualquer tamanho de tela. SVG também traz um conjunto de funcionalidades úteis, como clipping, máscaras, filtros e animações.

+ +

Exemplo

+ +

Abaixo você pode conferir a renderização de dois círculos de tamanhos e cores diferentes utilizando SVG. 

+ +
<svg width="100" height="300">
+   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="10" fill="red" />
+   <circle cx="50" cy="150" r="20" stroke="green" stroke-width="10" fill="yellow" />
+</svg>
+ +

Repare que cx e cy são para definir as coordenadas x e y do círculo, r é para definir o raio do círculo, o preenchimento é definido com fill, a largura do contorno é definida com stroke-width e a cor do contorno é definida com stroke. Lembrando que a largura e altura do svg em si são definidas no próprio elemento.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + + +

Aprendendo SVG

+ + + +

Informação técnica

+ + diff --git a/files/pt-br/glossary/symbol/index.html b/files/pt-br/glossary/symbol/index.html new file mode 100644 index 0000000000..82309a12e5 --- /dev/null +++ b/files/pt-br/glossary/symbol/index.html @@ -0,0 +1,57 @@ +--- +title: Symbol +slug: Glossario/Symbol +translation_of: Glossary/Symbol +--- +

Esse termo do glossário descreve tanto o tipo de dados chamado "symbol", quando a função/classe "{{jsxref("Symbol")}}()", que entre outras coisas, cria instâncias do tipo de dados symbol.

+ +

O tipo de dados "symbol" é qualificado como um primitivo, onde valores desse tipo podem ser usados para fazer propriedades de objetos anônimos. Ele pode ser usado como chave de uma propriedade de objeto quando este tem a intenção de ser privada, para uso interno da classe ou do tipo do objeto em questão. Como exemplo, chaves do tipo symbol existem em vários objetos internos do JavaScript. Da mesma forma, pode-se construir classes que tenham membros privados usando essa técnica. O tipo de dados symbol é de propósito altamente especializado, o que o torna pouco versátil; uma instância de Symbol pode ser atribuída à um L-value, e pode ter sua identidade examinada, nada mais; nenhuma outra operação poderá ser aplicada, o que contrasta, por exemplo, com uma instância de Number para um inteiro cujo valor é 42, que por sua vez tem diversas operações para comparar, combinar com outros tipos de dados, etc.

+ +

Um valor do tipo de dados "symbol" pode ser referenciado como um "valor symbol". Em JavaScript, um valor symbol é criado através da função Symbol(), que dinamicamente produz um valor único e anônimo. A única utilização sensata para para essa construção é armazená-la em uma variável que será utilizada como chave para uma propriedade de objeto cujo objetivo é torná-lo anônimo.

+ +

O exemplo abaixo guarda um valor symbol em uma variável myPrivateMethod para usar como chave do objeto this:

+ +
let myPrivateMethod = Symbol();
+this[myPrivateMethod] = function() {...};
+ +

Quando um valor de um symbol é usado como o identificador em uma atribuição de propriedade, a propriedade (como o symbol) é anônima; e também é não-enumerável. Como a propriedade não é enumerável, ela não será mostrada como um membro na construção de loop "for( ... in ...)" e, como a propriedade é anônima, ela não será mostrada no array de resultados de "Object.getOwnPropertyNames()". A propriedade pode ser acessada usando o symbol original que a criou ou iterando o array de resultados de "Object.getOwnPropertySymbols() ". No exemplo de código anterior, o acesso à propriedade será através do valor armazenado na variável myPrivateMethod.

+ +

The built-in function "{{jsxref("Symbol")}}()" is an incomplete class that returns a symbol value when called as a function, that throws an error upon attempts to use it as a constructor with the syntax "new Symbol()", that has static methods for accessing JavaScript's global symbol table, and that has static properties for addressing certain symbols that are present in commonly used objects. The creation of symbol values by the Symbol() function was explained above. The throwing of an error upon attempts to use Symbol() as a constructor is explained as a precaution against the accidental creation of an object that might cause confusion. The methods that access the global symbol registry are "Symbol.for()" and "Symbol.keyFor()"; these mediate between the global symbol table (or "registry") and the run-time environment. The symbol registry is mostly built by JavaScript's compiler infrastructure, and the symbol registry's content is not available to JavaScript's run-time infrastructure, except through these reflective methods. The method Symbol.for("tokenString") returns a symbol value from the registry, and Symbol.keyFor(symbolValue) returns a token string from the registry; each is the other's inverse, so the following is true:

+ +
Symbol.keyFor(Symbol.for("tokenString"))=="tokenString";  // true
+
+ +

The Symbol class has some static properties that have the ironic effect of naming the anonymous. There are only a few of these; they are for some so-called "well known" symbols. These are symbols for some selected method properties that are found in certain built-in objects. The exposure of these symbols makes it possible to have direct access to these behaviors; such access might be useful, for example, in the definition of a custom class. Examples of well-known symbols are: "Symbol.iterator" for array-like objects, and "Symbol.search" for string objects. 

+ +

The Symbol() function and the symbol values it creates might be useful to programers designing a custom class. Symbol values provide a way by which custom classes can create private members, and maintain a symbol registry that pertains just to that class. A custom class can use symbol values to create "own" properties that are shielded from unwanted, casual discovery. Within the class definition, the dynamically created symbol value is saved to a scoped variable, available only privately within the class definition. There is no token string; the scoped variable plays the equivalent role of a token.

+ +

In some programming languages the symbol data type is referred to as an "atom."  

+ +

In {{Glossary("JavaScript")}}, Symbol is a {{Glossary("Primitive", "primitive value")}}.

+ +

Symbol can have an optional description, but for debugging purposes only.

+ +

Symbol type is a new feature in ECMAScript 2015 and there is no ECMAScript 5 equivalent for symbol.

+ +
Symbol("foo") !== Symbol("foo")
+const foo = Symbol()
+const bar = Symbol()
+typeof foo === "symbol"
+typeof bar === "symbol"
+let obj = {}
+obj[foo] = "foo"
+obj[bar] = "bar"
+JSON.stringify(obj) // {}
+Object.keys(obj) // []
+Object.getOwnPropertyNames(obj) // []
+Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]
+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/pt-br/glossary/synchronous/index.html b/files/pt-br/glossary/synchronous/index.html new file mode 100644 index 0000000000..f37257d974 --- /dev/null +++ b/files/pt-br/glossary/synchronous/index.html @@ -0,0 +1,23 @@ +--- +title: Síncrono +slug: Glossario/Sincrono +tags: + - Glossário + - Mecanismos Web + - Web +translation_of: Glossary/Synchronous +--- +

Síncrono refere-se a comunicação em tempo real onde cada parte recebe ( e se necessário, processa e responde) mensagens instantaneamente (ou o mais próximo possível do instantâneo).

+ +

Um exemplo humano é o telefone  — durante uma chamada telefônica você costuma responder para outra pessoa imediatamente.

+ +

Muitos comandos de programação são também síncronos — por exemplo quando você digita um cálculo, o ambiente irá retornar o resultado para você instantaneamente, a menos que você programe para não fazer.

+ +

Saiba mais

+ +

Technical reference

+ + diff --git a/files/pt-br/glossary/tag/index.html b/files/pt-br/glossary/tag/index.html new file mode 100644 index 0000000000..23182eef2d --- /dev/null +++ b/files/pt-br/glossary/tag/index.html @@ -0,0 +1,27 @@ +--- +title: Tag +slug: Glossario/Tag +tags: + - Codificação de Scripts + - Glossário + - HTML + - Introdução +translation_of: Glossary/Tag +--- +

Em {{Glossary("HTML")}} a tag é usada para criar um {{Glossary("element", "elemento")}}.  O nome de um elemento HTML é o nome usado entre colchetes angulares como "<p>" para criar parágrafos. Note que ao fechar uma tag ela tem uma barra antes de seu nome, "</p>" , e que em elementos vazios a tag final não é requirida e nem permitida. Se os {{Glossary("Attribute", "atributos")}} não forem mencionados, os valores padrões serão usados em cada caso.

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + + +

Referência técnica

+ + diff --git a/files/pt-br/glossary/tcp/index.html b/files/pt-br/glossary/tcp/index.html new file mode 100644 index 0000000000..56247facce --- /dev/null +++ b/files/pt-br/glossary/tcp/index.html @@ -0,0 +1,21 @@ +--- +title: TCP +slug: Glossario/TCP +tags: + - Glossário + - Infraestrutura + - Redes + - TCP + - Transmission Control Protocol + - dados +translation_of: Glossary/TCP +--- +

TCP (Transmission Control Protocol, em português, Protocolo de Controle de Transmissão) é um importante {{Glossary("protocol", "protocolo")}} de rede que permite dois hosts se conectem e troquem dados. TCP garante a entrega de dados e pacotes na mesma ordem que foram enviados. Vint Cerf e Bob Kahn, que na época eram cientistas da DARPA (Defense Advanced Research Projects Agency, em português, Agência de Pesquisas em Projetos Avançados de Defesa), projetaram TCP na década de 1970.

+ +

Saiba Mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/three_js/index.html b/files/pt-br/glossary/three_js/index.html new file mode 100644 index 0000000000..8d3415b661 --- /dev/null +++ b/files/pt-br/glossary/three_js/index.html @@ -0,0 +1,21 @@ +--- +title: Three js +slug: Glossario/Three_js +tags: + - CodingScripting + - JavaScript + - Linguagem de Programação + - Navegador + - three.js +translation_of: Glossary/Three_js +--- +

three.js é um motor {{Glossary("WebGL")}} baseado em {{Glossary("JavaScript")}} que pode executar jogos movidos com GPU ou outros aplicativos gráficos diretamente do {{Glossary("navegador")}}. A biblioteca three.js fornece várias funções e {{Glossary("API","APIs")}} para desenhar cenas 3D em seu navegador.

+ +

Saiba mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/tls/index.html b/files/pt-br/glossary/tls/index.html new file mode 100644 index 0000000000..4cfbc209ee --- /dev/null +++ b/files/pt-br/glossary/tls/index.html @@ -0,0 +1,27 @@ +--- +title: TLS +slug: Glossario/TLS +tags: + - Criptografía + - Glossário + - Infraestrutura + - Segurança +translation_of: Glossary/TLS +--- +

Transport Layer Security (TLS), previamente conhecido como Secure Sockets Layer (SSL), é um {{Glossary("protocolo")}} usado por aplicativos para se comunicar de forma segura em toda a rede, evitando adulteração e espionagem no email, navegador, mensagens e outros protocolos.

+ +

Todos os navegadores atuais suportam o protocolo TLS, exigindo que o servidor forneça um {{Glossary("Digital certificate", "certificado digital")}} válido que confirme sua identidade para estabelecer uma conexão segura. É possível para ambos, o cliente e o servidor, se autentiquem mutuamente, se ambas partes providenciar seus próprios certificados digitais individuais.

+ +

Conhecimento geral

+ + + +

Especificações

+ + diff --git a/files/pt-br/glossary/truthy/index.html b/files/pt-br/glossary/truthy/index.html new file mode 100644 index 0000000000..872e53df91 --- /dev/null +++ b/files/pt-br/glossary/truthy/index.html @@ -0,0 +1,34 @@ +--- +title: Truthy +slug: Glossario/Truthy +tags: + - CodingScripting + - Glossário + - JavaScript +translation_of: Glossary/Truthy +--- +

Em {{Glossary("JavaScript")}}, um valor truthy é um valor que se traduz em verdadeiro quando avaliado em um contexto {{Glossary("Booleano")}}. Todos os valores são truthy a menos que eles sejam definidos como {{Glossary("Falsy", "falsy")}} (ou seja., exceto para false, 0, "", null, undefined, e NaN).

+ +

O {{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerção")}} de tipo em contextos booleanos.

+ +

Exemplos de valores truthy em JavaScript (que se traduzirão em true, e então executar o bloco if):

+ +
if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+ +

Veja também

+ + diff --git a/files/pt-br/glossary/type_conversion/index.html b/files/pt-br/glossary/type_conversion/index.html new file mode 100644 index 0000000000..7c105b70ae --- /dev/null +++ b/files/pt-br/glossary/type_conversion/index.html @@ -0,0 +1,14 @@ +--- +title: Conversão de Tipo +slug: Glossario/Conversao_de_Tipo +translation_of: Glossary/Type_Conversion +--- +

Conversão de Tipo (ou typecasting) significa transferência de dados de um tipo de dado para o outro. A conversão implícita ocorre quando o compilador atribui automaticamente os tipos de dados, mas o código fonte também pode explicitamente exigir uma conversão de tipo. Por exemplo, dada a instrução 5+2.0, o float 2.0 será implicitamente convertido para integer, mas dada a instrução Number("0x11"), a string  "0x11" será explicitamente convertida para o número 17.

+ +

Aprender mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/undefined/index.html b/files/pt-br/glossary/undefined/index.html new file mode 100644 index 0000000000..cda7c27ea3 --- /dev/null +++ b/files/pt-br/glossary/undefined/index.html @@ -0,0 +1,20 @@ +--- +title: undefined +slug: Glossario/undefined +translation_of: Glossary/undefined +--- +

Um valor  {{Glossary("primitive")}} automaticamente atribuido para variaveis que foram recentemente declaradas ou para {{Glossary("Argument","arguments")}} formais para qual não existem argumentos atualmente.

+ +

Aprenda mais

+ +

Conhecimentos gerais

+ + + +

Referência Técnica

+ + diff --git a/files/pt-br/glossary/uri/index.html b/files/pt-br/glossary/uri/index.html new file mode 100644 index 0000000000..50c9ede26d --- /dev/null +++ b/files/pt-br/glossary/uri/index.html @@ -0,0 +1,17 @@ +--- +title: URI +slug: Glossario/URI +translation_of: Glossary/URI +--- +

A URI (Uniform Resource Identifier, ou Identificador Uniforme de Recursos) é uma string (sequência de caracteres) que se refere a um recurso. A mais comum é a {{Glossary("URL")}}, que identifica o recurso localizando-o na Web. {{Glossary("URN","URNs")}}, em contraste, refere-se a um recurso pelo nome, em dado namespace. Ex: o ISBN de um livro.

+ +

Aprenda mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/url/index.html b/files/pt-br/glossary/url/index.html new file mode 100644 index 0000000000..1012b7004e --- /dev/null +++ b/files/pt-br/glossary/url/index.html @@ -0,0 +1,27 @@ +--- +title: URL +slug: Glossario/URL +tags: + - Glossário + - Infraestrutura +translation_of: Glossary/URL +--- +

Uniform Resource Locator (URL) é uma sequência de texto que especifica onde um recurso pode ser encontrado na Internet.

+ +

No contexto de {{Glossary("HTTP")}}, URLs são chamadas de "Endereços web" ou "link". Seu navegador exibe as URLs na barra de endereços, por exemplo https://developer.mozilla.org

+ +

URLs também podem ser usadas para transferir arquivos por ({{Glossary("FTP")}}) , emails ({{Glossary("SMTP")}}), e outras aplicações.

+ +

Aprenda mais

+ +

Conhecimento Geral

+ + + +

Saiba mais

+ + diff --git a/files/pt-br/glossary/utf-8/index.html b/files/pt-br/glossary/utf-8/index.html new file mode 100644 index 0000000000..a056fe392a --- /dev/null +++ b/files/pt-br/glossary/utf-8/index.html @@ -0,0 +1,17 @@ +--- +title: UTF-8 +slug: Glossario/UTF-8 +translation_of: Glossary/UTF-8 +--- +

UTF-8 (UCS Transformation Format 8) é a codificação de caracteres mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do ASCII e pode representar qualquer caractere Unicode padrão.

+ +

Os primeiros 128 caracteres UTF-8 correspondem exatamente aos primeiros 128 caracteres ASCII (numerados de 0 a 127), o que significa que o texto ASCII existente já é UTF-8 válido. Todos os outros caracteres usam dois a quatro bytes. Cada byte tem alguns bits reservados para fins de codificação. Como caracteres não ASCII requerem mais de um byte para armazenamento, eles correm o risco de serem corrompidos se os bytes forem separados e não forem recombinados.

+ +

Leia mais

+ +

Conhecimento Geral

+ + diff --git a/files/pt-br/glossary/ux/index.html b/files/pt-br/glossary/ux/index.html new file mode 100644 index 0000000000..b2037753e6 --- /dev/null +++ b/files/pt-br/glossary/ux/index.html @@ -0,0 +1,22 @@ +--- +title: UX +slug: Glossario/UX +tags: + - Acessibilidade + - Composição + - Design + - Glossário + - Navegação +translation_of: Glossary/UX +--- +

UX é um acrônimo que significa experiência do usuário (User eXperience). É o estudo da interação entre usuários e um sistema. Seu objetivo é tornar um sistema fácil de interagir do ponto de vista do usuário.

+ +

O sistema pode ser qualquer produto ou aplicativo com o qual um usuário final deve interagir. Os estudos de UX realizados em uma página da web podem demostrar, por exemplo, se é fácil para os usuários entenderem a página, navegarem para diferentes áreas e concluírem tarefas comuns, e onde tais processos poderiam ter menos fricção.

+ +

Saber mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/value/index.html b/files/pt-br/glossary/value/index.html new file mode 100644 index 0000000000..b03c28a030 --- /dev/null +++ b/files/pt-br/glossary/value/index.html @@ -0,0 +1,16 @@ +--- +title: Valor +slug: Glossario/Valor +tags: + - Glossário +translation_of: Glossary/Value +--- +

No contexto de dados ou um objeto {{Glossary("Wrapper", "wrapper")}} em torno desses dados, o valor é um {{Glossary("Primitive","valor primitivo")}} que contém o wrapper do objeto. No contexto de uma {{Glossary("Variável","variável")}} ou {{Glossary("Property","propriedade")}}, o valor pode ser primitivo ou {{Glossary("Object reference","refêrencia de um objeto")}}.

+ +

Aprender mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/variable/index.html b/files/pt-br/glossary/variable/index.html new file mode 100644 index 0000000000..6daf0decae --- /dev/null +++ b/files/pt-br/glossary/variable/index.html @@ -0,0 +1,24 @@ +--- +title: Variável +slug: Glossario/Variável +tags: + - JavaScript + - Programando +translation_of: Glossary/Variable +--- +

Uma variável (variable) é um local nomeado para armazenar um {{Glossary("Valor", "valor")}}. Dessa forma, um valor pode ser acessado através de um nome predeterminado.

+ +

Leia mais

+ +

Conhecimento geral

+ + + +

Referências técnicas

+ + diff --git a/files/pt-br/glossary/vendor_prefix/index.html b/files/pt-br/glossary/vendor_prefix/index.html new file mode 100644 index 0000000000..d1cc0fe991 --- /dev/null +++ b/files/pt-br/glossary/vendor_prefix/index.html @@ -0,0 +1,49 @@ +--- +title: Prefixos vendor +slug: Glossario/Prefixos_vendor +tags: + - Glossário +translation_of: Glossary/Vendor_Prefix +--- +

Os fabricantes de browsers, por vezes, adicionam prefixos às propriedades experimentais ou fora dos padrões CSS, de modo que os desenvolvedores podem experimentá-las, enquanto —em teoria— as mudanças no comportamento dos navegadores não quebrarão o código durante o processo de padonização. Os desenvolvedores devem esperar para incluir a propriedade não pré-fixada até que o comportamento do navegador seja padronizado.

+ +
+

Os fabricantes de browsers estão trabalhando para parar de usar prefixos de fornecedores para recursos experimentais. Os desenvolvedores da Web têm vindo a usá-los em sites de produção, apesar de sua natureza experimental. Isso tornou mais difícil para os fornecedores de navegadores garantir a compatibilidade e trabalhar com novos recursos; também foi prejudicial aos navegadores menores que acabam forçados a adicionar prefixos de outros navegadores para carregar sites populares.

+ +

Ultimamente, a tendência é adicionar recursos experimentais por trás das bandeiras controladas pelo usuário e trabalhar com especificações menores que alcancem a estabilidade muito mais rápido.

+
+ +

Normalmente, os vendors usam esses prefixos:

+ + + +

Os vendedores também usam prefixos em APIs. Em interfaces, eles normalmente usam:

+ + + +

Em propriedades e métodos, eles normalmente usam:

+ + + +

Aprender mais

+ +

Conhecimento geral

+ + diff --git a/files/pt-br/glossary/viewport/index.html b/files/pt-br/glossary/viewport/index.html new file mode 100644 index 0000000000..b8a740ac92 --- /dev/null +++ b/files/pt-br/glossary/viewport/index.html @@ -0,0 +1,32 @@ +--- +title: Viewport +slug: Glossario/Viewport +tags: + - Glossário + - Tradução + - pt-br + - viewport +translation_of: Glossary/Viewport +--- +

Uma viewport representa uma área poligonal (normalmente retangular) que está sendo exibida no momento. Em termos de navegador web, se refere a parte do documento que é exibida na janela (ou tela, se o documento estiver exibido em modo tela-cheia). Conteúdos fora da viewport não são visíveis na janela/tela até que seja rolado para sua área de visualização.

+ +

A porção da viewport que está visível no momento é chamada de visual viewport . Esta pode ser menor que a viewport de layout, assim é quando o usuário efetua uma pinçada/zoom. O viewport de layout permanece o mesmo, mas a visual viewport se torna menor.

+ + diff --git a/files/pt-br/glossary/w3c/index.html b/files/pt-br/glossary/w3c/index.html new file mode 100644 index 0000000000..eafc150620 --- /dev/null +++ b/files/pt-br/glossary/w3c/index.html @@ -0,0 +1,26 @@ +--- +title: W3C +slug: Glossario/W3C +tags: + - Comunidade + - Consórcio + - Consórcio Web + - Glossário + - Introdução + - W3C +translation_of: Glossary/W3C +--- +

O Consórcio da Rede Mundial (tradução livre de World Wide Web Consortium), ou simplesmente W3C é uma sociedade internacional que mantém as regras e  frameworks {{Glossary("World Wide Web", "relacionadas à Web")}}

+ +

Consiste de mais de 350 membros e organizações que, conjuntamente, desenvolvem a padronização da Internet, coordenam programas de divulgação, e mantém um fórum aberto para falar de Internet. O W3C coordena empresas na indústria para certificar que elas implementam os mesmos padrões da W3C.

+ +

Cada padrão passa por quatro estágios de maturidade: Rascunho em Desenvolvimento (WD - Working Draft), Candidato a Recomendação (CR - Candidate Recommendation), Recomendação Proposta (PR - Proposed Recommendation), e Recomendação da W3C (REC - Recommended by the W3C).

+ +

Saiba mais

+ +

Conhecimentos Gerais

+ + diff --git a/files/pt-br/glossary/webp/index.html b/files/pt-br/glossary/webp/index.html new file mode 100644 index 0000000000..c323b6a3de --- /dev/null +++ b/files/pt-br/glossary/webp/index.html @@ -0,0 +1,14 @@ +--- +title: WebP +slug: Glossario/webp +translation_of: Glossary/webp +--- +

WebP é um formato de compressão de imagem lossless e lossy desenvolvido pelo Google.

+ +

Saiba mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/websockets/index.html b/files/pt-br/glossary/websockets/index.html new file mode 100644 index 0000000000..bb0f72368c --- /dev/null +++ b/files/pt-br/glossary/websockets/index.html @@ -0,0 +1,35 @@ +--- +title: WebSockets +slug: Glossario/WebSockets +translation_of: Glossary/WebSockets +--- +

WebSocket é um {{Glossary("protocolo")}} que permite persistir conexões {{Glossary("TCP")}} entre o {{Glossary("servidor")}} e o cliente de modo que se possa trocar dados a qualquer momento.

+ +

Qualquer aplicação de servidor ou cliente pode usar WebSocket, mas principalmente {{Glossary("Navegador", "navegadores")}} web e web servers. Através do WebSocket, servidores podem passar dados a um cliente sem um pedido prévio desse cliente, permitindo atualizações dinâmicas de conteúdo.

+ +

 

+ +

 

+ +

Learn more

+ +

 

+ +

General knowledge

+ + + +

Technical reference

+ + + +

Learn about it

+ + diff --git a/files/pt-br/glossary/whatwg/index.html b/files/pt-br/glossary/whatwg/index.html new file mode 100644 index 0000000000..e743a0543a --- /dev/null +++ b/files/pt-br/glossary/whatwg/index.html @@ -0,0 +1,31 @@ +--- +title: WHATWG +slug: Glossario/WHATWG +tags: + - Comunidade + - GRUTTAH + - Glossário + - HTML + - HTML5 + - Internet + - WHATWG + - Web +translation_of: Glossary/WHATWG +--- +

O GRUTTAH (WHATWG - sigla em inglês) (Grupo de Trabalho da Tecnologia de Aplicação Hipertexto da Web tradução livre de Web Hypertext Application Working Group) é uma organização que mantém e desenvolve o {{Glossary("HTML")}} e as {{Glossary("API", "APIs")}} para aplicações Web. Antigos funcionários da Apple, Mozilla e Opera, estabeleceram o GRUTTAH em 2004.

+ +

Os editores de especificações na GRUTTAH pesquisam e colhem feedbacks para a especificação de documentos. O grupo també tem um pequeno comitê de membros convidados e autorizados a sobrescrever ou substituir as especificações dos editores.
+ Você também pode se juntar como contribuidor, assinando a lista de correspondência.

+ +

De acordo com o site deles, GRUTTAH é uma resposta ao lento progresso de padronização da Web da {{Glossary("W3C", "W3C's")}}, especialmente o HTML, que teve seu desenvolvimento parado para a W3C concentrar no {{Glossary("XHTML")}}.

+ +

O GRUTTAH mantém especificações para {{Glossary("HTML")}}, {{Glossary("DOM")}} e {{Glossary("JavaScript")}}.

+ +

Saiba mais

+ +

Conhecimentos gerais

+ + diff --git a/files/pt-br/glossary/wrapper/index.html b/files/pt-br/glossary/wrapper/index.html new file mode 100644 index 0000000000..1af1581d67 --- /dev/null +++ b/files/pt-br/glossary/wrapper/index.html @@ -0,0 +1,18 @@ +--- +title: Wrapper +slug: Glossario/Wrapper +tags: + - CodingScripting + - Glossary + - Wrapper +translation_of: Glossary/Wrapper +--- +

Em linguagens de programação, como o JavaScript, um wrapper é uma função destinada a chamar uma ou mais funções, às vezes diretamente por conveniência, e às vezes adaptá-las para fazer uma tarefa ligeiramente diferente no processo.

+ +

Por exemplo, as bibliotecas do SDK para AWS são exemplos de wrappers.

+ +

Aprender mais

+ +

Conhecimento Geral

+ +

{{Interwiki("wikipedia", "Wrapper function")}} em Wikipedia

diff --git a/files/pt-br/glossary/xhr_(xmlhttprequest)/index.html b/files/pt-br/glossary/xhr_(xmlhttprequest)/index.html new file mode 100644 index 0000000000..0b39fd44f1 --- /dev/null +++ b/files/pt-br/glossary/xhr_(xmlhttprequest)/index.html @@ -0,0 +1,22 @@ +--- +title: XHR (XMLHttpRequest) +slug: Glossario/XHR_(XMLHttpRequest) +translation_of: Glossary/XHR_(XMLHttpRequest) +--- +

{{domxref("XMLHttpRequest")}} (XHR) é uma {{Glossary("API")}} {{Glossary("JavaScript")}} para criar requisições {{Glossary("AJAX")}}. Os métodos desta API fornecem opções para enviar requisições entre o {{Glossary("browser")}} e o {{Glossary("server")}}.

+ +

Veja mais

+ +

Geral

+ + + +

Informações técnicas

+ + diff --git a/files/pt-br/glossary/xhtml/index.html b/files/pt-br/glossary/xhtml/index.html new file mode 100644 index 0000000000..17c42549eb --- /dev/null +++ b/files/pt-br/glossary/xhtml/index.html @@ -0,0 +1,86 @@ +--- +title: XHTML +slug: XHTML +translation_of: Glossary/XHTML +--- +

O HTML pode ser transferido através da internet para o navegador usando duas sintaxes: sintaxe HTML e sintaxe XML, também conhecido como XHTML.

+ +

HTML5 e HTML/XHTML

+ +

Ambas as sintaxes são definidas através do padrão HTML5. A escolha da sintaxe é dedicada ao tipo MIME, que é enviado no cabeçalho HTTP Content-Type . O tipo MIME para sintaxe HTML é text/html, e o tipo MIME para sintaxe XHTML é aplication/xhtml+xml.

+ +

O exemplo mostra um documento HTML e um XHTML incluindo  os cabeçalhos relevantes do HTTP.

+ +

Documento HTML

+ +
HTTP/1.1 200 OK
+Content-Type: text/html
+
+<!DOCTYPE html>
+<html lang=en>
+  <head>
+    <meta charset=utf-8>
+    <title>HTML</title>
+  </head>
+  <body>
+    <p>Eu sou um documento HTML
+  </body>
+</html>
+
+ +

Documento XHTML

+ +
HTTP/1.1 200 OK
+Content-Type: application/xhtml+xml
+
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>XHTML</title>
+  </head>
+  <body>
+    <p>Eu sou um documento XHTML</p>
+  </body>
+</html>
+
+ +

Tipo MIME contra DOCTYPE

+ +

Antes do HTML5, as duas sintaxes eram definidas por duas especificações diferentes: HTML 4.01 e XHTML 1.0. O padrão XHTML1 afirma que você poderia usar XHTML declarando um DOCTYPE especial. Porém, isso nunca foi implementado por nenhum navegador,e tem sido trocado pelo padrão HTML5. Se sua página é enviada como text/html, você não pode usar XHTML.

+ +

Observe que o tipo MIME deve ser declarado no Content-Type HTTP header. Se você apenas inseriu a meta tag no HTML como <meta http-equiv=…>, ele será ignorado e tratado como text/html.

+ +

Se você apresentar suas páginas text/html e acreditar que você está escrevendo XHTML, você poderá enfrentar vários problemas, tal como descritos nos seguintes artigos:

+ + + +

Suporte

+ +

O XHTML é suportado pela maioria dos navegadores modernos, incluindo Firefox, Chrome, Safari, e Opera. Entretanto, o Internet Explorer suporta XHTML somente a partir da versão 9. O Internet Explorer 8 e suas versões mais antigas mostrarão uma mensagem de tipo de arquivo desconhecido quando aberto um documento XHTML com o tipo XHTML MIME correto.

+ +

Também é bom observar que muitas bibliotecas populars de JavaScript e ferramentas para desenvolvedores não suportam XHTML ou tem suporte limitado.

+ +

Diferenças entre HTML

+ +

Veja Properly Using CSS and JavaScript in XHTML Documents para uma lista com algumas das diferenças entre HTML e XHTML.

+ +

Ferramentas

+ + + +

Veja também

+ + + +

Ver tudo...

diff --git a/files/pt-br/glossary/xml/index.html b/files/pt-br/glossary/xml/index.html new file mode 100644 index 0000000000..76e5938dc0 --- /dev/null +++ b/files/pt-br/glossary/xml/index.html @@ -0,0 +1,17 @@ +--- +title: XML +slug: Glossario/XML +tags: + - Glossário + - XML +translation_of: Glossary/XML +--- +

eXtensible Markup Language (XML) é uma linguagem de marcação genérica especificada pela W3C. A indústria de tecnologia da informação (TI) utiliza várias linguagens baseadas em XML para descrição de dados.

+ +

Tags XML são muito semelhantes a tags HTML, mas XML é muito mais flexível porque permite os usuários definirem suas próprias tags. Dessa forma o XML atua como uma meta-linguagem — isto é, pode ser usada para definir outras linguagens, como {{Glossary("RSS")}}. Além disso, HTML é uma linguagem para apresentação, enquanto XML é uma linguagem para descrever dados. Isto significa que XML tem aplicações muito mais amplas do que apenas a Web. Por exemplo, Web services podem usar XML para trocar requisições e respostas.

+ +

Saiba mais

+ + diff --git a/files/pt-br/hello_world_rust/index.html b/files/pt-br/hello_world_rust/index.html deleted file mode 100644 index f472f6a3e9..0000000000 --- a/files/pt-br/hello_world_rust/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Hello World Rust -slug: Hello_World_Rust -tags: - - Performance - - baixo-nível - - brazil - - compilada - - compile - - hello world - - low-level - - programar - - programming - - pt-br - - rust - - rustontherocks - - servo ---- -

Hello, World!

- -

 

- -

 

- -

Que tal  escrevermos um clássico programa em Rust?

- -

 

- -

Uma coisa legal sobre começar com programas simples é o fato de que você percebe que o seu compilador não está somente instalado como também está funcionando propriamente.

- -

 

- -

A primeira coisa que nós precisamos fazer é criar um local para que possamos organizar nossos códigos. Eu gosto de criar uma pasta projetos dentro da minha pasta home. Lembrando que o Rust não se importa com o local onde o seu código se encontra.

- -

 

- -

Isso nos leva a uma outro detalhe: eu estou  assumindo que você já tem uma certa familiaridade com a linha de comando. Se você preferir utilizar uma IDE ao invés da linha de comando, você talvez queira dar uma olhada no SolidOak(https://github.com/oakes/SolidOak ), ou qualquer plugin disponível para a sua IDE preferida. Existem por aí um bom número de extensões com qualidade variável em desenvolvimento por parte da comunidade. A equipe Rust também desenvolve plugins para vários editores(https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md ).

- -

 

- -

Dito isso, vamos criar um deretório dentro da nossa pasta projetos.

- -

 

- -

$ mkdir ~/projects

- -

$ cd ~/projects

- -

$ mkdir hello_world

- -

$ cd hello_world

- -

 

- -

Caso você esteja no Windows e não esteja utilizando PowerShell, talvez o ~ não funcione. Consulte a documentação do seu shell para mais detalhes.

- -

 

- -

Vamos criar um arquivo para o nosso código. Nós chamamos nosso arquivo de main.rs. Arquivos Rust são sempre terminados com a extensão .rs. Caso você esteja utilizando mais de uma palavra no nome de seu arquivo, é preferível que você utilize o underscore/underline: hello_world.rs ao invés de concatenar tudo como: helloword.rs. No mundo rust isso é chamado de snake_case.

- -

 

- -

Agora que você já tem o seu arquivo abra-o e digite o seguinte código:

- -

 

- -

fn main() {

- -

println!("Hello, world!");

- -

}

- -

 

- -

Salve o arquivo e digite o seguinte no seu terminal:

- -

 

- -

$ rustc main.rs

- -

$ ./main # ou main.exe no Windows

- -

Hello, world!

- -

 

- -

Sucesso!

- -

 

- -

Agora, como diria Jack: "Vamos por partes...".

- -

 

- -

fn main() {

- -

 

- -

}

- -

 

- -

Estas linhas definem uma função em Rust. A função main é de fato especial: ela é o começo de todo programa feito em Rust. Essas primeiras linhas dizem “Eu estou declarando uma função chamada main que não possui nenhum argumento e não retorna valor nenhum.” Caso tivesse argumentos eles estariam dentro dos parênteses (( )), e como não estamos retornando nada nós podemos omitir o tipo de retorno inteiramente. Falaremos mais sobre isso em tutoriais futuros.

- -

 

- -

Você também deve notar que a função é envolta por chaves ({ }). Rust exige chaves em volta do escopo das funções. Também é considerado uma boa prática abrir chaves na mesma linha onde foi declarada a função.

- -

 

- -

Próxima linha:

- -

 

- -

println!("Hello, world!");

- -

 

- -

Esta linha faz todo o trabalho do nosso pequeno programa. Existem inúmeros detalhes importantes nela. Lembre-se de configurar o seu editor para que utilize quatro espaços para fazer a identação. É disponibilizado várias configurações para alguns editores (https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md).

- -

 

- -

O segundo ponto é a parte do println!( ).

- -

Este trecho de código chama uma macro(http://doc.rust-lang.org/book/macros.html) Rust, que é a forma como Rust realiza a metaprogramação. Se ao invés de uma macro fosse uma função, teríamos algo como: println( ). Para o nosso propósito aqui, nós não precisamos nos preocupar com essa diferença. Apenas saiba que algumas vezes você irá ver ' ! ', o que indica uma chamada de macro e não uma chamada de função normal. Rust implementa println!( ) como uma macro e não como uma simples função por alguns bons motivos, contudo, como dito, não se faz necessário explicar agora.

- -

Uma última ressalva:se você já usou macros em outras linguagens como C/C++, você verá que as macros do Rust são bastante diferentes. Não fique assustado com as macros. Nós vamos entendendo melhor ao longo dos próximos tutoriais.

- -

 

- -

Próximo, "Hello, world!" é uma 'string'. Strings são geralmente bastante complicadas em uma 'system language', e ainda mais, temos uma string estáticamente alocada. Caso você queira ler mais sobre alocação, confira este link: http://doc.rust-lang.org/book/the-stack-and-the-heap.html, mas por hora não se faz necessário.

- -

Voltando, nós passamos a nossa string como um argumento para a macro println!, que por sua vez imprime na tela a nossa 'string'. Fácil!

- -

 

- -

Finalmente, a nossa linha de código termina com um ponto e vírgula ( ; ). Rust é uma linguagem orientada à expressões, o que significa que a maior parte da linguagem são expressões e não apenas declarações. O ; é usado para indicar que uma expressão terminou e que a próxima está prestes a começar. A grande maioria das linhas de código em Rust acabarão com ;.

- -

 

- -

Por fim, compilar e executar.

- -

Para compilar usamos o nosso compilador rustc e em seguida passamos o nome do nosso arquivo:

- -

 

- -

$ rustc main.rs

- -

 

- -

Caso você tenha experiência com C/C++ verá que existe semelhança com o gcc e clang. Após o comando, Rust gerará um binário executável. Podemos vê-lo utilizando o comando ls:

- -

 

- -

$ ls

- -

mainmain.rs

- -

 

- -

No Windows:

- -

$ dir

- -

main.exemain.rs

- -

 

- -

Agora temos dois arquivos, o nosso código com a extensão .rs e o executável(main.exe para Windows ou main para os demais).

- -

 

- -

$ ./main # or main.exe on Windows

- -

 

- -

O comando acima exibe a nossa string hello, world! no terminal.

- -

 

- -

Caso você venha de alguma linguagem dinâmica como Ruby, Python ou Javascript épossível que você nunca tenha feito esses dois passos anteriores em separado. Rust é uma linguagem “anteriormente compilada”, o que significa que você pode compilar um programa e compartilhar com alguém que não tenha Rust instalado e essa pessoa irá conseguir executar numa boa. Agora, se você compartilhar um arquivo .rb ou .py ou .js a pessoa com quem você compartilhou precisará ter Ruby/Python/Javascript instalado, em contra-partida com estas linguagens você compila e roda em um único comando. Tudo é uma questão de escolha quando se trata de padrões de linguagem e Rust fez as dele.

- -

 

- -

Parabéns! Você oficialmente escreveu seu primeiro programa em Rust. Isso lhe torna um programador Rust! Bem-vindo!!!

- -

 

- -

 

- -

 

diff --git a/files/pt-br/html/attributes/index.html b/files/pt-br/html/attributes/index.html deleted file mode 100644 index cac8b527ec..0000000000 --- a/files/pt-br/html/attributes/index.html +++ /dev/null @@ -1,578 +0,0 @@ ---- -title: Atributos -slug: HTML/Attributes -translation_of: Web/HTML/Attributes ---- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome do AtributoElementosDescrição
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo.
accept-charset{{ HTMLElement("form") }}Lista de conjunto de caracteres suportados.
accesskeyGlobal attributeDefine um atalho no teclado para ativar ou adicionar foco ao elemento.
action{{ HTMLElement("form") }}A URI de um programa que processa a informação submetida através do formulário.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica o alinhamento horizontal do elemento.
alt -

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

- 		Texto alternativo caso uma imagem não possa ser exibida.
async{{ HTMLElement("script") }}Indica que o script deve ser executado assíncrono.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica se controles  neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}O elemento deve ser focado automaticamente após a página ser carregada.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}O aúdio ou vídeo deve ser reproduzido assim que possível.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

Cor do plano de fundo do elemento.

-

Nota: Este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("background-color") }} em vez disso.

-
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

A largura da borda.

-

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("border") }} em vez disso.

-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contém o intervalo de tempo da mídia que já foi carregada.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara a codificação dos caracteres da página ou do script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica se o elemento deve ser checado no carregamento da página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contêm uma URI que aponta para a fonte da citação ou alteração.
classGlobal attributeFrequentemente usado com CSS para estilizar os elementos com propriedades comuns.
code{{ HTMLElement("applet") }}Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado.
codebase{{ HTMLElement("applet") }}Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.

-

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("color") }} em vez disso.

-
cols{{ HTMLElement("textarea") }}Define o número de colunas numa area de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}O atributo colspan define o número de colunas que uma célula deve conter.
content{{ HTMLElement("meta") }}Um valor associado com http-equiv ou name dependendo do contexto.
contenteditableGlobal attributeIndica se o conteúdo do elemento é editável.
contextmenuGlobal attributeDefine o ID de um elemento {{ HTMLElement("menu") }} que servirá como o menu de contexto de um outro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário.
coords{{ HTMLElement("area") }}Uma escolha de valores especificando as coordenadas da região hot-spot.
data{{ HTMLElement("object") }}Especifica a URL do recurso.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }} -

Indica a data e o horário associados ao elemento.

-
default{{ HTMLElement("track") }}Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente.
defer{{ HTMLElement("script") }}Indica que o script deve ser executado após a página ter sido analisada.
dirGlobal attributeDefina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se o usuário pode ou não interagir com o elemento.
draggableGlobal attributeDefine se o elemento pode ser arrastado.
dropzoneGlobal attributeIndica que o elemento aceita a soltagem de conteúdo nele.
enctype{{ HTMLElement("form") }}Define o tipo de conteúdo da data do formulário quando o method é POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descreve elementos na qual pertencem a este.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica o formulário que é o proprietário do elemento.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs dos elementos <th> na qual se aplicam a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, isto é um atributo legado, em cujo caso  a propriedade CSS {{ Cssxref("height") }} deveria ser usado em vez. Em outros casos, assim como {{ HTMLElement("canvas") }}, a altura deve ser especificado com esse atributo.
hiddenGlobal attributeIndica a relevância de um elemento.
high{{ HTMLElement("meter") }}Indica o menor limite da faixa superior.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} A URL de um recurso ligado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o idioma de um recurso ligado.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Especifica uma imagem na qual represente o comando.
idGlobal attributeFrequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único.
ismap{{ HTMLElement("img") }}Indica que a imagem é parte de um mapa de imagem "sever-side".
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}Especifica o tipo de chave gerada.
kind{{ HTMLElement("track") }}Especifica o tipo de caminho de texto.
label{{ HTMLElement("track") }}Especifica um título "user-releadable" de um caminho de texto.
langGlobal attributeDefine o idioma usado no elemento.
language{{ HTMLElement("script") }}Define o idioma do script usado no elemento.
list{{ HTMLElement("input") }}Identifica uma lista de opções pré definidas para sugerir ao usuário.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica se a mídia deveria começar tocando do começo quando ela é finalizada.
low{{ HTMLElement("meter") }}Indica o maior limite da menor distância.
manifest{{ HTMLElement("html") }}Especifica a URL do cache manifest do documento. documento
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica o valor máximo permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define o núemro máximo de caracteres permitido no elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Especifica uma sugestão da mídia para qual recurso ligado foi designado.
method{{ HTMLElement("form") }}Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica o valor mínimo permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica se múltiplos valores podem ser inseridos em uma entrada do tipo email ou file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário.
novalidate{{ HTMLElement("form") }}Este atributo indica que o formulário não deveria ser validado quando enviado.
open{{ HTMLElement("details") }}Indica se os detalhes serão mostrados no carregamento da página.
optimum{{ HTMLElement("meter") }}Indica o valor numérico optimal.
pattern{{ HTMLElement("input") }}Define uma espreção regular na qual o valor do elemento será validado de encontro.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornece uma sugestão ao usuário de o que pode ser inserido no campo.
poster{{ HTMLElement("video") }}Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se todo o recurso, partes dele ou nada deveria ser pré carregado.
pubdate{{ HTMLElement("time") }} -

Indica se esta data e tempo é a data no mais próximo

-

elemento antecessor{{ HTMLElement("article") }}.

-
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se o elemento pode ser editado.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o relacionamento do objeto alvo para o objeto ligado.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se este elemento é requerido para preencher ou não.
reversed{{ HTMLElement("ol") }}Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente.
rows{{ HTMLElement("textarea") }}Define o número de linhas em uma área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define o número de linhas que uma célula de tabela deveria abranger mais.
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attributeIndica se o spell de checagem está permitido para o elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Define o valor na qual será selecionado no carregamento da página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define a largura do elemento (em pixels). Se o elemento de atributo type é text ou password então este é o número de caracteres.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }} URL de um conteúdo incorporável.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Define o primeiro número se não for 1.
step{{ HTMLElement("input") }} 
styleGlobal attributeDefine estilos CSS na qual ultrapassarão estilos previamente configurados.
summary{{ HTMLElement("table") }} 
tabindexGlobal attributeUltrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attributeTexto a ser mostrado em uma dica quando suspenso sobre um elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define o tipo de elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define o valor padrão na qual será mostrado no elemento no carregar da página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, este é um atributo legado, no caso da propriedade CSS {{ Cssxref("width") }} deveria ser usado ao em vez. em outros casos, tal como {{ HTMLElement("canvas") }}, a largura deve ser especificada com este atributo.
wrap{{ HTMLElement("textarea") }}Indica se o texto deveria ser enrolado.
-

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/pt-br/html/forms_in_html/index.html b/files/pt-br/html/forms_in_html/index.html deleted file mode 100644 index 7508276c28..0000000000 --- a/files/pt-br/html/forms_in_html/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Formulários em HTML -slug: HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -

{{ gecko_minversion_header("2") }}

- -

Elementos e atributos de formulários em HTML5 proporcionam um grau de marcação semântica maior que HTML4 e remove grande parte da tediosa necessidade de se mexer com scripts e estilos que era necessária em HTML4. As características dos formulários em HTML5 proporcionam uma melhor experiência para usuários por tornarem formulários mais consistentes entre diferentes sites e dar um feedback imediato ao usuário sobre a entrada de dados. Eles também oferecem essa experiência para usuários que possuem scripts desabilitados em seus navegadores.

- -

Este tópico descreve itens novos ou modificados que são suportados por Gecko/Firefox, versão 4 ou mais recente.

- -

O elemento <input>

- -

O elemento {{ HTMLElement("input") }} tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.

- - - -

O elemento {{ HTMLElement("input") }} também tem novos atributos:

- - - -

O elemento <form>

- -

O elemento {{ HTMLElement("form") }} possui um novo atributo:

- - - -

O elemento <datalist>

- -

O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} to suggest when filling an {{ HTMLElement("input") }} field.

- -

Você pode usar o atributo {{ htmlattrxref("list", "input") }} em um elemento {{ HTMLElement("input") }} para ligar um específico campo de entrada com um específico elemento {{ HTMLElement("datalist") }}.

- -

O elemento <output>

- -

O elemento {{ HTMLElement("output") }} representa o resultado de um cálculo.

- -

Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento {{ HTMLElement("output") }} e outros elementos no documento que afetam o resultado do cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo {{ htmlattrxref("for", "output") }} é uma lista de IDs separados por espaço de outros elementos.

- -

{{ non-standard_inline() }} Gecko 2.0 (mas não necessariamente outras engines de navegador) suportasupports defining custom validity constraints e mensagens de erro de elementos {{ HTMLElement("output") }} , e portanto aplica as pseudo-classes CSS {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, e {{ Cssxref(":-moz-ui-valid") }} a eles. Isso pode ser útil em situações quando o resultado calculadoThis can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").

- -

O atributo placeholder

- -

O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos {{ HTMLElement("input") }} e {{ HTMLElement("textarea") }} fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do placeholder não pode conter caracteres de quebra de linha.

- -

O atributo autofocus

- -

O atributo {{ htmlattrxref("autofocus", "input") }} permite você especificar um campo de formulário que será focado automaticamente quando a página carregar. No documento, apenas um campo pode ter o atributo autofocus, que é um booleano. Este atributo pode ser aplicado aos seguintes elementos: {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }}. A única exceção é que o atributo autofocus não pode ser aplicado a um elemento {{ HTMLElement("input") }} caso  seu atributo {{ htmlattrxref("type", "input") }} seja hidden.

- -

The label.control DOM property

- -

The HTMLLabelElement DOM interface provides an extra property, in addition to the properties that correspond to the HTML {{ HTMLElement("label") }} element attributes. The control property returns the labeled control, that is, the control that the label is for, which is determined by the {{ htmlattrxref("for", "label") }} attribute (if it is defined) or by the first descendant control element.

- -

Constraint Validation

- -

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.

- -

If the title attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the title is set to the empty string, no tooltip is displayed. If the title attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the setCustomValidity() method) is displayed instead.

- -
Note: Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.
- -

HTML Syntax for Constraint Validation

- -

The following items in HTML5 syntax can be used to specify constraints on form data.

- - - -

In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

- -

Constraint Validation API

- -

The following DOM properties and methods related to constraint validation are available to client-side scripts:

- - - -

{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5", "ko": "ko/HTML/HTML에서_폼"}) }}

- -

{{ HTML5ArticleTOC() }}

diff --git a/files/pt-br/instalando_rust/index.html b/files/pt-br/instalando_rust/index.html deleted file mode 100644 index 883144991d..0000000000 --- a/files/pt-br/instalando_rust/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Instalando Rust -slug: Instalando_Rust -tags: - - Linux - - Tutorial - - Windows - - baixo nivel - - brasil - - brazil - - hello world - - install - - low-level - - programming - - rust - - rustontherocks - - system language ---- -

Instalando o Rust

- -

 

- -

O primeiro passo é instalar. Existem várias maneiras de se instalar o Rust, porém a maneiras mais fácil é através do script 'rustup'. Se o seu sistema é Gnu/Linux ou Mac, eis o que você precisa fazer:

- -

 

- -
-

$ curl -sf -L https://static.rust-lang.org/rustup.sh | sh

-
- -

 

- -

Se você está preocupado com a potencial brecha de segurança de usar curl | sh , por favor continue lendo e veja a nossa alternativa abaixo. Sinta-se à vontade para fazer o processo em dois passos:

- -

 

- -
-

$ curl -f -L https://static.rust-lang.org/rustup.sh -O

- -

$ sh rustup.sh

-
- -

 

- -
-

Se você utiliza Windows, por favor baixe o instalador correto para a sua máquina:

- -

 

- -

32bits https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi

- -

 

- -

64bits https://static.rust-lang.org/dist/rust-1.0.0-beta-x86_64-pc-windows-gnu.msi

-
- -

Ah, antes que eu esqueça!

- -

 

- -

Plataformas oficialmente suportadas:

- -

 

- -
-

      Windows (7, 8, Server 2008 R2)

- -

Gnu/Linux(2.6.18 ou posterior, várias distribuições), x86 e x86-64

- -

OSX 10.7(Lion) ou posterior, x86 e x86-64

-
- -
-
- -

Rust foi bastante testado nestas plataformas e em algumas outras, como android. Mas estas são as mais amigáveis para se trabalhar, uma vez que foram as mais testadas.

- -

 

- -

Finalmente, um comentário sobre Windows. Rust considerou Windows como uma plataforma de primeira classe na fase de lançamento. Contudo, se formos honestos precisamos dizer que a experiência no Windows não é tão boa quanto no Gnu/Linux e OS X. Estamos trabalhando para melhorar isso! Se alguma coisa não funcionar, é um 'bug'. Por favor avise-nos caso isso venha a acontecer. Cada 'commit' é testado no Windows assim como em qualquer outra plataforma.

- -

 

- -

Se você tem Rust instalado, você pode abrir um terminal e digitar o seguinte:

- -

 

- -
-

$ rustc –version

-
- -

 

- -

Você deverá ver como saída o número da versão do Rust que está instalada, o 'commit hash', a data do 'commit' e a data que foi compilado.

- -

 

- -
-

rustc 1.0.0-beta (9854143cb 2015-04-02) (built 2015-04-02)

-
- -

 

- -

Caso você veja uma saída parecida com essa, parabéns Rust foi instalado com sucesso!

- -

 

- -
-

O instalador oficial também instala uma cópia da documentação para que você possa lê-la offline. Em sistemas UNIX, /usr/local/share/doc/rust é o local onde ela se encontra. No windows a documentação encontra-se na pasta share/doc dentro do local onde o Rust foi instalado.

- -

 

-
- -

Caso você não tenha obtido uma saída como a saida mostrada aqui, existem inúmeros lugares que você poderá pedir ajuda. O mais indicado é o canal do Rust no IRC (#rust) no servidor da mozilla (irc.mozilla.org). Você poderá acessar diretamente clicando neste link: https://client02.chat.mibbit.com/server=irc.mozilla.org&channel=%23rust .

- -

 

- -
-

Outro importantes links...

- -

 

- -

fórum dos usuários https://users.rust-lang.org/

- -

RoR Project http://rustontherocks.org

- -

Stack Overflow http://stackoverflow.com/questions/tagged/rust

- -

 

- -

 

-
diff --git a/files/pt-br/json/index.html b/files/pt-br/json/index.html deleted file mode 100644 index 5212f7c589..0000000000 --- a/files/pt-br/json/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: JSON -slug: JSON -translation_of: Glossary/JSON ---- -

JSON (Notação de Objetos JavaScript) e um formato de dados permutável. Ele assemelha - se próximo a um sub tipo da sintaxe do JavaScript, mas ele não é um tipo de script. (Veja JSON em Referências JavaScript para todos os detalhes). Isto é útil quando escrevemos qualquer tipo de aplicação baseada em JavaScript, incluindo web sites e extensões de navegadores. Por exemplo, você pode armazenar informações no formato em JSON no formato de cookies, ou você pode armazenar as preferências de extensões em JSON como valor de texto nas preferências do navegador.

-

JSON e capaz de representar números, booleanos, textos, vazios, e listas (sequência ordenada de valores) e objetos (mapeamento de valores de texto) composto por estes valores (ou por outras listas e objetos). Ele não representa nativamente tipos complexos de dados como funções, expressões regulares, datas, e muito mais. (Objetos de dados por padrão inicializam como texto contendo os dados no formato ISO, enquanto eles não mudam, a informação não é completamente perdida.) Se você precisa preservar muitos valores, você pode transformar valores como eles são inicializados, ou prioritariamente descontinuados, para habilitar JSON para representar tipos de dados adicionais.

- - - - - - - -
-

Documentação

-
-
- Objetos JSON
-
- Os objetos JSON contém métodos para converter valores para Notação de objetos javascript (JSON) e para converter JSON para valores.
-
-
-
- Usando o JSON nativo
-
- Este artigo cobre o ECMAScript 5 compilando a linguagem nativa JSON somado em Gecko 1.9.1.
-
-
-
- Caminho JSON
-
- Caminho JSON significa o uso XPath como sintaxe para a estrutura de requisições do JSON. Ele não é o padrão, mas apresenta maneiras de requisição em JavaScript diretamente sem precisar converte - la para xml.
-
-  
-
- Baixando JSON e extensões em Javascript
-
- A pratica habitual encontrada em muitas extensões está usando XMLHttpRequest (ou outros mecanismos) para baixar Javascript ou JSON (eles são diferentes) para um site web remoto. Uma vez o conteúdo já sido baixado, a extensão escrita procedida pelo uso eval() para decodificar o texto contendo objetos JavaScript, a escolha e uma prática perigosa e não deve, de fato passar na revisão AMO. Este artigo mostra como evitar isto.
-
-
-
- JXON
-
- JXON padrões sem perdas de Notação de Objetos JavaScript XML, ele é um nome genérico pelo qual e definida a representação da árvore dos objetos JavaScript (JSON) usando XML.
-
-
-
- Método JSON.stringify
-
- Converta valores para JSON, opcionalmente substituindo valores se a função for específica, ou opcionalmente incluindo somente propriedades especificas se a substituição na lista for especifica.
-
-
-
- Método JSON.parse
-
- Analisa a string como JSON, opcionalmente transforma o valor produzido pela análise.
-
-

Veja Todos...

- 		-

Comunidade

-
    -
  • Veja os foruns Mozilla...
    • -
  •  
    • -
-
    -
  • {{DiscussionList("dev-tech-json","mozilla.dev.tech.json") }}
    • -
-

Ferramentas

- -

Veja Todos...

- -
-
- AJAX, JavaScript, XUL
-
-
-

Usando JSON atráves de objetos JavaScript JSON

-

O mais simples, fácil caminho para usar JSON e através do padrão de objetos JSON em JavaScript.  Use JSON.stringify para inicializar valores em JSON, e use JSON.parse para deserializar um valor JSON.

-

Por exemplo, para inicializar um objeto JavaScript, use o método JSON.stringify():

-
var foo = {};
-foo.bar = "new property";
-foo.baz = 3;
-
-var JSONfoo = JSON.stringify(foo);
-
-

JSONfoo now holds {"bar":"new property","baz":3}. Para fazer JSONfoo voltar a ser um objeto JavaScript faça:

-
var backToJS = JSON.parse(JSONfoo);
-
-

Para mais informações, veja a documentação de objetos JSON.

-

Método toJSON()

-

Se um objeto define o método toJSON(), JSON.stringify pode se chamar estes métodos para determinar a representação de objetos JSON. Por exemplo:

-
x = {};
-x.foo = "foo";
-x.toJSON = function() { return "bar"; };
-var json1 = JSON.stringify(x);
-
-

json1 now contains '"bar"'.

-

Limitações

-

Você não pode inicializar objetos que sejam membros escolhidos para funções. As especificações JSON não permitem. Por exemplo:

-
foo.qwerty = function(){alert('foobar');};
-foo.qwerty()
-var JSONfoo = JSON.toString(foo);
-
-

will raise a TypeError on line XXX: No JSON representation for this object!

-

Usando JSON através do nsIJSON

-

Versões do Firefox anteriores a 3.5 nativamente não suportam JSON, e há um único caminho para acessar as funcionalidades JSON é através do componente nsIJSON, implementado desde o Firefox 3. Codificando e decodificando são executados através nsIJON's métodos de codificação e decodificação. Estes métodos não acessam o JSON através de objetos JSON, e eles somente suportam valores escolhidos por listas de objetos, sem textos, booleanos, números ou vazios. (Estes valores são suportados somente por listas e objetos: o simples número 5 não irá funcionar, mas o objeto {"valor": 5} funcionará.)

-

Por causa nsIJSON não ser tão eficaz como um objeto JSON, ele codifica e decodifica métodos já removidos para Firefox 7. Desenvolvedores devem escolher para uso objeto JSON.

-

O seguinte código inicializa um objeto JavaScript usando nsIJSON:

-
var Ci = Components.interfaces;
-var Cc = Components.classes;
-
-var foo = {};
-foo.bar = "new property";
-foo.baz = 3;
-
-var nativeJSON = Cc["@mozilla.org/dom/json;1"].createInstance(Ci.nsIJSON);
-var JSONfoo = nativeJSON.encode(foo);
-
-

The JSONfoo variable now holds the string {"bar":"new property","baz":3}. To create an object corresponding to JSONfoo, just do:

-
var backToJS = nativeJSON.decode(JSONfoo);
-
-

Usando JSON em outras situações

-

Enquanto na teoria e possível usar JSON usando eval (mas somente para descerializar objetos, e não para inicializar textos) ou usando json2.js, Está não é uma boa ideia. Isto não e seguro para analisar JSON usando eval por que ele permite muito mais sintaxe que JSON faz (Melhora para execução de um código aleatório). Como para json2.js, este problema e que ele adiciona métodos para compilação como Object.prototype, escolha o mais útil para parar a execução do código antecipando está possibilidade.

-

Você deve quase sempre usa - lo ou os métodos formulados para usar JSON em preferências para qualquer outro caminho.

-

Veja também

- -

{{ languages( { "ja": "ja/JSON", "zh-cn": "zh-cn/JSON" } ) }}

diff --git a/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..727433531a --- /dev/null +++ b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,111 @@ +--- +title: 'Avaliação: solucionando problemas de acessibilidade' +slug: Learn/Accessibility/Acessibilidade_problemas +tags: + - Acessibilidade + - Avaliação + - CSS + - Codificação + - CodingScripting + - Iniciante + - JavaScript + - WAI-ARIA + - aprendizado +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

Na avaliação deste módulo, apresentamos a você um site simples com vários problemas de acessibilidade que você precisa diagnosticar e corrigir.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico de informática, entendimento básico de HTML, CSS e Javascript, uma compreesão dos artigos anteriores deste curso.
Objetivo:Testar conhecimentos básicos e fundamentais para a acessibilidade.
+ +

Ponto de partida

+ +

Para começar esta avaliação, você deve pegar o arquivo ZIP que contém os arquivos que compõem o exemplo. Descompacte o conteúdo em um novo diretório em algum lugar de seu computador.

+ +

O site de avaliação final, deve ser parecido com esse:

+ +

+ +

Você verá algumas diferenças e/ou problemas com a exibição do estado inicial do site da avaliação - isso se deve principalmente as diferenças na marcação de código, o que, por sua vez, causa alguns problemas de estilo, pois o CSS não está aplicado corretamente. Não se preocupe - você irá corrigir esses problemas nas próximas seções!

+ +

Resumo do projeto

+ +

Para este projeto, você é apresentado a um site fictício exibindo um artigo sobre ursos. Da forma como ele está, possui vários problemas de acessibilidade - a sua tarefa é explorar o site existente e corrigí-los da melhor forma possível, respondendo as seguintes perguntas.

+ +

Cor

+ +

O texto é difícil de ler devido ao esquema de cores atual. Você pode fazer um teste do contraste de cor atual (texto/plano de fundo), relatar os resultados do teste e corrigí-lo alterando as cores atribuídas?

+ +

HTML semântico

+ +
    +
  1. O conteúdo ainda não é muito acessível - relate o que acontece quando você tenta navegar utilizando um leitor de telas.
    2. +
  2. Você consegue atualizar o texto do artigo para facilitar a navegação de usuários de leitores de telas?
    3. +
  3. A parte do menu de navegação do site (agrupada em <div class="nav"></div>) poderia estar mais acessível se estivesse dentro de um elemento semântico de HTML5 mais adequado. Qual elemento deve ser utilizado? Atualize-o.
    4. +
+ +
+

Nota: Você precisará atualizar os seletores de CSS que estilizam as respectivas tags para seus equivalentes aos cabeçalhos semânticos. Depois de adicionar elementos de parágrafo, você perceberá que a estilização parecerá bem melhor.

+
+ +

As imagens

+ +

As imagens estão atualmente inacessíveis para os usuários do leitor de tela. Você pode consertar isso?

+ +

O "player" de áudio

+ +
    +
  1. Foi utilizada o elemento <audio> para exibir o "player", porém ele não é acessível para pessoas com deficiência auditiva (surdos) - você consegue adicionar algum tipo de alternativa acessível para esses usuários?
    2. +
  2. O elemento <audio> para utilizar o "player" não é acessível para aqueles que usam navegadores mais antigos que não suportam HTML5. Como você pode fazer com que esses usuários consigam ter acesso ao áudio?
    3. +
+ +

Os formulários

+ +
    +
  1. O elemento <input> no formulário de pesquisa no topo poderia ter um rótulo, mas não queremos adicionar um rótulo de texto visível que possa prejudicar o design e não seja realmente necessário para os usuários com visão. Como você pode adicionar um rótulo acessível apenas aos leitores de tela?
    2. +
  2. Os dois elementos <input> no formulário de comentários possui rótulos de texto visíveis, mas não estão associados corretamente entre eles. Como você poderia fazer isso? Note que você precisará atualizar algumas regras de CSS também.
    3. +
+ +

Os controles de comentários "exibir/ocultar"

+ +

O botão de controle "exibir/ocultar" não está acessível por teclado. Você pode torná-lo acessível, tanto em termos de deixá-lo "focável" através da utilização da tecla tab, como ativá-lo usando a tecla enter?

+ +

A tabela

+ +

A tabela de dados não está muito acessível no momento - é difícil para os usuários de leitores de tela associarem linhas e colunas de dados juntas, e a tabela também não possui nenhum tipo de resumo para deixar claro o que mostra. Você pode adicionar alguns recursos ao seu HTML para corrigir esse problema?

+ +

Outras considerações?

+ +

Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?

+ +

Avaliação

+ +

Se você está fazendo esta avaliação como parte de um curso, você deverá entregar o seu trabalho para um professor para que possa corrigí-lo. Se você é auto-didata, então você pode obter o guia com a marcação correta perguntando no tópico de discussão para este exercício, ou no canal de IRC #mdn no IRC do Mozilla. Experimente tentar fazer o exercício primeiro - você não ganhará nada trapaceando!

+ +

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html b/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html deleted file mode 100644 index 727433531a..0000000000 --- a/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'Avaliação: solucionando problemas de acessibilidade' -slug: Learn/Accessibility/Acessibilidade_problemas -tags: - - Acessibilidade - - Avaliação - - CSS - - Codificação - - CodingScripting - - Iniciante - - JavaScript - - WAI-ARIA - - aprendizado -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

Na avaliação deste módulo, apresentamos a você um site simples com vários problemas de acessibilidade que você precisa diagnosticar e corrigir.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico de informática, entendimento básico de HTML, CSS e Javascript, uma compreesão dos artigos anteriores deste curso.
Objetivo:Testar conhecimentos básicos e fundamentais para a acessibilidade.
- -

Ponto de partida

- -

Para começar esta avaliação, você deve pegar o arquivo ZIP que contém os arquivos que compõem o exemplo. Descompacte o conteúdo em um novo diretório em algum lugar de seu computador.

- -

O site de avaliação final, deve ser parecido com esse:

- -

- -

Você verá algumas diferenças e/ou problemas com a exibição do estado inicial do site da avaliação - isso se deve principalmente as diferenças na marcação de código, o que, por sua vez, causa alguns problemas de estilo, pois o CSS não está aplicado corretamente. Não se preocupe - você irá corrigir esses problemas nas próximas seções!

- -

Resumo do projeto

- -

Para este projeto, você é apresentado a um site fictício exibindo um artigo sobre ursos. Da forma como ele está, possui vários problemas de acessibilidade - a sua tarefa é explorar o site existente e corrigí-los da melhor forma possível, respondendo as seguintes perguntas.

- -

Cor

- -

O texto é difícil de ler devido ao esquema de cores atual. Você pode fazer um teste do contraste de cor atual (texto/plano de fundo), relatar os resultados do teste e corrigí-lo alterando as cores atribuídas?

- -

HTML semântico

- -
    -
  1. O conteúdo ainda não é muito acessível - relate o que acontece quando você tenta navegar utilizando um leitor de telas.
    2. -
  2. Você consegue atualizar o texto do artigo para facilitar a navegação de usuários de leitores de telas?
    3. -
  3. A parte do menu de navegação do site (agrupada em <div class="nav"></div>) poderia estar mais acessível se estivesse dentro de um elemento semântico de HTML5 mais adequado. Qual elemento deve ser utilizado? Atualize-o.
    4. -
- -
-

Nota: Você precisará atualizar os seletores de CSS que estilizam as respectivas tags para seus equivalentes aos cabeçalhos semânticos. Depois de adicionar elementos de parágrafo, você perceberá que a estilização parecerá bem melhor.

-
- -

As imagens

- -

As imagens estão atualmente inacessíveis para os usuários do leitor de tela. Você pode consertar isso?

- -

O "player" de áudio

- -
    -
  1. Foi utilizada o elemento <audio> para exibir o "player", porém ele não é acessível para pessoas com deficiência auditiva (surdos) - você consegue adicionar algum tipo de alternativa acessível para esses usuários?
    2. -
  2. O elemento <audio> para utilizar o "player" não é acessível para aqueles que usam navegadores mais antigos que não suportam HTML5. Como você pode fazer com que esses usuários consigam ter acesso ao áudio?
    3. -
- -

Os formulários

- -
    -
  1. O elemento <input> no formulário de pesquisa no topo poderia ter um rótulo, mas não queremos adicionar um rótulo de texto visível que possa prejudicar o design e não seja realmente necessário para os usuários com visão. Como você pode adicionar um rótulo acessível apenas aos leitores de tela?
    2. -
  2. Os dois elementos <input> no formulário de comentários possui rótulos de texto visíveis, mas não estão associados corretamente entre eles. Como você poderia fazer isso? Note que você precisará atualizar algumas regras de CSS também.
    3. -
- -

Os controles de comentários "exibir/ocultar"

- -

O botão de controle "exibir/ocultar" não está acessível por teclado. Você pode torná-lo acessível, tanto em termos de deixá-lo "focável" através da utilização da tecla tab, como ativá-lo usando a tecla enter?

- -

A tabela

- -

A tabela de dados não está muito acessível no momento - é difícil para os usuários de leitores de tela associarem linhas e colunas de dados juntas, e a tabela também não possui nenhum tipo de resumo para deixar claro o que mostra. Você pode adicionar alguns recursos ao seu HTML para corrigir esse problema?

- -

Outras considerações?

- -

Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?

- -

Avaliação

- -

Se você está fazendo esta avaliação como parte de um curso, você deverá entregar o seu trabalho para um professor para que possa corrigí-lo. Se você é auto-didata, então você pode obter o guia com a marcação correta perguntando no tópico de discussão para este exercício, ou no canal de IRC #mdn no IRC do Mozilla. Experimente tentar fazer o exercício primeiro - você não ganhará nada trapaceando!

- -

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/accessibility/css_and_javascript/index.html b/files/pt-br/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..f0d8a728c5 --- /dev/null +++ b/files/pt-br/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,361 @@ +--- +title: CSS e JavaScript - melhores práticas de acessibilidade +slug: Learn/Accessibility/CSS_e_JavaScript +tags: + - Acessibilidade + - Artigo + - CSS + - JavaScript + - color + - contraste +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

CSS e JavaScript, quando usados de maneira correta, têm também potencial para permitir experiências web acessíveis... ou podem causar danos significativos se usados de forma indevida. Este artigo descreve algumas das melhores práticas em CSS e JavaScript a serem consideradas para garantir que até mesmo conteúdos complexos estejam tão acessíveis quanto possível.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico de computação, Conhecimento básico de HTML, CSS, e JavaScript, e entendimento sobre o que é acessibilidade.
Objetivo:Tornar-se familiarizado com o uso de CSS e JavaScript apropriadamente em seus documentos web para maximizar a acessibilidade e não diminuir sua importância.
+ +

CSS e JavaScript são acessíveis?

+ +

CSS e JavaScript não têm a mesma importância imediata que o HTML, mas eles continuam sendo capazes de ajudar ou causar danos à acessibilidade, dependendo de como são usados. Ou seja, é importante que você considere algumas das melhores práticas para assegurar que o seu uso de CSS e JavaScript não danifiquem a acessibilidade de seus documentos.

+ +

CSS

+ +

Vamos começar dando uma olhada no CSS.

+ +

Semântica correta e expectativas do usuário

+ +

É possível usar  CSS para fazer qualquer elemento HTML se parecer com qualquer coisa, mas isso não quer dizer que você deve. Como frequentemente mencionado no nosso artigo HTML: Uma boa base para acessibilidade, você deve utilizar a semântica apropriada do elemento para determinada tarefa, sempre que possível. Se não o fizer, isso poderá acarretar confusão e problemas de usabilidade para todos, particularmente para usuários portadores de deficiência. Utilizar uma semântica correta tem muito a ver com as expectativas do usuário — elementos se parecem e se comportam de certas maneiras, de acordo com suas funcionalidades, e essas convenções são esperadas pelos usuários.

+ +

Por exemplo, um usuário utilizando um leitor de tela não consegue navegar por uma página através de elementos de heading se o desenvolvedor não tiver usado apropriadamente estes elementos para marcação do conteúdo. Da mesma forma, um heading perde o seu propósito visual se você estilizá-lo de maneira que ele não se pareça com um heading.

+ +

A regra de ouro é que você pode atualizar o estilo de recurso de página para se adequar ao seu design, mas não o altere tanto ao ponto de não mais se parecer ou se comportar como o esperado. As sessões que se seguem resumem os principais recursos HTML a serem considerados.

+ +

Estrututa "standard" de conteúdo textual

+ +

Headings, parágrafos, listss — o núcleo do conteúdo textual da sua página:

+ +
<h1>Heading</h1>
+
+<p>Parágrafo</p>
+
+<ul>
+  <li>Minha lista</li>
+  <li>tem dois itens.</li>
+</ul>
+ +

Um código CSS típico pode se parecer com isso:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

Você tem de:

+ + + +

Veja HTML fundamentos de texto e Estilizando texto para maiores informações.

+ +

Texto em negrito

+ +

Elemento de marcação que confere ênfase específica ao texto envolvido por ele:

+ +
<p>A água está <em>muito quente</em>.</p>
+
+<p>Gotículas de água em superfícies são chamadas de <strong>condensação</strong>.</p>
+ +

Você pode querer adicionar alguma cor no seu texto em negrito:

+ +
strong, em {
+  color: #a60000;
+}
+ +

De qualquer forma, você raramente irá precisar de estilizar um elemento de ênfase. As convenções para texto em negrito e itálico são bastante reconhecidas e alterar seu estilo pode causar confusão. Para saber mais sobre elemento ênfase (negrito), veja Emphasis and importance.

+ +

Abreviações

+ +

É um elemento que permite abraviação, acrônimo ou inicialização que esteja associada com sua expansão:

+ +
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Novamente, você pode querer estilizá-lo de alguma forma:

+ +
abbr {
+  color: #a60000;
+}
+ +

A convenção de estilo que é reconhecida para abreviações é uma linha pontilhada, e não é recomendado estilizá-la. Para saber mais sobre abreviações, veja Abbreviations.

+ + + +

Hyperlinks — the way you get to new places on the web:

+ +
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
+ +

Some very simple link styling is shown below:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

The standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). In addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g. via tabbing) or activated. The following image shows the highlight in both Firefox (a dotted outline) and Chrome (a blue outline):

+ +

+ +

+ +

You can be creative with link styles, as long as you keep giving users feedback when they interact with the links. Something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.

+ +

Form elements

+ +

Elements to allow users to input data into websites:

+ +
<div>
+  <label for="name">Enter your name</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

You can see some good example CSS in our form-css.html example (see it live also).

+ +

Most of the CSS you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy.

+ +

You shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). You could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.

+ +

Tables

+ +

Tables for presenting tabular data.

+ +

You can see a good, simple example of table HTML and CSS in our table-css.html example (see it live also).

+ +

Table CSS generally serves to make the table fit better into your design and look less ugly. It is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse.

+ +

Color and color contrast

+ +

When choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content.

+ +

There is an easy way to check whether your contrast is large enough to not cause problems. There are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them. For example WebAIM's Color Contrast Checker is simple to use, and provides an explanation of what you need to conform to the WCAG criteria around color contrast.

+ +
+

Note: A high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.

+
+ +

Another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. Instead of marking required form fields in red, for example, mark them with an asterisk and in red.

+ +

Hiding things

+ +

There are many instances where a visual design will require that not all content is shown at once. For example, in our Tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).

+ +

+ +

Screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. Absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it.

+ +

On the other hand, you shouldn't use {{cssxref("visibility")}}:hidden or {{cssxref("display")}}:none, because they do hide content from screen readers. Unless of course, there is a good reason why you want this content to be hidden from screen readers.

+ +
+

Note: Invisible Content Just for Screen Reader Users has a lot more useful detail surrounding this topic.

+
+ +

Accept that users can override styles

+ +

Accept that users can override your styles

+ +

It is possible for users to override your styles with their own custom styles, for example:

+ + + +

Users might do this for a variety of reasons. A visually impaired user might want to make the text bigger on all websites they visit, or a user with severe color deficiency might want to put all websites in high contrast colors that are easy for them to see. Whatever the need, you should be comfortable with this, and make your designs flexible enough so that such changes will work in your design. As an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll to allow it all to be seen), and won't just hide it, or break completely.

+ +

JavaScript

+ +

JavaScript can also break accessibility, depending on how it is used.

+ +

Modern JavaScript is a powerful language, and we can do so much with it these days, from simple content and UI updates to fully-fledged 2D and 3D games. There is no rule that says all content has to be 100% accessible to all people — you just need to do what you can, and make your apps as accessible as possible.

+ +

Simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions. As we looked at in our HTML: A good basis for accessibility article, the key considerations are:

+ + + +

We also looked at an example of how to use JavaScript to build in functionality where it is missing — see Building keyboard accessibility back in. This is not ideal — really you should just use the right element for the right job — but it shows that it is possible in situations where for some reason you can't control the markup that is used. Another way to improve accessibility for non-semantic JavaScript-powered widgets is to use WAI-ARIA to provide extra semantics for screen reader users. The next article will also cover this in detail.

+ +

Complex functionality like 3D games are not so easy to make accessible — a complex 3D game created using WebGL will be rendered on a {{htmlelement("canvas")}} element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of. It is arguable that such a game doesn't really have this group of people as a part of its main target audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.

+ +

The problem with too much JavaScript

+ +

The problem often comes when people rely on JavaScript too much. Sometimes you'll see a website where everything has been done with JavaScript — the HTML has been generated by JavaScript, the CSS has been generated by JavaScript, etc. This has all kinds of accessibility and other issues associated with it, so it is not advised.

+ +

As well as using the right element for the right job, you should also make sure you are using the right technology for the right job! Think carefully about whether you need that shiny JavaScript-powered 3D information box, or whether plain old text would do. Think carefully about whether you need a complex non-standard form widget, or whether a text input would do. And don't generate all your HTML content using JavaScript if at all possible.

+ +

Keeping it unobtrusive

+ +

You should keep unobtrusive JavaScript in mind when creating your content. The idea of unobtrusive JavaScript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without JavaScript, although it is appreciated that this is not always an option. But again, a large part of it is using built-in browser functionality where possible.

+ +

Good example uses of unobtrusive JavaScript include:

+ + + +

As an example, we've written a quick and dirty client-side form validation example — see form-validation.html (also see the demo live). Here you'll see a simple form; when you try to submit the form with one or both fields left empty, the submit fails, and an error message box appears to tell you what is wrong.

+ +

This kind of form validation is unobtrusive — you can still use the form absolutely fine without the JavaScript being available, and any sensible form implementation will have server-side validation active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning JavaScript off in the browser). The client-side validation is still really useful for reporting errors — users can know about mistakes they make instantly, rather than having to wait for a round trip to the server and a page reload. This is a definite usability advantage.

+ +
+

Note: Server-side validation has not been implemented in this simple demo.

+
+ +

We've made this form validation pretty accessible too. We've used {{htmlelement("label")}} elements to make sure the form labels are unambiguously linked to their inputs, so screen readers can read them out alongside:

+ +
<label for="name">Enter your name:</label>
+<input type="text" name="name" id="name">
+ +

We only do the validation when the form is submitted — this is so that we don't update the UI too often and potentially confuse screen reader (and possibly other) users:

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i < formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

Note: In this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn't interfere with the screen reader being able to read content from it.

+
+ +

Real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. not a minus number, or four digits). Here we've just implemented a simple check that a value has been filled in to each input field (if(testItem.input.value === '')).

+ +

When the validation has been performed, if the tests pass then the form is submitted. If there are errors (if(errorList.innerHTML !== '')) then we stop the form submitting (using preventDefault()), and display any error messages that have been created (see below). This mechanism means that the errors will only be shown if there are errors, which is better for usability.

+ +

For each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the errorList.

+ +
function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}
+ +

Each link serves a dual purpose — it tells you what the error is, plus you can click on it/activate it to jump straight to the input element in question and correct your entry.

+ +
+

Note: The focus() part of this example is a bit tricky. Chrome and Edge (and newer versions of IE) will focus the element when the link is clicked, without needing the onclick/focus() block. Safari will only highlight the form element with the link on its own, so needs the onclick/focus() block to actually focus it. Firefox doesn't focus the inputs properly at all in this context, so Firefox users can't take advantage of this at present (although everything else works fine). The Firefox issue should be fixed soon — work is being done to give Firefox behaviour parity with other browsers (see {{bug(277178)}}).

+
+ +

In addition, the errorField is placed at the top of the source order (although it is positioned differently in the UI using CSS), meaning that users can find out exactly what's wrong with their form submissions and get to the input elements in question by going back up to the start of the page.

+ +

As a final note, we have used some WAI-ARIA attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't pick this up or alert users to it by default):

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

We will explain these attributes in our next article, which covers WAI-ARIA in much more detail.

+ +
+

Note: Some of you will probably be thinking about that fact that HTML5 forms have built-in validation mechanisms like the required, min/minlength, and max/maxlength attributes (see the {{htmlelement("input")}} element reference for more information). We didn't end up using these in the demo because cross-browser support for them is patchy (for example IE10 and above only).

+
+ +
+

Note: WebAIM's Usable and Accessible Form Validation and Error Recovery provides some further useful information about accessible form validation.

+
+ +

Other JavaScript accessibility concerns

+ +

There are other things to be aware of when implementing JavaScript and thinking about accessibility. We will add more as we find them.

+ +

mouse-specific events

+ +

As you will be aware, most user interactions are implemented in client-side JavaScript using event handlers, which allow us to run functions in response to certain events happening. Some events can have accessibility issues. The main example you'll come across is mouse-specific events like mouseover, mouseout, dblclick, etc. Functionality that runs in response to these events will not be accessible using other mechanisms, like keyboard controls.

+ +

To mitigate such problems, you should double up these events with similar events that can be activated by other means (so-called device-independent event handlers) — focus and blur would provide accessibility for keyboard users.

+ +

Let's look at an example that highlights when this could be useful. Maybe we want to provide a thumbnail image that shows a larger version of the image when it is moused over or focused (like you'd see on an e-commerce product catalog.)

+ +

We've made a very simple example, which you can find at mouse-and-keyboard-events.html (see also the source code). The code features two functions that show and hide the zoomed-in image; these are run by the following lines that set them as event handlers:

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

The first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively. This won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops). This can be done by tabbing over the image, because we've included tabindex="0" on it.

+ +

The click event is interesting — it sounds mouse-dependent, but most browsers will activate onclick event handlers after Enter/Return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. This doesn't work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see Building keyboard accessibility back in).

+ +

Summary

+ +

We hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding CSS and JavaScript use on web pages.

+ +

Next up, WAI-ARIA!

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

In this module

+ + +
diff --git a/files/pt-br/learn/accessibility/css_e_javascript/index.html b/files/pt-br/learn/accessibility/css_e_javascript/index.html deleted file mode 100644 index f0d8a728c5..0000000000 --- a/files/pt-br/learn/accessibility/css_e_javascript/index.html +++ /dev/null @@ -1,361 +0,0 @@ ---- -title: CSS e JavaScript - melhores práticas de acessibilidade -slug: Learn/Accessibility/CSS_e_JavaScript -tags: - - Acessibilidade - - Artigo - - CSS - - JavaScript - - color - - contraste -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -

CSS e JavaScript, quando usados de maneira correta, têm também potencial para permitir experiências web acessíveis... ou podem causar danos significativos se usados de forma indevida. Este artigo descreve algumas das melhores práticas em CSS e JavaScript a serem consideradas para garantir que até mesmo conteúdos complexos estejam tão acessíveis quanto possível.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico de computação, Conhecimento básico de HTML, CSS, e JavaScript, e entendimento sobre o que é acessibilidade.
Objetivo:Tornar-se familiarizado com o uso de CSS e JavaScript apropriadamente em seus documentos web para maximizar a acessibilidade e não diminuir sua importância.
- -

CSS e JavaScript são acessíveis?

- -

CSS e JavaScript não têm a mesma importância imediata que o HTML, mas eles continuam sendo capazes de ajudar ou causar danos à acessibilidade, dependendo de como são usados. Ou seja, é importante que você considere algumas das melhores práticas para assegurar que o seu uso de CSS e JavaScript não danifiquem a acessibilidade de seus documentos.

- -

CSS

- -

Vamos começar dando uma olhada no CSS.

- -

Semântica correta e expectativas do usuário

- -

É possível usar  CSS para fazer qualquer elemento HTML se parecer com qualquer coisa, mas isso não quer dizer que você deve. Como frequentemente mencionado no nosso artigo HTML: Uma boa base para acessibilidade, você deve utilizar a semântica apropriada do elemento para determinada tarefa, sempre que possível. Se não o fizer, isso poderá acarretar confusão e problemas de usabilidade para todos, particularmente para usuários portadores de deficiência. Utilizar uma semântica correta tem muito a ver com as expectativas do usuário — elementos se parecem e se comportam de certas maneiras, de acordo com suas funcionalidades, e essas convenções são esperadas pelos usuários.

- -

Por exemplo, um usuário utilizando um leitor de tela não consegue navegar por uma página através de elementos de heading se o desenvolvedor não tiver usado apropriadamente estes elementos para marcação do conteúdo. Da mesma forma, um heading perde o seu propósito visual se você estilizá-lo de maneira que ele não se pareça com um heading.

- -

A regra de ouro é que você pode atualizar o estilo de recurso de página para se adequar ao seu design, mas não o altere tanto ao ponto de não mais se parecer ou se comportar como o esperado. As sessões que se seguem resumem os principais recursos HTML a serem considerados.

- -

Estrututa "standard" de conteúdo textual

- -

Headings, parágrafos, listss — o núcleo do conteúdo textual da sua página:

- -
<h1>Heading</h1>
-
-<p>Parágrafo</p>
-
-<ul>
-  <li>Minha lista</li>
-  <li>tem dois itens.</li>
-</ul>
- -

Um código CSS típico pode se parecer com isso:

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

Você tem de:

- - - -

Veja HTML fundamentos de texto e Estilizando texto para maiores informações.

- -

Texto em negrito

- -

Elemento de marcação que confere ênfase específica ao texto envolvido por ele:

- -
<p>A água está <em>muito quente</em>.</p>
-
-<p>Gotículas de água em superfícies são chamadas de <strong>condensação</strong>.</p>
- -

Você pode querer adicionar alguma cor no seu texto em negrito:

- -
strong, em {
-  color: #a60000;
-}
- -

De qualquer forma, você raramente irá precisar de estilizar um elemento de ênfase. As convenções para texto em negrito e itálico são bastante reconhecidas e alterar seu estilo pode causar confusão. Para saber mais sobre elemento ênfase (negrito), veja Emphasis and importance.

- -

Abreviações

- -

É um elemento que permite abraviação, acrônimo ou inicialização que esteja associada com sua expansão:

- -
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

Novamente, você pode querer estilizá-lo de alguma forma:

- -
abbr {
-  color: #a60000;
-}
- -

A convenção de estilo que é reconhecida para abreviações é uma linha pontilhada, e não é recomendado estilizá-la. Para saber mais sobre abreviações, veja Abbreviations.

- - - -

Hyperlinks — the way you get to new places on the web:

- -
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
- -

Some very simple link styling is shown below:

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

The standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). In addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g. via tabbing) or activated. The following image shows the highlight in both Firefox (a dotted outline) and Chrome (a blue outline):

- -

- -

- -

You can be creative with link styles, as long as you keep giving users feedback when they interact with the links. Something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.

- -

Form elements

- -

Elements to allow users to input data into websites:

- -
<div>
-  <label for="name">Enter your name</label>
-  <input type="text" id="name" name="name">
-</div>
- -

You can see some good example CSS in our form-css.html example (see it live also).

- -

Most of the CSS you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy.

- -

You shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). You could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.

- -

Tables

- -

Tables for presenting tabular data.

- -

You can see a good, simple example of table HTML and CSS in our table-css.html example (see it live also).

- -

Table CSS generally serves to make the table fit better into your design and look less ugly. It is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse.

- -

Color and color contrast

- -

When choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content.

- -

There is an easy way to check whether your contrast is large enough to not cause problems. There are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them. For example WebAIM's Color Contrast Checker is simple to use, and provides an explanation of what you need to conform to the WCAG criteria around color contrast.

- -
-

Note: A high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.

-
- -

Another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. Instead of marking required form fields in red, for example, mark them with an asterisk and in red.

- -

Hiding things

- -

There are many instances where a visual design will require that not all content is shown at once. For example, in our Tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).

- -

- -

Screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. Absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it.

- -

On the other hand, you shouldn't use {{cssxref("visibility")}}:hidden or {{cssxref("display")}}:none, because they do hide content from screen readers. Unless of course, there is a good reason why you want this content to be hidden from screen readers.

- -
-

Note: Invisible Content Just for Screen Reader Users has a lot more useful detail surrounding this topic.

-
- -

Accept that users can override styles

- -

Accept that users can override your styles

- -

It is possible for users to override your styles with their own custom styles, for example:

- - - -

Users might do this for a variety of reasons. A visually impaired user might want to make the text bigger on all websites they visit, or a user with severe color deficiency might want to put all websites in high contrast colors that are easy for them to see. Whatever the need, you should be comfortable with this, and make your designs flexible enough so that such changes will work in your design. As an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll to allow it all to be seen), and won't just hide it, or break completely.

- -

JavaScript

- -

JavaScript can also break accessibility, depending on how it is used.

- -

Modern JavaScript is a powerful language, and we can do so much with it these days, from simple content and UI updates to fully-fledged 2D and 3D games. There is no rule that says all content has to be 100% accessible to all people — you just need to do what you can, and make your apps as accessible as possible.

- -

Simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions. As we looked at in our HTML: A good basis for accessibility article, the key considerations are:

- - - -

We also looked at an example of how to use JavaScript to build in functionality where it is missing — see Building keyboard accessibility back in. This is not ideal — really you should just use the right element for the right job — but it shows that it is possible in situations where for some reason you can't control the markup that is used. Another way to improve accessibility for non-semantic JavaScript-powered widgets is to use WAI-ARIA to provide extra semantics for screen reader users. The next article will also cover this in detail.

- -

Complex functionality like 3D games are not so easy to make accessible — a complex 3D game created using WebGL will be rendered on a {{htmlelement("canvas")}} element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of. It is arguable that such a game doesn't really have this group of people as a part of its main target audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.

- -

The problem with too much JavaScript

- -

The problem often comes when people rely on JavaScript too much. Sometimes you'll see a website where everything has been done with JavaScript — the HTML has been generated by JavaScript, the CSS has been generated by JavaScript, etc. This has all kinds of accessibility and other issues associated with it, so it is not advised.

- -

As well as using the right element for the right job, you should also make sure you are using the right technology for the right job! Think carefully about whether you need that shiny JavaScript-powered 3D information box, or whether plain old text would do. Think carefully about whether you need a complex non-standard form widget, or whether a text input would do. And don't generate all your HTML content using JavaScript if at all possible.

- -

Keeping it unobtrusive

- -

You should keep unobtrusive JavaScript in mind when creating your content. The idea of unobtrusive JavaScript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without JavaScript, although it is appreciated that this is not always an option. But again, a large part of it is using built-in browser functionality where possible.

- -

Good example uses of unobtrusive JavaScript include:

- - - -

As an example, we've written a quick and dirty client-side form validation example — see form-validation.html (also see the demo live). Here you'll see a simple form; when you try to submit the form with one or both fields left empty, the submit fails, and an error message box appears to tell you what is wrong.

- -

This kind of form validation is unobtrusive — you can still use the form absolutely fine without the JavaScript being available, and any sensible form implementation will have server-side validation active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning JavaScript off in the browser). The client-side validation is still really useful for reporting errors — users can know about mistakes they make instantly, rather than having to wait for a round trip to the server and a page reload. This is a definite usability advantage.

- -
-

Note: Server-side validation has not been implemented in this simple demo.

-
- -

We've made this form validation pretty accessible too. We've used {{htmlelement("label")}} elements to make sure the form labels are unambiguously linked to their inputs, so screen readers can read them out alongside:

- -
<label for="name">Enter your name:</label>
-<input type="text" name="name" id="name">
- -

We only do the validation when the form is submitted — this is so that we don't update the UI too often and potentially confuse screen reader (and possibly other) users:

- -
form.onsubmit = validate;
-
-function validate(e) {
-  errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
-    if(testItem.input.value === '') {
-      errorField.style.left = '360px';
-      createLink(testItem);
-    }
-  }
-
-  if(errorList.innerHTML !== '') {
-    e.preventDefault();
-  }
-}
- -
-

Note: In this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn't interfere with the screen reader being able to read content from it.

-
- -

Real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. not a minus number, or four digits). Here we've just implemented a simple check that a value has been filled in to each input field (if(testItem.input.value === '')).

- -

When the validation has been performed, if the tests pass then the form is submitted. If there are errors (if(errorList.innerHTML !== '')) then we stop the form submitting (using preventDefault()), and display any error messages that have been created (see below). This mechanism means that the errors will only be shown if there are errors, which is better for usability.

- -

For each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the errorList.

- -
function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
-  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
-  anchor.href = '#' + testItem.input.name;
-  anchor.onclick = function() {
-    testItem.input.focus();
-  };
-  listItem.appendChild(anchor);
-  errorList.appendChild(listItem);
-}
- -

Each link serves a dual purpose — it tells you what the error is, plus you can click on it/activate it to jump straight to the input element in question and correct your entry.

- -
-

Note: The focus() part of this example is a bit tricky. Chrome and Edge (and newer versions of IE) will focus the element when the link is clicked, without needing the onclick/focus() block. Safari will only highlight the form element with the link on its own, so needs the onclick/focus() block to actually focus it. Firefox doesn't focus the inputs properly at all in this context, so Firefox users can't take advantage of this at present (although everything else works fine). The Firefox issue should be fixed soon — work is being done to give Firefox behaviour parity with other browsers (see {{bug(277178)}}).

-
- -

In addition, the errorField is placed at the top of the source order (although it is positioned differently in the UI using CSS), meaning that users can find out exactly what's wrong with their form submissions and get to the input elements in question by going back up to the start of the page.

- -

As a final note, we have used some WAI-ARIA attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't pick this up or alert users to it by default):

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

We will explain these attributes in our next article, which covers WAI-ARIA in much more detail.

- -
-

Note: Some of you will probably be thinking about that fact that HTML5 forms have built-in validation mechanisms like the required, min/minlength, and max/maxlength attributes (see the {{htmlelement("input")}} element reference for more information). We didn't end up using these in the demo because cross-browser support for them is patchy (for example IE10 and above only).

-
- -
-

Note: WebAIM's Usable and Accessible Form Validation and Error Recovery provides some further useful information about accessible form validation.

-
- -

Other JavaScript accessibility concerns

- -

There are other things to be aware of when implementing JavaScript and thinking about accessibility. We will add more as we find them.

- -

mouse-specific events

- -

As you will be aware, most user interactions are implemented in client-side JavaScript using event handlers, which allow us to run functions in response to certain events happening. Some events can have accessibility issues. The main example you'll come across is mouse-specific events like mouseover, mouseout, dblclick, etc. Functionality that runs in response to these events will not be accessible using other mechanisms, like keyboard controls.

- -

To mitigate such problems, you should double up these events with similar events that can be activated by other means (so-called device-independent event handlers) — focus and blur would provide accessibility for keyboard users.

- -

Let's look at an example that highlights when this could be useful. Maybe we want to provide a thumbnail image that shows a larger version of the image when it is moused over or focused (like you'd see on an e-commerce product catalog.)

- -

We've made a very simple example, which you can find at mouse-and-keyboard-events.html (see also the source code). The code features two functions that show and hide the zoomed-in image; these are run by the following lines that set them as event handlers:

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

The first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively. This won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops). This can be done by tabbing over the image, because we've included tabindex="0" on it.

- -

The click event is interesting — it sounds mouse-dependent, but most browsers will activate onclick event handlers after Enter/Return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. This doesn't work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see Building keyboard accessibility back in).

- -

Summary

- -

We hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding CSS and JavaScript use on web pages.

- -

Next up, WAI-ARIA!

- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -
-

In this module

- - -
diff --git a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html b/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html deleted file mode 100644 index 6bc88ac21f..0000000000 --- a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Como a Internet funciona? -slug: Learn/Common_questions/Como_a_internet_funciona -tags: - - Iniciante - - Mecanismos Web - - Tutorial - - Web -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

Este artigo discute sobre o que é e como funciona a internet.

-
- - - - - - - - - - - - -
Pré-requisitos:Nenhum, mas encorajamos a ler primeiro Pensando antes de codificar
Objetivo:Você irá aprender o básico da infraestrutura técnica da Web e a diferença entre Internet e Web.
- -

Resumo

- -

A Internet é a espinha dorsal da Web, a infraestrutura técnica que faz a Web possível. Mas basicamente, a Internet é uma gigantesca rede de computadores que se comunicam juntos.

- -

A história da internet é um pouco obscura. Ela começou nos anos 60 como um projeto de pesquisa consolidado pelo exército norte americano, e tornou-se uma infraestrutura pública nos anos 80 com o suporte dado por diversas universidades públicas e companias privadas. As várias tecnologias que suportam a internet se acoplaram através do tempo, mas a forma de funcionamento não mudou muito: Internet é uma forma de conectar computadores e garantir, em qualquer situação, que eles encontrem uma forma de se manter conectados.

- -

Aprendizado ativo

- - - -

Mergulho profundo

- -

Uma rede simples

- -

Quando dois computadores precisam se comunicar, você precisa conectá-los, seja fisicamente (normalmente com um Cabo de rede) ou de uma forma sem fio (por exemplo com sistemas WiFi ou Bluetooth). Todos os computadores modernos suportam alguma(s) dessas conexões.

- -
-

Nota: Até o final deste artigo nós estaremos falando apenas a respeito de cabos físicos, mas redes sem fio funcionam da mesma forma

-
- -

Two computers linked together

- -

Uma rede não é limitada a dois computadores. Você pode conectar quantos computadores desejar. Mas isto se torna complicado. Se você está tentando conectar, digamos, dez computadores você irá precisar de 45 cabos, com 9 conexões por computador.

- - - -

Ten computers all together

- -

Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de roteador. Este roteador tem um único trabalho: como um sinalizador em uma estação de trem, ter certeza de que a mensagem enviada por um determinado computador chege ao computador destinatário corretamente. Para enviar uma mensagem para o computador B, o computador A deve enviar a mensagem para o roteador, que por sua vez encaminha a mensagem para o computador B e tem a certeza de que a mensagem não foi entregue ao computador C.

- -

Uma vez que nós adicionamos um roteador no sistema, nossa rede de 10 computadores apenas necessitará de 10 cabos: uma unica conexão para cada computador e um roteador com 10 conexões.

- -

Ten computers with a router

- -

Uma rede de redes

- -

Por enquanto, tudo bem. Mas como conectar centenas, milhares, bilhões de computadores? Claro que um unico roteador não pode se adaptar para tanto, mas, se você ler com cuidado, nós dissemos que um roteador é um computador como qualquer outro, então o que nos impede de conectar dois roteadores juntos? Nada, então façamos isto.

- -

Two routers linked together

- -

Conectando computadores a roteadores, e então roteadores a roteadores, nós podemos escalar nossa rede infinitamente.

- -

Routers linked to routers

- -

Esta rede é muito parecida com o que chamamos de Internet, mas alguma coisa está faltando. Nós contruímos tais redes para nossos próprios fins. Existem outras redes além das nossas ligadas em outros lugares: nossos amigos, vizinhos, qualquer pessoa que tenha uma rede de computadores. Mas é inviável ligarmos cabos entre nossas casas e o resto do mundo, então como nos podemos lidar com isso? Muito bem, já existem cabos ligados a sua casa, como por exemplo, cabos de eletricidade e telefone. A estrutura do telefone já conecta nossa casa com o resto do mundo. Para conectar nossa rede a rede telefonica, precisamos de um equipamento especial chamado modem. Este modem transforma a informação da nossa rede em uma informação gerenciavel pela rede telefonica e vice-versa.

- -

A router linked to a modem

- -

Então nós estamos conectados à infraestrutuca telefônica. O próximo passo é enviar mensagens da nossa rede para a rede que nós desejamos alcançar. Para fazer isto, vamos precisar conectar nossa rede a um Provedor de Serviço de Internet (ISP, em inglês). Um ISP é uma compania que gerencia alguns roteadores especiais que são conectados e pode também acessar roteadores de outros ISPs. Então a mensagem da nossa rede é transportada para a rede de redes do ISP e então para a rede de destino. A Internet é composta por toda esta infraestrutura de redes.

- -

Full Internet stack

- -

Encontrando computadores

- -

Se você quer enviar uma mensagem para um computador, você precisa especificar qual é este computador. Por isso, qualquer computador conectado à uma rede possui um único endereço de identificação, chamado de "Endereço IP" (onde IP, do inglês Internet Protocol, significa Protocolo de Internet). Este é um endereço composto por uma série de 4 números separados por pontos, por exemplo: 192.168.2.10.

- -

Isto é perfeito para computadores, mas nós seres humanos temos dificuldades para lembrar estes endereços. Para tornar as coisas mais fáceis, nós podemos dar apelidos aos endereços IP que nós humanos podemos compreender, chamados nome de domínio. Por exemplo, google.com é um nome de domínio usado para "apelidar" o endereço 173.194.121.32. Então, usando o nome de domínio é uma forma mais simples de encontrar um computador na Internet.

- -

Show how a domain name can alias an IP address

- -

A Internet e a Web

- -

Como você deve ter notado, quando navegamos na Web com nossos navegadores, normalmente utilizamos os nomes de domínios para chegar a um website. Isto significa que a Internet e a Web são a mesma coisa? Não tão simples assim. Como vimos, a Internet é uma infraestrutura técnica que permite conectar bilhões de computadores. Entre estes computadores, alguns computadores (chamados de servidores Web) podem enviar mensagens intelegíveis para navegadores Web. A Internet é a infraestrutura, enquanto a Web é um serviço construído sob esta infraestrutura. Vale a pena notar que existem diversos outros serviços que funcionam na Internet, tais como email e {{Glossary("IRC")}}.

- -

Noções básicas sobre nomes de domínio

- -

Próximos passos

- - diff --git a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html b/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html deleted file mode 100644 index 83b4f50a41..0000000000 --- a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Como configurar um servidor de testes local -slug: Learn/Common_questions/Como_configurar_um_servidor_de_testes_local -tags: - - Aprender - - Express - - Flask - - Iniciante - - Node - - PHP - - Python - - django - - lamp - - servidores -translation_of: Learn/Common_questions/set_up_a_local_testing_server ---- -
-

Este artigo explica como configurar um simples servidor de testes local em seu computador e o básico para utiliza-lo.

-
- - - - - - - - - - - - -
Pré-requisitos: -

Primeiro você precisa saber como a internet funciona e o que é um servidor Web.

-
Objetivo:Você vai aprender como configurar um servidor de testes local.
- -

Arquivos locais vs. arquivos remotos

- -

Ao longo da maior parte da área de aprendizagem, nós lhe dissemos apenas para abrir seus exemplos diretamente no navegador  —  Isto pode ser feito atráves de um duplo clique no arquivo HTML, arrastando e soltando o arquivo na janela do navegador ou escolhendo Arquivo > Abrir... e navegando para o arquivo HTML. Existem muitas maneiras de realizar isso.

- -

Se o caminho do endereço web começa com file:// seguido pelo caminho para o arquivo no seu disco rígido local, um arquivo local está sendo utilizado. No entanto, se você ver um dos nossos exemplos hospedado no GitHub (ou um exemplo em algum outro servidor remoto), o enderço web começará com http:// ou https://, para mostrar que o arquivo foi recebido via HTTP.

- -

O problema com o teste de arquivos locais

- -

Alguns exemplos não serão executados se você os abrir como arquivos locais. Isto pode ser devido a uma série de razões, sendo o mais provável:

- - - -

Executando um servidor HTTP local simples

- -

Para contornar o problema de requisições assíncronas, precisamos testar esses exemplos executando-os através de um servidor web local. Uma das maneiras mais fáceis de fazer isso para nossos propósitos é usar o módulo SimpleHTTPServer do Python.

- -

Para fazer isso:

- -
    -
  1. -

    Instale o Python. Se você estiver usando Linux ou macOS, ele já deverá estár disponível em seu sistema. Se você é um usuário do Windows, pode obter um instalador na página inicial do Python e seguir as instruções para instalá-lo:

    - -
      -
    • Vá para python.org (em inglês)
      • -
    • Na seção Download, clique no link para Python "3.xxx".
      • -
    • Na parte inferior da página, escolha o instalador executável do Windows x86 e baixe-o.
      • -
    • Quando tiver baixado, execute-o.
      • -
    • Na primeira página do instalador, certifique-se de marcar a caixa de seleção "Adicionar Python 3.xxx ao PATH".
      • -
    • Clique em Instalar e então, clique em Fechar quando a instalação terminar.
      • -
    -
    2. -
  2. -

    Abra seu prompt de comando (Windows)/ terminal (macOS/ Linux). Para verificar se o Python está instalado, digite o seguinte comando:

    - - 
    python -V
    -
    3. -
  3. -

    Isso deve retornar um número de versão. Se estiver tudo OK, navegue até o diretório em que seu exemplo está dentro, usando o comando cd.

    - - 
    # incluir o nome do diretório para entrar, por exemplo
-cd Desktop
-# use dois pontos para voltar um nível de diretório se você precisar
-cd ..
    -
    4. -
  4. -

    Digite o comando para inicializar o servidor nesse diretório:

    - - 
    # Se a versão do Python retornada acima for 3.X
-python3 -m http.server
-# No windows, tente "python" em vez de "python3"
-# Se a versão do Python retornada acima for 2.X
-python -m SimpleHTTPServer
    -
    5. -
  5. -

    Por padrão, isso executará o conteúdo do diretório em um servidor web local, na porta 8000. Você pode ir para esse servidor acessando a URL localhost:8000 no seu navegador web. Aqui você verá o conteúdo do diretório listado — clique no arquivo HTML que você deseja executar.

    -
    6. -
- -
-

Nota: Se você já tiver algo em execução na porta 8000, você poderá escolher outra porta executando o comando do servidor seguido por um número de porta alternativo, por exemplo python3 -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Você pode acessar seu conteúdo em localhost:7800.

-
- -

Executando linguagens do lado do servidor localmente

- -

Os módulos SimpleHTTPServer (python 2.0) e http.server (python 3.0) do Python são úteis, mas não sabem como executar código escrito em linguagens como Python, PHP ou JavaScript. Para lidar com isso, você precisará de algo mais — exatamente o que você precisa depende da linguagem do lado do servidor que você está tentando executar. Aqui estão alguns exemplos:

- - - -
$ cd path/to/your/php/code
-$ php -S localhost:8000
diff --git a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html b/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html deleted file mode 100644 index 762169926c..0000000000 --- a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Como você hospeda seu site no Google App Engine? -slug: Learn/Common_questions/Como_voce_hospeda_seu_site_Google_App_Engine -translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine ---- -

Google App Engine é uma plataforma poderosa que lhe permite construir e rodar aplicações na infraestrutura do Google —  se você precisa criar um aplicativo da web de várias camadas do zero ou hospedar um site estático. Aqui está um guia passo a passo para hospedar seu site no Google App Engine.

- -

Criando um projeto na plataforma do Google Cloud

- -

Para usar as ferramentas do Google em seu próprio site ou aplicativo, você precisa criar um novo projeto no Google Cloud Platform. Isso requer ter uma conta do Google.

- -
    -
  1. Vá para o App Engine dashboard no Google Cloud Platform e apert o botão Create (Criar).
    2. -
  2. Se você não criou um projeto antes, precisará selecionar se deseja receber atualizações por email ou não, concordar com os Termos de Serviço e, em seguida, poderá continuar.
    3. -
  3. Digite um nome para o projeto, edite a ID do seu projeto e anote-a. Para este tutorial, os seguintes valores são usados -
      -
    • Nome do projeto: GAE Sample Site
      • -
    • ID do Projeto: gaesamplesite
      • -
    -
    4. -
  4. Clique no botão Create para criar o seu projeto.
    5. -
- -

Criando uma aplicação

- -

Cada projeto do Cloud Platform pode conter um aplicativo do App Engine. Vamos preparar um aplicativo para o nosso projeto.

- -
    -
  1. Precisamos de um aplicativo de amostra para publicar. Se você não tiver um para usar, faça o download e descompacte este aplicativo de exemplo.
    2. -
  2.  Dê uma olhada na estrutura da aplicação padrão — A pasta website contem o conteúdo do seu website e app.yaml é o seu arquivo de configuração da aplicação. -
      -
    • O conteúdo do seu website deve ser posto dentro da pasta website, e sua página de destino deve ser denominada  index.html, mas fora isso ela pode conter qualquer coisa que você desejar.
      • -
    • O arquivo app.yaml é um arquivo de configuração que fala ao App Engine como mapear URLs para os seus arquivos estáticos. Você não precisa editá-lo.
      • -
    -
    3. -
- -

Puplicando sua aplicação

- -

Agora que nós temos o nosso projeto pronto e arquivos padrões de aplicativo colocados juntos, vamos publicar nosso app.

- -
    -
  1. Abra o Google Cloud Shell.
    2. -
  2. Arraste e solte a pasta sample-app dentro do painel esquerdo do editor de código.
    3. -
  3. Rode a seguinte linha de comando dentro para selecionar seu projeto: - 
    gcloud config set project gaesamplesite
    -
    4. -
  4. Logo após rode o seguinte comando para ir ao diretório do seu app: - 
    cd sample-app
    -
    5. -
  5. Você agora está pronto para armazenar sua aplicação, i.e. fazer o upload para o App Engine: - 
    gcloud app deploy
    -
    6. -
  6. Digite um número para escolher a região onde você quer que sua aplicação se localize.
    7. -
  7. Digite Y para confirmar.
    8. -
  8. Agora navegue no seu navegador para your-project-id.appspot.com to para ver seu website online. Por exemplo, para a ID do projeto gaesamplesite, vá para gaesamplesite.appspot.com.
    9. -
- -

Veja também

- -

Para aprender mais, veja Google App Engine Documentation.

diff --git a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html b/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html deleted file mode 100644 index 80df8f9ddf..0000000000 --- a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: O que são as ferramentas de desenvolvimento do navegador -slug: Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador -translation_of: Learn/Common_questions/What_are_browser_developer_tools ---- -
{{IncludeSubnav("/en-US/Learn")}}
- -
-

Todo navegador web moderno inclui um poderoso conjunto de ferramentas para desenvolvedores. Essas ferramentas fazem muitas coisas, desde inspecionar o HTML, CSS e JavaScript recém carregado e quais recursos foram requeridos até mostrar quanto tempo a página precisou para carregar. Este artigo explica como usar as funções básicas das ferramentas para desenvolvedores do seu navegador.

-
- -
-

Nota: Antes de você executar os exemplos abaixo, abra o Beginner's example site (site de exemplos do iniciante) que nós criamos durante o início da série de artigos da Web ( Getting started with the Web ). Você poderá abrir isso enquanto segue os passos abaixo.

-
- -

Como abrir o devtools no seu navegador

- -

O devtools está inserido no navegador em uma janela semelhante a esta:

- -

- -

Como você acessa? Três modos:

- - - -

- -

O Inspetor: DOM explorer e editor CSS

- -

O devtools usualmente abre por padrão o inspetor, que se parece com a  imagem abaixo. Esta ferramenta permite que você veja o resultado do  HTML  num site em execução, bem como o CSS aplicado en cada elemento na página.  Ele também lhe mostra as mudanças efetuadas no HTML e CSS e os resultados são produzidos imediatamente, ao vivo, na janela do navegador.

- -

- -

Se você não vê o inspector,

- - - -

Explore o inspector DOM

- -

Para começar tente pressionar o botão direito do mouse sobre um elemento HTML no inspetor do DOM e olhe para o menu de contexto. As opções do menu variam nos navegadores, mas os mais importantes são os mesmos.

- -

- - - -

Tente editar alguns dos seus DOM agora. Clique duas vezes em um elemento ou clique com o botão direito do mouse e escolha Editar como HTML no menu de contexto. Você pode fazer alterações que quiser, mas não pode salvar suas alterações.

- -

Explorando o editor de CSS

- -

Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:

- -

- -

Esses recursos são especialmente úteis:

- - - -

Você notará várias guias clicáveis na parte superior do Visualizador de CSS:

- - - -

Descubra mais

- -

Descubra mais sobre o Inspetor em diferentes navegadores:

- - - -

O depurador JavaScript

- -

O depurador Javascript permite a visualização dos conteúdos das variáveis e a configuração dos pontos de paradas(breakpoints) no código. Breakpoints  são marcadores de linha para analisar a execução do código. A identificação previne problemas.

- -

- -

Para acessar o (debugger)depurador:

- -

Firefox: Clique ➤ Web Developer ➤ Debugger ou pelo atalho Ctrl + Shift + S para abrir o Debugger Javascript.  Se a ferramenta já estiver vísivel, clique na aba Debugger.

- -

Chrome: Abra as ferramentas de desenvolvimento e selecione a aba Fontes(Sources). (Opera funciona igualmente).

- -

Edge e Internet Explorer 11: Aperte F12 então, Ctrl + 3, ou se a ferramenta já estiver visível, clique na aba Debugger(depurador).

- -

Safari: Abra  as ferramentas de desenvolvedor e então selecione a aba Debugger(depurador).

- -

Explorando o depurador

- -

Há três painéis no Depurador(debugger) no Firefox

- -

Lista de Arquivos

- -

O primeiro painel na parte esquerda contém uma lista de arquivos associado com a página que está sendo depurada(debugging). Selecione o arquivo da seleção. Clique no arquivo para selecionar e visualizar os conteúdos no painel central do Debugger.

- -

- -

Código fonte

- -

Insira os pontos de parada (breakpoints) onde deseja que a execução pare. Na imagem abaixo, a linha selecionada é a 18 na qual tem um ponto de parada (breakpoint).

- -

- -

Veja as expressões e pontos de paradas

- -

À direita do painel é exibida uma lista de expressões e pontos de paradas adicionadas.

- -

Na imagem, na primeira seção,  Watch expressions, mostra a lista de itens e variáveis que foram adicionadas.  Expanda a lista para visualizar os valores no vetor. 

- -

Na próxima seção, Pontos de paradas, lista os pontos de paradas na página. No arquivo  example.js, um breakpoint foi adicionado listItems.push(inputNewItem.value);

- -

As duas seções finais aparecem somente quando o código está executando.

- -

A seção Call stack (chamada na pilha) mostra que o código foi executado para a linha atual. A função manuseia o clique do mouse e o código está pausado no ponto de parada (breakpoint).

- -

A seção final, Scopes(escopos), mostra os valores visíveis em vários pontos no código. Por exemplo, na imagem abaixo, os objetos disponíveis estão na função addItemClick.

- -

- -

O console JavaScript

- -

O console JavaScript é uma ferramenta incrivelmente útil para depurar códigos  em JavaScript que não está funcionando como o esperado. Ele permite que você execute linhas de JavaScript enquanto a página é carregada no navegador e relata os erros encontrados enquanto o navegador tenta executar o código.

- -

Para acessar o console basta abrir ferramentas de desenvolvimentos e escolher a aba Console.

- -

No Firefox o atalho é ctrl + shift+ k ou no menu comando:   ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console.

- -

Aparecerá uma janela como a seguinte:

- -

- -

Para ver o que acontece, tente inserir os seguintes trechos de código no console, um por um (e, em seguida, pressione Enter):

- -
    -
  1. - 
    alert('hello!');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var myImage = document.createElement('img');
-myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
-document.querySelector('h1').appendChild(myImage);
    -
    4. -
- -

Agora, tente inserir as seguintes versões incorretas do código e veja o que você obtém.

- -
    -
  1. - 
    alert('hello!);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var myImage = document.createElement('img');
-myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
-document.querySelector('h1').appendChild(myImage);
    -
    4. -
- -

Você começará a ver o tipo de erro que o navegador retorna. Muitas vezes, esses erros são bastante críticos, mas deve ser bem simples descobrir esses problemas!

- -

Descubra mais

- -

Descubra mais sobre o console JavaScript em diferentes navegadores:

- - - -

Veja também

- - diff --git a/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html new file mode 100644 index 0000000000..762169926c --- /dev/null +++ b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html @@ -0,0 +1,61 @@ +--- +title: Como você hospeda seu site no Google App Engine? +slug: Learn/Common_questions/Como_voce_hospeda_seu_site_Google_App_Engine +translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine +--- +

Google App Engine é uma plataforma poderosa que lhe permite construir e rodar aplicações na infraestrutura do Google —  se você precisa criar um aplicativo da web de várias camadas do zero ou hospedar um site estático. Aqui está um guia passo a passo para hospedar seu site no Google App Engine.

+ +

Criando um projeto na plataforma do Google Cloud

+ +

Para usar as ferramentas do Google em seu próprio site ou aplicativo, você precisa criar um novo projeto no Google Cloud Platform. Isso requer ter uma conta do Google.

+ +
    +
  1. Vá para o App Engine dashboard no Google Cloud Platform e apert o botão Create (Criar).
    2. +
  2. Se você não criou um projeto antes, precisará selecionar se deseja receber atualizações por email ou não, concordar com os Termos de Serviço e, em seguida, poderá continuar.
    3. +
  3. Digite um nome para o projeto, edite a ID do seu projeto e anote-a. Para este tutorial, os seguintes valores são usados +
      +
    • Nome do projeto: GAE Sample Site
      • +
    • ID do Projeto: gaesamplesite
      • +
    +
    4. +
  4. Clique no botão Create para criar o seu projeto.
    5. +
+ +

Criando uma aplicação

+ +

Cada projeto do Cloud Platform pode conter um aplicativo do App Engine. Vamos preparar um aplicativo para o nosso projeto.

+ +
    +
  1. Precisamos de um aplicativo de amostra para publicar. Se você não tiver um para usar, faça o download e descompacte este aplicativo de exemplo.
    2. +
  2.  Dê uma olhada na estrutura da aplicação padrão — A pasta website contem o conteúdo do seu website e app.yaml é o seu arquivo de configuração da aplicação. +
      +
    • O conteúdo do seu website deve ser posto dentro da pasta website, e sua página de destino deve ser denominada  index.html, mas fora isso ela pode conter qualquer coisa que você desejar.
      • +
    • O arquivo app.yaml é um arquivo de configuração que fala ao App Engine como mapear URLs para os seus arquivos estáticos. Você não precisa editá-lo.
      • +
    +
    3. +
+ +

Puplicando sua aplicação

+ +

Agora que nós temos o nosso projeto pronto e arquivos padrões de aplicativo colocados juntos, vamos publicar nosso app.

+ +
    +
  1. Abra o Google Cloud Shell.
    2. +
  2. Arraste e solte a pasta sample-app dentro do painel esquerdo do editor de código.
    3. +
  3. Rode a seguinte linha de comando dentro para selecionar seu projeto: + 
    gcloud config set project gaesamplesite
    +
    4. +
  4. Logo após rode o seguinte comando para ir ao diretório do seu app: + 
    cd sample-app
    +
    5. +
  5. Você agora está pronto para armazenar sua aplicação, i.e. fazer o upload para o App Engine: + 
    gcloud app deploy
    +
    6. +
  6. Digite um número para escolher a região onde você quer que sua aplicação se localize.
    7. +
  7. Digite Y para confirmar.
    8. +
  8. Agora navegue no seu navegador para your-project-id.appspot.com to para ver seu website online. Por exemplo, para a ID do projeto gaesamplesite, vá para gaesamplesite.appspot.com.
    9. +
+ +

Veja também

+ +

Para aprender mais, veja Google App Engine Documentation.

diff --git a/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..6bc88ac21f --- /dev/null +++ b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,102 @@ +--- +title: Como a Internet funciona? +slug: Learn/Common_questions/Como_a_internet_funciona +tags: + - Iniciante + - Mecanismos Web + - Tutorial + - Web +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Este artigo discute sobre o que é e como funciona a internet.

+
+ + + + + + + + + + + + +
Pré-requisitos:Nenhum, mas encorajamos a ler primeiro Pensando antes de codificar
Objetivo:Você irá aprender o básico da infraestrutura técnica da Web e a diferença entre Internet e Web.
+ +

Resumo

+ +

A Internet é a espinha dorsal da Web, a infraestrutura técnica que faz a Web possível. Mas basicamente, a Internet é uma gigantesca rede de computadores que se comunicam juntos.

+ +

A história da internet é um pouco obscura. Ela começou nos anos 60 como um projeto de pesquisa consolidado pelo exército norte americano, e tornou-se uma infraestrutura pública nos anos 80 com o suporte dado por diversas universidades públicas e companias privadas. As várias tecnologias que suportam a internet se acoplaram através do tempo, mas a forma de funcionamento não mudou muito: Internet é uma forma de conectar computadores e garantir, em qualquer situação, que eles encontrem uma forma de se manter conectados.

+ +

Aprendizado ativo

+ + + +

Mergulho profundo

+ +

Uma rede simples

+ +

Quando dois computadores precisam se comunicar, você precisa conectá-los, seja fisicamente (normalmente com um Cabo de rede) ou de uma forma sem fio (por exemplo com sistemas WiFi ou Bluetooth). Todos os computadores modernos suportam alguma(s) dessas conexões.

+ +
+

Nota: Até o final deste artigo nós estaremos falando apenas a respeito de cabos físicos, mas redes sem fio funcionam da mesma forma

+
+ +

Two computers linked together

+ +

Uma rede não é limitada a dois computadores. Você pode conectar quantos computadores desejar. Mas isto se torna complicado. Se você está tentando conectar, digamos, dez computadores você irá precisar de 45 cabos, com 9 conexões por computador.

+ + + +

Ten computers all together

+ +

Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de roteador. Este roteador tem um único trabalho: como um sinalizador em uma estação de trem, ter certeza de que a mensagem enviada por um determinado computador chege ao computador destinatário corretamente. Para enviar uma mensagem para o computador B, o computador A deve enviar a mensagem para o roteador, que por sua vez encaminha a mensagem para o computador B e tem a certeza de que a mensagem não foi entregue ao computador C.

+ +

Uma vez que nós adicionamos um roteador no sistema, nossa rede de 10 computadores apenas necessitará de 10 cabos: uma unica conexão para cada computador e um roteador com 10 conexões.

+ +

Ten computers with a router

+ +

Uma rede de redes

+ +

Por enquanto, tudo bem. Mas como conectar centenas, milhares, bilhões de computadores? Claro que um unico roteador não pode se adaptar para tanto, mas, se você ler com cuidado, nós dissemos que um roteador é um computador como qualquer outro, então o que nos impede de conectar dois roteadores juntos? Nada, então façamos isto.

+ +

Two routers linked together

+ +

Conectando computadores a roteadores, e então roteadores a roteadores, nós podemos escalar nossa rede infinitamente.

+ +

Routers linked to routers

+ +

Esta rede é muito parecida com o que chamamos de Internet, mas alguma coisa está faltando. Nós contruímos tais redes para nossos próprios fins. Existem outras redes além das nossas ligadas em outros lugares: nossos amigos, vizinhos, qualquer pessoa que tenha uma rede de computadores. Mas é inviável ligarmos cabos entre nossas casas e o resto do mundo, então como nos podemos lidar com isso? Muito bem, já existem cabos ligados a sua casa, como por exemplo, cabos de eletricidade e telefone. A estrutura do telefone já conecta nossa casa com o resto do mundo. Para conectar nossa rede a rede telefonica, precisamos de um equipamento especial chamado modem. Este modem transforma a informação da nossa rede em uma informação gerenciavel pela rede telefonica e vice-versa.

+ +

A router linked to a modem

+ +

Então nós estamos conectados à infraestrutuca telefônica. O próximo passo é enviar mensagens da nossa rede para a rede que nós desejamos alcançar. Para fazer isto, vamos precisar conectar nossa rede a um Provedor de Serviço de Internet (ISP, em inglês). Um ISP é uma compania que gerencia alguns roteadores especiais que são conectados e pode também acessar roteadores de outros ISPs. Então a mensagem da nossa rede é transportada para a rede de redes do ISP e então para a rede de destino. A Internet é composta por toda esta infraestrutura de redes.

+ +

Full Internet stack

+ +

Encontrando computadores

+ +

Se você quer enviar uma mensagem para um computador, você precisa especificar qual é este computador. Por isso, qualquer computador conectado à uma rede possui um único endereço de identificação, chamado de "Endereço IP" (onde IP, do inglês Internet Protocol, significa Protocolo de Internet). Este é um endereço composto por uma série de 4 números separados por pontos, por exemplo: 192.168.2.10.

+ +

Isto é perfeito para computadores, mas nós seres humanos temos dificuldades para lembrar estes endereços. Para tornar as coisas mais fáceis, nós podemos dar apelidos aos endereços IP que nós humanos podemos compreender, chamados nome de domínio. Por exemplo, google.com é um nome de domínio usado para "apelidar" o endereço 173.194.121.32. Então, usando o nome de domínio é uma forma mais simples de encontrar um computador na Internet.

+ +

Show how a domain name can alias an IP address

+ +

A Internet e a Web

+ +

Como você deve ter notado, quando navegamos na Web com nossos navegadores, normalmente utilizamos os nomes de domínios para chegar a um website. Isto significa que a Internet e a Web são a mesma coisa? Não tão simples assim. Como vimos, a Internet é uma infraestrutura técnica que permite conectar bilhões de computadores. Entre estes computadores, alguns computadores (chamados de servidores Web) podem enviar mensagens intelegíveis para navegadores Web. A Internet é a infraestrutura, enquanto a Web é um serviço construído sob esta infraestrutura. Vale a pena notar que existem diversos outros serviços que funcionam na Internet, tais como email e {{Glossary("IRC")}}.

+ +

Noções básicas sobre nomes de domínio

+ +

Próximos passos

+ + diff --git a/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html b/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..7c92c2fb03 --- /dev/null +++ b/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,155 @@ +--- +title: Quanto custa fazer algo na Web? +slug: Learn/Common_questions/Quanto_custa_fazer_algo_web +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +
+

Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.

+
+ + + + + + + + + + + + +
Pré-requisitos:You should already understand what software you need, the difference between a webpage, a website, etc., and what a domain name is.
Objetivo:Review the complete process for creating a website and find out how much each step can cost.
+ +

Sumário

+ +

When launching a website, you may spend nothing, or your costs may go through the roof. In this article we discuss how much everything costs, and how you get what you pay (or don't pay).

+ +

Software

+ +

Editores de texto

+ +

You likely have a text editor: such as, Notepad on Windows, Gedit on Linux, TextEdit on Mac. You'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure.

+ +

Many editors are free, for example Atom, Brackets, Bluefish, TextWrangler, Eclipse, Netbeans, and Visual Studio Code. Some, like Sublime Text, you can test as long as you like, but you're encouraged to pay. Some, like PhpStorm, can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like Microsoft Visual Studio, can cost hundreds, or thousands of dollars; though Visual Studio Express is free for individual developers or open source projects. Often, for-pay editors will have a trial version.

+ +

To start, we suggest trying out several editors, to get a sense of which works best for you. If you're only writing simple {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, go with a simple editor.

+ +

Price does not reliably reflect a text editor's quality or usefulness. You have to try it for yourself and decide if it meets your needs. For example, Sublime Text is cheap, but comes with many free plugins that can greatly extend its functionality.

+ +

Image editors

+ +

Your system likely includes a simple image editor, or viewer: Paint on Windows, Eye of Gnome on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping.

+ +

Editors can be free (GIMP, Paint.NET), moderately expensive (PaintShop Pro, less than $100), or several hundred dollars (Adobe Photoshop).

+ +

You can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. If at some point you need to exchange projects with other designers, you should find out what tools they're using. Editors can all export finished projects to standard file formats, but each editor saves ongoing projects in its own specialized format. Most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. Sites like Pixabay provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use.

+ +

Media editors

+ +

If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).

+ +

For audio files, you can find free software (Audacity, Wavosaur), or paying up to a few hundred dollars (Sony Sound Forge, Adobe Audition). Likewise, video-editing software can be free (PiTiVi, OpenShot for Linux, iMovie for Mac), less than $100 (Adobe Premiere Elements), or several hundred dollars (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). The software you received with your digital camera may cover all your needs.

+ +

Publishing tools

+ +

You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)FTP client, RSync, or Git/GitHub.

+ +

Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.

+ +

If you want to install an (S)FTP client, there are several reliable and free options: for example, FileZilla for all platforms, WinSCP for Windows, Cyberduck for Mac or Windows, and more.

+ +

Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.

+ +

Browsers

+ +

You either already have a browser or can get one for free. If necessary, download Firefox here or Google Chrome here.

+ +

Web access

+ +

Computer / modem

+ +

You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.

+ +

Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.

+ +

You need to upload content to a remote server (see Hosting below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.

+ +

ISP access

+ +

Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:

+ + + +

Hosting

+ +

Understanding bandwidth

+ +

Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.

+ +
+

Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.

+
+ +

Domain names

+ +

Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (1&1, Gandi for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:

+ + + +

Do-it-yourself hosting vs. “packaged” hosting

+ +

When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like Wordpress, Dotclear, spip, etc.), upload pre-made or your own templates.

+ +

You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., Wordpress, Tumblr, Blogger). For the latter, you won't have to pay anything, but you may have less control over templating and other options.

+ +

Free hosting vs. paid hosting

+ +

You might ask, why should I pay for my hosting when there are so many free services?

+ + + +

It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is guaranteed by most paid sites. Most hosting providers give you a huge discount to start with.

+ +

Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.

+ +

Professional website agencies and hosting

+ +

If you desire a professional website, you will likely ask a web agency to do it for you.
+
+ Here, costs depend on multiple factors, such as:

+ + + +

...and for hosting:

+ + + +

Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.

+ +

Next steps

+ +

Now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment.

+ + diff --git a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html b/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html deleted file mode 100644 index f963103480..0000000000 --- a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: O que é um servidor web (web server)? -slug: Learn/Common_questions/o_que_e_um_web_server -tags: - - HTTP - - Infraestrutura - - Iniciante - - servidor web -translation_of: Learn/Common_questions/What_is_a_web_server ---- -
-

Neste artigo vamos revisar o que são web servers, como eles funcionam, e por que eles são importantes.

-
- - - - - - - - - - - - -
Pré-requisitos:Você deve saber como a Internet funciona e entender a diferença entre uma página web, um site, um servidor web e um mecanismo de busca.
Objetivo:Você irá aprender o que é um servidor web e compreender de modo geral como ele funciona.
- -

Sumário

- -

"Servidor web (web server)" pode referir ao hardware ou ao software, ou ambos trabalhando juntos.

- -
    -
  1. Referente ao hardware, um servidor web é um computador que armazena arquivos que compõem os sites (por exemplo, documentos HTML, imagens, folhas de estilo, e arquivos JavaScript) e os entrega para o dispositivo do usuário final. Está conectado a Internet e pode ser acessado através do seu nome de domínio (DNS), como por exemplo mozilla.org.
    2. -
  2. Referente ao software, um servidor web inclui diversos componentes que controlam como os usuários acessam os arquivos hospedados (armazenados para disponibilização), no mínimo um servidor HTTP. Um servidor HTTP é um software que compreende {{Glossary("URL","URLs")}} (endereços web) e {{Glossary("HTTP")}} (o protocolo que seu navegador utiliza para visualizar páginas web.
    3. -
- -

Em um nível mais básico, o navegador fará uma requisição utilizando o protocolo HTTP sempre que necessitar de um um arquivo hospedado em um servidor web. Quando a requisição alcançar o servidor web correto (hardware), o servidor HTTP (software) enviará o documento requerido, também via HTTP.

- -

Basic representation of a client/server connection through HTTP

- -

Para publicar um website, é necessário ou um servidor web estático ou um dinâmico.

- -

Um servidor web estático consiste em um computador (hardware) com um servidor HTTP (software). É chamado "estático" porque o servidor envia seus arquivos tal como foram criados e armazenados (hospedados) ao navegador.

- -

Um servidor web dinâmico consiste em um servidor web estático com software adicional, mais comumente um servidor de aplicações (application server) e um banco de dados (database). É chamado "dinâmico" porque o servidor de aplicações atualiza os arquivos hospedados antes de enviá-los ao navegador através do servidor HTTP.

- -

Por exemplo, para produzir as páginas finalizadas que você vê em seu navegador, o servidor de aplicações pode completar um modelo de página HTML (HTML template) com o conteúdo obtido de um banco de dados. Sites como o MDN ou a Wikipédia possuem vários milhares de páginas web, mas elas não são realmente documentos HTML, mas apenas alguns poucos templates HTML e uma gigantesca base de dados. Essa configuração agiliza e facilita o gerenciamento e a entrega do conteúdo.

- -

Aprendizado ativo

- -

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

- -

Entrando a  fundo

- -

Para carregar uma página web, como já foi dito, seu browser envia uma requisição ao servidor web, que busca pelo arquivo requisitado no seu próprio espaço de armazenamento. Ao encontrar o arquivo, o servidor web realiza a leitura, faz os processamentos necessários e o envia ao browser. Vamos olhar mais detalhamente para essas etapas.

- -

Servindo arquivos

- -

Um servidor web precisa primeiro armazenar os arquivos dos websites, como todos os documentos HTML e seus assets, que incluem imagens, páginas de estilo CSS, arquivos JavaScript, fontes e vídeos.

- -

Técnicamente, você pode servir todos esses arquivos em seu próprio computador. Mas, é muito mais conveniente armazená-los em um servidor web dedicado que

- - - -

Por todas essas razões, encontrar um bom provedor de servidores é a chave para criar seu próprio website.  Pesquise pelos vários serviços oferecidos e escolha aquele que melhor se alinha às suas necessidades e ao bolso (os serviçoes variam em uma faixa desde zero até milhares de dólares por mês). Você pode encontrar mais detalhes nesse artigo.

- -

Uma vez que você escolheu uma solução de servidores web, você só precisa fazer o upload dos seus arquivos para o servidor web.

- -

Comunicando através do HTTP

- -

Segundo, um servidor web fornece suporte para {{Glossary("HTTP")}} (protocolo de transferência de hipertexto). Como o próprio nome indica, o HTTP especifica como transferir arquivos de hipertexto (ou seja, documentos vinculados da web) entre dois computadores.

- -

Um protocolo é um conjunto de regras para comunicação entre dois computadores. HTTP é um protocolo textual sem estado.

- -
-
Textual
-
Todos os comandos são de texto simples e legíveis por humanos.
-
Sem estado
-
Nem o servidor nem o cliente lembram de comunicações anteriores. Por exemplo, confiando apenas no HTTP, um servidor não consegue se lembrar de uma senha digitada ou da etapa em que você está em uma transação. Você precisa de um servidor de aplicativos para tarefas como essa. (Nós vamos cobrir esse tipo de tecnologia em mais artigos.)
-
- -

O HTTP fornece regras claras sobre como um cliente e um servidor se comunicam. Abordaremos o próprio HTTP em um artigo técnico mais adiante. Por enquanto, apenas fique atento a estas coisas:

- - - -

The MDN 404 page as an example of such error pageEm um servidor web, o servidor HTTP é responsável por processar e responder as requisições recebidas.

- -
    -
  1. Ao receber uma requisição, um servidor HTTP primeiramente confirma se a URL requisitada corresponde ao arquivo existente.
    2. -
  2. Se confirmar, o servidor web envia o conteúdo do arquivo de volta ao navegador. Senão, o servidor de aplicações cria o arquivo necessário.
    3. -
  3. Se nenhum dos processos for possível, o servidor web retorna uma mensagem de erro ao navegador, mais conhecido como "404 Not Found". (Esse erro é tão comum que muitos desevolvedores web passam um bom tempo criando páginas de erro do 404.)
    4. -
- -

Conteúdo estático vs. dinâmico

- -

A grosso modo, um servidor pode fornecer tanto um conteúdo estático quanto dinâmico. "Estático" significa "da forma que está". Websites estáticos são os mais fáceis de configurar, então sugerimos que faça seu primeiro site estático.

- -

"Dinâmico" significa que o servidor processa o conteúdo ou o gera a partir de um banco de dados. Essa solução fornece mais flexibilidade, mas a arquitetura fica mais difícil de lidar, fazendo com que seja dramaticamente mais complexo desenvolver o website.

- -

Veja por exemplo a página na qual está lendo agora. No servidor web que a hospeda, há um servidor de aplicações que pega o conteúdo do artigo de um banco de dados, o formata, coloca dentro de um template HTML e lhe envia o resultado. Nesse caso, o servidor de aplicações é chamado de  Kuma e é desevolvido em Python (usando o framework Django ). A equipe da Mozilla desenvolveu o Kuma devido a necessidades específicas do MDN, mas há muitas aplicações similares em muitas outras tecnologias..

- -

Existem tantos servidores de aplicações que é muito difícil sugerir algum em particular. Alguns servidores de aplicações atendem à categorias específicas de websites como blogs, wikis ou lojas virtuais. Outros, os chamados {{Glossary("CMS", "CMSs")}} (sistemas de gerenciamento de conteúdo), são mais genéricos. Se estiver desenvolvendo um website dinâmico, reserve um tempo para escolher uma ferramenta que atenda às suas necessidades. A menos que queria aprender sobre o desenvolvimento de um servidor web (que é uma área interessante por si só!), não há necessidade de criar seu próprio servidor de aplicação. Estará apenas reinventando a roda.

- -

Próximos passos

- -

Agora que está familiarizado com os servidores web, você pode:

- - diff --git "a/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" "b/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" deleted file mode 100644 index 5cfb905389..0000000000 --- "a/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: O que são hyperlinks? -slug: Learn/Common_questions/O_que_são_hyperlinks -translation_of: Learn/Common_questions/What_are_hyperlinks ---- -
-

Neste artigo, veremos o que são hiperlinks e por que eles são importantes.

-
- - - - - - - - - - - - -
Pré requisitos:Você deve saber como a Internet funciona e estar familiarizado com a diferença entre uma página da web, um site, um servidor da web e um mecanismo de pesquisa.
Objetivo:Aprenda sobre links na Web e por que eles são importantes.
- -

Sumário

- -

Hyperlinks, geralmente chamados de links, são um conceito fundamental da Web. Para explicar o que são links, precisamos voltar ao básico da arquitetura da Web.

- -

Em 1989, Tim Berners-Lee, o inventor da Web, falou sobre os três pilares sobre os quais a Web se sustenta:

- -
    -
  1. "URL", um sistema de endereços que mantém o controle de documentos da Web;
    2. -
  2. "HTTP", um protocolo de transferência para encontrar documentos ao receber seus URLs;
    3. -
  3. "HTML", um formato de documento que permite incorporar hyperlinks;
    4. -
- -

Como você pode ver nos três pilares, tudo na Web gira em torno de documentos e como acessá-los. O propósito original da Web era fornecer uma maneira fácil de acessar, ler e navegar por documentos de texto. Desde então, a Web evoluiu para fornecer acesso a imagens, vídeos e dados binários, mas essas melhorias dificilmente mudaram os três pilares.

- -

Antes da Web, era muito difícil acessar documentos e passar de um para outro. Por serem legíveis por humanos, os URLs já tornaram as coisas mais fáceis, mas é difícil digitar um URL longo sempre que você deseja acessar um documento. Foi aqui que os hiperlinks revolucionaram tudo. Os links podem correlacionar qualquer string de texto com um URL, de forma que o usuário possa acessar instantaneamente o documento de destino ativando o link.

- -

Os links se destacam do texto ao redor por serem sublinhados e em azul. Toque ou clique em um link para ativá-lo ou, se usar um teclado, pressione Tab até que o link esteja em foco e pressione Enter ou a barra de espaço.

- -

Example of a basic display and effect of a link in a web page

- -

Os links são o avanço que tornou a Web tão útil e bem-sucedida. No restante deste artigo, discutiremos os vários tipos de links e sua importância para o design moderno da Web.

- -

Mergulho Profundo

- -

Como dissemos, um link é uma string de texto ligada a uma URL e usamos links para permitir um salto fácil de um documento para outro. Dito isso, existem algumas nuances que vale a pena considerar:

- - - -
-
Link interno
-
Um link entre duas páginas da web, em que ambas as páginas pertencem ao mesmo site, é chamado de link interno. Sem links internos, não existe site (a menos, é claro, que seja um site de uma página).
-
Link externo
-
Um link de sua página da web para a página de outra pessoa. Sem links externos, não há Web, pois a Web é uma rede de páginas da web. Use links externos para fornecer informações além do conteúdo disponível em sua página da web.
-
Links de entrada
-
Um link da página de outra pessoa para o seu site. É o oposto de um link externo. Observe que você não precisa vincular de volta quando alguém se vincula ao seu site.
-
- -

Ao construir um site, concentre-se nos links internos, pois eles tornam seu site utilizável. Encontre um bom equilíbrio entre ter muitos links e poucos. Falaremos sobre como projetar a navegação do site em outro artigo, mas como regra, sempre que você adicionar uma nova página da web, certifique-se de que pelo menos uma das outras páginas tenha um link para essa nova página. Por outro lado, se seu site tiver mais de dez páginas, é contraproducente vincular a todas as páginas a partir de todas as outras.

- -

Quando você está começando, não precisa se preocupar tanto com links externos e recebidos, mas eles são muito importantes se você deseja que os mecanismos de pesquisa encontrem seu site (veja abaixo para mais detalhes).

- -

Âncoras

- -

Muitos links unem duas páginas da web. Âncoras amarrar duas seções de um documento. Quando você segue um link que aponta para uma âncora, seu navegador salta para outra parte do documento atual em vez de carregar um novo documento. No entanto, você cria e usa âncoras da mesma forma que outros links.

- -

Example of a basic display and effect of an anchor in a web page

- - - -

Os links são importantes tanto para os usuários quanto para os mecanismos de pesquisa. Sempre que os mecanismos de pesquisa rastreiam uma página da web, eles indexam o site seguindo os links disponíveis na página. Os mecanismos de pesquisa não apenas seguem os links para descobrir as várias páginas do site, mas também usam o texto visível do link para determinar quais consultas de pesquisa são apropriadas para chegar à página da web de destino.

- -

Os links influenciam a rapidez com que um mecanismo de pesquisa se vincula ao seu site. O problema é que é difícil medir as atividades dos mecanismos de pesquisa. As empresas desejam naturalmente que seus sites tenham uma classificação elevada nos resultados de pesquisa. Sabemos o seguinte sobre como os mecanismos de pesquisa determinam a classificação de um site:

- - - -

SEO (search engine optimization) é o estudo de como fazer com que os sites tenham uma classificação elevada nos resultados de pesquisa. Melhorar o uso de links em um site é uma técnica de SEO útil.

- -

Próximos Passos

- -

Agora você vai querer configurar algumas páginas da web com links.

- - diff --git a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html b/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html deleted file mode 100644 index 342692db46..0000000000 --- a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Como eu começo a criar meu site? -slug: Learn/Common_questions/Pensando_antes_de_codificar -tags: - - Composição - - Iniciante -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

Este artigo abrange o primeiro passo, muito importante, de cada projeto: definir o que você deseja realizar com ele.

- - - - - - - - - - - - -
Pré-requisitos:Nenhum
Objetivo: -

Aprenda a definir metas para direcionar seu projeto da web.

-
- -

Sumário

- -

Ao começar um projeto web, muitas pessoas se concentram no lado técnico. É claro que você deve estar familiarizado com a técnica do seu ofício, mas o que realmente importa é o que você quer realizar. Sim, parece óbvio, mas muitos projetos falham não por falta de conhecimento técnico, mas por falta de objetivos e visão.

- -

Então, quando você tem uma ideia e quer transformá-la em um site, há algumas perguntas que você deve responder antes de qualquer outra coisa:

- - - -

Tudo isso é chamado de ideação do projeto e é um primeiro passo necessário para atingir seu objetivo, seja você um iniciante ou um desenvolvedor experiente.

- -

Aprendizado Ativo

- -

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

- -

Mergulho mais profundo

- -

Um projeto nunca começa com o lado técnico. Os músicos, nunca farão uma música, a menos que tenham uma ideia do que querem tocar e o mesmo vale para pintores, escritores e desenvolvedores da web. Técnica vem em segundo lugar.

- -

A técnica é obviamente crítica. Músicos devem dominar seu instrumento. Mas bons músicos nunca podem produzir boa música sem uma ideia. Portanto, antes de pular para o lado técnico (por exemplo, código e ferramentas) você deve primeiro recuar e decidir detalhadamente o que deseja fazer.

- -

Uma hora de discussão com amigos é um bom começo, mas inadequado. Você precisa se sentar e estruturar suas ideias para ter uma visão clara do caminho que deve seguir para tornar suas ideias realidade. Para fazer isso, você precisa apenas de caneta e papel e de algum tempo para responder pelo menos as seguintes perguntas.

- -
-

Nota: Existem inúmeras maneiras de realizar a ideação do projeto. Não podemos colocá-las todas aqui (um livro inteiro não seria suficiente). O que vamos apresentar aqui é um método simples para lidar com o que os profissionais chamam de Ideação do Projeto, Planejamento do Projeto, e Gerenciamento do Projeto.

-
- -

O que exatamente eu quero realizar?

- -

Esta é a pergunta mais importante a responder, já que direciona todo o resto. Relacione todos os objetivos que você deseja alcançar. Pode ser qualquer coisa: vender mercadorias para ganhar dinheiro, expressar opiniões políticas, conhecer novos amigos, apresentar-se com músicos, colecionar fotos de gatos ou o que você quiser.

- -

Suponha que você seja um músico. Você poderia desejar:

- - - -

Depois de ter essa lista, você precisa priorizar. Ordene os objetivos do mais importante para o menos importante:

- -
    -
  1. Encontrar um(a) novo(a) namorado(a).
    2. -
  2. Deixar as pessoas ouvirem sua música.
    3. -
  3. Falar sobre sua música.
    4. -
  4. Conhecer outros músicos.
    5. -
  5. Vender guloseimas.
    6. -
  6. Ensinar música através de vídeos.
    7. -
  7. Publicar fotos de seus gatos.
    8. -
- -

Fazer esse exercício simples (escrever objetivos e classificá-los), ajudará você quando tiver decisões a tomar. (Devo implementar esses recursos, usar esses serviços, criar esses designs?)

- -

Então, agora que você tem uma lista de prioridades, vamos para a próxima pergunta.

- -

Como um site poderia me levar aos meus objetivos?

- -

Então você tem uma lista de objetivos e acha que precisa de um site para alcançar esses objetivos. Você tem certeza?

- -

Vamos olhar denovo para o nosso exemplo. Temos cinco objetivos ligados à música, um objetivo relacionado à vida pessoal (encontrar sua cara metade) e as fotos de gatos completamente independentes. É razoável construir um site único para cobrir todos esses objetivos? É mesmo necessário? Afinal, dezenas de serviços existentes na Web, podem levar você aos seus objetivos sem criar um novo site.

- -

Encontrar um(a) namorado(a) é um bom caso em que faz mais sentido usar recursos existentes do que contruir um site totalmente novo. Por que? Porque passaremos mais tempo construindo e mantendo o site em vez de realmente procurar um(a) namorado(a). Como nosso objetivo é o mais importante, devemos gastar nossa energia em alavancar as ferramentas existentes, em vez de começar do zero. Mais uma vez, existem tantos serviços web já disponíveis para mostrar fotos que não vale a pena o esforço para construir um novo site apenas para divulgar o quanto nossos gatos são fofos.

- -

Os outros cinco objetivos estão todos ligados à música. Existem, é claro, muitos serviços da web que poderiam lidar com esses objetivos, mas faz sentido, nesse caso, construir um site próprio. Esse site é a melhor maneira de agregar todas as coisas que queremos publicar em um único lugar (bom para os objetivos 3, 5 e 6) e promover a interação entre nós e o público (bom para os objetivos 2 e 4). Em suma, como todas essas metas giram em torno do mesmo tópico, ter tudo em um só lugar nos ajudará a atingir nossos objetivos e a ajudar nossos seguidores a se conectarem conosco.

- -

Como um site pode me ajudar a atingir minhas metas? Ao responder isso, você encontrará a melhor maneira de atingir seus objetivos e evitar o desperdício de esforços.

- -

O que precisa ser feito, e em que ordem, para alcançar meus objetivos?

- -

O que precisa ser feito, e em que ordem, para alcançar meus objetivos?

- -

Agora que você sabe o que quer realizar, é hora de decompor os objetivos em etapas. Como uma anotação auxiliar, seus objetivos não são necessariamente definidos em pedra. Eles evoluem ao longo do tempo, mesmo no decorrer do projeto, especialmente se você se deparar com obstáculos inesperados ou simplemente mudar de idéia.

- -

Em vez de passar por uma longa explicação, voltemos ao nosso exemplo com esta tabela:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ObjetivosCoisas a fazer
Deixar as pessoas ouvirem sua música -
    -
  1. Gravar música
    2. -
  2. Preparar alguns arquivos de áudio utilizáveis on-line (você poderia fazer isso com os serviços da Web existentes?)
    3. -
  3. Dar às pessoas acesso à sua música em alguma parte do seu site
    4. -
-
Falar sobre sua música -
    -
  1. Escrever alguns artigos para iniciar a discussão
    2. -
  2. Definir como os artigos devem parecer
    3. -
  3. Publicar esses artigos no site (Como fazer isso?)
    4. -
-
Conhecer outros músicos -
    -
  1. Fornecer maneiras para as pessoas entrarem em contato com você (E-mail? Facebook? Telefone? Correio?)
    2. -
  2. Definir como as pessoas encontrarão esses canais de contato em seu site
    3. -
-
Vender guloseimas -
    -
  1. Criar as guloseimas
    2. -
  2. Armazenar as guloseimas
    3. -
  3. Encontrar uma maneira de lidar com o envio
    4. -
  4. Encontrar uma maneira de lidar com o pagamento
    5. -
  5. Criar um mecanismo no seu site para que as pessoas façam pedidos
    6. -
-
Ensinar música através de vídeos -
    -
  1. Gravar videoaulas
    2. -
  2. Preparar arquivos de vídeo online (Novamente, você poderia fazer isso com os serviços existentes na Web?)
    3. -
  3. Dar às pessoas acesso aos seus vídeos em alguma parte do seu site
    4. -
-
- -

Duas coisas para tomar nota. Primeiro, alguns desses itens não são relacionados à web (por exemplo, gravar música, escrever artigos). Muitas vezes essas atividades off-line são mais importantes do que o lado da web do projeto. Nas vendas, por exemplo, é muito mais importante e demorado lidar com suprimentos, pagamento e remessa do que construir um site onde as pessoas possam fazer pedidos.

- -

Em segundo lugar, a definição das etapas leva a novas perguntas que você precisará responder. Geralmente, há mais perguntas do que pensávamos inicialmente. (Por exemplo, devo aprender como fazer tudo isso sozinho, pedir a alguém para fazer isso por mim ou usar serviços de terceiros?)

- -

Conclusão

- -

Como você pode ver, a simples idéia "Eu quero fazer um site" gera uma longa lista de tarefas, que só cresce, quanto mais você pensa sobre isso. Logo pode parecer impressionante, mas não entre em pânico. Você não precisa responder todas as perguntas e não precisa fazer tudo na sua lista. O que importa é ter uma visão do que você quer e como chegar lá. Depois de ter essa visão clara, você precisa decidir como e quando fazê-lo. Divida as grandes tarefas em etapas pequenas e realizáveis. E essas pequenas tarefas resultarão em grandes conquistas.

- -

A partir deste artigo, você deve ser capaz de elaborar um plano básico para criar um site. Um próximo passo pode ser ler como a Internet funciona.

diff --git a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html b/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html deleted file mode 100644 index 7c92c2fb03..0000000000 --- a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Quanto custa fazer algo na Web? -slug: Learn/Common_questions/Quanto_custa_fazer_algo_web -translation_of: Learn/Common_questions/How_much_does_it_cost ---- -
-

Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.

-
- - - - - - - - - - - - -
Pré-requisitos:You should already understand what software you need, the difference between a webpage, a website, etc., and what a domain name is.
Objetivo:Review the complete process for creating a website and find out how much each step can cost.
- -

Sumário

- -

When launching a website, you may spend nothing, or your costs may go through the roof. In this article we discuss how much everything costs, and how you get what you pay (or don't pay).

- -

Software

- -

Editores de texto

- -

You likely have a text editor: such as, Notepad on Windows, Gedit on Linux, TextEdit on Mac. You'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure.

- -

Many editors are free, for example Atom, Brackets, Bluefish, TextWrangler, Eclipse, Netbeans, and Visual Studio Code. Some, like Sublime Text, you can test as long as you like, but you're encouraged to pay. Some, like PhpStorm, can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like Microsoft Visual Studio, can cost hundreds, or thousands of dollars; though Visual Studio Express is free for individual developers or open source projects. Often, for-pay editors will have a trial version.

- -

To start, we suggest trying out several editors, to get a sense of which works best for you. If you're only writing simple {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, go with a simple editor.

- -

Price does not reliably reflect a text editor's quality or usefulness. You have to try it for yourself and decide if it meets your needs. For example, Sublime Text is cheap, but comes with many free plugins that can greatly extend its functionality.

- -

Image editors

- -

Your system likely includes a simple image editor, or viewer: Paint on Windows, Eye of Gnome on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping.

- -

Editors can be free (GIMP, Paint.NET), moderately expensive (PaintShop Pro, less than $100), or several hundred dollars (Adobe Photoshop).

- -

You can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. If at some point you need to exchange projects with other designers, you should find out what tools they're using. Editors can all export finished projects to standard file formats, but each editor saves ongoing projects in its own specialized format. Most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. Sites like Pixabay provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use.

- -

Media editors

- -

If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).

- -

For audio files, you can find free software (Audacity, Wavosaur), or paying up to a few hundred dollars (Sony Sound Forge, Adobe Audition). Likewise, video-editing software can be free (PiTiVi, OpenShot for Linux, iMovie for Mac), less than $100 (Adobe Premiere Elements), or several hundred dollars (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). The software you received with your digital camera may cover all your needs.

- -

Publishing tools

- -

You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)FTP client, RSync, or Git/GitHub.

- -

Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.

- -

If you want to install an (S)FTP client, there are several reliable and free options: for example, FileZilla for all platforms, WinSCP for Windows, Cyberduck for Mac or Windows, and more.

- -

Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.

- -

Browsers

- -

You either already have a browser or can get one for free. If necessary, download Firefox here or Google Chrome here.

- -

Web access

- -

Computer / modem

- -

You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.

- -

Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.

- -

You need to upload content to a remote server (see Hosting below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.

- -

ISP access

- -

Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:

- - - -

Hosting

- -

Understanding bandwidth

- -

Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.

- -
-

Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.

-
- -

Domain names

- -

Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (1&1, Gandi for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:

- - - -

Do-it-yourself hosting vs. “packaged” hosting

- -

When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like Wordpress, Dotclear, spip, etc.), upload pre-made or your own templates.

- -

You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., Wordpress, Tumblr, Blogger). For the latter, you won't have to pay anything, but you may have less control over templating and other options.

- -

Free hosting vs. paid hosting

- -

You might ask, why should I pay for my hosting when there are so many free services?

- - - -

It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is guaranteed by most paid sites. Most hosting providers give you a huge discount to start with.

- -

Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.

- -

Professional website agencies and hosting

- -

If you desire a professional website, you will likely ask a web agency to do it for you.
-
- Here, costs depend on multiple factors, such as:

- - - -

...and for hosting:

- - - -

Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.

- -

Next steps

- -

Now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment.

- - diff --git a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html b/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html deleted file mode 100644 index 392b7fd03a..0000000000 --- a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Que software eu preciso para construir um site? -slug: Learn/Common_questions/Que_software_eu_preciso -tags: - - Iniciante -translation_of: Learn/Common_questions/What_software_do_I_need ---- -
- - -

Neste artigo nós destacamos quais softwares você precisa para editar, fazer upload ou visualizar um site.

-
- - - - - - - - - - - - -
Pré requisitos:Você deve saber a diferença entre páginas web, sites web, servidoresweb, e mecanismos de busca.
Objetivo:Aprender quais softwares você precisa se quiser editar, fazer upload, ou visualizar um site.
- -

Sumário

- -

Você pode baixar a maioria dos programas que precisa para desenvolvimento web gratuitamente. Nós disponibilizamos alguns links neste artigo.

- -

Você precisa de ferramentas para:

- - - -

Quase todos os sistemas operacionais incluem por padrão um editor de texto e um navegador de internet que você pode usar para visualizar sites. Como resultado, normalmente você só precisa obter um software para transferir arquivos para o seu servidor web.

- -

Práticas

- -

Ainda não existem práticas disponíveis. Por favor, considere contribuir.

- -

Aprofundando

- -

Criando e editando páginas web

- -

Para criar e editar um site, você precisa de um editor de texto. Editores de texto criam e modificam arquivos de texto não formatados. Outros formatos, como {{Glossary("RTF")}}, permitem que você adicione formatação, como negrito ou sublinhado. Esses formatos não são adequados para escrever em páginas web. Você deve pensar bem em qual editor de texto vai usar, considerando que você trabalhará por bastante tempo nele enquanto estiver construíndo seu site.

- -

Todos os sistemas operacionais desktop possuem um editor de texto básico. Todos esses editores são diretos em sua função, mas não possuem os recursos especiais para codificar uma página web. Se você quiser algo um pouco mais sofisticado, existem muitas ferramentas de terceiros disponíveis. Editores de terceiros possuem funções extras, como coloração de sintaxe, autocompletação, separadores de seção, e busca de código. Aqui está uma pequena lista de editores:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sistema OperacionalEditores PadrãoEditores de Terceiros
Windows - - - -
Mac OS - - - -
Linux - - - -
Chrome OS - -
- -

Aqui está uma captura de tela de um editor de texto avançado:

- -

Screenshot of Notepad++. 

- -

Aqui está uma captura de tela de um editor de texto online:

- -

Screenshot of ShiftEdit

- -

Fazendo upload de arquivos na web

- -

Quando seu site está pronto para visualização pública, você precisa fazer upload de suas páginas web para o seu servidorweb. Você precisa comprar espaço em um servidor, entre vários provedores (veja Quanto custa fazer algo na web). Após você decidir qual provedor usar, o provador te enviará um e-mail com suas informações de acesso, normalmente em forma de uma SFTP URL, nome de usuário, senha, e outra informação necessária para conectar no servidor. Tenha em mente que (S)FTP está um tanto quanto antiquado, e outros sistemas de upload de arquivos estão se tornando populares, como RSync e Git/GitHub.

- -
-

Nota: FTP é inerentemente inseguro. Você precisa se certificar que seu provedor permite o uso de uma conexão segura, por exemplo o SFTP ou RSync com SSH.

-
- -

Fazer upload de arquivos para um servidor web é um importante passo durante a criação de um site, por isso cobrimos isso detalhadamente em um artigo separado. Agora, aqui está uma pequena lista de clientes (S)FTP básicos e gratuítos:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sistema Operacional Cliente FTP
Windows - - -
    -
  • FileZilla (Qualquer Sistema Operacional)
    • -
-
Linux - -
Mac OS - -
Chrome OS -
    -
  • ShiftEdit (Qualquer Sistema Operacional)
    • -
-
- - - -

Como você já sabe, é necessário um navegador web para visualizar sites. Existem dezenas de opções de navegadores web para seu uso pessoal, mas quando você está desenvolvendo um site, deve testá-lo ao menos nestes navegadores principais, para garantir que seu site funcionará para a maior parte das pessoas:

- - - -

Se você estiver buscando um grupo espécífico (como usuários de uma plataforma ou de algum país), deve testar seu site em navegadores adicionais, como Opera, Konqueror, ou UC Browser.

- -

Mas testar é complicado, pois alguns navegadores apenas funcionam em determinados sistemas operacionais. O Apple Safari funciona no iOS e no Mac OS, enquanto o Internet Explorer funciona apenas no Windows. É melhor se valer dos benefícios de serviços como o Browsershots ou Browserstack. O Browsershots fornece capturas de tela de como seu site é visto por vários navegadores. O Browserstack atualmente concede a você total acesso remoto à máquinas virtuais de forma que você pode testar seu site nos ambientes mais comuns. Alternativamente você pode configurar sua própria máquina virtual, mas isso demanda certos conhecimentos específicos. (Se você quiser seguir esse caminho, a Microsoft possui algumas ferramentas para desenvoledores, incluíndo uma máquina virtual pronta para o uso, chamada modern.ie.).

- -

Por todos os meios possíveis, execute testes em dispositivos reais, especialmente em dispositivos móveis reais. Simulação de dispositivos móveis é uma nova tecnologia, está em evolução e é menos confiável que a simulação de computadores. Dispositivos móveis custam dinheiro, é claro, portanto sugerimos que se veja a Open Device Lab initiative. Você também pode compartilhar dispositivos se quiser testar em várias plataformas sem gastar muito.

- -

Próximos passos

- - diff --git a/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..83b4f50a41 --- /dev/null +++ b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,112 @@ +--- +title: Como configurar um servidor de testes local +slug: Learn/Common_questions/Como_configurar_um_servidor_de_testes_local +tags: + - Aprender + - Express + - Flask + - Iniciante + - Node + - PHP + - Python + - django + - lamp + - servidores +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

Este artigo explica como configurar um simples servidor de testes local em seu computador e o básico para utiliza-lo.

+
+ + + + + + + + + + + + +
Pré-requisitos: +

Primeiro você precisa saber como a internet funciona e o que é um servidor Web.

+
Objetivo:Você vai aprender como configurar um servidor de testes local.
+ +

Arquivos locais vs. arquivos remotos

+ +

Ao longo da maior parte da área de aprendizagem, nós lhe dissemos apenas para abrir seus exemplos diretamente no navegador  —  Isto pode ser feito atráves de um duplo clique no arquivo HTML, arrastando e soltando o arquivo na janela do navegador ou escolhendo Arquivo > Abrir... e navegando para o arquivo HTML. Existem muitas maneiras de realizar isso.

+ +

Se o caminho do endereço web começa com file:// seguido pelo caminho para o arquivo no seu disco rígido local, um arquivo local está sendo utilizado. No entanto, se você ver um dos nossos exemplos hospedado no GitHub (ou um exemplo em algum outro servidor remoto), o enderço web começará com http:// ou https://, para mostrar que o arquivo foi recebido via HTTP.

+ +

O problema com o teste de arquivos locais

+ +

Alguns exemplos não serão executados se você os abrir como arquivos locais. Isto pode ser devido a uma série de razões, sendo o mais provável:

+ + + +

Executando um servidor HTTP local simples

+ +

Para contornar o problema de requisições assíncronas, precisamos testar esses exemplos executando-os através de um servidor web local. Uma das maneiras mais fáceis de fazer isso para nossos propósitos é usar o módulo SimpleHTTPServer do Python.

+ +

Para fazer isso:

+ +
    +
  1. +

    Instale o Python. Se você estiver usando Linux ou macOS, ele já deverá estár disponível em seu sistema. Se você é um usuário do Windows, pode obter um instalador na página inicial do Python e seguir as instruções para instalá-lo:

    + +
      +
    • Vá para python.org (em inglês)
      • +
    • Na seção Download, clique no link para Python "3.xxx".
      • +
    • Na parte inferior da página, escolha o instalador executável do Windows x86 e baixe-o.
      • +
    • Quando tiver baixado, execute-o.
      • +
    • Na primeira página do instalador, certifique-se de marcar a caixa de seleção "Adicionar Python 3.xxx ao PATH".
      • +
    • Clique em Instalar e então, clique em Fechar quando a instalação terminar.
      • +
    +
    2. +
  2. +

    Abra seu prompt de comando (Windows)/ terminal (macOS/ Linux). Para verificar se o Python está instalado, digite o seguinte comando:

    + + 
    python -V
    +
    3. +
  3. +

    Isso deve retornar um número de versão. Se estiver tudo OK, navegue até o diretório em que seu exemplo está dentro, usando o comando cd.

    + + 
    # incluir o nome do diretório para entrar, por exemplo
+cd Desktop
+# use dois pontos para voltar um nível de diretório se você precisar
+cd ..
    +
    4. +
  4. +

    Digite o comando para inicializar o servidor nesse diretório:

    + + 
    # Se a versão do Python retornada acima for 3.X
+python3 -m http.server
+# No windows, tente "python" em vez de "python3"
+# Se a versão do Python retornada acima for 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    Por padrão, isso executará o conteúdo do diretório em um servidor web local, na porta 8000. Você pode ir para esse servidor acessando a URL localhost:8000 no seu navegador web. Aqui você verá o conteúdo do diretório listado — clique no arquivo HTML que você deseja executar.

    +
    6. +
+ +
+

Nota: Se você já tiver algo em execução na porta 8000, você poderá escolher outra porta executando o comando do servidor seguido por um número de porta alternativo, por exemplo python3 -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Você pode acessar seu conteúdo em localhost:7800.

+
+ +

Executando linguagens do lado do servidor localmente

+ +

Os módulos SimpleHTTPServer (python 2.0) e http.server (python 3.0) do Python são úteis, mas não sabem como executar código escrito em linguagens como Python, PHP ou JavaScript. Para lidar com isso, você precisará de algo mais — exatamente o que você precisa depende da linguagem do lado do servidor que você está tentando executar. Aqui estão alguns exemplos:

+ + + +
$ cd path/to/your/php/code
+$ php -S localhost:8000
diff --git a/files/pt-br/learn/common_questions/thinking_before_coding/index.html b/files/pt-br/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..342692db46 --- /dev/null +++ b/files/pt-br/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,178 @@ +--- +title: Como eu começo a criar meu site? +slug: Learn/Common_questions/Pensando_antes_de_codificar +tags: + - Composição + - Iniciante +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Este artigo abrange o primeiro passo, muito importante, de cada projeto: definir o que você deseja realizar com ele.

+ + + + + + + + + + + + +
Pré-requisitos:Nenhum
Objetivo: +

Aprenda a definir metas para direcionar seu projeto da web.

+
+ +

Sumário

+ +

Ao começar um projeto web, muitas pessoas se concentram no lado técnico. É claro que você deve estar familiarizado com a técnica do seu ofício, mas o que realmente importa é o que você quer realizar. Sim, parece óbvio, mas muitos projetos falham não por falta de conhecimento técnico, mas por falta de objetivos e visão.

+ +

Então, quando você tem uma ideia e quer transformá-la em um site, há algumas perguntas que você deve responder antes de qualquer outra coisa:

+ + + +

Tudo isso é chamado de ideação do projeto e é um primeiro passo necessário para atingir seu objetivo, seja você um iniciante ou um desenvolvedor experiente.

+ +

Aprendizado Ativo

+ +

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

+ +

Mergulho mais profundo

+ +

Um projeto nunca começa com o lado técnico. Os músicos, nunca farão uma música, a menos que tenham uma ideia do que querem tocar e o mesmo vale para pintores, escritores e desenvolvedores da web. Técnica vem em segundo lugar.

+ +

A técnica é obviamente crítica. Músicos devem dominar seu instrumento. Mas bons músicos nunca podem produzir boa música sem uma ideia. Portanto, antes de pular para o lado técnico (por exemplo, código e ferramentas) você deve primeiro recuar e decidir detalhadamente o que deseja fazer.

+ +

Uma hora de discussão com amigos é um bom começo, mas inadequado. Você precisa se sentar e estruturar suas ideias para ter uma visão clara do caminho que deve seguir para tornar suas ideias realidade. Para fazer isso, você precisa apenas de caneta e papel e de algum tempo para responder pelo menos as seguintes perguntas.

+ +
+

Nota: Existem inúmeras maneiras de realizar a ideação do projeto. Não podemos colocá-las todas aqui (um livro inteiro não seria suficiente). O que vamos apresentar aqui é um método simples para lidar com o que os profissionais chamam de Ideação do Projeto, Planejamento do Projeto, e Gerenciamento do Projeto.

+
+ +

O que exatamente eu quero realizar?

+ +

Esta é a pergunta mais importante a responder, já que direciona todo o resto. Relacione todos os objetivos que você deseja alcançar. Pode ser qualquer coisa: vender mercadorias para ganhar dinheiro, expressar opiniões políticas, conhecer novos amigos, apresentar-se com músicos, colecionar fotos de gatos ou o que você quiser.

+ +

Suponha que você seja um músico. Você poderia desejar:

+ + + +

Depois de ter essa lista, você precisa priorizar. Ordene os objetivos do mais importante para o menos importante:

+ +
    +
  1. Encontrar um(a) novo(a) namorado(a).
    2. +
  2. Deixar as pessoas ouvirem sua música.
    3. +
  3. Falar sobre sua música.
    4. +
  4. Conhecer outros músicos.
    5. +
  5. Vender guloseimas.
    6. +
  6. Ensinar música através de vídeos.
    7. +
  7. Publicar fotos de seus gatos.
    8. +
+ +

Fazer esse exercício simples (escrever objetivos e classificá-los), ajudará você quando tiver decisões a tomar. (Devo implementar esses recursos, usar esses serviços, criar esses designs?)

+ +

Então, agora que você tem uma lista de prioridades, vamos para a próxima pergunta.

+ +

Como um site poderia me levar aos meus objetivos?

+ +

Então você tem uma lista de objetivos e acha que precisa de um site para alcançar esses objetivos. Você tem certeza?

+ +

Vamos olhar denovo para o nosso exemplo. Temos cinco objetivos ligados à música, um objetivo relacionado à vida pessoal (encontrar sua cara metade) e as fotos de gatos completamente independentes. É razoável construir um site único para cobrir todos esses objetivos? É mesmo necessário? Afinal, dezenas de serviços existentes na Web, podem levar você aos seus objetivos sem criar um novo site.

+ +

Encontrar um(a) namorado(a) é um bom caso em que faz mais sentido usar recursos existentes do que contruir um site totalmente novo. Por que? Porque passaremos mais tempo construindo e mantendo o site em vez de realmente procurar um(a) namorado(a). Como nosso objetivo é o mais importante, devemos gastar nossa energia em alavancar as ferramentas existentes, em vez de começar do zero. Mais uma vez, existem tantos serviços web já disponíveis para mostrar fotos que não vale a pena o esforço para construir um novo site apenas para divulgar o quanto nossos gatos são fofos.

+ +

Os outros cinco objetivos estão todos ligados à música. Existem, é claro, muitos serviços da web que poderiam lidar com esses objetivos, mas faz sentido, nesse caso, construir um site próprio. Esse site é a melhor maneira de agregar todas as coisas que queremos publicar em um único lugar (bom para os objetivos 3, 5 e 6) e promover a interação entre nós e o público (bom para os objetivos 2 e 4). Em suma, como todas essas metas giram em torno do mesmo tópico, ter tudo em um só lugar nos ajudará a atingir nossos objetivos e a ajudar nossos seguidores a se conectarem conosco.

+ +

Como um site pode me ajudar a atingir minhas metas? Ao responder isso, você encontrará a melhor maneira de atingir seus objetivos e evitar o desperdício de esforços.

+ +

O que precisa ser feito, e em que ordem, para alcançar meus objetivos?

+ +

O que precisa ser feito, e em que ordem, para alcançar meus objetivos?

+ +

Agora que você sabe o que quer realizar, é hora de decompor os objetivos em etapas. Como uma anotação auxiliar, seus objetivos não são necessariamente definidos em pedra. Eles evoluem ao longo do tempo, mesmo no decorrer do projeto, especialmente se você se deparar com obstáculos inesperados ou simplemente mudar de idéia.

+ +

Em vez de passar por uma longa explicação, voltemos ao nosso exemplo com esta tabela:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjetivosCoisas a fazer
Deixar as pessoas ouvirem sua música +
    +
  1. Gravar música
    2. +
  2. Preparar alguns arquivos de áudio utilizáveis on-line (você poderia fazer isso com os serviços da Web existentes?)
    3. +
  3. Dar às pessoas acesso à sua música em alguma parte do seu site
    4. +
+
Falar sobre sua música +
    +
  1. Escrever alguns artigos para iniciar a discussão
    2. +
  2. Definir como os artigos devem parecer
    3. +
  3. Publicar esses artigos no site (Como fazer isso?)
    4. +
+
Conhecer outros músicos +
    +
  1. Fornecer maneiras para as pessoas entrarem em contato com você (E-mail? Facebook? Telefone? Correio?)
    2. +
  2. Definir como as pessoas encontrarão esses canais de contato em seu site
    3. +
+
Vender guloseimas +
    +
  1. Criar as guloseimas
    2. +
  2. Armazenar as guloseimas
    3. +
  3. Encontrar uma maneira de lidar com o envio
    4. +
  4. Encontrar uma maneira de lidar com o pagamento
    5. +
  5. Criar um mecanismo no seu site para que as pessoas façam pedidos
    6. +
+
Ensinar música através de vídeos +
    +
  1. Gravar videoaulas
    2. +
  2. Preparar arquivos de vídeo online (Novamente, você poderia fazer isso com os serviços existentes na Web?)
    3. +
  3. Dar às pessoas acesso aos seus vídeos em alguma parte do seu site
    4. +
+
+ +

Duas coisas para tomar nota. Primeiro, alguns desses itens não são relacionados à web (por exemplo, gravar música, escrever artigos). Muitas vezes essas atividades off-line são mais importantes do que o lado da web do projeto. Nas vendas, por exemplo, é muito mais importante e demorado lidar com suprimentos, pagamento e remessa do que construir um site onde as pessoas possam fazer pedidos.

+ +

Em segundo lugar, a definição das etapas leva a novas perguntas que você precisará responder. Geralmente, há mais perguntas do que pensávamos inicialmente. (Por exemplo, devo aprender como fazer tudo isso sozinho, pedir a alguém para fazer isso por mim ou usar serviços de terceiros?)

+ +

Conclusão

+ +

Como você pode ver, a simples idéia "Eu quero fazer um site" gera uma longa lista de tarefas, que só cresce, quanto mais você pensa sobre isso. Logo pode parecer impressionante, mas não entre em pânico. Você não precisa responder todas as perguntas e não precisa fazer tudo na sua lista. O que importa é ter uma visão do que você quer e como chegar lá. Depois de ter essa visão clara, você precisa decidir como e quando fazê-lo. Divida as grandes tarefas em etapas pequenas e realizáveis. E essas pequenas tarefas resultarão em grandes conquistas.

+ +

A partir deste artigo, você deve ser capaz de elaborar um plano básico para criar um site. Um próximo passo pode ser ler como a Internet funciona.

diff --git a/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..80df8f9ddf --- /dev/null +++ b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,221 @@ +--- +title: O que são as ferramentas de desenvolvimento do navegador +slug: Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

Todo navegador web moderno inclui um poderoso conjunto de ferramentas para desenvolvedores. Essas ferramentas fazem muitas coisas, desde inspecionar o HTML, CSS e JavaScript recém carregado e quais recursos foram requeridos até mostrar quanto tempo a página precisou para carregar. Este artigo explica como usar as funções básicas das ferramentas para desenvolvedores do seu navegador.

+
+ +
+

Nota: Antes de você executar os exemplos abaixo, abra o Beginner's example site (site de exemplos do iniciante) que nós criamos durante o início da série de artigos da Web ( Getting started with the Web ). Você poderá abrir isso enquanto segue os passos abaixo.

+
+ +

Como abrir o devtools no seu navegador

+ +

O devtools está inserido no navegador em uma janela semelhante a esta:

+ +

+ +

Como você acessa? Três modos:

+ + + +

+ +

O Inspetor: DOM explorer e editor CSS

+ +

O devtools usualmente abre por padrão o inspetor, que se parece com a  imagem abaixo. Esta ferramenta permite que você veja o resultado do  HTML  num site em execução, bem como o CSS aplicado en cada elemento na página.  Ele também lhe mostra as mudanças efetuadas no HTML e CSS e os resultados são produzidos imediatamente, ao vivo, na janela do navegador.

+ +

+ +

Se você não vê o inspector,

+ + + +

Explore o inspector DOM

+ +

Para começar tente pressionar o botão direito do mouse sobre um elemento HTML no inspetor do DOM e olhe para o menu de contexto. As opções do menu variam nos navegadores, mas os mais importantes são os mesmos.

+ +

+ + + +

Tente editar alguns dos seus DOM agora. Clique duas vezes em um elemento ou clique com o botão direito do mouse e escolha Editar como HTML no menu de contexto. Você pode fazer alterações que quiser, mas não pode salvar suas alterações.

+ +

Explorando o editor de CSS

+ +

Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:

+ +

+ +

Esses recursos são especialmente úteis:

+ + + +

Você notará várias guias clicáveis na parte superior do Visualizador de CSS:

+ + + +

Descubra mais

+ +

Descubra mais sobre o Inspetor em diferentes navegadores:

+ + + +

O depurador JavaScript

+ +

O depurador Javascript permite a visualização dos conteúdos das variáveis e a configuração dos pontos de paradas(breakpoints) no código. Breakpoints  são marcadores de linha para analisar a execução do código. A identificação previne problemas.

+ +

+ +

Para acessar o (debugger)depurador:

+ +

Firefox: Clique ➤ Web Developer ➤ Debugger ou pelo atalho Ctrl + Shift + S para abrir o Debugger Javascript.  Se a ferramenta já estiver vísivel, clique na aba Debugger.

+ +

Chrome: Abra as ferramentas de desenvolvimento e selecione a aba Fontes(Sources). (Opera funciona igualmente).

+ +

Edge e Internet Explorer 11: Aperte F12 então, Ctrl + 3, ou se a ferramenta já estiver visível, clique na aba Debugger(depurador).

+ +

Safari: Abra  as ferramentas de desenvolvedor e então selecione a aba Debugger(depurador).

+ +

Explorando o depurador

+ +

Há três painéis no Depurador(debugger) no Firefox

+ +

Lista de Arquivos

+ +

O primeiro painel na parte esquerda contém uma lista de arquivos associado com a página que está sendo depurada(debugging). Selecione o arquivo da seleção. Clique no arquivo para selecionar e visualizar os conteúdos no painel central do Debugger.

+ +

+ +

Código fonte

+ +

Insira os pontos de parada (breakpoints) onde deseja que a execução pare. Na imagem abaixo, a linha selecionada é a 18 na qual tem um ponto de parada (breakpoint).

+ +

+ +

Veja as expressões e pontos de paradas

+ +

À direita do painel é exibida uma lista de expressões e pontos de paradas adicionadas.

+ +

Na imagem, na primeira seção,  Watch expressions, mostra a lista de itens e variáveis que foram adicionadas.  Expanda a lista para visualizar os valores no vetor. 

+ +

Na próxima seção, Pontos de paradas, lista os pontos de paradas na página. No arquivo  example.js, um breakpoint foi adicionado listItems.push(inputNewItem.value);

+ +

As duas seções finais aparecem somente quando o código está executando.

+ +

A seção Call stack (chamada na pilha) mostra que o código foi executado para a linha atual. A função manuseia o clique do mouse e o código está pausado no ponto de parada (breakpoint).

+ +

A seção final, Scopes(escopos), mostra os valores visíveis em vários pontos no código. Por exemplo, na imagem abaixo, os objetos disponíveis estão na função addItemClick.

+ +

+ +

O console JavaScript

+ +

O console JavaScript é uma ferramenta incrivelmente útil para depurar códigos  em JavaScript que não está funcionando como o esperado. Ele permite que você execute linhas de JavaScript enquanto a página é carregada no navegador e relata os erros encontrados enquanto o navegador tenta executar o código.

+ +

Para acessar o console basta abrir ferramentas de desenvolvimentos e escolher a aba Console.

+ +

No Firefox o atalho é ctrl + shift+ k ou no menu comando:   ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console.

+ +

Aparecerá uma janela como a seguinte:

+ +

+ +

Para ver o que acontece, tente inserir os seguintes trechos de código no console, um por um (e, em seguida, pressione Enter):

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

Agora, tente inserir as seguintes versões incorretas do código e veja o que você obtém.

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

Você começará a ver o tipo de erro que o navegador retorna. Muitas vezes, esses erros são bastante críticos, mas deve ser bem simples descobrir esses problemas!

+ +

Descubra mais

+ +

Descubra mais sobre o console JavaScript em diferentes navegadores:

+ + + +

Veja também

+ + diff --git a/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html b/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..5cfb905389 --- /dev/null +++ b/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,91 @@ +--- +title: O que são hyperlinks? +slug: Learn/Common_questions/O_que_são_hyperlinks +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +
+

Neste artigo, veremos o que são hiperlinks e por que eles são importantes.

+
+ + + + + + + + + + + + +
Pré requisitos:Você deve saber como a Internet funciona e estar familiarizado com a diferença entre uma página da web, um site, um servidor da web e um mecanismo de pesquisa.
Objetivo:Aprenda sobre links na Web e por que eles são importantes.
+ +

Sumário

+ +

Hyperlinks, geralmente chamados de links, são um conceito fundamental da Web. Para explicar o que são links, precisamos voltar ao básico da arquitetura da Web.

+ +

Em 1989, Tim Berners-Lee, o inventor da Web, falou sobre os três pilares sobre os quais a Web se sustenta:

+ +
    +
  1. "URL", um sistema de endereços que mantém o controle de documentos da Web;
    2. +
  2. "HTTP", um protocolo de transferência para encontrar documentos ao receber seus URLs;
    3. +
  3. "HTML", um formato de documento que permite incorporar hyperlinks;
    4. +
+ +

Como você pode ver nos três pilares, tudo na Web gira em torno de documentos e como acessá-los. O propósito original da Web era fornecer uma maneira fácil de acessar, ler e navegar por documentos de texto. Desde então, a Web evoluiu para fornecer acesso a imagens, vídeos e dados binários, mas essas melhorias dificilmente mudaram os três pilares.

+ +

Antes da Web, era muito difícil acessar documentos e passar de um para outro. Por serem legíveis por humanos, os URLs já tornaram as coisas mais fáceis, mas é difícil digitar um URL longo sempre que você deseja acessar um documento. Foi aqui que os hiperlinks revolucionaram tudo. Os links podem correlacionar qualquer string de texto com um URL, de forma que o usuário possa acessar instantaneamente o documento de destino ativando o link.

+ +

Os links se destacam do texto ao redor por serem sublinhados e em azul. Toque ou clique em um link para ativá-lo ou, se usar um teclado, pressione Tab até que o link esteja em foco e pressione Enter ou a barra de espaço.

+ +

Example of a basic display and effect of a link in a web page

+ +

Os links são o avanço que tornou a Web tão útil e bem-sucedida. No restante deste artigo, discutiremos os vários tipos de links e sua importância para o design moderno da Web.

+ +

Mergulho Profundo

+ +

Como dissemos, um link é uma string de texto ligada a uma URL e usamos links para permitir um salto fácil de um documento para outro. Dito isso, existem algumas nuances que vale a pena considerar:

+ + + +
+
Link interno
+
Um link entre duas páginas da web, em que ambas as páginas pertencem ao mesmo site, é chamado de link interno. Sem links internos, não existe site (a menos, é claro, que seja um site de uma página).
+
Link externo
+
Um link de sua página da web para a página de outra pessoa. Sem links externos, não há Web, pois a Web é uma rede de páginas da web. Use links externos para fornecer informações além do conteúdo disponível em sua página da web.
+
Links de entrada
+
Um link da página de outra pessoa para o seu site. É o oposto de um link externo. Observe que você não precisa vincular de volta quando alguém se vincula ao seu site.
+
+ +

Ao construir um site, concentre-se nos links internos, pois eles tornam seu site utilizável. Encontre um bom equilíbrio entre ter muitos links e poucos. Falaremos sobre como projetar a navegação do site em outro artigo, mas como regra, sempre que você adicionar uma nova página da web, certifique-se de que pelo menos uma das outras páginas tenha um link para essa nova página. Por outro lado, se seu site tiver mais de dez páginas, é contraproducente vincular a todas as páginas a partir de todas as outras.

+ +

Quando você está começando, não precisa se preocupar tanto com links externos e recebidos, mas eles são muito importantes se você deseja que os mecanismos de pesquisa encontrem seu site (veja abaixo para mais detalhes).

+ +

Âncoras

+ +

Muitos links unem duas páginas da web. Âncoras amarrar duas seções de um documento. Quando você segue um link que aponta para uma âncora, seu navegador salta para outra parte do documento atual em vez de carregar um novo documento. No entanto, você cria e usa âncoras da mesma forma que outros links.

+ +

Example of a basic display and effect of an anchor in a web page

+ + + +

Os links são importantes tanto para os usuários quanto para os mecanismos de pesquisa. Sempre que os mecanismos de pesquisa rastreiam uma página da web, eles indexam o site seguindo os links disponíveis na página. Os mecanismos de pesquisa não apenas seguem os links para descobrir as várias páginas do site, mas também usam o texto visível do link para determinar quais consultas de pesquisa são apropriadas para chegar à página da web de destino.

+ +

Os links influenciam a rapidez com que um mecanismo de pesquisa se vincula ao seu site. O problema é que é difícil medir as atividades dos mecanismos de pesquisa. As empresas desejam naturalmente que seus sites tenham uma classificação elevada nos resultados de pesquisa. Sabemos o seguinte sobre como os mecanismos de pesquisa determinam a classificação de um site:

+ + + +

SEO (search engine optimization) é o estudo de como fazer com que os sites tenham uma classificação elevada nos resultados de pesquisa. Melhorar o uso de links em um site é uma técnica de SEO útil.

+ +

Próximos Passos

+ +

Agora você vai querer configurar algumas páginas da web com links.

+ + diff --git a/files/pt-br/learn/common_questions/what_is_a_web_server/index.html b/files/pt-br/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..f963103480 --- /dev/null +++ b/files/pt-br/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,121 @@ +--- +title: O que é um servidor web (web server)? +slug: Learn/Common_questions/o_que_e_um_web_server +tags: + - HTTP + - Infraestrutura + - Iniciante + - servidor web +translation_of: Learn/Common_questions/What_is_a_web_server +--- +
+

Neste artigo vamos revisar o que são web servers, como eles funcionam, e por que eles são importantes.

+
+ + + + + + + + + + + + +
Pré-requisitos:Você deve saber como a Internet funciona e entender a diferença entre uma página web, um site, um servidor web e um mecanismo de busca.
Objetivo:Você irá aprender o que é um servidor web e compreender de modo geral como ele funciona.
+ +

Sumário

+ +

"Servidor web (web server)" pode referir ao hardware ou ao software, ou ambos trabalhando juntos.

+ +
    +
  1. Referente ao hardware, um servidor web é um computador que armazena arquivos que compõem os sites (por exemplo, documentos HTML, imagens, folhas de estilo, e arquivos JavaScript) e os entrega para o dispositivo do usuário final. Está conectado a Internet e pode ser acessado através do seu nome de domínio (DNS), como por exemplo mozilla.org.
    2. +
  2. Referente ao software, um servidor web inclui diversos componentes que controlam como os usuários acessam os arquivos hospedados (armazenados para disponibilização), no mínimo um servidor HTTP. Um servidor HTTP é um software que compreende {{Glossary("URL","URLs")}} (endereços web) e {{Glossary("HTTP")}} (o protocolo que seu navegador utiliza para visualizar páginas web.
    3. +
+ +

Em um nível mais básico, o navegador fará uma requisição utilizando o protocolo HTTP sempre que necessitar de um um arquivo hospedado em um servidor web. Quando a requisição alcançar o servidor web correto (hardware), o servidor HTTP (software) enviará o documento requerido, também via HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Para publicar um website, é necessário ou um servidor web estático ou um dinâmico.

+ +

Um servidor web estático consiste em um computador (hardware) com um servidor HTTP (software). É chamado "estático" porque o servidor envia seus arquivos tal como foram criados e armazenados (hospedados) ao navegador.

+ +

Um servidor web dinâmico consiste em um servidor web estático com software adicional, mais comumente um servidor de aplicações (application server) e um banco de dados (database). É chamado "dinâmico" porque o servidor de aplicações atualiza os arquivos hospedados antes de enviá-los ao navegador através do servidor HTTP.

+ +

Por exemplo, para produzir as páginas finalizadas que você vê em seu navegador, o servidor de aplicações pode completar um modelo de página HTML (HTML template) com o conteúdo obtido de um banco de dados. Sites como o MDN ou a Wikipédia possuem vários milhares de páginas web, mas elas não são realmente documentos HTML, mas apenas alguns poucos templates HTML e uma gigantesca base de dados. Essa configuração agiliza e facilita o gerenciamento e a entrega do conteúdo.

+ +

Aprendizado ativo

+ +

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

+ +

Entrando a  fundo

+ +

Para carregar uma página web, como já foi dito, seu browser envia uma requisição ao servidor web, que busca pelo arquivo requisitado no seu próprio espaço de armazenamento. Ao encontrar o arquivo, o servidor web realiza a leitura, faz os processamentos necessários e o envia ao browser. Vamos olhar mais detalhamente para essas etapas.

+ +

Servindo arquivos

+ +

Um servidor web precisa primeiro armazenar os arquivos dos websites, como todos os documentos HTML e seus assets, que incluem imagens, páginas de estilo CSS, arquivos JavaScript, fontes e vídeos.

+ +

Técnicamente, você pode servir todos esses arquivos em seu próprio computador. Mas, é muito mais conveniente armazená-los em um servidor web dedicado que

+ + + +

Por todas essas razões, encontrar um bom provedor de servidores é a chave para criar seu próprio website.  Pesquise pelos vários serviços oferecidos e escolha aquele que melhor se alinha às suas necessidades e ao bolso (os serviçoes variam em uma faixa desde zero até milhares de dólares por mês). Você pode encontrar mais detalhes nesse artigo.

+ +

Uma vez que você escolheu uma solução de servidores web, você só precisa fazer o upload dos seus arquivos para o servidor web.

+ +

Comunicando através do HTTP

+ +

Segundo, um servidor web fornece suporte para {{Glossary("HTTP")}} (protocolo de transferência de hipertexto). Como o próprio nome indica, o HTTP especifica como transferir arquivos de hipertexto (ou seja, documentos vinculados da web) entre dois computadores.

+ +

Um protocolo é um conjunto de regras para comunicação entre dois computadores. HTTP é um protocolo textual sem estado.

+ +
+
Textual
+
Todos os comandos são de texto simples e legíveis por humanos.
+
Sem estado
+
Nem o servidor nem o cliente lembram de comunicações anteriores. Por exemplo, confiando apenas no HTTP, um servidor não consegue se lembrar de uma senha digitada ou da etapa em que você está em uma transação. Você precisa de um servidor de aplicativos para tarefas como essa. (Nós vamos cobrir esse tipo de tecnologia em mais artigos.)
+
+ +

O HTTP fornece regras claras sobre como um cliente e um servidor se comunicam. Abordaremos o próprio HTTP em um artigo técnico mais adiante. Por enquanto, apenas fique atento a estas coisas:

+ + + +

The MDN 404 page as an example of such error pageEm um servidor web, o servidor HTTP é responsável por processar e responder as requisições recebidas.

+ +
    +
  1. Ao receber uma requisição, um servidor HTTP primeiramente confirma se a URL requisitada corresponde ao arquivo existente.
    2. +
  2. Se confirmar, o servidor web envia o conteúdo do arquivo de volta ao navegador. Senão, o servidor de aplicações cria o arquivo necessário.
    3. +
  3. Se nenhum dos processos for possível, o servidor web retorna uma mensagem de erro ao navegador, mais conhecido como "404 Not Found". (Esse erro é tão comum que muitos desevolvedores web passam um bom tempo criando páginas de erro do 404.)
    4. +
+ +

Conteúdo estático vs. dinâmico

+ +

A grosso modo, um servidor pode fornecer tanto um conteúdo estático quanto dinâmico. "Estático" significa "da forma que está". Websites estáticos são os mais fáceis de configurar, então sugerimos que faça seu primeiro site estático.

+ +

"Dinâmico" significa que o servidor processa o conteúdo ou o gera a partir de um banco de dados. Essa solução fornece mais flexibilidade, mas a arquitetura fica mais difícil de lidar, fazendo com que seja dramaticamente mais complexo desenvolver o website.

+ +

Veja por exemplo a página na qual está lendo agora. No servidor web que a hospeda, há um servidor de aplicações que pega o conteúdo do artigo de um banco de dados, o formata, coloca dentro de um template HTML e lhe envia o resultado. Nesse caso, o servidor de aplicações é chamado de  Kuma e é desevolvido em Python (usando o framework Django ). A equipe da Mozilla desenvolveu o Kuma devido a necessidades específicas do MDN, mas há muitas aplicações similares em muitas outras tecnologias..

+ +

Existem tantos servidores de aplicações que é muito difícil sugerir algum em particular. Alguns servidores de aplicações atendem à categorias específicas de websites como blogs, wikis ou lojas virtuais. Outros, os chamados {{Glossary("CMS", "CMSs")}} (sistemas de gerenciamento de conteúdo), são mais genéricos. Se estiver desenvolvendo um website dinâmico, reserve um tempo para escolher uma ferramenta que atenda às suas necessidades. A menos que queria aprender sobre o desenvolvimento de um servidor web (que é uma área interessante por si só!), não há necessidade de criar seu próprio servidor de aplicação. Estará apenas reinventando a roda.

+ +

Próximos passos

+ +

Agora que está familiarizado com os servidores web, você pode:

+ + diff --git a/files/pt-br/learn/common_questions/what_software_do_i_need/index.html b/files/pt-br/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..392b7fd03a --- /dev/null +++ b/files/pt-br/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,222 @@ +--- +title: Que software eu preciso para construir um site? +slug: Learn/Common_questions/Que_software_eu_preciso +tags: + - Iniciante +translation_of: Learn/Common_questions/What_software_do_I_need +--- +
+ + +

Neste artigo nós destacamos quais softwares você precisa para editar, fazer upload ou visualizar um site.

+
+ + + + + + + + + + + + +
Pré requisitos:Você deve saber a diferença entre páginas web, sites web, servidoresweb, e mecanismos de busca.
Objetivo:Aprender quais softwares você precisa se quiser editar, fazer upload, ou visualizar um site.
+ +

Sumário

+ +

Você pode baixar a maioria dos programas que precisa para desenvolvimento web gratuitamente. Nós disponibilizamos alguns links neste artigo.

+ +

Você precisa de ferramentas para:

+ + + +

Quase todos os sistemas operacionais incluem por padrão um editor de texto e um navegador de internet que você pode usar para visualizar sites. Como resultado, normalmente você só precisa obter um software para transferir arquivos para o seu servidor web.

+ +

Práticas

+ +

Ainda não existem práticas disponíveis. Por favor, considere contribuir.

+ +

Aprofundando

+ +

Criando e editando páginas web

+ +

Para criar e editar um site, você precisa de um editor de texto. Editores de texto criam e modificam arquivos de texto não formatados. Outros formatos, como {{Glossary("RTF")}}, permitem que você adicione formatação, como negrito ou sublinhado. Esses formatos não são adequados para escrever em páginas web. Você deve pensar bem em qual editor de texto vai usar, considerando que você trabalhará por bastante tempo nele enquanto estiver construíndo seu site.

+ +

Todos os sistemas operacionais desktop possuem um editor de texto básico. Todos esses editores são diretos em sua função, mas não possuem os recursos especiais para codificar uma página web. Se você quiser algo um pouco mais sofisticado, existem muitas ferramentas de terceiros disponíveis. Editores de terceiros possuem funções extras, como coloração de sintaxe, autocompletação, separadores de seção, e busca de código. Aqui está uma pequena lista de editores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema OperacionalEditores PadrãoEditores de Terceiros
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS + +
+ +

Aqui está uma captura de tela de um editor de texto avançado:

+ +

Screenshot of Notepad++. 

+ +

Aqui está uma captura de tela de um editor de texto online:

+ +

Screenshot of ShiftEdit

+ +

Fazendo upload de arquivos na web

+ +

Quando seu site está pronto para visualização pública, você precisa fazer upload de suas páginas web para o seu servidorweb. Você precisa comprar espaço em um servidor, entre vários provedores (veja Quanto custa fazer algo na web). Após você decidir qual provedor usar, o provador te enviará um e-mail com suas informações de acesso, normalmente em forma de uma SFTP URL, nome de usuário, senha, e outra informação necessária para conectar no servidor. Tenha em mente que (S)FTP está um tanto quanto antiquado, e outros sistemas de upload de arquivos estão se tornando populares, como RSync e Git/GitHub.

+ +
+

Nota: FTP é inerentemente inseguro. Você precisa se certificar que seu provedor permite o uso de uma conexão segura, por exemplo o SFTP ou RSync com SSH.

+
+ +

Fazer upload de arquivos para um servidor web é um importante passo durante a criação de um site, por isso cobrimos isso detalhadamente em um artigo separado. Agora, aqui está uma pequena lista de clientes (S)FTP básicos e gratuítos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema Operacional Cliente FTP
Windows + + +
    +
  • FileZilla (Qualquer Sistema Operacional)
    • +
+
Linux + +
Mac OS + +
Chrome OS +
    +
  • ShiftEdit (Qualquer Sistema Operacional)
    • +
+
+ + + +

Como você já sabe, é necessário um navegador web para visualizar sites. Existem dezenas de opções de navegadores web para seu uso pessoal, mas quando você está desenvolvendo um site, deve testá-lo ao menos nestes navegadores principais, para garantir que seu site funcionará para a maior parte das pessoas:

+ + + +

Se você estiver buscando um grupo espécífico (como usuários de uma plataforma ou de algum país), deve testar seu site em navegadores adicionais, como Opera, Konqueror, ou UC Browser.

+ +

Mas testar é complicado, pois alguns navegadores apenas funcionam em determinados sistemas operacionais. O Apple Safari funciona no iOS e no Mac OS, enquanto o Internet Explorer funciona apenas no Windows. É melhor se valer dos benefícios de serviços como o Browsershots ou Browserstack. O Browsershots fornece capturas de tela de como seu site é visto por vários navegadores. O Browserstack atualmente concede a você total acesso remoto à máquinas virtuais de forma que você pode testar seu site nos ambientes mais comuns. Alternativamente você pode configurar sua própria máquina virtual, mas isso demanda certos conhecimentos específicos. (Se você quiser seguir esse caminho, a Microsoft possui algumas ferramentas para desenvoledores, incluíndo uma máquina virtual pronta para o uso, chamada modern.ie.).

+ +

Por todos os meios possíveis, execute testes em dispositivos reais, especialmente em dispositivos móveis reais. Simulação de dispositivos móveis é uma nova tecnologia, está em evolução e é menos confiável que a simulação de computadores. Dispositivos móveis custam dinheiro, é claro, portanto sugerimos que se veja a Open Device Lab initiative. Você também pode compartilhar dispositivos se quiser testar em várias plataformas sem gastar muito.

+ +

Próximos passos

+ + diff --git a/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..b3988ca69b --- /dev/null +++ b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,345 @@ +--- +title: Cascade and inheritance +slug: Aprender/CSS/Construindo_blocos/Cascade_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

O objetivo desta lição é desenvolver sua compreensão para alguns dos conceitos mais fundamentais de CSS - cascata, especificidade e herança - que controlam como o CSS é aplicado ao HTML e como os conflitos são resolvidos.

+ +

Embora esta lição possa parecer menos pouco relevante e mais acadêmico do que algumas outras partes do curso, a compreensão desses itens (cascata, especificidade e herança), poupará muito tempo no futuro! Recomendamos que você trabalhe nesta seção com cuidado e verifique se entendeu os conceitos antes de prosseguir.

+ + + + + + + + + + + + +
Pré-requisitos:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objectivo:Aprender sobre cascata e especificidade, e como funciona a herança em CSS.
+ +

Regras de Conflitos

+ +

CSS - Cascading Style Sheets, cascata (a primeira palavra) é muito importante compreender - a maneira como a cascata se comporta é a chave para entender CSS.

+ +

Em algum momento, você estará trabalhando em um projeto e descobrirá que o CSS que você pensou que deveria ser aplicado a um elemento não está funcionando. Normalmente, o problema é que você criou duas regras que poderiam se aplicar ao mesmo elemento. A cascata e o conceito intimamente relacionado com especificidade que são mecanismos que controlam qual regra se aplica quando existe tal conflito. A regra que define o estilo do seu elemento pode não ser a esperada, portanto, você precisa entender como esses mecanismos funcionam.

+ +

Também é importante aqui é o conceito de herança, o que significa que algumas propriedades CSS por padrão herdam os valores definidos no elemento pai do elemento atual, e outras não. Isso também pode causar algum comportamento que você não esperava.

+ +

Vamos começar dando uma olhada rápida nas nestes itens com os quais estamos lidando (cascata, especificidade e herança), então vamos ver como elas interagem entre si e com o CSS. Isso pode parecer um conjunto de conceitos difíceis de entender, mas a medida que você pratica mais a escrita de CSS, o funcionamento vai se tornando mais óbvio para você.

+ +

The cascade - A Cascata

+ +

Stylesheets cascade (Cascata) — em um nível muito simples, significa que a ordem das regras CSS é importante; quando se aplicam duas regras com especificidade igual, a que vier por último no CSS é a que será usada.

+ +

No exemplo abaixo, temos duas regras que podem ser aplicadas ao h1. O h1 acaba tendo a cor azul - essas regras têm um seletor idêntico e, portanto, carregam a mesma especificidade, portanto, o último na ordem de origem vence.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Specificity - Especificidade

+ +

A especificidade é como o navegador decide/verifica qual regra se aplica se várias regras têm seletores diferentes, que poderiam ser aplicadas ao mesmo elemento. É basicamente uma medição de qual das regras/caracteristicas específica será a mais indicada/específica de um seletor:

+ + + +

Hora do exemplo! Abaixo, temos novamente duas regras que podem ser aplicadas ao h1. O h1 abaixo acaba sendo colorido em vermelho - o seletor de classe dá a sua regra uma especificidade mais alta e, portanto, será aplicada mesmo que a regra com o seletor de elemento apareça mais abaixo na ordem de origem.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Explicaremos a pontuação de especificidade mais tarde.

+ +

Inheritance - Herança

+ +

A herança também precisa ser entendida neste contexto - alguns valores de propriedade CSS definidos em elementos pais são herdados por seus elementos filhos e outros não.

+ +

Por exemplo, se você definir uma cor e uma família de fontes em um elemento, todos os elementos dentro dele também serão estilizados com essa cor e fonte, a menos que você tenha aplicado cores e valores de fonte diferentes diretamente a eles.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Algumas propriedades não herdam - por exemplo, se você definir um {{cssxref ("width")}} de 50% em um elemento, todos os seus descendentes não terão uma largura de 50% da largura de seus pais. Se fosse esse o caso, CSS seria muito frustrante de usar!

+ +
+

Note: Nas páginas de referência de propriedade CSS do MDN, você pode encontrar uma caixa de informações técnicas, geralmente na parte inferior da seção de especificações, que lista uma série de pontos de dados sobre essa propriedade, incluindo se ela é herdada ou não. Veja o color property Specifications section (seção de especificações de propriedade de cor) , por exemplo.

+
+ +

Entendendo como os conceitos funcionam juntos

+ +

Esses três conceitos juntos controlam que caractersticas CSS se aplicam a qual elemento; nas seções a seguir, veremos como eles funcionam juntos. Às vezes pode parecer um pouco complicado, mas você começará a entende-los conforme for ficando mais experiente com CSS, e você sempre poderá consultar os detalhes se esquecer! Mesmo os desenvolvedores experientes não se lembram de todos os detalhes.

+ +

O vídeo a seguir mostra como você pode usar o Firefox DevTools para inspecionar a cascata, a especificidade de uma página e muito mais:

+ +

{{EmbedYouTube("Sp9ZfSvpf7A")}}

+ +

Entendendo Herança

+ +

Começaremos com herança. No exemplo abaixo, temos um {{HTMLElement ("ul")}}, com dois níveis de listas não ordenadas aninhadas dentro dele. Demos ao <ul> externo uma borda, preenchimento e uma cor de fonte.

+ +

A cor foi aplicada aos filhos diretos, mas também aos filhos indiretos - os filhos imediatos <li> são aqueles dentro da primeira lista aninhada. Em seguida, adicionamos uma classe especial à segunda lista aninhada e aplicamos uma cor diferente a ela. Isso então é herdado por meio de seus filhos.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

Coisas como larguras (conforme mencionado acima), margens, preenchimento e bordas não são herdadas. Se uma borda fosse herdada pelos filhos de nossa lista, cada lista e cada item da lista ganhariam uma borda - provavelmente não é um efeito que desejaríamos!

+ +

Quais propriedades são herdadas por padrão e quais não são, depende do bom senso.

+ +

Controlando Herança

+ +

CSS fornece quatro valores especiais de propriedades universais para controlar a herança. Cada propriedade CSS aceita esses valores.

+ +

{{cssxref("inherit")}}

+ +

    Define o valor da propriedade aplicada a um elemento selecionado para ser o mesmo de          seu elemento pai. Efetivamente, isso "ativa a herança".

+ +

{{cssxref("initial")}}

+ +
+
Define o valor da propriedade aplicada a um elemento selecionado para o valor inicial dessa propriedade.
+
{{cssxref("unset")}}
+
Restaura a propriedade com seu valor natural, o que significa que se a propriedade é herdada naturalmente, ela age como herdada, caso contrário, ela age como inicial.
+
+ +
+

Note: Temos um comando mais recente, {{cssxref("revert")}}, mas nem todos os navegadores suportam

+
+ +
+

Note: veja {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}}para obter mais informações sobre como cada um deles funcionam.

+
+ +

Podemos ver uma lista de links e explorar como funcionam os valores universais. O exemplo ao vivo abaixo permite que você brinque com o CSS e veja o que acontece quando você faz alterações. Usar/modificar o código é realmente a melhor maneira de se familiarizar com HTML e CSS.

+ +

Por exemplo:

+ +
    +
  1. O segundo item da lista tem a classe my-class-1 aplicada. Isso define a cor do elemento <a> aninhado dentro para herdar. Se você remover a regra, como ela muda a cor do link?
    2. +
  2. Você consegue entende por que o terceiro e o quarto links são da mesma cor? Verifique a descrição dos valores acima se não.
    3. +
  3. Qual dos links mudará de cor se você definir uma nova cor para o elemento <a> - por exemplo, um {color: red; }?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Redefinindo todos os Valores de Propriedade

+ +

A propriedade abreviada CSS all pode ser usada para aplicar um desses valores de herança a (quase) todas as propriedades de uma vez. Seu valor pode ser qualquer um dos valores de herança (herdar, inicial, não definido ou reverter). É uma maneira conveniente de desfazer as alterações feitas nos estilos para que você possa voltar a um ponto de partida conhecido antes de iniciar novas alterações.

+ +

No exemplo abaixo, temos duas aspas em bloco. O primeiro tem um estilo aplicado ao próprio elemento blockquote, o segundo tem uma classe aplicada ao blockquote que define o valor de all (todos) como unset (indefinido).

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Tente definir o valor de todos para alguns dos outros valores disponíveis e observe qual é a diferença.

+ +

Compreendendo Cascata

+ +

Agora entendemos por que um parágrafo aninhado profundamente na estrutura do seu HTML tem a mesma cor do CSS aplicado ao corpo e, a partir das lições introdutórias, entendemos como alterar o CSS aplicado a algo em qualquer ponto do documento - seja atribuindo CSS a um elemento ou criando uma classe. Agora daremos uma olhada apropriada em como a cascata define quais regras CSS se aplicam quando mais de uma coisa pode estilizar um elemento.

+ +

Há três fatores a serem considerados, listados aqui em ordem crescente de importância. Os posteriores anulam os anteriores:

+ +
    +
  1. Ordem da Fonte
    2. +
  2. Especificidade
    3. +
  3. Importância
    4. +
+ +

Vamos dar uma olhada neles para ver como os navegadores descobrem exatamente o que CSS deve ser aplicado.

+ +

Ordem da Fonte (origem)

+ +

Já vimos como a ordem da fonte é importante para a cascata. Se você tiver mais de uma regra, que tenha exatamente o mesmo peso, a que vier por último no CSS será a vencedora. Você pode pensar nisso como regras que estão mais próximas do próprio elemento, sobrescrevendo as anteriores, até que a última vença e dê estilo ao elemento.

+ +

Especificidade

+ +

Depois de compreender o fato de que a ordem da fonte é importante, em algum momento você se deparará com uma situação em que saberá que uma regra vem depois na folha de estilo, mas uma regra anterior conflitante é aplicada. Isso ocorre porque a regra anterior tem uma especificidade mais alta - é mais específica e, portanto, está sendo escolhida pelo navegador como a que deve estilizar o elemento.
+
+ Como vimos anteriormente nesta lição, um seletor de classe tem mais peso do que um seletor de elemento, portanto, as propriedades definidas na classe substituirão aquelas aplicadas diretamente ao elemento.
+
+ Algo a se notar aqui é que, embora estejamos pensando em seletores e nas regras que são aplicadas ao que eles selecionam, não é a regra inteira que é substituída, apenas as propriedades que são iguais.

+ +

Esse comportamento ajuda a evitar a repetição em seu CSS. Uma prática comum é definir estilos genéricos para os elementos básicos e, em seguida, criar classes para aqueles que são diferentes. Por exemplo, abaixo definimos estilos genéricos para títulos de nível 2 e, em seguida, criamos algumas classes que alteram apenas algumas das propriedades e valores. Os valores definidos inicialmente são aplicados a todos os títulos, depois os valores mais específicos são aplicados aos títulos com as classes.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Vamos agora dar uma olhada em como o navegador calculará a especificidade. Já sabemos que um seletor de elemento tem baixa especificidade e pode ser substituído por uma classe. Essencialmente, um valor em pontos é concedido a diferentes tipos de seletores, e somar esses pontos dá a você o peso daquele seletor específico, que pode então ser avaliado em relação a outras combinações potenciais.

+ +

A quantidade de especificidade que um seletor tem é medida usando quatro valores (ou componentes) diferentes, que podem ser considerados como milhares, centenas, dezenas e uns - quatro dígitos únicos em quatro colunas:

+ +
    +
  1. Thousands: marque um nesta coluna se a declaração estiver dentro de um atributo {{htmlattrxref ("style")}}, também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000.
    2. +
  2. Hundreds: marque um nesta coluna para cada seletor de ID contido no seletor geral.
    3. +
  3. Tens: marque um nesta coluna para cada seletor de classe, seletor de atributo ou pseudoclasse contido no seletor geral.
    4. +
  4. Ones: marque um nesta coluna para cada seletor de elemento ou pseudoelemento contido dentro do seletor geral.
    5. +
+ +
+

Note: O Seletor universal (*), combinadores (+, >, ~, ' '), e pseudo-classe de negação (:not) não tem efeito de especificidade.

+
+ +

A tabela a seguir mostra alguns exemplos isolados para colocá-lo no clima. Experimente passar por eles e certifique-se de entender por que eles têm a especificidade que demos a eles. Ainda não cobrimos os seletores em detalhes, mas você pode encontrar detalhes de cada seletor em MDN  selectors reference.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorThousandsHundredsTensOnesTotal specificity
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute10001000
+ +

Antes de prosseguirmos, vejamos um exemplo em ação.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Então, o que está acontecendo aqui? Em primeiro lugar, estamos interessados ​​apenas nas primeiras sete regras deste exemplo e, como você notará, incluímos seus valores de especificidade em um comentário antes de cada uma.

+ + + +
    +
+ +
+

Note: Este foi apenas um exemplo aproximado para facilitar a compreensão. Na realidade, cada tipo de seletor tem seu próprio nível de especificidade que não pode ser substituído por seletores com um nível de especificidade inferior. Por exemplo, um milhão de seletores de classe combinados não seriam capazes de sobrescrever as regras de um seletor de id.

+ +

Uma forma mais precisa de avaliar a especificidade seria pontuar os níveis de especificidade individualmente começando do mais alto e passando para o mais baixo quando necessário. Somente quando há um empate entre as pontuações do seletor dentro de um nível de especificidade, você precisa avaliar o próximo nível abaixo; caso contrário, você pode desconsiderar os seletores de nível de especificidade inferior, pois eles nunca podem substituir os níveis de especificidade mais altos.

+
+ +

! Importante

+ +

Existe uma parte especial do CSS que você pode usar para ignorar todos os cálculos acima, no entanto, você deve ter muito cuidado ao usá-la -! Importante. Isso é usado para tornar uma determinada propriedade e valor a coisa mais específica, substituindo assim as regras normais da cascata.
+
+ Dê uma olhada neste exemplo onde temos dois parágrafos, um dos quais tem um ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Vamos examinar isso para ver o que está acontecendo - tente remover algumas das propriedades para ver o que acontece e se você tiver dificuldade de entender:

+ +
    +
  1. Você verá que os valores da terceira regra {{cssxref ("color")}} e {{cssxref ("padding")}} foram aplicados, mas o {{cssxref ("background-color")}} não foram?. Por quê? Na verdade, todos os três devem ser aplicados, porque as regras posteriores na ordem de origem geralmente substituem as regras anteriores.
    2. +
  2. No entanto, as regras acima vencem, porque os seletores de classe têm uma especificidade mais alta do que os seletores de elemento.
    3. +
  3. Ambos elementos tem {{htmlattrxref("class")}} de better (melhor), mas o segundo tem um id {{htmlattrxref("id")}} que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe.
    4. +
  4. O segundo elemento obtém a cor de fundo vermelha, mas sem borda. Por quê? Por causa da declaração! Important na segunda regra - incluindo isso depois de border: none significa que essa declaração vai superar o valor de border na regra anterior, embora o ID tenha uma especificidade mais alta.
    5. +
+ +
+

Note: A única maneira de sobrescrever essa declaração! Importante seria incluir outra declaração! Importante em uma declaração com a mesma especificidade posteriormente na ordem de origem, ou uma com uma especificidade mais alta.

+
+ +

É útil saber que! Important existe para que você saiba o que é quando o encontrar no código de outras pessoas. No entanto, recomendamos enfaticamente que você nunca o use, a menos que seja absolutamente necessário. ! mudanças importantes na maneira como a cascata normalmente funciona, portanto, pode tornar a depuração de problemas CSS realmente difícil de resolver, especialmente em uma folha de estilo grande.

+ +

Uma situação em que você pode ter que usá-lo é quando você está trabalhando em um CMS onde você não pode editar os módulos CSS principais e você realmente deseja sobrescrever um estilo que não pode ser sobrescrito de nenhuma outra maneira. Mas, sério, não use se você puder evitar.

+ +

O Efeito da Localização CSS

+ +

Por fim, também é útil observar que a importância de uma declaração CSS depende em qual folha de estilo ela é especificada - é possível que os usuários definam folhas de estilo personalizadas para substituir os estilos do desenvolvedor, por exemplo, o usuário pode ser deficiente visual e deseja para definir o tamanho da fonte em todas as páginas da Web que eles visitam com o dobro do tamanho normal para permitir uma leitura mais fácil.

+ +

Resumindo

+ +

As declarações conflitantes serão aplicadas na seguinte ordem, com as posteriores substituindo as anteriores:

+ +
    +
  1. Declarações nas folhas de estilo do agente do usuário (por exemplo, os estilos padrão do navegador, usados quando nenhum outro estilo está definido).
    2. +
  2. Declarações normais em folhas de estilo do usuário (estilos personalizados definidos por um usuário).
    3. +
  3. Declarações normais em folhas de estilo do autor (esses são os estilos definidos por nós, os desenvolvedores da web).
    4. +
  4. Declarações importantes nas folhas de estilo do autor
    5. +
  5. +

    Declarações importantes nas folhas de estilo do usuário

    + +

    Faz sentido que as folhas de estilo dos desenvolvedores da web substituam as folhas de estilo do usuário, para que o design possa ser mantido conforme pretendido, mas às vezes os usuários têm bons motivos para substituir os estilos do desenvolvedor da web, conforme mencionado acima - isso pode ser feito usando! Important em suas regras.
    +  

    +
    6. +
+ +

Teste suas Habilidades!

+ +

Abordamos muito neste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir - consulte Test your skills: the Cascade.

+ +

O que vem a seguir?

+ +

Se você entendeu a maior parte deste artigo, então muito bem - você começou a se familiarizar com a mecânica fundamental do CSS. A seguir, veremos os seletores em detalhes.

+ +

Se você não entendeu totalmente a cascata, a especificidade e a herança, não se preocupe! Esta é definitivamente a coisa mais complicada que abordamos até agora no curso e é algo que até mesmo os desenvolvedores profissionais da Web às vezes acham complicado. Aconselhamos que você volte a este artigo algumas vezes à medida que avança no curso e continue pensando a respeito.

+ +

Volte aqui se você começar a encontrar problemas estranhos com estilos que não se aplicam conforme o esperado. Pode ser um problema de especificidade.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/pt-br/learn/css/building_blocks/index.html b/files/pt-br/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..b79de8baa0 --- /dev/null +++ b/files/pt-br/learn/css/building_blocks/index.html @@ -0,0 +1,83 @@ +--- +title: Construindo blocos CSS +slug: Aprender/CSS/Construindo_blocos +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Este módulo continua onde Primeiros passos em CSS parou — agora que você já ganhou familiaridade com a linguagem e sua sintaxe, e já tem alguma experiência básica usando-a, é hora de mergulhar um pouco mais fundo. Este módulo analisa a conceitos de cascata e herança , todos os tipos de seletores que temos disponíveis, unidades, dimensionamentos, estilos de fundo e bordas, depuração, e muito mais.

+ +

O objetivo aqui é lhe prover com um conjunto de ferramentas para construir um código CSS competente e ajuda-lo a entender toda a teoria essencial, antes de passarmos para tópicos mais específicos como Estilização de texto e Modelo CSS.

+ +

Pré-requisitos

+ +

Antes de iniciar este módulo, você deve ter:

+ +
    +
  1. Familiaridade básica com uso de computadores, e usar a Web passivamente (por exemplo. apenas olhar, consumindo o conteúdo.)
    2. +
  2. Um ambiente de trabalho básico configurado conforme detalhado em Instalando software básico, e um entendimento de como criar e gerenciar arquivos, como detalhado em Lidando com arquivos.
    3. +
  3. Familiaridade básica com HTML, como foi discutido no módulo Introdução ao HTML.
    4. +
  4. Um entendimento do básico em CSS, como o mostrado no módulo  Primeiros Passos com CSS.
    5. +
+ +
+

Nota: Se você estiver usando um computador/tablet/outro dispositivo onde você não puder criar seus próprios arquivos, você pode tentar rodar (a maioria) os códigos de exemplo em um programa de codificação online como o JSBin ou Glitch.

+
+ +

Guias

+ +

Este módulo contém os seguintes artigos, que cobrem a maioria das partes essenciais da linguagem CSS. Ao longo do caminho você encontrará vários exercícios para testar seu entendimento.

+ +
+
Cascata e Herança
+
O objetivo desta lição é desenvolver seu entendimento de alguns dos conceitos mais fundamentais do CSS — a cascata, especificidade e herança — que controlam como o CSS será aplicado ao HTML e como conflitos são resolvidos.
+
Seletores CSS
+
Há uma ampla variedade de seletores CSS disponíveis, permitindo uma fina precisão ao selecionar elementos para estilizar. Neste artigo e em seus sub-artigos, examinaremos os diferentes tipos em detalhes, vendo como eles funcionam. Os sub-artigos são os seguintes: + +
+
O modelo de caixa (Ou Box Model)
+
Tudo em CSS está dentro de caixas, e entender essas caixas é a chave para estar apto a criar layouts (modelos) em CSS, ou alinhar itens com outros itens. Nesta lição,trataremos mais propriamente sobre Modelo de Caixa CSS, afim de que você possa passar para tarefas de Layout mais complexas com um entendimento de como isto funciona e a terminologia relacionada a este modelo.
+
Planos de fundo e bordas
+
Nesta lição, examinaremos algumas das coisas criativas que você pode fazer com os planos de fundo e as bordas do CSS. Desde a criação de gradientes, imagens de plano de fundo e cantos arredondados, planos de fundo e bordas são a resposta para muitas questões de estilo em CSS.
+
Manipulando diferentes direções de texto
+
Nos últimos anos, o CSS evoluiu para oferecer melhor suporte a diferentes direções de conteúdo, incluindo o conteúdo da direita para a esquerda, mas também de cima para baixo (como o japonês) - essas diferentes direções são chamadas de modos de escrita. À medida que você progride em seu estudo e começa a trabalhar com o layout, o entendimento dos modos de escrita será muito útil para você; portanto, os apresentaremos neste artigo..
+
Transbordando conteúdo
+
Nesta lição, examinaremos outro conceito importante em CSS - overflow, efeito de transbordar. O overflow é o que acontece quando há muito conteúdo para ser contido adequadamente dentro de uma "caixa". Neste guia, você aprenderá o que é e como gerenciá-lo.
+
Valores CSS e unidades
+
Cada propriedade usada em CSS tem um valor ou um conjunto de valores que são permitidos para uma dada propriedade, veremos alguns dos valores e unidades mais comuns em uso.
+
Dimensionando itens em CSS
+
Nas várias lições até agora, você encontrou várias maneiras de dimensionar itens em uma página da Web usando CSS. É importante entender o tamanho dos diferentes recursos do seu design e, nesta lição, resumiremos as várias maneiras pelas quais os elementos obtêm um tamanho via CSS e definiremos alguns termos de dimensionamento que ajudarão você no futuro.
+
Imagens, mídia, e elementos de formulário
+
Nesta lição, veremos como certos elementos especiais são tratados no CSS. Imagens, outras mídias e elementos de formulário se comportam de maneira um pouco diferente em termos de sua capacidade de estilizá-los com CSS do que as caixas regulares. Compreender o que é e o que não é possível pode poupa-lo de algumas frustrações, e esta lição destacará algumas das principais coisas que você precisa saber.
+
Estilizando Tabelas
+
Estilizar uma tabela HTML não é o trabalho mais fascinante do mundo, mas às vezes todos nós precisamos fazê-lo. Este artigo fornece um guia para melhorar a aparência das tabelas HTML, com algumas técnicas específicas de estilo de tabela destacadas.
+
Depurando CSS
+
Às vezes, ao escrever CSS, você encontrará um problema em que seu CSS parece não estar fazendo o que você espera. Este artigo fornecerá orientações sobre como depurar um problema de CSS e mostrará como os DevTools (ferramentas de desenvolvedor) incluídos em todos os navegadores modernos podem ajudá-lo a descobrir o que está acontecendo.
+
Organizando seu CSS
+
Ao começar a trabalhar com folhas de estilo e em projetos maiores, você descobrirá que manter um grande arquivo CSS pode ser desafiador. Neste artigo, examinaremos brevemente algumas práticas recomendadas para escrever seu CSS para facilitar a manutenção e algumas das soluções que você encontrará em uso por outras pessoas para ajudar a melhorar a capacidade de manutenção.
+
+ +

Avaliações

+ +

Deseja testar suas habilidades de CSS? As avaliações a seguir testarão sua compreensão do CSS abordado nos guias acima.

+ +
+
Entendimento fundamental de CSS
+
Esta avaliação testará seu entendimento da sintaxe básica, seletores, especificidade, modelo caixa, e mais.
+
Criando uma carta timbrada ideal
+
Se você deseja causar uma boa impressão, escrever uma carta em papel timbrado bonito pode ser um bom começo. Nesta avaliação, desafiaremos você a criar um modelo online para obter essa aparência.
+
Caixa de estilo atraente
+
Aqui você aprenderá a usar o estilo de plano de fundo e borda para criar uma caixa agradável.
+
+ +

Veja também

+ +
+
Efeitos de estilo avançados
+
Este artigo funciona como uma caixa de truques, fornecendo uma introdução a alguns recursos avançados de estilo interessantes, como sombras de caixa, modos de mesclagem e filtros.
+
diff --git a/files/pt-br/learn/css/building_blocks/the_box_model/index.html b/files/pt-br/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..841540a8f0 --- /dev/null +++ b/files/pt-br/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: The box model +slug: Aprender/CSS/Construindo_blocos/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para ser capaz de criar arranjos ( layouts ) com CSS, ou para alinhar itens com outros itens. Nesta lição, olharemos de modo apropiado para o modelo de caixas do CSS ( CSS Box Model ), de forma que você possa montar arranjos mais complexos com um melhor entendimento de como ele funciona e da terminologia relacionada.

+ + + + + + + + + + + + +
Pré-requisitos:Familiaridade básica em utilizar computadores, ambiente de trabalho básico configurado conforme detalhado emsoftware básico instalado, conhecimento básico de como criar e gerenciar arquivos, básico de HTML ( Introdução ao HTML), e uma idéia de como o  CSS funciona (ensinado em CSS primeiros passos.)
Objetivo:Aprender sobre o Modelo de Caixa do CSS, o que faz o modelo de caixa e como trocar para um modelo alternativo.
+ +

Block and inline boxes

+ +

In CSS we broadly have two types of boxes — block boxes and inline boxes. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:

+ +

If a box is defined as a block, it will behave in the following ways:

+ + + +

Unless we decide to change the display type to inline, elements such as headings (e.g. <h1>) and <p> all use block as their outer display type by default.

+ +

If a box has an outer display type of inline, then:

+ + + +

The <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default.

+ +

The type of box applied to an element is defined by {{cssxref("display")}} property values such as block and inline, and relates to the outer value of display.

+ +

Além disto: Tipos de exibição ( display ) internos e externos

+ +

Nesse ponto, é melhor também explicar os tipos de exibição interna ( inner ) e externa ( outer ). Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha.

+ +

Caixas possuem também um tipo de display inner, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( normal flow ), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima).

+ +

We can, however, change the inner display type by using display values like flex. If we set display: flex; on an element, the outer display type is block, but the inner display type is changed to flex. Any direct children of this box will become flex items and will be laid out according to the rules set out in the Flexbox spec, which you'll learn about later on.

+ +
+

Note: To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to Block and Inline Layout.

+
+ +

When you move on to learn about CSS Layout in more detail, you will encounter flex, and various other inner values that your boxes can have, for example grid.

+ +

Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as normal flow, because without any other instruction, our boxes lay out as block or inline boxes.

+ +

Examples of different display types

+ +

Let's move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of block. The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.

+ +

The second is a list, which is laid out using display: flex. This establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.

+ +

Below this, we have a block-level paragraph, inside which are two <span> elements. These elements would normally be inline, however, one of the elements has a class of block, and we have set it to display: block.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

+ +

We can see how inline elements behave in this next example. The <span> elements in the first paragraph are inline by default and so do not force line breaks.

+ +

We also have a <ul> element which is set to display: inline-flex, creating an inline box around some flex items.

+ +

Finally, we have two paragraphs both set to display: inline. The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.

+ +

In the example, you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

+ +

You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout. 

+ +

In the rest of the lesson, we will concentrate on the outer display type.

+ +

What is the CSS box model?

+ +

The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.

+ +

Parts of a box

+ +

Making up a block box in CSS we have the:

+ + + +

The below diagram shows these layers:

+ +

Diagram of the box model

+ +

The standard CSS box model

+ +

In the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.

+ +

If we assume that the box has the following CSS defining width, height, margin, border, and padding:

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

Note: The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.

+
+ +

The alternative CSS box model

+ +

You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).

+ +

Showing the size of the box when the alternate box model is being used.

+ +

By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting box-sizing: border-box on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.

+ +
.box {
+  box-sizing: border-box;
+}
+ +

If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the box-sizing property on the <html> element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see the CSS Tricks article on box-sizing.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

Note: An interesting bit of history — Internet Explorer used to default to the alternative box model, with no mechanism available to switch.

+
+ +

Playing with box models

+ +

In the below example, you can see two boxes. Both have a class of .box, which gives them the same width, height, margin, border, and padding. The only difference is that the second box has been set to use the alternative box model.

+ +

Can you change the size of the second box (by adding CSS to the .alternate class) to make it match the first box in width and height?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

+ +
+

Note: You can find a solution for this task here.

+
+ +

Use browser DevTools to view the box model

+ +

Your browser developer tools can make understanding the box model far easier. If you inspect an element in Firefox's DevTools, you can see the size of the element plus its margin, padding, and border. Inspecting an element in this way is a great way to find out if your box is really the size you think it is!

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

Margins, padding, and borders

+ +

You've already seen the {{cssxref("margin")}}, {{cssxref("padding")}}, and {{cssxref("border")}} properties at work in the example above. The properties used in that example are shorthands and allow us to set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.

+ +

Let's explore these properties in more detail.

+ +

Margin

+ +

The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it to overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.

+ +

We can control all margins of an element at once using the {{cssxref("margin")}} property, or each side individually using the equivalent longhand properties:

+ + + +

In the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

+ +

Margin collapsing

+ +

A key thing to understand about margins is the concept of margin collapsing. If you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. If one or both margins are negative, the amount of negative value will subtract from the total.

+ +

In the example below, we have two paragraphs. The top paragraph has a margin-bottom of 50 pixels. The second paragraph has a margin-top of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins.

+ +

You can test this by setting the margin-top of paragraph two to 0. The visible margin between the two paragraphs will not change — it retains the 50 pixels set in the bottom-margin of paragraph one. If you set it to -10px, you'll see that the overall margin becomes 40px — it subtracts from the 50px.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

+ +

There are a number of rules that dictate when margins do and do not collapse. For further information see the detailed page on mastering margin collapsing. The main thing to remember for now is that margin collapsing is a thing that happens. If you are creating space with margins and don't get the space you expect, this is probably what is happening.

+ +

Borders

+ +

The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the width and height of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available width and height.

+ +

For styling borders, there are a large number of properties — there are four borders, and each border has a style, width and color that we might want to manipulate.

+ +

You can set the width, style, or color of all four borders at once using the {{cssxref("border")}} property.

+ +

To set the properties of each side individually, you can use:

+ + + +

To set the width, style, or color of all sides, use the following:

+ + + +

To set the width, style, or color of a single side, you can use one of the most granular longhand properties:

+ + + +

In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

+ +

Padding

+ +

The padding sits between the border and the content area. Unlike margins you cannot have negative amounts of padding, so the value must be 0 or a positive value. Any background applied to your element will display behind the padding, and it is typically used to push the content away from the border.

+ +

We can control the padding on each side of an element individually using the {{cssxref("padding")}} property, or each side individually using the equivalent longhand properties:

+ + + +

If you change the values for padding on the class .box in the example below you can see that this changes where the text begins in relation to the box.

+ +

You can also change the padding on the class .container, which will make space between the container and the box. Padding can be changed on any element, and will make space between its border and whatever is inside the element.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

+ +

The box model and inline boxes

+ +

All of the above applies fully to block boxes. Some of the properties can apply to inline boxes too, such as those created by a <span> element.

+ +

In the example below, we have a <span> inside a paragraph and have applied a width, height, margin, border, and padding to it. You can see that the width and height are ignored. The vertical margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph. Horizontal padding, margins, and borders are respected and will cause other content to move away from the box.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

+ +

Using display: inline-block

+ +

There is a special value of display, which provides a middle ground between inline and block. This is useful for situations where you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping seen above.

+ +

An element with display: inline-block does a subset of the block things we already know about:

+ + + +

It does not, however, break onto a new line, and will only become larger than its content if you explicitly add width and height properties.

+ +

In this next example, we have added display: inline-block to our <span> element. Try changing this to display: block or removing the line completely to see the difference in display models.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

+ +

Where this can be useful is when you want to give a link to a larger hit area by adding padding. <a> is an inline element like <span>; you can use display: inline-block to allow padding to be set on it, making it easier for a user to click the link.

+ +

You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the <a> element as we want to be able to change the background-color when the <a> is hovered. The padding appears to overlap the border on the <ul> element. This is because the <a> is an inline element.

+ +

Add display: inline-block to the rule with the .links-list a selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

+ +

Test your skills!

+ +

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: The Box Model.

+ +

Summary

+ +

That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout.

+ +

In the next lesson, we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html b/files/pt-br/learn/css/css_layout/fluxo_normal/index.html deleted file mode 100644 index c27a403fa7..0000000000 --- a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Fluxo Normal -slug: Learn/CSS/CSS_layout/Fluxo_Normal -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Este artigo aborda o Fluxo Normal de alinhamento e acomodação do conteúdo de uma página HTML, na qual o desenvolvedor não inseriu estilos pessoais. Este fluxo é um padrão usado pelos navegodares web. É uma solução preguiçosa ou rápida. Se o Fluxo Normal por ventura não desagradar o programador, poupado será o seu tempo e esforço. Com o ônus adiado para quando ele quiser algo diferente.

- - - - - - - - - - - - -
Prerrequisitos:Introdução ao HTML (study Introduction to HTML), e uma noção de como o CSS funciona (study Introduction to CSS.)
Objectivo:Explicar qual é o leiaute padrão aplicado pelos navegadores web - a um arquivo HTML - sempre que não houver estilo ou formatos definidos pelo desenvolvedor da referida página.
- -

Conforme detalhado na última lição de introdução ao leiaute, os elementos em uma página da web acomodam-se em Fluxo Normal, quando não é aplicada qualquer regra CSS para alterar a maneira como estes se comportam.  And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. Starting with a solid, well-structured document that is readable in normal flow is the best way to begin any webpage. It ensures that your content is readable, even if the user is using a very limited browser or a device such as a screen reader that reads out the content of the page. In addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout.

- -

Before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal document flow.

- -

How are elements laid out by default?

- -

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.

- -

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.)

- -

That explains individual elements, but what about how elements interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the block flow direction, based on the parent's writing mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. In English therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically.

- -

Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.

- -

If two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too.

- -

Let's look at a simple example that explains all of this:

- -
-
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Summary

- -

Now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html b/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html deleted file mode 100644 index 9314e8efd3..0000000000 --- a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html +++ /dev/null @@ -1,707 +0,0 @@ ---- -title: Introdução ao leiaute com CSS -slug: Learn/CSS/CSS_layout/Intro_leiaute_CSS -translation_of: Learn/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
- -

This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.

- - - - - - - - - - - - -
Prerequisites:The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.)
Objective:To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.
- -

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are

- - - -

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

- -

Normal flow

- -

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:

- -
<p>I love my cat.</p>
-
-<ul>
-  <li>Buy cat food</li>
-  <li>Exercise</li>
-  <li>Cheer up friend</li>
-</ul>
-
-<p>The end!</p>
- -

By default, the browser will display this code as follows:

- -

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

- -

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.

- -

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

- -
-

Note: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.

-
- -

When you use CSS to create a layout, you are moving the elements away from the normal flow, but for many of the elements on your page the normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important, as you can then work with the way things are laid out by default rather than fighting against it.

- -

The methods that can change how elements are laid out in CSS are as follows:

- - - -

The display property

- -

The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way something displays. Everything in normal flow has a value of display, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is display: inline by default.

- -

You can change this default display behavior. For example, the {{htmlelement("li")}} element is display: block by default, meaning that list items display one below the other in our English document. If we change the display value to inline they now display next to each other, as words would do in a sentence. The fact that you can change the value of display for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.

- -

In addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are display: flex and display: grid.

- -

Flexbox

- -

Flexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.

- -

The HTML markup below gives us a containing element, with a class of wrapper, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.

- -

However, if we add display: flex to the parent, the three items now arrange themselves into columns. This is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row, because the initial value of {{cssxref("flex-direction")}} set on their parent is row. They all appear to stretch to the height of the tallest item, because the initial value of the {{cssxref("align-items")}} property set on their parent is stretch. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_1', '300', '200') }}

- -

In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.

- -

As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of 1. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_2', '300', '200') }}

- -
-

Note: This has been a very short introduction to what is possible in Flexbox, to find out more, see our Flexbox article.

-
- -

Grid Layout

- -

While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.

- -

Once again, you can switch on Grid Layout with a specific value of display — display: grid. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using display: grid, we are also defining some row and column tracks on the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns each of 1fr and two rows of 100px. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-    <div class="box4">Four</div>
-    <div class="box5">Five</div>
-    <div class="box6">Six</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. This causes the items to span multiple tracks.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
-.box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
-}
-
-.box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-.box3 {
-    grid-row: 2;
-    grid-column: 3;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Note: These two examples are just a small part of the power of Grid layout; to find out more see our Grid Layout article.

-
- -

The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.

- -

Floats

- -

Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.

- -

The {{cssxref("float")}} property has four possible values:

- - - -

In the example below we float a <div> left, and give it a {{cssxref("margin")}} on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.

- -
- - -
<h1>Simple float example</h1>
-
-<div class="box">Float</div>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
- -
-.box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
-}
-
-
- -

{{ EmbedLiveSample('Float_1', '100%', 600) }}

- -
-

Note: Floats are fully explained in our lesson on the float and clear properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on legacy layout methods.

-
- -

Positioning techniques

- -

Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.

- -

There are however useful techniques for certain layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.

- -

There are five types of positioning you should know about:

- - - -

Simple positioning example

- -

To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:

- -
<h1>Positioning</h1>
-
-<p>I am a basic block level element.</p>
-<p class="positioned">I am a basic block level element.</p>
-<p>I am a basic block level element.</p>
- -

This HTML will be styled by default using the following CSS:

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
-}
-
- -

The rendered output is as follows:

- -

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

- -

Relative positioning

- -

Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:

- -
.positioned {
-  position: relative;
-  top: 30px;
-  left: 30px;
-}
- -

Here we give our middle paragraph a {{cssxref("position")}} value of relative — this doesn't do anything on its own, so we also add {{cssxref("top")}} and {{cssxref("left")}} properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.

- -

Adding this code will give the following result:

- -
- - -
.positioned {
-  position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

- -

Absolute positioning

- -

Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.

- -

Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:

- -
.positioned {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
- -

Here we give our middle paragraph a {{cssxref("position")}} value of absolute, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:

- -
- - -
.positioned {
-    position: absolute;
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

- -

This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The {{cssxref("top")}} and {{cssxref("left")}} properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on positioning.

- -

Fixed positioning

- -

Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.

- -

For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give position: fixed.

- -
<h1>Fixed positioning</h1>
-
-<div class="positioned">Fixed</div>
-
-<p>Paragraph 1.</p>
-<p>Paragraph 2.</p>
-<p>Paragraph 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Sticky positioning

- -

Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has position: sticky it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had position: fixed applied.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Note: to find more out about positioning, see our Positioning article.

-
- -

Table layout

- -

HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).

- -

The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".

- -

The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.

- -

Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a {{htmlelement("div")}}, for layout purposes.

- -
<form>
-  <p>First of all, tell us your name and age.</p>
-  <div>
-    <label for="fname">First name:</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Last name:</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Age:</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the {{cssxref("display")}} property. The {{htmlelement("form")}}, {{htmlelement("div")}}s, and {{htmlelement("label")}}s and {{htmlelement("input")}}s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.

- -

You'll notice that the caption paragraph has been given display: table-caption; — which makes it act like a table {{htmlelement("caption")}} — and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source. This allows for a nice bit of flexibility.

- -
html {
-  font-family: sans-serif;
-}
-
-form {
-  display: table;
-  margin: 0 auto;
-}
-
-form div {
-  display: table-row;
-}
-
-form label, form input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-form label {
-  width: 200px;
-  padding-right: 5%;
-  text-align: right;
-}
-
-form input {
-  width: 300px;
-}
-
-form p {
-  display: table-caption;
-  caption-side: bottom;
-  width: 300px;
-  color: #999;
-  font-style: italic;
-}
- -

This gives us the following result:

- -

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

- -

You can also see this example live at css-tables-example.html (see the source code too.)

- -

Multi-column layout

- -

The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.

- -

To turn a block into a multicol container we use either the {{cssxref("column-count")}} property, which tells the browser how many columns we would like to have, or the {{cssxref("column-width")}} property, which tells the browser to fill the container with as many columns of at least that width.

- -

In the below example we start with a block of HTML inside a containing <div> element with a class of container.

- -
<div class="container">
-    <h1>Multi-column layout</h1>
-
-    <p>Paragraph 1.</p>
-    <p>Paragraph 2.</p>
-
-</div>
-
- -

We are using a column-width of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Summary

- -

This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!

- -

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/pt-br/learn/css/css_layout/introduction/index.html b/files/pt-br/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..9314e8efd3 --- /dev/null +++ b/files/pt-br/learn/css/css_layout/introduction/index.html @@ -0,0 +1,707 @@ +--- +title: Introdução ao leiaute com CSS +slug: Learn/CSS/CSS_layout/Intro_leiaute_CSS +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.

+ + + + + + + + + + + + +
Prerequisites:The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.)
Objective:To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.
+ +

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are

+ + + +

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

+ +

Normal flow

+ +

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:

+ +
<p>I love my cat.</p>
+
+<ul>
+  <li>Buy cat food</li>
+  <li>Exercise</li>
+  <li>Cheer up friend</li>
+</ul>
+
+<p>The end!</p>
+ +

By default, the browser will display this code as follows:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.

+ +

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

+ +
+

Note: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.

+
+ +

When you use CSS to create a layout, you are moving the elements away from the normal flow, but for many of the elements on your page the normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important, as you can then work with the way things are laid out by default rather than fighting against it.

+ +

The methods that can change how elements are laid out in CSS are as follows:

+ + + +

The display property

+ +

The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way something displays. Everything in normal flow has a value of display, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is display: inline by default.

+ +

You can change this default display behavior. For example, the {{htmlelement("li")}} element is display: block by default, meaning that list items display one below the other in our English document. If we change the display value to inline they now display next to each other, as words would do in a sentence. The fact that you can change the value of display for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.

+ +

In addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are display: flex and display: grid.

+ +

Flexbox

+ +

Flexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.

+ +

The HTML markup below gives us a containing element, with a class of wrapper, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.

+ +

However, if we add display: flex to the parent, the three items now arrange themselves into columns. This is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row, because the initial value of {{cssxref("flex-direction")}} set on their parent is row. They all appear to stretch to the height of the tallest item, because the initial value of the {{cssxref("align-items")}} property set on their parent is stretch. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.

+ +

As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of 1. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Note: This has been a very short introduction to what is possible in Flexbox, to find out more, see our Flexbox article.

+
+ +

Grid Layout

+ +

While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.

+ +

Once again, you can switch on Grid Layout with a specific value of display — display: grid. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using display: grid, we are also defining some row and column tracks on the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns each of 1fr and two rows of 100px. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+    <div class="box4">Four</div>
+    <div class="box5">Five</div>
+    <div class="box6">Six</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. This causes the items to span multiple tracks.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Note: These two examples are just a small part of the power of Grid layout; to find out more see our Grid Layout article.

+
+ +

The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.

+ +

Floats

+ +

Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.

+ +

The {{cssxref("float")}} property has four possible values:

+ + + +

In the example below we float a <div> left, and give it a {{cssxref("margin")}} on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.

+ +
+ + +
<h1>Simple float example</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Note: Floats are fully explained in our lesson on the float and clear properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on legacy layout methods.

+
+ +

Positioning techniques

+ +

Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.

+ +

There are however useful techniques for certain layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.

+ +

There are five types of positioning you should know about:

+ + + +

Simple positioning example

+ +

To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:

+ +
<h1>Positioning</h1>
+
+<p>I am a basic block level element.</p>
+<p class="positioned">I am a basic block level element.</p>
+<p>I am a basic block level element.</p>
+ +

This HTML will be styled by default using the following CSS:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

The rendered output is as follows:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Relative positioning

+ +

Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

Here we give our middle paragraph a {{cssxref("position")}} value of relative — this doesn't do anything on its own, so we also add {{cssxref("top")}} and {{cssxref("left")}} properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.

+ +

Adding this code will give the following result:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Absolute positioning

+ +

Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.

+ +

Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

Here we give our middle paragraph a {{cssxref("position")}} value of absolute, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The {{cssxref("top")}} and {{cssxref("left")}} properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on positioning.

+ +

Fixed positioning

+ +

Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.

+ +

For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give position: fixed.

+ +
<h1>Fixed positioning</h1>
+
+<div class="positioned">Fixed</div>
+
+<p>Paragraph 1.</p>
+<p>Paragraph 2.</p>
+<p>Paragraph 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Sticky positioning

+ +

Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has position: sticky it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had position: fixed applied.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Note: to find more out about positioning, see our Positioning article.

+
+ +

Table layout

+ +

HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).

+ +

The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".

+ +

The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.

+ +

Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a {{htmlelement("div")}}, for layout purposes.

+ +
<form>
+  <p>First of all, tell us your name and age.</p>
+  <div>
+    <label for="fname">First name:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Last name:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Age:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the {{cssxref("display")}} property. The {{htmlelement("form")}}, {{htmlelement("div")}}s, and {{htmlelement("label")}}s and {{htmlelement("input")}}s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.

+ +

You'll notice that the caption paragraph has been given display: table-caption; — which makes it act like a table {{htmlelement("caption")}} — and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source. This allows for a nice bit of flexibility.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

This gives us the following result:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

You can also see this example live at css-tables-example.html (see the source code too.)

+ +

Multi-column layout

+ +

The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.

+ +

To turn a block into a multicol container we use either the {{cssxref("column-count")}} property, which tells the browser how many columns we would like to have, or the {{cssxref("column-width")}} property, which tells the browser to fill the container with as many columns of at least that width.

+ +

In the below example we start with a block of HTML inside a containing <div> element with a class of container.

+ +
<div class="container">
+    <h1>Multi-column layout</h1>
+
+    <p>Paragraph 1.</p>
+    <p>Paragraph 2.</p>
+
+</div>
+
+ +

We are using a column-width of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Summary

+ +

This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html b/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html deleted file mode 100644 index 2605843ff4..0000000000 --- a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Layout de varias colunas -slug: Learn/CSS/CSS_layout/Layout_de_varias_colunas -translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
- -

A especificação de layout de várias colunas fornece um método de disposição do conteúdo em colunas, como você pode ver em um jornal. Este artigo explica como usar esse recurso.

- - - - - - - - - - - - -
Pré requisitos:HTML basico (estude Introduction to HTML) e uma ideia de como CSS funciona (estude Introduction to CSS).
Objetivo: -

Aprender como criar layouts de várias colunas em paginas web, tal qual estão formatadas as paginas de um jornal.

- - -
- -

Um exemplo basico

- -

Agora nós vamos explorar como usar layouts de varias colunas, frequentemente referido como multicol. Você pode começar pelo download do arquivo multicol - ponto de partida, e adicionar o CSS nos locais apropriados. Na parte inferior desta seção, você pode ver um exemplo real da aparência do código final.

- -

Nosso ponto de partida contem um HTML simples; um invólucro com uma classe de container  dentro do qual há um cabeçalho e alguns parágrafos.

- -

O {{htmlelement("div")}} com a classe de container se tornará nosso muticol container. Nós ativamos o multicol usando uma de duas propriedades {{cssxref("column-count")}} ou {{cssxref("column-width")}}. A propriedade column-count criará tantas colunas quanto o valor que você atribuir; portanto, se voce adicionar o seguinte CSS à sua stylesheet e recarregar a pagina, você obterá três colunas:

- -

- 

.container {
-  column-count: 3;
-}
-
- - -

As colunas que você criar têm larguras flexíveis - o navegador calcula quanto espaço será atribuido a cada coluna.

- -
- - -
<div class="container">
-  <h1>Simple multicol example</h1>
-
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
-</div>
-
- -
.container {
-  column-count: 3;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

- -

Mude o seu CSS para usar column-width, como a seguir:

- -
.container {
-  column-width: 200px;
-}
-
- -

O navegador agora fornecerá o maior número possível de colunas, do tamanho que você especificar; qualquer espaço restante é compartilhado entre as colunas existentes. Isso significa que você não terá exatamente a largura que especificar, a menos que seu container seja exatamente divisível por essa largura.

- -
- - -
.container {
-  column-width: 200px;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

- -

Styling the columns

- -

The columns created by multicol cannot be styled individually. There is no way to make one column bigger than other columns, or to change the background or text color of a single column. You have two opportunities to change the way that columns display:

- - - -

Using your example above, change the size of the gap by adding a column-gap property:

- -
.container {
-  column-width: 200px;
-  column-gap: 20px;
-}
- -

You can play around with different values — the property accepts any length unit. Now add a rule between the columns, with column-rule. In a similar way to the {{cssxref("border")}} property that you encountered in previous lessons, column-rule is a shorthand for {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}}, and {{cssxref("column-rule-width")}}, and accepts the same values as border.

- -
.container {
-  column-count: 3;
-  column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
-}
- -

Try adding rules of different styles and colors.

- -
- -
- -

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

- -

Something to take note of is that the rule does not take up any width of its own. It lies across the gap you created with column-gap. To make more space either side of the rule you will need to increase the column-gap size.

- -

Columns and fragmentation

- -

The content of a multi-column layout is fragmented. It essentially behaves the same way as content behaves in paged media — such as when you print a webpage. When you turn your content into a multicol container it is fragmented into columns, and the content breaks to allow this to happen.

- -

Sometimes, this breaking will happen in places that lead to a poor reading experience. In the live example below, I have used multicol to lay out a series of boxes, each of which have a heading and some text inside. The heading becomes separated from the text if the columns fragment between the two.

- -
- - -
<div class="container">
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-</div>
-
- -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

- -

To control this behavior we can use properties from the CSS Fragmentation specification. This specification gives us properties to control breaking of content in multicol and in paged media. For example, add the property {{cssxref("break-inside")}} with a value of avoid to the rules for .card. This is the container of the heading and text, and therefore we do not want to fragment this box.

- -

At the present time it is also worth adding the older property page-break-inside: avoid for best browser support.

- -
.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

Reload the page and your boxes should stay in one piece.

- -
- - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

- -

Summary

- -

You now know how to use the basic features of multiple-column layout, another tool at your disposal when choosing a layout method for the designs you are building.

- -

See also

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..2605843ff4 --- /dev/null +++ b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,414 @@ +--- +title: Layout de varias colunas +slug: Learn/CSS/CSS_layout/Layout_de_varias_colunas +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
+ +

A especificação de layout de várias colunas fornece um método de disposição do conteúdo em colunas, como você pode ver em um jornal. Este artigo explica como usar esse recurso.

+ + + + + + + + + + + + +
Pré requisitos:HTML basico (estude Introduction to HTML) e uma ideia de como CSS funciona (estude Introduction to CSS).
Objetivo: +

Aprender como criar layouts de várias colunas em paginas web, tal qual estão formatadas as paginas de um jornal.

+ + +
+ +

Um exemplo basico

+ +

Agora nós vamos explorar como usar layouts de varias colunas, frequentemente referido como multicol. Você pode começar pelo download do arquivo multicol - ponto de partida, e adicionar o CSS nos locais apropriados. Na parte inferior desta seção, você pode ver um exemplo real da aparência do código final.

+ +

Nosso ponto de partida contem um HTML simples; um invólucro com uma classe de container  dentro do qual há um cabeçalho e alguns parágrafos.

+ +

O {{htmlelement("div")}} com a classe de container se tornará nosso muticol container. Nós ativamos o multicol usando uma de duas propriedades {{cssxref("column-count")}} ou {{cssxref("column-width")}}. A propriedade column-count criará tantas colunas quanto o valor que você atribuir; portanto, se voce adicionar o seguinte CSS à sua stylesheet e recarregar a pagina, você obterá três colunas:

+ +

+ 

.container {
+  column-count: 3;
+}
+
+ + +

As colunas que você criar têm larguras flexíveis - o navegador calcula quanto espaço será atribuido a cada coluna.

+ +
+ + +
<div class="container">
+  <h1>Simple multicol example</h1>
+
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+
+ +
.container {
+  column-count: 3;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

+ +

Mude o seu CSS para usar column-width, como a seguir:

+ +
.container {
+  column-width: 200px;
+}
+
+ +

O navegador agora fornecerá o maior número possível de colunas, do tamanho que você especificar; qualquer espaço restante é compartilhado entre as colunas existentes. Isso significa que você não terá exatamente a largura que especificar, a menos que seu container seja exatamente divisível por essa largura.

+ +
+ + +
.container {
+  column-width: 200px;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

+ +

Styling the columns

+ +

The columns created by multicol cannot be styled individually. There is no way to make one column bigger than other columns, or to change the background or text color of a single column. You have two opportunities to change the way that columns display:

+ + + +

Using your example above, change the size of the gap by adding a column-gap property:

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

You can play around with different values — the property accepts any length unit. Now add a rule between the columns, with column-rule. In a similar way to the {{cssxref("border")}} property that you encountered in previous lessons, column-rule is a shorthand for {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}}, and {{cssxref("column-rule-width")}}, and accepts the same values as border.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Try adding rules of different styles and colors.

+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

+ +

Something to take note of is that the rule does not take up any width of its own. It lies across the gap you created with column-gap. To make more space either side of the rule you will need to increase the column-gap size.

+ +

Columns and fragmentation

+ +

The content of a multi-column layout is fragmented. It essentially behaves the same way as content behaves in paged media — such as when you print a webpage. When you turn your content into a multicol container it is fragmented into columns, and the content breaks to allow this to happen.

+ +

Sometimes, this breaking will happen in places that lead to a poor reading experience. In the live example below, I have used multicol to lay out a series of boxes, each of which have a heading and some text inside. The heading becomes separated from the text if the columns fragment between the two.

+ +
+ + +
<div class="container">
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+</div>
+
+ +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

+ +

To control this behavior we can use properties from the CSS Fragmentation specification. This specification gives us properties to control breaking of content in multicol and in paged media. For example, add the property {{cssxref("break-inside")}} with a value of avoid to the rules for .card. This is the container of the heading and text, and therefore we do not want to fragment this box.

+ +

At the present time it is also worth adding the older property page-break-inside: avoid for best browser support.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Reload the page and your boxes should stay in one piece.

+ +
+ + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

+ +

Summary

+ +

You now know how to use the basic features of multiple-column layout, another tool at your disposal when choosing a layout method for the designs you are building.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/css/css_layout/normal_flow/index.html b/files/pt-br/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..c27a403fa7 --- /dev/null +++ b/files/pt-br/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Fluxo Normal +slug: Learn/CSS/CSS_layout/Fluxo_Normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Este artigo aborda o Fluxo Normal de alinhamento e acomodação do conteúdo de uma página HTML, na qual o desenvolvedor não inseriu estilos pessoais. Este fluxo é um padrão usado pelos navegodares web. É uma solução preguiçosa ou rápida. Se o Fluxo Normal por ventura não desagradar o programador, poupado será o seu tempo e esforço. Com o ônus adiado para quando ele quiser algo diferente.

+ + + + + + + + + + + + +
Prerrequisitos:Introdução ao HTML (study Introduction to HTML), e uma noção de como o CSS funciona (study Introduction to CSS.)
Objectivo:Explicar qual é o leiaute padrão aplicado pelos navegadores web - a um arquivo HTML - sempre que não houver estilo ou formatos definidos pelo desenvolvedor da referida página.
+ +

Conforme detalhado na última lição de introdução ao leiaute, os elementos em uma página da web acomodam-se em Fluxo Normal, quando não é aplicada qualquer regra CSS para alterar a maneira como estes se comportam.  And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. Starting with a solid, well-structured document that is readable in normal flow is the best way to begin any webpage. It ensures that your content is readable, even if the user is using a very limited browser or a device such as a screen reader that reads out the content of the page. In addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout.

+ +

Before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal document flow.

+ +

How are elements laid out by default?

+ +

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.

+ +

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.)

+ +

That explains individual elements, but what about how elements interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the block flow direction, based on the parent's writing mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. In English therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically.

+ +

Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.

+ +

If two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too.

+ +

Let's look at a simple example that explains all of this:

+ +
+
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Summary

+ +

Now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html b/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html deleted file mode 100644 index 4084647920..0000000000 --- a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html +++ /dev/null @@ -1,502 +0,0 @@ ---- -title: Como CSS é estruturado -slug: Learn/CSS/First_steps/Como_CSS_e_estruturado -translation_of: Learn/CSS/First_steps/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Agora que você tem uma ideia sobre o que é o CSS e seu uso basico, é hora de olhar um pouco mais a fundo das estruturas da linguagem em si. Nós ja conhecemos muitos conceitos discutidos aqui, entretanto, você pode voltar para qualquer um em específico, se achar algum dos proximos conceitos um tanto confuso

- - - - - - - - - - - - -
Pré-requisitos:Conceitos básicos de computação, softwares básicos instalados, conhecimentos básicos de operação com arquivos,  básico de HTML (veja Introdução ao HTML), e  uma ideia de Como  funciona o CSS.
Objetivo:Aprender as estruturas da sintaxe básica do CSS em detalhes.
- -

Aplicando CSS no seu HTML

- -

A primeira coisa que você vai olhar é, os três métodos de aplicação do CSS em um documento.

- -

Folha de Estilos Externa

- -

Em Começando com o CSS nós linkamos uma folha de estilos externas em nossa página. Isso é o metodo mias comum utilizado para juntar CSS em um documento, podendo utilizar tal método em multiplas páginas, permitindo você estillizar todas as páginas como as mesmas folha de estilos. Na maioria dos casos, as diferentes páginas do site vão parecer bem iguais entre si e por isso você pode usar as mesmas regras para o estilo padrão da página.

- -

Uma folha de estilos externa  é quando você tem seu CSS escrito em um arquivo separado com uma extensão .css, e você o refere dentro de um elemento <link> do HTML:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My CSS experiment</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <p>This is my first CSS example</p>
-  </body>
-</html>
- -

O arquivo CSS deve se parecer com algo nesse estilo:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

O atributo href do elemento {{htmlelement("link")}}, precisa fazer referência a um arquivo em nosso sistema de arquivos.

- -

No exemplo abaixo, o arquivo CSS está na mesma pasta que o documento HTML, mas você pode colocá-lo em outro lugar e reajustar o caminho marcado para encontrá-lo, como a seguir: 

- -
<!-- Inside a subdirectory called styles inside the current directory -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Go up one directory level, then inside a subdirectory called styles -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Folha de estilos interna

- -

Uma folha de estilos interna é  usada quando você não tem um arquivo CSS externo, mas, ao contrário,  coloca seu CSS dentro de elemento {{htmlelement("style")}} localizado no {{htmlelement("head")}} do documento HTML.

- -

Deste modo, seu HTML se parecerá assim:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My CSS experiment</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <p>This is my first CSS example</p>
-  </body>
-</html>
- -

Isso pode ser útil em algumas circunstâncias (talvez você esteja trabalhando em um sistema de gerenciamento de conteúdo - CMS - onde não tem permissão para modificar diretamente os arquivos CSS), entretanto isso não é tão eficiente quanto o uso de folhas de estilo externas — em um website, o CSS precisaria ser repetido em todas as páginas e atualizado em vários locais sempre que mudanças fossem necessárias.

- -

Estilos inline

- -

Estilos inline são declarações CSS que afetam apenas um determinado elemento, inserido em um atributo style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My CSS experiment</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
-    <p style="color:red;">This is my first CSS example</p>
-  </body>
-</html>
- -

Por favor, não utilize isso a menos que seja estritamente necessário! É péssimo para manutenção (você precisará atualizar a mesma informação diversas vezes em cada documento), além do que, mistura sua informação de estilização do CSS com sua informação de estrutura HTML, tornando seu código de difícil leitura e compreensão. Manter diferentes tipos de código separados torna o trabalho muito mais fácil para todos os que trabalham no código.

- -

Existem alguns lugares onde o estilo embutido é mais comum, ou mesmo aconselhável. Você pode ter que recorrer ao uso deles se seu ambiente de trabalho for realmente restritivo (talvez o seu CMS permita apenas que você edite o corpo do HTML). Você também os verá sendo muito usados em e-mails em HTML de modo a obter compatibilidade com o maior número possível de clientes de e-mail.

- -

Playing with the CSS in this article

- -

There is a lot of CSS to play with in this article. To do so, we'd recommend creating a new directory/folder on your computer, and inside it creating a copy of the following two files:

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>My CSS experiments</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Create your test HTML here</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Create your test CSS here */
-
-p {
-  color: red;
-}
- -

Then, when you come across some CSS you want to experiment with, replace the HTML <body> contents with some HTML to style, and start adding CSS to style it inside your CSS file.

- -

If you are not using a system where you can easily create files, you can instead use the interactive editor below to experiment.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

- -

Read on, and have fun!

- -

Seletores

- -

Não é possível falar de CSS sem conhecer os seletores, e nós já descobrimos vários tipos diferentes no tutorial Começando com o Css. Um seletor é o modo pelo qual nós apontamos para alguma coisa no nosso documento HTML para aplicar os estilos à ela. Se os seus estilos não forem aplicados, então é provável que o seu seletor não esteja ligado aquilo que você pensa que ele deveria.

- -

Each CSS rule starts with a selector or a list of selectors in order to tell the browser which element or elements the rules should apply to. All of the following are examples of valid selectors, or lists of selectors.

- -
h1
-a:link
-.manythings
-#onething
-*
-.box p
-.box p:first-child
-h1, h2, .intro
- -

Try creating some CSS rules that use the above selectors, and some HTML to be styled by them. If you don't know what some of the above syntax means, try searching for it on MDN!

- -
-

Note: You will learn a lot more about selectors in our CSS selectors tutorials, in the next module.

-
- -

Specificity

- -

There will often be scenarios where two selectors could select the same HTML element. Consider the stylesheet below where I have a rule with a p selector that will set paragraphs to blue, and also a class that will set selected elements red.

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Let's say that in our HTML document we have a paragraph with a class of special. Both rules could apply, so which one wins? What color do you think our paragraph will become?

- -
<p class="special">What color am I?</p>
- -

The CSS language has rules to control which rule will win in the event of a collision — these are called cascade and specificity. In the below code block we have defined two rules for the p selector, but the paragraph ends up being colored blue. This is because the declaration that sets it to blue appears later in the stylesheet, and later styles override earlier ones. This is the cascade in action.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

However, in the case of our earlier block with the class selector and the element selector, the class will win, making the paragraph red — even thought it appears earlier in the stylesheet. A class is described as being more specific, or having more specificity than the element selector, so it wins.

- -

Try the above experiment for yourself — add the HTML to your experiment, then add the two p { ... } rules to your stylesheet. Next, change the first p selector to .special to see how it changes the styling.

- -

The rules of specificity and the cascade can seem a little complicated at first and are easier to understand once you have built up further CSS knowledge. In our Cascade and inheritance article, which you'll get to in the next module, I'll explain this in detail, including how to calculate specificity. For now, remember that this exists, and that sometimes CSS might not apply like you expect it to because something else in your stylesheet has a higher specificity. Identifying that more than one rule could apply to an element is the first step in fixing such issues.

- -

Propriedades e valores

- -

At its most basic level, CSS consists of two building blocks:

- - - -

The below image highlights a single property and value. The property name is color, and the value blue.

- -

A declaration highlighted in the CSS

- -

A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. This next image shows our CSS with the declaration block highlighted.

- -

A highlighted declaration block

- -

Finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules). Our image contains two rules, one for the h1 selector and one for the p selector. The rule for h1 is highlighted.

- -

The rule for h1 highlighted

- -

Setting CSS properties to specific values is the core function of the CSS language. The CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out and style it. What is important to remember is that both properties and values are case-sensitive in CSS. The property and value in each pair is separated by a colon (:).

- -

Try looking up different values of the following properties, and writing CSS rules that apply them to different HTML elements:

- - - -
-

Important: If a property is unknown or if a value is not valid for a given property, the declaration is deemed invalid and is completely ignored by the browser's CSS engine.

-
- -
-

Important: In CSS (and other web standards), US spelling has been agreed on as the standard to stick to where language uncertainty arises. For example, color should always be spelled color. colour won't work.

-
- -

Functions

- -

While most values are relatively simple keywords or numeric values, there are some possible values which take the form of a function. An example would be the calc() function. This function allows you to do simple math from within your CSS, for example:

- -
-
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

This renders like so:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

A function consists of the function name, and then some brackets into which the allowed values for that function are placed. In the case of the calc() example above I am asking for the width of this box to be 90% of the containing block width, minus 30 pixels. This isn't something I can calculate ahead of time and just enter the value into the CSS, as I don't know what 90% will be. As with all values, the relevant page on MDN will have usage examples so you can see how the function works.

- -

Another example would be the various values for {{cssxref("transform")}}, such as rotate().

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

The output from the above code looks like this:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Try looking up different values of the following properties, and writing CSS rules that apply them to different HTML elements:

- - - -

@rules

- -

As yet, we have not encountered @rules (pronounced "at-rules"). These are special rules giving CSS some instruction on how to behave. Some @rules are simple with the rule name and a value. For example, to import an additional stylesheet into your main CSS stylesheet you can use @import:

- -
@import 'styles2.css';
- -

One of the most common @rules you will come across is @media, which allows you to use media queries to apply CSS only when certain conditions are true (e.g. when the screen resolution is above a certain amount, or the screen is wider than a certain width).

- -

In the below CSS, we have a stylesheet that gives the <body> element a pink background color. However, we then use @media to create a section of our stylesheet that will only be applied in browsers with a viewport wider than 30em. If the browser is wider than 30em then the background color will be blue.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

You will encounter other @rules throughout these tutorials.

- -

See if you can add a media query to your CSS that changes styles based on the viewport width. Change the width of your browser window to see the result.

- -

Shorthands

- -

Some properties like {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("margin")}} are called shorthand properties — this is because they allow you to set several property values in a single line, saving time and making your code neater in the process.

- -

For example, this line:

- -
/* In 4-value shorthands like padding and margin, the values are applied
-   in the order top, right, bottom, left (clockwise from the top). There are also other
-   shorthand types, for example 2-value shorthands, which set padding/margin
-   for top/bottom, then left/right */
-padding: 10px 15px 15px 5px;
- -

Does the same thing as all these together:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Whereas this line:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

Does the same thing as all these together:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

We won't attempt to teach these exhaustively now — you'll come across many examples later on in the course, and you are advised to look up the shorthand property names in our CSS reference to find out more.

- -

Try adding the above declarations to your CSS to see how it affects the styling of your HTML. Try experimenting with some different values.

- -
-

Warning: While shorthands often allow you to miss out values, they will then reset any values that you do not include to their initial values. This ensures that a sensible set of values are used. However, this might be confusing if you were expecting the shorthand to only change the values you passed in.

-
- -

Comments

- -

As with HTML, you are encouraged to make comments in your CSS, to help you understand how your code works when coming back to it after several months, and to help others coming to the code to work on it understand it.

- -

Comments in CSS begin with /* and end with */. In the below code block I have used comments to mark the start of different distinct code sections. This is useful to help you navigate your codebase as it gets larger — you can search for the comments in your code editor.

- -
/* Handle basic element styling */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Let's special case the global font size. On large screen or window,
-     we increase the font size for better readability */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* Handle specific elements nested in the DOM  */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  background-style: none
-}
-
-div p{
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Comments are also useful for temporarily commenting out certain parts of the code for testing purposes, for example if you are trying to find which part of your code is causing an error. In the next example I have commented out the rules for the .special selector.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Add some comments to your CSS, to get used to using them.

- -

Whitespace

- -

White space means actual spaces, tabs and new lines. In the same manner as HTML, the browser tends to ignore much of the whitespace inside your CSS; a lot of the whitespace is just there to aid readability.

- -

In our first example below we have each declaration (and rule start/end) on its own line — this is arguably a good way to write CSS, as it makes it easy to maintain and understand:

- -
body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  background-style: none
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; background-style: none}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

The code layout you choose is usually a personal preference, although when you start to work in teams, you may find that the existing team has its own styleguide that specifies an agreed convention to follow.

- -

The whitespace you do need to be careful of in CSS is the whitespace between the properties and their values. For example, the following declarations are valid CSS:

- -
margin: 0 auto;
-padding-left: 10px;
- -

But the following are invalid:

- -
margin: 0auto;
-padding- left: 10px;
- -

0auto is not recognised as a valid value for the margin property (0 and auto are two separate values,) and the browser does not recognise padding- as a valid property. So you should always make sure to separate distinct values from one another by at least a space, but keep property names and property values together as single unbroken strings.

- -

Try playing with whitespace inside your CSS, to see what breaks things and what doesn't.

- -

What's next?

- -

It's useful to understand a little about how the browser takes your HTML and CSS and turns it into a webpage, so in the next article — How CSS works — we will take a look at that process.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Neste módulo

- -
    -
  1. O que é CSS?
    2. -
  2. Começando com CSS
    3. -
  3. Como o CSS é  estruturado
    4. -
  4. Como o CSS funciona
    5. -
  5. Usando seu novo conhecimento
    6. -
diff --git a/files/pt-br/learn/css/first_steps/getting_started/index.html b/files/pt-br/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..a9a5218e98 --- /dev/null +++ b/files/pt-br/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,265 @@ +--- +title: Iniciando com CSS +slug: Learn/CSS/First_steps/Iniciando +tags: + - Aprender + - CSS + - Classes + - Elementos + - Estado + - Iniciante + - Seletores + - Sintaxe +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

Neste artigo iremos pegar um simples documento HTML e aplicar o CSS nele, aprendendo algumas coisas práticas sobre a linguagem no decorrer do processo.

+ + + + + + + + + + + + +
pré-requisitos: +

Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)

+
Objetivo:Entender os fundamentos que vinculam um documento CSS a um arquivo HTML, e ser capaz de estilizar um texto simples com CSS.
+ +

Iniciando com algum HTML

+ +

Nosso ponto de partida e um documento HTML. Você pode copiar o código abaixo se desejar trabalhar no seu próprio computador. Salve-o como index.html em uma pasta, no seu computador.

+ +
<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Getting started with CSS</title>
+</head>
+
+<body>
+
+    <h1>I am a level one heading</h1>
+
+    <p>This is a paragraph of text. In the text is a <span>span element</span>
+and also a <a href="http://example.com">link</a>.</p>
+
+    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
+
+    <ul>
+        <li>Item one</li>
+        <li>Item two</li>
+        <li>Item <em>three</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Observação: Se você está lendo isso em um dispositivo móvel ou em um ambiente onde não possa criar arquivos, não se preocupe — editores de código ao vivo estão disponíveis abaixo para permitir que você escreva o código de exemplo aqui, nesta página.

+
+ +

Adicionando CSS para o nosso documento

+ +

A primeira coisa que precisamos fazer é falar para o HTML que temos algumas regras CSS que desejamos usar. Há três formas diferentes de aplicar CSS a um documento HTML que você normalmente vai encontrar, contudo, por enquanto, iremos olhar para o mais habitual e útil – vincular o CSS a partir do cabeçalho do seu documento.

+ +

Crie um arquivo na mesma pasta em que se encontra o seu documento HTML e salve-o como style.css. A extensão .css nos informa que se trata de um arquivo CSS.

+ +

Para ligar o style.css ao index.html adicione a seguinte linha em algum lugar dentro do {{htmlelement("head")}} do documento HTML:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Este {{htmlelement("link")}} elemento diz ao navegador que temos uma folha de estilo, usando o atributo rel, e a localização desse arquivo como o valor do atributo href. Você pode testar se esse CSS funciona adicionando regras ao styles.css. Usando o seu editor de código, adicione as linhas seguintes ao seu arquivo CSS:

+ +
h1 {
+  color: red;
+}
+ +

Salve os seus arquivos HTML e CSS e atualize a página no seu navegador. O nível de cabeçalho um, no topo do documento, deve estar agora em vermelho. Se tudo estiver correto, parabéns! - Você teve sucesso ao aplicar CSS a um documento HTML. Se nada aconteceu, observe cuidadosamente se você digitou tudo certo.

+ +

Você pode continuar trabalhando no styles.css localmente, ou pode usar nosso editor interativo abaixo pra continuar com este tutorial. O editor interativo age como se o CSS no primeiro painel estivesse vinculado ao documento HTML, assim como fizemos com o documento acima.

+ +

Estilizando elementos HTML

+ +

Fazendo o nosso cabeçalho ficar vermelho, demonstramos que podemos pegar e estilizar um elemento HTML. Fazemos isso especificando um seletor de elemento — Isto é, um seletor que combina diretamente com o nome do elemento HTML. Para especificar todos os parágrafos no documento, você usaria o seletor p. Para tornar todos os parágragos verdes, você usaria:

+ +
p {
+  color: green;
+}
+ +

Você pode especificar múltiplos seletores, separando-os com virgula. Se eu quero que todos os parágrafos e todos os itens da lista se tornem verdes, então minha regra se parecerá com isto:

+ +
p, li {
+    color: green;
+}
+ +

Experimente isso no editor interativo abaixo (edit the code boxes), ou no seu arquivo CSS local.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Alterando o comportamento padrão dos elementos

+ +

Quando olhamos para um documento HTML bem marcado, até algo tão simples como o nosso exemplo, podemos ver como o navegador está tornando o HTML legível adicionando algum estilo padrão. Títulos são grandes e em negritos, nossa lista possui marcadores. Isso acontece porque navegadores tem uma folha de estilo interna contendo estilo padrão, a qual eles aplicam para toda a página por padrão; sem eles, todo o texto seria executado em conjunto e teríamos que estilizar tudo do princípio. Todos os modernos navegadores mostram conteúdo HTML por padrão, da mesma maneira.

+ +

Contudo, você frequentemente irá desejar algo diferente do que foi escolhido pelo navegador. Isso pode ser feito simplesmente escolhendo o elemento HTML que você quer mudar, e usando uma regra CSS para alterar a forma como ele se parece. Um bom exemplo é o nosso <ul>, uma lista não ordenada. Ele tem uma lista marcada, e, se decido não escolher essa marcação, posso removê-los fazendo assim:

+ +
li {
+  list-style-type: none;
+}
+ +

Experimente adicionar isto ao seu CSS agora.

+ +

A propriedade list-style-type é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para list-style-type e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página.

+ +

Olhando para essa página você descobrirá que, além de remover a marcação da lista, que você também pode alterá-los — Teste mudá-los para marcação quadrada, usando valores de square.

+ +

Incluindo uma classe

+ +

Até agora, temos estilizado elementos baseado em seus nomes HTML. isto funciona enquanto você desejar que todos os elementos desse tipo, no seu documento, se pareçam o mesmo. Na maioria das vezes, isso não é o caso, e, então, você precisará encontrar uma maneira de selecionar um subconjunto de elementos sem alterar os outros. A maneira mais comum de fazer isso é adicionar uma classe ao seu elemento HTML e especificar essa classe.

+ +

No seu documento HTML, adicione um atributo de classe ao segundo item da lista. Sua lista se parecerá, agora, assim:

+ +
<ul>
+  <li>Item one</li>
+  <li class="special">Item two</li>
+  <li>Item <em>three</em></li>
+</ul>
+ +

No seu CSS, você pode especificar a classe special criando um seletor que inicia com um caractere de ponto final. Adicione o seguinte código ao seu arquivo CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Salve e recarregue a página no navegador, para visualizar o resultado.

+ +

Você pode aplicar a classe special para qualquer elemento na sua página que desejar ter a mesma aparência o item dessa lista. Por exemplo, pode-se querer que o <span>, no parágrafo, também se torne laranja e em negrito. Experimente adicionar uma class de special a ele, em seguida, recarregue a sua página e veja o que acontece.

+ +

Algumas vezes, verá regras com um seletor que lista o seletor do elemento HTML junto com uma classe:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Essa sintaxe significa "pegue qualquer elementoli que tenha uma classe special". Se você fizesse isso, não seria mais possível aplicar a classe a um <span> ou outro elemento, simplesmente adicionando a classe a ele; você teria que adicionar esse elemento à lista de seletores, assim:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Como pode imaginar, algumas classes podem ser aplicadas a muitos elementos e você não quer ter que editar seu CSS a cada vez que algo novo precisar assumir esse estilo. Portanto, as vezes é melhor ignorar o lemento e simplesmente se referir à classe, a menos que você queira criar algumas regras especiais para um elemento em particular, e, talvez, queira ter certeza que eles não serão aplicados aos outros.

+ +

Estilizando coisas baseadas em sua localização no documento

+ +

Há momentos quando você desejará que algo se pareça diferente, baseado onde ele está no documento. Existem vários seletores que podem lhe ajudar aqui, mas, por enquanto, iremos olhar apenas alguns. No nosso documento estão dois elementos <em> — um dentro de um parágrafo e o outro dentro do item de lista. Para selecionar apenas um <em> aninhado dentro de um elemento <li> posso usar um seletor chamado combinador descendente, a qual simplesmente, assume a forma de um espaço entre dois outros seletores.

+ +

Adicione a seguinte regra a sua folha de estilo.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Este seletor selecionará qualquer elemento <em> que está dentro (um descendente de) um <li>. Deste modo, no seu documento de exemplo, você deve achar que o <em> no terceiro item da lista agora está roxo, mas o que está dentro do parágrafo permanece inalterado.

+ +

Outra coisa que você pode gostar de experimentar é estilizar um parágrafo quando ele vem diretamente após um título no mesmo nível de hierarquia no HTML. Para isso, coloque um +  (um combinador irmão adjacente) entre os seletores.

+ +

Experimente adicionar esta regra à sua folha de estilo também:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

O exemplo ativo abaixo inclui as duas regras acima. Verifique adicionando uma regra para tornar um span vermelho, se ele está dentro de um parágrafo. Você saberá se fez certo quando o span no primeiro parágrafo ficar vermelho, mas o do primeiro item da lista não mudar de cor.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Observação: Como pode ver, CSS nos dá várias maneiras de especificar elementos, e temos somente arranhado a superfície até agora! Analisaremos adequadamente todos esses seletores e muitos outros, nos nossos artigos Seletores posteriormente neste curso.

+
+ +

Estilizando coisas baseadas no estado

+ +

O tipo final de estilo, que vamos dar uma olhada neste tutorial, é a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso é quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento <a> (âncora). Isto possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está passando por ele, se foi teclado ou no processo de ser clicado (ativado). Você pode usar CSS para especificar estes diferentes estados — o CSS abaixo estiliza links não visitados com a cor rosa e links visitados com a cor verde.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Você pode alterar a aparência do link quando o usuário passa o mouse sobre ele. Por exemplo, removendo o sublinhado, o que é realizado na próxima regra:

+ +
a:hover {
+  text-decoration: none;
+}
+ +

No exemplo ativo abaixo, você pode brincar com diferentes valores para os vários estados do link. Adicionei as regras acima, e agora perceba que a cor rosa é bastante clara e difícil de ler. — porque não mudar isso para uma cor melhor? Pode deixá-los em negrito?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Removemos o sublinhado do nosso link ao passar o mouse. Pode-se remover os sublinhados de todos os estados de um link. Vale lembrar, no entanto, que em um site real, você deseja garantir que os visitantes saibam que um link é um link. Deixar o sublinhado no lugar pode ser uma pista importante para as pessoas perceberem que é possível clicar em algum texto dentro de um parágrafo — esse é o comportamento ao qual estão acostumados. Como tudo em CSS, existe o potencial de tornar o documento menos acessível com suas alterações — procuraremos destacar possíveis armadilhas em locais apropriados.

+ +
+

Observação: Você verá frequentemente menção de acessibilidade nessas lições e no MDN. Quando falamos sobre acessibilidade, estamos nos referindo aos requerimentos para a nossa página web ser compreensível e utilizável por todos.

+ +

Seu visitante pode muito bem estar em um computador com um mouse defeituoso, ou um dispositivo móvel com uma tela sensível ao toque. Ou eles podem estar usando um leitor de tela, que lê o conteúdo do documento, ou podem precisar de muito texto grande, ou estar navegando no site apenas usando o teclado.

+ +

Um documento HTML simples é geralmente acessível a todos — Ao começar a estilizar esse documento, é importante que você não o rone menos acessível.

+
+ +

Combinando seletores e combinadores

+ +

Vale ressaltar que você pode combinar vários seletores e combinadores. Até agora, vimos assim:

+ +
/* selects any <span> that is inside a <p>, which is inside an <article>  */
+article p span { ... }
+
+/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
+h1 + ul + p { ... }
+ +

Você pode combinar multiplos tipos juntos, também. Experimente acrescentar o seguinte código:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Isso estilizará qualquer elemento com a classe special, a qual está dentro de um <p>, que vem logo após um <h1>, que, por sua vez, está dentro de um <body>. Ufa!

+ +

No HTML original que forncemos, o único elemento estilizado é <span class="special">.

+ +

Não se preocupe se isto parece complicado no momento — em breve, você começará a entender como escreve mais CSS.

+ +

Empacotando

+ +

Neste tutorial, demos uma olhada na quantidade de maneiras as quais pode-se estilizar um documento usando CSS. Estaremos desenvolvendo esse conhecimento ao longo da caminhada através das Lições. No entanto, agora, você já sabe o suficiente para estilizar o texto, aplicar CSS com base em diferentes maneiras de especificar elementos no documento e procurar propriedades e valores na documentação do MDN.

+ +

Na próxima lição, veremos como o CSS é estruturado.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

Neste módulo

+ +
    +
  1. O que é CSS?
    2. +
  2. Começando com CSS
    3. +
  3. Como o CSS é estruturado
    4. +
  4. Como o CSS funciona
    5. +
  5. Usando o seu novo conhecimento
    6. +
diff --git a/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..4084647920 --- /dev/null +++ b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,502 @@ +--- +title: Como CSS é estruturado +slug: Learn/CSS/First_steps/Como_CSS_e_estruturado +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Agora que você tem uma ideia sobre o que é o CSS e seu uso basico, é hora de olhar um pouco mais a fundo das estruturas da linguagem em si. Nós ja conhecemos muitos conceitos discutidos aqui, entretanto, você pode voltar para qualquer um em específico, se achar algum dos proximos conceitos um tanto confuso

+ + + + + + + + + + + + +
Pré-requisitos:Conceitos básicos de computação, softwares básicos instalados, conhecimentos básicos de operação com arquivos,  básico de HTML (veja Introdução ao HTML), e  uma ideia de Como  funciona o CSS.
Objetivo:Aprender as estruturas da sintaxe básica do CSS em detalhes.
+ +

Aplicando CSS no seu HTML

+ +

A primeira coisa que você vai olhar é, os três métodos de aplicação do CSS em um documento.

+ +

Folha de Estilos Externa

+ +

Em Começando com o CSS nós linkamos uma folha de estilos externas em nossa página. Isso é o metodo mias comum utilizado para juntar CSS em um documento, podendo utilizar tal método em multiplas páginas, permitindo você estillizar todas as páginas como as mesmas folha de estilos. Na maioria dos casos, as diferentes páginas do site vão parecer bem iguais entre si e por isso você pode usar as mesmas regras para o estilo padrão da página.

+ +

Uma folha de estilos externa  é quando você tem seu CSS escrito em um arquivo separado com uma extensão .css, e você o refere dentro de um elemento <link> do HTML:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My CSS experiment</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <p>This is my first CSS example</p>
+  </body>
+</html>
+ +

O arquivo CSS deve se parecer com algo nesse estilo:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

O atributo href do elemento {{htmlelement("link")}}, precisa fazer referência a um arquivo em nosso sistema de arquivos.

+ +

No exemplo abaixo, o arquivo CSS está na mesma pasta que o documento HTML, mas você pode colocá-lo em outro lugar e reajustar o caminho marcado para encontrá-lo, como a seguir: 

+ +
<!-- Inside a subdirectory called styles inside the current directory -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Go up one directory level, then inside a subdirectory called styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Folha de estilos interna

+ +

Uma folha de estilos interna é  usada quando você não tem um arquivo CSS externo, mas, ao contrário,  coloca seu CSS dentro de elemento {{htmlelement("style")}} localizado no {{htmlelement("head")}} do documento HTML.

+ +

Deste modo, seu HTML se parecerá assim:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My CSS experiment</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <p>This is my first CSS example</p>
+  </body>
+</html>
+ +

Isso pode ser útil em algumas circunstâncias (talvez você esteja trabalhando em um sistema de gerenciamento de conteúdo - CMS - onde não tem permissão para modificar diretamente os arquivos CSS), entretanto isso não é tão eficiente quanto o uso de folhas de estilo externas — em um website, o CSS precisaria ser repetido em todas as páginas e atualizado em vários locais sempre que mudanças fossem necessárias.

+ +

Estilos inline

+ +

Estilos inline são declarações CSS que afetam apenas um determinado elemento, inserido em um atributo style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My CSS experiment</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
+    <p style="color:red;">This is my first CSS example</p>
+  </body>
+</html>
+ +

Por favor, não utilize isso a menos que seja estritamente necessário! É péssimo para manutenção (você precisará atualizar a mesma informação diversas vezes em cada documento), além do que, mistura sua informação de estilização do CSS com sua informação de estrutura HTML, tornando seu código de difícil leitura e compreensão. Manter diferentes tipos de código separados torna o trabalho muito mais fácil para todos os que trabalham no código.

+ +

Existem alguns lugares onde o estilo embutido é mais comum, ou mesmo aconselhável. Você pode ter que recorrer ao uso deles se seu ambiente de trabalho for realmente restritivo (talvez o seu CMS permita apenas que você edite o corpo do HTML). Você também os verá sendo muito usados em e-mails em HTML de modo a obter compatibilidade com o maior número possível de clientes de e-mail.

+ +

Playing with the CSS in this article

+ +

There is a lot of CSS to play with in this article. To do so, we'd recommend creating a new directory/folder on your computer, and inside it creating a copy of the following two files:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>My CSS experiments</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Create your test HTML here</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Create your test CSS here */
+
+p {
+  color: red;
+}
+ +

Then, when you come across some CSS you want to experiment with, replace the HTML <body> contents with some HTML to style, and start adding CSS to style it inside your CSS file.

+ +

If you are not using a system where you can easily create files, you can instead use the interactive editor below to experiment.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

Read on, and have fun!

+ +

Seletores

+ +

Não é possível falar de CSS sem conhecer os seletores, e nós já descobrimos vários tipos diferentes no tutorial Começando com o Css. Um seletor é o modo pelo qual nós apontamos para alguma coisa no nosso documento HTML para aplicar os estilos à ela. Se os seus estilos não forem aplicados, então é provável que o seu seletor não esteja ligado aquilo que você pensa que ele deveria.

+ +

Each CSS rule starts with a selector or a list of selectors in order to tell the browser which element or elements the rules should apply to. All of the following are examples of valid selectors, or lists of selectors.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Try creating some CSS rules that use the above selectors, and some HTML to be styled by them. If you don't know what some of the above syntax means, try searching for it on MDN!

+ +
+

Note: You will learn a lot more about selectors in our CSS selectors tutorials, in the next module.

+
+ +

Specificity

+ +

There will often be scenarios where two selectors could select the same HTML element. Consider the stylesheet below where I have a rule with a p selector that will set paragraphs to blue, and also a class that will set selected elements red.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Let's say that in our HTML document we have a paragraph with a class of special. Both rules could apply, so which one wins? What color do you think our paragraph will become?

+ +
<p class="special">What color am I?</p>
+ +

The CSS language has rules to control which rule will win in the event of a collision — these are called cascade and specificity. In the below code block we have defined two rules for the p selector, but the paragraph ends up being colored blue. This is because the declaration that sets it to blue appears later in the stylesheet, and later styles override earlier ones. This is the cascade in action.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

However, in the case of our earlier block with the class selector and the element selector, the class will win, making the paragraph red — even thought it appears earlier in the stylesheet. A class is described as being more specific, or having more specificity than the element selector, so it wins.

+ +

Try the above experiment for yourself — add the HTML to your experiment, then add the two p { ... } rules to your stylesheet. Next, change the first p selector to .special to see how it changes the styling.

+ +

The rules of specificity and the cascade can seem a little complicated at first and are easier to understand once you have built up further CSS knowledge. In our Cascade and inheritance article, which you'll get to in the next module, I'll explain this in detail, including how to calculate specificity. For now, remember that this exists, and that sometimes CSS might not apply like you expect it to because something else in your stylesheet has a higher specificity. Identifying that more than one rule could apply to an element is the first step in fixing such issues.

+ +

Propriedades e valores

+ +

At its most basic level, CSS consists of two building blocks:

+ + + +

The below image highlights a single property and value. The property name is color, and the value blue.

+ +

A declaration highlighted in the CSS

+ +

A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. This next image shows our CSS with the declaration block highlighted.

+ +

A highlighted declaration block

+ +

Finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules). Our image contains two rules, one for the h1 selector and one for the p selector. The rule for h1 is highlighted.

+ +

The rule for h1 highlighted

+ +

Setting CSS properties to specific values is the core function of the CSS language. The CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out and style it. What is important to remember is that both properties and values are case-sensitive in CSS. The property and value in each pair is separated by a colon (:).

+ +

Try looking up different values of the following properties, and writing CSS rules that apply them to different HTML elements:

+ + + +
+

Important: If a property is unknown or if a value is not valid for a given property, the declaration is deemed invalid and is completely ignored by the browser's CSS engine.

+
+ +
+

Important: In CSS (and other web standards), US spelling has been agreed on as the standard to stick to where language uncertainty arises. For example, color should always be spelled color. colour won't work.

+
+ +

Functions

+ +

While most values are relatively simple keywords or numeric values, there are some possible values which take the form of a function. An example would be the calc() function. This function allows you to do simple math from within your CSS, for example:

+ +
+
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

This renders like so:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

A function consists of the function name, and then some brackets into which the allowed values for that function are placed. In the case of the calc() example above I am asking for the width of this box to be 90% of the containing block width, minus 30 pixels. This isn't something I can calculate ahead of time and just enter the value into the CSS, as I don't know what 90% will be. As with all values, the relevant page on MDN will have usage examples so you can see how the function works.

+ +

Another example would be the various values for {{cssxref("transform")}}, such as rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

The output from the above code looks like this:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Try looking up different values of the following properties, and writing CSS rules that apply them to different HTML elements:

+ + + +

@rules

+ +

As yet, we have not encountered @rules (pronounced "at-rules"). These are special rules giving CSS some instruction on how to behave. Some @rules are simple with the rule name and a value. For example, to import an additional stylesheet into your main CSS stylesheet you can use @import:

+ +
@import 'styles2.css';
+ +

One of the most common @rules you will come across is @media, which allows you to use media queries to apply CSS only when certain conditions are true (e.g. when the screen resolution is above a certain amount, or the screen is wider than a certain width).

+ +

In the below CSS, we have a stylesheet that gives the <body> element a pink background color. However, we then use @media to create a section of our stylesheet that will only be applied in browsers with a viewport wider than 30em. If the browser is wider than 30em then the background color will be blue.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

You will encounter other @rules throughout these tutorials.

+ +

See if you can add a media query to your CSS that changes styles based on the viewport width. Change the width of your browser window to see the result.

+ +

Shorthands

+ +

Some properties like {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("margin")}} are called shorthand properties — this is because they allow you to set several property values in a single line, saving time and making your code neater in the process.

+ +

For example, this line:

+ +
/* In 4-value shorthands like padding and margin, the values are applied
+   in the order top, right, bottom, left (clockwise from the top). There are also other
+   shorthand types, for example 2-value shorthands, which set padding/margin
+   for top/bottom, then left/right */
+padding: 10px 15px 15px 5px;
+ +

Does the same thing as all these together:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Whereas this line:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Does the same thing as all these together:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

We won't attempt to teach these exhaustively now — you'll come across many examples later on in the course, and you are advised to look up the shorthand property names in our CSS reference to find out more.

+ +

Try adding the above declarations to your CSS to see how it affects the styling of your HTML. Try experimenting with some different values.

+ +
+

Warning: While shorthands often allow you to miss out values, they will then reset any values that you do not include to their initial values. This ensures that a sensible set of values are used. However, this might be confusing if you were expecting the shorthand to only change the values you passed in.

+
+ +

Comments

+ +

As with HTML, you are encouraged to make comments in your CSS, to help you understand how your code works when coming back to it after several months, and to help others coming to the code to work on it understand it.

+ +

Comments in CSS begin with /* and end with */. In the below code block I have used comments to mark the start of different distinct code sections. This is useful to help you navigate your codebase as it gets larger — you can search for the comments in your code editor.

+ +
/* Handle basic element styling */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Let's special case the global font size. On large screen or window,
+     we increase the font size for better readability */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Handle specific elements nested in the DOM  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Comments are also useful for temporarily commenting out certain parts of the code for testing purposes, for example if you are trying to find which part of your code is causing an error. In the next example I have commented out the rules for the .special selector.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Add some comments to your CSS, to get used to using them.

+ +

Whitespace

+ +

White space means actual spaces, tabs and new lines. In the same manner as HTML, the browser tends to ignore much of the whitespace inside your CSS; a lot of the whitespace is just there to aid readability.

+ +

In our first example below we have each declaration (and rule start/end) on its own line — this is arguably a good way to write CSS, as it makes it easy to maintain and understand:

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

The code layout you choose is usually a personal preference, although when you start to work in teams, you may find that the existing team has its own styleguide that specifies an agreed convention to follow.

+ +

The whitespace you do need to be careful of in CSS is the whitespace between the properties and their values. For example, the following declarations are valid CSS:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

But the following are invalid:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

0auto is not recognised as a valid value for the margin property (0 and auto are two separate values,) and the browser does not recognise padding- as a valid property. So you should always make sure to separate distinct values from one another by at least a space, but keep property names and property values together as single unbroken strings.

+ +

Try playing with whitespace inside your CSS, to see what breaks things and what doesn't.

+ +

What's next?

+ +

It's useful to understand a little about how the browser takes your HTML and CSS and turns it into a webpage, so in the next article — How CSS works — we will take a look at that process.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Neste módulo

+ +
    +
  1. O que é CSS?
    2. +
  2. Começando com CSS
    3. +
  3. Como o CSS é  estruturado
    4. +
  4. Como o CSS funciona
    5. +
  5. Usando seu novo conhecimento
    6. +
diff --git a/files/pt-br/learn/css/first_steps/iniciando/index.html b/files/pt-br/learn/css/first_steps/iniciando/index.html deleted file mode 100644 index a9a5218e98..0000000000 --- a/files/pt-br/learn/css/first_steps/iniciando/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Iniciando com CSS -slug: Learn/CSS/First_steps/Iniciando -tags: - - Aprender - - CSS - - Classes - - Elementos - - Estado - - Iniciante - - Seletores - - Sintaxe -translation_of: Learn/CSS/First_steps/Getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

Neste artigo iremos pegar um simples documento HTML e aplicar o CSS nele, aprendendo algumas coisas práticas sobre a linguagem no decorrer do processo.

- - - - - - - - - - - - -
pré-requisitos: -

Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)

-
Objetivo:Entender os fundamentos que vinculam um documento CSS a um arquivo HTML, e ser capaz de estilizar um texto simples com CSS.
- -

Iniciando com algum HTML

- -

Nosso ponto de partida e um documento HTML. Você pode copiar o código abaixo se desejar trabalhar no seu próprio computador. Salve-o como index.html em uma pasta, no seu computador.

- -
<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>Getting started with CSS</title>
-</head>
-
-<body>
-
-    <h1>I am a level one heading</h1>
-
-    <p>This is a paragraph of text. In the text is a <span>span element</span>
-and also a <a href="http://example.com">link</a>.</p>
-
-    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
-
-    <ul>
-        <li>Item one</li>
-        <li>Item two</li>
-        <li>Item <em>three</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Observação: Se você está lendo isso em um dispositivo móvel ou em um ambiente onde não possa criar arquivos, não se preocupe — editores de código ao vivo estão disponíveis abaixo para permitir que você escreva o código de exemplo aqui, nesta página.

-
- -

Adicionando CSS para o nosso documento

- -

A primeira coisa que precisamos fazer é falar para o HTML que temos algumas regras CSS que desejamos usar. Há três formas diferentes de aplicar CSS a um documento HTML que você normalmente vai encontrar, contudo, por enquanto, iremos olhar para o mais habitual e útil – vincular o CSS a partir do cabeçalho do seu documento.

- -

Crie um arquivo na mesma pasta em que se encontra o seu documento HTML e salve-o como style.css. A extensão .css nos informa que se trata de um arquivo CSS.

- -

Para ligar o style.css ao index.html adicione a seguinte linha em algum lugar dentro do {{htmlelement("head")}} do documento HTML:

- -
<link rel="stylesheet" href="styles.css">
- -

Este {{htmlelement("link")}} elemento diz ao navegador que temos uma folha de estilo, usando o atributo rel, e a localização desse arquivo como o valor do atributo href. Você pode testar se esse CSS funciona adicionando regras ao styles.css. Usando o seu editor de código, adicione as linhas seguintes ao seu arquivo CSS:

- -
h1 {
-  color: red;
-}
- -

Salve os seus arquivos HTML e CSS e atualize a página no seu navegador. O nível de cabeçalho um, no topo do documento, deve estar agora em vermelho. Se tudo estiver correto, parabéns! - Você teve sucesso ao aplicar CSS a um documento HTML. Se nada aconteceu, observe cuidadosamente se você digitou tudo certo.

- -

Você pode continuar trabalhando no styles.css localmente, ou pode usar nosso editor interativo abaixo pra continuar com este tutorial. O editor interativo age como se o CSS no primeiro painel estivesse vinculado ao documento HTML, assim como fizemos com o documento acima.

- -

Estilizando elementos HTML

- -

Fazendo o nosso cabeçalho ficar vermelho, demonstramos que podemos pegar e estilizar um elemento HTML. Fazemos isso especificando um seletor de elemento — Isto é, um seletor que combina diretamente com o nome do elemento HTML. Para especificar todos os parágrafos no documento, você usaria o seletor p. Para tornar todos os parágragos verdes, você usaria:

- -
p {
-  color: green;
-}
- -

Você pode especificar múltiplos seletores, separando-os com virgula. Se eu quero que todos os parágrafos e todos os itens da lista se tornem verdes, então minha regra se parecerá com isto:

- -
p, li {
-    color: green;
-}
- -

Experimente isso no editor interativo abaixo (edit the code boxes), ou no seu arquivo CSS local.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Alterando o comportamento padrão dos elementos

- -

Quando olhamos para um documento HTML bem marcado, até algo tão simples como o nosso exemplo, podemos ver como o navegador está tornando o HTML legível adicionando algum estilo padrão. Títulos são grandes e em negritos, nossa lista possui marcadores. Isso acontece porque navegadores tem uma folha de estilo interna contendo estilo padrão, a qual eles aplicam para toda a página por padrão; sem eles, todo o texto seria executado em conjunto e teríamos que estilizar tudo do princípio. Todos os modernos navegadores mostram conteúdo HTML por padrão, da mesma maneira.

- -

Contudo, você frequentemente irá desejar algo diferente do que foi escolhido pelo navegador. Isso pode ser feito simplesmente escolhendo o elemento HTML que você quer mudar, e usando uma regra CSS para alterar a forma como ele se parece. Um bom exemplo é o nosso <ul>, uma lista não ordenada. Ele tem uma lista marcada, e, se decido não escolher essa marcação, posso removê-los fazendo assim:

- -
li {
-  list-style-type: none;
-}
- -

Experimente adicionar isto ao seu CSS agora.

- -

A propriedade list-style-type é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para list-style-type e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página.

- -

Olhando para essa página você descobrirá que, além de remover a marcação da lista, que você também pode alterá-los — Teste mudá-los para marcação quadrada, usando valores de square.

- -

Incluindo uma classe

- -

Até agora, temos estilizado elementos baseado em seus nomes HTML. isto funciona enquanto você desejar que todos os elementos desse tipo, no seu documento, se pareçam o mesmo. Na maioria das vezes, isso não é o caso, e, então, você precisará encontrar uma maneira de selecionar um subconjunto de elementos sem alterar os outros. A maneira mais comum de fazer isso é adicionar uma classe ao seu elemento HTML e especificar essa classe.

- -

No seu documento HTML, adicione um atributo de classe ao segundo item da lista. Sua lista se parecerá, agora, assim:

- -
<ul>
-  <li>Item one</li>
-  <li class="special">Item two</li>
-  <li>Item <em>three</em></li>
-</ul>
- -

No seu CSS, você pode especificar a classe special criando um seletor que inicia com um caractere de ponto final. Adicione o seguinte código ao seu arquivo CSS:

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Salve e recarregue a página no navegador, para visualizar o resultado.

- -

Você pode aplicar a classe special para qualquer elemento na sua página que desejar ter a mesma aparência o item dessa lista. Por exemplo, pode-se querer que o <span>, no parágrafo, também se torne laranja e em negrito. Experimente adicionar uma class de special a ele, em seguida, recarregue a sua página e veja o que acontece.

- -

Algumas vezes, verá regras com um seletor que lista o seletor do elemento HTML junto com uma classe:

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Essa sintaxe significa "pegue qualquer elementoli que tenha uma classe special". Se você fizesse isso, não seria mais possível aplicar a classe a um <span> ou outro elemento, simplesmente adicionando a classe a ele; você teria que adicionar esse elemento à lista de seletores, assim:

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Como pode imaginar, algumas classes podem ser aplicadas a muitos elementos e você não quer ter que editar seu CSS a cada vez que algo novo precisar assumir esse estilo. Portanto, as vezes é melhor ignorar o lemento e simplesmente se referir à classe, a menos que você queira criar algumas regras especiais para um elemento em particular, e, talvez, queira ter certeza que eles não serão aplicados aos outros.

- -

Estilizando coisas baseadas em sua localização no documento

- -

Há momentos quando você desejará que algo se pareça diferente, baseado onde ele está no documento. Existem vários seletores que podem lhe ajudar aqui, mas, por enquanto, iremos olhar apenas alguns. No nosso documento estão dois elementos <em> — um dentro de um parágrafo e o outro dentro do item de lista. Para selecionar apenas um <em> aninhado dentro de um elemento <li> posso usar um seletor chamado combinador descendente, a qual simplesmente, assume a forma de um espaço entre dois outros seletores.

- -

Adicione a seguinte regra a sua folha de estilo.

- -
li em {
-  color: rebeccapurple;
-}
- -

Este seletor selecionará qualquer elemento <em> que está dentro (um descendente de) um <li>. Deste modo, no seu documento de exemplo, você deve achar que o <em> no terceiro item da lista agora está roxo, mas o que está dentro do parágrafo permanece inalterado.

- -

Outra coisa que você pode gostar de experimentar é estilizar um parágrafo quando ele vem diretamente após um título no mesmo nível de hierarquia no HTML. Para isso, coloque um +  (um combinador irmão adjacente) entre os seletores.

- -

Experimente adicionar esta regra à sua folha de estilo também:

- -
h1 + p {
-  font-size: 200%;
-}
- -

O exemplo ativo abaixo inclui as duas regras acima. Verifique adicionando uma regra para tornar um span vermelho, se ele está dentro de um parágrafo. Você saberá se fez certo quando o span no primeiro parágrafo ficar vermelho, mas o do primeiro item da lista não mudar de cor.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Observação: Como pode ver, CSS nos dá várias maneiras de especificar elementos, e temos somente arranhado a superfície até agora! Analisaremos adequadamente todos esses seletores e muitos outros, nos nossos artigos Seletores posteriormente neste curso.

-
- -

Estilizando coisas baseadas no estado

- -

O tipo final de estilo, que vamos dar uma olhada neste tutorial, é a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso é quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento <a> (âncora). Isto possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está passando por ele, se foi teclado ou no processo de ser clicado (ativado). Você pode usar CSS para especificar estes diferentes estados — o CSS abaixo estiliza links não visitados com a cor rosa e links visitados com a cor verde.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

Você pode alterar a aparência do link quando o usuário passa o mouse sobre ele. Por exemplo, removendo o sublinhado, o que é realizado na próxima regra:

- -
a:hover {
-  text-decoration: none;
-}
- -

No exemplo ativo abaixo, você pode brincar com diferentes valores para os vários estados do link. Adicionei as regras acima, e agora perceba que a cor rosa é bastante clara e difícil de ler. — porque não mudar isso para uma cor melhor? Pode deixá-los em negrito?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Removemos o sublinhado do nosso link ao passar o mouse. Pode-se remover os sublinhados de todos os estados de um link. Vale lembrar, no entanto, que em um site real, você deseja garantir que os visitantes saibam que um link é um link. Deixar o sublinhado no lugar pode ser uma pista importante para as pessoas perceberem que é possível clicar em algum texto dentro de um parágrafo — esse é o comportamento ao qual estão acostumados. Como tudo em CSS, existe o potencial de tornar o documento menos acessível com suas alterações — procuraremos destacar possíveis armadilhas em locais apropriados.

- -
-

Observação: Você verá frequentemente menção de acessibilidade nessas lições e no MDN. Quando falamos sobre acessibilidade, estamos nos referindo aos requerimentos para a nossa página web ser compreensível e utilizável por todos.

- -

Seu visitante pode muito bem estar em um computador com um mouse defeituoso, ou um dispositivo móvel com uma tela sensível ao toque. Ou eles podem estar usando um leitor de tela, que lê o conteúdo do documento, ou podem precisar de muito texto grande, ou estar navegando no site apenas usando o teclado.

- -

Um documento HTML simples é geralmente acessível a todos — Ao começar a estilizar esse documento, é importante que você não o rone menos acessível.

-
- -

Combinando seletores e combinadores

- -

Vale ressaltar que você pode combinar vários seletores e combinadores. Até agora, vimos assim:

- -
/* selects any <span> that is inside a <p>, which is inside an <article>  */
-article p span { ... }
-
-/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
-h1 + ul + p { ... }
- -

Você pode combinar multiplos tipos juntos, também. Experimente acrescentar o seguinte código:

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Isso estilizará qualquer elemento com a classe special, a qual está dentro de um <p>, que vem logo após um <h1>, que, por sua vez, está dentro de um <body>. Ufa!

- -

No HTML original que forncemos, o único elemento estilizado é <span class="special">.

- -

Não se preocupe se isto parece complicado no momento — em breve, você começará a entender como escreve mais CSS.

- -

Empacotando

- -

Neste tutorial, demos uma olhada na quantidade de maneiras as quais pode-se estilizar um documento usando CSS. Estaremos desenvolvendo esse conhecimento ao longo da caminhada através das Lições. No entanto, agora, você já sabe o suficiente para estilizar o texto, aplicar CSS com base em diferentes maneiras de especificar elementos no documento e procurar propriedades e valores na documentação do MDN.

- -

Na próxima lição, veremos como o CSS é estruturado.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

Neste módulo

- -
    -
  1. O que é CSS?
    2. -
  2. Começando com CSS
    3. -
  3. Como o CSS é estruturado
    4. -
  4. Como o CSS funciona
    5. -
  5. Usando o seu novo conhecimento
    6. -
diff --git a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html b/files/pt-br/learn/css/first_steps/o_que_e_css/index.html deleted file mode 100644 index 41980dfee6..0000000000 --- a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: O que é CSS? -slug: Learn/CSS/First_steps/O_que_e_CSS -tags: - - Aprender - - CSS - - Iniciante - - Introdução ao CSS - - Módulos - - Sintaxe - - especificação -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}} (Folhas de Estilo em Cascata) permite a você criar páginas web agradáveis, mas como isso funciona por baixo dos panos? Este artigo explica o que é CSS, com um exemplo de sintaxe simples, e, também, trata alguns conceitos-chaves sobre a linguagem.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)
Objetivo:Aprender o que é CSS.
- -

No módulo Introdução ao HTML vimos o que é HTML, e como ele é usado para fazer marcação de documentos. Estes documentos serão legíveis em um navegador web. Títulos serão mais largos do que textos comuns, parágrafos quebram em uma nova linha e tendo espaços entre eles. Links são coloridos e sublinhados para distingui-los do resto do texto. O que você está vendo é o estilo padrão do navegador - vários estilos básicos que o navegador aplica ao HTML, para garantir que ele será legível mesmo se não for explicitamente estilizado pelo autor da página web.

- -

The default styles used by a browser

- -

No entanto, a web seria um lugar chato se todos os web sites tivessem estilos iguais ao mostrado na imagem acima. Usando CSS você pode controlar exatamente a aparência dos elementos HTML no navegador, apresentando a sua marcação com o design que desejar.

- -

Para que serve o CSS?

- -

Como falamos antes, CSS é uma linguagem para especificar como documentos são apresentados aos usuários — como eles são estilizados, dispostos etc.

- -

Um documento é normalmente um arquivo texto estruturado usando uma linguagem de marcação — {{Glossary("HTML")}} é a linguagem de marcação mais comum, mas você também pode encontrar outras, como {{Glossary("SVG")}} ou {{Glossary("XML")}}.

- -

Apresentar um documento para um usuário significa convertê-lo para um formato utilizável pelo seu público. {{Glossary("browser","Browsers")}}, como {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, ou {{Glossary("Microsoft Edge","Edge")}} , são projetados para apresentar documentos visualmente, por exemplo, um uma tela de computador, projetor ou impressora.

- -
-

Observação: Um navegador web é as vezes chamado de {{Glossary("User agent","user agent")}}, o que, basicamente, significa um programa de computador que representa uma pessoa por trás do sistema. Navegadores web são o principal tipo de agente do usuário que nos referimos quando falamos sobre CSS, contudo, ele não é o único. Há outros agentes de usuário disponíveis — tais como aqueles que convertem documentos HTML e CSS para PDF a serem impressos.

-
- -

O CSS pode ser usado para estilizar um documento muito básico de texto — por exemplo, alterando a cor e tamanho dos títulos e links. Pode ser usado para criar layout — por exemplo, transformando uma simples coluna de texto em um layout com uma área de conteúdo principal e um sidebar (barra lateral) para as informações relacionadas. Pode até ser usado para efeitos tais como animação. Dê uma olhada nos links deste parágrafo, para ver exemplos específicos.

- -

Sintaxe CSS

- -

CSS é uma linguagem baseada em regras. — Você define regras especificando grupos de estilo que devem ser aplicados para elementos particulares ou grupos de elementos na sua página web. Por exemplo, "Quero que o título principal, na minha página, seja mostrado como um texto grande e de cor vermelha.".

- -

O código seguinte mostra uma regra CSS muito simples, que chegaria perto do estilo descrito acima:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

A regra é aberta com um {{Glossary("CSS Selector", "selector")}} . Isso seleciona o elemento HTML que vamos estilizar. Neste caso, estamos estilizando títulos de nível um ({{htmlelement("h1")}}).

- -

Temos, então, um conjunto de chaves { }. Dentro deles, haverá uma ou mais declarações, que tomam a forma de pares propriedade e valor. Cada par especifica uma propriedade do(s) elemento(s) que estamos selecionando e, em seguida, então um valor que gostaríamos de atribuir à propriedade

- -

Antes dos dois pontos, temos a propriedade, e, depois, o valor. CSS {{Glossary("property/CSS","properties")}} possui diferentes valores permitidos, dependendo de qual propriedade está sendo especificado. Em nosso exemplo, temos a propriedade color, que pode tomar vários valores para cor. Também temos a propriedade font-size. Essa propriedade pode ter vários unidades de tamanho como um valor.

- -

Uma folha de estilo CSS conterá muitas regras tais como essa, escrita uma após a outra.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Você constatará que rapidamente aprende alguns valores, enquanto outros precisará pesquisar. As páginas de propriedades individuais no MDN dá a você uma maneira rápida de procurar propriedades e seus respectivos valores, quando você esquecer, ou desejar saber quais valores pode usar.

- -
-

Observação: Você pode achar links para todas as páginas de propriedades CSS (junto com outros recursos CSS) listados no MDN referência CSS. Alternativamente, você deve se acostumar a pesquisar por "mdn css-feature-name" no seu motor de busca favorito sempre que precisar procurar mais informações sobre uma característica CSS. Por exemplo, experimente pesquisar por "mdn color" e "mdn font-size"!

-
- -

Módulos CSS

- -

Como existem tantas coisas que você pode estilizar com CSS, a linguagem é dividida em módulos. Verá referência a esses módulos a medida que explora o MDN e muita das páginas da documentação são organizadas em torno de um módulo em particular. Por exemplo, poderia dar uma olhada na referência MDN para os módulos Backgrounds and Borders para descobrir qual é o seu objetivo, e quais diferentes propriedades e outras características ele contém. Você também encontrará links para a especificação CSS que define a tecnologia (veja abaixo).

- -

Nesse ponto você não precisa se preocupar muito sobre como o CSS é estruturado. No entanto, isso pode tornar fácil achar informação se, por exemplo, você estiver ciente de que uma determinada propriedade provavelmente será encontrada entre outras coisas semelhantes e estiver, portanto, provavelmente na mesma especificação.  

- -

Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders  — você pode achar que isso tem um senso lógico para as propriedades background-color e border-color serem definidas neste módulo. E, você está certo!

- -

Especificações CSS

- -

Todas as tecnologias de padrões web (HTML, CSS, JavaScript, etc.) são definidos em documentos gigantes chamados especificações (ou simplesmente "specs"), que são publicados por organizações de padrões (tais como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}) e definem precisamente como essas tecnologias devem se comportar.

- -

Com CSS não é diferente — ele é desenvolvido por um grupo dentro do W3C chamado CSS Working Group. Esse grupo é formado por representantes de fornecedores de navegadores web e outras companhias que tem interesse em CSS. Também existe outras pessoas, conhecidas como peritos convidados (invited experts), que agem como vozes independentes; eles não são associados como um membro de alguma organização.

- -

Novas características CSS são desenvolvidas, ou especificadas, pelo CSS Working Group. As vezes, porque um navegador em particular está interessado em alguma capacidade, outras vezes, porque designers web e desenvolvedores estão perguntando por uma característica, e, algumas vezes, porque o Working Group em si tem identificado uma necessidade. O CSS está em constante desenvolvimento, com novas peculiaridades ficando disponíveis. Contudo, uma ideia chave sobre CSS é que todos trabalham pesado para nunca alterar as coisas de uma maneira que não quebrem os sites antigos. Um site construído no ano 2000, usando um CSS limitado da época, deverá ainda ser utilizável em um navegador moderno!

- -

Como iniciante no CSS, é provável que você ache as especificações CSS impressionantes — eles são direcionados a engenheiros para implementar suporte aos recursos nos agentes de usuário (navegadores), não para desenvolvedores lerem com o intuito de entender CSS. Muitos desenvolvedores experientes preferem consultar a documentação do MDN ou outros tutoriais. No entanto, vale a pena saber que eles existem, entender a relação entre o CSS que você usa, suporte ao navegador (veja abaixo), e os specs (especificações).

- -

Suporte do navegador

- -

Uma vez que o CSS tenha sido especificado, então se torna útil para nós, em termos de desenvolvimento de páginas web, apenas se um ou mais navegadores implementá-los. Isso significa que o código foi escrito para transformar as instruções do nosso arquivo CSS em algo que possa ser mostrado na tela. Vamos olhar um pouco mais esse processo nas lições Como o CSS funciona. É inusitado implementarem uma característica ao mesmo tempo, e, geralmente, existe uma lacuna na qual se pode usar parte do CSS em alguns navegadores e em outros não. Por esse motivo, ser capaz de verificar o estado da implemtação é útil. Para cada página de propriedade no MDN, pode-se ver o estado dela, que se esta interessado. Assim, você saberá se pode usá-la em uma página.

- -

A seguir, é apresentado o gráfico de dados compat para propriedade CSS font-family.

- -

{{Compat("css.properties.font-family")}}

- -

A seguir

- -

Agora que você tem algum entendimento do que o CSS é, vamos ao Iniciando com CSS, onde pode começar a escrever alguma coisa, você mesmo.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

Neste módulo

- -
    -
  1. O que é CSS?
    2. -
  2. Começando com CSS
    3. -
  3. Como o CSS é estruturado
    4. -
  4. Como o CSS funciona
    5. -
  5. Usando o seu novo conhecimento
    6. -
diff --git a/files/pt-br/learn/css/first_steps/what_is_css/index.html b/files/pt-br/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..41980dfee6 --- /dev/null +++ b/files/pt-br/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,127 @@ +--- +title: O que é CSS? +slug: Learn/CSS/First_steps/O_que_e_CSS +tags: + - Aprender + - CSS + - Iniciante + - Introdução ao CSS + - Módulos + - Sintaxe + - especificação +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{Glossary("CSS")}} (Folhas de Estilo em Cascata) permite a você criar páginas web agradáveis, mas como isso funciona por baixo dos panos? Este artigo explica o que é CSS, com um exemplo de sintaxe simples, e, também, trata alguns conceitos-chaves sobre a linguagem.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)
Objetivo:Aprender o que é CSS.
+ +

No módulo Introdução ao HTML vimos o que é HTML, e como ele é usado para fazer marcação de documentos. Estes documentos serão legíveis em um navegador web. Títulos serão mais largos do que textos comuns, parágrafos quebram em uma nova linha e tendo espaços entre eles. Links são coloridos e sublinhados para distingui-los do resto do texto. O que você está vendo é o estilo padrão do navegador - vários estilos básicos que o navegador aplica ao HTML, para garantir que ele será legível mesmo se não for explicitamente estilizado pelo autor da página web.

+ +

The default styles used by a browser

+ +

No entanto, a web seria um lugar chato se todos os web sites tivessem estilos iguais ao mostrado na imagem acima. Usando CSS você pode controlar exatamente a aparência dos elementos HTML no navegador, apresentando a sua marcação com o design que desejar.

+ +

Para que serve o CSS?

+ +

Como falamos antes, CSS é uma linguagem para especificar como documentos são apresentados aos usuários — como eles são estilizados, dispostos etc.

+ +

Um documento é normalmente um arquivo texto estruturado usando uma linguagem de marcação — {{Glossary("HTML")}} é a linguagem de marcação mais comum, mas você também pode encontrar outras, como {{Glossary("SVG")}} ou {{Glossary("XML")}}.

+ +

Apresentar um documento para um usuário significa convertê-lo para um formato utilizável pelo seu público. {{Glossary("browser","Browsers")}}, como {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, ou {{Glossary("Microsoft Edge","Edge")}} , são projetados para apresentar documentos visualmente, por exemplo, um uma tela de computador, projetor ou impressora.

+ +
+

Observação: Um navegador web é as vezes chamado de {{Glossary("User agent","user agent")}}, o que, basicamente, significa um programa de computador que representa uma pessoa por trás do sistema. Navegadores web são o principal tipo de agente do usuário que nos referimos quando falamos sobre CSS, contudo, ele não é o único. Há outros agentes de usuário disponíveis — tais como aqueles que convertem documentos HTML e CSS para PDF a serem impressos.

+
+ +

O CSS pode ser usado para estilizar um documento muito básico de texto — por exemplo, alterando a cor e tamanho dos títulos e links. Pode ser usado para criar layout — por exemplo, transformando uma simples coluna de texto em um layout com uma área de conteúdo principal e um sidebar (barra lateral) para as informações relacionadas. Pode até ser usado para efeitos tais como animação. Dê uma olhada nos links deste parágrafo, para ver exemplos específicos.

+ +

Sintaxe CSS

+ +

CSS é uma linguagem baseada em regras. — Você define regras especificando grupos de estilo que devem ser aplicados para elementos particulares ou grupos de elementos na sua página web. Por exemplo, "Quero que o título principal, na minha página, seja mostrado como um texto grande e de cor vermelha.".

+ +

O código seguinte mostra uma regra CSS muito simples, que chegaria perto do estilo descrito acima:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

A regra é aberta com um {{Glossary("CSS Selector", "selector")}} . Isso seleciona o elemento HTML que vamos estilizar. Neste caso, estamos estilizando títulos de nível um ({{htmlelement("h1")}}).

+ +

Temos, então, um conjunto de chaves { }. Dentro deles, haverá uma ou mais declarações, que tomam a forma de pares propriedade e valor. Cada par especifica uma propriedade do(s) elemento(s) que estamos selecionando e, em seguida, então um valor que gostaríamos de atribuir à propriedade

+ +

Antes dos dois pontos, temos a propriedade, e, depois, o valor. CSS {{Glossary("property/CSS","properties")}} possui diferentes valores permitidos, dependendo de qual propriedade está sendo especificado. Em nosso exemplo, temos a propriedade color, que pode tomar vários valores para cor. Também temos a propriedade font-size. Essa propriedade pode ter vários unidades de tamanho como um valor.

+ +

Uma folha de estilo CSS conterá muitas regras tais como essa, escrita uma após a outra.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Você constatará que rapidamente aprende alguns valores, enquanto outros precisará pesquisar. As páginas de propriedades individuais no MDN dá a você uma maneira rápida de procurar propriedades e seus respectivos valores, quando você esquecer, ou desejar saber quais valores pode usar.

+ +
+

Observação: Você pode achar links para todas as páginas de propriedades CSS (junto com outros recursos CSS) listados no MDN referência CSS. Alternativamente, você deve se acostumar a pesquisar por "mdn css-feature-name" no seu motor de busca favorito sempre que precisar procurar mais informações sobre uma característica CSS. Por exemplo, experimente pesquisar por "mdn color" e "mdn font-size"!

+
+ +

Módulos CSS

+ +

Como existem tantas coisas que você pode estilizar com CSS, a linguagem é dividida em módulos. Verá referência a esses módulos a medida que explora o MDN e muita das páginas da documentação são organizadas em torno de um módulo em particular. Por exemplo, poderia dar uma olhada na referência MDN para os módulos Backgrounds and Borders para descobrir qual é o seu objetivo, e quais diferentes propriedades e outras características ele contém. Você também encontrará links para a especificação CSS que define a tecnologia (veja abaixo).

+ +

Nesse ponto você não precisa se preocupar muito sobre como o CSS é estruturado. No entanto, isso pode tornar fácil achar informação se, por exemplo, você estiver ciente de que uma determinada propriedade provavelmente será encontrada entre outras coisas semelhantes e estiver, portanto, provavelmente na mesma especificação.  

+ +

Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders  — você pode achar que isso tem um senso lógico para as propriedades background-color e border-color serem definidas neste módulo. E, você está certo!

+ +

Especificações CSS

+ +

Todas as tecnologias de padrões web (HTML, CSS, JavaScript, etc.) são definidos em documentos gigantes chamados especificações (ou simplesmente "specs"), que são publicados por organizações de padrões (tais como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}) e definem precisamente como essas tecnologias devem se comportar.

+ +

Com CSS não é diferente — ele é desenvolvido por um grupo dentro do W3C chamado CSS Working Group. Esse grupo é formado por representantes de fornecedores de navegadores web e outras companhias que tem interesse em CSS. Também existe outras pessoas, conhecidas como peritos convidados (invited experts), que agem como vozes independentes; eles não são associados como um membro de alguma organização.

+ +

Novas características CSS são desenvolvidas, ou especificadas, pelo CSS Working Group. As vezes, porque um navegador em particular está interessado em alguma capacidade, outras vezes, porque designers web e desenvolvedores estão perguntando por uma característica, e, algumas vezes, porque o Working Group em si tem identificado uma necessidade. O CSS está em constante desenvolvimento, com novas peculiaridades ficando disponíveis. Contudo, uma ideia chave sobre CSS é que todos trabalham pesado para nunca alterar as coisas de uma maneira que não quebrem os sites antigos. Um site construído no ano 2000, usando um CSS limitado da época, deverá ainda ser utilizável em um navegador moderno!

+ +

Como iniciante no CSS, é provável que você ache as especificações CSS impressionantes — eles são direcionados a engenheiros para implementar suporte aos recursos nos agentes de usuário (navegadores), não para desenvolvedores lerem com o intuito de entender CSS. Muitos desenvolvedores experientes preferem consultar a documentação do MDN ou outros tutoriais. No entanto, vale a pena saber que eles existem, entender a relação entre o CSS que você usa, suporte ao navegador (veja abaixo), e os specs (especificações).

+ +

Suporte do navegador

+ +

Uma vez que o CSS tenha sido especificado, então se torna útil para nós, em termos de desenvolvimento de páginas web, apenas se um ou mais navegadores implementá-los. Isso significa que o código foi escrito para transformar as instruções do nosso arquivo CSS em algo que possa ser mostrado na tela. Vamos olhar um pouco mais esse processo nas lições Como o CSS funciona. É inusitado implementarem uma característica ao mesmo tempo, e, geralmente, existe uma lacuna na qual se pode usar parte do CSS em alguns navegadores e em outros não. Por esse motivo, ser capaz de verificar o estado da implemtação é útil. Para cada página de propriedade no MDN, pode-se ver o estado dela, que se esta interessado. Assim, você saberá se pode usá-la em uma página.

+ +

A seguir, é apresentado o gráfico de dados compat para propriedade CSS font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

A seguir

+ +

Agora que você tem algum entendimento do que o CSS é, vamos ao Iniciando com CSS, onde pode começar a escrever alguma coisa, você mesmo.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

Neste módulo

+ +
    +
  1. O que é CSS?
    2. +
  2. Começando com CSS
    3. +
  3. Como o CSS é estruturado
    4. +
  4. Como o CSS funciona
    5. +
  5. Usando o seu novo conhecimento
    6. +
diff --git a/files/pt-br/learn/css/howto/css_faq/index.html b/files/pt-br/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..f3febd4637 --- /dev/null +++ b/files/pt-br/learn/css/howto/css_faq/index.html @@ -0,0 +1,245 @@ +--- +title: CSS - Perguntas frequentes +slug: Learn/CSS/Howto/CSS_Perguntas_Frequentes +tags: + - CSS + - Exemplo + - FAQ + - Guía + - Perguntas + - Perguntas Frequentes + - Web +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Por que meu CSS, que é válido, não é renderizado corretamente?

+ +

Navegadores usam a declaração de DOCTYPE para decidir se devem exibir o documento usando um modo compatível com os padrões da web ou com padrões de navegadores antigos. Usar corretamente a declaração de um DOCTYPE moderno no início do seu documento HTML melhorará a forma como o navegador trata os padrões utilizados no documento.

+ +

Navegadores modernos possuem dois principais modos de renderização:

+ + + +

Navegadores baseados na engine Gecko possuem um terceiro modo de renderização; Modo de "quase padrões" (Almost Standards Mode), que renderiza as páginas seguindo regras do Modo de padrões, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.

+ +

Esta é uma lista das declarações de DOCTYPE mais usadas e que acionarão o modo de padrões ou de "quase padrões":

+ +
<!DOCTYPE html> /* Este é o doctype HTML5. Levando em consideração que
+                   navegadores modernos possuem um parser de HTML5, o
+                   uso desta declaração é recomendada */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

Sempre que possível, use a declaração de DOCTYPE HTML5.

+ +

Por que meu CSS, que é válido, não é renderizado?

+ +

Abaixo temos algumas das possíveis causas:

+ + + +

Qual a diferença entre id e class?

+ +

Elementos HTML podem ter um atributo id e/ou um atributo class. O atributo id designa um nome ao elemento ao qual este é aplicado, e para que a marcação seja válida, deverá haver no documento apenas um elemento com o nome designado (Por exemplo: Caso você designe o nome janela a um elemento, nenhum outro elemento poderá ter o nome janela).

+ +

O atributo class designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributo id, os nomes designados em class podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para uma id particular quanto para classes.

+ +

Algumas dicas de quando usar id e quando usar class:

+ + + +

Geralmente é recomendável que se utilize classes sempre que possível, utilizando ids apenas quando absolutamente necessário para usos específicos (como conectar um label a um elemento de formulário, ou para estilizar elementos que necessicam ser semanticamente únicos). Abaixo estão descritas algumas vantagens em utilizar classes como forma principal de estilização:

+ + + +
+

Nota: Veja Seletores para mais informações.

+
+ +

Como eu redefino o valor padrão de uma propriedade?

+ +

Inicialmente CSS não propiciava a diretiva "default" e a única forma de redefinir o valor padrão de uma propriedade era expliciatamente redeclarando aquela propriedade. Por exemplo:

+ +
/* A cor padrão do cabeçalho é preta */
+h1 { color: red; }
+h1 { color: black; }
+ +

Isso mudou com CSS 2; a diretiva initial agora é um valor válido para uma propriedade CSS. Ela redefine tal propriedade para seu valor padrão, o qual é definido nas especificações CSS para tal propriedade.

+ +
/* A cor padrão do cabeçalho é preta */
+h1 { color: red; }
+h1 { color: initial; }
+ +

Como eu derivo um estilo de outro?

+ +

CSS não exatamente permite que um estilo seja definido com os termos de outro. (Veja as notas de Eric Meyer sobre a posição do grupo de trabalho a respeito do assunto). Entretanto, é possível atingir o mesmo efeito designando diversas classes a um elemento, e Variáveis CSS agora providenciam uma forma de definir informações sobre um estilo em um lugar e reutilizar estas informações em diversos outros lugares.

+ +

Como eu aplico diversas classes a um elemento?

+ +

Elementos HTML podem ter diversas classes designadas a si, com as classes sendo listadas no atributo class, tendo um espaço em branco separando cada uma.

+ +
<style type="text/css">
+  .news { background: black; color: white; }
+  .today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

Caso a mesma propriedade seja declara em mais de uma regra, o conflito é resolvido primeiro pela ordem de especificidade e depois através da ordem das declarações CSS, com o último valor definido da propriedade sendo considerado. A ordem em que o nome das classes aparece no atributo class é irrelevante.

+ +

Por que minhas regras de estilização não funcionam corretamente?

+ +

Regras de estilização, mesmo que sejam semanticamente corretas, podem não ser aplicadas em determinadas situações. Você pode utilizar o visualizador de regras CSS do Inspetor de DOM para resolver problemas deste tipo, mas as ocasiões mais frequentes onde regras de estilização são ignoradas estão listadas abaixo.

+ +

Hierarquia dos elementos HTML

+ +

A forma como estilos CSS são aplicados a elementos HTML depende também da hierarquia dos elementos HTML. É importante lembrar que a regra aplicada a um descendente sobrepõe a regra do pai, independente de qualquer especificidade ou prioridade das regras CSS.

+ +
<style type="text/css">
+  .news { color: black; }
+  .corpName { font-weight: bold; color: red; }
+</style>
+
+<!-- O texto do item news é preto, mas o nome da corporação é vermelho e em negrito -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

No caso de hierarquias HTML complexas, se uma regra parece ser ignorada, verifique se o elemento está dentro de outro elemento com um estilo diferente.

+ +

Regra de estilização explicitamente redefinida

+ +

Em folhas de estilo CSS, a ordem é importante. Se você definir uma propriedade e logo depois redefinir a mesma propriedade, a última regra definida será considerada.

+ +
<style>
+  #stockTicker { font-weight: bold; }
+  .stockSymbol { color: red; }
+  /*  outras regras             */
+  /*  outras regras             */
+  /*  outras regras             */
+  .stockSymbol { font-weight: normal; }
+</style>
+
+<!-- Boa parte do texto está em negrito, exceto "GE", que é vermelho e não está em negrito -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

Para evitar que este tipo de problema, tente definir regras apenas uma vez para um determinado seletor e agrupe as regras para aquele seletor.

+ +

Uso de uma propriedade reduzida

+ +

Utilizar propriedades reduzidas para definir regra de estilização é interessante pois permite definir diversas propriedade de uma regra em uma sintaxe compacta e que permite otimizar o tamanho da folha de estilos. Utilizar propriedades reduzidas para definir apenas uma propriedade é permitido, mas deve ser lembrado que atributos da propriedade não definidos são redefinidos para seu valor padrão. Ou seja, isso pode acabar sobrepondo regras anteriormente definidas implicitamente..

+ +
<style>
+   #stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+   .stockSymbol { font: 14px Arial; color: red; }
+</style>
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

No exemplo anterior o problema ocorre em regras pertencentes a diferentes elementos. Mas também poderia acontecer para o mesmo elemento, pois a ordem das regras é importante.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight agora está definido como "normal" */
+}
+
+ +

Uso do seletor *

+ +

O seletor curinga * faz referência a qualquer elemento, e deve ser usado com cuidado.

+ +
<style>
+   body * { font-weight: normal; }
+   #stockTicker { font: 12px Verdana; }
+   .corpName { font-weight: bold; }
+   .stockUp { color: red; }
+</style>
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

No exemplo acima, o seletor * aplica a regra para todos os elementos dentro de body, em qualquer nível hierarquico, incluindo a classe .stockUp. Sendo assim a regra font-weight: bold; aplicada à classe .corpName é sobreposta por font-weight: normal; aplicada a todos os elementos dentro de body.

+ +

O uso do seletor * também deve ser minimizado por ser um seletor lento, especialmente quando não utilizado como o primeiro elemento de um seletor. Este seletor deve ser evitado o máximo possível.

+ +

Especificidade em CSS

+ +

Quando multiplas regras são aplicadas a um elemento, a regra a ser renderizada depende de sua especificidade. O estilo inline (regras de estilo definidas no atributo style de um elemento HTML) tem a mais alta especificidade e irá sobrepor qualquer seletor. Seletores de ID tem a segunda mais alta especificidade, com seletores de classes vindo logo após e, eventualmente, seletores de elementos (tags). Tendo isso em mente, a cor do texto da {{htmlelement("div")}} abaixo terá a cor vermelha.

+ +
<style>
+   div { color: black; }
+   #orange { color: orange; }
+   .green { color: green; }
+</style>
+
+<div id="orange" class="green" style="color: red;">Isso é vermelho</div>
+
+ +

As regras se tornam mais complicadas quando o seletor tem diversas partes. Informações mais detalhadas sobre como a especificidade de seletores é calculada podem ser encontradas nas Especificações CSS 2.1, capítulo 6.4.3.

+ +

O que as propriedades -moz-*, -ms-*, -webkit-*, -o-* e -khtml-* fazem?

+ +

Estas propriedades, chamadas propriedades prefixadas, são extenções ao padrão CSS. Elas permitem o uso de recursos experimentais e fora dos padrões em navegadores sem poluir o namespace convencional, prevenindo que incompatibilidades entre implementações experimentais e fora dos padrões surjam quando os padrões CSS forem expandidos.

+ +

Apesar do vasto uso na web, o uso de propriedades prefixadas não é recomendado em ambiente de produção. O uso indiscriminado de funcionalidades experimentais ou não-padrão pode causar problemas de compatibilidade futuros (como uma funcionalidade experimental mudando de nome, ou tendo o mesmo nome de uma outro funcionalidade que no passado tinha uma finalidade completamente diferente) e não renderizar páginas de forma correta em diferentes navegadores. Outro problema muito comum encontrado pelo uso indiscriminado de propriedades prefixadas é a declaração de regras que acabam se tornando exclusivas para determinadas engines, quebrando a renderização em outros navegadores, mesmo estes navegadores dando suporte à propriedade padrão não-prefixada (Por exemplo, apenas a propriedade -webkit-border-radius sendo usada em uma regra ao invés de border-radius, que é suportada por todos os navegadores, inclusive os baseados em webkit).

+ +

Para amenizar os problemas de incompatibilidade gerados pelo uso de propriedades prefixadas (principalmente -webkit-), foi estabelecido o Compatibility Living Standard, o qual sugere um conjunto de propriedades -webkit- que navegadores (mesmo não utilizando a engine webkit) devem suportar. Outra medida que vem sendo tomada por desenvolvedores de navegadores é abandonar o suporte a propriedades prefixadas em versões estáveis dos navegadores, mantendo suporte a tais propriedades apenas emNightly Builds e similares, desencorajando o uso em ambiente de produção.

+ +

Caso você precise usar propriedades prefixadas em seu trabalho, você deve declarar primeiramente as propriedades prefixadas e, por último, declarar a versão padrão não-prefixada da propriedade anteriormente declara, garantindo que o navegador utilize a versão especificada nos padrões assim que suportado. Por exemplo:

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +
+

Nota: Para mais informações em como lhe dar com propriedades prefixadas, veja Lidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS do nosso módulo Teste Cross-browsing.

+
+ +
+

Nota: Veja a página Extenções CSS Mozilla para mais informações sobre propriedades CSS prefixadas da Mozilla.

+
+ +

Como z-index está relacionado a posicionamento?

+ +

A propriedade z-index especifica a ordem dos elementos da pilha.

+ +

Um elemento com z-index/ordem na pilha maior sempre será renderizado à frente de um elemento com um z-index/ordem de pilha menor. z-index funcionará apenas em elementos que tenham uma posição especificada (Ou seja, só funcionará caso o elemento tenha position:absolute, position:relative ou position:fixed).

+ +
+

Nota: Para mais informações, veja nosso artigo de aprendizado sobre Posicionamento, e em particular a seção Introduzindo z-index.

+
diff --git a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html b/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html deleted file mode 100644 index f3febd4637..0000000000 --- a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: CSS - Perguntas frequentes -slug: Learn/CSS/Howto/CSS_Perguntas_Frequentes -tags: - - CSS - - Exemplo - - FAQ - - Guía - - Perguntas - - Perguntas Frequentes - - Web -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

Por que meu CSS, que é válido, não é renderizado corretamente?

- -

Navegadores usam a declaração de DOCTYPE para decidir se devem exibir o documento usando um modo compatível com os padrões da web ou com padrões de navegadores antigos. Usar corretamente a declaração de um DOCTYPE moderno no início do seu documento HTML melhorará a forma como o navegador trata os padrões utilizados no documento.

- -

Navegadores modernos possuem dois principais modos de renderização:

- - - -

Navegadores baseados na engine Gecko possuem um terceiro modo de renderização; Modo de "quase padrões" (Almost Standards Mode), que renderiza as páginas seguindo regras do Modo de padrões, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.

- -

Esta é uma lista das declarações de DOCTYPE mais usadas e que acionarão o modo de padrões ou de "quase padrões":

- -
<!DOCTYPE html> /* Este é o doctype HTML5. Levando em consideração que
-                   navegadores modernos possuem um parser de HTML5, o
-                   uso desta declaração é recomendada */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
- -

Sempre que possível, use a declaração de DOCTYPE HTML5.

- -

Por que meu CSS, que é válido, não é renderizado?

- -

Abaixo temos algumas das possíveis causas:

- - - -

Qual a diferença entre id e class?

- -

Elementos HTML podem ter um atributo id e/ou um atributo class. O atributo id designa um nome ao elemento ao qual este é aplicado, e para que a marcação seja válida, deverá haver no documento apenas um elemento com o nome designado (Por exemplo: Caso você designe o nome janela a um elemento, nenhum outro elemento poderá ter o nome janela).

- -

O atributo class designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributo id, os nomes designados em class podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para uma id particular quanto para classes.

- -

Algumas dicas de quando usar id e quando usar class:

- - - -

Geralmente é recomendável que se utilize classes sempre que possível, utilizando ids apenas quando absolutamente necessário para usos específicos (como conectar um label a um elemento de formulário, ou para estilizar elementos que necessicam ser semanticamente únicos). Abaixo estão descritas algumas vantagens em utilizar classes como forma principal de estilização:

- - - -
-

Nota: Veja Seletores para mais informações.

-
- -

Como eu redefino o valor padrão de uma propriedade?

- -

Inicialmente CSS não propiciava a diretiva "default" e a única forma de redefinir o valor padrão de uma propriedade era expliciatamente redeclarando aquela propriedade. Por exemplo:

- -
/* A cor padrão do cabeçalho é preta */
-h1 { color: red; }
-h1 { color: black; }
- -

Isso mudou com CSS 2; a diretiva initial agora é um valor válido para uma propriedade CSS. Ela redefine tal propriedade para seu valor padrão, o qual é definido nas especificações CSS para tal propriedade.

- -
/* A cor padrão do cabeçalho é preta */
-h1 { color: red; }
-h1 { color: initial; }
- -

Como eu derivo um estilo de outro?

- -

CSS não exatamente permite que um estilo seja definido com os termos de outro. (Veja as notas de Eric Meyer sobre a posição do grupo de trabalho a respeito do assunto). Entretanto, é possível atingir o mesmo efeito designando diversas classes a um elemento, e Variáveis CSS agora providenciam uma forma de definir informações sobre um estilo em um lugar e reutilizar estas informações em diversos outros lugares.

- -

Como eu aplico diversas classes a um elemento?

- -

Elementos HTML podem ter diversas classes designadas a si, com as classes sendo listadas no atributo class, tendo um espaço em branco separando cada uma.

- -
<style type="text/css">
-  .news { background: black; color: white; }
-  .today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

Caso a mesma propriedade seja declara em mais de uma regra, o conflito é resolvido primeiro pela ordem de especificidade e depois através da ordem das declarações CSS, com o último valor definido da propriedade sendo considerado. A ordem em que o nome das classes aparece no atributo class é irrelevante.

- -

Por que minhas regras de estilização não funcionam corretamente?

- -

Regras de estilização, mesmo que sejam semanticamente corretas, podem não ser aplicadas em determinadas situações. Você pode utilizar o visualizador de regras CSS do Inspetor de DOM para resolver problemas deste tipo, mas as ocasiões mais frequentes onde regras de estilização são ignoradas estão listadas abaixo.

- -

Hierarquia dos elementos HTML

- -

A forma como estilos CSS são aplicados a elementos HTML depende também da hierarquia dos elementos HTML. É importante lembrar que a regra aplicada a um descendente sobrepõe a regra do pai, independente de qualquer especificidade ou prioridade das regras CSS.

- -
<style type="text/css">
-  .news { color: black; }
-  .corpName { font-weight: bold; color: red; }
-</style>
-
-<!-- O texto do item news é preto, mas o nome da corporação é vermelho e em negrito -->
-<div class="news">
-   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
-</div>
-
- -

No caso de hierarquias HTML complexas, se uma regra parece ser ignorada, verifique se o elemento está dentro de outro elemento com um estilo diferente.

- -

Regra de estilização explicitamente redefinida

- -

Em folhas de estilo CSS, a ordem é importante. Se você definir uma propriedade e logo depois redefinir a mesma propriedade, a última regra definida será considerada.

- -
<style>
-  #stockTicker { font-weight: bold; }
-  .stockSymbol { color: red; }
-  /*  outras regras             */
-  /*  outras regras             */
-  /*  outras regras             */
-  .stockSymbol { font-weight: normal; }
-</style>
-
-<!-- Boa parte do texto está em negrito, exceto "GE", que é vermelho e não está em negrito -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

Para evitar que este tipo de problema, tente definir regras apenas uma vez para um determinado seletor e agrupe as regras para aquele seletor.

- -

Uso de uma propriedade reduzida

- -

Utilizar propriedades reduzidas para definir regra de estilização é interessante pois permite definir diversas propriedade de uma regra em uma sintaxe compacta e que permite otimizar o tamanho da folha de estilos. Utilizar propriedades reduzidas para definir apenas uma propriedade é permitido, mas deve ser lembrado que atributos da propriedade não definidos são redefinidos para seu valor padrão. Ou seja, isso pode acabar sobrepondo regras anteriormente definidas implicitamente..

- -
<style>
-   #stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-   .stockSymbol { font: 14px Arial; color: red; }
-</style>
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

No exemplo anterior o problema ocorre em regras pertencentes a diferentes elementos. Mas também poderia acontecer para o mesmo elemento, pois a ordem das regras é importante.

- -
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana;  /* font-weight agora está definido como "normal" */
-}
-
- -

Uso do seletor *

- -

O seletor curinga * faz referência a qualquer elemento, e deve ser usado com cuidado.

- -
<style>
-   body * { font-weight: normal; }
-   #stockTicker { font: 12px Verdana; }
-   .corpName { font-weight: bold; }
-   .stockUp { color: red; }
-</style>
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</div>
-
- -

No exemplo acima, o seletor * aplica a regra para todos os elementos dentro de body, em qualquer nível hierarquico, incluindo a classe .stockUp. Sendo assim a regra font-weight: bold; aplicada à classe .corpName é sobreposta por font-weight: normal; aplicada a todos os elementos dentro de body.

- -

O uso do seletor * também deve ser minimizado por ser um seletor lento, especialmente quando não utilizado como o primeiro elemento de um seletor. Este seletor deve ser evitado o máximo possível.

- -

Especificidade em CSS

- -

Quando multiplas regras são aplicadas a um elemento, a regra a ser renderizada depende de sua especificidade. O estilo inline (regras de estilo definidas no atributo style de um elemento HTML) tem a mais alta especificidade e irá sobrepor qualquer seletor. Seletores de ID tem a segunda mais alta especificidade, com seletores de classes vindo logo após e, eventualmente, seletores de elementos (tags). Tendo isso em mente, a cor do texto da {{htmlelement("div")}} abaixo terá a cor vermelha.

- -
<style>
-   div { color: black; }
-   #orange { color: orange; }
-   .green { color: green; }
-</style>
-
-<div id="orange" class="green" style="color: red;">Isso é vermelho</div>
-
- -

As regras se tornam mais complicadas quando o seletor tem diversas partes. Informações mais detalhadas sobre como a especificidade de seletores é calculada podem ser encontradas nas Especificações CSS 2.1, capítulo 6.4.3.

- -

O que as propriedades -moz-*, -ms-*, -webkit-*, -o-* e -khtml-* fazem?

- -

Estas propriedades, chamadas propriedades prefixadas, são extenções ao padrão CSS. Elas permitem o uso de recursos experimentais e fora dos padrões em navegadores sem poluir o namespace convencional, prevenindo que incompatibilidades entre implementações experimentais e fora dos padrões surjam quando os padrões CSS forem expandidos.

- -

Apesar do vasto uso na web, o uso de propriedades prefixadas não é recomendado em ambiente de produção. O uso indiscriminado de funcionalidades experimentais ou não-padrão pode causar problemas de compatibilidade futuros (como uma funcionalidade experimental mudando de nome, ou tendo o mesmo nome de uma outro funcionalidade que no passado tinha uma finalidade completamente diferente) e não renderizar páginas de forma correta em diferentes navegadores. Outro problema muito comum encontrado pelo uso indiscriminado de propriedades prefixadas é a declaração de regras que acabam se tornando exclusivas para determinadas engines, quebrando a renderização em outros navegadores, mesmo estes navegadores dando suporte à propriedade padrão não-prefixada (Por exemplo, apenas a propriedade -webkit-border-radius sendo usada em uma regra ao invés de border-radius, que é suportada por todos os navegadores, inclusive os baseados em webkit).

- -

Para amenizar os problemas de incompatibilidade gerados pelo uso de propriedades prefixadas (principalmente -webkit-), foi estabelecido o Compatibility Living Standard, o qual sugere um conjunto de propriedades -webkit- que navegadores (mesmo não utilizando a engine webkit) devem suportar. Outra medida que vem sendo tomada por desenvolvedores de navegadores é abandonar o suporte a propriedades prefixadas em versões estáveis dos navegadores, mantendo suporte a tais propriedades apenas emNightly Builds e similares, desencorajando o uso em ambiente de produção.

- -

Caso você precise usar propriedades prefixadas em seu trabalho, você deve declarar primeiramente as propriedades prefixadas e, por último, declarar a versão padrão não-prefixada da propriedade anteriormente declara, garantindo que o navegador utilize a versão especificada nos padrões assim que suportado. Por exemplo:

- -
-ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
- -
-

Nota: Para mais informações em como lhe dar com propriedades prefixadas, veja Lidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS do nosso módulo Teste Cross-browsing.

-
- -
-

Nota: Veja a página Extenções CSS Mozilla para mais informações sobre propriedades CSS prefixadas da Mozilla.

-
- -

Como z-index está relacionado a posicionamento?

- -

A propriedade z-index especifica a ordem dos elementos da pilha.

- -

Um elemento com z-index/ordem na pilha maior sempre será renderizado à frente de um elemento com um z-index/ordem de pilha menor. z-index funcionará apenas em elementos que tenham uma posição especificada (Ou seja, só funcionará caso o elemento tenha position:absolute, position:relative ou position:fixed).

- -
-

Nota: Para mais informações, veja nosso artigo de aprendizado sobre Posicionamento, e em particular a seção Introduzindo z-index.

-
diff --git a/files/pt-br/learn/css/index.html b/files/pt-br/learn/css/index.html new file mode 100644 index 0000000000..f5004d47f3 --- /dev/null +++ b/files/pt-br/learn/css/index.html @@ -0,0 +1,61 @@ +--- +title: Aprenda a estilizar HTML utilizando CSS +slug: Aprender/CSS +tags: + - CSS + - Folha de Estilos + - Iniciante + - especificação +translation_of: Learn/CSS +--- +

Cascading Stylesheets — ou {{glossary("CSS")}} — é a primeira tecnologia que você deve aprender após o {{glossary("HTML")}}. Enquanto o HTML é utilizado para definir a estrutura e semântica do seu conteúdo, o CSS é usado para estilizá-lo e desenhá-lo. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos decorativos.

+ +

Percurso de aprendizagem

+ +

Você deveria aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa Introdução ao HTML.Neste módulo você irá aprender sobre:

+ + + +

Uma vez que voce entendeu os Fundamentos do HTML, Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.

+ +

Antes de iniciar este tópico, você também deve ter ao menos familiaridade com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no Instalando o software básico, e entender como criar e gerenciar arquivos, conforme detalhado em Lidando com arquivos — ambos são partes do nosso Como começar com a web módulo completo de iniciante.

+ +

É recomendável que você trabalhe através do Como começar com a web antes de começar este tema. Contudo, não é absolutamente necessário; ja que muito do que é abordado no artigo básico de CSS também é coberto em nossa introdução ao CSS, embora com muito mais detalhes.

+ +

Módulos

+ +

Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.

+ +
+
Introdução ao CSS
+
Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, controlar cascatas e heranças, noções básicas de box model e depuração CSS.
+
Estilo de texto
+
Aqui nós olhamos os fundamentos do estilos de texto, incluindo a configuração da fonte, negrito, itálico, linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.
+
Caixas de estilo
+
Próximo, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo, nós recapitulamos box model para então controlarmos o layout por configuração de padding, borders e margins, configurações personalizada do background colors , imagens e outros componentes, componentes elegantes tais como sombras e filtros das caixas.
+
CSS layout
+
Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas com conteudos alocados. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport,  e outros. Nós temos cobertos os pré-requisitos necessários para então agora podemos aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodos envolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox, CSS Grid e posicionamento, alem de algumas tecnicas que voce ainda pode querer conhecer.
+
Design Responsivo (TBD)
+
Com tantos tipos diferentes de dispositivos capazes de navegar pela internet nos dias de hoje, design web responsivo (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.
+
Animações e transformações (TBD)
+
Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.
+
+ +

Resolvendo problemas de CSS comuns

+ +

Use CSS para resolver problemas comuns proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web.

+ +

Para começar, primeirmamente você aplicara cores aos elementos HTML e seus backgrounds;  alterará o tamanho, forma e posição dos elementos; definira e adicionara bordas aos elementos. Não há muito o que você não podera fazer depois que tiver uma compreensão solida até mesmo sobre o basico do CSS. Uma das melhores coisas sobre aprender CSS é que uma vez que voce conhece os fundamentos, normalmente voce tera uma boa noção do que pode ou não fazer, mesmo que não saiba como fazer aquilo ainda.

+ +

Veja também

+ +
+
CSS no MDN
+
O principal ponto de entrada para documentação CSS no MDN, onde voce encontra desde referências detalhadas a tutoriais avançados. Quer saber todos os valores que uma propriedade pode ter? Este é o melhor lugar
+
Referência CSS
+
Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.
+
diff --git a/files/pt-br/learn/css/styling_text/index.html b/files/pt-br/learn/css/styling_text/index.html new file mode 100644 index 0000000000..b2eafa9f05 --- /dev/null +++ b/files/pt-br/learn/css/styling_text/index.html @@ -0,0 +1,48 @@ +--- +title: Estilizando texto +slug: Aprender/CSS/Estilizando_texto +tags: + - CSS + - Fontes + - Iniciante + - Links + - Texto + - listas + - web fontes +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Com o básico de CSS compreendido, o próximo passo para você se concentrar será a estilização de textos — uma das mais importantes coisas que você fará com CSS. Aqui nós olhamos para os fundamentos de estilização de texto, fontes, negritos, italicos, linha e espaço entre letras, sombreamente e outras características textuais. Completamos o módulo produrando aplicar fontes personalizadas para sua página, e estilizando listas e links.

+ +

Pré-requisites

+ +

Antes de começar este módulo, você já deverá ter familiaridade básica com HTML, como dissemos no módulos Introdução ao HTML, e estar confortável com os fundamentos de CSS, como discutido em Introdução ao CSS.

+ +
+

Nota: Se você está usando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar seus próprios arquivos, você poderá treinar os códigos-exemplo em um programa de código online como JSBin, CodePen or Thimble.

+
+ +

Guias

+ +

Este módulo contém os seguintes artigos que ensinarão você todos os fundamentos por trás da estilização de conteúdo textual HTML.

+ +
+
Fundamentos da estilização de texto e fontes
+
Neste artigo nós passamos por todo o básico da estilização de texto/fonte, incluindo a configuração weight(negrito), family e style, configuração com forma abreviada, alinhamento textual, linha e espaçamento entre as letras.
+
Estilizando lista
+
Listas comportam-se como qualquer texto na maior parte das vezes, ma há algumas propriedades CSS específicas para lista que você precisa conhecer, e algumas boas práticas a considerar. Este artigo esclarecerá tudo.
+
Estilizando links
+
Na estilização de links, é importante entender como fazer uso de pseudo-classes para estilizar o estado dos links efetivamente, como estilizar links para uso em recursos de interfaces diversas como menus de navegação e guias. Veremos todos esses tópicos neste artigo.
+
Web Fontes
+
Aqui nós exploraremos Web Fontes em detalhes — isto permite que você baixe fontes personalizadas junto com sua página web, para permitir maior personalização na estilização.
+
+ +

Avaliação

+ +

A seguinte avaliação testará seu entendimento das técnicas de estilização de texto cobertas pelo guia acima.

+ +
+
Estilizando a homepage de um escola comunitária
+
Nesta avaliação nos testeremos seu entendimento de estilização de texto fazendo com que você estilize a homepage de uma escola comunitária.
+
diff --git a/files/pt-br/learn/css/styling_text/styling_lists/index.html b/files/pt-br/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..72dc8dc227 --- /dev/null +++ b/files/pt-br/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,272 @@ +--- +title: Manipulando Listas +slug: Web/CSS/Getting_Started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}

+ +

Este é o 10º seção do CSS Introdução tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

+ +

Informação: Lists

+ +

Se você aceitou o desafio na última seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

+ +

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

+ +

Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.

+ +

O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.

+ +

Listas não ordenadas

+ +

Em uma lista desordenada, cada item da lista é marcado da mesma forma.

+ +

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

+ + + +

        none

+ +

Alternativamente, você pode especificar o URL de uma imagem.

+ +
+
Exemplo
+ +

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

+ +
li.open {list-style: circle;} 
+li.closed {list-style: disc;}
+
+ +

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

+ +
<ul> 
+  <li class="open"> Lorem ipsum </ li> 
+  <li class="closed"> dolor sit </ li>
+  <li class="closed"> Amet consectetuer </ li>
+  <li class="open"> Magna aliquam </ li>
+  <li class="closed"> Autem veleum </ li>
+</ ul>
+
+ +

O resultado pode parecer:

+ +

{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}

+
+ +

Listas ordenadas

+ +

Em uma listaordenada , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

+ +

Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:

+ + + +
+
Exemplo
+ +

Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe informações, os itens são identificados com letras maiúsculas.

+ +
<ol class="info">
+  <li>Lorem ipsum</li>
+  <li>Dolor sit</li>
+  <li>Amet consectetuer</li>
+  <li>Magna aliquam</li>
+  <li>Autem veleum</li>
+</ol>
+ +
ol.info {list-style: upper-latin;}
+
+ +

O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:

+ +

{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}

+
+ +
+
Mais detalhes
+ +

O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.

+ +

Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.

+ +

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

+
+ +

Contadores

+ +
+

Nota:  Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

+
+ +

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

+ +

Para especificar a numeração, você precisa de um contador com um nome que você especificar.

+ +

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.

+ +

Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.

+ +

Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o conteúdo da propriedade (como você fez na página anterior, Conteúdo) .

+ +

No valor do conteúdo de propriedade, especifique counter () com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na lista ordenada secção acima.

+ +

Normalmente, o elemento que apresenta o contador também incrementa-lo.

+ +
+
Exemplo
+ +

Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe numeradas:

+ +
h3.numbered {counter-reset: mynum;}
+
+ +

 

+ +

Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe numeradas:

+ +
<p class = "numbered"> Lorem ipsum </ p>
+<p class = "numbered"> dolor sit </ p>
+<p class = "numbered"> Amet consectetuer </ p>
+<p class = "numbered"> Magna aliquam </ p>
+<p class = "numbered"> Autem veleum </ p>
+
+ +
body 
+   {counter-reset: 
+mynum;} 
+p.numbered:before
+  {content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+ +

O resultado se parece com isso:

+ +

{{ EmbedLiveSample("Contadores", '300', '200', '') }}

+
+ +
+
Mais detalhes
+ +

Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.

+ +

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

+ +

Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

+
+ +

Listas denominadas: Ação

+ +

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+
+ +

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

Se o layout e comentário não são a seu gosto, alterá-los.

+ +

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

+ +

{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}

+ +
+
Desafios
+ +

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

 

+ +

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

Ver soluções para esses desafios.

+ +

Qual o proximo?

+ +

{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.

diff --git a/files/pt-br/learn/forms/basic_native_form_controls/index.html b/files/pt-br/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..ebefe55869 --- /dev/null +++ b/files/pt-br/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,701 @@ +--- +title: Os widgets nativos +slug: Web/Guide/HTML/Forms/Os_widgets_nativos +tags: + - Aprender + - Contrôles + - Exemplos + - Guía + - HTML + - Iniciantes + - Intermediário + - Web +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.

+ + + + + + + + + + + + +
Pré-requisitos:Alfabetização básica em informática e um entendimento básico de HTML.
Objetivo:Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.
+ +

Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários — Veja How to build custom form widgets posteriormente neste mesmo módulo para obter mais idéias sobre isso.

+ +
+

Nota: A maioria dos recursos discutidos neste artigo possui amplo suporte nos navegadores; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo referência aos elementos de formulário HTML, e, em particular, nossa extensa referência de tipos <input>.

+
+ +

Atributos comuns

+ +

Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos. Entretanto, há um conjunto de atributos comuns a todos os elementos do formulário, os quais permitem certo controle sobre os widgets. Aqui está uma lista desses atributos comuns:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome do atributoValor padrãoDescrição
autofocus(falso)Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo digitando sobre um controle diferente. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.
disabled(falso)Este é um atributo booleano que indica que o usuário não pode interagir com este elemento. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo disabled, então o elemento é ativado.
formO elemento do formulário ao qual o widget está associado. O valor do atributo deve ser o atributo id de um {{HTMLElement("form")}} no mesmo documento. Em teoria, permite colocar um widget fora de um elemento {{HTMLElement("form")}}. Na prática, no entanto, não há navegador que suporte esse recurso.
nameO nome do elemento. Este atributo é enviado com os dados do formulário.
valueO Valor inicial do elemento.
+ +

Text input fields

+ +

Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples

+ +
+

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

+
+ +

All text fields share some common behaviors:

+ + + +
+

Note: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.

+
+ +

Single line text fields

+ +

A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to text (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, text is the default value). The value text for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify type="date" and the browser doesn't support native date pickers).

+ +
+

Note: You can find examples of all the single line text field types on GitHub at single-line-text-fields.html (see it live also).

+
+ +

Here is a basic single line text field example:

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.

+ +

Screenshots of single line text fields on several platforms.

+ +

HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

+ +

E-mail address field

+ +

This type of field is set with the value email for the {{htmlattrxref("type","input")}} attribute:

+ +
<input type="email" id="email" name="email" multiple>
+ +

When this type is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:

+ +

An invalid email input showing the message Please enter an email address.

+ +

It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

+ +

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

+ +
+

Note: You can find out more about form validation in the article Form data validation.

+
+ +

Password field

+ +

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

+ +
<input type="password" id="pwd" name="pwd">
+ +

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

+ +

Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.

+ +

Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

+ +

Search field

+ +

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

+ +
<input type="search" id="search" name="search">
+ +

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

+ +

Screenshots of search fields on several platforms.

+ +

Phone number field

+ +

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

+ +
<input type="tel" id="tel" name="tel">
+ +

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.

+ +

URL field

+ +

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

+ +
<input type="url" id="url" name="url">
+ +

It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.

+ +
Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
+ +
+

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

+
+ +

Multi-line text fields

+ +

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

+ +
<textarea cols="30" rows="10"></textarea>
+ +

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

+ +

Screenshots of multi-lines text fields on several platforms.

+ +
+

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

+
+ +

{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributes for the {{HTMLElement("textarea")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("cols","textarea")}}20The visible width of the text control, in average character widths.
{{htmlattrxref("rows","textarea")}}The number of visible text lines for the control.
{{htmlattrxref("wrap","textarea")}}softIndicates how the control wraps text. Possible values are: hard or soft
+ +

Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.

+ +

There are two key related points to note here:

+ + + +

Drop-down content

+ +

Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the select box, and autocomplete box. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.

+ +
+

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

+
+ +

Select box

+ +

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

+ +
<select id="simple" name="simple">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:

+ +
<select id="groups" name="groups">
+  <optgroup label="fruits">
+    <option>Banana</option>
+    <option selected>Cherry</option>
+    <option>Lemon</option>
+  </optgroup>
+  <optgroup label="vegetables">
+    <option>Carrot</option>
+    <option>Eggplant</option>
+    <option>Potato</option>
+  </optgroup>
+</select>
+ +

Screenshots of single line select box on several platforms.

+ +

If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

+ +

On the {{HTMLElement("optgroup")}} element, the label attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.

+ +

Multiple choice select box

+ +

By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down Cmd/Ctrl and clicking multiple values).

+ +

Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

+ +
<select multiple id="multi" name="multi">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

Screenshots of multi-lines select box on several platforms.

+ +
Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
+ +

Autocomplete box

+ +

You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.

+ +

The data list is then bound to a text field (usually an <input> element) using the {{htmlattrxref("list","input")}} attribute.

+ +

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

+ +
<label for="myFruit">What's your favorite fruit?</label>
+<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
+<datalist id="mySuggestion">
+  <option>Apple</option>
+  <option>Banana</option>
+  <option>Blackberry</option>
+  <option>Blueberry</option>
+  <option>Lemon</option>
+  <option>Lychee</option>
+  <option>Peach</option>
+  <option>Pear</option>
+</datalist>
+ +
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
+ +
Screenshots of datalist on several platforms.
+ +
+ +

Datalist support and fallbacks

+ +

The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.

+ +

To handle this, here is a little trick to provide a nice fallback for those browsers:

+ +
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
+
+<datalist id="fruitList">
+  <label for="suggestion">or pick a fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Apple</option>
+    <option>Banana</option>
+    <option>Blackberry</option>
+    <option>Blueberry</option>
+    <option>Lemon</option>
+    <option>Lychee</option>
+    <option>Peach</option>
+    <option>Pear</option>
+  </select>
+</datalist>
+
+ +

Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+ +

Checkable items

+ +

Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.

+ +

It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.

+ +
+

Note: You can find the examples from this section on GitHub as checkable-items.html (see it live also).

+
+ +

For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. 

+ +

You also need to provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

+ +

Check box

+ +

A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

+ +
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
+ +

Including the checked attribute makes the checkbox checked automatically when the page loads.

+ +

Screenshots of check boxes on several platforms.

+ +

Radio button

+ +

A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

+ +
<input type="radio" checked id="soup" name="meal">
+ +

Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

+ +
<fieldset>
+  <legend>What is your favorite meal?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soup</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Screenshots of radio buttons on several platforms.

+ +

Buttons

+ +

Within HTML forms, there are three kinds of button:

+ +
+
Submit
+
Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the type attribute (or an invalid value of type) results in a submit button.
+
Reset
+
Resets all form widgets to their default values.
+
Anonymous
+
Buttons that have no automatic effect but can be customized using JavaScript code.
+
+ +
+

Note: You can find the examples from this section on GitHub as button-examples.html (see it live also).

+
+ +

A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:

+ +

submit

+ +
<button type="submit">
+    This a <br><strong>submit button</strong>
+</button>
+
+<input type="submit" value="This is a submit button">
+ +

reset

+ +
<button type="reset">
+    This a <br><strong>reset button</strong>
+</button>
+
+<input type="reset" value="This is a reset button">
+ +

anonymous

+ +
<button type="button">
+    This an <br><strong>anonymous button</strong>
+</button>
+
+<input type="button" value="This is an anonymous button">
+ +

Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:

+ + + +

Screenshots of buttons on several platforms.

+ +

Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

+ +

Advanced form widgets

+ +

In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.

+ +
+

Note: You can find the examples from this section on GitHub as advanced-examples.html (see it live also).

+
+ +

Numbers

+ +

Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.

+ +

It's also possible to:

+ + + +

Example

+ +
<input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.

+ +

number inputs are not supported in versions of Internet Explorer below 10.

+ +

Sliders

+ +

Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.

+ +

A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.

+ +

Example

+ +
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+ +

This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

+ +

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.

+ +
<label for="beans">How many beans can you eat?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
+ +

This can be implemented using some simple JavaScript:

+ +
var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}
+ +

Here we store references to the range input and the span in two variables, then we immediately set the span's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

+ +

range inputs are not supported in versions of Internet Explorer below 10.

+ +

Date and time picker

+ +

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.

+ +

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.

+ +

datetime-local

+ +

This creates a widget to display and pick a date with time, but without any specific time zone information.

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

month

+ +

This creates a widget to display and pick a month with a year.

+ +
<input type="month" name="month" id="month">
+ +

time

+ +

This creates a widget to display and pick a time value.

+ +
<input type="time" name="time" id="time">
+ +

week

+ +

This creates a widget to display and pick a week number and its year.

+ +
<input type="week" name="week" id="week">
+ +

All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

+ +
<label for="myDate">When are you available this summer?</label>
+<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
+ +

Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.

+ +

Color picker

+ +

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.

+ +

A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

+ +
<input type="color" name="color" id="color">
+ +

Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

+ +

Other widgets

+ +

There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.

+ +
+

Note: You can find the examples from this section on GitHub as other-examples.html (see it live also).

+
+ +

File picker

+ +

HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

+ +

To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

+ +

Example

+ +

In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

Hidden content

+ +

It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value hidden.

+ +

If you create such an element, it's required to set its name and value attributes:

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+ +

Image button

+ +

The image button control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).

+ +

An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.

+ +
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:

+ + + +

So for example when you click on the image of this widget, you are sent to a URL like the following:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

+ +

Meters and progress bars

+ +

Meters and progress bars are visual representations of numeric values.

+ +

Progress

+ +

A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.

+ +
<progress max="100" value="75">75/100</progress>
+ +

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

+ +

The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

+ +

Meter

+ +

A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

+ + + +

All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:

+ + + +

Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

+ +
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+ +

The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

+ +

Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.

+ +

Conclusion

+ +

As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.

+ +

See also

+ +

To dig into the different form widgets, there are some useful external resources you should check out:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ + + +

In this module

+ + diff --git a/files/pt-br/learn/forms/form_validation/index.html b/files/pt-br/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..7f9146d0a4 --- /dev/null +++ b/files/pt-br/learn/forms/form_validation/index.html @@ -0,0 +1,813 @@ +--- +title: Form data validation +slug: Web/Guide/HTML/Forms/Form_validation +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
+ +

A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o Constraint validation guide.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento em informática, uma compreensão razoável de HTML, CSS, e JavaScript.
Objetivo:Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.
+ +

O que é validação de formulário?

+ +

Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:

+ + + +

Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.

+ +


+ Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:

+ + + +

Different types of form validation

+ +

There are two different types of form validation which you'll encounter on the web:

+ + + +

In the real world, developers tend to use a combination of client-side and server-side validation.

+ +

Using built-in form validation

+ +

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done by using validation attributes on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.

+ +

When an element is valid:

+ + + +

When an element is invalid:

+ + + +

Validation constraints on input elements — starting simple

+ +

In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.

+ +

Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as fruit-start.html, and a live example below:

+ + + +

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

+ +

To begin with, make a copy of fruit-start.html in a new directory on your hard drive.

+ +

The required attribute

+ +

The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

+ +

Add a required attribute to your input, as shown below:

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Also, take note of the CSS included in the example file:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:

+ +

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

+ +

Validating against a regular expression

+ +

Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a Regular Expression as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).

+ +

Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:

+ + + +

Anyway, let's implement an example — update your HTML to add a pattern attribute, like so:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="banana|cherry">
+  <button>Submit</button>
+</form>
+ + + +

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

+ +

In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".

+ +

At this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!

+ +
+

Note: Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the email type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the url type automatically require a properly-formed URL.

+
+ +
+

Note: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.

+
+ +

Constraining the length of your entries

+ +

All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.

+ +

For number fields (i.e. <input type="number">), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.

+ +

Let's look at another example. Create a new copy of the fruit-start.html file.

+ +

Now delete the contents of the <body> element, and replace it with the following:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

Here is the example running live:

+ +

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}

+ +
+

Note: <input type="number"> (and other types, like range) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).

+
+ +

Full example

+ +

Here is a full example to show off usage of HTML's built-in validation features:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +
body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* required to properly style form
+   elements on WebKit based browsers */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

{{EmbedLiveSample("Full_example", "100%", 420)}}

+ +

See Validation-related attributes for a complete list of attributes that can be used to constrain input values, and the input types that support them.

+ +

Customized error messages

+ +

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

+ +

These automated messages have two drawbacks:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
French versions of feedback messages on an English page
BrowserRendering
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
+ +

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

+ +

HTML5 provides the constraint validation API to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:

+ +
<form>
+  <label for="mail">I would like you to provide me an e-mail</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

In JavaScript, you call the setCustomValidity() method:

+ +
var email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I expect an e-mail, darling!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}

+ +

Validating forms using JavaScript

+ +

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

+ +

The constraint validation API

+ +

More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:

+ + + +

Constraint validation API properties

+ + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
validationMessageA localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (willValidate is false), or the element's value satisfies its constraints.
validityA {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.
willValidateReturns true if the element will be validated when the form is submitted; false otherwise.
+ +

Constraint validation API methods

+ + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
checkValidity()Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.
{{domxref("HTMLFormElement.reportValidity()")}}Returns true if the element or its child controls satisfy validation constraints. When false is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.
setCustomValidity(message)Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
+
+ If the argument is the empty string, the custom error is cleared.
+ +

For legacy browsers, it's possible to use a polyfill such as Hyperform to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.

+ +

Example using the constraint validation API

+ +

Let's see how to use this API to build custom error messages. First, the HTML:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.

+ +

The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.

+ +
CSS
+ +

This CSS styles our form and the error output to look more attractive.

+ +
/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

The following JavaScript code handles the custom error validation.

+ +
// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Each time the user types something, we check if the
+  // email field is valid.
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    error.innerHTML = ""; // Reset the content of the message
+    error.className = "error"; // Reset the visual state of the message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Each time the user tries to send the data, we check
+  // if the email field is valid.
+  if (!email.validity.valid) {
+
+    // If the field is not valid, we display a custom
+    // error message.
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+    // And we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+}, false);
+ +

Here is the live result:

+ +

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

+ +

The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.

+ +

Validating forms without a built-in API

+ +

Sometimes, such as with legacy browsers or custom widgets, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.

+ +

To validate a form, you have to ask yourself a few questions:

+ +
+
What kind of validation should I perform?
+
You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.
+
What should I do if the form does not validate?
+
This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?
+
How can I help the user to correct invalid data?
+
In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: + +
+
+ +

An example that doesn't use the constraint validation API

+ +

In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element -->
+  <button type="submit">Submit</button>
+</form>
+ +

As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that ARIA is an independent specification that's not specifically related to HTML5.

+ +
CSS
+ +

Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.

+ +
/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.

+ +
// There are fewer ways to pick a DOM node with legacy browsers
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

The result looks like this:

+ +

{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

+ +

As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:

+ + + +

Remote validation

+ +

In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.

+ +

Performing such a validation requires taking a few precautions:

+ + + +

Conclusion

+ +

Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..76e202e685 --- /dev/null +++ b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,786 @@ +--- +title: How to build custom form widgets +slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

There are many cases where available HTML form widgets are just nThere are many cases where available HTML form widgets are just not enough. If you want to perform advanced styling on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.

+ +

In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.

+ +
+

Note: We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.

+
+ +

Design, structure, and semantics

+ +

Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.

+ +

In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:

+ +

The three states of a select box

+ +

This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).

+ +

In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:

+ +
+
The widget is in its normal state when:
+
+
    +
  • the page loads
    • +
  • the widget was active and the user clicks anywhere outside the widget
    • +
  • the widget was active and the user moves the focus to another widget using the keyboard
    • +
+ +
+

Note: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

+
+
+
The widget is in its active state when:
+
+
    +
  • the user clicks on it
    • +
  • the user hits the tab key and it gains focus
    • +
  • the widget was in its open state and the user clicks on the widget.
    • +
+
+
The widget is in its open state when:
+
+
    +
  • the widget is in any other state than open and the user clicks on it
    • +
+
+
+ +

Once we know how to change states, it is important to define how to change the widget's value:

+ +
+
The value changes when:
+
+
    +
  • the user clicks on an option when the widget is in the open state
    • +
  • the user hits the up or down arrow keys when the widget is in its active state
    • +
+
+
+ +

Finally, let's define how the widget's options will behave:

+ + + +

For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.

+ +

Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).

+ +

In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to perform user tests. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:

+ + + +
+

Note: Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

+
+ +

Defining the HTML structure and semantics

+ +

Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:

+ +
<!-- This is our main container for our widget.
+     The tabindex attribute is what allows the user to focus the widget.
+     We'll see later that it's better to set it through JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- This container will be used to display the current value of the widget -->
+  <span class="value">Cherry</span>
+
+  <!-- This container will contain all the options available for our widget.
+       Because it's a list, it makes sense to use the ul element. -->
+  <ul class="optList">
+    <!-- Each option only contains the value to be displayed, we'll see later
+         how to handle the real value that will be sent with the form data -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.

+ +

Creating the look and feel using CSS

+ +

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

+ +

Required styles

+ +

The required styles are those necessary to handle the three states of our widget.

+ +
.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}
+ +

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

+ +
.select .active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Now, let's handle the list of options:

+ +
/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

+ +
.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Beautification

+ +

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

+ +
.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

+ +
.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

Next, let's style the list of options:

+ +
.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

So here's the result with our three states:

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

Bring your widget to life with JavaScript

+ +

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

+ +
+

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

+
+ +
+

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

+
+ +

Why isn't it working?

+ +

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

+ + + +

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

+ +

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

+ +

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

+ +
.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

+
+ +

Making the job easier

+ +

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

+ +

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

+ +

The features we plan to use are the following (ordered from the riskiest to the safest):

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (This is not DOM but modern JavaScript)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

We weren't kidding when we said it's easy to do.

+ +

Building event callbacks

+ +

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

+ +
// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};
+ +

That's all you need in order to handle the various states of the custom widget.

+ +

Next, we bind these functions to the appropriate events:

+ +
// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

Handling the widget's value

+ +

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

+ +

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

+ +

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

+ +
// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

With these two functions, we can bind the native widgets to the custom ones:

+ +
// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

+ +

With that, we're done! Here's the result:

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

But wait a second, are we really done?

+ +

Make it accessible

+ +

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

+ +

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

+ +

The role attribute

+ +

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

+ +

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

+ +

To support the listbox role, we just have to update our HTML like this:

+ +
<!-- We add the role="listbox" attribute to our top element -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- We also add the role="presentation" to the ul element -->
+  <ul class="optList" role="presentation">
+    <!-- And we add the role="option" attribute to all the li elements -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

+
+ +

The aria-selected attribute

+ +

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

+ +

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

Conclusion

+ +

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

+ +

Here are a few libraries you should consider before coding your own:

+ + + +

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html b/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..33a562813c --- /dev/null +++ b/files/pt-br/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,304 @@ +--- +title: Como estruturar um formulário HTML +slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form +tags: + - Beginner + - CodingScripting + - Example + - Forms + - Guide + - HTML + - Learn + - Structure + - Web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

+
+ +

Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.

+ + + + + + + + + + + + +
Pré-Requisitos:Leitura sobre computação básica e entendimento básico de HTML.
Objetivo:Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.
+ +

A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e acessível.

+ +

O elemento <form> 

+ +

O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.

+ +

Nós já vimos isto em um artigo anterior:

+ +
Nota: É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.
+ +

Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.

+ +
+

Nota: O HTML 5 introduziu o atributo form no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.

+
+ +

Os elementos <fieldset> e <legend>

+ +

O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.

+ +

Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como Jaws ou NVDA, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.

+ +

Aqui está um pequeno exemplo:

+ +
<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small" />
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium" />
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large" />
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+ +

Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.

+ +

O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.

+ +

O elemento <label> 

+ +

Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:

+ +
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+ +

Com o <label> associado corretamente ao <input> por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".

+ +

Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.

+ +

Observe que um widget pode ser aninhado dentro de seu elemento <label>, assim:

+ +
<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+ +

Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.

+ +

Labels são clicáveis também !.

+ +

Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.

+ +

Por exemplo:

+ +
<form>
+  <p>
+    <label for="taste_1">I like cherry</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">I like banana</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
+ +
+

Nota: Você pode encontrar este exemplo em checkbox-label.html (ver ao vivo também).

+
+ +

Múltiplos labels

+ +

Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.

+ +

Vamos considerar este exemplo:

+ +
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
+
+<!-- So this: -->
+<div>
+  <label for="username">Name:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
+
+<!-- would be better done like this: -->
+<div>
+  <label for="username">
+    <span>Name:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
+</div>
+
+<!-- But this is probably best: -->
+<div>
+  <label for="username">Name: <abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "star" or "required", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).

+ + + +
+

Note: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.

+
+ +

Note: You can find this example on GitHub as required-labels.html (see it live also). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

+ +

Estruturas comuns HTML usadas com formulários

+ +

Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.

+ +

Como você pode ver nos exemplos, é comum envolver um label e seu widget com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários checkboxes ou radio buttons).

+ +

Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.

+ +

Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.

+ +

Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os radio buttons.

+ +

Active learning: building a form structure

+ +

Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (The native form widgets). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

+ +
    +
  1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
    2. +
  2. First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}: + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. Next, start your form off by adding the outer {{htmlelement("form")}} element: + 
    <form>
+
+</form>
    +
    4. +
  4. Inside the <form> tags, start by adding a heading and paragraph to inform users how required fields are marked: + 
    <h1>Payment form</h1>
+<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    +
    5. +
  5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now: + 
    <section>
+    <h2>Contact information</h2>
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="M." >
+              Mister
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Ms.">
+              Miss
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Password: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. Now we'll turn to the second <section> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <p>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <input> element of type number, for entering a credit card number. The last one is an <input> element of type date, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section: + 
    <section>
+    <h2>Payment information</h2>
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="number" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formatted as yyyy/mm/dd</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type submit, for submitting the form data. Add this to the bottom of your form now: + 
    <p> <button type="submit">Validate the payment</button> </p>
    +
    8. +
+ +

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

+ +

Summary

+ +

You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.

+ +

See Also

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/forms/index.html b/files/pt-br/learn/forms/index.html new file mode 100644 index 0000000000..15bd243566 --- /dev/null +++ b/files/pt-br/learn/forms/index.html @@ -0,0 +1,79 @@ +--- +title: Formulários da Web - Trabalhando com dados do usuário +slug: Web/Guide/HTML/Forms +tags: + - Aprender + - Funcionalidades + - Guía + - HTML + - Iniciante + - Web + - formulários +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms. HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  nem sempre é óbvio como usá-los em seu pleno potencial. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!

+ +

Pré-requisitos

+ +

Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa Introdução ao HTML.

+ +
+

Dica: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como JSBin ou Thimble.

+
+ +

Guias básicos

+ +

Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.

+ +
+
Meu primeiro formulário HTML
+
O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.
+
Como estruturar um formulário HTML
+
Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.
+
Os form widgets nativos
+
Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.
+
Enviando e recuperando dados
+
Este artigo mostra o que acontece quando um usuário submete (envia) um formulário — para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.
+
Validação de dados nos formulários HTML
+
Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.
+
+ +

Guias avançados

+ +

Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.

+ +
+
Como criar widgets HTML form personalizados
+
Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.
+
Enviando HTML forms através do JavaScript
+
Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)
+
Formulários HTML para browsers antigos
+
Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.
+
Novidades em formulários no HTML5
+
Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.
+
+ +

Guias de estilização de formulários

+ +

Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre CSS, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.

+ +
+
Estilizando formulários HTML
+
Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.
+
Estilos avançados para HTML forms
+
Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.
+
Tabela de compatibilidade das Propriedades dos widgets
+
Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.
+
+ +

Avaliações

+ +

A definir.

+ +

Veja também

+ + diff --git a/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..c6eaaee29b --- /dev/null +++ b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,251 @@ +--- +title: Sending form data +slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +

Em muitos casos, a finalidade de HTML Form Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.

+ +

Para onde vão os dados?

+ +

Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.

+ +

Sobre a arquitetura cliente / servidor

+ +

A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como Apache, Nginx, IIS, Tomcat, etc.), usando o HTTP protocol. O servidor responde a solicitação usando o mesmo protocolo.

+ +

A basic schema of the Web client/server architecture

+ +

No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.

+ +

No lado do cliente: definindo como enviar os dados

+ +

O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.

+ +

o atributo {{htmlattrxref("action","form")}}

+ +

Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.

+ +
Exemplos
+ +

Neste exemplo, os dados são enviados para http://foo.com:

+ +
<form action="http://foo.com">
+ +

Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:

+ +
<form action="/somewhere_else">
+ +

Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:

+ +
<form>
+ +

Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.

+ +
<form action="#">
+ +
+

Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.

+
+ +

o atributo {{htmlattrxref("method","form")}}

+ +

Este atributo define como os dados são enviados. o HTTP protocol 

+ +

Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.

+ +

Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.

+ +
O método GET
+ +

O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.

+ +
Exemplo
+ Considere o seguinte formulário:
+ +
<form action="http://foo.com" method="get">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Envie meus cumprimentos</button>
+</form>
+ +

Com o método GET, a solicitação HTTP tem esta aparência:

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
O método POST
+ +

O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.

+ +
Exemplo
+ +

Considere esta forma (a mesma acima):

+ +
<form action="http://foo.com" method="post">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Send my greetings</button>
+</form>
+ +

Quando enviado usando o método POST, o pedido HTTP se parece com isto:

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.

+ +

Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox Web Console ou o Chrome Developer Tools). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:

+ +
    +
  1. Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.
    2. +
  2. Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.
    3. +
+ +

No lado do servidor: recuperar os dados

+ +

Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.

+ +

Exemplo: PHP Bruto

+ +

O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.

+ +
<?php
+  // The global $_POST variable allows you to access the data sent with the POST method
+  // To access the data sent with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;
+ +

Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:

+ +
Oi Mãe
+ +

Example: Python Bruto

+ +

This example uses Python to do the same thing--display the provided data on a web page. It uses the CGI Python package to access the form data.

+ +
#!/usr/bin/env python
+import html
+import cgi
+import cgitb; cgitb.enable()     # for troubleshooting
+
+print("Content-Type: text/html") # HTTP header to say HTML is following
+print()                          # blank line, end of headers
+
+form = cgi.FieldStorage()
+say  = html.escape(form["say"].value);
+to   = html.escape(form["to"].value);
+
+print(say, " ", to)
+ +

O resultado é o mesmo que com o PHP:

+ +
Oi Mãe
+ +

Outros idiomas e frameworks

+ +

Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo Perl, Java, .Net, Ruby, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:

+ + + +

Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.

+ +

Um caso especial: enviar arquivos

+ +

Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.

+ +

o {{htmlattrxref("enctype","form")}} atributo

+ +

Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."

+ +

Mas se você quiser enviar arquivos, você precisa fazer duas coisas:

+ + + +

Por exemplo:

+ +
<form method="post" enctype="multipart/form-data">
+  <input type="file" name="myFile">
+  <button>Send the file</button>
+</form>
+ +
+

Nota: Alguns navegadores suportam{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.

+
+ +
+

Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.

+
+ +

Preocupações com segurança

+ +

Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.

+ +

Falhas de segurança comuns

+ +

Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:

+ +

XSS e CSRF

+ +

Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.

+ +

O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o same origin policy. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.

+ +

CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).

+ +

Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.

+ +

To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim.  Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.

+ +

SQL injection

+ +

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

+ +

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

+ +

HTTP header injection and email injection

+ +

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.

+ +

These attacks are mostly silent, and can turn your server into a zombie.

+ +

Be paranoid: Never trust your users

+ +

So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

+ +

All data that comes to your server must be checked and sanitized. Always. No exception.

+ + + +

You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

+ +

Conclusion

+ +

As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

+ +

See also

+ +

If you want to learn more about securing a web application, you can dig into these resources:

+ + diff --git a/files/pt-br/learn/forms/your_first_form/index.html b/files/pt-br/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..31ef58aa7c --- /dev/null +++ b/files/pt-br/learn/forms/your_first_form/index.html @@ -0,0 +1,270 @@ +--- +title: Meu primeiro formulário HTML +slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML +translation_of: Learn/Forms/Your_first_form +--- +

Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o básico de HTML e CSS.

+ +

Antes de começarmos

+ +

O que são formulários HTML?

+ +

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

+ +

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.

+ +

O que você precisa para trabalhar com formulários?

+ +

Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como Visual Studio, Eclipse, Aptana, etc., mas cabe somente a você.

+ +

A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: Envio e recuperação de dados do formulário.

+ +

Desenhando seu formulário

+ +

Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: peça apenas o que é absolutamente necessário.
+ A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:

+ + + +

Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.

+ +

The form to build, roughly sketch

+ +

O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.

+ +

Sujar as mãos com HTML

+ +


+ Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .

+ +

O Elemento {{HTMLElement("form")}} 

+ +

Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:

+ +
<form action="/pagina-processa-dados-do-form" method="post">
+
+</form>
+ +

Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo action e o atributo method.

+ + + +

Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo Enviando e recebendo dados de um formulário

+ +

Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} 

+ +

O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").

+ +

Em termos de código HTML, teremos algo assim:

+ +
<form action="/pagina-processa-dados-do-form" method="post">
+    <div>
+        <label for="nome">Nome:</label>
+        <input type="text" id="nome" />
+    </div>
+    <div>
+        <label for="email">E-mail:</label>
+        <input type="email" id="email" />
+    </div>
+    <div>
+        <label for="msg">Mensagem:</label>
+        <textarea id="msg"></textarea>
+    </div>
+</form>
+ +

Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo for em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma label à um campo do formulário. Este atributo faz referência ao id do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: How to structure an HTML form(en).

+ +

No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo type. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo native form widgets. Em nosso exemplo, nós usamos somente o  type="text", valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o type="email" que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo Validação de dados de formulário.

+ +

Por último, mas não menos importante, observe a sintaxe de <input />  e <textarea> </ textarea>. Esta é uma das esquisitices do HTML. A tag <input /> é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "/" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo value como este:

+ +
<input type="text" value="Por padrão, este elemento será preenchido com este texto " />
+ +

Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:

+ +
<textarea>Por padrão, este elemento será preenchido com este texto </textarea>
+ +

E um elemento {{HTMLElement("button")}} para concluir

+ +

O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :

+ +
<form action="/pagina-processa-dados-do-form" method="post">
+    <div>
+        <label for="name">Nome:</label>
+        <input type="text" id="name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" />
+    </div>
+    <div>
+        <label for="msg">Mensagem:</label>
+        <textarea id="msg"></textarea>
+    </div>
+    <div class="button">
+        <button type="submit">Enviar sua mensagem</button>
+    </div>
+</form>
+ +

Um botão pode ser de três tipos: submit, reset, ou button.

+ + + +

Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.

+ + + +

Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.

+ +

+ +

Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:

+ +

Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:

+ +
form {
+    /* Apenas para centralizar o form na página */
+    margin: 0 auto;
+    width: 400px;
+    /* Para ver as bordas do formulário */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}
+ +

Então, adicionaremos algum espaço entre cada conjunto de campos do form:

+ +
form div + div {
+    margin-top: 1em;
+}
+ +

Agora vamos focar nas labels. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.

+ +
label {
+    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}
+ +

Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo Styling HTML forms.

+ +

Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:

+ +
input, textarea {
+    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
+    font: 1em sans-serif;
+
+    /* Para dar o mesmo tamanho a todos os campo de texto */
+    width: 300px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* Para harmonizar o look & feel das bordas nos campos de texto*/
+    border: 1px solid #999;
+}
+ +

Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.

+ +
input:focus, textarea:focus {
+    /* Dar um pouco de destaque nos elementos ativos */
+    border-color: #000;
+}
+ +

Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a label e o campo, temos que alterar a propriedade  vertical-align do {{HTMLElement ("textarea")}} para top.

+ +

Observe também o uso da propriedade de resize, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.

+ +
textarea {
+    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
+    vertical-align: top;
+
+    /* Para dar espaço suficiente para digitar algum texto */
+    height: 5em;
+
+    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
+    resize: vertical;
+}
+ +

Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css button. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando padding e margin.

+ +
.button {
+    /* Para posicionar os botões para a mesma posição dos campos de texto */
+    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
+}
+button {
+    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
+    margin-left: .5em;
+}
+ +

Agora o nosso formulário parece muito mais bonito.

+ +

+ +

 

+ +

Enviar os dados para seu servidor web

+ +

A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.

+ +

O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo action e ao atributo method

+ +

Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.

+ +

Então, para nomear seus dados, você precisará usar o atributo name em cada campo do formulário que irá recolher uma parte específica dos dados:

+ +
<form action="/pagina-processa-dados-do-form" method="post">
+    <div>
+        <label for="nome">Nome:</label>
+        <input type="text" id="nome" name="usuario_nome" />
+    </div>
+    <div>
+        <label for="email">E-mail:</label>
+        <input type="email" id="email" name="usuario_email" />
+    </div>
+    <div>
+        <label for="msg">Mensagem:</label>
+        <textarea id="msg" name="usuario_msg"></textarea>
+    </div>
+
+    <div class="button">
+        <button type="submit">Enviar sua mensagem</button>
+    </div>
+</form>
+ +

Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "/pagina-processa-dados-do-form" com o método HTTP:  POST .

+ +

No lado do servidor, o script na URL "/pagina-processa-dados-do-form" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo Enviando e recuperando dados de formulário.

+ +

 

+ +

Conclusão

+ +

Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.

+ + + + + + + + + + + + + + +
Live example
{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}
+ +

Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui e os outros artigos deste guia irá ajudá-lo a dominar o resto.

diff --git a/files/pt-br/learn/front-end_web_developer/index.html b/files/pt-br/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..67a73497ef --- /dev/null +++ b/files/pt-br/learn/front-end_web_developer/index.html @@ -0,0 +1,231 @@ +--- +title: Desenvolvedor Web Front-end +slug: Aprender/Front-end_web_developer +tags: + - Aprender + - CSS + - Ferramentas + - Front-end + - HTML + - Iniciantes + - JavaScript + - Padrões Web +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

Boas vindas a nossa trilha de estudos para front-end web developer.

+ +

Aqui nós provemos um curso estruturado que irá lhe ensinar tudo o que você precisa para se tornar um desenvolvedor web front-end. Simplesmente trabalhe em cada sessão, aprendendo novas habilidades (ou melhorando as existentes) à medida que avança. Durante cada sessão, você encontrará exercícios e avaliações para testar sua compreensão antes de avançar.

+ +

Temas cobertos

+ +

Os temas gerais abordados são:

+ + + +

As diferentes sessões são desenhadas para trabalhar em ordem, mas cada uma também é independente. Se, por exemplo, você já souber HTML, pode avançar rapidamente para a sessão de CSS.

+ +

Pré-requisitos

+ +

Você não precisa de nenhum conhecimento prévio para começar este curso. Tudo o que você precisa é um computador executando um navegador web moderno, uma conexão com internet, e vontade de aprender.

+ +

Se você não tem certeza se o desenvolvimento front-end é para você, e/ou se deseja uma introdução mais suave antes de começar um curso mais completo, você pode conferir primeiro nossa Introdução à web.

+ +

Conseguindo ajuda

+ +

Nós tentamos deixar os estudos de desenvolvimento web front-end o mais confortável possível, entretanto, você provavelmente chegará em algum ponto em que irá travar por não entender alguma coisa, ou algum código pode não funcionar como deveria.

+ +

Não entre em pânico. Às vezes, todas as pessoas ficam presas, sejamos iniciantes ou profissionais em desenvolvimento web. O artigo Aprendendo a Aprender (à ser adicionado) irá te prover uma série de dicas e sugestões sobre como procurar informações e se ajudar. E se você continuar travando, sinta-se à vontade para postar uma dúvida em nosso fórum no Discourse.

+ +

Vamos começar. Boa sorte!

+ +

A trilha de estudos

+ +

Começando

+ +

Tempo para completar: 1–2 horas

+ +

Pré-requisitos

+ +

Nada, exceto conhecimentos básicos de informática.

+ +

Como saberei se posso seguir em frente?

+ +

Não há avaliações nesta parte do curso. Certifique-se de não ignorá-lo — é importante para te preparar para enfrentar os exercícios mais tarde.

+ +

Guias principais

+ + + +

Semântica e estrutura HTML

+ +

Tempo para completar: 35–50 horas

+ +

Pré-requisitos

+ +

Nada, exceto conhecimentos básicos de informática e o ambiente de desenvolvimento web básico.

+ +

Como saberei se posso seguir em frente?

+ +

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

+ +

Guias principais

+ + + + + +

Estilizando e layout com CSS

+ +

Tempo para completar: 90–120 horas

+ +

Pré-requisitos

+ +

É recomendável que você possua o conhecimento básico de HTML antes de começar aprender CSS. Você pode estudar nossa Introdução ao HTML primeiro.

+ +

Como saberei se posso seguir em frente?

+ +

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

+ +

Guias principais

+ + + + + + + +

Conteúdo adicional

+ + + +

Interatividade com JavaScript

+ +

Tempo para completar: 135–185 horas

+ +

Pré-requisitos

+ +

É recomendável que você possua o conhecimento básico de HTML antes de começar aprender JavaScript. Você pode estudar nossa Introdução ao HTML primeiro.

+ +

Como saberei se posso seguir em frente?

+ +

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

+ +

Guias principais

+ + + + + + + +

Formulários Web — Trabalhando com dados de usuário

+ +

Tempo para completar: 40–50 horas

+ +

Pré-requisitos

+ +

Formulários demandam conhecimento em HTML, CSS e JavaScript para o seu bom uso. Eles são complexos e, portanto, recebem tratamento separado.

+ +

Como saberei se posso seguir em frente?

+ +

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

+ +

Guias principais

+ + + + + + + +

Fazendo uma web para todas as pessoas

+ +

Tempo para completar: 60–75 horas

+ +

Pré-requisitos

+ +

É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão — muitas das técnicas e melhores práticas contidas aqui utilizam várias tecnologias.

+ +

Como saberei se posso seguir em frente?

+ +

As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.

+ +

Guias principais

+ + + + + + + +

Ferramentas modernas

+ +

Tempo para completar: 55–90 horas

+ +

Pré-requisitos

+ +

É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão, as ferramentas citadas aqui utilizam várias dessas tecnologias.

+ +

Como saberei se posso seguir em frente?

+ +

Não temos avaliações específicas neste conjunto de módulos, mas os tutoriais de estudo de caso no final dos 2º e 3º módulos irão te preparar bem para compreender os elementos essenciais das ferramentas modernas.

+ +

Guias principais

+ + + + + + diff --git a/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..34d0eb95ad --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,290 @@ +--- +title: CSS básico +slug: Aprender/Getting_started_with_the_web/CSS_basico +tags: + - Aprender + - CSS + - Codificação de Scripts + - Estilo + - Iniciante + - Web + - 'l10n:prioridade' +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. CSS básico apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?

+
+ +

Então, o que realmente é CSS?

+ +

Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação  — é uma linguagem de folhas de estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar todos os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:

+ +
p {
+  color: red;
+}
+ +

Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como estilo.css na sua pasta estilos.

+ +

Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia Lidando com arquivos e HTML básico para descobrir o que você precisa fazer primeiro).

+ +
    +
  1. Abra seu arquivo index.html e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e </head>: + + 
    <link href="estilos/estilo.css" rel="stylesheet">
    +
    2. +
  2. Salve o arquivo index.html e abra ele no seu navegador. Você deve ver uma página como essa:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.

+ +

Anatomia de um conjunto de regras CSS

+ +

Vamos dar uma olhada no CSS acima com mais detalhes:

+ +

+ +

Toda essa estrutura é chamada de conjunto de regras (mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:

+ +
+
Seletor (Selector)
+
O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos {{HTMLElement("p")}}). Para dar estilo a um outro elemento, é só mudar o seletor.
+
Declaração (Declaration)
+
Uma regra simples como color: red; especificando quais das propriedades do elemento você quer estilizar.
+
Propriedades (Property)
+
Forma pela qual você estiliza um elemento HTML. (Nesse caso, color é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.
+
Valor da propriedade (Property value)
+
À direita da propriedade, depois dos dois pontos, nós temos o valor de propriedade, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores color(cor) além do red(vermelho)).
+
+ +

Note outras partes importantes da sintaxe:

+ + + +

Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Selecionando múltiplos elementos

+ +

Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:

+ +
p, li, h1 {
+  color: red;
+}
+ +

Diferentes tipos de seletores

+ +

Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os seletores de elementos, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome do seletorO que ele selecionaExemplo
Seletor de elemento (às vezes, chamado tag ou seletor de tipo)Todos os elementos HTML de determinado tipo.p
+ Seleciona <p>
Seletor de IDO elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos.#my-id
+ Seleciona <p id="my-id"> ou <a id="my-id">
Seletor de classeO(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página)..my-class
+ Seleciona <p class="my-class"> e <a class="my-class">
Seletor de atributoO(s) elemento(s) na página com o atributo especificado.img[src]
+ Seleciona <img src="myimage.png"> mas não <img>
Seletor de pseudo-classeO(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele.a:hover
+ Seleciona <a>, mas somente quando o mouse está em cima do link.
+ +

Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso Guia de seletores.

+ +

Fontes e texto

+ +

Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo estilo.css para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.

+ +
    +
  1. Primeiro de tudo, volte e encontre a fonte do Google Fonts que você armazenou em algum lugar seguro. Adicione o elemento {{htmlelement ("link")}} em algum lugar dentro do cabeçalho no index.html (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e </ head>). Será algo parecido com isto: + + 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    + Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.
    2. +
  2. Em seguida, exclua a regra existente no seu arquivo estilo.css. Foi um bom teste, mas o texto vermelho não parece muito bom.
    3. +
  3. Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha font-family que você obteve do Google Fonts. (font-family significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo font-size e font-family): + 
    html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
+  font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
+}
    + +
    +

    Nota: Qualquer coisa em um documento CSS entre /* e */ é um comentário CSS, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.

    +
    +
    4. +
  4. Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML ({{htmlelement ("h1")}}, {{htmlelement ("li")}} e {{htmlelement ("p")}}). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Você pode ajustar esses valores de px para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Caixas, caixas, é tudo sobre caixas

+ +

Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.

+ +

a big stack of boxes or crates sat on top of one another

+ +

Como esperado, o layout CSS é baseado principalmente no modelo de caixas. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

Nessa seção nós também vamos usar:

+ + + +

Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.

+ +

Mudando a cor da página

+ +
html {
+  background-color: #00539F;
+}
+ +

Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor que você escolheu ao planejar seu site.

+ +

Separando o corpo

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:

+ + + +

Posicionando e estilizando o título da nossa página principal

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas estilizações padrão ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo margin: 0;.

+ +

Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.

+ +

Uma propriedade bastante interessante que usaremos aqui é o text-shadow, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:

+ + + +

De novo, tente experimentar com diferentes valores para ver o que você pode criar!

+ +

Centralizando a imagem

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque margin: 0 auto que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é em nível de bloco, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos em linha, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando display: block;.

+ +
+

Nota: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um editor gráfico (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <img> com um valor menor (por exemplo, 400 px;).

+
+ +
+

Nota: Não se preocupe se você ainda não entender display: block; ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa página de referência sobre display.

+
+ +

Conclusão

+ +

Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Se você emperrar, sempre poderá comparar seu trabalho com nosso código de exemplo finalizado no Github.

+ +

Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso tópico de aprendizado CSS.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..a2d477a698 --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,115 @@ +--- +title: Lidando com arquivos +slug: Aprender/Getting_started_with_the_web/lidando_com_arquivos +tags: + - Arquivos + - Codificação de Scripts + - Guía + - HTML + - Iniciante + - Site + - 'l10:prioridade' + - teoria +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de enviá-los para o servidor. Lidando com Arquivos discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.

+
+ +

Onde seu site deve residir no seu computador?

+ +

Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.

+ +
    +
  1. Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada projetos-web (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.
    2. +
  2. Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de site-teste (ou algo mais criativo).
    3. +
+ +

Deixando de lado as maiúsculas e espaços

+ +

Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:

+ +
    +
  1. Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em site-teste/MyImage.jpg, e então em um outro arquivo você tentar chamar site-teste/myimage.jpg, não vai funcionar.
    2. +
  2. Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: meu-arquivo.html vs. meu_arquivo.html.
    3. +
+ +

A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.

+ +

Qual estrutura seu site deve ter?

+ +

A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:

+ +
    +
  1. index.html: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado index.html e salve dentro da sua pasta site-teste.
    2. +
  2. pasta imagens: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada imagens, dentro da sua pasta site-teste.
    3. +
  3. pasta estilos: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada estilos, dentro da pasta site-teste.
    4. +
  4. pasta scripts: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada scripts, dentro da sua pasta site-teste.
    5. +
+ +
+

Nota: Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada Ocultar as extensões dos tipos de arquivo conhecidos ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção Opções de pasta..., desmarque a caixa de seleção Ocultar as extensões dos tipos de arquivo conhecidos, e clique em OK. Para mais informação sobre sua versão de Windows, procure na web.

+
+ +

Caminhos de arquivo

+ +

Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo index.html, e fazer mostrar a imagem que você escolheu no artigo "Como será o seu site?"

+ +
    +
  1. Copie a imagem que você escolheu antes para sua pasta imagens.
    2. +
  2. Abra seu arquivo index.html e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Minha página de teste</title>
+  </head>
+  <body>
+    <img src="" alt="Minha imagem de teste">
+  </body>
+</html>
    +
    3. +
  3. A linha <img src="" alt="Minha imagem de teste"> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta imagens, no mesmo diretório do index.html. Para trilhar o caminho de index.html para nossa imagem, o caminho é imagens/nome-da-sua-imagem. Por exemplo, nossa imagem é chamada firefox-icon.png, então, nosso caminho é imagens/firefox-icon.png.
    4. +
  4. Insira o caminho dentro do seu código HTML, dentro das aspas do código src="".
    5. +
  5. Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Algumas regras gerais para caminhos de arquivo:

+ + + +

Por agora, isso é tudo o que precisamos saber.

+ +
+

Nota: O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: C:\windows. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.

+
+ +

O que mais deve ser feito?

+ +

Por agora, é isso. Sua pasta deve parecer algo do tipo:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..cf911dafc5 --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,110 @@ +--- +title: Como a Web funciona +slug: Aprender/Getting_started_with_the_web/Como_a_Web_funciona +tags: + - Aprender + - Cliente + - DNS + - HTTP + - IP + - Infraestrutura + - Iniciante + - Servidor + - TCP + - 'l10n:prioridade' +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +

{{LearnSidebar}}

+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Como a Web funciona oferece uma visão simplificada do que acontece quando você vê uma página em um navegador, no seu computador ou telefone.

+
+ +

Essa teoria não é essencial para escrever códigos em curto prazo, mas em pouco tempo você vai se beneficiar ao entender o que está acontecendo em segundo plano.

+ +

Clientes e servidores

+ +

Computadores conectados à web são chamados clientes e servidores. Um diagrama simplificado de como eles interagem pode ter essa aparência:

+ +

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

+ + + +

As outras partes da caixa de ferramentas

+ +

O cliente e o servidor que descrevemos acima não contam toda a história. Existem muitas outras partes envolvidas, e vamos descrevê-las abaixo.

+ +

Por enquanto, vamos imaginar que a web é uma estrada. Em um extremo da estrada, temos o cliente, que é como sua casa. No extremo oposto, temos o servidor, que é como uma loja onde você quer comprar algo.

+ +

+ +

Além do cliente e do servidor, também precisamos dizer oi para:

+ + + +

Então, o que acontece, exatamente?

+ +

Quando você digita um endereço da web no seu navegador (pela nossa analogia é como ir andando até a loja):

+ +
    +
  1. O navegador vai para o servidor de DNS e encontra o endereço verdadeiro de onde o site está hospedado (você encontra o endereço da loja).
    2. +
  2. O navegador manda uma mensagem de requisição HTTP para o servidor, pedindo que envie uma cópia do site ao cliente (você vai até a loja e pede suas mercadorias). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor são enviados pela sua conexão à internet usando TCP/IP.
    3. +
  3. Se o servidor aprovar a requisição do cliente, o servidor enviará ao cliente uma mensagem "200 OK", que significa "Claro que você pode ver esse site! Aqui está" e então começa a enviar os arquivos do site para o navegador como uma série de pequenos pedaços chamados pacotes de dados (a loja dá a você as suas mercadorias e você as traz para sua casa).
    4. +
  4. O navegador monta os pequenos pedaços em um site completo e o mostra a você (as mercadorias chegam à sua porta — novas coisas brilhantes e incríveis!).
    5. +
+ +

DNS explicado

+ +

Endereços web verdadeiros não são sequências de textos boas e fáceis de lembrar que você digita na sua barra de endereços para encontrar seus sites favoritos. Eles são números especiais que se parecem com isso: 63.245.215.20.

+ +

Isso é chamado {{Glossary("IP Address", "endereço IP")}} e representa um local único na web. No entanto, não é muito fácil de lembrar, é? É por isso que o Servidor de Nome de Domínio foi inventado. Esses são servidores especiais que relacionam o endereço da web que você digita no seu navegador (como "mozilla.org") com o endereço real do site (IP).

+ +

Sites podem ser acessados diretamente pelo seu endereço IP. Você pode encontrar o endereço IP de um site, digitando seu domínio em uma ferramenta como o IP Checker.

+ +

Pacotes explicados

+ +

Anteriormente, usamos o termo "pacotes" para descrever o formato no qual os dados são enviados do servidor para o cliente. O que nós queremos dizer? Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para que muitos usuários diferentes possam baixar o mesmo site ao mesmo tempo. Se os websites fossem enviados como um grande bloco, somente um usuário por vez poderia baixá-los, o que, obviamente, tornaria a web muito ineficiente e não muito divertida de usar.

+ +

Veja também

+ + + +

Créditos

+ +

Foto da rua: Street composing, por Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..534fc5b9c9 --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,239 @@ +--- +title: HTML básico +slug: Aprender/Getting_started_with_the_web/HTML_basico +tags: + - Aprender + - Codificação de Scripts + - HTML + - Iniciante + - Web + - 'l10:prioridade' +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções.

+
+ +

Então, o que é HTML?

+ +

HTML não é uma linguagem de programação; é uma linguagem de marcação, usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de {{Glossary("element", "elementos")}}, que você usa para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As {{Glossary ("tag", "tags")}} anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:

+ +
Meu gatinho é muito mal humorado
+ +

Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um parágrafo colocando-a em uma tag de parágrafo:

+ +
<p>Meu gatinho é muito mal humorado</p>
+ +

Anatomia de um elemento HTML

+ +

Vamos explorar esse parágrafo mais profundamente.

+ +

Imagem mostrando como funciona a tag P

+ +

As principais partes de um elemento são:

+ +
    +
  1. A tag de abertura: Consiste no nome do elemento (no caso, p), envolvido em parênteses angulares de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.
    2. +
  2. A tag de fechamento: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos.
    3. +
  3. O conteúdo: Esse é o conteúdo do elemento, que nesse caso é apenas texto.
    4. +
  4. O elemento: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.
    5. +
+ +

Elementos também podem ter atributos, que parecem assim:

+ +

+ +

Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, class é o nome do atributo e editor-note é o valor do atributo. O atributo class permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas.

+ +

Um atributo sempre deve ter:

+ +
    +
  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).
    2. +
  2. O nome do atributo, seguido por um sinal de igual.
    3. +
  3. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.
    4. +
+ +
+

Nota: Valores de atributos simples que não contém espaço em branco ASCII (ou qualquer um dos caracteres " ' ` = < >) podem permanecer sem aspas, mas é recomendável colocar em todos os valores de atributos, pois isso torna o código mais consistente e compreensível.

+
+ +

Aninhando elementos

+ +

Você pode colocar elementos dentro de outros elementos também — isso é chamado de aninhamento. Se quiséssemos afirmar que nosso gato é muito mal-humorado, poderíamos envolver a palavra "muito" em um elemento {{htmlelement ("strong")}}, o que significa que a palavra deve ser fortemente enfatizada:

+ +
<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>
+ +

Você precisa, no entanto, certificar-se de que seus elementos estejam adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento {{htmlelement ("p")}}, depois o elemento {{htmlelement ("strong")}}; portanto, temos que fechar primeiro o elemento {{htmlelement ("strong")}}, depois o elemento {{htmlelement ("p")}}. O código abaixo está incorreto:

+ +
<p>Meu gatinho é <strong>muito mal humorado.</p></strong>
+ +

Os elementos precisam ser abertos e fechados corretamente para que eles estejam claramente visíveis dentro ou fora um do outro. Se eles se sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que você estava tentando dizer, o que pode levar a resultados inesperados. Então não faça isso!

+ +

Elementos vazios

+ +

Alguns elementos não possuem conteúdo e são chamados de elementos vazios. Considere o elemento {{htmlelement("img")}} que temos na nossa página HTML:

+ +
<img src="imagens/firefox-icon.png" alt="Minha imagem de teste">
+ +

Ele contém dois atributos, mas não há tag </img> de fechamento, e não há conteúdo interno. Isso acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código aparece.

+ +

Anatomia de um documento HTML

+ +

Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só. Agora vamos ver como elementos individuais são combinados para formar uma página HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de index.html (que vimos no artigo Lidando com arquivos):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Minha página de teste</title>
+  </head>
+  <body>
+    <img src="imagens/firefox-icon.png" alt="minha página de teste">
+  </body>
+</html>
+ +

Aqui nós temos:

+ + + +

Imagens

+ +

Vamos voltar nossa atenção para o elemento {{htmlelement("img")}} novamente:

+ +
<img src="imagens/firefox-icon.png" alt="Minha imagem de teste">
+ +

Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo src (source), que contém o caminho para nosso arquivo de imagem.

+ +

Incluímos também um atributo alt (alternative). Neste atributo, você especifica um texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:

+ +
    +
  1. Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.
    2. +
  2. Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar deliberadamente o caminho dentro do atributo src para torná-lo incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:
    3. +
+ +

+ +

As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."

+ +

Tente criar um texto alternativo melhor para sua imagem agora.

+ +
+

Nota: Saiba mais sobre acessibilidade em módulo de aprendizagem sobre acessibilidade.

+
+ +

Marcando o texto

+ +

Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.

+ +

Cabeçalhos

+ +

Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, embora você normalmente só use de 3 a 4:

+ +
<h1>Meu título principal</h1>
+<h2>Meu título de alto nível</h2>
+<h3>Meu subtítulo</h3>
+<h4>Meu segundo subtítulo</h4>
+ +

Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.

+ +
+

Nota: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para acessibilidade e outros motivos, como SEO. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.

+
+ +

Parágrafo

+ +

Como explicado acima, os elementos {{htmlelement ("p")}} são para conter parágrafos de texto; você os usará com frequência ao marcar um conteúdo de texto regular:

+ +
<p>Este é um parágrafo simples</p>
+ +

Adicione seu texto de exemplo (você o obteve em Como será o seu site?) Em um ou alguns parágrafos, colocados diretamente abaixo do seu elemento {{htmlelement ("img")}}.

+ +

Listas

+ +

Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não ordenadas:

+ +
    +
  1. Listas não ordenadas são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento {{htmlelement("ul")}}.
    2. +
  2. Listas Ordenadas são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento {{htmlelement("ol")}}.
    3. +
+ +

Cada item dentro das listas é posto dentro de um elemento {{htmlelement("li")}} (item de lista).

+ +

Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista: 

+ +
<p>Na Mozilla, somos uma comunidade global de tecnólogos, pensadores e construtores trabalhando juntos ... </p>
+ +

Nós podemos fazer assim:

+ +
<p>Na Mozilla, somos uma comunidade global de</p>
+
+<ul>
+  <li>tecnólogos</li>
+  <li>pensadores</li>
+  <li>construtores</li>
+</ul>
+
+<p>trabalhando juntos ... </p>
+ +

Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.

+ + + +

Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link, precisamos usar um elemento simples — {{htmlelement ("a")}} — "a" é a forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um link, siga estas etapas:

+ +
    +
  1. Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".
    2. +
  2. Envolva o texto em um elemento {{htmlelement("a")}} , assim: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Dê ao elemento <a> um atributo href, assim: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link: + 
    <a href="https://www.mozilla.org/pt-BR/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Você pode obter resultados inesperados se omitir a parte https:// ou o http://, o chamado protocolo, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.

+ +
+

href pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se você está tendo problemas para lembrar do nome, lembre que significa hypertext reference. (referência em hipertexto)

+
+ +

Adicione um link em sua página agora, se ainda não tiver feito isso.

+ +

Conclusão

+ +

Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do tipo (você também pode vê-la aqui):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Se você ficar emperrado, pode sempre comparar seu trabalho com nosso código de exemplo finalizado no Github.

+ +

Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa Estruturando a web com HTML.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/index.html b/files/pt-br/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..ac40c9ed36 --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/index.html @@ -0,0 +1,65 @@ +--- +title: Introdução à Web +slug: Aprender/Getting_started_with_the_web +tags: + - CSS + - Design + - Guía + - HTML + - Iniciante + - 'l10:prioridade' + - publicação + - teoria + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Introdução à Web é uma série concisa que apresenta os aspectos práticos do desenvolvimento web. Você configurará as ferramentas necessárias para construir uma página web simples e publicará seu próprio código.

+
+ +

A história do seu primeiro website

+ +

É muito trabalhoso criar um site profissional, então se você é um iniciante em desenvolvimento web, nós encorajamos você a começar pequeno. Você não vai construir outro Facebook imediatamente, mas não é difícil colocar seu próprio site online, então vamos começar por aí.

+ +

Por meio dos artigos listados abaixo, você vai sair do nada e vai construir sua primeira página online. Vamos lá!

+ +

Instalando os programas básicos

+ +

Quando se trata de ferramentas para construir um site, há muito a se escolher. Se você está começando, pode ficar confuso com a variedade de editores de código, frameworks e ferramentas de teste existentes. Em Instalando os programas básicos nós vamos te mostrar passo a passo como instalar apenas o software necessário para começar o desenvolvimento web básico.

+ +

Como será o seu site?

+ +

Antes de começar a escrever o código do seu site, você deve planejá-lo primeiro. Quais informações você vai disponibilizar? Quais fontes e cores você irá usar? Em Como será seu site? Nós fornecemos um método simples que você pode seguir para planejar o conteúdo e design do seu site.

+ +

Lidando com arquivos

+ +

Um site consiste em muitos arquivos: conteúdo de texto, código, folhas de estilo, conteúdo de mídia etc. Ao criar um site, você precisa reunir esses arquivos em uma estrutura que faça sentido e garantir que eles possam se conectar. Lidando com arquivos explica como configurar uma estrutura de arquivos para o seu site e sobre quais problemas você deve estar ciente.

+ +

HTML básico

+ +

Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup Language) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o HTML básico provê informação suficiente para você se familiarizar com HTML.

+ +

CSS básico

+ +

Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) é o código que você usa para dar estilo ao seu site. Por exemplo, você quer que seu texto seja preto ou vermelho? Onde o conteúdo deve aparecer na tela? Quais imagens ou cores de fundo devem ser usadas para decorar seu site? CSS básico provê o necessário para você começar.

+ +

JavaScript básico

+ +

JavaScript é a linguagem de programação que você usa para adicionar recursos interativos ao seu site. Alguns exemplos podem ser jogos, coisas que acontecem quando botões são pressionados ou dados que são inseridos em formulários, efeitos dinâmicos de estilo, animação e muito mais. JavaScript básico vai te dar uma ideia do que é possível com essa excitante linguagem de programação e como começar a usá-la.

+ +

Publicando seu site

+ +

Uma vez que você tenha acabado de escrever seu código e organizado os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. Publicando seu site descreve como colocar seu código online com o mínimo de esforço.

+ +

Como a web funciona

+ +

Quando você acessa seu site favorito, um monte de coisas complicadas acontecem em segundo plano que você pode não conhecer. Como a web funciona mostra o que acontece quando você visualiza um site no seu computador.

+ +

Veja também

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..0093c0a82d --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,80 @@ +--- +title: Instalando os programas básicos +slug: Aprender/Getting_started_with_the_web/instalando_programas_basicos +tags: + - Aprender + - Ferramentas + - Iniciante + - Mecânica da Web + - Navegador + - configuração + - editor de texto + - 'l10:prioridade' +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

Em Instalando os programas básicos, mostraremos quais ferramentas você precisa para o desenvolvimento web simples e como instalá-los apropriadamente.

+
+ +

Quais ferramentas os profissionais usam?

+ + + +

Quais ferramentas eu realmente preciso nesse momento?

+ +

Isso parece uma lista assustadora, mas felizmente, você pode começar a desenvolver web sem saber nada sobre a maioria deles. Neste artigo, vamos apenas configurá-lo com um mínimo  — um editor de texto e alguns navegadores modernos.

+ +

Instalando um editor de texto

+ +

Você provavelmente já tem um editor de texto básico no seu computador. Por padrão, o Windows inclui o Bloco de Notas (em inglês) e o Mac OS vem com o TextEdit (em inglês). Linux varia; Ubuntu vem com o gedit (em inglês) por padrão.

+ +

Para desenvolvimento web, você provavelmente pode ter mais do que o Bloco de Notas ou o TextEdit. Recomendamos começar com o Visual Studio Code (em inglês), que é um editor gratuito, que oferece visualizações ao vivo e dicas de código.

+ +

Instalando navegadores web modernos

+ +

Por enquanto, instalaremos alguns navegadores da Web para testar nosso código. Escolha seu sistema operacional abaixo e clique nos links relevantes para fazer o download dos instaladores dos seus navegadores favoritos:

+ + + +

Antes de continuar, você deve instalar pelo menos dois desses navegadores e tê-los disponíveis para teste.

+ +
+

O Internet Explorer não é compatível com alguns recursos modernos da web e pode não ser capaz de executar seu projeto.

+
+ +

Instalando um servidor web local

+ +

Alguns exemplos precisarão ser executados por um servidor web para funcionar com êxito. Você pode ver como fazer isso em Como eu configuro um servidor de teste localmente?

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..a54cab793a --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,448 @@ +--- +title: JavaScript básico +slug: Aprender/Getting_started_with_the_web/JavaScript_basico +tags: + - Aprender + - Codificação de Script + - Iniciante + - JavaScript + - Web + - 'l10:prioridade' +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_fwith_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript é a linguagem de programação usada para adicionar interatividade ao seu site (por exemplo: jogos, respostas quando botões são pressionados ou dados são inseridos em formulários, estilo dinâmico, animações). Esse artigo ajuda você a começar com essa linguagem interessante e dá uma idéia do que é possível.

+
+ +

O que é JavaScript, realmente?

+ +

{{Glossary("JavaScript")}} (abreviado como "JS") é uma {{Glossary("Dynamic programming language", "linguagem de programação dinâmica")}} cheia de recursos que quando aplicada em um documento {{Glossary("HTML")}}, pode fornecer interatividade dinâmica em sites. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.

+ +

JavaScript é incrivelmente versátil e amigável ao iniciante. Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em bancos de dados e muito mais!

+ +

JavaScript em si é bastante compacto, mas muito flexível. Os desenvolvedores escreveram uma grande variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades extras com o mínimo de esforço. Essas incluem:

+ + + +

Como este artigo deve ser apenas uma introdução ao JavaScript, não vamos confundir você neste estágio, falando em detalhes sobre qual é a diferença entre a linguagem JavaScript principal e as diferentes ferramentas listadas acima. Você pode aprender tudo isso em detalhes mais tarde, em nossa área de aprendizado de JavaScript e no restante do MDN.

+ +

Abaixo, apresentaremos alguns aspectos da linguagem principal, e você também poderá brincar com alguns recursos da API do navegador. Divirta-se!

+ +

Um exemplo "Olá mundo"

+ +

A seção acima pode parecer realmente empolgante, e assim deve ser  — o JavaScript é uma das tecnologias mais ativas da Web e, à medida que você começa a usá-lo bem, seus sites entrarão em uma nova dimensão de poder e criatividade.

+ +

No entanto, ficar confortável com o JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Você pode ter que começar pequeno e continuar trabalhando em pequenos passos consistentes. Para começar, mostraremos como adicionar alguns JavaScript básicos à sua página, criando um exemplo de "Olá mundo!" (o padrão em exemplos básicos de programação).

+ +
+

Importante: Se você não acompanhou o restante de nosso curso, faça o download desse código exemplo e use-o como um ponto de partida.

+
+ +
    +
  1. Primeiro, vá para o seu site de teste e crie uma nova pasta chamada scripts. Em seguida, dentro da nova pasta de scripts que você acabou de criar, crie um novo arquivo chamado main.js. Salve na sua pasta de scripts.
    2. +
  2. Em seguida, no seu arquivo index.html, insira o seguinte elemento em uma nova linha logo antes da tag de fechamento </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Isso é basicamente a mesma coisa que o elemento {{htmlelement("link")}} para o CSS — ele aplica o JavaScript à página, para que ele tenha efeito no HTML (junto com o CSS e qualquer outra coisa na página).
    4. +
  4. Agora adicione o seguinte código no arquivo main.js: + 
    const meuCabecalho = document.querySelector('h1');
+meuCabecalho.textContent = 'Ola mundo!';
    +
    5. +
  5. Por fim, verifique se os arquivos HTML e Javascript estão salvos e, em seguida, carregue o index.html no navegador. Você deve ver algo do tipo:
    6. +
+ +
+

Nota: A razão pela qual colocamos o elemento {{htmlelement("script")}} perto da parte inferior do arquivo HTML, é que o HTML é carregado pelo navegador na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do HTML em que ele deveria trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página HTML geralmente é um meio de corrigir isto, veja Estratégias de carregamento de scripts.

+
+ +

O que aconteceu?

+ +

Seu texto de título foi alterado para "Hello world!" usando JavaScript. Você fez isso primeiro usando uma função chamada {{domxref("Document.querySelector", "querySelector()")}} para obter uma referência ao título e armazená-lo em uma variável chamada meuCabecalho. Isso é muito parecido ao que fizemos usando seletores CSS. Quando queremos fazer algo em um elemento, primeiro você precisa selecioná-lo.

+ +

Depois disso, você define o valor da propriedade {{domxref ("Node.textContent", "textContent")}} para "Hello world!", na variável meuCabecalho (que representa o conteúdo do título).

+ +
+

Nota: Os dois recursos usados acima são partes da API do Modelo de Objeto de Documento (DOM), que permite manipular documentos.

+
+ +

Curso intensivo de fundamentos da linguagem

+ +

Vamos explicar alguns dos principais recursos da linguagem JavaScript, para dar a você um melhor entendimento de como tudo funciona. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação, por isso, se você dominar esses fundamentos, estará no caminho certo para programar qualquer coisa!

+ +
+

Importante: Nesse artigo, tente escrever linhas de código de exemplo no seu console JavaScript para ver o que acontece. Para mais detalhes sobre o console JavaScript, consulte Descobrir as ferramentas do desenvolvedor do navegador.

+
+ +

Variáveis

+ +

{{Glossary("Variable", "Variáveis")}} são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave var (menos recomendado, se aprofunde mais para uma explicação) ou a palavra chave let, seguida por qualquer nome que você queira chamá-la:

+ +
let minhaVariavel;
+ +
+

Nota: Ponto-e-vírgula no fim de uma linha indica onde uma instrução termina; só é absolutamente necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocá-las no final de cada instrução. Existem outras regras para quando você deve ou não usá-las — consulte Seu Guia para Ponto-e-Vírgula em Javascript para mais detalhes.

+
+ +
+

Nota: Você pode dar quase qualquer nome a uma variável, mas há algumas restrições (veja esse artigo sobre regras de nomes de variáveis). Se você não tem certeza, você pode conferir se sua variável tem um nome válido.

+
+ +
+

Nota: JavaScript é case sensitive — minhaVariavel é  diferente de minhavariavel. Se você estiver tendo problemas no seu código, cheque seu casing!

+
+ +
+

Nota: Para mais detalhes sobre a diferença entre var e let, veja A diferença entre var e let.

+
+ +

Depois de declarar uma variável, você pode dar a ela um valor:

+ +
minhaVariavel = 'Bob';
+ +

Você pode fazer as duas operações na mesma linha se você quiser:

+ +
let minhaVariavel = 'Bob';
+
+ +

Você pode retornar o valor chamando a variável pelo nome:

+ +
minhaVariavel;
+ +

Depois de dar à variável um valor, você pode mudá-lo:

+ +
let minhaVAriavel = 'Bob';
+minhaVariavel = 'Steve';
+ +

Note que as variáveis podem conter valores com diferentes tipos de dados:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariávelExplicaçãoExemplo
{{Glossary("String")}}Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é uma string, você deve envolvê-la em aspas.let minhaVariavel = 'Bob';
{{Glossary("Number")}}Um número. Números não tem aspas ao redor deles.let minhaVariavel = 10;
{{Glossary("Boolean")}} +

Um valor verdadeiro ou falso. As palavras true e false são palavras-chaves especiais em JS e não precisam de aspas.

+ 		let minhaVariavel = true;
{{Glossary("Array")}}Uma estrutura que permite armazenar vários valores em uma única variável.let minhaVariavel = [1,'Bob','Steve',10];
+ Acesse cada item do array dessa maneira: minhaVariavel[0], minhaVariavel[1], etc.
{{Glossary("Object")}}Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende.let minhaVariavel = document.querySelector('h1');
+ Todos os exemplos acima também.
+ +

Então, por que precisamos de variáveis? Bom, variáveis são necessárias para fazer qualquer coisa interessante em programação. Se os valores não pudessem mudar, então você não poderia fazer nada dinâmico, como personalizar uma mensagem de boas-vindas, ou mudar a imagem mostrada em uma galeria de imagens.

+ +

Comentários

+ +

Os comentários são, essencialmente, pequenos trechos de texto que podem ser adicionados entre os códigos e são ignorados pelo navegador. Você pode colocar comentários no código JavaScript, assim como em CSS:

+ +
/*
+Tudo no meio é um comentário.
+*/
+ +

Se o seu comentário não tiver quebras de linha, é mais fácil colocá-lo depois de duas barras como esta:

+ +
// Isto é um comentário.
+ +

Operadores

+ +

Um {{Glossary("operator", "operador")}} é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de alguns exemplos para experimentar no console JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorExplicaçãoSimbolo(s)Exemplo
AdiçãoUsado para somar dois números ou juntar duas strings.+6 + 9;
+ "Ola " + "mundo!";
Subtração, multiplição, divisãoFazem exatamente o que você espera que eles façam na matemática básica.-, *, /9 - 3;
+ 8 * 2; // no JS a multiplicação é um asterisco
+ 9 / 3;
AtribuiçãoVocê já viu essa, ela associa um valor a uma variável.=let minhaVariavel = 'Bob';
+

Operador de igualdade

+ 		Faz um teste para ver se dois valores são iguais, retornando um resultado true/false (booleano).===let minhaVAriavel = 3;
+ minhaVariavel === 4;
Negação, não igualRetorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes.!, !== +

Para "Negação", a expressão básica é true, mas a comparação retorna false porque a negamos:

+ +

let minhaVariavel = 3;
+ !(minhaVariavel === 3);

+ +

"Não igual" dá basicamente o mesmo resultado com sintaxe diferente. Aqui estamos testando "é minhaVariavel NÃO é igual a 3". Isso retorna false porque minhaVariavel É igual a 3.

+ +

let minhaVariavel = 3;
+ minhaVariavel !== 3;

+
+ +

Há vários outros operadores para explorar, mas por enquanto esses são suficientes. Consulte Expressões e operadores para ver uma lista completa.

+ +
+

Nota: Misturar tipos de dados pode levar a resultados estranhos quando uma operação é executada, portanto, tome cuidado para declarar suas variáveis corretamente, e você obterá os resultados esperados. Por exemplo, digite '35' + '25' no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em strings, você acabou concatenando strings em vez de somar os números. Se você digitar 35 + 25, você obterá o resultado correto.

+
+ +

Condicionais

+ +

Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, executando um código alternativo revelado por seu resultado. Uma forma muito comum de condicional é a instrução if ... else. Por exemplo:

+ +
let sorvete = 'chocolate';
+if (sorvete === 'chocolate') {
+  alert('Opa, Eu amo sorvete de chocolate!');
+} else {
+  alert('Ahh, mas chocolate é o meu favorito...');
+}
+ +

A expressão dentro do if ( ... ) é o teste — ela usa o operador de igualdade (como descrito anteriormente) para comparar a variável sorvete com a string chocolate para ver se elas são iguais. Se essa comparação retorna true, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o primeiro bloco de código será ignorado e o segundo bloco de código, após a instrução else, será executado.

+ +

Funções

+ +

{{Glossary("Function", "Funções")}} são uma maneira de encapsular funcionalidades que você deseja reutilizar. Quando você precisa de um procedimento, você pode chamar a função com um nome, em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções acima, por exemplo:

+ +
    +
  1. + 
    let minhaVariavel = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Ola!');
    +
    3. +
+ +

Essas funções, document.querySelector e alert são pré-definidas nos navegadores para você usar quando quiser.

+ +

Se você ver algo que parece com um nome de variável, mas com parênteses — () — depois, provavelmente é uma função. Funções geralmente tem {{Glossary("Argument", "Argumentos")}} — pedaços de dados que elas precisam para realizarem o seu trabalho. Os argumentos são colocados dentro dos parênteses e separados por vírgulas, se houver mais de um.

+ +

Por exemplo, a função alert() faz com que uma caixa pop-up apareça dentro da janela do navegador, mas precisamos passar uma string como argumento para dizer à função o que escrever na caixa pop-up.

+ +

A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que recebe dois números como argumentos e os multiplica:

+ +
function multiplica(num1,num2) {
+  let resultado = num1 * num2;
+  return resultado;
+}
+ +

Tente executar a função acima no console e teste com vários argumentos. Por exemplo:

+ +
multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);
+ +
+

Nota: A instrução return diz ao navegador para retornar a variável resultado da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro destas funções. Isso é chamado {{Glossary("Scope", "Escopo")}} de variável (leia mais em escopo da variável.)

+
+ +

Eventos

+ +

Interatividade real em um site precisa de eventos. Estas são estruturas de código que percebem as coisas que acontecem no navegador, executando o código em resposta. O exemplo mais óbvio é o evento de clique, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console e, em seguida, clique na página da Web atual:

+ +
document.querySelector('html').onclick = function() {
+    alert('Ai! Pare de me cutucar!');
+}
+ +

Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento {{htmlelement("html")}}, definindo sua propriedade onclick igual a uma função anônima (ou seja, sem nome), que contém o código que queremos que o evento clique execute.

+ +

Observe que:

+ +
document.querySelector('html').onclick = function() {};
+ +

é equivalente a

+ +
let meuHTML = document.querySelector('html');
+meuHTML.onclick = function() {};
+ +

É só uma maneira mais curta de escrever.

+ +

Melhorando nosso site de exemplo

+ +

Agora que analisamos alguns fundamentos do JavaScript, vamos adicionar alguns recursos interessantes ao nosso site de exemplo para ver o que é possível fazer.

+ +

Adicionando um modificador de imagem

+ +

Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos usar o JavaScript para alternar entre as duas, quando a imagem for clicada.

+ +
    +
  1. Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.
    2. +
  2. Salve a imagem na pasta imagens.
    3. +
  3. Renomeie a imagem para 'firefox2.png' (sem as aspas).
    4. +
  4. Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu "Ola mundo" em JavaScript ainda estiver lá, delete-o): + 
    let minhaImagem = document.querySelector('img');
+
+minhaImagem.onclick = function() {
+    let meuSrc = minhaImagem.getAttribute('src');
+    if(meuSrc === 'imagens/firefox-icon.png') {
+      minhaImagem.setAttribute ('src','imagens/firefox2.png');
+    } else {
+      minhaImagem.setAttribute ('src','imagens/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Salve todos os arquivos e carregue o index.html no navegador. Agora quando você clicar na imagem, ela deve mudar para a outra!
    6. +
+ +

Você armazena uma referência ao seu elemento {{htmlelement("img")}} na variável minhaImagem. Depois, você faz a propriedade do manipulador de evento onclick dessa variável igual a uma função sem nome (uma função "anônima"). Agora, toda vez que esse elemento de imagem é clicado:

+ +
    +
  1. Você recupera o valor do atributo src da imagem.
    2. +
  2. Você usa uma condicional para checar se o valor src é igual ao caminho da imagem original: +
      +
    1. Se for, você muda o valor de src para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento {{htmlelement("img")}}.
      2. +
    2. Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem, para o estado original.
      3. +
    +
    3. +
+ +

Adicionando uma mensagem personalizada de boas vindas

+ +

Em seguida, adicionaremos outro trecho de código, alterando o título da página para uma mensagem personalizada de boas vindas quando o usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais tarde — salvaremos a mensagem usando a API de Armazenamento Web. Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas vindas sempre que necessário.

+ +
    +
  1. Em index.html, adicione a seguinte linha de código antes do elemento {{htmlelement("script")}}: + + 
    <button>Mudar usuário</button>
    +
    2. +
  2. Em main.js, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o título, e guarda ambos em variáveis: + 
    let meuBotao = document.querySelector('button');
+let meuCabecalho = document.querySelector('h1');
    +
    3. +
  3. Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas corrigiremos isso em um momento: + 
    function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  localStorage.setItem('nome', meuNome);
+  meuCabecalho.textContent = 'Mozilla é legal, ' + meuNome;
+}
    + Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como alert() faz. Este prompt(), no entanto, pede ao usuário para inserir algum dado e guarda os dados em uma variável quando o botão OK é pressionado. Nesse caso, estamos pedindo ao usuário para digitar seu nome. Em seguida, chamamos uma API denominada localStorage, o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função setItem() de localStorage para criar e guardar um item de dado chamado 'nome', definindo seu valor para a variável meuNome que contém o nome que o usuário digitou. Finalmente, definimos o textContent do título como uma string, mais o nome recém-armazenado do usuário.
    4. +
  4. Em seguida, adicione esse bloco if ... else — poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez: + 
    if(!localStorage.getItem('nome')) {
+  defineNomeUsuario();
+} else {
+  let nomeGuardado = localStorage.getItem('nome');
+  meuCabecalho.textContent = 'Mozilla é legal, ' + nomeGuardado;
+}
    + Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo !) para checar se o dado nome existe — se não existir, a função defineNomeUsuario() é executada para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o textContent do título a uma string, mais o nome do usuário, como fizemos dentro de defineNomeUsuario().
    5. +
  5. Finalmente, coloque o evento onclick no botão, para que quando clicado, ele execute a função defineNomeUsuario(). Isso permite que o usuário defina um novo nome sempre que quiser ao pressionar o botão: + 
    meuBotao.onclick = function() { defineNomeUsuario();
+}
+
    +
    6. +
+ +

Agora quando você visitar seu site pela primeira vez, ele solicitará seu nome de usuário e, em seguida, enviará uma mensagem personalizada. Você pode alterar o nome a qualquer momento, pressionando o botão. Como um bônus, porque o nome é armazenado dentro de  localStorage , ele persiste depois que o site é fechado, mantendo a mensagem personalizada lá quando você abrir o site novamente!

+ +

Um nome de usuário nulo?

+ +

Quando você executa o exemplo e obtém a caixa de diálogo que solicita a inserção do seu nome de usuário, tente pressionar o botão Cancelar. Você deve terminar com um título que diz "Mozilla is cool, null". Isso ocorre porque, quando você cancela o prompt, o valor é definido como null, um valor especial em JavaScript que se refere basicamente à ausência de um valor.

+ +

Tente também pressionar OK sem digitar nenhum nome - você deve terminar com um título que diz "Mozilla é legal,", por razões bastante óbvias.

+ +

Se você quiser evitar esses problemas, verifique se o usuário não inseriu um nome null ou em branco, atualizando a função defineNomeUsuario() para isso:

+ +
function defineNomeUsuario() {
+  let meuNome = prompt('Por favor, digite seu nome.');
+  if(!meuNome || meuNome === null) {
+    defineNomeUsuario();
+  } else {
+    localStorage.setItem('nome', meuNome);
+    meuCabecalho.innerHTML = 'Mozilla é legal, ' + meuNome;
+  }
+}
+ +

Na linguagem humana - se meuNome não tiver valor ou seu valor for null, execute defineNomeUsuario() novamente desde o início. Se ele tiver um valor (se as instruções acima não forem verdadeiras), armazene o valor em localStorage e defina-o como o texto do cabeçalho.

+ +

Conclusão

+ +

Se você seguiu todas as instruções deste artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

+ +

+ +

Se você ficar empacado, você pode comparar seu trabalho com o nosso exemplo finalizado no Github.

+ +

Nós mal arranhamos a superfície do JavaScript. Se você gostou e deseja avançar ainda mais, veja os outros recursos abaixo.

+ +

Veja também

+ +
+
JavaScript — Script dinâmico do lado cliente
+
Nosso tópico de aprendizado JavaScript - mergulhe no JavaScript com muito mais detalhes.
+
Learn JavaScript
+
Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.
+
+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

Neste Módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..7bc25089da --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,131 @@ +--- +title: Publicando seu site +slug: Aprender/Getting_started_with_the_web/Publicando_seu_site +tags: + - Codificação em Script + - FTP + - GitHub + - Iniciante + - Motor de Apps do Google + - Web + - 'l10n:prioridade' + - publicação + - servidor web +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +
+

Uma vez que você tenha acabado de escrever seu código e organizar os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo.  Este artigo mostra como colocar online seu código de amostra simples com o mínimo de esforço.

+
+ +

Quais são as opções?

+ +

Publicar um site não é um tópico simples, principalmente porque há muitas maneiras diferentes de fazê-lo. Nesse artigo, nós não pretendemos documentar todos os métodos possíveis. Em vez disso, nós discutiremos os prós e contras de três estratégias do ponto de vista de um iniciante, e então o guiaremos por um método que irá funcionar por enquanto.

+ +

Conseguindo uma hospedagem e um nome de domínio

+ +

Para ter mais controle sobre o conteúdo e a aparência do site, a maioria das pessoas escolhe comprar hospedagem na web e um nome de domínio:

+ + + +

Muitos sites profissionais ficam online dessa maneira.

+ +

Você vai precisar ainda de um programa de  {{Glossary("FTP", "Protocolo de Transferência de Arquivos (FTP)")}} (veja Quanto custa: software para mais detalhes) para transferir os arquivos do site ao servidor. Programas FTP variam, mas geralmente você tem que logar no servidor usando detalhes fornecidos por sua empresa de hospedagem (ex. nome de usuário, senha, nome de host). Então, o programa mostra para você os arquivos locais e do servidor em duas janelas, para que você possa transferí-los ao servidor e de volta para o computador:

+ +

+ +

Dicas para encontrar hospedagem e domínios

+ + + +

Usando uma ferramenta online como Github ou Google App Engine

+ +

Algumas ferramentas permitem que você publique seu site online:

+ + + +

Diferente da maioria das hospedagens, essas ferramentas geralmentre são gratuitas, mas você tem um conjunto limitado de recursos.

+ +

Usando uma IDE baseada na web como o CodePen

+ +

Há um número grande de web apps que emulam um ambiente de desenvolvimento de site, permitindo a você escrever HTML, CSS e JavaScript e então expor o resultado renderizado como em um site — tudo em uma aba do navegador! Falando de forma genérica, essas ferramentas são fáceis, boas para aprender e gratuitas (para recursos básicos), e elas geralmente hospedam sua página em um endereço único na web. No entanto, os recursos são limitados e esses aplicativos  geralmente não provêem espaço de hospedagem para recursos (como imagens).

+ +

Tente codificar com alguns desses exemplos, e veja qual se encaixa melhor para você:

+ + + +

+ +

Publicando via Github

+ +

Agora vamos mostrar como publicar seu site facilmente por meio das páginas do GitHub.

+ +
    +
  1. Primeiro de tudo, inscreva-se no GitHub e verifique seu e-mail.
    2. +
  2. Em seguida, você precisa criar um repositório para colocar seus arquivos.
    3. +
  3. Nesta página, na caixa Repository name (nome do repositório), digite username.github.io, onde username é o seu nome de usuário. Então, por exemplo, nosso amigo bobsmith entraria em bobsmith.github.io. Além disso, marque Initialize this repository with a README (inicializar este repositório com um README) e então clique em Create repository (Criar repositório).
    4. +
+ +

+ +
    +
  1. Arraste e solte o conteúdo da pasta do site no seu repositório e clique em Commit changes (confirmar alterações).
    2. +
+ +
+

Nota: Certifique-se que sua pasta possui um arquivo index.html.

+
+ +
    +
  1. Navegue em seu navegador até username.github.io para ver seu site online. Por exemplo, para o usuário chrisdavidmills, vá para chrisdavidmills.github.io.
    2. +
+ +
+

Nota: Pode levar alguns minutos para seu site ficar online. Se ele não funcionar imediatamente, talvez seja necessário aguardar alguns minutos e tentar novamente.

+
+ +

Para aprender mais, consulte a Ajuda do Github Pages (em inglês).

+ +

Leitura complementar

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html new file mode 100644 index 0000000000..26de56ea06 --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -0,0 +1,164 @@ +--- +title: A web e seus padrões +slug: Aprender/Getting_started_with_the_web/A_web_e_seus_padrões +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Este artigo fornece algumas informações úteis sobre a Web - como ela surgiu, quais são suas tecnologias padrões, como elas funcionam juntas, porque "desenvolvedor web" é uma grande carreira para escolher e quais são os tipos de boas práticas são coisas que você aprenderá neste curso.

+ +

Breve histórico da web

+ +

Seremos breves, já que existem muitos (mais) artigos detalhados do histórico da web por aí, que mostraremos mais tarde (tente também pesquisar por "histórico da web" no seu mecanismo de pesquisa favorito e veja o que você encontra, se estiver interessado em maiores detalhes.)

+ +

No fim da década de 1960, os militares dos Estados Unidos desenvolveram uma rede de comunicação chamada ARPANET. Ela pode ser considerada como precursora da Web, já que trabalhava com comutação de pacotes e apresentou a primeira implementação do conjuto de protocolos TCP/IP. Estas duas tecnologias formaram a base da infraestrutura em que a internet foi construída.

+ +

Em 1980, Tim Berners-Lee (frequentemente chamado de TimBL) escreveu um programa de notebook chamado ENQUIRE, que apresentava o conceito de links entre diferentes nós. Parece familiar?

+ +

Avance para 1989, e TimBL escreveu Information Management: A Proposal and HyperText and CERN; essas duas publicações juntas forneceram o pano de fundo de como a web funcionaria. Eles receberam uma boa quantidade de juros, o suficiente para convencer os chefes da TimBL a permitir que ele fosse em frente e criasse um sistema de hipertexto global.

+ +

No final de 1990, TimBL havia criado todas as coisas necessárias para executar a primeira versão da web - HTTP , HTML , o primeiro navegador da web, que era chamado de WorldWideWeb , um servidor HTTP e algumas páginas da web para olhar.

+ +

Nos próximos anos que se seguiram, a web explodiu, com vários navegadores sendo lançados, milhares de servidores da web sendo configurados e milhões de páginas da web sendo criadas. OK, é um resumo muito simples do que aconteceu, mas prometi a você um breve resumo.

+ +

Um último dado significativo para compartilhar é que, em 1994, TimBL fundou o World Wide Web Consortium (W3C), uma organização que reúne representantes de muitas empresas de tecnologia diferentes para trabalharem juntos na criação de especificações de tecnologia da web. Depois disso, outras tecnologias surgiram, como CSS e JavaScript , e a web começou a se parecer mais com a que conhecemos hoje.

+ +

Padrões da web

+ +

Os padrões da Web são as tecnologias que usamos para construir sites. Esses padrões existem como longos documentos técnicos chamados especificações, que detalham exatamente como a tecnologia deve funcionar. Esses documentos não são muito úteis para aprender como usar as tecnologias que eles descrevem (é por isso que temos sites como MDN Web Docs), mas em vez disso, devem ser usados ​​por engenheiros de software para implementar essas tecnologias (geralmente em navegadores da web).

+ +

Por exemplo, o HTML Living Standard descreve exatamente como o HTML (todos os elementos HTML e suas APIs associadas e outras tecnologias adjacentes) deve ser implementado.

+ +

Os padrões da Web são criados por órgãos de padrões - instituições que convidam grupos de pessoas de diferentes empresas de tecnologia para se reunirem e concordarem sobre como as tecnologias devem funcionar da melhor maneira para cumprir todos os seus casos de uso. O W3C é o órgão de padrões da web mais conhecido, mas existem outros como o WHATWG (que foi responsável pela modernização da linguagem HTML), ECMA (que publicou o padrão para ECMAScript, no qual o JavaScript é baseado), Khronos (que publica tecnologias para gráficos 3D, como WebGL) e outros.

+ +

Padrões "abertos"

+ +

Um dos principais aspectos dos padrões da web, que TimBL e o W3C concordaram desde o início, é que a web (e as tecnologias da web) devem ser livres para contribuir e usar, e não onerada por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um site de graça e pode contribuir com o processo de criação de padrões, onde as especificações são escritas.

+ +

Como as tecnologias da web são criadas abertamente, em colaboração entre muitas empresas diferentes, isso significa que nenhuma empresa consegue controlá-las, o que é realmente bom. Você não gostaria que uma única empresa repentinamente decidisse colocar toda a web atrás de um acesso pago, ou lançar uma nova versão de HTML que todos precisam comprar para continuar a fazer sites, ou pior ainda, apenas decidir que não estão mais interessados e apenas desligá-lo.

+ +

Isso permite que a web continue sendo um recurso público disponível gratuitamente.

+ +

Não quebre a web

+ +

Outra frase que você ouvirá sobre os padrões abertos da web é "não quebre a web" - a ideia é que qualquer nova tecnologia da web introduzida deve ser compatível com o que existia antes (ou seja, os sites antigos ainda continuarão a funcionar ), e compatível com as versões futuras (tecnologias futuras, por sua vez, serão compatíveis com o que temos atualmente). Conforme você avança no material de aprendizagem apresentado aqui, você começará a aprender como isso é possível com um projeto muito inteligente e trabalho de implementação.

+ +

Ser um desenvolvedor web é bom

+ +

A indústria da web é um mercado muito atraente para se entrar, se você estiver procurando por um emprego. Números publicados recentes dizem que existem atualmente cerca de 19 milhões de desenvolvedores da web no mundo, e esse número deve mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de habilidades na indústria - então, que melhor momento para aprender desenvolvimento web?

+ +

No entanto, nem tudo é diversão e jogos - construir sites é uma proposta mais complicada do que costumava ser, e você terá que investir algum tempo para estudar todas as diferentes tecnologias que precisa usar, todas as técnicas e melhores práticas que você precisa saber e todos os padrões típicos que você deverá implementar. Você levará alguns meses para realmente começar a entrar no assunto e, em seguida, precisará continuar aprendendo para que seu conhecimento fique atualizado com todas as novas ferramentas e recursos que aparecem na plataforma da web, e continue praticando e refinando seu ofício.

+ +

A única constante é a mudança.

+ +

Isso parece difícil? Não se preocupe - nosso objetivo é fornecer a você tudo o que você precisa saber para começar, e as coisas ficarão mais fáceis. Depois de abraçar as constantes mudanças e incertezas da web, você começará a se divertir. Como parte da comunidade web, você terá toda uma rede de contatos e materiais úteis para ajudá-lo, e começará a desfrutar das possibilidades criativas que isso traz.

+ +

Você é um criativo digital agora. Aproveite a experiência e o potencial para ganhar a vida.

+ +

Visão geral das tecnologias modernas da web

+ +

Existem várias tecnologias para aprender se você quiser ser um desenvolvedor front-end da web. Nesta seção, iremos descrevê-los brevemente. Para uma explicação mais detalhada de como alguns deles funcionam juntos, leia nosso artigo Como funciona a web .

+ + + +

Provavelmente, você está lendo essas palavras dentro de um navegador da Web neste exato momento (a menos que as tenha imprimido ou esteja usando tecnologia de assistência, como um leitor de tela para ler para você). Os navegadores da web são os programas de software que as pessoas usam para consumir a web e incluem Firefox , Chrome , Opera , Safari e Edge .

+ +

HTTP

+ +

O protocolo de transferência de hipertexto, ou HTTP , é um protocolo de mensagens que permite aos navegadores da web se comunicarem com os servidores da web (onde os sites da web são armazenados). Uma conversa típica é algo como

+ +
"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]
+ +

A sintaxe real para mensagens HTTP (chamadas de solicitações e respostas) não é legível por humanos, mas isso lhe dá uma ideia básica.

+ +

HTML, CSS e JavaScript

+ +

HTML , CSS e JavaScript são as três tecnologias principais que você usará para construir um site:

+ + + +

Ferramental

+ +

Depois de aprender as tecnologias "brutas" que podem ser usadas para construir páginas da web (como HTML, CSS e JavaScript), você logo começará a encontrar várias ferramentas que podem ser usadas para tornar seu trabalho mais fácil ou mais eficiente. Exemplos incluem:

+ + + +

Linguagens e estruturas do lado do servidor

+ +

HTML, CSS e JavaScript são linguagens de front-end (ou cliente), o que significa que são executadas pelo navegador para produzir um front-end de site que seus usuários possam usar.

+ +

Há outra classe de linguagens chamadas linguagens de back-end (ou do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser enviado ao navegador para exibição. Um uso típico para uma linguagem do lado do servidor é obter alguns dados de um banco de dados e gerar algum HTML para conter os dados, antes de enviar o HTML ao navegador para exibi-lo ao usuário.

+ +

Linguagens de servidor de exemplo incluem ASP.NET, Python, PHP e NodeJS.

+ +

Melhores práticas da web

+ +

Falamos brevemente sobre as tecnologias que você usará para construir sites. Agora, vamos discutir as melhores práticas que você deve empregar para garantir que está usando essas tecnologias da melhor maneira possível.

+ +

Ao fazer o desenvolvimento da web, a principal causa de incerteza vem do fato de que você não sabe qual combinação de tecnologia cada usuário usará para visualizar seu site:

+ + + +

Como você não sabe exatamente o que seus usuários usarão, você precisa fazer um design defensivo - tornar seu site o mais flexível possível, de modo que todos os usuários acima possam usá-lo, mesmo que nem todos recebam o mesmo experiência. Resumindo, estamos tentando fazer a web funcionar para todos, tanto quanto possível.

+ +

Você encontrará os conceitos abaixo em algum momento de seus estudos.

+ + + +

Veja também

+ + diff --git a/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..62ad3bd27d --- /dev/null +++ b/files/pt-br/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,111 @@ +--- +title: Com será o seu site? +slug: Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer +tags: + - Aprender + - Ativos + - Composição + - Conteúdo + - Descontinuado + - Design + - Fontes + - Iniciante + - Passo a passo + - Simples + - 'l10:prioridade' +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Como será o seu site? discute o trabalho de planejamento e design que você precisa fazer para o seu site antes de escrever o código, incluindo "Quais informações meu site oferece?", "Quais fontes e cores eu quero?" e ​​"O que meu site faz?"

+
+ +

Primeiramente: planejamento

+ +

Antes que você faça qualquer coisa, você precisa de algumas ideias. O que seu site realmente vai fazer? Um site pode fazer praticamente tudo, mas primeiro você deve manter as coisas em um nível simples. Nós vamos começar criando um site simples com um cabeçalho, uma imagem e alguns parágrafos.

+ +

Para começar, você deve responder às seguintes questões:

+ +
    +
  1. Sobre o que é seu site? Você gosta de cachorros, Nova Iorque ou Pacman?
    2. +
  2. Que informação você está apresentando sobre o assunto? Escreva um título e alguns parágrafos e pense em uma imagem para ilustrar sua página.
    3. +
  3. Como será seu site, em termos simples. Qual é a cor de fundo? Qual é o tipo de fonte apropriado: formal, desenhado, negrito e gritante, sutil?
    4. +
+ +
+

Nota: Projetos complexos precisam de guias detalhados que abordam todos os detalhes de cores, fontes, espaçamento entre itens de uma página, estilo de escrita apropriado, e por aí vai. Isso é denominado um guia de design, sistema de design ou manual da marca, e você pode ver um exemplo no Sistema de Design do Firefox Photon (em inglês).

+
+ +

Rascunhando seu design

+ +

Em seguida, pegue papel e caneta e faça um rascunho de como você deseja que seu site seja. Para sua primeira página simples, não há muito o que rascunhar, mas você deve criar o hábito desde o começo. Realmente ajuda — você não precisa ser um Van Gogh!

+ +

+ +
+

Nota: Mesmo em sites reais e complexos, os times de design geralmente começam pelo rascunho em papel e depois constroem a versão digital usando um editor gráfico ou tecnologias da web.

+ +

Os times de web geralmente incluem um designer gráfico e um designer de {{Glossary("UX", "experiencia do usuário")}} (UX). Designers gráficos, obviamente, constroem a parte visual do site. UX designers tem uma função de certa forma mais abstrata, direcionando como os usuários vão interagir e experimentar o site.

+
+ +

Construindo seus ativos

+ +

Nesse ponto, é bom começar juntando o conteúdo que vai eventualmente aparecer no site.

+ +

Texto

+ +

Você deve ter seu título e parágrafos desde antes. Mantenha eles por perto.

+ +

Cor do tema

+ +

Para escolher a cor, vá ao Seletor de Cores e escolha a cor que preferir. Quando escolher a cor, você verá uma sequência de seis caracteres, como #660066. Isso é chamado um código hex(adecimal), e representa sua cor. Copie esse código em algum lugar seguro por enquanto.

+ +

+ +

Imagens

+ +

Para escolher uma imagens, vá no Google Imagens e procure por algo que se encaixe no seu site.

+ +
    +
  1. Quando você achar a imagem que você quer, clique nela para obter uma visão ampliada dela.
    2. +
  2. Clique com o botão direito na imagem (Ctrl + click no Mac) escolha Salvar imagem como... e escolha um local seguro para salvar sua imagem. Como alternativa, copie o endereço web da imagem da barra de endereço do navegador, para uso posterior.
    3. +
+ +

+ +

Observe que a maioria das imagens na Web, inclusive no Imagens do Google, é protegida por direitos autorais. Para reduzir a probabilidade de violar direitos autorais, você pode usar o filtro de licenças do Google. Clique no botão Ferramentas e, em seguida, na opção Direitos de uso resultante que aparece abaixo. Você deve escolher uma opção como Marcada para reutilização.

+ +

+ +

Fonte

+ +

Para escolher uma fonte:

+ +
    +
  1. Vá no Google Fontes e role a lista até que você ache uma que você goste. Você também pode usar os controles à direita para filtrar os resultados.
    2. +
  2. Clique no ícone "mais" (Adicionar a) ao lado da fonte desejada.
    3. +
  3. Clique no botão "* Família Selecionada" no painel na parte inferior da página ("*" depende de quantas fontes você selecionou).
    4. +
  4. Na caixa pop-up, você pode ver e copiar as linhas de código que o Google oferece em seu editor de texto para salvar posteriormente.
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..e693b6fed8 --- /dev/null +++ b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,135 @@ +--- +title: Dicas para criar páginas HTML de carregamento rápido +slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido +tags: + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Estas dicas são baseadas em conhecimento comum e experimentação.

+

Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.

+

Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.

+

Dicas

+

Reduza o peso da página

+

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

+

Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS inline para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

+

Ferramentas como HTML Tidy podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.

+

Minimize o número de arquivos

+

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP requeridas para realizar o download da página.

+

Dependendo das configurações de cache do browser, este pode enviar uma requisição If-Modified-Since ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

+

Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.

+

Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um sprite de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e caching de uma única imagem devem ajudar a reduzir o tempo de carregamento.

+

Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o browser deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

+

Reduza pesquisa de domínio

+

Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.

+

Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.

+

Conteúdo em cache reutilizado

+

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

+

Em especial, atente ao cabeçalho Last-Modified. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho Last-Modified a páginas estáticas (p. ex.: .html, .css), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:.php, .aspx), isso não pode ser feito, e o cabeçalho não é enviado.

+

Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.

+

Mais informações:

+
    +
  1. Get HTTP Condicional para Hackers RSS
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. Sobre o Last-Modified HTTP e ETag
    4. +
+

Estabeleça a ordem dos componentes da página de forma otimizada

+

Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.

+

Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.

+

Reduza o número de scripts inline

+

Scripts inline podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de parsing está em andamento. Reduzir o número de scripts inline no geral e reduzir o uso de document.write() para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em document.write().

+

Use CSS moderno e marcação validada

+

O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.

+

Usar marcações validadas tem outras vantagens. Primeiro, browsers não precisarão realizar correção de erros durante o parsing de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).

+

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.

+

Divida seu conteúdo

+

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, layout multi-colunas CSS3 ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

+

Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.

+

Ao invés de realizar aninhamentos profundos como:

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

use tabelas não-aninhadas ou divs, como em

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

+

Especifique tamanhos para imagens e tabelas

+

Se o browser puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, height e width devem ser especificadas para imagens, sempre que possível.

+

Tabelas devem usar a combinação CSS selector:property:

+
  table-layout: fixed;
+
+

e devem especificar as larguras das colunas usando as tags HTML COL e COLGROUP.

+

Escolha bem seus requisitos de agente de usuário

+

Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os browsers, especialmente nos obsoletos.

+

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os browsers modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.

+

Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em browsers.

+

Exemplo de estrutura de página

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ Arquivos JavaScript para funções requeridas durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
+
+ Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
+
+
+
+
+
+ · BODY
+
+ · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.
+
+
+
+
+
+ · SCRIPT ...
+ Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.
+
+ Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
+
+ Se uma ou mais imagens forem usadas para efeitos de rollover, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
+
+
+
+

Use async and defer, se possível

+

Faça com que scripts JavaScript sejam compatíveis tanto com async como defer e use async sempre que possível, especialmente se você tiver múltiplas tags de script.

+

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o browser não renderizará nada que estiver após as tags de script sem esses atributos.

+

Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os browsers. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

+ + +
+

Informações do Documento Original

+ +
+

 

diff --git a/files/pt-br/learn/html/howto/index.html b/files/pt-br/learn/html/howto/index.html new file mode 100644 index 0000000000..4d64f7d792 --- /dev/null +++ b/files/pt-br/learn/html/howto/index.html @@ -0,0 +1,150 @@ +--- +title: Use HTML para resolver problemas comuns +slug: Aprender/HTML/como-fazer +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.

+ +
+
+

Estrutura Básica

+ +

A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.

+ + + +

Semântica básica em nível de texto

+ +

O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.

+ + +
+ +
+ + +

Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:

+ + + +

Imagens & multimídia

+ + + +

Scripts & estilos

+ +

O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.

+ + + +

Conteúdo embutido

+ + +
+
+ +

Problemas incomuns ou avançados

+ +

Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:

+ +
+
+

Formulários

+ +

Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso guia completo. Eis os tópicos onde você deve começar:

+ + + +

Informação tabular

+ +

Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:

+ + + +

Representação de dados

+ + + +

Interatividade

+ + +
+ +
+

Semântica avançada de texto

+ + + +

Imagens & multimídia avançados

+ + + +

Internacionalização

+ +

HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.

+ + + +

Performance

+ + +
+
+ +

     

diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.html b/files/pt-br/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..20daf02206 --- /dev/null +++ b/files/pt-br/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,72 @@ +--- +title: Utilizando data attributes +slug: Web/Guide/HTML/Using_data_attributes +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +

O HTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  Atributos data-* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList, atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

+ +

Sintaxe HTML

+ +

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com data- é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Acesso no JavaScript

+ +

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Para obter o atributo data através do objeto dataset, acesse a propriedade utilizando a parte do nome do atributo após o prefixo data- (note que o hífen é convertido para camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição article.dataset.columns = 5 iria alterar esse atributo para "5".

+ +

Acesso no CSS

+ +

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Pode-se tudo isso em funcionamento neste exemplo JSBin.

+ +

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

+ +

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

+ +

Issues

+ +

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. 

+ +

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam dataset. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de dataset é até pior que a leitura dos dados com getAttribute().

+ +

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

+ +

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

+ +

Veja também

+ + diff --git a/files/pt-br/learn/html/index.html b/files/pt-br/learn/html/index.html new file mode 100644 index 0000000000..498ba9ab01 --- /dev/null +++ b/files/pt-br/learn/html/index.html @@ -0,0 +1,54 @@ +--- +title: Estruturando a web com HTML +slug: Aprender/HTML +tags: + - Aprender + - Guía + - HTML + - Iniciante + - Introdução + - Tópico +translation_of: Learn/HTML +--- +

{{LearnSidebar}}

+ +

Para construir websites, você deve conhecer sobre {{Glossary('HTML')}} — a tecnologia fundamental usada para definir a estrutura de uma página web. HTML é usado para especificar se o conteúdo da web deve ser reconhecido como um parágrafo, uma lista, um título, um link, uma imagem, um visualizador multimídia, um formulário ou um dos muitos outros elementos disponíveis ou até mesmo um novo elemento definido por você.

+ +

Percurso de aprendizagem

+ +

Você deve, preferencialmente, iniciar sua jornada aprendendo HTML. Comece lendo Introdução ao HTML. Você pode então passar a aprender sobre tópicos mais avançados, tais como:

+ + + +

Antes de iniciar este tópico, você deve pelo menos ter uma familiaridade básica com o uso de computadores e com a web (por exemplo: apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente básico de trabalho configurado como detalhado em Instalando os programas básicos e entender como criar e gerenciar arquivos, como detalhado em Lidando com arquivos — ambos fazem parte do nosso módulo para iniciantes Introdução à Web.

+ +

Recomenda-se que você complete o módulo Introdução à Web antes de tentar este tópico, mas isto não é absolutamente necessário; muito do que é abordado no artigo HTML básico é também abordado no nosso módulo Introdução ao HTML, embora com muito mais detalhes.

+ +

Módulos

+ +

Este tópico contém os seguintes módulos, em uma ordem sugerida para trabalhar com eles. Você deve definitivamente começar com o primeiro módulo.

+ +
+
Introdução ao HTML
+
Este módulo define o cenário, introduzindo você a conceitos e sintaxe importantes, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma página da web.
+
Multimídia e incorporação
+
Este módulo explora como usar HTML para incluir multimídia em suas páginas web, incluindo as diferentes formas que as imagens podem ser inseridas e como incorporar vídeo, áudio e até mesmo outras páginas inteiras.
+
Tabelas HTML
+
Representar dados tabulares em uma página da web de maneira compreensível e {{glossary("Accessibility", "acessível")}} pode ser um desafio. Este módulo abrange a marcação básica de tabelas, além de outros recursos mais complexos, tais como a implementação de legendas e resumos.
+
+ +

Resolvendo problemas comuns com HTML

+ +

Usar HTML para resolver problemas comuns fornece links para seções com conteúdos que explicam como usar HTML para resolver problemas muito comuns ao criar uma página da web: lidar com títulos, adicionar imagens ou vídeos, enfatizar conteúdo, criar um formulário básico, etc.

+ +

Veja também

+ +
+
Formulários HTML
+
Este módulo fornece uma série de artigos que ajudarão você a dominar o essencial dos formulários da web. Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. No entanto, por razões históricas e técnicas, nem sempre é óbvio como usá-las em todo o seu potencial. Abordaremos todos os aspectos essenciais dos formulários da Web, incluindo marcação de sua estrutura HTML, controles de estilo, validação de dados e envio de dados ao servidor.
+
HTML (Linguagem de Marcação de HiperTexto)
+
O principal ponto de entrada para a documentação HTML no MDN, incluindo referências detalhadas de elementos e atributos — se você quiser saber quais atributos um elemento possui ou quais valores tem um atributo, por exemplo, este é um ótimo lugar para começar.
+
diff --git a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..3b5365b074 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,481 @@ +--- +title: Formatação avançada de texto +slug: Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto +tags: + - Aprender + - Guía + - HTML + - Texto + - abreviação + - citar + - lista de descrição + - semântico +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

+Existem muitos outros elementos em HTML para formatação de texto, que não tratamos no artigo de Fundamentos do texto em HTML. Os elementos descritos neste artigo são menos conhecidos, mas ainda são úteis para conhecer (e isso ainda não é uma lista completa de todos os elementos). Aqui, você aprenderá a marcar citações, listas de descrição, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contato e muito mais. +

+ +

+ + + + + + + + + + + + +
Pré-requisitos:Familiaridade básica em HTML, conforme abordado em Introdução ao HTML. Formatação de texto em HTML, conforme abordado em Fundamentais de texto em HTML.
Objetivo:Aprender a usar elementos HTML menos conhecidos para marcar recursos semânticos avançados.
+ +

Listas de descrição

+ +

Nos Fundamentos do texto em HTML, falamos sobre como marcar as listas básicas em HTML, mas não mencionamos o terceiro tipo de lista que ocasionalmente irá encontrar - listas de descrição. O objetivo dessas listas é marcar um conjunto de itens e suas descrições associadas, como termos e definições, ou perguntas e respostas. Vejamos um exemplo de um conjunto de termos e definições:

+ +
solilóquio
+No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
+monólogo
+No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
+aparte
+No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
+ +

As listas de descrição usam um invólucro diferente dos outros tipos de lista — {{htmlelement("dl")}}; além disso, cada termo está envolvido em um {{htmlelement("dt")}} (termo de descrição) elemento, e cada descrição está envolvida em um {{htmlelement("dd")}} (definição de descrição) elemento. Vamos terminar marcando nosso exemplo:

+ +
<dl>
+  <dt>solilóquio</dt>
+  <dd>No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).</dd>
+  <dt>monólogo</dt>
+  <dd>No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.</dd>
+  <dt>aparte</dt>
+  <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd>
+</dl>
+ +

Os estilos padrões do navegador exibirão as listas com as descrições indentadas um pouco dos termos. Os estilos da MDN seguem esta convenção de forma bastante parecida, mas também enfatizam os termos, para uma definição extra.

+ +
+
solilóquio
+
No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
+
monólogo
+
No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
+
aparte
+
No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
+
+ +

Observe que é permitido ter um único termo com múltiplas descrições, por exemplo:

+ +
+
aparte
+
No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
+
Por escrito, uma seção de conteúdo que está relacionada ao tópico atual, mas não se encaixa diretamente no fluxo principal de conteúdo, então é apresentado próximo (muitas vezes em uma caixa ao lado).
+
+ +

Aprendizagem ativa: marcando um conjunto de definições

+ +

É hora de pôr as mãos nas listas de descrição. Adicione elementos ao texto bruto no campo de Entrada para que ele se pareça como uma lista de descrição no campo Saída. Você pode tentar usar seus próprios termos e descrições, se quiser.

+ +

Se você cometer um erro, sempre pode reiniciá-lo usando o botão 'Limpar'. Se ficar realmente preso, pressione o botão 'Mostrar solução' para ver a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Cotações

+ +

HTML também possui recursos disponíveis para marcação de cotações. Qual elemento você pode usar? Depende se está marcando um bloco ou uma cotação em linha.

+ +

Blockquotes

+ +

Se uma seção de conteúdo em nível de bloco (seja um parágrafo, vários parágrafos, uma lista, etc.) for citada em algum outro lugar, você deverá envolvê-la em um elemento <blockquote> para indicar isso e incluir um URL apontando para a fonte da citação dentro de um atributo cite. Por exemplo, a marcação a seguir é obtida da página do elemento <blockquote> do MDN:

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

Para transformar isso em uma cotação em bloco, faríamos assim:

+ +
<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um indicador de que é uma citação. O MDN faz isso, mas também, adiciona um estilo extra:

+ +
+

O Elemento HTML <blockquote> (or HTML Block Quotation Element) indica que o texto em anexo é uma cotação estendida.

+
+ +

Cotações em linha

+ +

As cotações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento {{htmlelement("q")}}. Por exemplo, o bit de marcação abaixo contém uma cotação da página MDN <q>:

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +

O estilo padrão do navegador renderiza isso como texto normal entre aspas para indicar uma cotação, assim:

+ +

O elemento de cotação — <q> — é "destinado a citações curtas que não exigem quebras de parágrafo".

+ +

Citações

+ +

O conteúdo do atributo {{htmlattrxref("cite","blockquote")}} parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de cite, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da cotação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de <cite> à citação fonte de alguma forma:

+ +
<p>According to the <a href="/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

As citações são estilizadas em fonte itálica por padrão. Você pode ver esse código funcionando em nosso exemplo quotations.html.

+ +

Aprendizado ativo: quem disse isso?

+ +

Hora de outro exemplo de aprendizado ativo! Neste exemplo, gostaríamos que você:

+ +
    +
  1. Transforme o parágrafo do meio em uma citação em bloco, que inclui um atributo cite.
    2. +
  2. Transforme parte do terceiro parágrafo em uma cotação embutida, que inclui um atributo de cite.
    3. +
  3. Inclua um elemento <cite> para cada link.
    4. +
+ +

Pesquise on-line para encontrar fontes de cotação apropriadas.

+ +

Se você cometer um erro, sempre poderá redefini-lo usando o botão 'Limpar'. Se você realmente ficar atolado, pressione o botão 'Mostrar solução' para ver a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Abreviações

+ +

Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo {{htmlattrxref("title")}}.) Vejamos alguns exemplos

+ +
<p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p>
+
+<p>Acho que o <abbr title="Reverendo">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p>
+ +

Elas aparecerão da seguinte forma (a expansão aparecerá em uma dica de ferramenta quando o termo passar o mouse):

+ +

Usamos HTML para estruturar nossos documentos da web.

+ +

Acho que o Rev. Green fez isso na cozinha com a motosserra.

+ +
+

Note: Há outro elemento, {{htmlelement("acronym")}}, que basicamente faz a mesma coisa que <abbr>, e foi projetado especificamente para acrônimos, em vez de abreviações. Isso, no entanto, caiu em desuso — não era suportado em navegadores nem o <abbr>, e tem uma função semelhante que foi considerado inútil ter os dois. Apenas use <abbr>.

+
+ +

Aprendizado ativo: marcando uma abreviação

+ +

Para esta tarefa simples de aprendizado ativo, gostaríamos que você simplesmente marque uma abreviação. Você pode usar nossa amostra abaixo ou substituí-la por uma de sua preferência.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Marcando detalhes de contato

+ +

O HTML possui um elemento para marcar os detalhes do contato — {{htmlelement("address")}}. Isso simplesmente envolve seus detalhes de contato, por exemplo:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

Porém, uma coisa a se lembrar é que o elemento <address> destina-se a marcar os detalhes de contato da pessoa que escreveu o documento HTML e não qualquer endereço. Portanto, o exposto acima só seria bom se Chris tivesse escrito o documento em que a marcação aparece. Observe, que, algo assim também seria bom:

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Sobrescrito e subscrito

+ +

Ocasionalmente, você precisará usar sobrescrito e subscrito ao marcar itens como datas, fórmulas químicas e equações matemáticas para que eles tenham o significado correto. Os elementos {{htmlelement("sup")}} e {{htmlelement("sub")}} manipulam esse trabalho. Por exemplo:

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

A saída desse código é assim:

+ +

Meu aniversário é no dia 25 de maio de 2001.

+ +

A fórmula química da cafeína é C8H10N4O2.

+ +

Se x2 é 9, x deve ser igual a 3 ou -3.

+ +

Representando código de computador

+ +

Existem vários elementos disponíveis para marcar código de computador usando HTML:

+ + + +

Vejamos alguns exemplos. Você deve tentar brincar com eles (tente pegar uma cópia do nosso arquivo de exemplo other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

O código acima terá a seguinte aparência:

+ +

{{ EmbedLiveSample('Representing_computer_code','100%',300) }}

+ +

Marcando horários e datas

+ +

O HTML também fornece o elemento {{htmlelement("time")}} para marcar horários e datas em um formato legível por máquina. Por exemplo:

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

Por que isso é útil? Bem, existem muitas maneiras diferentes pelas quais os humanos escrevem datas. A data acima pode ser escrita como:

+ + + +

Mas essas formas diferentes não podem ser facilmente reconhecidas pelos computadores — e se você quiser pegar automaticamente as datas de todos os eventos em uma página e inseri-las em um calendário? O elemento {{htmlelement("time")}} permite anexar uma data/hora inequívoca e legível por máquina para esse fim.

+ +

O exemplo básico acima fornece apenas uma data legível por máquina simples, mas existem muitas outras opções possíveis, por exemplo:

+ +
<!-- Data simples padrão -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Apenas ano e mês -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Apenas tempo, horas e minutos -->
+<time datetime="19:30">19:30</time>
+<!-- Você pode fazer segundos e milissegundos também! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Data e hora -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Data e hora com compensação de fuso horário -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Chamando um número de semana específico -->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

Resumo

+ +

Isso marca o fim de nosso estudo da semântica de texto HTML. Lembre-se de que o que você viu durante este curso não é uma lista exaustiva de elementos de texto HTML — queríamos tentar cobrir o essencial, e alguns dos mais comuns que você verá na natureza, ou pelo menos podem achar interessantes. Para encontrar muito mais elementos HTML, você pode dar uma olhada no nosso HTML element reference (a seção Inline text semantics seria um ótimo ponto de partida.) No próximo artigo, examinaremos os elementos HTML que você usaria para estruturar as diferentes partes de um documento HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..1abbfa20c4 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,324 @@ +--- +title: Criando hyperlinks +slug: Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks +tags: + - Guía + - HTML + - HTTP + - Iniciante + - Link + - URL + - absoluto + - href + - hyperlinks + - relativo +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+
+ +

Os hiperlinks são realmente importantes — são o que torna a Web uma web. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.

+ + + + + + + + + + + + +
Pre-requisitos: +

Familiaridade básica em HTML, conforme Começando com o HTML. Formatação de texto em HTML, conforme Fundamentos do texto em HTML.

+
Objetivo:Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.
+ + + +

Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço ({{glossary("URL")}}).

+ +
+

Nota: Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).

+
+ +

A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ + + +

Um link básico é criado envolvendo o texto (ou outro conteúdo, veja {{anch("Block level links")}}) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo {{htmlattrxref("href", "a")}}, (também conhecido como Hypertext Reference, ou target) que conterá o endereço da Web para o qual você deseja que o link aponte.

+ +
<p>Estou criando um link para
+<a href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.
+</p>
+ +

Isso nos dá o seguinte resultado:

+ +

Estou criando um link para a página inicial da Mozilla.

+ +

Adicionando informações de suporte com o atributo title

+ +

Outro atributo que você pode querer adicionar aos seus links é o title; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:

+ +
<p>Estou criando um link para
+<a href="https://www.mozilla.org/pt-BR/"
+   title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir"> a página inicial da Mozilla</a>.
+</p>
+ +

Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):

+ +

Estou criando um link para a página inicial da Mozilla.

+ +
+

Nota: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou touchscreen para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.

+
+ +

Aprendizagem na prática: criando seu próprio link de exemplo

+ +

Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso modelo inicial seria interessante.)

+ + + + + +

Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo elementos de nível de bloco. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <a></a>.

+ +
<a href="https://www.mozilla.org/pt-BR/">
+  <img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla">
+</a>
+ +
+

Nota: Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.

+
+ +

Um guia rápido sobre URLs e caminhos

+ +

Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.

+ +

Um URL ou Uniform Resource Locator é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em https://www.mozilla.org/en-US/.

+ +

Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de criação de hiperlinks).

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

A raiz dessa estrutura de diretório é chamada de  criação de hiperlinks. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo index.html e um arquivo contacts.html. Em um site real, index.html seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).

+ +

Existem também dois diretórios dentro da nossa raiz — pdfs e projects. Cada um deles contém um único arquivo — um PDF (projetos-brief.pdf) e um arquivo index.html, respectivamente. Observe como é possível, felizmente, ter dois arquivos index.html em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo index.html poderia ser a página de destino principal para informações relacionadas ao projeto.

+ + + +
+

Nota: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo../../../complex/path/to/my/file.html.

+
+ +

Fragmentos de documento

+ +

É possível vincular a uma parte específica de um documento HTML (conhecido como um fragmento de documento) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:

+ +
<h2 id="Mailing_address">Endereço de correspondência</h2>
+ +

Em seguida, para vincular a esse  id específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:

+ +
<p>Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing_address">endereço de correspondência</a>.</p>
+ +

Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:

+ +
<p>O <a href="#Mailing_address">endereço postal da empresa</a> pode ser encontrado na parte inferior desta página.</p>
+ +

URLs absolutos versus relativos

+ +

Dois termos que você encontrará na Web são URL absoluto e URL relativo:

+ +

URL absoluto: aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página index.html for carregada para um diretório chamado projeto que fica dentro da raiz de um servidor web, e o domínio do site é http://www.exemplo.com, a página estará disponível em http://www.exemplo.com/projeto/index.html (ou mesmo apenas http://www.exemplo.com/projeto/, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)

+ +

Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.

+ +

URL relativa: aponta para um local relativo ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em http://www.exemplo.com/projeto/index.html para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, project-brief.pdf — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de projects chamado pdfs, o link relativo seria  pdfs/projeto-brief.pdf (o URL absoluto equivalente seria http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo index.html para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a pdfs/project-brief.pdf agora apontaria para um arquivo localizado em http://www.example.com/pdfs/project-brief.pdf, não para um arquivo localizado em http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Práticas recomendadas

+ +

Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.

+ + + +

Use palavras-chave claras

+ +

É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links acessíveis a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:

+ + + +

Vejamos um exemplo específico:

+ +

Texto de link correto: Baixe o Firefox

+ +
<p><a href="https://firefox.com/">
+  Baixe o Firefox
+</a></p>
+ +

Texto de link incorreto: clique aqui para baixar o Firefox

+ +
<p><a href="https://firefox.com/">
+  clique aqui
+</a>
+para baixar o Firefox</p>
+
+ +

Outras dicas:

+ + + + + +

A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com links relativos. No entanto, você deve usar links relativos sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):

+ + + +

Vinculando-se a recursos que não sejam HTML — deixe indicadores claros

+ +

Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:

+ + + +

Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Baixe o relatório de vendas (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Assista ao vídeo (o fluxo abre em separado, qualidade HD)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Jogue o jogo de carro (requer Flash Player)
+</a></p>
+ +

Use o atributo de download ao vincular a um download

+ +

Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de baixar para a versão do Windows 39 do Firefox:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Faça o download do Firefox 39 para Windows
+</a>
+ +

Aprendizagem ativa: criando um menu de navegação

+ +

Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um site com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os links são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.

+ +

Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de início do menu de navegação para uma lista completa de arquivos):

+ + + +

Você deve:

+ +
    +
  1. Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de links, então está semanticamente correto.
    2. +
  2. Transformar o nome de cada página em um link para essa página.
    3. +
  3. Copiar o menu de navegação para cada uma.
    4. +
  4. Em cada página, remova apenas o link para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um link é um bom lembrete visual de qual página você está atualmente.
    5. +
+ +

O exemplo final acabaria por parecer algo assim:

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Note: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de navegação-menu-marcado para ver a resposta correta.

+
+ + + +

É possível criar links ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento {{HTMLElement("a")}} e o mailto: estrutura de URL.

+ +

Na sua forma mais comum, um mailto: simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:

+ +
<a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a>
+
+ +

Isso resulta em um link que se parece com isto: Enviar e-mail para lugar nenhum.

+ +

Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu {{htmlattrxref("href", "a")}} for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" links que os usuários podem clicar para enviar um e-mail para um endereço escolhido.

+ +

Especificando detalhes

+ +

Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do mailto: que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.

+ +

Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+ Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo:
+</a>
+ +
+

Nota: Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com percent-escaped. Observe também o uso do ponto de interrogação (?) Para separar o URL principal dos valores do campo e do e comercial (&) para separar cada campo no mailto: URL. Essa é a notação de consulta padrão do URL. Leia O método GET para entender para que esta notação de consulta é mais comum.

+
+ +

Aqui estão alguns outros exemplos de URLs de mailto:

+ + + +

Resumo

+ +

Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..4b518454d9 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,175 @@ +--- +title: Debugging HTML +slug: Aprender/HTML/Introducao_ao_HTML/Debugging_HTML +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Escrever HTML é legal, mas e se algo der errado, e você não conseguir descobrir onde está o erro no código? Este artigo apresentará algumas ferramentas que podem ajudá-lo a encontrar e corrigir erros no HTML.

+ + + + + + + + + + + + +
Pré-requisitos:Familiaridade com HTML, conforme abordado, por exemplo, em Introdução ao HTML, Fundamentos de texto em HTML e Criação de Hiperlinks.
Objetivo:Aprender o básico sobre o uso de ferramentas de depuração (debugging) para encontrar problemas em HTML.
+ +

Depurar não é assustador

+ +

Ao escrever algum tipo de código, tudo costuma ir bem, até o temido momento quando ocorre um erro — você fez algo errado, então seu código não funciona - talvez não funcione mais nada ou não funciona exatamente como você queria. Por exemplo, a seguir é mostrado um erro relatado ao tentar {{glossary("compilar")}} um programa simples escrito na linguagem Rust.

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.Aqui, a mensagem de erro é relativamente fácil de entender — "string de aspas duplas sem terminação". Se você olhar a listagem, provavelmente verá como println!(Hello, world!"); pode estar faltando logicamente uma aspa dupla. No entanto, as mensagens de erro podem ficar mais complicadas e menos fáceis de interpretar à medida que os programas se tornam maiores, e até mesmo casos simples podem parecer um pouco intimidadores para alguém que não sabe nada sobre o Rust.

+ +

Depurar um código não tem que ser assustador, porém —  a chave para se sentir confortável em escrever e depurar qualquer linguagem ou código de programação é a familiaridade com a linguagem e as ferramentas.

+ +

HTML e depuração

+ +

HTML não é tão complicado de entender quanto o Rust. O HTML não é compilado em um formato diferente antes do navegador analisá-lo e mostrar o resultado (ele é interpretado, não compilado). E a sintaxe do {{glossary("elemento")}} HTML é muito mais fácil de entender do que uma "linguagem de programação real" como Rust, {{glossary("JavaScript")}}, ou {{glossary("Python")}}. A forma como os navegadores analisam o HTML é muito mais permissiva do que a forma como as linguagens de programação são executadas, o que é bom e ruim.

+ +

Código permissivo

+ +

Então, o que queremos dizer com permissivo? Bem, geralmente quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:

+ + + +

O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam permissivamente, o que significa que a página ainda é exibida mesmo se houver erros de sintaxe. Os navegadores têm regras internas para indicar como interpretar a marcação escrita incorretamente, para que você obtenha algo em execução, mesmo que não seja o esperado. Isso, claro, ainda pode ser um problema!

+ +
+

Nota: O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir que as pessoas publicassem seus conteúdos era mais importante do que garantir que a sintaxe estivesse absolutamente correta. A web provavelmente não seria tão popular quanto é hoje, se tivesse sido mais rigorosa desde o início.

+
+ +

Aprendizado Ativo: Estudando código permissivo

+ +

É hora de estudar a natureza permissiva do código HTML.

+ +
    +
  1. Primeiramente, faça o download do debug-example demo e o salve localmente. Esse exemplo contém erros propositais para que possamos explorá-los (tal código HTML é dito  badly-formed, em contraponto ao HTML well-formed).
    2. +
  2. Em seguida, abra o arquivo em um navegador. Você verá algo como:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. Isso claramente não parece bom; vamos dar uma olhada no código fonte para tentar achar os erros (somente o conteúdo de body é mostrado): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Vamos analisar os erros: +
      +
    • Os elementos {{htmlelement("p","parágrafo")}} e {{htmlelement("li","item da lista")}} não possuem tags de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar.
      • +
    • O primeiro elemento {{htmlelement("strong")}} não possui tag de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado.
      • +
    • Essa seção foi aninhada incorretamente: <strong>strong <em>strong emphasised?</strong> what is this?</em>. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior.
      • +
    • O valor do atributo {{htmlattrxref("href","a")}} não tem as aspas de fechamento. Isso parece ter causado o maior problema — o link não foi renderizado.
      • +
    +
    5. +
  5. Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: O que são as ferramentas de desenvolvimento do navegador.
    6. +
  6. No inspetor DOM, você pode ver como o HTML renderizado fica: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Utilizando o inspetor DOM, vamos explorar nosso código detalhadamente para ver como o navegador tentou consertar os erros do código HTML (nós fizemos a análise com o Firefox, mas outros navegadores modernos devem apresentar o mesmo resultado): +
      +
    • As tags de fechamento foram colocadas nos parágrafos e itens da lista.
      • +
    • Não está claro onde o primeiro elemento <strong> deveria terminar, portanto o navegador envolveu cada bloco subsequente em uma tag strong própria até o fim do documento!
      • +
    • O aninhamento incorreto foi corrigido pelo navegador da seguinte maneira: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • O link cujas aspas de fechamento não estavam presentes foi totalmente excluído da renderização. Então o último item ficou assim: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validação HTML

+ +

Então, você pode ver pelo exemplo acima que você realmente  quer ter certeza de que o seu HTML foi bem construido! Mas Como? Em um pequeno exemplo como o que foi visto acima, é facil analisar as linhas e achar os erros, mas e se fosse um gigante e complexo documento HTML?

+ +

A melhor estratégia é começar rodando a sua página HTML através do Markup Validation Service — criado e mantido pelo W3C, uma organização que cuida das especificações que define o HTML, CSS, e outras tecnologias WEB. Esta página considera um documento HTML como uma entrada, fazendo a leitura dela e retornando o que há de errado com o seu HTML.

+ +

The HTML validator homepage

+ +

Para especificar o HTML a ser validado, você pode dar um endereço web, fazer o upload de um arquivo HTML, ou diretamente inserir o código HTML.

+ +

Aprendizado Ativo: Validando um documento HTML

+ +

Vamos tentar fazer isto com o nosso sample document.

+ +
    +
  1. Primero, carregue o Markup Validation Service em uma aba no seu navegador, caso já não esteja carregada.
    2. +
  2. Troque para a aba Validate by Direct Input.
    3. +
  3. Copie todo o código do documento de exemplo (não apenas o body) e cole dentro da grande área de texto mostrada no Markup Validation Service.
    4. +
  4. Pressione o botão Check.
    5. +
+ +

Você deverá receber uma lista de erros e outras informações.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Interpretando as mensagens de erros

+ +

As mensagens de erros geralmente são úteis, mas algumas vezes elas não ajudam tanto; com um pouco de prática você pode descobrir como interpretar-lás para arrumar o seu código. Vamos dar uma olhada nas mensagens de erros e ver o que elas significam. Você verá que cada mensagem vem com um numero para a linha e um para a coluna afim de ajudar você a localizar o erro facilmente.

+ + + +

If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.

+ +

You will know when all your errors are fixed when you see the following banner in your output:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Summary

+ +

So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..825d2cec6e --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,299 @@ +--- +title: Estrutura de documento e sites +slug: Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +
Além de definir as partes individuais de sua página (como "um parágrafo" ou "uma imagem"),
+ +

o {{glossary("HTML")}}  também conta com vários elementos de nível de bloco usados para definir as áreas de seu site (como "o cabeçalho", "o menu de navegação", "a coluna de conteúdo príncipal"). Este artigo explora como planejar uma estrutura básica de website, e escrever o HTML para representar essa estrutura.

+ + + + + + + + + + + + +
Pre-requisitos: +

Familiaridade básica com HTML, como mostrado em Iniciando com HTML. Formatação de texto HTML, como mostrado em Fundamentos do texto em HTML. O funcionamento de hiperlinks, como visto em Criando hyperlinks.

+
Objetivo: +

Aprenda a estruturar seu documento usando tags semânticas e como elaborar a estrutura de um site simples.

+
+ +

Seções básicas de um documento

+ +

As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:

+ +
+
cabeçalho (header)
+
+

Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É aí que as principais informações comuns sobre um site geralmente ficam de uma página para outra.

+
+
barra de navegação
+
+

Links para as principais seções do site; geralmente representado por botões de menu, links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente em seu site levará a usuários confusos e frustrados. Muitos web designers consideram a barra de navegação parte do cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, já que os leitores de tela podem ler melhor os dois recursos se estiverem separados.

+
+
conteúdo principal
+
+

Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da Web, por exemplo, o vídeo que você deseja assistir ou a história principal que você está lendo ou o mapa que deseja visualizar ou as manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de página para página!

+
+
barra lateral (sidebar)
+
+

Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é contextual ao conteúdo principal (por exemplo, em uma página de um artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há também casos em que você encontrará alguns elementos recorrentes como um sistema de navegação secundário.

+
+
rodapé (footer)
+
+

Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um lugar para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. O rodapé também é usado às vezes para fins de {{Glossary ("SEO")}}, fornecendo links para acesso rápido a conteúdo popular.  Um "site típico" poderia ser colocado assim:

+
+
+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

HTML para estruturar conteúdo

+ +

O exemplo simples mostrado acima não é bonito, mas é perfeitamente aceitável para ilustrar um exemplo típico de layout de website. Alguns sites têm mais colunas, algumas são bem mais complexas, mas você tem a ideia. Com o CSS certo, você poderia usar praticamente todos os elementos para agrupar as diferentes seções e fazer com que parecesse como você queria, mas como discutido anteriormente, precisamos respeitar a semântica e usar o elemento certo para o trabalho certo.

+ +

Isso ocorre porque os visuais não contam toda a história. Usamos cor e tamanho de fonte para chamar a atenção dos usuários para as partes mais úteis do conteúdo, como o menu de navegação e links relacionados, mas sobre pessoas com deficiência visual, por exemplo, que podem não encontrar conceitos como "rosa" e "grande". fonte "muito útil?

+ +
+

Nota: as pessoas daltônicas representam cerca de 4% da população mundial ou, em outras palavras, aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicas. Cegos e deficientes visuais representam cerca de 4-5% da população mundial (em 2012 havia 285 milhões de pessoas no mundo, enquanto a população total era de cerca de 7 bilhões).

+
+ +

Em seu código HTML, você pode marcar seções de conteúdo com base em sua funcionalidade. Você pode usar elementos que representam as seções de conteúdo descritas acima sem ambigüidade, e tecnologias assistivas, como leitores de tela, podem reconhecer esses elementos e ajudar com tarefas como "localizar a navegação principal". "ou" encontre o conteúdo principal. " Como mencionamos anteriormente no curso, há um número de consequências de não usar a estrutura de elemento e semâtica certas para o trabalho certo.

+ +

Para implementar essa marcação semântica, o HTML fornece tags dedicadas que você pode usar para representar essas seções, por exemplo:

+ + + +

Aprendizagem ativa: explorando o código para o nosso exemplo

+ +
+
+
+

Nosso exemplo visto acima é representado pelo seguinte código (você também pode encontrar o exemplo em nosso repositório GitHub). Gostaríamos que você olhasse o exemplo acima e, em seguida, examine a listagem abaixo para ver quais partes compõem a seção do visual. 

+
+
+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em versões antigas do Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Esse é o conteúdo principal da nossa página -->
+    <main>
+
+      <!-- Contém um artigo -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Reserve um tempo para examinar o código e entendê-lo - os comentários dentro do código também devem ajudá-lo a entendê-lo. Não estamos pedindo que você faça muito mais neste artigo, porque a chave para entender o layout do documento é escrever uma estrutura HTML sólida e, em seguida, defini-la com CSS. Nós vamos aguardar isso até que você comece a estudar o CSS layout como parte do tópico do estudo de CSS.

+ +

Elementos de layout do HTML em mais detalhes

+ +

É bom entender o significado geral de todos os elementos de seção do HTML em detalhes - isso é algo em que você trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento web. Você pode encontrar muitos detalhes lendo o nosso Elementos HTML. Para agora, estes são as principais definições que você deve tentar entender:

+ + + +

Elementos de layout não-semânticos

+ +

Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo {{htmlattrxref('class')}} adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados.

+ +

{{HTMLElement("span")}} é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo:

+ +
<p>O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para ajudá-lo
+enquanto ele cambaleando pela porta <span class="editor-note">[Nota do editor: Neste ponto da peça, as luzes devem estar baixas]</span>.</p>
+ +

Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não é suposto ter um significado semântico extra. Para usuários observador, talvez o CSS fosse usado para distanciar a nota um pouco do texto principal.

+ +

{{HTMLElement("div")}} é um elemento não semântico no nível de bloco, que você deve usar apenas se não conseguir pensar em um elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a qualquer momento durante o seu tempo em um site de comércio eletrônico:

+ +
<div class="carrinho-de-compras">
+  <h2>Carrinho de compras</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Brincos de prata</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Brincos de prata">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Preço total: $237.89</p>
+</div>
+ +

Este não é realmente um <aside>, pois não está necessariamente relacionado ao conteúdo principal da página (você deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de uma <section>, pois não faz parte do conteúdo principal da página. Portanto, um <div> é bom neste caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a encontrá-lo.

+ +
+

Aviso: Divs são tão convenientes de usar que é fácil usá-los demais. Como eles não carregam valor semântico, eles apenas confundem seu código HTML. Tome cuidado para usá-los somente quando não houver uma solução semântica melhor e tente reduzir ao mínimo o uso deles, caso contrário, será difícil atualizar e manter seus documentos.

+
+ +

Quebras de linha e regras horizontais

+ +

Dois elementos que você ocasionalmente vai usar e desejerá conhecer são {{htmlelement("br")}} e {{htmlelement("hr")}}:

+ +

<br> cria uma quebra de linha em um parágrafo; é a única maneira de forçar uma estrutura rígida em uma situação em que você deseja uma série de linhas curtas fixas, como em um endereço postal ou um poema. Por exemplo:

+ +
<p>Era uma vez um homem chamado O'Dell<br>
+Que adorava escrever HTML<br>
+Mas sua estrutura era ruim, sua semântica era triste<br>
+e sua marcação não leu muito bem.</p>
+ +

Sem os elementos <br>, o parágrafo seria apenas renderizado em uma longa linha (como dissemos anteriormente no curso, o HTML ignora a maioria dos espaços em branco); com elementos <br> no código, a marcação é renderizada assim

+ +

Era uma vez um homem chamado O'Dell
+ Que adorava escrever HTML
+ Mas sua estrutura era ruim, sua semântica era triste
+ e sua marcação não leu muito bem.

+ +

Elementos <hr> criam uma regra horizontal no documento que indica uma alteração temática no texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha horizontal. Como um exemplo:

+ +
<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p>
+<hr>
+<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p>
+ +

Seria renderizado assim:

+ +

Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.

+ +
+

Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.

+ +

Planejando um simples website

+ +

Depois de planejar o conteúdo de uma página da Web simples, o próximo passo lógico é tentar descobrir qual conteúdo você deseja colocar em um site inteiro, quais páginas você precisa e como elas devem ser organizadas e vinculadas umas às outras. para a melhor experiência de usuário possível. Isso é chamado {{glossary("Information architecture")}}. Em um site grande e complexo, é possível planejar muito esse processo, mas para um site simples de poucas páginas, isso pode ser bastante simples e divertido!

+ +
    +
  1. Lembre-se de que você terá alguns elementos comuns à maioria das páginas (se não todas), como o menu de navegação e o conteúdo do rodapé. Se seu site é para uma empresa, por exemplo, é uma boa ideia ter suas informações de contato disponíveis no rodapé de cada página. Anote o que você deseja que seja comum a todas as páginas.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Em seguida, desenhe um esboço de como a estrutura de cada página deve parecer (pode parecer com nosso site simples acima). Observe o que cada bloco será.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Agora, faça um brainstorm de todos os outros conteúdos (comuns a todas as páginas) que você deseja ter no seu site - escreva uma grande lista.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Em seguida, tente classificar todos esses itens de conteúdo em grupos, para ter uma idéia de quais partes podem viver juntas em páginas diferentes. Isso é muito semelhante a uma técnica chamada {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Agora, tente esboçar um mapa do site aproximado - faça um balão para cada página do seu site e desenhe linhas para mostrar o fluxo de trabalho típico entre as páginas. A página inicial provavelmente estará no centro e terá um link para a maioria, senão todas as outras; a maioria das páginas em um site pequeno deve estar disponível na navegação principal, embora haja exceções. Você também pode incluir notas sobre como as coisas podem ser apresentadas.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Aprendizado ativo: crie seu próprio mapa do site

+ +

Tente realizar o exercício acima para um site de sua própria criação. Sobre o que você gostaria de criar um site?

+ +
+

Nota: Salve seu trabalho em algum lugar; você pode precisar mais tarde.

+
+ +

Resumo

+ +

Nesse ponto, você deve ter uma idéia melhor sobre como estruturar uma página / site. No último artigo deste módulo, estudaremos como depurar HTML.

+ +

Ver também

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/html/introduction_to_html/getting_started/index.html b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..ed79c15034 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,755 @@ +--- +title: Iniciando com HTML +slug: Aprender/HTML/Introducao_ao_HTML/Getting_started +tags: + - Codificação de Scripts + - Comentário + - Elemento + - Guía + - HTML + - Iniciante + - atributo + - espaço em branco + - referência de entidade +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!

+ + + + + + + + + + + + +
Pré-requisitos:Básico de informática, software básico instalado e conhecimento básico de como trabalhar com arquivos.
Objetivos:Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.
+ +

O que é HTML?

+ +

{{glossary("HTML")}} (HyperText Markup Language) não é uma linguagem de programação, é uma linguagem de marcação utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de {{glossary("Element", "elementos")}} que você usa para anexar, envolver ou marcar diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das {{glossary("Tag", "tags")}} pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:

+ +
Meu gato é muito mal-humorado.
+ +

 Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo({{htmlelement("p")}}):

+ +
<p>Meu gato é muito mal-humorado.</p>
+ +

Anatomia de um elemento HTML

+ +

Vamos explorar nosso elemento parágrafo um pouco mais:

+ +

+ +

As partes principais do elemento são:

+ +
    +
  1. Tag de abertura: Consiste no nome do elemento ( neste caso: p ), envolvido entre parênteses angulares de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.
    2. +
  2.  Tag de fechamento:  É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.
    3. +
  3. O conteúdo:  Este é o conteúdo do elemento, que neste caso é somente texto.
    4. +
  4. O elemento: A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.
    5. +
+ +

Aprendizado ativo: criando seu primeiro elemento HTML

+ +

Edite a linha abaixo na área Entrada colocando-a entre as tags <em> e </em> (adicione o <em> antes para abrir o elemento, e </em> depois, para fechar o elemento). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área Saída.

+ +

Caso você cometa um erro, você pode usar o botão Resetar para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão Mostrar solução para visualizar a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Aninhando elementos

+ +

Elementos podem ser inseridos dentro de outros elementos — isto é chamado de  aninhamento. Se nós quisermos dizer que nosso gato é muito mal-humorado, nós poderemos envolver a palavra "muito" com o elemento {{htmlelement("strong")}},  que significa enfatizar fortemente a palavra:

+ +
<p>Meu gato é <strong>muito</strong> mal-humorado.</p>
+ +

No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento p primeiro, e então o elemento strong, portanto temos que fechar o elemento strong primeiro, depois o p. O código a seguir está errado:

+ +
<p>Meu gato é <strong>muito mal-humorado.</p></strong>
+ +

Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!

+ +

Elementos em bloco versus elementos inline

+ +

Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.

+ + + +

Veja o seguinte exemplo:

+ +
<em>primeiro</em><em>segundo</em><em>terceiro</em>
+
+<p>quarto</p><p>quinto</p><p>sexto</p>
+
+ +

O elemento {{htmlelement("em")}} é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O {{htmlelement("p")}}, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à estilização CSS padrão que o browser aplica aos parágrafos).

+ +

{{ EmbedLiveSample('Elementos_em_bloco_versus_elementos_inline', 700, 200, "", "") }}

+ +
+

Nota: o HTML5 redefiniu as categorias de elemento em HTML5: veja Categorias de conteúdo de elementos. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.

+
+ +
+

Nota: Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os tipos de caixas CSS com os mesmos nomes. Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi evitar essa confusão bastante comum.  

+
+ +
+

Nota: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja elementos em bloco e elementos inline.

+
+ +

Elementos vazios

+ +

Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento {{htmlelement("img")}} insere uma imagem em uma página na posição em que ele é incluído:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Isto exibirá em sua página:

+ +

{{ EmbedLiveSample('Elementos_vazios', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Elementos vazios são também chamados de void elements.

+
+ +

Atributos

+ +

Elementos também podem conter atributos, que se apresentam da seguinte forma:

+ +

&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>

+ +

Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo class permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.

+ +

Um atributo deve conter:

+ +
    +
  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
    2. +
  2. O nome do atributo, seguido por um sinal de igual.
    3. +
  3. Um valor de atributo, com aspas de abertura e fechamento em volta dele.
    4. +
+ +

Aprendizado ativo: Adicionando atributos a um elemento

+ +

Outro exemplo de um elemento é {{htmlelement("a")}} — isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link. Isso pode ter vários atributos, mas o mais comuns são os seguintes:

+ + + +

Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.

+ +
    +
  1. Primeiro, adicione o elemento <a>.
    2. +
  2. Segundo, adicione o atributo href e o atributo title.
    3. +
  3. Por último, especifique o atributo target para abrir o link em uma nova aba.
    4. +
+ +

Você poderá ver as atualizações das alterações ao vivo na área Saída. Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo title e, quando clicado, navega para o endereço da web no atributo href. Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.

+ +

Caso você cometa um erro, você poderá desfazê-lo usando o botão Resetar. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Atributos  boleanos

+ +

Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.

+ +
<input type="text" disabled="disabled">
+ +

De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):

+ +
<!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada -->
+<input type="text" disabled>
+
+<!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled -->
+<input type="text">
+
+ +

Ambos resultarão em uma Saída da seguinte forma:

+ +

{{ EmbedLiveSample('Atributos_boleanos', 700, 100) }}

+ +

Omitindo as aspas dos valores do atributo

+ +

Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo href, da seguinte forma:

+ +
<a href=https://www.mozilla.org/>site favorito</a>
+ +

No entanto, assim que adicionamos o atributo title neste elemento, a marcação resultará em erro:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>site favorito</a>
+ +

Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo title trata-se, na verdade, de três atributos: o atributo title com o valor "The", e dois atributos boleanos, Mozilla e homepage. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!

+ +

{{ EmbedLiveSample('Omitindo_as_aspas_dos_valores_do_atributo', 700, 100) }}

+ +

Nossa recomendação é sempre incluir as aspas nos valores dos atributos — isto evita inúmeros problemas, além de resultar em um código mais legível.

+ +

Aspas simples ou duplas?

+ +

Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:

+ +
<a href="http://www.example.com">Um link para o exemplo.</a>
+
+<a href='http://www.example.com'>Um link para o exemplo.</a>
+ +

Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!

+ +
<a href="http://www.exemplo.com'>Um link para o exemplo.</a>
+ +

Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: 

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. Por exemplo, isso irá quebrar:

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

Então você precisa fazer isso:

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

Anatomia de um documento HTML

+ +

Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Neste código nós temos:

+ +
    +
  1. <!DOCTYPE html>: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente. <! DOCTYPE html> é a menor cadeia de caracteres que conta como um doctype válido; é tudo o que você realmente precisa saber.
    2. +
  2. <html></html>: O elemento <html> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.
    3. +
  3. <head></head>: O elemento <head> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca,  o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.
    4. +
  4. <meta charset="utf-8">: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.
    5. +
  5. <title></title>: O elemento <title>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.
    6. +
  6. <body></body>: O elemento <body> contém todo o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.
    7. +
+ +

Aprendizado ativo: Adicionando alguns recursos ao documento HTML

+ +

Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:

+ +
    +
  1. Copiar o exemplo de página HTML mostrada acima.
    2. +
  2. Criar um novo documento em seu editor de texto.
    3. +
  3. Colar o código no novo arquivo de texto.
    4. +
  4. Salvar o arquivo com o nome index.html.
    5. +
+ +
+

Nota: Você também pode encontrar o template básico de HTML no MDN Learning Area Github repo.

+
+ +

Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:

+ +

A simple HTML page that says This is my pageNeste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <body> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:

+ + + +

Caso você cometa um erro, você poderá desfazê-lo usando o botão Resetar. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Espaços em branco no HTML

+ +

Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.

+ +

Referências de entidades: incluindo caracteres especiais no HTML

+ +

No HTML, os caracteres <, >,",' e o & são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.

+ +

Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&) e finalizada por um ponto e vírgula (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractere literalReferência de caractere equivalente
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:

+ +
<p>Em HTML, você define um parágrafo usando o elemento <p>.</p>
+
+<p>Em HTML, você define um parágrafo usando o elemento &lt;p&gt;.</p>
+ +

Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de <p> está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.

+ +

{{EmbedLiveSample('Referências_de_entidades_incluindo_caracteres_especiais_no_HTML', 7700, 200, "", "", "hide-codepen-jsfiddle")}}

+ +
+

Nota: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: List of XML and HTML character entity references. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.

+
+ +

Comentários no HTML

+ +

Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez — ou se você entregar seu código para outra pessoa trabalhar.

+ +

Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais <!-- e -->, por exemplo:

+ +
<p>Eu não estou dentro de um comentário</p>
+
+<!-- <p>Eu estou!</p> -->
+ +

Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.

+ +

{{ EmbedLiveSample('Comentários_no_HTML', 700, 100) }}

+ +

Sumário

+ +

Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!

+ +
+

Nota: Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou CSS. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.

+
+ +

Veja também

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..47ca918b68 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,955 @@ +--- +title: Fundamentos do texto em HTML +slug: Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML +tags: + - Aprender + - Guía + - HTML + - Iniciante + - Introdução + - Texto + - cabeçalho + - parágrafo + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como {{glossary("semantics", "semântica")}}), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como {{glossary("HTML")}} pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.

+ + + + + + + + + + + + +
Pré-requisitos:Familiaridade básica em HTML, tal como coberto  Iniciando com o HTML.
Objetivo:Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado — incluindo parágrafos, títulos, listas, ênfase e citações.
+ +

O básico: Cabeçalhos e Parágrafos

+ +

O texto mais estruturado é composto por títulos e parágrafos,esteja você lendo uma história, um jornal, um livro da faculdade, uma revista, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.

+ +

Em HTML, cada parágrafo deve ser envolvido em um elemento {{htmlelement("p")}} , assim:

+ +
<p>Eu sou um parágrafo, oh sim, eu sou.</p>
+ +

Cada título deve ser envolvido em um elemento de título:

+ +
<h1>Eu sou o título da história.</h1>
+ +

Existem seis elementos de título — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} e {{htmlelement("h6")}} . Cada elemento representa um nível diferente de conteúdo no documento; <h1> representa o título principal, <h2> representa subtítulos, <h3> representa sub-subtítulos, e assim por diante.

+ +

Implementando hierarquia estrutural

+ +

Como exemplo, em uma história, <h1> representaria o título da história, <h2> representaria o título de cada capítulo e <h3> representaria sub-seções de cada capítulo, e assim por diante.

+ +
<h1>O furo esmagador</h1>
+
+<p>Por Chris Mills</p>
+
+<h2>Capítulo 1: A noite escura</h2>
+
+<p>Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão ...</p>
+
+<h2>Capítulo 2: O eterno silêncio</h2>
+
+<p>Nosso protagonista não podia ver mais que um relance da figura sombria ...</p>
+
+<h3>O espectro fala</h3>
+
+<p>Várias horas se passaram, quando, de repente, o espectro ficou em pé e exclamou: "Por favor, tenha piedade da minha alma!"</p>
+ +

Depende realmente de você, o quê, exatamente, representam os elementos envolvidos, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:

+ + + +

Por que precisamos de estrutura?

+ +

Para responder a esta pergunta, dê uma olhada em text-start.html — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).

+ +

No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:

+ + + +

Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.

+ +

Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo

+ +

Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo Entrada para que ele apareça como um título e dois parágrafos no campo Saída.

+ +

Se você cometer um erro, você sempre pode reiniciar usando o botão Resetar. Se você ficar preso, pressione o botão Mostrar solução para ver a resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Por que precisamos de semântica?

+ +

A semântica estã em todos os lugares — contamos com experiência anterior para nos dizer qual é a função dos objetos do dia a dia. Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "pare" e um semáforo verde signifique "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).

+ +

Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento  {{htmlelement("h1")}} também é um elemento semântico, que dá o texto que envolve a representação (ou significado) de "um título de nível superior em sua página".

+ +
<h1>Este é um título de nível superior</h1>
+ +

Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).

+ +

Por outro lado, você pode fazer com que qualquer elemento se pareça um título de nível superior. Considere o seguinte:

+ +
<span style="font-size: 32px; margin: 21px 0;">Este é um título de nível superior?</span>
+ +

Este é um elemento {{htmlelement("span")}}. Não tem semântica. Você usa-o para agrupar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você saberá mais sobre isto mais tarde, no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.

+ +

Listas

+ +

Agora voltemos nossa atenção para as listas. As listas estão em toda parte na vida — de sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção.

+ +

Não ordenada

+ +

As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa — vamos pegar uma lista de compras como um exemplo.

+ +
leite
+ovos
+pão
+homus
+ +

Toda lista desordenada começa com um {{htmlelement("ul")}} — isso envolve todos os itens da lista:

+ +
<ul>
+leite
+ovos
+pão
+homus
+</ul>
+ +

O último passo é envolver cada item da lista em um elemento {{htmlelement("li")}} (elemento da lista):

+ +
<ul>
+  <li>leite</li>
+  <li>ovos</li>
+  <li>pão</li>
+  <li>homus</li>
+</ul>
+ +

Aprendizagem ativa: Marcando uma lista desordenada

+ +

Tente editar a amostra, ao vivo, abaixo para criar sua própria lista não ordenada HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Ordenada

+ +

As listas ordenadas são listas em que a ordem dos itens é importante — vamos seguir um conjunto de instruções como exemplo:

+ +
Dirija até o final da estrada
+Vire à direita
+Vá em frente nas duas primeiras rotatórias
+Vire à esquerda na terceira rotatória
+A escola fica à sua direita, a 300 metros da estrada
+ +

A estrutura de marcação é a mesma das listas não ordenadas, exceto que você deve conter os itens da lista em um elemento {{htmlelement("ol")}}, em vez de <ul>:

+ +
<ol>
+  <li>Dirija até o final da estrada</li>
+  <li>Vire à direita</li>
+  <li>Vá em frente nas duas primeiras rotatórias</li>
+  <li>Vire à esquerda na terceira rotatória</li>
+  <li>A escola fica à sua direita, a 300 metros da estrada</li>
+</ol>
+ +

Aprendizagem ativa: Marcando uma lista ordenada

+ +

Tente editar a amostra ao vivo abaixo, para criar sua própria lista ordenada por HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizagem ativa: marcando nossa página de receita

+ +

Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de text-start.html e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo, localmente, provavelmente será melhor, pois você conseguirá salvar o trabalho que está fazendo. Enquanto que, se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Se você ficar preso, você sempre pode pressionar o botão Mostrar solução, ou confira nosso exemplo de text-complete.html em nosso repositório Github.

+ +

Aninhando listas

+ +

Não há problema em aninhar uma lista dentro de outra. Você pode ter algumas sub-listas abaixo de uma lista de nível superior. Vamos pegar a segunda lista do nosso exemplo de receita:

+ +
<ol>
+  <li>Retire a pele do alho e pique</li>
+  <li>Retire todas as sementes e caule da pimenta e pique</li>
+  <li>Adicione todos os ingredientes em um processador de alimentos</li>
+  <li>Processar todos os ingredientes em uma pasta</li>
+  <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>
+  <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
+</ol>
+ +

Uma vez que as duas últimas listas estão intimamente relacionadas com a anterior (elas leem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da quarta lista. Isso pareceria assim:

+ +

Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual. Isso seria assim:

+ +
<ol>
+  <li>Retire a pele do alho e pique</li>
+   <li>Retire todas as sementes e caule da pimenta e pique</li>
+   <li>Adicione todos os ingredientes em um processador de alimentos</li>
+   <li>Processar todos os ingredientes em uma pasta
+     <ul>
+       <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>
+       <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
+    </ul>
+  </li>
+</ol>
+ +

Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.

+ +

Ênfase e importância

+ +

Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e, nesta seção, vamos ver alguns dos mais comuns.

+ +

Ênfase

+ +

Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.

+ +

Estou feliz que você não chegou atrasado.

+ +

Estou feliz que você não chegou atrasado.

+ +

A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.

+ +

Em HTML usamos o elemento de ênfase {{htmlelement("em")}} para marcar tais instâncias. Além de tornar o documento mais interessante de ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e alguns CSS, ou talvez um elemento {{htmlelement("i")}} (veja abaixo).

+ +
<p>Eu estou <em>feliz</em> você não está <em>atrasado</em>.</p>
+ +

Importância

+ +

Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em negrito na linguagem escrita. Por exemplo:

+ +

Este líquido é altamente tóxico.

+ +

Eu estou contando com você. Não se atrase!

+ +

Em HTML usamos o elemento {{htmlelement("strong")}} (importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo negrito. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e algum CSS, ou talvez um {{htmlelement("b")}} (veja abaixo).

+ +
<p>Este líquido é <strong>altamente tóxico</strong>.</p>
+
+<p>Estou contando com você. <strong>Não</strong> se atrase!</p>
+ +

Você pode aninhar importância e ênfase entre si, se desejar:

+ +
<p>Este líquido é <strong>altamente tóxico</strong> -
+Se você beber, <strong>você pode <em>morrer</em></strong>.</p>
+ +

Aprendizagem ativa: Vamos ser importantes!

+ +

Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Itálico, negrito, sublinhado...

+ +

Os elementos que discutimos até agora têm clara semântica associada. A situação com {{htmlelement("b")}}, {{htmlelement("i")}}, e com {{htmlelement("u")}} é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era pouco suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como elementos de apresentação e não devem mais ser usados, porque, como já vimos, a semântica é importante para a acessibilidade, SEO, etc.

+ +

O HTML5 redefiniu <b>, <i> e <u>  com novas funções semânticas um pouco confusas.

+ +

Aqui está a melhor regra geral: provavelmente é apropriado usar  <b>, <i> ou <u>  para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.

+ + + +
+

Um aviso amável sobre o sublinhado: as pessoas associam fortemente o sublinhado com hiperlinks. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <u> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.

+
+ +
<!-- nomes científicos -->
+<p>
+  O Colibri Ruby-throated (<i>Archilochus colubris</i>)
+  é o colibri mais comum do Leste da América do Norte.
+</p>
+
+<!-- palavras estrangeiras -->
+<p>
+  O menu era um mar de palavras exóticas como <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> e <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- um erro de ortografia conhecido -->
+<p>
+  Algum dia eu vou aprender como <u style="text-decoration-line: underline; text-decoration-style: wavy;">jogar</u> melhor.
+</p>
+
+<!-- Destaque as palavras-chave em um conjunto de instruções -->
+<ol>
+  <li>
+    <b>Fatie</b>dois pedaços de pão do pão.
+  </li>
+  <li>
+    <b>Colocar</b> uma fatia de tomate e uma folha de
+     alface entre as fatias de pão.
+  </li>
+</ol>
+ +

Teste suas habilidades!

+ +

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir — consulte Teste suas habilidades: noções básicas de texto HTML.

+ +

Resumo

+ +

Por enquanto é isso! Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área. Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de Formatação avançada de texto, mais adiante neste curso. No próximo artigo, veremos detalhadamente como criar links, possivelmente o elemento mais importante na Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/learn/html/introduction_to_html/index.html b/files/pt-br/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..f0e69d61d4 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/index.html @@ -0,0 +1,69 @@ +--- +title: Introdução ao HTML +slug: Aprender/HTML/Introducao_ao_HTML +tags: + - Codificação de Script + - Estrutura + - HTML + - Introdução ao HTML + - Links + - Página de destino + - Texto + - cabeçalho + - semántica +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Em sua essência, {{glossary("HTML")}} é uma linguagem bastante simples composta de elementos, que podem ser aplicados a pedaços de texto para dar-lhes significado diferente em um documento (é um parágrafo? é uma lista de seleção? é parte de uma tabela?), estrutura um documento em seções lógicas (Possui um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorpora conteúdo como imagens e vídeos em uma página. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML.

+ +

Pré-requisitos

+ +

Antes de iniciar este módulo, você não precisa de nenhum conhecimento prévio sobre HTML, mas deve ter pelo menos uma familiaridade básica em utilizar computadores e utilizar a web passivamente (por exemplo, apenas navegando e consumindo conteúdo). Você deve ter um ambiente de trabalho básico configurado (como detalhado em Instalando os programas básicos) e entender como criar e gerenciar arquivos (como detalhado em Lidando com arquivos). Ambos são partes do nosso módulo completo para iniciantes indrodução à web.

+ +
+

Nota: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não permita a criação de seus próprios arquivos, você pode testar (a maior parte) dos exemplos de códigos em um programa de codificação online como JSBin ou Glitch.

+
+ +

Guias

+ +

Este módulo contém os seguintes artigos, que te levarão por toda teoria básica do HTML e fornecerão muitas oportunidades para você testar algumas habilidades.

+ +
+
Iniciando com o HTML
+
Abrange todo o básico do HTML, para você iniciar - nós definimos elementos, atributos e outros termos importantes, e mostramos onde eles se encaixam na linguagem. Também mostramos como uma página HTML típica e um elemento HTML é estruturado, e explicamos outros recursos básicos importantes da linguagem. Ao longo do caminho, nós brincaremos com algum HTML, para fazer você se interessar!
+
O que está no cabeçalho? Metadados no HTML
+
O {{glossary("Head", "cabeçalho")}} de um documento HTML é a parte que não é mostrada no navegador web quando a página é carregada. Ele contém informações como o {{htmlelement("title")}} da página, links para {{glossary("CSS")}} (se você quiser estilizar seu conteúdo HTML com CSS), links para favicons personalizados e metadados (que são dados sobre o HTML, tais como quem o escreveu e palavras-chaves importantes que descrevem o documento).
+
Fundamentos do texto HTML
+
Uma das principais funções do HTML é dar significado ao texto (também conhecido como {{glossary("Semantics", "semântica")}}), para que o navegador saiba como exibi-lo corretamente. Este artigo analisa como usar HTML para dividir um bloco de texto em uma estrutura de títulos e parágrafos, adicionar ênfase/importância nas palavras, criar listas e muito mais.
+
Criando hiperlinks
+
Os hiperlinks são realmente importantes — eles são o que faz da web o que ela é. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas para links.
+
Formatação de texto avançada
+
Existem muitos outros elementos em HTML para formatar o texto, que não apresentamos no artigo sobre os Fundamentos do texto em HTML. Os elementos aqui são menos conhecidos, mas ainda úteis para se conhecer. Neste artigo, você aprenderá sobre marcação de citações, listas de descrições, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contatos e muito mais.
+
Estrutura dos documentos e do site
+
Além de definir partes individuais de sua página (como "um parágrafo" ou "uma imagem"), o HTML também é usado para definir as áreas do seu site (como "o cabeçalho", "o menu de navegação" ou "a coluna de conteúdo principal"). Este artigo analisa como planejar uma estutura básica de site e como escrever o HTML para representar esta estrutura.
+
Depuração HTML
+
Escrever HTML é tranquilo, mas e se algo der errado, e você não conseguir descobrir onde o erro está no código? Este artigo irá apresentar algumas ferramentas que podem ajudar.
+
+ +

Avaliações

+ +

As avaliações a seguir testarão sua compreensão dos princípios básicos de HTML abordados nos guias acima.

+ +
+
Marcando uma carta
+
Todos aprendemos a escrever uma carta mais cedo ou mais tarde; também é um exemplo útil para testar habilidades de formatação de texto. Nesta avaliação, você receberá uma carta para marcar.
+
Estruturando a página de conteúdo
+
Essa avaliação testa sua capacidade de utilizar HTML para estruturar uma página simples de conteúdo, contendo um cabeçalho, um rodapé, um menu de navegação, o conteúdo principal e uma barra lateral.
+
+ +

Veja também

+ +
+
Noções básica sobre alfabetização na web 1 (em inglês)
+
Um excelente curso da Fundação Mozilla que explora e testa muitas das habilidades discutidas no Módulo Introdução ao HTML. Os estudantes se familiarizam com a leitura, a redação e a participação na web neste módulo de seis partes. Descubra as bases da web através da produção e da colaboração.
+
+ +
+
+
diff --git a/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html new file mode 100644 index 0000000000..c6d49c4015 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html @@ -0,0 +1,72 @@ +--- +title: 'Teste suas habilidades: Noções básicas de texto HTML' +slug: 'Aprender/HTML/Introducao_ao_HTML/Test_your_skills:_HTML_text_basics' +tags: + - HTML + - Iniciante + - Teste suas habilidades + - Texto + - aprendizado +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' +--- +
{{learnsidebar}}
+ +

O objetivo deste teste de habilidades é avaliar se você entendeu nosso artigo Fundamentos do texto em HTML.

+ +
+

Nota: Você pode testar suas soluções nos editores interativos abaixo, entretanto pode ser de ajuda fazer download do código e usar uma ferramenta online como CodePen, jsFiddle, ou Glitch para trabalhar nas tarefas.
+
+ Se você ficar travado em alguma tarefa, peça-nos ajuda  — veja a seção{{anch("Assessment or further help")}} no final desta página.

+
+ +

Texto básico em HTML 1

+ +

Nesta tarefa queremos que você faça a marcação do HTML fornecido, utilizando a semântica de título e parágrafo. Tente editar a amostra, ao vivo, para alterar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}

+ +
+

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

+
+ +

Texto básico em HTML 2

+ +

Nesta tarefa queremos que você transforme a primeira lista sem marcação em uma lista não ordenada e a segunda em uma lista ordenada.

+ +

Tente editar a amostra, ao vivo, para alterar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}

+ +
+

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

+
+ +

Texto básico em HTML 3

+ +

Nesta tarefa um parágrafo é fornecido e o seu objetivo é usar elementos de ênfase para fazer a marcação apropriada de algumas palavras com forte importância e com ênfase.

+ +

Tente editar a amostra, ao vivo, para alterar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}

+ +
+

Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

+
+ +

Avaliação ou ajuda adicional

+ +

Você pode praticar os exemplos nos Editores Interativos acima.

+ +

Se você gostaria de ter seu trabalho avaliado ou está travado e quer pedir ajuda:

+ +
    +
  1. Coloque seu trabalho em um editor online compartilhável como CodePen, jsFiddle ou Glitch. Você pode escrever o código por si só ou usar os arquivos linkados nas seções acima.
    2. +
  2. Escreva um post pedindo por avaliação e/ou ajuda no Fórum de discussão do MDN na categoria Learning. Seu post deve incluir: +
      +
    • Um título descritivo como "Avaliação desejada para o teste de habilidade Texto básico em HTML 1"
      • +
    • Detalhes sobre o que você já tentou e o que você gostaria que fizéssemos, p. ex. se você está travado e precisa de ajuda ou se deseja uma avaliação.
      • +
    • Um link para o exemplo que você deseja ser avaliado ou ajudado em um editor online compartilhável (como mencionado no passo 1 acima). Essa é uma boa prática para se adquirir - é muito difícil ajudar alguém com um problema no código, se você não consegue ver o código.
      • +
    • Um link para a tarefa atual ou página de avaliação, assim poderemos achar a questão na qual você quer ajuda.
      • +
    +
    3. +
diff --git a/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..66dd155c09 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,284 @@ +--- +title: O que está no cabeçalho? Metadados em HTML +slug: Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML +tags: + - Guía + - HTML + - Iniciante + - head + - lang + - metadados +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}  
+ +

O {{glossary("Head", "head")}} de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Ele contém informações como {{glossary("title")}} , links para {{htmlelement("CSS")}} (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais. Dando-lhe uma boa base para lidar com marcação.

+ + + + + + + + + + + + +
Pré-requisitos: + + + + + + +
Familiaridade básica em HTML, tal como Iniciando com HTML.
+
Objetivo:Aprender sobre o cabeçalho HTML, seu propósito, os itens mais importantes que ele pode conter e que efeito isso pode ter no documento HTML.
+ +

O que há no cabeçalho HTML?

+ +

Vamos rever o simples Documento HTML que abordamos no artigo anterior:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Minha página de teste</title>
+  </head>
+  <body>
+    <p>Essa é minha página</p>
+  </body>
+</html>
+ +

O cabeçalho HTML é o conteúdo do elemento {{htmlelement("head")}} — ao contrário do conteúdo do elemento {{htmlelement("body")}} (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter {{glossary("Metadata", "metadados")}}  sobre o documento. No exemplo seguinte, o cabeçalho é bem simples:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Minha página de teste</title>
+</head>
+ +

Em páginas maiores, o cabeçalho pode ter mais conteúdo. Tente acessar um dos seus sites favoritos e use as ferramentas de desenvolvimento para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.

+ +

Adicionando um título

+ +

Nós já vimos o elemento {{htmlelement("title")}} em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento {{htmlelement("h1")}}, que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!

+ + + +

Aprendizado ativo: observando um exemplo simples

+ +
    +
  1. Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nossa página title-example.html. Para fazer isso: + +
      +
    1. Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.
      2. +
    2. Pressione o botão "Raw" na página do GitHub, que faz com que o código bruto apareça (possivelmente em uma nova guia do navegador). Em seguida, escolha o menu Arquivo do navegador> Salvar página como ... e escolha um local adequado para salvar o arquivo.
      3. +
    +
    2. +
  2. Agora abra o arquivo no seu navegador. Você deve ver algo assim: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Agora deve ser completamente óbvio onde o conteúdo <h1> aparece e onde o conteúdo  <title> aparece!

    +
    3. +
  3. Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.
    4. +
+ +

O conteúdo do elemento <title> também é usado de outras maneiras. Por exemplo, se você tentar favoritar a página, (Favoritos > Adicionar página aos favoritos ou o ícone da estrela na barra de URL no Fireofx), você verá o conteúdo <title> preenchido como o nome sugerido do favorito.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Os conteúdos <title> também são usados nos resultados de pesquisa, conforme você verá abaixo.

+ +

Metadados: o elemento <meta>

+ +

Metadados é dado descreve dados, e HTML possui uma maneira "oficial" de adicionar metadados a um documento — o elemento {{htmlelement("meta")}}. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos <meta>  que podem ser incluídos no <head> da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.

+ +

Especificando a codificação de caracteres do seu documento

+ +

No exemplo que vimos acima, esta linha foi incluída:

+ +
<meta charset="utf-8">
+ +

Este elemento simplesmente especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar.  utf-8 é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana. Isso significa que sua página web poderá lidar com a exibição de qualquer idioma; portanto, é uma boa idéia configurar isso em todas as páginas web que você cria! Por exemplo, sua página poderia lidar com o Inglês e Japonês muito bem:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se você definir sua codificação de caracteres para  ISO-8859-1, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +
+

Nota: Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do utf-8 em sua página, para evitar problemas em outros navegadores.

+
+ +

Aprendizagem ativa: Experimento com a codificação de caracteres

+ +

Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em <title> (a página  title-example.html ), tente alterar o valor do meta charset para ISO-8859-1 e adicione o Japonês à sua página . Este é o código que usamos:

+ +
<p>Exemplo Japonês:ご飯が熱い</p>
+ +

Adicionando um autor e descrição

+ +

Muitos elementos <meta> incluem atributos de name e  content:

+ + + +

Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="A Área de Aprendizagem do MDN tem como objetivo
+proporcionar iniciantes em Web com tudo o que eles precisam saber
+para começar a desenvolver sites e aplicativos.">
+ +

Especificar um autor é útil de muitas maneiras: é útil para poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo que você gostaria de contacta-la. Alguns sistemas de gerenciamento de conteúdo possuem ferramentas para extrair automaticamente as informações do autor da página e disponibilizá-las para seus propósitos.

+ +

Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas Search Engine Optimization ou {{glossary("SEO")}}.

+ +

Aprendizagem ativa: Uso da descrição nos motores de busca

+ +

A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso

+ +
    +
  1. Vá para a página inicial da Mozilla Developer Network.
    2. +
  2. Veja a fonte da página (botão direito do mouse/Ctrl + clique na página, escolha Ver código-fonte da página no menu de contexto).
    3. +
  3. Encontre a meta tag de descrição. Isso parecerá assim: + 
    <meta name="description" content="A Mozilla Developer Network (MDN) fornece
+informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos
+Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
    +
    4. +
  4. Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição <meta> e <title> elemento usado no resultado da pesquisa — definitivamente vale a pena ter! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Nota: No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN — estes são chamados de sitelinks e são configuráveis nas Ferramentas para webmasters do Google — uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.

+
+ +
+

Nota: Muitos recursos <meta> simplesmente não são mais usados. Por exemplo, a palavra-chave <meta> elemento (<meta name="keywords" content="preencha, suas, palavras-chave, aqui">) — que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa — são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, influenciando os resultados.

+
+ +

Outros tipos de metadados

+ +

Ao navegar pela web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer a determinados sites (como sites de redes sociais) informações específicas que eles podem usar.

+ +

Por exemplo, Open Graph Data é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="A Mozilla Developer Network (MDN) fornece
+informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web
+e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Adicionando ícones personalizados ao seu site

+ +

Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos. O mais usado é o favicon (abreviação de "favorites icon", referindo-se ao seu uso nas listas "favoritos" nos navegadores).

+ +

O humilde favicon existe há muitos anos. É o primeiro ícone desse tipo: um ícone 16 pixels quadrados usado em vários lugares. Você pode ver (dependendo do navegador) ícones favoritos exibidos na guia do navegador que contém cada página aberta e ao lado de páginas marcadas no painel de favoritos.

+ +

Um favicon pode ser adicionado à sua página:

+ +
    +
  1. Salvando-o no mesmo diretório que a página de índice do site, salvo no formato .ico (a maioria dos navegadores suportará favicons em formatos mais comuns como .gif ou .png, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)
    2. +
  2. Adicionando a seguinte linha ao HTML <head> para fazer referência a ele: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Aqui está um exemplo de um favicon em um painel de faforitos:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Há muitos outros tipos de ícones para considerar nestes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:

+ +
<!-- iPad de terceira geração com tela retina de alta resolução: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone com tela retina de alta resolução: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- iPad de primeira e segunda geração: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- favicon básico -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Os comentários explicam onde cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.

+ +

Não se preocupe muito com a implementação de todos esses tipos de ícone agora  — este é um recurso bastante avançado, e você não precisará ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.

+ +
+

Nota: Se o seu site usa uma Política de Segurança de Conteúdo (CSP) para aumentar sua segurança, a política se aplica ao favicon. Se você encontrar problemas com o favicon não carregando, verifique se a diretiva img-src do cabeçalho Content-Security-Policy não está impedindo o acesso a ele.

+
+ +

Aplicando CSS e JavaScript ao HTML

+ +

Todos os sites que você usar nos dias atuais empregarão o {{glossary("CSS")}} para torná-los legais e o {{glossary("JavaScript")}}  para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são comumente aplicados a uma página web usando o elemento {{htmlelement("link")}} e o elemento {{htmlelement("script")}} , respectivamente.

+ + + +

Aprendizagem ativa: aplicar CSS e JavaScript a uma página

+ +
    +
  1. Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos  meta-example.html, script.js e style.css e salve-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes e extensões de arquivo corretos.
    2. +
  2. Abra o arquivo HTML em seu navegador e seu editor de texto.
    3. +
  3. Ao seguir as informações fornecidas acima, adicione os elementos {{htmlelement("link")}} e  {{htmlelement("script")}} ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.
    4. +
+ +

Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Nota: Se você ficar preso neste exercício e não conseguir aplicar o CSS/JS, tente verificar nossa página de exemplo css-and-js.html.

+
+ +

Definir o idioma principal do documento

+ +

Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o atributo lang à tag HTML de abertura (como visto no meta-example.html e mostrado abaixo).

+ +
<html lang="pt-BR">
+ +

Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em Francês e Inglês, mas é pronunciado de forma diferente.)

+ +

Você também pode definir seções secundárias do seu documento para serem reconhecidas em diferentes idiomas. Por exemplo, podemos configurar nossa seção do idioma Japonês para ser reconhecida como japonesa, assim:

+ +
<p>Exemplo japonês: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Esses códigos são definidos pelo padrão ISO 639. Você pode encontrar mais sobre eles em Tags de idioma em HTML e XML.

+ +

Resumo

+ +

Isso marca o fim de nossa rápida turnê pelo HTML — há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns você encontrará lá, por enquanto! No próximo artigo, veremos o básico do texto HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..2ebc971f42 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,352 @@ +--- +title: Adicionando vetor gráfico na web +slug: Aprender/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.

+
+ + + + + + + + + + + + +
Prerequisites:You should know the basics of HTML and how to insert an image into your document.
Objective:Learn how to embed an SVG (vector) image into a webpage.
+ +
+

Note: This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.

+
+ +

O que são vetores gráficos?

+ +

Na web, você pode trabalhar com dois tipos de imagem — raster images, and vector images:

+ + + +

To give you an idea of the difference between the two, let's look at an example. You can find this example live on our Github repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star with a  black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.

+ +

The difference becomes apparent when you zoom in the page — the PNG image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color). When it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Note: The images above are actually all PNGs — with the left-hand star in each case representing a raster image, and the right-hand star representing a vector image. Again, go to the vector-versus-raster.html demo for a real example!

+
+ +

Moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image individually.

+ +

What is SVG?

+ +

SVG is an {{glossary("XML")}}-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like {{svgelement("circle")}} and {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

+ +

As a simple example, the following code creates a circle and a rectangle:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

This creates the following output:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

From the example above, you may get the impression that SVG is easy to handcode. Yes, you can handcode simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)

+ +

SVG has some additional advantages besides those described so far:

+ + + +

So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:

+ + + +

Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.

+ +
+

Note: In Inkscape, save your files as Plain SVG to save space. Also, please refer to this article describing how to prepare SVGs for the Web.

+
+ +

Adding SVG to your pages

+ +

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

+ +

The quick way: {{htmlelement("img")}}

+ +

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+ +

Pros

+ + + +

Cons

+ + + +

Troubleshooting and cross-browser support

+ +

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

+ +

If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this article will point you in the right direction.

+ +

How to include SVG code inside your HTML

+ +

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Cons

+ + + + + +

How to embed an SVG with an {{htmlelement("iframe")}}

+ +

You can open SVG images in your browser just like webpages. So embedding an SVG document with an <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

+ +

Here's a quick review:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

This is definitely not the best method to choose:

+ +

Cons

+ + + +

Active Learning: Playing with SVG

+ +

In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the Input section below you'll see that we've already provided you with some samples to get you started. You can also go to the SVG Element Reference, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.

+ +

If you get stuck and can't get your code working, you can always reset it using the Reset button.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.

+ +

In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..4f463148c1 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,368 @@ +--- +title: Imagens no HTML +slug: Aprender/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Guía + - HTML + - Imagens + - alt text + - captions + - figcaption + - figure + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

No início a Web era somente texto, e era tedioso. Felizmente, não demorou muito para que a capacidade de incorporar imagens (e outros tipos de conteúdo mais interessantes) dentro das páginas da web fosse adicionada. Existem outros tipo de mídia para se considerar, mas é lógico começar com o humilde elemento {{htmlelement("img")}}, usado para inserir uma simples imagem em uma página web. Neste artigo, analisaremos como dominar seu uso, incluindo o básico, anotando-o com legendas usando o elemento {{htmlelement("figure")}}, e detalhando como ele se relaciona com imagens de fundo do CSS.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico em informática, Instalando os Programas Básicos, conhecimento básico em lidando com arquivos, familiaridade com fundamentos do HTML (como abordado em Iniciando com HTML.)
Objetivos:Para aprender a incorporar imagens simples em HTML, anote-as com legendas e como as imagens HTML se relacionam às imagens de plano de fundo CSS.
+ +

Como colocamos uma imagem numa página web?

+ +

Para colocar uma única imagem em uma página da web, usamos o elemento {{htmlelement("img")}}. Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — src (às vezes pronunciado como seu título completo, source). O atributo src contém um caminho apontando para a imagem que você deseja incorporar na página, que pode ser uma URL relativa ou absoluta, da mesma maneira que o valores de atributo href no elemento {{htmlelement("a")}}.

+ +
+

Nota: Antes de continuar, você deveria ler Um guia rápido sobre URLs e caminhos para refrescar sua memória sobre URL relativo e absoluto.

+
+ +

Por exemplo, se sua imagem for chamada dinossauro.jpg, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:

+ +
<img src="dinossauro.jpg">
+ +

Se a imagem estivesse em um subdiretório de images, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/{{glossary("SEO")}}), então você a incorporaria da seguinte maneira:

+ +
<img src="images/dinossauro.jpg">
+ +

E assim por diante.

+ +
+

Note: Os mecanismos de pesquisa também leem os nomes dos arquivos de imagem e os contam para o  SEO. Portanto, dê à sua imagem um nome de arquivo descritivo; dinosaur.jpg é melhor que img835.png.

+
+ +

Você pode incorporar a imagem usando seu URL absoluto, por exemplo:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Mas isso é inútil, pois apenas faz o navegador trabalhar mais, pesquisando o endereço IP do servidor DNS novamente, etc. Você quase sempre manterá as imagens do seu site no mesmo servidor que o HTML.

+ +
+

Aviso: A  maioria das imagens tem direitos autorais. Não exiba uma imagem em sua página da web, a menos que:

+ +

1) você é o dono da imagem
+ 2) você recebeu permissão explícita e por escrito do proprietário da imagem, ou
+ 3) você tem ampla prova de que a imagem é, de fato, de domínio público.

+ +


+ Violações de direitos autorais são ilegais e antiéticas. Além disso, nunca aponte seu atributo src para uma imagem hospedada no site de outra pessoa à qual você não tem permissão para vincular. Isso é chamado de "hotlinking". Mais uma vez, roubar a largura de banda de alguém é ilegal. Ele também torna a página mais lenta, deixando você sem controle sobre se a imagem é removida ou substituída por algo embaraçoso.

+
+ +

Nosso código acima nos daria o seguinte resultado:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Nota: Elementos como {{htmlelement("img")}} e {{htmlelement("video")}} às vezes são chamados de elementos substituídos. Isso ocorre porque o conteúdo e o tamanho do elemento são definidos por um recurso externo (como uma imagem ou arquivo de vídeo), não pelo conteúdo do próprio elemento.

+
+ +
+

Nota: Você pode encontrar o exemplo final desta seção running on Github (Veja o source code também.)

+
+ +

Texto alternativo

+ +

O próximo atributo que veremos é alt. Seu valor deve ser uma descrição textual da imagem, para uso em situações em que a imagem não pode ser vista/exibida ou leva muito tempo para renderizar devido a uma conexão lenta à Internet. Por exemplo, nosso código acima pode ser modificado da seguinte maneira:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

A maneira mais fácil de testar seu texto alt é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito dinosooooor.jpg, o navegador não exibiria a imagem, mas exibiria o texto alternativo:

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:

+ + + +

O que exatamente você deve escrever dentro do seu atributo alt? Depende do por que a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:

+ + + +

Essencialmente, a chave é oferecer uma experiência utilizável, mesmo quando as imagens não podem ser vistas. Isso garante que todos os usuários não estejam perdendo nenhum conteúdo. Tente desativar as imagens no seu navegador e veja como as coisas ficam. Você logo perceberá como o texto alternativo é útil se a imagem não puder ser vista.

+ +
+

Nota: Para mais informações, consulte o nosso guia para Textos alternativos.

+
+ +

Largura e altura

+ +

Você pode usar os atributos width e height, para especificar a largura e altura da sua imagem. Você pode encontrar a largura e a altura da sua imagem de várias maneiras. Por exemplo, no Mac, você pode usar Cmd + I  para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:

+ +
<img src="images/dinosaur.jpg"
+     alt="A cabeça e o tronco de um esqueleto de dinossauro;
+          tem uma cabeça grande com dentes longos e afiados"
+     width="400"
+     height="341">
+ +

Isso não resulta em muita diferença para a tela, em circunstâncias normais. Mas se a imagem não estiver sendo exibida, por exemplo, o usuário acabou de navegar para a página e a imagem ainda não foi carregada, você notará que o navegador está deixando um espaço para a imagem aparecer:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.

+ +

No entanto, você não deve alterar o tamanho das suas imagens usando atributos HTML. Se você definir o tamanho da imagem muito grande, terá imagens granuladas, confusas ou muito pequenas e desperdiçando largura de banda ao fazer o download de uma imagem que não atenda às necessidades do usuário. A imagem também pode ficar distorcida, se você não mantiver a proporção de tela. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.

+ +
+

Nota: Se você precisar alterar o tamanho de uma imagem, use CSS então.

+
+ +

Títulos de imagem

+ +

Como nos links, você também pode adicionar o atributo title nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:

+ +
<img src="images/dinosaur.jpg"
+     alt="A cabeça e o tronco de um esqueleto de dinossauro;
+          tem uma cabeça grande com dentes longos e afiados"
+     width="400"
+     height="341"
+     title="Um T-Rex em exibição no Museu da Universidade de Manchester">
+ +

Isso nos dá uma dica de ferramenta, assim como os títulos dos links:

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Os títulos das imagens não são essenciais para incluir. Geralmente, é melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexá-las à imagem. No entanto, eles são úteis em algumas circunstâncias; por exemplo, em uma galeria de imagens quando você não tem espaço para legendas.

+ +

Aprendizado ativo: incorporando uma imagem

+ +

Agora é sua vez de jogar! Esta seção de aprendizado ativo o ajudará a executar com um simples exercício de incorporação. Você é fornecido com um básico {{htmlelement("img")}} tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.

+ +

Também gostaríamos que você:

+ + + +

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Anotar imagens com figuras e legendas de figuras

+ +

Por falar em legendas, existem várias maneiras de adicionar uma legenda para acompanhar sua imagem. Por exemplo, não haveria nada para impedi-lo de fazer isso:

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

Está tudo bem. Isso contém o conteúdo que você precisa e é bem estiloso usando CSS. Mas há um problema aqui: não há nada que vincule semanticamente a imagem à sua legenda, o que pode causar problemas para os leitores de tela. Por exemplo, quando você tem 50 imagens e legendas, qual legenda combina com qual imagem?

+ +

Uma solução melhor, é usar os elementos do HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}}. Eles são criados exatamente para esse propósito: fornecer um contêiner semântico para figuras e vincular claramente a figura à legenda. Nosso exemplo acima, pode ser reescrito assim:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

O elemento {{htmlelement("figcaption")}} informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento {{htmlelement("figure")}}.

+ +
+

Nota: Do ponto de vista da acessibilidade, legendas e {{htmlattrxref('alt','img')}} texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto {{htmlattrxref('alt','img')}} texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e alt texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica.

+
+ +

Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:

+ + + +

Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.

+ +

Aprendizado ativo: criando uma figura

+ +

Nesta seção de aprendizado ativo, gostaríamos que você pegasse o código finalizado da seção de aprendizado ativo anterior e o transformasse em uma figura:

+ + + +

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Imagens de fundo CSS

+ +

Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade {{cssxref("background-image")}} do CSS, e o outras propriedades background-*, são usados ​​para controlar o posicionamento da imagem de fundo. Por exemplo, para colocar uma imagem de plano de fundo em cada parágrafo de uma página, você pode fazer o seguinte:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

A imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML. Então, por que se preocupar com imagens HTML? Como sugerido acima, as imagens de plano de fundo CSS são apenas para decoração. Se você quiser adicionar algo bonito à sua página para melhorar o visual, tudo bem. No entanto, essas imagens não têm significado semântico. Eles não podem ter nenhum equivalente de texto, são invisíveis para os leitores de tela, etc. É hora das imagens HTML brilharem!

+ +

Resumindo: se uma imagem tiver significado, em termos de seu conteúdo, você deverá usar uma imagem HTML. Se uma imagem é puramente decorativa, você deve usar imagens de plano de fundo CSS.

+ +
+

Nota: Você aprenderá muito mais sobre CSS background images no nosso tópico de CSS.

+
+ +

É tudo por agora. Cobrimos imagens e legendas em detalhes. No próximo artigo, avançaremos, analisando como usar HTML para incorporar vídeo e áudio em páginas da web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/pt-br/learn/html/multimedia_and_embedding/index.html b/files/pt-br/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..d644018330 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,67 @@ +--- +title: Multimídia e Incorporação +slug: Aprender/HTML/Multimedia_and_embedding +tags: + - Acesso + - Aprender + - Audio + - Avaliação + - Flash + - Gráficos Vetoriais + - Guia(2) + - HTML + - Imagens + - Iniciante + - SVG + - Vídeo(2) + - iframes +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.

+ +

Pré-requisitos

+ +

Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em introdução a HTML. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!

+ +
+

Nota: Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como JSBin ou Thimble.

+
+ +

Guias

+ +

Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.

+ +
+
Imagens em HTML
+
Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento {{htmlelement("img")}} , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando {{htmlelement("figure")}}  e como se relaciona com imagens de fundo em CSS.
+
Conteúdo em áudio e video
+
Agora nós iremos aprender como usar os elementos HTML5 {{htmlelement("video")}}  e  {{htmlelement("audio")}} , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.
+
De <object> para <iframe> — outras tecnologias incorporadas
+
A essa altura, nós gostariamos de avançar alguns passos sobre um conjunto de elementos que permitem você incorporar uma ampla variedade de tipos de conteúdo na suas páginas web: os elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. <iframe>s servem para incorporar outras páginas web, enquanto as outras duas permitem você incorporar PDFs, SVG, e até mesmo Flash — uma tecnologia cada vez menos presente, mas que ainda é possível você encontrar de forma quase regular.
+
Adicionando gráficos vetoriais à Web
+
Gráficos vetoriais podem ser muito úteis em determinadas situações. Diferente dos formatos comuns, como PNG/JPG, eles não sofrem distorção/pixelização quando o zoom é ampliado — podendo continuar com a mesma qualidade quando alterado em escala. Esse artigo irá introduzir a você o que são os gráficos vetoriais e como incluir o formato {{glossary("SVG")}} nas páginas web.
+
Imagens responsivas
+
Com a atual variedade de tipos de dispositivos capazes de navegar na web - de celulares móveis à computadores pessoais - um conceito essencial para dominar o mundo web moderno é o design responsivo. Este se refere à criação de páginas web que podem automaticamente mudar seus atributos para se adaptar a diferentes resoluções e tamanhos de tela. Isso será explorado em mais detalhes em um módulo CSS posterior, mas, por enquanto, iremos verificar as ferramentas HTML disponíveis para criar imagens responsivas, incluindo o elemento {{htmlelement("picture")}}.
+
+ +

Testes de Conhecimentos

+ +

Os testes de conhecimentos a seguir vão avaliar seu aprendizado nos assuntos abaixo:

+ +
+
Página Inicial do Mozilla
+
Neste teste nós vamos avaliar seus conhecimentos quanto a algumas técnicas discutidas nos artigos desse módulo, devendo você adicionar imagens e videos numa divertida página inicial sobre o Mozilla!
+
+ +

Veja também

+ +
+
Adicionando um hitmap no topo de uma imagem
+
Image maps consiste em um mecanismo que torna diferentes partes de uma imagem em uma forma de acesso para outros lugares ou coisas (pense em um mapa mundi que apresenta informações sobre o país em que você clicou em cima). Essa técnica pode ser útil as vezes.
+
Web literacy basics 2
+
+

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open. 

+
+
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..80299e4f72 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,394 @@ +--- +title: Do objeto ao iframe - outras tecnologias de incorporação +slug: Aprender/HTML/Multimedia_and_embedding/Other_embedding_technologies +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Até agora você já deve ter aprendido a incorporar coisas em suas páginas da web, incluindo imagens, vídeo e áudio. Neste ponto, gostaria de ter um pouco de um passo para o lado, olhando para alguns elementos que permitem incorporar uma ampla variedade de tipos de conteúdo em suas páginas: as <iframe>,  <embed>e <object>elementos. <iframe>s são para incorporar outras páginas da Web, e as outras duas permitem incorporar PDFs, SVG e até Flash - uma tecnologia que está saindo, mas que você ainda verá semi-regularmente.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico em informática, software básico instalado , conhecimento básico sobre o trabalho com arquivos , familiaridade com os fundamentos de HTML (conforme abordado em Introdução ao HTML ) e os artigos anteriores deste módulo.
Objetivo: + + + + + + +
Para saber como itens incorporar em páginas da web que usam <object>,  <embed>e <iframe>, como filmes em Flash e outras páginas da web.
+
+ +

Uma breve história de incorporação

+ +

Há muito tempo, na Web, era popular o uso de quadros para criar sites - pequenas partes de um site armazenadas em páginas HTML individuais. Elas foram incorporadas em um documento mestre chamado conjunto de quadros, que permitiu especificar a área na tela que cada quadro preenchia, como dimensionar as colunas e linhas de uma tabela. Eles foram considerados o auge da frescura entre a metade e o final dos anos 90, e havia evidências de que ter uma página da Web dividida em partes menores como essa era melhor para as velocidades de download - especialmente perceptível pelas conexões de rede que eram tão lentas na época. No entanto, eles tinham muitos problemas, que superavam quaisquer positivos à medida que as velocidades da rede ficavam mais rápidas, para que você não as veja mais sendo usadas.

+ +

Um pouco mais tarde (final dos anos 90, início dos anos 2000), as tecnologias de plug-in tornaram-se muito populares, como Java Applets e Flash - isso permitiu que os desenvolvedores da Web incorporassem conteúdo rico em páginas da Web, como vídeos e animações, que não estavam disponíveis apenas no HTML. A incorporação dessas tecnologias foi alcançada através de elementos como <object>, e os menos utilizados <embed>, e eles eram muito úteis na época. Desde então, ficaram fora de moda devido a muitos problemas, incluindo acessibilidade, segurança, tamanho do arquivo e muito mais; hoje em dia, a maioria dos dispositivos móveis não suporta mais esses plug-ins, e o suporte para desktop está saindo.

+ +

Finalmente, o elemento <iframe> apareceu (juntamente com outras formas de incorporar conteúdo, como <canvas>, <video> etc.). Isso fornece uma maneira de incorporar um documento da Web inteiro dentro de outro, como se fosse um <img>ou outro elemento, e é usado regularmente hoje .

+ +

Com a lição de história fora do caminho, vamos seguir em frente e ver como usar algumas delas.

+ +

Aprendizado ativo: usos clássicos de incorporação

+ +

Neste artigo, vamos pular direto para uma seção de aprendizado ativo, para fornecer imediatamente uma idéia real de para que servem as tecnologias de incorporação. O mundo on-line está muito familiarizado com o Youtube , mas muitas pessoas não conhecem alguns dos recursos de compartilhamento disponíveis. Vejamos como o YouTube nos permite incorporar um vídeo em qualquer página que gostamos de usar <iframe>.

+ +
    +
  1. Primeiro, vá ao Youtube e encontre o vídeo que você gosta.
    2. +
  2. Abaixo do vídeo, você encontrará um botão Compartilhar - selecione para exibir as opções de compartilhamento.
    3. +
  3. Selecione o botão Incorporar e você receberá um <iframe>código - copie isso.
    4. +
  4. Insira-o na caixa de entrada abaixo e veja qual é o resultado na saída .
    5. +
+ +

Para pontos de bônus, você também pode tentar incorporar um mapa do Google no exemplo:

+ +
    +
  1. Vá para o Google Maps e encontre um mapa que você gosta.
    2. +
  2. Clique no "Menu Hamburger" (três linhas horizontais) no canto superior esquerdo da interface do usuário.
    3. +
  3. Selecione a opção Compartilhar ou incorporar mapa .
    4. +
  4. Selecione a opção Incorporar mapa, que fornecerá algum <iframe>código - copie isso.
    5. +
  5. Insira-o na caixa de entrada abaixo e veja qual é o resultado na saída .
    6. +
+ +

Se você cometer um erro, sempre poderá redefini-lo usando o botão Redefinir . Se você realmente ficar atolado, pressione o botão Mostrar solução para ver uma resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Iframes em detalhes

+ +

Então, isso foi fácil e divertido, certo? Os elementos <iframe> foram projetados para permitir que você incorpore outros documentos da Web ao documento atual. Isso é ótimo para incorporar conteúdo de terceiros em seu site sobre o qual você pode não ter controle direto e não querer implementar sua própria versão - como vídeo de fornecedores de vídeo on-line, sistemas de comentários como Disqus , mapas on-line fornecedores de mapas, banners publicitários etc. Os exemplos editáveis ​​ao vivo que você está usando neste curso são implementados usando <iframe>s.

+ +

Existem algumas sérias preocupações de segurança a serem consideradas com <iframe>s, como discutiremos abaixo, mas isso não significa que você não deve usá-las em seus sites - apenas requer algum conhecimento e pensamento cuidadoso. Vamos explorar o código um pouco mais detalhadamente. Digamos que você queira incluir o glossário MDN em uma de suas páginas da web - você pode tentar algo como isto:

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+       Fallback link for browsers that don't support iframes
+    </a>
+  </p>
+</iframe>
+ +

Este exemplo inclui os fundamentos básicos necessários para usar um <iframe>:

+ +
+
allowfullscreen
+
Se definido, ele <iframe>poderá ser colocado no modo de tela cheia usando a API de tela cheia (um pouco além do escopo deste artigo).
+
frameborder
+
Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. 0 remove a borda. Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando em seu CSS .border: none;
+
src
+
Este atributo, como <video>/ <img>, contém um caminho apontando para o URL do documento a ser incorporado.
+
width e height
+
Esses atributos especificam a largura e a altura que você deseja que o iframe seja.
+
Conteúdo alternativo
+
Da mesma forma que outros elementos semelhantes <video>, você pode incluir conteúdo de fallback entre as <iframe></iframe>tags de abertura e fechamento que aparecerão se o navegador não suportar <iframe>. Nesse caso, incluímos um link para a página. É improvável que você encontre qualquer navegador que não suporte <iframe>s atualmente.
+
sandbox
+
Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos <iframe>recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; falaremos mais sobre isso na próxima seção.
+
+ +
+

Nota: Para melhorar a velocidade, é uma boa ideia definir o srcatributo do iframe com JavaScript após o carregamento do conteúdo principal. Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante métrica de SEO ).

+
+ +

Preocupações com segurança

+ +

Acima, mencionamos preocupações de segurança - vamos abordar isso com mais detalhes agora. Não esperamos que você entenda todo esse conteúdo perfeitamente da primeira vez; queremos apenas que você fique ciente dessa preocupação e forneça uma referência para retornar à medida que for mais experiente e começar a considerar o uso de <iframe>s em seus experimentos e trabalhos. Além disso, não há necessidade de ter medo e não usar <iframe>s - você só precisa ter cuidado. Leia...

+ +

Fabricantes de navegadores e desenvolvedores da Web descobriram da maneira mais difícil que iframes são um alvo comum (termo oficial: vetor de ataque ) para pessoas más na Web (geralmente chamadas de hackers ou, mais precisamente, crackers ) atacarem se estiverem tentando modificar maliciosamente seu página da web ou induzir as pessoas a fazer algo que não desejam, como revelar informações confidenciais como nomes de usuário e senhas. Por esse motivo, engenheiros de especificações e desenvolvedores de navegadores desenvolveram vários mecanismos de segurança para torná- <iframe>los mais seguros, e também existem práticas recomendadas a serem consideradas - abordaremos alguns deles abaixo.

+ +
+

{{interwiki('wikipedia','Clickjacking')}} é um tipo comum de ataque iframe, no qual hackers incorporam um iframe invisível ao documento (ou incorporam o documento ao próprio site malicioso) e o usam para capturar as interações dos usuários. Essa é uma maneira comum de enganar os usuários ou roubar dados confidenciais.

+
+ +

Um primeiro exemplo rápido - tente carregar o exemplo anterior que mostramos acima em seu navegador - você pode encontrá-lo ao vivo no Github ( consulte o código-fonte também.) Na verdade, você não verá nada exibido na página e se olhar para o console nas ferramentas de desenvolvedor do navegador , você verá uma mensagem informando o motivo. No Firefox, você será informado sobre o Load negado pelo X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary não permite o enquadramento . Isso ocorre porque os desenvolvedores que criaram o MDN incluíram uma configuração no servidor que serve as páginas do site para impedir que elas sejam incorporadas dentro de <iframe>s (consulte Configurar diretivas CSP, abaixo.) Isso faz sentido - uma página MDN inteira não faz sentido para ser incorporada em outras páginas, a menos que você queira fazer algo como incorporá-las ao seu site e reivindicá-las como suas - ou tentar roubar dados via clickjacking , que são coisas muito ruins para se fazer. Além disso, se todos começassem a fazer isso, toda a largura de banda adicional começaria a custar muito dinheiro à Mozilla.

+ +

Incorporar somente quando necessário

+ +

Às vezes, faz sentido incorporar conteúdo de terceiros - como vídeos e mapas do youtube -, mas você pode economizar muitas dores de cabeça se incorporar apenas conteúdo de terceiros quando completamente necessário. Uma boa regra geral para a segurança da Web é "Você nunca pode ser muito cauteloso. Se você fez isso, verifique-o de qualquer maneira. Se alguém o fez, assuma que é perigoso até prova em contrário".

+ +

Além da segurança, você também deve estar ciente dos problemas de propriedade intelectual. A maioria dos conteúdos tem direitos autorais, offline e online, mesmo o conteúdo que você não pode esperar (por exemplo, a maioria das imagens no Wikimedia Commons ). Nunca exiba conteúdo em sua página da Web, a menos que você seja o proprietário ou os proprietários tenham lhe dado uma permissão inequívoca por escrito. As penalidades por violação de direitos autorais são severas. Novamente, você nunca pode ser muito cauteloso.

+ +

Se o conteúdo for licenciado, você deverá obedecer aos termos da licença. Por exemplo, o conteúdo no MDN é licenciado sob CC-BY-SA . Isso significa que você deve creditar-nos adequadamente quando citar nosso conteúdo, mesmo que faça alterações substanciais.

+ +

Use HTTPS

+ +

{{Glossary("HTTPS")}} é a versão criptografada do {{Glossary("HTTP")}}. Você deve utilizar HTTPS em seus websites sempre que possível:

+ +
    +
  1. HTTPS reduz a chance de que conteúdo remoto tenha sido adulterado no caminho.
    2. +
  2. HTTPS previne que conteúdo que tenha incorporado ao site acesse conteúdo em seu documento de origem, e vice versa.
    3. +
+ +

Utilizar HTTPS requer um certificado de segurança, que pode ser bem caro (apesar que o Let's Encrypt deixe as coisas mais fáceis) — se você não puder obter um certificado, você deve fornecer seus documentos com HTTP. Contudo, por conta do segundo benefício do HTTPS descrito acima, não importa o custo, você nunca deve incorporar conteúdo de terceiros em HTTP. (No caso do melhor cenário, o navegador de seu usuário irá dá-lo um aviso assustador.) Todas as empresas com boa reputação irão fornecer conteúdo para ser incoporado por meio <iframe> irá fazê-lo disponível através de HTTPS — veja a URLs dentro do <iframe> noatributo src, quando você está incorporando conteúdo do Google Maps ou Youtube, por exemplo.

+ +
+

Nota: Páginas do Github permitem que conteúdo seja fornecido via HTTPS por padrão, então é útil para hospedar conteúdo. Se você está utilizando uma hospedagem diferente e não tem certeza do mesmo, pergunte sobre com o seu provedor de hospedagem.

+
+ +

Sempre utilize o atributo sandbox

+ +

Você deseja que os atacantes tenham a menor quantidade possível de poder para causar danos ao seu website, portanto, você deve dar ao conteúdo incorporado apenas a permissão para fazer o seu trabalho. É claro, isto se aplica ao seu próprio conteúdo, também. Um container para código onde ele possa ser utilizado apropriadamente — ou para testes — mas não pode causar nenhum dano ao resto do código base (tanto acidental quanto maliciosa) é chamado sandbox.

+ +

Conteúdo fora de uma sandbox pode fazer muito mais que o esperado (executar JavaScript, submeter forms, criar novas janelas no navegador, etc.) Por padrão, você deve impor todas as restrições disponíveis utilizando o atributosandbox sem parâmetros, como mostrado em nosso exemplo anterior.

+ +

Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributosandbox="") — veja em  {{htmlattrxref('sandbox','iframe')}}  as referências de entrada para todas as opções disponíveis. Uma nota importante é que você nunca deve adicionar ambos allow-scripts e allow-same-origin no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente.

+ +
+

Nota: Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem  conteúdo malicioso diretamete (fora de um iframe). Se existir qualquer chance que certo conteúdo possa ser malicioso (exemplo, conteúdo gerado por usuários), por favor forneça-o em um {{glossary("domain")}} diferente de seu site principal.

+
+ +

Configure directivas CSP

+ +

{{Glossary("CSP")}} significa política de segurança de conteúdo e fornece um conjunto de cabeçalhos HTTP (metadados enviados junto com suas páginas da web quando são veiculados de um servidor da web) projetados para melhorar a segurança do seu documento HTML. Quando se trata de proteger <iframe> s, você pode configurar seu servidor para enviar um cabeçalho X-Frame-Options apropriado.

+ +

stands for content security policy and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options  header. Isso pode impedir que outros sites incorporem seu conteúdo em suas páginas da Web (o que habilitaria o {{interwiki('wikipedia','clickjacking')}} e vários outros ataques), exatamente o que os desenvolvedores do MDN fizeram, como vimos anteriormente.

+ +
+

Nota: Você pode ler a publicação de Frederik Braun X-Frame-Options Security Header para obter mais informações sobre este tópico. Obviamente, está fora do escopo uma explicação completa neste artigo.

+
+ +

The <embed> and <object> elements

+ +

The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!

+ +
+

Note: A plugin, in this context, refers to software that provides access to content the browser cannot read natively.

+
+ +

However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.

+ +

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} of the embedded content{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} of the embedded content{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
height and width (in CSS pixels) of the box controlled by the plugin{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
names and values, to feed the plugin as parametersad hoc attributes with those names and valuessingle-tag {{htmlelement("param")}} elements, contained within <object>
independent HTML content as fallback for an unavailable resourcenot supported (<noembed> is obsolete)contained within <object>, after <param> elements
+ +
+

Note: <object> requires a data attribute, a type attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). typemustmatch keeps the embedded file from running unless the type attribute provides the correct media type. typemustmatch can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).

+
+ +

Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this live on Github, and check the source code too):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an <object> element with an <embed> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.

+ +

Now let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can
+    <a href="mypdf.pdf">download the PDF file.
+    </a>
+  </p>
+</object>
+ +

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

+ +

The case against plugins

+ +

Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.

+ + + +
+

Note: Due to its inherent issues and the lack of support for Flash, Adobe announced that they would stop supporting it at the end of 2020.  As of January 2020, most browsers block Flash content by default, and by December 31st of 2020, all browsers will have completly removed all Flash functionality. Any existing Flash content will be inaccessable after that date.

+
+ +

So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you should use HTML5 video for your media needs, SVG for vector graphics, and Canvas for complex images and animations. Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.

+ +

Test your skills!

+ +

You've reached the end of the this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding.

+ +

Summary

+ +

The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.

+ +

There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{SVGElement("svg")}} for embedding vector graphics. We'll look at SVG in the next article of the module.

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..961ec6d82e --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,259 @@ +--- +title: Imagens responsivas +slug: Aprender/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Neste artigo nós iremos aprender sobre o conceito de imagens responsivas —imagens que funcionam em dispositivos com diferentes tamanhos de tela, resoluções e outras funcionalidades— e entrar em contato com quais ferramentas o HTML oferece para ajudar a implementá-las. Imagens responsivas são apenas uma parte do web design responsivo, um futuro tópico de CSS para você aprender.

+
+ + + + + + + + + + + + +
Pré-requisitos:Você deve ter visto a introdução ao HTML e como adicionar imagens estáticas numa página web.
Objetivo:Aprender como usar funcionalidades como {{htmlattrxref("srcset", "img")}} e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites.
+ +

Por que imagens responsivas?

+ +

Então qual o problema nós estamos tentando resolver com imagens responsivas? Vamos examinar um cenário típico. Um típico website provavelmente tem uma imagem de cabeçalho, para ter uma boa aparência para os visitantes, e talvez mais algumas imagens no conteúdo abaixo. Você provavelmente quer fazer uma imagem do cabeçalho em toda a largura do cabeçalho, e o as imagens no conteúdo caiba dentro de alguma coluna. Vamos dar uma olhada em um exemplo simples disso:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Isto funciona bem em um dispositivo de tela grande, como um laptop ou desktop (você pode ver o exemplo ao vivo e encontrar o código-fonte no Github.) Nós não vamos discutir muito o CSS, exceto para dizer que:

+ + + +

Isto está bom, mas o problema vem quando você começa a ver a página em uma tela estreita - o cabeçalho parece bom, mas está começando a pegar um tamanho grande para um dispositivo móvel; A primeira imagem do conteúdo por outro lado parece terrível - neste tamanho você mal consegue ver as pessoas nela.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Seria muito melhor mostrar uma versão cortada da imagem que contenha os detalhes importantes quando a página é vista em uma tela estreita, e talvez algo entre as duas para uma tela de largura média como um tablet - isto é comumente conhecido como o problema de direção artística.

+ +

Ainda, não é preciso embutir estas imagens grandes em páginas se será visto em pequenas telas de celulares; isto é chamado de problema de mudança de resolução - uma imagem rasterizada é um número de pixels de largura e um número de pixels de altura; como nós vimos quando olhamos para vetores gráficos, uma imagem rasterizada começa a parecer granulada e horrível se é mostrada maior que seu tamanho original (enquanto que um vetor não). E se isto é mostrado muito menor que seu tamanho original, é um desperdício de largura de banda - usuários mobile especialmente não querem ter que gastar seu pacote de dados baixando uma imagem grande feita para desktop, quando uma imagem pequena poderia ser feita para seu dispositivo. Uma situação ideal seria ter múltiplas resoluções disponíveis e apresentar tamanhos apropriados dependendo dos diferentes dispositivos que acessam a página.

+ +

Para tornar as coisas mais complicadas, alguns dispositivos tem uma alta resolução, que demanda imagens maiores do que as que você espera para ficar bom. Isto é essencialmente o mesmo problema, mas em um contexto diferente.

+ +

Você pode pensar que imagens vetorizadas resolveria estes problemas, e elas resolvem em certo grau - elas têm um tamanho pequeno e se adaptam bem, e você deveria usá-las sempre que possível. Mas elas não são possíveis para todos os tipos de imagem - enquanto elas são ótimas para gráficos simples, padrões, elementos de interface, etc., começa a ficar complexo criar uma imagem baseada em vetor com o tipo de detalhe que você encontraria em uma foto, por exemplo. Formatos de imagens rasterizadas, como JPEGs, são melhores para este tipo como nós vemos no exemplo acima.

+ +

Este tipo de problema não existe quando a web começou a existir, no começo dos anos 1990 - naquele tempo somente desktops e laptops navegavam a Web, então engenheiros de navegadores e programadores nem pensavam em implementar soluções. Tecnologias de imagens responsivas foram implementadas recentemente para resolver os problemas indicados acima, permitindo a você oferecer ao navegador vários arquivos de imagens, todas mostrando a mesma coisa mas contendo diferente número de pixels (mudança de resolução), ou diferentes imagens para diferente espaços de alocação (direção de arte).

+ +
+

Note: As novas funcionalidades discutidas neste artigo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer).

+
+ +

Como você faz para criar imagens responsivas?

+ +

Nesta seção, nós iremos ver os dois problemas ilustrados acima e mostrar como resolvê-los usando fucionalidades de imagens responsivas do HTML. Você deve notar que nós iremos focar no elemento HTML {{htmlelement("img")}} para esta seção, como visto na área de conteúdo do exemplo acima - a imagem no cabeçalho da página é somente para decoração, e assim implementada usando imagens de background CSS. CSS indiscutivelmente tem ferramentas melhores para design responsivo do que HTML, e nós iremos falar sobre estas ferramentas em um módulo futuro de CSS.

+ +

Mudança de resolução: Diferentes tamanhos

+ +

Então, qual é o problema que nós queremos resolver com mudança de resolução? Nós queremos mostrar identico conteúdo da imagem, somente maior ou menor dependendo do dispositivo - esta é a situação que nós temos com a segunda imagem do conteúdo em nosso exemplo. O padrão do elemento {{htmlelement("img")}} tradicionalmente somente permite apontar o navegador para uma única fonte:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Nós podemos, entretanto, usar dois novos atributos — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo responsive.html no Github (ver também o código fonte):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Os atributos srcset e sizes parecem complicados, mas não são difíceis de entender se você formata eles como mostrado acima, com uma parte diferente do valor do atributo para cada linha. Cada valor contém uma lista separada por vírgula, e cada parte da lista é dividida em três sub-partes. Vamos percorrer o conteúdo de cada agora:

+ +

srcset define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem. Antes de cada vírgula nós escrevemos:

+ +
    +
  1. Um nome do arquivo da imagem (elva-fairy-480w.jpg).
    2. +
  2. Um espaço.
    3. +
  3. A largura da imagem em pixels (480w) — note que é usado a unidade w, e não px como você pode esperar. Este é o tamanho real da imagem, que pode ser encontrado no arquivo dela no seu computador (por exemplo no Mac você pode selecionar a imagem no Finder, e pressionar Cmd + I para mostrar as informações na tela).
    4. +
+ +

sizes define um conjunto de condições de mídia (ex.: largura da tela) e indica qual tamanho da imagem deveria ser a melhor escolha, quando certas condições de tela são verdadeiras - Estas são as sugestões que nós falamos antes. Neste caso, antes de cada vírgula nós escrevemos:

+ +
    +
  1. Uma condição de mídia ((max-width:480px)) — Você vai aprender mais sobre isso no  tema CSS, mas para agora vamos somente dizer que a condição de mídia descreve um possível estado em que a tela pode estar. Neste caso, nós estamos dizendo "quando a largura da tela é 480px ou menos".
    2. +
  2. Um espaço.
    3. +
  3. A largura do slot da imagem vai preencher quando a condição de mídia for verdadeira (440px).
    4. +
+ +
+

Note: Para a largura do slot, você pode fornecer um tamanho absoluto (px, em) ou um tamanho relativo (como porcentagem).Você pode ter notado que o último slot de largura não tem condição de mídia - isto é o padrão que será escolhido quando nenhuma condição for verdadeira. O navegador ignora tudo depois da primeira condição satisfeita, então tenha cuidado com a ordem de condições.

+
+ +

Então, com estes atributos no lugar, o navegador irá:

+ +
    +
  1. Ver a largura do dispositivo.
    2. +
  2. Ver qual condição de mídia na lista sizes é a primeira a ser verdadeira.
    3. +
  3. Ver qual é o slot para aquela condição de mída.
    4. +
  4. Carregar a imagem definida na lista srcset que mais chega perto do tamanho do slot.
    5. +
+ +

E é isto! Então neste ponto, se um navegador suportado com uma largurar de 480px carregar a página, a condição (max-width: 480px) será verdadeira, então o slot 440px será escolhido, então o elva-fairy-480w.jpg será carregada, como a largura inerente (480w) é a mais próxima de 440px. A imagem de 800px é 128KB no disco enquanto que a versão de 480px é somente 63KB - economizando 65KB. Agora imagine se fosse uma página que tivesse várias imagens. Usando esta técnica poderia economizar os dados de usuários de celular.

+ +

Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo {{htmlattrxref("src", "img")}} como normal.

+ +
+

Nota: No {{htmlelement("head")}} do documento você encontrará a linha <meta name="viewport" content="width=device-width">: isto força navegadores de celular adotar a largura real para carregar páginas web (alguns navegadores mobile mentem sobre sua largura da janela, e em vez carregam páginas em uma largura grante e então encolhem a página carregada, o que é de muita ajuda para imagens e design responsivos. Nós iremos ensinar mais sobre isso em um módulo futuro).

+
+ +

Ferramentas de desenvolvimento úteis

+ +

Há algumas ferramenta de desenvolvimento úteis em navegadores para ajudar a exercitar o necessário para slot de largura, etc, que você precisa usar. Quando eu estava trabalhando neles, eu primeiro carreguei a versão não responsiva do meu exemplo (not-responsive.html), então fui no Modo de Design Responsivo (Ferramentas >Desenvolvimento Web > Modo de Design Responsivo), que permite a você ver o layout da sua página como se ele estivesse visto através de uma variedade de diferentes tamanhos de telas.

+ +

Eu configurei a largura da janela para 320px e depois 480px; para cada uma eu fui no DOM Inspector, cliquei no elemento {{htmlelement("img")}} no qual nós estamos interessados, então olhei o tamanho na aba Box Model view no lado direito da tela. Isto deve dar para você a dica da largura de imagem que você precisa.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Próximo, você pode checar se o srcset está funcionando configurando a largura da janela para a qual você quiser (coloque para uma largura estreita, por exemplo), abrindo o Network Inspector (Ferramentas > Web Developer > Network), então recarregue a página. Isto deve dar a você uma lista do que foi carregado na página, e aqui você pode checar qual arquivo da imagem foi escolhida para baixar.

+ +
+

Nota:  Use o Mozilla Firefox para testar srcset. O Chrome carrega a melhor imagem se estiver em cache no navegador, anulando o propósito do teste na ferramenta de desenvolvimento.

+
+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Mudança de Resolução: Mesmo tamanho, diferente resoluções

+ +

Se você está dando suporte a múltiplas resoluções de vídeo, mas todas veem sua imagem no tamanho real na tela, você pode permitir ao navegador escolher uma resolução apropriada para a imagem usando srcset com x indentificadores e sem sizes - uma sintaxe um pouco mais fácil! Você pode encontrar um exemplo de como isto parece em srcset-resolutions.html (ver também o código fonte):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageNeste exemplo, o seguinte CSS é aplicado na imagem, então ela etra uma largura de 320 pixels na tela (também chamado pixels CSS):

+ +
img {
+  width: 320px;
+}
+ +

Neste caso, sizes não é preciso - o navegador simplesmente encontra qual resolução é a que será mostrada, e fornece a mais apropriada definida no srcset. Então se o dispositivo que acessa a página tem um padrão de baixa resolução, com um pixel do dispositivo representando cada pixel CSS, a imagem elva-fairy-320w.jpg será carregada (o 1x é implícito, então você não precisa incluí-lo). Se o dispositivo tem uma alta resolução de dois pixels do dispositivo para pixel CSS ou mais, a imagem elva-fairy-640w.jpg será carregada. A imagem 640px é 93KB, enquanto a 320px é somente 39KB.

+ +

Direção de Arte

+ +

Recapitulando, o problema de direção de arte involve querer mudar a imagem mostrada para se adequar a diferentes tamanhos de tela. Por exemplo, se uma foto de um grande panorama com uma pessoa no centro é mostrada em uma página quando visualizada em um navegador de desktop, então é encolhido quando a página é vista em um navegador de celular, ficará ruim pois a pessoa no centro aparecerá bem pequena e difícil de ver. Provavelmente seria melhor mostrar uma imagem menor e em formato retrato (em pé) no celular, que mostrará a pessoa ampliada. O elemento {{htmlelement("picture")}} permite a nós implementar justamente este tipo de solução.

+ +

Voltando para o nosso exemplo not-responsive.html, nós temos uma imagem que precisa de uma direção de arte:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Vamos consertar isso, com {{htmlelement("picture")}}! Como <video> e <audio>, O elemento <picture> é um invólocro contendo muitos elementos {{htmlelement("source")}} que fornecem muitas fontes diferentes para o navegador escolher, seguido pelo elemento mais importante {{htmlelement("img")}}. O código em responsive.html ficará assim então:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

Este código nos permite mostrar uma imagem adequada em ambas extensas e estreitas telas, como podemos ver abaixo:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Nota: Você deveria usar o atributo media somente em cenários de direção de arte; quando você usa media, não oferecendo também condições com o atributo sizes.

+
+ +

Por que não podemos só fazer isso usando CSS ou JavaScript?

+ +

Quando o navegador começa a carregar a página, inicia o download de todas as imagens antes do analisador principal ter começado a carregar e interpretar o JavaScript e o CSS da página. Isto é uma técnica útil, a qual diminui o tempo de carregamento médio em 20%. Entretanto, isto não é útil para imagens responsivas, então é necessário implementar soluções como srcset. Você não pode, por exemplo, carregar o elemento {{htmlelement("img")}}, então detectar a largura da janela com JavaScript e mudar dinamicamente o arquivo da imagem para um menor, caso deseje. Até lá, a imagem original deveria já ter sido carregado, e você iria carregar uma menor, o que é ainda pior em termos de imagens responsivas.

+ + + +

Use bastante formatos de imagens modernos

+ +

Há vários novos e excitantes formatos de imagens (como WebP e JPEG-2000) que podem manter baixo tamanho de arquivo e alta qualidade ao mesmo tempo. Entretanto, o suporte do navegador é menor.

+ +

<picture> permite-nos continuar dando suporte para navegadores antigos. Você pode suprir tipos MIME dentro de atributos type, então o navegador pode rejeitar imediatamente arquivos não suportados:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Aprendizado ativo: Implementando suas próprias imagens responsivas

+ +

Para esse exercício, nós estamos esperando que você seja corajoso e vá sozinho.. principalmente. Nós queremos que você implemente sua própria adequada direção de arte em tela estreita/ampla usando <picture>, e um exemplo de mudança de resolução que use srcset.

+ +
    +
  1. Escreva um simples HTML contendo seu código (use not-responsive.html como um ponto de partida, se quiser)
    2. +
  2. Encontre uma boa imagem ampla de um panorama com algum detalhe contido em alguma parte. Crie uma versão de tamanho web usando um editor de imagem, então coloque parra mostrar uma pequena parte que amplia o detalhe, e salve em uma segunda imagem (algo como 480px está bom).
    3. +
  3. Use o elemento <picture> para implementar uma mudança de imagem!
    4. +
  4. Crie múltiplos arquivos de imagem de diferentes tamanhos, cada um mostrando a mesma imagem.
    5. +
  5. Use srcset/size para criar um exemplo de mudança de resolução, que sirva para os mesmos tamanhos de imagens em diferentes resoluções, ou diferentes tamanhos de imagens em cada largura de janela.
    6. +
+ +
+

Nota:Use a ferramenta de desenvolvimento do navegador para ajudar a ver os tamanhos que você precisa, como mencionado acima.

+
+ +

Sumário

+ +

Isto é um geral sobre imagens responsivas - nós esperamos que você tenha aproveitado estas novas técnicas. Recapitulando, há dois problemas que nós discutimos aqui:

+ + + +

Isto também encerra o módulo Multimedia and embedding! A única coisa para fazer agora é seguir e tentar nosso teste de multimídia, e ver como você está. Se divirta.

+ +

Veja também

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Neste Módulo

+ + +
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..2a894b7fd0 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,319 @@ +--- +title: Conteúdo de vídeo e áudio +slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Artigos + - Audio + - Guías + - HTML + - Video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Agora que estamos à vontade para adicionar imagens simples a uma página da Web, o próximo passo é começar a adicionar players de vídeo e áudio aos seus documentos HTML! Neste artigo vamos olhar para fazer exatamente isso com os elementos {{htmlelement("video")}} e {{htmlelement("audio")}} ; Então, vamos terminar de olhar como adicionar legendas/subtítulos aos seus vídeos.

+ + + + + + + + + + + + +
Pré-requisitos:Alfabetização básica em informática, software básico instalado, conhecimento básico de trabalhar com arquivos, familiaridade com os fundamentos HTML (Como coberto em Introdução ao HTML) e Images in HTML.
Objetivo:Para aprender a incorporar conteúdo de vídeo e áudio em uma página da Web e adicionar legendas/subtítulos ao vídeo.
+ +

Audio e video na web

+ +

Os desenvolvedores da Web quiseram usar vídeo e áudio na Web por um longo tempo, desde o início dos anos 2000, quando começamos a ter largura de banda rápida o suficiente para suportar qualquer tipo de vídeo ( Os arquivos de vídeo são muito maiores que o texto ou mesmo imagens.). Nos primeiros dias, as tecnologias web nativas, como o HTML, não tinham a capacidade de incorporar vídeo e áudio na Web, de modo que as tecnologias proprietárias (ou baseado em plugin) como o Flash (e depois, Silverlight) tornaram-se populares para lidar com esse conteúdo . Esse tipo de tecnologia funcionou bem, mas teve vários problemas, incluindo não funcionar bem com recursos HTML/CSS, problemas de segurança e problemas de acessibilidade.

+ +

Uma solução nativa resolveria muito disso, se bem feita. Felizmente, alguns anos depois, o {{glossary("HTML5")}} especificação tinha tais recursos adicionados, com o {{htmlelement("video")}} e{{htmlelement("audio")}} elementos, e alguns novos brilhantes {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} por controlá-los. Não veremos o JavaScript aqui - apenas os fundamentos básicos que podem ser alcançados com o HTML.

+ +

Não ensinaremos como produzir arquivos de áudio e vídeo - isso requer um conjunto de habilidades completamente diferente. Nós fornecemos a você amostras de arquivos de áudio e vídeo e exemplos de códigos para sua própria experimentação, caso você não consiga se apossar.

+ +
+

Nota: Antes de começar aqui, você também deve saber que existem algumas {{glossary("OVP","OVPs")}} (fornecedores de vídeo online) como YouTube, Dailymotion, e Vimeo, e provedores de áudio on-line como Soundcloud. Essas empresas oferecem uma maneira conveniente e fácil de hospedar e consumir vídeos, para que você não precise se preocupar com o enorme consumo de largura de banda. Os OVPs geralmente oferecem código pronto para incorporar vídeo / áudio em suas páginas da web. Se você seguir esse caminho, poderá evitar algumas das dificuldades que discutimos neste artigo. Discutiremos esse tipo de serviço um pouco mais no próximo artigo.

+
+ +

O elemento <video> 

+ +

O elemento {{htmlelement("video")}} permite incorporar um vídeo com muita facilidade. Um exemplo realmente simples é assim:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Os recursos da nota são:

+ +
+
{{htmlattrxref("src","video")}}
+
Da mesma maneira que para o elemento {{htmlelement("img")}}, O atributo src contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira.
+
{{htmlattrxref("controls","video")}}
+
Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem epilepsy.) Você deve usar o atributo controls para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado JavaScript API. No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume.
+
O parágrafo dentro do <video> tags
+
Isso é chamado de conteúdo alternativo - será exibido se o navegador que acessa a página não suportar o elemento <video>, permitindo fornecer um substituto para navegadores mais antigos. Isso pode ser o que você quiser; nesse caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa acessá-lo de alguma forma, independentemente do navegador que estiver usando.
+
+ +

O vídeo incorporado será mais ou menos assim:

+ +

A simple video player showing a video of a small white rabbit

+ +

Você pode tentar o exemplo ao vivo aqui (veja também o código fonte.)

+ +

Usando vários formatos de origem para melhorar a compatibilidade

+ +

Há um problema no exemplo acima, que você já deve ter notado se você tentou acessar o link do video acima em navegadores mais antigos como Internet Explorer ou até mesmo uma versão antiga do Safari. O vídeo não será reproduzido, porque navegadores diferentes suportam diferentes formatos de vídeo (e áudio). Felizmente, existem coisas que você pode fazer para ajudar a evitar que isso seja um problema.

+ +

Conteúdo de um arquivo de mídia

+ +

Primeiro, vamos analisar a terminologia rapidamente. Formatos como MP3, MP4 e WebM são chamados de arquivos recipiente (formatos de contêiner). Eles definem uma estrutura na qual cada faixa de áudio e / ou vídeo que compõe a mídia é armazenada, juntamente com os metadados que descrevem a mídia, quais codecs são usados ​​para codificar seus canais e assim por diante.

+ +

As faixas de áudio e vídeo também estão em diferentes formatos, por exemplo:

+ + + +

Existem alguns casos especiais. Por exemplo, para alguns tipos de áudio, os dados de um codec geralmente são armazenados sem um contêiner ou com um contêiner simplificado. Uma dessas instâncias é o codec FLAC, que é armazenado com mais frequência em arquivos FLAC, que são apenas faixas FLAC brutas.

+ +

Outra situação é o sempre popular arquivo MP3. Um "arquivo MP3" é na verdade uma faixa de áudio MPEG-1 Audio Layer III (MP3) armazenada em um contêiner MPEG ou MPEG-2. Isso é especialmente interessante, pois embora a maioria dos navegadores não suporte o uso de mídia MPEG nos elementos {{HTMLElement("video")}} e {{HTMLElement("audio")}}, eles ainda podem suportar MP3 devido à sua popularidade.

+ +

Um reprodutor de áudio tenderá a reproduzir uma faixa de áudio diretamente, por exemplo um arquivo MP3 ou Ogg. Estes não precisam de contêineres.

+ +
+

Note: Não é tão simples, como você pode ver no nosso tabela de compatibilidade de codec de áudio e vídeo. Além disso, muitos navegadores de plataforma móvel podem reproduzir um formato não suportado, entregando-o ao reprodutor de mídia do sistema subjacente. Mas isso servirá por enquanto.

+
+ +

Suporte a arquivos de mídia em navegadores

+ +

Os codecs descritos na seção anterior existem para compactar vídeo e áudio em arquivos gerenciáveis, pois o áudio e o vídeo bruto são extremamente grandes. Cada navegador da web suporta uma variedade de {{Glossary("Codec","Codecs")}}, como Vorbis ou H.264, que são usados ​​para converter o áudio e o vídeo compactados em dados binários e vice-versa. Cada codec oferece suas próprias vantagens e desvantagens, e cada contêiner também pode oferecer seus próprios recursos positivos e negativos, afetando suas decisões sobre qual usar.

+ +

As coisas se tornam um pouco mais complicadas porque cada navegador não apenas suporta um conjunto diferente de formatos de arquivo de contêiner, como também suporta uma seleção diferente de codecs. Para maximizar a probabilidade de seu site ou aplicativo funcionar no navegador de um usuário, você pode precisar fornecer cada arquivo de mídia usado em vários formatos. Se o seu site e o navegador do usuário não compartilharem um formato de mídia em comum, sua mídia simplesmente não será reproduzida.

+ +

Devido à complexidade de garantir que a mídia do aplicativo seja visível em todas as combinações de navegadores, plataformas e dispositivos que você deseja acessar, a escolha da melhor combinação de codecs e contêiner pode ser uma tarefa complicada. Veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} para obter ajuda na seleção do formato de arquivo do contêiner mais adequado às suas necessidades; Da mesma forma, veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} e {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} para obter ajuda na seleção dos primeiros codecs de mídia a serem usados ​​no seu conteúdo e no seu público-alvo.

+ +

Um aspecto adicional a ter em mente: os navegadores móveis podem suportar formatos adicionais não compatíveis com seus equivalentes de desktop, assim como podem não suportar os mesmos formatos da versão para desktop. Além disso, os navegadores de desktop e móveis podem ser projetados para descarregar o manuseio da reprodução de mídia (para todas as mídias ou apenas para tipos específicos que não podem ser tratados internamente). Isso significa que o suporte à mídia depende parcialmente do software que o usuário instalou.

+ +
+

Note: Você pode estar se perguntando por que essa situação existe. MP3 (para áudio) e MP4 / H.264 (para vídeo) são amplamente suportados e de boa qualidade. No entanto, eles também são patentiados - as patentes americanas cobrem o MP3 até pelo menos 2017 e o H.264 até 2027, o que significa que os navegadores que não possuem a patente precisam pagar grandes quantias para suportar esses formatos. Além disso, muitas pessoas evitam, por princípio, software restrito, a favor de formatos abertos. É por isso que precisamos fornecer vários formatos para diferentes navegadores.

+
+ +

Então, como fazemos isso? Dê uma olhada no seguinte exemplo atualizado(tente ao vivo aqui, também):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Aqui nós tiramos o atributo src (source) do {{HTMLElement("video")}} tag, mas incluímos os elementos {{htmlelement("source")}} que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento {{HTMLElement("source")}} e reproduza o primeiro que ele possui o codec para suportar. A inclusão de fontes WebM e MP4 deve ser suficiente para reproduzir seu vídeo na maioria das plataformas e navegadores atualmente.

+ +

Cada elemento <source> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.

+ +
+

Nota: Consulte o nosso guia sobre tipos e formatos de mídias (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada

+
+ +

Outros recursos de <video>

+ +

Há vários outros recursos que você pode incluir em um vídeo HTML5. Dê uma olhada no nosso terceiro exemplo, abaixo:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Isso nos dará uma saída parecida com esta:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Os novos recursos são:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
Você pode controlar o tamanho do vídeo com esses atributos ou com {{Glossary("CSS")}}. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como proporção de tela. Se a proporção não for mantida pelos tamanhos definidos, o vídeo aumentará para preencher o espaço horizontalmente, e o espaço não preenchido receberá apenas uma cor sólida de fundo por padrão.
+
{{htmlattrxref("autoplay","video")}}
+
Faz com que o áudio ou o vídeo comece a ser reproduzido imediatamente, enquanto o restante da página está sendo carregado. É aconselhável não usar vídeo (ou áudio) de reprodução automática em seus sites, porque os usuários podem achar isso realmente irritante.
+
{{htmlattrxref("loop","video")}}
+
Faz com que o vídeo (ou áudio) comece a ser reproduzido novamente sempre que terminar. Isso também pode ser irritante, portanto, use apenas se for realmente necessário.
+
{{htmlattrxref("muted","video")}}
+
Faz com que a mídia seja reproduzida com o som desativado por padrão.
+
{{htmlattrxref("poster","video")}}
+
O URL de uma imagem que será exibida antes da reprodução do vídeo. Destina-se a ser usado para uma tela inicial ou tela de publicidade.
+
{{htmlattrxref("preload","video")}}
+
+

Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores:

+ +
    +
  • "none" não armazena em buffer o arquivo
    • +
  • "auto" armazena em buffer o arquivo de mídia
    • +
  • "metadata" armazena em buffer apenas os metadados do arquivo
    • +
+
+
+ +

Você pode encontrar o exemplo acima disponível para tocar ao vivo no Github (veja também o código fonte.) Observe que não incluímos o atributo autoplay na versão ao vivo - se o vídeo começar a ser reproduzido assim que a página for carregada, você não poderá ver o pôster!

+ +

O elemento <audio>

+ +

O elemento {{htmlelement("audio")}} funciona exatamente como o elemento {{htmlelement("video")}}, com algumas pequenas diferenças, conforme descrito abaixo. Um exemplo típico pode parecer assim:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Isso produz algo como o seguinte em um navegador:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note: You can run the audio demo live on Github (also see the audio player source code.)

+
+ +

Isso ocupa menos espaço do que um reprodutor de vídeo, pois não há componente visual - você só precisa exibir controles para reproduzir o áudio. Outras diferenças do vídeo HTML5 são as seguintes:

+ + + +

Mais do que isso, <audio> suporta todos os mesmos recursos que <video> — revise as seções acima para obter mais informações sobre elas.

+ +

Reiniciando a reprodução de mídia

+ +

A qualquer momento, você pode redefinir a mídia para o início, incluindo o processo de seleção da melhor fonte de mídia, se mais de uma for especificada usando o elemento  {{HTMLElement("source")}} — chamando o método {{domxref("HTMLMediaElement.load", "load()")}} do elemento:

+ +
const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+ +

Detectando adição e remoção de faixas

+ +

Você pode monitorar as listas de faixas em um elemento de mídia para detectar quando as faixas são adicionadas ou removidas da mídia do elemento. Por exemplo, você pode assistir ao evento {{event ("addtrack")}} ser disparado no objeto associado {{domxref ("AudioTrackList")}} (recuperado por meio de {{domxref ("HTMLMediaElement.audioTracks")}} ) para ser informado quando as faixas de áudio forem adicionadas à mídia:

+ +
const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+ +

Você encontrará mais informações sobre isso na nossa documentação {{domxref ("TrackEvent")}}.

+ +

Exibindo trilhas de texto em vídeo

+ +

Agora discutiremos um conceito um pouco mais avançado que é realmente útil para se conhecer. Muitas pessoas não podem ou não querem ouvir o conteúdo de áudio / vídeo que encontram na Web, pelo menos em determinados momentos. Por exemplo:

+ + + +

Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato WebVTT e o elemento {{htmlelement ("track")}}.

+ +
+

Nota: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".

+
+ +

O WebVTT é um formato para gravar arquivos de texto contendo várias seqüências de texto, juntamente com metadados, como a que horas do vídeo você deseja que cada sequência de texto seja exibida e até informações limitadas sobre estilo / posicionamento. Essas cadeias de texto são chamadas de pistas e existem vários tipos de pistas que são usadas para propósitos diferentes. As dicas mais comuns são:

+ +
+
subtitles
+
Traduções de material estrangeiro, para pessoas que não entendem as palavras ditas no áudio.
+
captions
+
Transcrições sincronizadas de diálogos ou descrições de sons significativos, para permitir que as pessoas que não conseguem ouvir o áudio entendam o que está acontecendo.
+
timed descriptions
+
Texto que deve ser falado pelo media player para descrever elementos visuais importantes para usuários cegos ou deficientes visuais.
+
+ +

Um arquivo WebVTT típico terá a seguinte aparência:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa:

+ +
    +
  1. Salve-o como um arquivo .vtt em um local adequado.
    2. +
  2. Vincule ao arquivo .vtt com o elemento {{htmlelement ("track")}}. <track> deve ser colocado dentro de <audio> ou <video>, mas depois de todos os elementos <source>. Use o atributo {{htmlattrxref ("kind", "track")}} para especificar se as pistas são subtitles, captions, ou descriptions. Além disso, use {{htmlattrxref ("srclang", "track")}} para informar ao navegador em que idioma você escreveu as legendas.
    3. +
+ +

Aqui está um exemplo:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Isso resultará em um vídeo com legendas exibidas, mais ou menos assim:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Para mais detalhes, leia Adicionando legendas e legendas ao vídeo HTML5. Você pode encontrar o exemplo que acompanha este artigo no Github, escrito por Ian Devlin (consulte o código-fonte também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.

+ +
+

Nota: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.

+
+ +

Aprendizado ativo: incorporando seu próprio áudio e vídeo

+ +

Para esse aprendizado ativo, gostaríamos (idealmente) de você sair para o mundo e gravar alguns de seus próprios vídeos e áudio - a maioria dos telefones hoje em dia permite gravar áudio e vídeo com muita facilidade, e desde que você possa transferi-lo para o seu computador, você pode usá-lo. Talvez você precise fazer algumas conversões para obter um WebM e MP4 no caso de vídeo e um MP3 e Ogg no caso de áudio, mas existem programas suficientes disponíveis para permitir isso sem problemas, como o Miro Video Converter e o Audacity. Gostaríamos que você experimentasse!

+ +

Se você não conseguir obter nenhum vídeo ou áudio, pode usar nossos exemplos de arquivos de áudio e vídeo para realizar este exercício. Você também pode usar nosso código de exemplo para referência.

+ +

Gostaríamos que você:

+ +
    +
  1. Salve seus arquivos de áudio e vídeo em um novo diretório no seu computador.
    2. +
  2. Crie um novo arquivo HTML no mesmo diretório, chamado index.html.
    3. +
  3. Adicione elementos <audio> e <video> à página; faça com que eles exibam os controles padrão do navegador.
    4. +
  4. Forneça os dois elementos <source> para que os navegadores encontrem o formato de áudio mais compatível e o carreguem. Isso deve incluir atributos de type.
    5. +
  5. Dê ao elemento <video> um pôster que será exibido antes que o vídeo comece a ser reproduzido. Divirta-se criando seu próprio gráfico de pôster.
    6. +
+ +

Para um bônus adicional, você pode tentar pesquisar faixas de texto e descobrir como adicionar legendas ao seu vídeo.

+ +

Resumo

+ +

E isso é um tudo; esperamos que você tenha se divertido brincando com vídeo e áudio em páginas da web! No próximo artigo, veremos outras maneiras de incorporar conteúdo na Web, usando tecnologias como {{htmlelement ("iframe")}}} e {{htmlelement ("object")}}.

+ +

Ver também

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git a/files/pt-br/learn/html/tables/basics/index.html b/files/pt-br/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..36dcaebfa7 --- /dev/null +++ b/files/pt-br/learn/html/tables/basics/index.html @@ -0,0 +1,559 @@ +--- +title: HTML table basics +slug: Aprender/HTML/Tables/Basics +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}
+ +

Este artigo é uma introdução às tabelas HTML, cobrindo o básico, como linhas e células, cabeçalhos, fazendo as células ocuparem várias colunas e linhas e como agrupar todas as células em uma coluna para fins de estilo.

+ + + + + + + + + + + + +
Pré-requisitos:Noções básicas de HTML (consulte Introdução ao HTML ).
Objetivo:Para obter familiaridade básica com tabelas HTML.
+ +

O que é uma tabela?

+ +

Uma tabela é um conjunto estruturado de dados composto de linhas e colunas (dados tabulares). Uma tabela permite consultar de forma rápida e fácil valores que indicam algum tipo de conexão entre diferentes tipos de dados, por exemplo, uma pessoa e sua idade, ou um dia da semana, ou os horários de uma piscina local.

+ +

Uma tabela de amostra mostrando nomes e idades de algumas pessoas - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Um cronograma de natação mostrando uma tabela de dados de amostra

+ +

As tabelas são muito comumente usadas na sociedade humana, e têm sido por muito tempo, como evidenciado por este documento do Censo dos EUA de 1800:

+ +

Um documento de pergaminho muito antigo; os dados não são facilmente legíveis, mas mostram claramente uma tabela de dados sendo usada.

+ +

Portanto, não é de se admirar que os criadores do HTML tenham fornecido um meio de estruturar e apresentar dados tabulares na web.

+ +

Como funciona uma tabela?

+ +

Tabelas possuem estrutura. As informações são facilmente interpretadas fazendo associações visuais entre os cabeçalhos de linha e coluna. Veja a tabela abaixo, por exemplo, e encontre um gigante gasoso Júpiter com 62 luas. Você pode encontrar a resposta associando os cabeçalhos de linha e coluna relevantes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dados sobre os planetas do nosso sistema solar (fatos planetários retirados da Planilha Planetária da Nasa - Métrica .
NomeMassa (10 24 kg)Diâmetro (km)Densidade (kg/m 3 )Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
Terrestial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
Venus4.8712,10452438.92802.0108.24640
Earth5.9712,75655149.824.0149.6151Our world
Mars0.6426,79239333.724.7227.9-652The red planet
Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
Saturn568120,5366879.010.71433.5-14062
Ice giantsUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255Declassified as a planet in 2006, but this remains controversial.
+ +

Quando criadas corretamente, até pessoas cegas podem interpretar dados tabulares em uma tabela HTML - uma tabela HTML bem sucedida deve melhorar a experiência tanto de usuários com deficiências visuais quanto daqueles capazes de ver

+ +

Estilizando tabelas

+ +

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

+ +

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

+ +

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

+ +

When should you NOT use HTML tables?

+ +

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

+ +

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

+ +
    +
  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
    2. +
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
    3. +
  3. Tables are not automatically responsive: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
    4. +
+ +

Active learning: Creating your first table

+ +

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

+ +
    +
  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
    2. +
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
    3. +
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

+ +

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

+ +
    +
  1. Place the four cells you've already created inside <tr> tags, like so: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.
    3. +
+ +

This should result in a table that looks something like the following:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Note: You can also find this on GitHub as simple-table.html (see it live also).

+
+ +

Adding headers with <th> elements

+ +

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Now the actual rendered table:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

+ +

Active learning: table headers

+ +

Let's have a go at improving this table.

+ +
    +
  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
    2. +
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
    3. +
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.
    4. +
+ +
+

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

+
+ +

Why are headers useful?

+ +

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

+ +
+

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

+
+ +

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

+ +

Allowing cells to span multiple rows and columns

+ +

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

+ +

The initial markup looks like this:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

But the output doesn't give us quite what we want:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
+ +

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

+ +

Let's use colspan and rowspan to improve this table.

+ +
    +
  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
    2. +
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
    3. +
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
    4. +
  4. Save and open your code in a browser to see the improvement.
    5. +
+ +
+

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

+
+ + +
+ +

Providing common styling to columns

+ +

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

+ +
+

Note: Styling columns like this is limited to a few properties: border, background, width, and visibility. To set other properties you'll have to either style every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

+
+ +

Take the following simple example:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Which gives us the following result:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column.

+ +

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

+ +

Active learning: colgroup and col

+ +

Now it's time to have a go yourself.

+ +

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recreate the table by following the steps below.

+ +
    +
  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
    2. +
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
    3. +
  3. The first two columns need to be left unstyled.
    4. +
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
    5. +
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
    6. +
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
    7. +
  7. Adicione uma cor de fundo diferente mais uma borda à sexta coluna, para indicar que este é um dia especial e ela está dando uma nova aula. Os valores do seu styleatributo sãobackground-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Os últimos dois dias são dias livres, então apenas defina-os para nenhuma cor de fundo, mas uma largura definida; o valor do styleatributo éwidth: 42px;
    9. +
+ +

Veja como você segue com o exemplo. Se você tiver dúvidas ou quiser verificar seu trabalho, pode encontrar nossa versão no GitHub como schedule-fixed.html ( veja ao vivo também ).

+ +

Resumo

+ +

Isso envolve o básico das tabelas HTML. No próximo artigo, veremos alguns recursos de mesa um pouco mais avançados e começaremos a pensar como eles são acessíveis para pessoas com deficiência visual.

+ +
{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}
+ +
+

Neste módulo

+ + +
diff --git a/files/pt-br/learn/html/tables/index.html b/files/pt-br/learn/html/tables/index.html new file mode 100644 index 0000000000..990e9ad438 --- /dev/null +++ b/files/pt-br/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: Tabelas em HTML +slug: Aprender/HTML/Tables +tags: + - tabelas +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Uma tarefa muito comum em HTML é estruturar os dados tabulares, e há vários elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem CSS para estilização, o HTML torna fácil a exibição de tabelas com informação na Web, tais como o seu plano de lições escolares, o horário na sua piscina local, ou estatísticas sobre os seus dinossauros favoritos ou seu time de futebol favorito. Este módulo te guia por tudo que você precisa saber sobre a estruturação de dados tabulares utilizando o HTML.

+ +

Pré-requisitos

+ +

Antes de iniciar este módulo, você deverá ter domínio dos básicos de HTML — consulte Introdução ao HTML.

+ +
+

Nota: se está utilizando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios arquivos, pode testar a maioria dos exemplos de código num programa de codificação on-line, tais como JSBin ou Thimble.

+
+ +

Guias

+ +

Este módulo contém os seguintes artigos:

+ +
+
HTML - o básico sobre tabelas
+
Este artigo apresenta as tabelas HTML, cobrindo o essencial, tal como linhas e células, cabeçalhos, como extender células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilo.
+
HTML - funcionalidades avançadas de tabelas e acessibilidade
+
No segundo artigo deste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML — tais como legendas/resumos e agrupar as suas filas no cabeçalho da tabela (head), seções de corpo (body) e rodapé (footer) — bem como, veremos sobre a acessibilidade das tabelas para os utilizadores deficientes visuais .
+
+ +

Exercícios

+ +
+
Estruturar dados sobre planetas
+
Na nossa avaliação sobre tabelas em HTML, vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.
+
diff --git a/files/pt-br/learn/index.html b/files/pt-br/learn/index.html new file mode 100644 index 0000000000..cef65bb9c7 --- /dev/null +++ b/files/pt-br/learn/index.html @@ -0,0 +1,129 @@ +--- +title: Aprendendo desenvolvimento web +slug: Aprender +tags: + - Aprender + - CSS + - HTML + - Index + - Iniciante + - Intro + - Novato + - Web +translation_of: Learn +--- +

{{LearnSidebar}}

+ +

Bem-vindo à área de aprendizado da MDN. Este conjunto de artigos tem como objetivo fornecer aos iniciantes no desenvolvimento web tudo o que eles precisam para começar a codificar sites.

+ +

O objetivo desta área da MDN não é levá-lo de "iniciante" a "especialista", mas levá-lo de "iniciante" a "confortável". A partir daí, você poderá começar a fazer o seu próprio caminho, aprendendo com o restante da MDN e outros recursos intermediários a avançados que assumem muito conhecimento prévio.

+ +

Se você é um iniciante, o desenvolvimento web pode ser desafiador - nós o ajudaremos e forneceremos detalhes suficientes para que você se sinta à vontade e aprenda os tópicos adequadamente. Você deve se sentir em casa, seja um aluno aprendendo desenvolvimento web (sozinho ou como parte de uma classe), um professor que procura materiais para a aula, um hobby ou alguém que só quer entender mais sobre como as tecnologias web funcionam.

+ +

O que há de novo?

+ +

O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as Notas de versão da área de aprendizado para mostrar o que mudou - verifique regularmente!

+ +

Se você tiver dúvidas sobre os tópicos que gostaria de ver cobertos ou que estão faltando, envie-nos uma mensagem em nosso Fórum de discussão.

+ +

Onde começar

+ + + +
+

Nota: Nosso glossário fornece definições de terminologia.

+
+ +

{{LearnBox({"title":"Entrada aleatória do glossário"})}}

+ +

Assuntos abordados

+ +

A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.

+ +
+
Intordução à Web
+
Fornece uma introdução prática ao desenvolvimento da web para iniciantes.
+
HTML - Estruturando a Web
+
HTML é a linguagem que usamos para estruturar as diferentes partes do nosso conteúdo e definir qual é o seu significado ou propósito. Este tópico ensina HTML em detalhes.
+
CSS - Estilizando a Web
+
CSS é a linguagem que podemos usar para estilizar e esquematizar nosso conteúdo web, além de adicionar comportamentos como animação. Este tópico fornece uma cobertura abrangente de CSS.
+
JavaScript — Script dinamico do lado do cliente
+
JavaScript é a linguagem de script usada para adicionar funcionalidade dinâmica a páginas da web. Este tópico ensina todos os elementos essenciais necessários para se sentir confortável com a escrita e a compreensão do JavaScript.
+
Formulários web - Trabalhando com dados do usuário
+
Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados ​​para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. Nos artigos listados abaixo, abordaremos todos os aspectos essenciais da estruturação, estilo e interação com os formulários web.
+
Acessibilidade - torne a web utilizável por todos
+
Acessibilidade é a prática de disponibilizar o conteúdo web para o maior número possível de pessoas, independentemente da deficiência, dispositivo, localidade ou outros fatores de diferenciação. Este tópico fornece tudo o que você precisa saber.
+
Desempenho da Web - tornando os sites rápidos e responsivos
+
O desempenho da Web é a arte de garantir que os aplicativos façam download rápido e respondam à interação do usuário, independentemente da capacidade, tamanho da tela, rede ou recursos do dispositivo.
+
Ferramentas e testes
+
+

Este tópico aborda as ferramentas que os desenvolvedores usam para facilitar seu trabalho, como ferramentas de teste entre navegadores, linters, formatadores, ferramentas de transformação, sistemas de controle de versão e ferramentas de implantação.

+
+
Programação do site no servidor
+
Mesmo se você estiver se concentrando no desenvolvimento web do lado do cliente, ainda é útil saber como os servidores e os recursos de código do lado do servidor funcionam. Este tópico fornece uma introdução geral sobre como funciona o lado do servidor e tutoriais detalhados que mostram como criar um aplicativo do lado do servidor usando duas frameworks populares - Django (Python) e Express (Node.js).
+
+ +

Obtendo nossos exemplos de código

+ +

Os exemplos de código que você encontrará na Área de aprendizado estão disponíveis no GitHub. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o download de um ZIP da última ramificação do código mestre.

+ +

Se você preferir copiar o repositório de uma maneira mais flexível que permita atualizações automáticas, siga as instruções mais complexas:

+ +
    +
  1. Instale o Git na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.
    2. +
  2. Abra o prompt de comando do seu computador (Windows) ou terminal (Linux, macOS).
    3. +
  3. Para copiar o repositório da área de aprendizado para uma pasta chamada learning-area no local atual para o qual o prompt de comando / terminal está apontando, use o seguinte comando: + 
    git clone https://github.com/mdn/learning-area
    +
    4. +
  4. Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o comando cd).
    5. +
+ +

Você pode atualizar o repositório learning-area com as alterações feitas na versão principal no GitHub com as seguintes etapas:

+ +
    +
  1. No prompt de comando / terminal, entre no diretório learning-area usando cd. Por exemplo, se você estivesse no diretório pai: + + 
    cd learning-area
    +
    2. +
  2. Atualize o repositório usando o seguinte comando: + 
    git pull
    +
    3. +
+ +

Contate-nos

+ +

Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso Fórum de discussão. Gostaríamos de ouvir sua opinião sobre qualquer coisa que você acha que está errada ou ausente no site, solicitações de novos tópicos de aprendizado, solicitações de ajuda com itens que você não entende ou qualquer outra pergunta ou preocupação.

+ +

Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja como você pode ajudar e entre em contato! Temos o prazer em conversar com você, seja você um aluno, professor, desenvolvedor web experiente ou alguém interessado em ajudar a melhorar a experiência de aprendizado.

+ +

Veja também

+ +
+
Boletim informativo para desenvovedores mozilla
+
Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.
+
Learn JavaScript
+
Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.
+
Web demystified
+
Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por Jérémie Patonnier.
+
Codecademy
+
Um ótimo site interativo para aprender linguagens de programação do zero.
+
BitDegree
+
+

Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.

+
+
Code.org
+
Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.
+
EXLskills
+
Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.
+
freeCodeCamp.org
+
Site interativo com tutoriais e projetos para aprender desenvolvimento web.
+
Web literacy map
+
Uma estrutura para alfabetização na web de nível básico e habilidades do século XXI, que também fornece acesso a atividades de ensino classificadas por categoria.
+
Edabit
+
Milhares de desafios interativos de JavaScript.
+
diff --git a/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html new file mode 100644 index 0000000000..254bc41a99 --- /dev/null +++ b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html @@ -0,0 +1,523 @@ +--- +title: Escolhendo a abordagem correta +slug: Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta +translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+ +

To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a reasonable understanding of JavaScript fundamentals.
Objective:To be able to make a sound choice of when to use different asynchronous programming techniques.
+ +

Asynchronous callbacks

+ +

Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.

+ + + + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYes (recursive callbacks)Yes (nested callbacks)No
+ +

Code example

+ +

An example that loads a resource via the XMLHttpRequest API (run it live, and see the source):

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

Pitfalls

+ + + +

Browser compatibility

+ +

Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.

+ +

Further information

+ + + +

setTimeout()

+ +

setTimeout() is a method that allows you to run a function after an arbitrary amount of time has passed.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
YesYes (recursive timeouts)Yes (nested timeouts)No
+ +

Code example

+ +

Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code):

+ +
let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+ +

Pitfalls

+ +

You can use recursive setTimeout() calls to run a function repeatedly in a similar fashion to setInterval(), using code like this:

+ +
let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+ +

There is a difference between recursive setTimeout() and setInterval():

+ + + +

When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive setTimeout() — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.

+ +

Browser compatibility

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

+ +

Further information

+ + + +

setInterval()

+ +

setInterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as requestAnimationFrame(), but allows you to choose a running rate/frame rate.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
+ +

Code example

+ +

The following function creates a new Date() object, extracts a time string out of it using toLocaleTimeString(), and then displays it in the UI. We then run it once per second using setInterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source):

+ +
function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

Pitfalls

+ + + +

Browser compatibility

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

+ +

Further information

+ + + +

requestAnimationFrame()

+ +

requestAnimationFrame() is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of setInterval()/recursive setTimeout(), unless you need a specific framerate.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
+ +

Code example

+ +

A simple animated spinner; you can find this example live on GitHub (see the source code also):

+ +
const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+    if(!startTime) {
+        startTime = timestamp;
+    }
+
+    rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount > 359) {
+        rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    rAF = requestAnimationFrame(draw);
+}
+
+draw();
+ +

Pitfalls

+ + + +

Browser compatibility

+ +

{{Compat("api.Window.requestAnimationFrame")}}

+ +

Further information

+ + + +

Promises

+ +

Promises are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesSee Promise.all(), below
+ +

Code example

+ +

The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; see it live also, and see also the source code:

+ +
fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

Pitfalls

+ +

Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:

+ +
remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+ +

It is better to use the chaining power of promises to go with a flatter, easier to parse structure:

+ +
remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+ +

or even:

+ +
remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+ +

That covers a lot of the basics. For a much more complete treatment, see the excellent We have a problem with promises, by Nolan Lawson.

+ +

Browser compatibility

+ +

{{Compat("javascript.builtins.Promise")}}

+ +

Further information

+ + + +

Promise.all()

+ +

A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoNoYes
+ +

Code example

+ +

The following example fetches several resources from the server, and uses Promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code:

+ +
function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response => {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in <img> elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+ +

Pitfalls

+ + + +

Browser compatibility

+ +

{{Compat("javascript.builtins.Promise.all")}}

+ +

Further information

+ + + +

Async/await

+ +

Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesYes (in combination with Promise.all())
+ +

Code example

+ +

The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (see it live, and see the source code):

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+ +

Pitfalls

+ + + +

Browser compatibility

+ +

{{Compat("javascript.statements.async_function")}}

+ +

Further information

+ + + +

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/asynchronous/conceitos/index.html b/files/pt-br/learn/javascript/asynchronous/conceitos/index.html deleted file mode 100644 index f2e6759f41..0000000000 --- a/files/pt-br/learn/javascript/asynchronous/conceitos/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Conceitos gerais da programação assíncrona -slug: Learn/JavaScript/Asynchronous/Conceitos -translation_of: Learn/JavaScript/Asynchronous/Concepts ---- -
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
- -

Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.
Objetivo:Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.
- -

Assíncrono?

- -

Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.

- -

Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."

- -

Multi-colored macOS beachball busy spinner

- -

Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da programação assincrona. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.

- -

Bloqueio de código

- -

Técnicas async (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de blocking; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.

- -

Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.

- -

No nosso exemplo simple-sync.html (veja aqui), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
- -

Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.

- -
-

Nota: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.

-
- -

No nosso segundo exemplo simple-sync-ui-blocking.html (veja aqui), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:

- - - -
function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('You clicked me!')
-);
- -

Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.

- -
-

Nota: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.

-
- -

E por quê isso acontece? A resposta é que o JavaScript é single threaded. E é neste ponto que precisamos introduzir a você o conceito de threads.

- -

Threads

- -

Uma thread é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:

- -
Tarefa A --> Tarefa B --> Tarefa C
- -

Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.

- -

Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:

- -
Thread 1: Tarefa A --> Tarefa B
-Thread 2: Tarefa C --> Tarefa D
- -

JavaScript é single threaded

- -

JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de main thread (thread principal). Nosso exemplo de cima é executado assim:

- -
Main thread: Renderizar circulos no canvas --> Mostrar alert()
- -

Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As Web workers te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.

- -
  Main thread: Tarefa A --> Tarefa C
-Worker thread: Tarefa pesada B
- -

Com isso em mente, dê uma olhada em simple-sync-worker.html (veja aqui), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma tread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira opreção não bloqueia a segunda.

- -

Código assíncrono

- -

Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.

- -

O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:

- -
Main thread: Tarefa A --> Tarefa B
- -

Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.

- -
  Main thread: Tarefa A --> Tarefa B --> |Tarefa D|
-Worker thread: Tarefa C ---------------> |      |
- -

Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.

- -

Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como Promises te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: 

- -
Main thread: Tarefa A                   Tarefa B
-    Promise:       |___operação async___|
- -

Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.

- -

Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.

- -

Conclusão

- -

O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.

- -

Nesse módulo

- - diff --git a/files/pt-br/learn/javascript/asynchronous/concepts/index.html b/files/pt-br/learn/javascript/asynchronous/concepts/index.html new file mode 100644 index 0000000000..f2e6759f41 --- /dev/null +++ b/files/pt-br/learn/javascript/asynchronous/concepts/index.html @@ -0,0 +1,155 @@ +--- +title: Conceitos gerais da programação assíncrona +slug: Learn/JavaScript/Asynchronous/Conceitos +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+ +

Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.
Objetivo:Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.
+ +

Assíncrono?

+ +

Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.

+ +

Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."

+ +

Multi-colored macOS beachball busy spinner

+ +

Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da programação assincrona. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.

+ +

Bloqueio de código

+ +

Técnicas async (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de blocking; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.

+ +

Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.

+ +

No nosso exemplo simple-sync.html (veja aqui), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+ +

Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.

+ +
+

Nota: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.

+
+ +

No nosso segundo exemplo simple-sync-ui-blocking.html (veja aqui), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:

+ + + +
function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('You clicked me!')
+);
+ +

Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.

+ +
+

Nota: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.

+
+ +

E por quê isso acontece? A resposta é que o JavaScript é single threaded. E é neste ponto que precisamos introduzir a você o conceito de threads.

+ +

Threads

+ +

Uma thread é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:

+ +
Tarefa A --> Tarefa B --> Tarefa C
+ +

Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.

+ +

Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:

+ +
Thread 1: Tarefa A --> Tarefa B
+Thread 2: Tarefa C --> Tarefa D
+ +

JavaScript é single threaded

+ +

JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de main thread (thread principal). Nosso exemplo de cima é executado assim:

+ +
Main thread: Renderizar circulos no canvas --> Mostrar alert()
+ +

Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As Web workers te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.

+ +
  Main thread: Tarefa A --> Tarefa C
+Worker thread: Tarefa pesada B
+ +

Com isso em mente, dê uma olhada em simple-sync-worker.html (veja aqui), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma tread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira opreção não bloqueia a segunda.

+ +

Código assíncrono

+ +

Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.

+ +

O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:

+ +
Main thread: Tarefa A --> Tarefa B
+ +

Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.

+ +
  Main thread: Tarefa A --> Tarefa B --> |Tarefa D|
+Worker thread: Tarefa C ---------------> |      |
+ +

Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.

+ +

Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como Promises te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: 

+ +
Main thread: Tarefa A                   Tarefa B
+    Promise:       |___operação async___|
+ +

Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.

+ +

Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.

+ +

Conclusão

+ +

O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.

+ +

Nesse módulo

+ + diff --git a/files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html b/files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html deleted file mode 100644 index 254bc41a99..0000000000 --- a/files/pt-br/learn/javascript/asynchronous/escolhendo_abordagem_correta/index.html +++ /dev/null @@ -1,523 +0,0 @@ ---- -title: Escolhendo a abordagem correta -slug: Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta -translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
- -

To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a reasonable understanding of JavaScript fundamentals.
Objective:To be able to make a sound choice of when to use different asynchronous programming techniques.
- -

Asynchronous callbacks

- -

Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.

- - - - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYes (recursive callbacks)Yes (nested callbacks)No
- -

Code example

- -

An example that loads a resource via the XMLHttpRequest API (run it live, and see the source):

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

Pitfalls

- - - -

Browser compatibility

- -

Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.

- -

Further information

- - - -

setTimeout()

- -

setTimeout() is a method that allows you to run a function after an arbitrary amount of time has passed.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
YesYes (recursive timeouts)Yes (nested timeouts)No
- -

Code example

- -

Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code):

- -
let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
- -

Pitfalls

- -

You can use recursive setTimeout() calls to run a function repeatedly in a similar fashion to setInterval(), using code like this:

- -
let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
- -

There is a difference between recursive setTimeout() and setInterval():

- - - -

When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive setTimeout() — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.

- -

Browser compatibility

- -

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

- -

Further information

- - - -

setInterval()

- -

setInterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as requestAnimationFrame(), but allows you to choose a running rate/frame rate.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
- -

Code example

- -

The following function creates a new Date() object, extracts a time string out of it using toLocaleTimeString(), and then displays it in the UI. We then run it once per second using setInterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source):

- -
function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

Pitfalls

- - - -

Browser compatibility

- -

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

- -

Further information

- - - -

requestAnimationFrame()

- -

requestAnimationFrame() is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of setInterval()/recursive setTimeout(), unless you need a specific framerate.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
- -

Code example

- -

A simple animated spinner; you can find this example live on GitHub (see the source code also):

- -
const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-    if(!startTime) {
-        startTime = timestamp;
-    }
-
-    rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount > 359) {
-        rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    rAF = requestAnimationFrame(draw);
-}
-
-draw();
- -

Pitfalls

- - - -

Browser compatibility

- -

{{Compat("api.Window.requestAnimationFrame")}}

- -

Further information

- - - -

Promises

- -

Promises are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesSee Promise.all(), below
- -

Code example

- -

The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; see it live also, and see also the source code:

- -
fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

Pitfalls

- -

Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:

- -
remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
- -

It is better to use the chaining power of promises to go with a flatter, easier to parse structure:

- -
remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
- -

or even:

- -
remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
- -

That covers a lot of the basics. For a much more complete treatment, see the excellent We have a problem with promises, by Nolan Lawson.

- -

Browser compatibility

- -

{{Compat("javascript.builtins.Promise")}}

- -

Further information

- - - -

Promise.all()

- -

A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoNoYes
- -

Code example

- -

The following example fetches several resources from the server, and uses Promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code:

- -
function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response => {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in <img> elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
- -

Pitfalls

- - - -

Browser compatibility

- -

{{Compat("javascript.builtins.Promise.all")}}

- -

Further information

- - - -

Async/await

- -

Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesYes (in combination with Promise.all())
- -

Code example

- -

The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (see it live, and see the source code):

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
- -

Pitfalls

- - - -

Browser compatibility

- -

{{Compat("javascript.statements.async_function")}}

- -

Further information

- - - -

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

- -

In this module

- - diff --git a/files/pt-br/learn/javascript/asynchronous/introducing/index.html b/files/pt-br/learn/javascript/asynchronous/introducing/index.html new file mode 100644 index 0000000000..b95a88d35c --- /dev/null +++ b/files/pt-br/learn/javascript/asynchronous/introducing/index.html @@ -0,0 +1,283 @@ +--- +title: Introdução ao JavaScript Async +slug: Learn/JavaScript/Asynchronous/Introdução +translation_of: Learn/JavaScript/Asynchronous/Introducing +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
+ +
Neste artigo nós recapitulamos brevemente os problemas que são associados com o JavaScript síncrono, e dar  uma primeira olhada em algumas das diferentes técnicas assíncronas que você vai encontrar, mostrando como elas podem nos ajudar a resolver tais problemas.
+ +
+ + + + + + + + + + + + +
Pré-requisitos:Conhecimentos básicos de informática e sobre os fundamentos do JavaScript.
Objetivo:Ganhar familiaridade com o que é o Js assíncrono e como ele se difere do Js síncrono.
+ +

JavaScript síncrono

+ +

Para entendermos o que é o {{Glossary("asynchronous")}} JavaScript, nós primeiro temos que ter certeza que entedemos o que é o {{Glossary("synchronous")}} JavaScript. Essa seção revê um pouco das informações que nós vimos no artigo anterior.

+ +

Muitas das funcionalidades que nós vimos em áreas anteriores são síncronas — você executa um código, e o reultado é retornado assim que o navegador puder. Vamos ver um exemplo simples (veja aqui, e veja o código fonte):

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  alert('Você clicou em mim!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'Este é um novo parágrafo adicionado';
+  document.body.appendChild(pElem);
+});
+
+ +

Neste bloco, as linhas são executadas uma após a outra:

+ +
    +
  1. Nós damos referência à um elemento {{htmlelement("button")}} que já está disponível na DOM.
    2. +
  2. Nós adicionamos um evento de click, e quando ele for clicado ele fará o seguinte: +
      +
    1. Mostrar uma mensagem no alert().
      2. +
    2. Uma vez que o alert for dispensado, nós criamos um elemento {{htmlelement("p")}}.
      3. +
    3. Depois nós o preenchemos com um texto.
      4. +
    4. E finalmente, o adicionamos no body.
      5. +
    +
    3. +
+ +

Enquanro cada operação é processada, nada mais pode acontecer — a renderização é pausada. Isso acontece porque o JavaScript opera em uma única thread (JavaScript é single threaded). Apenas uma coisa pode acontecer por vez, em uma única thread principal, e tudo é bloqueado até que a operação seja concluída.

+ +

Então, no exemplo acima, depois que você tenha clicado no botão, o parágrafo não vai aparecer até que o botão OK do alert seja pressionado. Tente isso com o botão a seguir:

+ + + +

{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}

+ +
+

Nota: É importante lembrar que, mesmo sendo muito útil para demonstar uma situação de blocking, o alert() não é de bom uso em aplicativos reais.

+
+ +

Asynchronous JavaScript

+ +

Por razões esclarecidas anteriormente (e.g. relativas ao blocking), muitas funcionalidades de APIs da Web agora usam código assíncrono na execução, especialmente aquelas que acessam ou buscam algum tipo de recurso de um dispositivo externo, como pegar um arquivo da rede, acessar um banco de dados e retornar dados dele, acessar uma stream de uma web cam, ou transmitir uma tela para um dispositivo VR.

+ +

Por que é tão difícil trabalhar com isso usando códigos síncronos? Vamos dar uma olhada em um exemplo rápido. Quando você pega uma imagem de um servidor, você não pode retornar o resultado imediatamente. Isso significa que o pseudocódigo a seguir não poderia funcionar:

+ +
let resposta = fetch('myImage.png');
+let blob = resposta.blob();
+// Mostra sua imagem na UI
+ +

Isso acontece por que você não sabe quanto tempo a imagem levará para ser baixada, então quando você executar a segunda linha, ela vai resultar em um erro (provalvelmente sempre) porque a  resposta não estará disponível ainda. Você precisa que o seu código espere até que a resposta seja retornada antes de fazer algo com ela.

+ +

Existem dois tipos principais de estilo de código assíncrono que você encontrará no código JavaScript, as callbacks com um estilo old-school e código em um estilo das promises mais recente. Nas seções abaixo, revisaremos cada um deles por vez.

+ +

Callbacks assíncronas

+ +

Callback são funções que são passada como parâmetros na chamada de outra função que vai executar código por trás do panos. Quando esse código por trás dos panos terminar de ser executado, a função callback será chamada para te informar que a tarefa foi finalizada ou que algo do seu interesse aconteceu. O uso das callbacks é um pouco antiquado agora, mas você ainda pode vê-las em um número de APIs comumente usadas.

+ +

Um exemplo de uma callback async é o segundo parâmetro do método {{domxref("EventTarget.addEventListener", "addEventListener()")}} (como vimos em ação anteriormente):

+ +
btn.addEventListener('click', () => {
+  alert('Você clicou em mim!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'Este é um novo parágrafo.';
+  document.body.appendChild(pElem);
+});
+ +

O primeiro parâmetro é o tipo de evento a ser executado e o segundo parâmetro é uma função callback que é chamada quando o evento é disparado.

+ +

Quando passamos uma função callback como um parâmetro em outra função, nós apenas estamos passando a rêferencia da função como argumento, ou seja, a função callback não é executada imediatamente. Ela é chamada de volta assíncronamente dentro do corpo da função que a contém, que é responsável por executar a função callback quando for necessário.

+ +

Você pode escrever a sua própria função que contém uma callback facilmente. Vamos dar uma olhada em outro exemplo que carrega uma arquivo usando a API XMLHttpRequest (veja aqui, and veja o código fonte):

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

Aqui nós criamos uma função displayImage() que simplesmente representa um blob que foi passada à ela como uma URL de objeto, e depois cria uma imagem para mostrar a URL, adicionando-a ao <body> do documento. Entretando, nós criamos depois uma função loadAsset() que pega uma callback como parâmetro, junto com uma URL a ser buscada e um tipo para o conteúdo. Ela usa o XMLHttpRequest (abreviação: "XHR") para buscar o recurso na URL dada, para depois passar a resposta para a callback para fazer algo com isso. Neste caso a callback está esperando o XHR  terminar de baixar o recurso (usando o manipulador de eventos onload) antes de passá-lo para a callback.

+ +

Callback são versáteis — elas não apenas lhe permitem controlar a ordem em que as funções são executadas e quais dados são passados entre elas, elas também podem passar dados para diferentes funçoes dependendo das circunstâncias. Então você pode ter ações diferentes para executar na resposta baixada, como processJSON(), displayText(), etc.

+ +

Note que nem todas as callback são assíncronas — algumas são executadas de um modo síncrono. Um exemplo é quando nós usamos o método {{jsxref("Array.prototype.forEach()")}} para iterar sobre os itens de uma array (veja aqui, e a fonte):

+ +
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(index + '. ' + eachName);
+});
+ +

Neste exemplo nós iteramos sobra uma array de Deuses Gregos e imprimos o índice e seus valores no console. O parâmetro de forEach() é uma callback function, que por si só toma dois parâmetros: uma refêrencia ao nome da array e e os valores dos índices. Entretanto, ela não espera por algo para fazer a execução, pois isso acontece imediatamente

+ +

Promises

+ +

Promises são uma nova maneira de escrever código assíncrono que você verá em APIs Web modernas. Um bom exemplo disso é a API fetch(), que é basicamente uma versão mais moderna e eficiente de {{domxref("XMLHttpRequest")}}. Vamos dar uma olhada em um exemplo rápido, do nosso artigo de Pegando dados do servidor:

+ +
fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});
+ +
+

Nota: Você pode encontrar a versão finalizada no GitHub (veja aqui, e também seja a execução).

+
+ +

Aqui nós vemos fetch() pegando um único parâmetro — a URL de um recurso que você quer pegar da rede — e retornando uma promise. A promise é um objeto que representa a conclusão ou falha da operação assíncrona. Ela represente um estado intermediário, por assim dizer. É praticamente o jetio do navegador de dizer "Eu prometo voltar para você com a resposta o mais rápido possível", daí o nome "promessa".

+ +

Você pode levar um tempo para se acostumar com esse conceito; Ele se parece um pouco com o {{interwiki("wikipedia", "Gato de Schrödinger")}} em ação. Nenhum dos possíveis resultados aconteceu ainda, então a operação fetch está esperando pelo resultado do navegador que vai completar a operação em algum ponto no futuro.

+ +

Nós temos três blocos de código encadeados ao fim do fetch():

+ + + +
+

Nota: Você vai aprender mais sobre promises mais tarde no módulo, então não se preocupe se você não entendeu muito bem.

+
+ +

A fila de eventos

+ +

Operações assíncronas como as promises são colocadas em uma fila de eventos, que é executada depois que a main thread terminar de ser processada. As operações serão completadas assim que for possível e depois retornam seus resultados para o ambiente JavaScript.

+ +

Promises versus callbacks

+ +

As promises tem algumas semelhanças com as callbacks. Elas são basicamente um objeto retornado em que você vincula funções callback, ao invés de passar as callbacks para uma função.

+ +

Entretanto, as promises são feitas especificamente para lidarmos com operações async, e ter muitas vantagens sobre as velhas callbacks:

+ + + +

A natureza do código assíncrono

+ +

Vamos explorar um exemplo que ilustra a natureza do código assíncrono, mostrando o que pode acontecer quando nós não estamos cientes da ordem de execução e dos problemas em tentar tratar código async como código síncrono. O exemplo a seguir é muito similar ao que vimos antes (veja aqui, e a fonte). Uma diferença e que nós icluimos um número de declarações {{domxref("console.log()")}} para ilustrar na ordem que você pensa que o código fosse executado.

+ +
console.log ('Starting');
+let image;
+
+fetch('coffee.jpg').then((response) => {
+  console.log('It worked :)')
+  return response.blob();
+}).then((myBlob) => {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) => {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});
+
+console.log ('All done!');
+ +

O navegador vai começar a executar o código, veja a primeira declaração console.log()(Starting) e a execute, e depois crie a variável image.

+ +

Depois a segunda linha vai começar a ser executada começando com o bloco fetch(), mas desde que fetch() é executado assíncronamente sem bloquear nada, a execução do código continua mesmo depois do código promise, alcançando a última declaração console.log()(All done!) e imprimindo a no console.

+ +

Uma vez que o bloco fetch() tenha terminado a sua execução e retornado seu resultado com os blocos .then(), nós finalmente veremos a segunda mensagem console.log() (It worked :)) appear. Então as mensagens aparecem nessa ordem:

+ + + +

Se isso te deixa confuso, então considere o exemplo a seguir:

+ +
console.log("registering click handler");
+
+button.addEventListener('click', () => {
+  console.log("get click");
+});
+
+console.log("all done");
+ +

Isso é bem similar no comportamento — a primeira e a terceira mensagens console.log() são mostradas imediatamente, mas a segunda está bloqueada até alguém clique no botão. O exemplo anterior funciona da mesma forma, exceto que no caso a segunda mensagem está bloqueada na promise pegando um recurso e depois o mostra na tela.

+ +

Em um exemplo mais superficial, esse tipo de configuração poderia causar um problema — você não pode incluir um bloco async que retorna um resultado, que depois depende de um código síncrono. Você não pode garantir que a função async vai retornar antes que o navegador processou o bloco síncrono.

+ +

Para ver isso em ação, tente fazer uma cópia local do nosso exemplo, e mudar o terceiro console.log() para o seguinte:

+ +
console.log ('Tudo Feito! ' + image.src + 'mostrada.');
+ +

Agora você deve ter um erro no seu console ao invés da terceira mensagem:

+ +
TypeError: image is undefined; can't access its "src" property
+ +

Isso acontece porque o navegador tenta executar o terceiro console.log() e o bloco fetch() não terminou de ser executado e não foi dado  um valor para a variável image.

+ +
+

Nota:Por razões de segurança, você não pode usar o fetch()  com arquivos do seu sistema local (ou executar operações localmente); para executar o exemplo acima você teria que rodá-lo em um servidor local.

+
+ +

Aprendizado ativo: faça tudo async!

+ +

Faça que o exemplo problemático de fetch() imprima três mensagens console.log() na tela na ordem desejada, você pode fazer a útima declaração console.log() assíncrona também. Isso pode ser feito colocando ela em outro bloco .then() encadeamo no final do segundo bloco, ou por simplesmente movê-lo para dentro do segundo bloco then().

+ +
+

Note: If you get stuck, you can find an answer here (see it running live also). You can also find a lot more information on promises in our Graceful asynchronous programming with Promises guide, later on in the module.

+
+ +

Conclusion

+ +

In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.

+ +

Whether we want to run code synchronously or asynchronously will depend on what we're trying to do.

+ +

There are times when we want things to load and happen right away. For example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible.

+ +

If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the main thread and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

+ +

In this module

+ + diff --git "a/files/pt-br/learn/javascript/asynchronous/introdu\303\247\303\243o/index.html" "b/files/pt-br/learn/javascript/asynchronous/introdu\303\247\303\243o/index.html" deleted file mode 100644 index b95a88d35c..0000000000 --- "a/files/pt-br/learn/javascript/asynchronous/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: Introdução ao JavaScript Async -slug: Learn/JavaScript/Asynchronous/Introdução -translation_of: Learn/JavaScript/Asynchronous/Introducing ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
- -
Neste artigo nós recapitulamos brevemente os problemas que são associados com o JavaScript síncrono, e dar  uma primeira olhada em algumas das diferentes técnicas assíncronas que você vai encontrar, mostrando como elas podem nos ajudar a resolver tais problemas.
- -
- - - - - - - - - - - - -
Pré-requisitos:Conhecimentos básicos de informática e sobre os fundamentos do JavaScript.
Objetivo:Ganhar familiaridade com o que é o Js assíncrono e como ele se difere do Js síncrono.
- -

JavaScript síncrono

- -

Para entendermos o que é o {{Glossary("asynchronous")}} JavaScript, nós primeiro temos que ter certeza que entedemos o que é o {{Glossary("synchronous")}} JavaScript. Essa seção revê um pouco das informações que nós vimos no artigo anterior.

- -

Muitas das funcionalidades que nós vimos em áreas anteriores são síncronas — você executa um código, e o reultado é retornado assim que o navegador puder. Vamos ver um exemplo simples (veja aqui, e veja o código fonte):

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  alert('Você clicou em mim!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'Este é um novo parágrafo adicionado';
-  document.body.appendChild(pElem);
-});
-
- -

Neste bloco, as linhas são executadas uma após a outra:

- -
    -
  1. Nós damos referência à um elemento {{htmlelement("button")}} que já está disponível na DOM.
    2. -
  2. Nós adicionamos um evento de click, e quando ele for clicado ele fará o seguinte: -
      -
    1. Mostrar uma mensagem no alert().
      2. -
    2. Uma vez que o alert for dispensado, nós criamos um elemento {{htmlelement("p")}}.
      3. -
    3. Depois nós o preenchemos com um texto.
      4. -
    4. E finalmente, o adicionamos no body.
      5. -
    -
    3. -
- -

Enquanro cada operação é processada, nada mais pode acontecer — a renderização é pausada. Isso acontece porque o JavaScript opera em uma única thread (JavaScript é single threaded). Apenas uma coisa pode acontecer por vez, em uma única thread principal, e tudo é bloqueado até que a operação seja concluída.

- -

Então, no exemplo acima, depois que você tenha clicado no botão, o parágrafo não vai aparecer até que o botão OK do alert seja pressionado. Tente isso com o botão a seguir:

- - - -

{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}

- -
-

Nota: É importante lembrar que, mesmo sendo muito útil para demonstar uma situação de blocking, o alert() não é de bom uso em aplicativos reais.

-
- -

Asynchronous JavaScript

- -

Por razões esclarecidas anteriormente (e.g. relativas ao blocking), muitas funcionalidades de APIs da Web agora usam código assíncrono na execução, especialmente aquelas que acessam ou buscam algum tipo de recurso de um dispositivo externo, como pegar um arquivo da rede, acessar um banco de dados e retornar dados dele, acessar uma stream de uma web cam, ou transmitir uma tela para um dispositivo VR.

- -

Por que é tão difícil trabalhar com isso usando códigos síncronos? Vamos dar uma olhada em um exemplo rápido. Quando você pega uma imagem de um servidor, você não pode retornar o resultado imediatamente. Isso significa que o pseudocódigo a seguir não poderia funcionar:

- -
let resposta = fetch('myImage.png');
-let blob = resposta.blob();
-// Mostra sua imagem na UI
- -

Isso acontece por que você não sabe quanto tempo a imagem levará para ser baixada, então quando você executar a segunda linha, ela vai resultar em um erro (provalvelmente sempre) porque a  resposta não estará disponível ainda. Você precisa que o seu código espere até que a resposta seja retornada antes de fazer algo com ela.

- -

Existem dois tipos principais de estilo de código assíncrono que você encontrará no código JavaScript, as callbacks com um estilo old-school e código em um estilo das promises mais recente. Nas seções abaixo, revisaremos cada um deles por vez.

- -

Callbacks assíncronas

- -

Callback são funções que são passada como parâmetros na chamada de outra função que vai executar código por trás do panos. Quando esse código por trás dos panos terminar de ser executado, a função callback será chamada para te informar que a tarefa foi finalizada ou que algo do seu interesse aconteceu. O uso das callbacks é um pouco antiquado agora, mas você ainda pode vê-las em um número de APIs comumente usadas.

- -

Um exemplo de uma callback async é o segundo parâmetro do método {{domxref("EventTarget.addEventListener", "addEventListener()")}} (como vimos em ação anteriormente):

- -
btn.addEventListener('click', () => {
-  alert('Você clicou em mim!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'Este é um novo parágrafo.';
-  document.body.appendChild(pElem);
-});
- -

O primeiro parâmetro é o tipo de evento a ser executado e o segundo parâmetro é uma função callback que é chamada quando o evento é disparado.

- -

Quando passamos uma função callback como um parâmetro em outra função, nós apenas estamos passando a rêferencia da função como argumento, ou seja, a função callback não é executada imediatamente. Ela é chamada de volta assíncronamente dentro do corpo da função que a contém, que é responsável por executar a função callback quando for necessário.

- -

Você pode escrever a sua própria função que contém uma callback facilmente. Vamos dar uma olhada em outro exemplo que carrega uma arquivo usando a API XMLHttpRequest (veja aqui, and veja o código fonte):

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

Aqui nós criamos uma função displayImage() que simplesmente representa um blob que foi passada à ela como uma URL de objeto, e depois cria uma imagem para mostrar a URL, adicionando-a ao <body> do documento. Entretando, nós criamos depois uma função loadAsset() que pega uma callback como parâmetro, junto com uma URL a ser buscada e um tipo para o conteúdo. Ela usa o XMLHttpRequest (abreviação: "XHR") para buscar o recurso na URL dada, para depois passar a resposta para a callback para fazer algo com isso. Neste caso a callback está esperando o XHR  terminar de baixar o recurso (usando o manipulador de eventos onload) antes de passá-lo para a callback.

- -

Callback são versáteis — elas não apenas lhe permitem controlar a ordem em que as funções são executadas e quais dados são passados entre elas, elas também podem passar dados para diferentes funçoes dependendo das circunstâncias. Então você pode ter ações diferentes para executar na resposta baixada, como processJSON(), displayText(), etc.

- -

Note que nem todas as callback são assíncronas — algumas são executadas de um modo síncrono. Um exemplo é quando nós usamos o método {{jsxref("Array.prototype.forEach()")}} para iterar sobre os itens de uma array (veja aqui, e a fonte):

- -
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
-
-gods.forEach(function (eachName, index){
-  console.log(index + '. ' + eachName);
-});
- -

Neste exemplo nós iteramos sobra uma array de Deuses Gregos e imprimos o índice e seus valores no console. O parâmetro de forEach() é uma callback function, que por si só toma dois parâmetros: uma refêrencia ao nome da array e e os valores dos índices. Entretanto, ela não espera por algo para fazer a execução, pois isso acontece imediatamente

- -

Promises

- -

Promises são uma nova maneira de escrever código assíncrono que você verá em APIs Web modernas. Um bom exemplo disso é a API fetch(), que é basicamente uma versão mais moderna e eficiente de {{domxref("XMLHttpRequest")}}. Vamos dar uma olhada em um exemplo rápido, do nosso artigo de Pegando dados do servidor:

- -
fetch('products.json').then(function(response) {
-  return response.json();
-}).then(function(json) {
-  products = json;
-  initialize();
-}).catch(function(err) {
-  console.log('Fetch problem: ' + err.message);
-});
- -
-

Nota: Você pode encontrar a versão finalizada no GitHub (veja aqui, e também seja a execução).

-
- -

Aqui nós vemos fetch() pegando um único parâmetro — a URL de um recurso que você quer pegar da rede — e retornando uma promise. A promise é um objeto que representa a conclusão ou falha da operação assíncrona. Ela represente um estado intermediário, por assim dizer. É praticamente o jetio do navegador de dizer "Eu prometo voltar para você com a resposta o mais rápido possível", daí o nome "promessa".

- -

Você pode levar um tempo para se acostumar com esse conceito; Ele se parece um pouco com o {{interwiki("wikipedia", "Gato de Schrödinger")}} em ação. Nenhum dos possíveis resultados aconteceu ainda, então a operação fetch está esperando pelo resultado do navegador que vai completar a operação em algum ponto no futuro.

- -

Nós temos três blocos de código encadeados ao fim do fetch():

- - - -
-

Nota: Você vai aprender mais sobre promises mais tarde no módulo, então não se preocupe se você não entendeu muito bem.

-
- -

A fila de eventos

- -

Operações assíncronas como as promises são colocadas em uma fila de eventos, que é executada depois que a main thread terminar de ser processada. As operações serão completadas assim que for possível e depois retornam seus resultados para o ambiente JavaScript.

- -

Promises versus callbacks

- -

As promises tem algumas semelhanças com as callbacks. Elas são basicamente um objeto retornado em que você vincula funções callback, ao invés de passar as callbacks para uma função.

- -

Entretanto, as promises são feitas especificamente para lidarmos com operações async, e ter muitas vantagens sobre as velhas callbacks:

- - - -

A natureza do código assíncrono

- -

Vamos explorar um exemplo que ilustra a natureza do código assíncrono, mostrando o que pode acontecer quando nós não estamos cientes da ordem de execução e dos problemas em tentar tratar código async como código síncrono. O exemplo a seguir é muito similar ao que vimos antes (veja aqui, e a fonte). Uma diferença e que nós icluimos um número de declarações {{domxref("console.log()")}} para ilustrar na ordem que você pensa que o código fosse executado.

- -
console.log ('Starting');
-let image;
-
-fetch('coffee.jpg').then((response) => {
-  console.log('It worked :)')
-  return response.blob();
-}).then((myBlob) => {
-  let objectURL = URL.createObjectURL(myBlob);
-  image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch((error) => {
-  console.log('There has been a problem with your fetch operation: ' + error.message);
-});
-
-console.log ('All done!');
- -

O navegador vai começar a executar o código, veja a primeira declaração console.log()(Starting) e a execute, e depois crie a variável image.

- -

Depois a segunda linha vai começar a ser executada começando com o bloco fetch(), mas desde que fetch() é executado assíncronamente sem bloquear nada, a execução do código continua mesmo depois do código promise, alcançando a última declaração console.log()(All done!) e imprimindo a no console.

- -

Uma vez que o bloco fetch() tenha terminado a sua execução e retornado seu resultado com os blocos .then(), nós finalmente veremos a segunda mensagem console.log() (It worked :)) appear. Então as mensagens aparecem nessa ordem:

- - - -

Se isso te deixa confuso, então considere o exemplo a seguir:

- -
console.log("registering click handler");
-
-button.addEventListener('click', () => {
-  console.log("get click");
-});
-
-console.log("all done");
- -

Isso é bem similar no comportamento — a primeira e a terceira mensagens console.log() são mostradas imediatamente, mas a segunda está bloqueada até alguém clique no botão. O exemplo anterior funciona da mesma forma, exceto que no caso a segunda mensagem está bloqueada na promise pegando um recurso e depois o mostra na tela.

- -

Em um exemplo mais superficial, esse tipo de configuração poderia causar um problema — você não pode incluir um bloco async que retorna um resultado, que depois depende de um código síncrono. Você não pode garantir que a função async vai retornar antes que o navegador processou o bloco síncrono.

- -

Para ver isso em ação, tente fazer uma cópia local do nosso exemplo, e mudar o terceiro console.log() para o seguinte:

- -
console.log ('Tudo Feito! ' + image.src + 'mostrada.');
- -

Agora você deve ter um erro no seu console ao invés da terceira mensagem:

- -
TypeError: image is undefined; can't access its "src" property
- -

Isso acontece porque o navegador tenta executar o terceiro console.log() e o bloco fetch() não terminou de ser executado e não foi dado  um valor para a variável image.

- -
-

Nota:Por razões de segurança, você não pode usar o fetch()  com arquivos do seu sistema local (ou executar operações localmente); para executar o exemplo acima você teria que rodá-lo em um servidor local.

-
- -

Aprendizado ativo: faça tudo async!

- -

Faça que o exemplo problemático de fetch() imprima três mensagens console.log() na tela na ordem desejada, você pode fazer a útima declaração console.log() assíncrona também. Isso pode ser feito colocando ela em outro bloco .then() encadeamo no final do segundo bloco, ou por simplesmente movê-lo para dentro do segundo bloco then().

- -
-

Note: If you get stuck, you can find an answer here (see it running live also). You can also find a lot more information on promises in our Graceful asynchronous programming with Promises guide, later on in the module.

-
- -

Conclusion

- -

In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.

- -

Whether we want to run code synchronously or asynchronously will depend on what we're trying to do.

- -

There are times when we want things to load and happen right away. For example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible.

- -

If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the main thread and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.

- - - -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

- -

In this module

- - diff --git a/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html b/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..d701a63823 --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,242 @@ +--- +title: Construa sua própria função +slug: Aprender/JavaScript/Elementos_construtivos/Build_your_own_function +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece experiência prática. Aqui você terá algumas práticas construindo sua própria função personalizada. Ao longo do caminho, também explicaremos alguns detalhes úteis sobre como lidar com funções.

+ + + + + + + + + + + + +
Pré-requisitos:Alfabetização básica em informática, um entendimento básico de HTML e CSS, Primeiros passos do JavaScript, Funções — blocos reutilizáveis de código.
Objetiva:Para fornecer alguma prática na criação de uma função personalizada e explicar alguns detalhes associados mais úteis.
+ +

Aprendizagem ativa: vamos construir uma função

+ +

A função personalizada que vamos construir será chamada  displayMessage(). Ele exibirá uma caixa de mensagem personalizada em uma página da Web e atuará como um substituto personalizado para a função de alert() interna do navegador. Já vimos isso antes, mas vamos apenas refrescar nossas memórias. Digite o seguinte no console JavaScript do seu navegador, em qualquer página de sua preferência:

+ +
alert('This is a message');
+ +

A função alert leva um único argumento — a string exibida na caixa de alerta. Tente variar a string para mudar a mensagem.

+ +

A função alert é limitada: você pode alterar a mensagem, mas não pode variar com facilidade nada, como cor, ícone ou qualquer outra coisa. Nós vamos construir um que se mostrará mais divertido.

+ +
+

Nota: Este exemplo deve funcionar bem em todos os navegadores modernos, mas o estilo pode parecer um pouco engraçado em navegadores um pouco mais antigos. Recomendamos que você faça esse exercício em um navegador moderno como o Firefox, o Opera ou o Chrome.

+
+ +

A função básica

+ +

Para começar, vamos montar uma função básica.

+ +
+

Note: Para convenções de nomenclatura de função, você deve seguir as mesmas regras das convenções de nomenclatura de variáveis. Algo bom é como você pode diferenciá-los — os nomes das funções aparecem com parênteses depois deles e as variáveis não.

+
+ +
    +
  1. Comece acessando o arquivo function-start.html e fazendo uma cópia local. Você verá que o HTML é simples — o corpo contém apenas um único botão. Também fornecemos algumas CSS básicas para estilizar a caixa de mensagem personalizada e um elemento {{htmlelement("script")}} vazio para colocar nosso JavaScript.
    2. +
  2. Em seguida, adicione o seguinte dentro do elemento <script> : + 
    function displayMessage() {
+
+}
    + Começamos com a palavra-chave function, o que significa que estamos definindo uma função. Isto é seguido pelo nome que queremos dar à nossa função, um par de parênteses e um conjunto de chaves. Quaisquer parâmetros que queremos dar à nossa função vão dentro dos parênteses, e o código que é executado quando chamamos a função vai dentro das chaves.
    3. +
  3. Por fim, adicione o seguinte código dentro das chaves: + 
    var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

Isso é um monte de código para passar, então vamos guiá-lo pouco a pouco.

+ +

A primeira linha usa uma função da API do DOM chamada {{domxref("document.querySelector()")}} para selecionar o elemento {{htmlelement("html")}} e armazenar uma referência a ele em uma variável chamada html, para que possamos fazer coisas com ela mais tarde:

+ +
var html = document.querySelector('html');
+ +

A próxima seção usa outra função da API do DOM chamada {{domxref("Document.createElement()")}} para criar um elemento {{htmlelement("div")}} elemento e armazenar uma referência a ele em uma variável chamada panel. Este elemento será o recipiente externo da nossa caixa de mensagens.

+ +

Em seguida, usamos outra função da API do DOM chamada {{domxref("Element.setAttribute()")}} para setar o atributo class atributo no nosso painel com um valor de msgBox. Isso é para facilitar o estilo do elemento — se você olhar para o CSS na página, verá que estamos usando um seletor de classe .msgBox para estilizar a caixa de mensagem e seu conteúdo.

+ +

Finalmente, chamamos uma função DOM chamada {{domxref("Node.appendChild()")}} na variável html vque armazenamos anteriormente, que nidifica um elemento dentro do outro como um filho dele. Nós especificamos o painel <div> como o filho que queremos acrescentar dentro do elemento <html> Precisamos fazer isso porque o elemento que criamos não aparecerá na página sozinho — precisamos especificar onde colocá-lo.

+ +
var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

As próximas duas seções fazem uso das mesmas funções createElement() e appendChild() que já vimos para criar dois novos elementos — um {{htmlelement("p")}} e um {{htmlelement("button")}} — e inseri-los na página como filhos do painel <div>. Nós usamos a sua propriedade {{domxref("Node.textContent")}} — que representa o conteúdo de texto de um elemento — para inserir uma mensagem dentro do parágrafo e um 'x' dentro do botão. Este botão será o que precisa ser clicado / ativado quando o usuário quiser fechar a caixa de mensagem.

+ +
var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

Finalmente, usamos um manipulador eventos {{domxref("GlobalEventHandlers.onclick")}} para fazer com que, quando o botão é clicado, algum código seja executado para excluir todo o painel da página — para fechar a caixa de mensagem.

+ +

Resumidamente, o manipulador onclick é uma propriedade disponível no botão (ou, na verdade, qualquer elemento na página) que pode ser definida para uma função para especificar qual código será executado quando o botão for clicado. Você aprenderá muito mais sobre isso em nosso artigo de eventos posteriores. Estamos tornando o manipulador onclick igual a uma função anônima, que contém o código a ser executado quando o botão é clicado. A linha dentro da função usa a função da API do DOM {{domxref("Node.removeChild()")}} para especificar que queremos remover um elemento filho específico do elemento HTML — nesse caso, o painel <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

Basicamente, todo esse bloco de código está gerando um bloco de HTML semelhante a isso e inserindo-o na página:

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Isso foi um monte de código para trabalhar — não se preocupe muito se você não se lembra exatamente como tudo funciona agora! A parte principal que queremos focar aqui é a estrutura e uso da função, mas queremos mostrar algo interessante para este exemplo.

+ +

Chamando a função

+ +

Você tem sua própria definição de função escrita em seu elemento  <script>, mas não fará nada do jeito que está.

+ +
    +
  1. Tente incluir a seguinte linha abaixo da sua função para chamá-lo: + 
    displayMessage();
    + Esta linha chama a função, fazendo com que ela seja executada imediatamente. Quando você salvar seu código e recarregá-lo no navegador, verá a pequena caixa de mensagem aparecer imediatamente, apenas uma vez. Nós só estamos chamando uma vez, afinal.
    2. +
  2. +

    Agora abra suas ferramentas de desenvolvedor do navegador na página de exemplo, vá para o console JavaScript e digite a linha novamente, você verá que ela aparece novamente! Então isso é divertido — agora temos uma função reutilizável que podemos chamar a qualquer momento que quisermos.

    + +

    Mas provavelmente queremos que apareça em resposta a ações do usuário e do sistema. Em um aplicativo real, essa caixa de mensagem provavelmente seria chamada em resposta a novos dados sendo disponibilizados, ou um erro ocorreria, ou o usuário tentando excluir seu perfil ("você tem certeza disso?") Ou o usuário adicionando um novo contato e a operação completando com sucesso ... etc.

    + +

    Nesta demonstração, faremos com que a caixa de mensagem apareça quando o usuário clicar no botão.

    +
    3. +
  3. Exclua a linha anterior que você adicionou.
    4. +
  4. Em seguida, vamos selecionar o botão e armazenar uma referência a ele em uma variável. Adicione a seguinte linha ao seu código, acima da definição da função: + 
    var btn = document.querySelector('button');
    +
    5. +
  5. Por fim, adicione a seguinte linha abaixo da anterior: + 
    btn.onclick = displayMessage;
    + De maneira semelhante à nossa linha  closeBtn.onclick... dentro da função, aqui estamos chamando algum código em resposta a um botão sendo clicado. Mas, neste caso, em vez de chamar uma função anônima contendo algum código, estamos chamando nosso nome de função diretamente.
    6. +
  6. Tente salvar e atualizar a página — agora você verá a caixa de mensagem quando clicar no botão.
    7. +
+ +

Você pode estar se perguntando por que não incluímos os parênteses após o nome da função. Isso ocorre porque não queremos chamar a função imediatamente — somente depois que o botão foi clicado. Se você tentar mudar a linha para

+ +
btn.onclick = displayMessage();
+ +

e salvar e recarregar, você verá que a caixa de mensagem aparece sem que o botão seja clicado! Os parênteses neste contexto são às vezes chamados de "operador de invocação de função". Você só os usa quando deseja executar a função imediatamente no escopo atual. No mesmo sentido, o código dentro da função anônima não é executado imediatamente, pois está dentro do escopo da função.

+ +

Se você tentou o último experimento, certifique-se de desfazer a última alteração antes de continuar.

+ +

Melhorando a função com parâmetros

+ +

Tal como está, a função ainda não é muito útil — nós não queremos apenas mostrar a mesma mensagem padrão todas as vezes. Vamos melhorar nossa função adicionando alguns parâmetros, permitindo-nos chamá-lo com algumas opções diferentes.

+ +
    +
  1. Primeiro de tudo, atualize a primeira linha da função: + 
    function displayMessage() {
    + para isso:
    2. +
  2. + 
    function displayMessage(msgText, msgType) {
    + Agora, quando chamamos a função, podemos fornecer dois valores de variáveis dentro dos parênteses para especificar a mensagem a ser exibida na caixa de mensagem e o tipo de mensagem que ela é.
    3. +
  3. Para utilizar o primeiro parâmetro, atualize a seguinte linha dentro da sua função: + 
    msg.textContent = 'This is a message box';
    + to + + 
    msg.textContent = msgText;
    +
    4. +
  4. Por último, mas não menos importante, você precisa atualizar sua chamada de função para incluir um texto de mensagem atualizado. Altere a seguinte linha: + 
    btn.onclick = displayMessage;
    + para este bloco: + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + Se quisermos especificar parâmetros dentro de parênteses para a função que estamos chamando, então não podemos chamá-la diretamente — precisamos colocá-lo dentro de uma função anônima para que não fique no escopo imediato e, portanto, não seja chamado imediatamente. Agora ele não será chamado até que o botão seja clicado.
    5. +
  5. Recarregue e tente o código novamente e você verá que ele ainda funciona muito bem, exceto que agora você também pode variar a mensagem dentro do parâmetro para obter mensagens diferentes exibidas na caixa!
    6. +
+ +

Um parâmetro mais complexo

+ +

Para o próximo parâmetro. Este vai envolver um pouco mais de trabalho — vamos configurá-lo para que, dependendo do parâmetro msgType, a função mostre um ícone diferente e uma cor de fundo diferente.

+ +
    +
  1. Primeiro de tudo, baixe os ícones necessários para este exercício (aviso e batepapo) do GitHub. Salve-os em uma nova pasta chamada  icons no mesmo local que seu arquivo HTML. + +
    Nota: Os icones aviso e batepapo são encontrado em iconfinder.com, e desenhados por Nazarrudin Ansyari. Obrigado!
    +
    2. +
  2. Em seguida, encontre o CSS dentro do seu arquivo HTML. Faremos algumas alterações para abrir caminho para os ícones. Primeiro, atualize a largura do .msgBox de: + 
    width: 200px;
    + para:
    3. +
  3. + 
    width: 242px;
    +
    4. +
  4. Em seguida, adicione as seguintes linhas dentro da regra .msgBox p { ... }: + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    5. +
  5. Agora precisamos adicionar código à nossa função displayMessage() para manipular a exibição dos ícones. Adicione o seguinte bloco logo acima da chave de fechamento (}) da sua função: + 
    if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}
    + Aqui, se o parâmetro msgType estiver definido como 'warning', o ícone de aviso será exibido e a cor de fundo do painel será definida como vermelha. Se estiver definido para 'chat', o ícone de bate-papo é exibido e a cor de fundo do painel é definida como azul aqua. Se o parâmetro msgType não estiver definido (ou para algo diferente), então a parte else { ... } do código entra em jogo, e o parágrafo é simplesmente fornecido padding padrão e nenhum ícone, sem conjunto de cores do painel de fundo também. Isso fornece um estado padrão se nenhum parâmetro msgType for fornecido, significando que é um parâmetro opcional!
    6. +
  6. Vamos testar nossa função atualizada, tente atualizar a chamada displayMessage() a partir disso: + 
    displayMessage('Woo, this is a different message!');
    + para um destes:
    7. +
  7. + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Você pode ver como a nossa pequena função (agora nem tanto) está se tornando útil.
    8. +
+ +
+

Nota: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na versão finalizada no GitHub (veja-a também em execução), ou peça nos ajuda.

+
+ +

Conclusão

+ +

Parabéns por chegar ao final! Este artigo levou você ao longo de todo o processo de criação de uma função prática personalizada, que com um pouco mais de trabalho poderia ser transplantada em um projeto real. No próximo artigo, vamos encerrar as funções explicando outro conceito relacionado essencial — valores de retorno.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..0fec6d40e7 --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,616 @@ +--- +title: Tomando decisões no seu código — condicionais +slug: Aprender/JavaScript/Elementos_construtivos/conditionals +tags: + - Artigo + - Condicionais + - Iniciante +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+ +

Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. Por exemplo, em um jogo, se o número de vidas do jogador é 0, então o jogo acaba. Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; Mostra estrelas e uma lua se for noite. Neste artigo, exploraremos como as chamadas declarações condicionais funcionam em JavaScript.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico de algoritmos, um entendimento básico de HTML e CSS, JavaScript primeiros passos.
Objetivo:Entender como usar estruturas condicionais em JavaScript.
+ +

Você pode tê-lo em uma condição ...!

+ +

Seres humanos (e outros animais) tomam decisões o tempo todo que afetam suas vidas, desde pequenas ("devo comer um biscoito ou dois?") até grandes ("devo ficar no meu país de origem e trabalhar na fazenda do meu pai ou devo mudar para a América e estudar astrofísica?").

+ +

As declarações condicionais nos permitem representar tomadas de decisão como estas em JavaScript, a partir da escolha que deve ser feita (por exemplo, "um biscoito ou dois"), ao resultado obtido dessas escolhas (talvez o resultado de "comer um biscoito" possa ser "ainda sentido fome ", e o resultado de "comer dois biscoitos" pode ser "ter se sentido cheio, mas mamãe me falou para comer todos os biscoitos".)

+ +

+ +

Declarações if ... else

+ +

De longe o tipo mais comum de declaração condicional que você usará em JavaScript  — as modestas declarações if ... else.

+ +

Sintaxe básica if ... else

+ +

Veja a sintaxe básica do if...else no {{glossary("pseudocódigo")}}:

+ +
if (condicao) {
+  codigo para executar caso a condição seja verdadeira
+} else {
+  senão, executar este código
+}
+ +

Aqui nós temos:

+ +
    +
  1. A palavra reservada if seguida de um par de parênteses.
    2. +
  2. Um teste condicional, localizado dentro dos parênteses (normalmente "este valor é maior que esse", ou "este valor existe"). Esta condição pode fazer uso dos operadores de comparação que discutimos no último módulo, e podem retornar  true ou false.
    3. +
  3. Um par de chaves, e dentro dele temos código — pode ser qualquer código que queiramos, e só vai ser executado se o teste condicional retornar true.
    4. +
  4. A palavra reservada else.
    5. +
  5. Outro par de chaves, dentro dele temos mais um pouco de código — pode ser qualquer código que queiramos, e só vai executar se o teste condicional retornar um valor diferente de true, neste caso not true, ou false.  
    6. +
+ +

Este tipo de código é bem legível por seres humanos — ele diz: "if a condição for true, execute o bloco de código A, else execute o bloco de código B" (se a condição for verdadeira, execute o bloco de código A, senão execute o bloco de código B).

+ +

Você precisa saber que não é obrigado a colocar a palavra reservada else e e o segundo bloco de par de chaves. O código apresentado a seguir é perfeitamente válido e não produz erros:

+ +
if (condicao) {
+  codigo para executar se a condição for verdadeira
+}
+
+código a ser executado
+ +

Entretanto, você precisa ser cauteloso aqui — neste caso, repare que o segundo bloco de código não é controlado pela declaração condicional, então ele vai executar sempre, independente do teste condicional retornar true ou false. É claro, isto não é necessariamente uma coisa ruim, mas isso pode não ser o que você quer — com muita frequência você vai querer executar ou um bloco de código ou outro, não os dois juntos.

+ +

Por fim, você verá muitas vezes declarações if...else escritas sem as chaves, no seguinte estilo de escrita:

+ +
if (condicao) executar aqui se for verdadeira
+else executar este outro codigo
+ +

Este é um código perfeitamente válido, mas não é recomendado — ele facilita que você escreva código fora do escopo do if e do else, o que seria mais difícil se você estivesse usando as chaves para delimitar os blocos de código, e usando multiplas linhas de código e identação.

+ +

Um exemplo real

+ +

Para entender bem a sintaxe, vamos considerar um exemplo real. Imagine um filhote de humanos sendo chamdo a ajudar com as tarefas do Pai ou da Mãe. Os pais podem falar: "Ei querido, se você me ajudar a ir e fazer as compras, eu te dou uma grana extra para que você possa comprar aquele brinquedo que você quer." Em JavaScript, nós podemos representar isso como:

+ +

var comprasFeitas = false;

+ +

if (comprasFeitas === true) {
+   var granaFilhote = 10;
+ } else {
+   var granaFilhote = 5;
+ }

+ +

Esse código como mostrado irá sempre resultar na variável comprasFeitas retornando false, sendo um desapontamento para nossas pobres crianças. Cabe a nós fornecer um mecanismo para o pai definir a variável comprasFeitas como true se o filho fez as compras.

+ +
+

Nota: Você pode ver a versão completa desse exemplo no GitHub (também veja live.)

+
+ +

else if

+ +

O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois?

+ +

Existe uma maneira de encadear escolhas/resultados extras ao seu if...else — usando else if. Cada escolha extra requer um bloco adicional para colocar entre if() { ... } e else { ... } — confira o seguinte exemplo mais envolvido, que pode fazer parte de um aplicativo simples de previsão do tempo:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100) }}

+ +
    +
  1. Aqui, temos um elemento HTML {{htmlelement("select")}} que nos permite fazer escolhas de clima diferentes e um simples parágrafo.
    2. +
  2. No JavaScript, estamos armazenando uma referência para ambos os elementos {{htmlelement("select")}} e {{htmlelement("p")}}, e adicionando um listener de evento ao elemento  <select> para que, quando o valor for alterado, a função setWeather() é executada.
    3. +
  3. Quando esta função é executada, primeiro definimos uma variável chamada choice para o valor atual selecionado no elemento <select>. Em seguida, usamos uma instrução condicional para mostrar um texto diferente dentro do parágrafo, dependendo de qual é o valor de choice . Observe como todas as condições são testadas nos blocos else if() {...}, com exceção do primeiro, que é testado em um bloco if() {...}.
    4. +
  4. A última escolha, dentro do bloco else {...}, é basicamente uma opção de "último recurso" — o código dentro dele será executado se nenhuma das condições for true. Nesse caso, ele serve para esvaziar o texto do parágrafo, se nada for selecionado, por exemplo, se um usuário decidir selecionar novamente a opção de espaço reservado "- Make a choice--" mostrada no início.
    5. +
+ +
+

Nota: Você pode também encontrar este exemplo no GitHub (veja ele sendo executado lá também.)

+
+ +

Uma nota sobre os operadores de comparação

+ +

Operadores de comparação são usados para testar as condições dentro de nossas declarações condicionais. Nós primeiro olhamos para operadores de comparação de volta em nosso artigo Matemática básica em JavaScript - números e operadores. Nossas escolhas são:

+ + + +
+

Nota: Revise o material no link anterior se quiser atualizar suas memórias sobre eles.

+
+ +

Queríamos fazer uma menção especial do teste de valores boolean (true/false) , e um padrão comum que você vai encontrar de novo e de novo. Qualquer valor que não seja  false, undefined, null, 0, NaN, ou uma string vazia ('') retorna true quando testado como uma instrução condicional, portanto, você pode simplesmente usar um nome de variável para testar se é verdadeiro , ou mesmo que existe (ou seja, não é indefinido). Por exemplo:

+ +
var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}
+ +

E, voltando ao nosso exemplo anterior sobre a criança fazendo uma tarefa para seu pai, você poderia escrevê-lo assim:

+ +
var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

Aninhando if ... else

+ +

É perfeitamente correto colocar uma declaração if...else dentro de outra — para aninhá-las. Por exemplo, poderíamos atualizar nosso aplicativo de previsão do tempo para mostrar mais opções dependendo de qual é a temperatura:

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature >= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}
+ +

Mesmo que o código trabalhe em conjunto, cada uma das instruções if...else funcionam completamente independente uma da outra.

+ +

Operadores lógicos: AND, OR e NOT

+ +

Se você quiser testar várias condições sem escrever instruções aninhadas if...else, os operadores lógicos poderão ajudá-lo. Quando usado em condições, os dois primeiros fazem o seguinte:

+ + + +

Para fornecer um exemplo AND, o fragmento de exemplo anterior pode ser reescrito assim:

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}
+ +

Então, por exemplo, o primeiro bloco de código só será executado se ambas as condições choice === 'sunny' e temperature < 86 retornarem true.

+ +

Vamos ver um exemplo rápido de OR:

+ +
if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}
+ +

O último tipo de operador lógico, NOT, expressado pelo operador !, pode ser usado para negar uma expressão. Vamos combiná-lo com OR no exemplo acima:

+ +
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}
+ +

Nesse trecho, se a instrução OR retornar true, o operador NOT negará isso para que a expressão geral retorne false.

+ +

Você pode combinar tantas instruções lógicas quanto quiser, em qualquer estrutura. O exemplo a seguir executa o código interno apenas se ambos os conjuntos de instruções OR retornarem true, significando que a instrução AND global também retornará true:

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // run the code
+}
+ +

Um erro comum ao usar o operador OR lógico em instruções condicionais é tentar indicar a variável cujo valor você está verificando uma vez e, em seguida, fornecer uma lista de valores que poderia ser para retornar true, separados pelos operadores || (OR) . Por exemplo:

+ +
if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}
+ +

Nesse caso, a condição dentro de if(...)  sempre será avaliada como verdadeira, já que 7 (ou qualquer outro valor diferente de zero) sempre é avaliado como verdadeiro. Esta condição está realmente dizendo "se x é igual a 5, ou 7 é verdade — o que sempre é". Isso logicamente não é o que queremos! Para fazer isso funcionar, você precisa especificar um teste completo ao lado de cada operador OR:

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}
+ +

Instruções switch

+ +

As instruções if...else fazem o trabalho de habilitar o código condicional bem, mas elas também possuem suas desvantagens. Elas são boas principalmente para casos em que você tem algumas opções, e cada uma requer uma quantidade razoável de código para ser executado, e / ou as condições são complexas (por exemplo, vários operadores lógicos). Nos casos em que você deseja definir uma variável para uma determinada opção de valor ou imprimir uma determinada instrução dependendo de uma condição, a sintaxe pode ser um pouco incômoda, especialmente se você tiver um grande número de opções.

+ +

As instruçõesswitch são suas amigas aqui — elas tomam uma única expressão / valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha. Aqui está mais um pseudocódigo, para você ter uma ideia:

+ +
switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}
+ +

Aqui nós temos:

+ +
    +
  1. A palavra-chave switch, seguido por um par de parênteses.
    2. +
  2. Uma expressão ou valor dentro dos parênteses.
    3. +
  3. A palavra-chave case, seguido por uma escolha que a expressão / valor poderia ser, seguido por dois pontos.
    4. +
  4. Algum código para ser executado se a escolha corresponder à expressão.
    5. +
  5. Uma instrução break, seguido de um ponto e vírgula. Se a opção anterior corresponder à expressão / valor, o navegador interromperá a execução do bloco de código aqui e passará para qualquer código que aparecer abaixo da instrução switch.
    6. +
  6. Como muitos outros casos (marcadores 3 a 5) que você quiser.
    7. +
  7. A palavra-chave default, seguido por exatamente o mesmo padrão de código de um dos casos (marcadores 3 a 5), exceto que o default não tem escolha após ele, e você não precisa da instrução break, pois não há nada para executar depois disso o bloco de qualquer maneira. Esta é a opção padrão que é executada se nenhuma das opções corresponder.
    8. +
+ +
+

Nota: Você não precisa incluir a seção default — você pode omiti-la com segurança se não houver chance de que a expressão possa se igualar a um valor desconhecido. Se houver uma chance disso, você precisará incluí-lo para lidar com casos desconhecidos.

+
+ +

Um exemplo de switch

+ +

Vamos dar uma olhada em um exemplo real — vamos reescrever nosso aplicativo de previsão do tempo para usar uma instrução switch:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Você pode encontrar este exemplo no GitHub (veja-o em execução lá também.)

+
+ +

Operador ternário

+ +

Há um bit final de sintaxe que queremos apresentar a você antes de começar a brincar com alguns exemplos. O operador ternário ou condicional é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for  true, e outro caso seja false — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco if...else se você simplesmente tiver duas opções escolhidas entre uma condição true/false condition. O pseudocódigo é assim:

+ +
( condition ) ? run this code : run this code instead
+ +

Então, vamos dar uma olhada em um exemplo simples:

+ +
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+ +

Aqui temos uma variável chamada isBirthday — se ela for true, nós damos ao nosso convidado uma mensagem de feliz aniversário; se não, damos a ela a saudação diária padrão.

+ +

Exemplo de operador ternário

+ +

Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código - qualquer coisa que você gosta. O exemplo ao vivo a seguir mostra um seletor de temas simples em que o estilo do site é aplicado usando um operador ternário.

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300) }}

+ +

Aqui nós temos um elemento {{htmlelement('select')}} para escolher um tema (preto ou branco), além de um simples {{htmlelement('h1')}} para exibir um título do site. Nós também temos uma função chamada update(), que leva duas cores como parâmetros (entradas). A cor do plano de fundo do site é definida para a primeira cor fornecida e sua cor de texto é definida para a segunda cor fornecida.

+ +

Finalmente, nós também temos um evento listener onchange que serve para executar uma função que contém um operador ternário. Começa com uma condição de teste — select.value === 'black'. Se este retornar true, nós executamos a função update() com parâmetros de preto e branco, o que significa que acabamos com a cor de fundo do preto e cor do texto de branco. Se retornar false, nós executamos a função update() com parâmetros de branco e preto, o que significa que a cor do site está invertida.

+ +
+

Nota: Você pode também encontrar este exemplo no GitHub (veja-o executando lá também.)

+
+ +

Aprendizado ativo: um calendário simples

+ +

Neste exemplo, você nos ajudará a concluir um aplicativo de calendário simples. No código que você tem:

+ + + +

Precisamos que você escreva uma instrução condicional dentro da função do manipulador onchange, logo abaixo do comentário // ADD CONDITIONAL HERE. Ele deve:

+ +
    +
  1. Olhar para o mês selecionado (armazenado na variavel choice. Este será o valor do elemento <select> após o valor ser alterado, portanto, "Janeiro", por exemplo.
    2. +
  2. Definir uma variável chamada  days para ser igual ao número de dias no mês selecionado. Para fazer isso, você terá que procurar o número de dias em cada mês do ano. Você pode ignorar anos bissextos para os propósitos deste exemplo.
    3. +
+ +

Dicas:

+ + + +

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente preso, pressione "Mostrar solução" para ver uma solução.

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110) }}

+ +

Aprendizado ativo: mais opções de cores!

+ +

Neste exemplo, você terá o exemplo de operador ternário que vimos anteriormente e converterá o operador ternário em uma instrução switch que nos permitirá aplicar mais opções ao site simples. Olhe para a {{htmlelement("select")}} — desta vez você verá que não tem duas opções de tema, mas cinco. Você precisa adicionar uma instrução switch abaixo do comentário // ADD SWITCH STATEMENT:

+ + + +

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente travado, pressione "Show solution" para ver uma solução.

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

+ +

Conclusão

+ +

E isso é tudo que você realmente precisa saber sobre estruturas condicionais no JavaScript por agora! Tenho certeza que você terá entendido esses conceitos e trabalhou com os exemplos com facilidade; se houver algo que você não tenha entendido, sinta-se à vontade para ler o artigo novamente ou contate-nos para pedir ajuda.

+ +

Veja também

+ + + +

Teste suas habilidades!

+ +

Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja Teste suas habilidades: Condicionais.

+ +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/pt-br/learn/javascript/building_blocks/events/index.html b/files/pt-br/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..dd6e41f674 --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,582 @@ +--- +title: Introdução a eventos +slug: Aprender/JavaScript/Elementos_construtivos/Events +tags: + - Aprender + - Artigo + - Guía + - Iniciante + - JavaScript + - Programando + - eventos +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
+
{{LearnSidebar}}
+
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo, no qual este te alerta sobre essas ações para que você possa responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um botão numa pagina web, você pode querer responder a esta ação mostrando na tela uma caixa de informações. Nesse artigo, nós iremos discutir sobre alguns conceitos importantes envolvendo eventos, e veremos como eles funcionam nos browsers. Isto não será algo cansativo para estudar; somente o que você precisar saber até agora.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimentos básicos em informática, conhecimento básico em HTML e CSS,  JavaScript, primeiros passos.
Objetivo:Entender a teoria fundamentos dos eventos, como eles funcionam nos browsers, e como eventos podem ser diferentes dependendo do ambiente de desenvolvimento.
+ +

Aventuras em Série

+ +

Como mencionado acima, eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo — o sistema irá disparar algum tipo de sinal quando o evento acontecer, além de prover um mecanismo pelo qual alguma ação automática possa ser executada (ou seja, rodar algum código) quando o evento ocorrer. Por exemplo, em um aeroporto, quando a pista está livre para um avião decolar, um sinal é repassado ao piloto, e como resultado, ele inicia a decolagem.

+ +

+ +

No caso da web, eventos são disparados dentro da janela do navegador, e tende a estarem anexados a algum item especifico nele — pode ser um único elemento, um conjunto de elementos, o HTML carregado na guia atual, ou toda a janela do navegador. Existem vários tipos diferentes de eventos que podem vir a acontecer, por exemplo:

+ + + +

Você vai perceber com isso (e dando uma olhada no Event reference MDN) que há uma série de eventos que podem  ser utilizados.

+ +

Cada evento disponivel possui um manipulador de eventos (event handler), que é um bloco de código (geralmente uma função JavaScript definida pelo usuário) que será executado quando o evento for disparado. Quando esse bloco de código é definido para rodar em resposta a um evento que foi disparado, nós dizemos que estamos registrando um manipulador de eventos. Note que manipuladores de eventos são, em alguns casos, chamados de ouvinte de eventos (event listeners) — eles são praticamente intercambiáveis para nossos propósitos, embora estritamente falando, eles trabalhem juntos. Os ouvintes escutam o evento acontecendo, e o manipulador é o codigo que roda em resposta a este acontecimento.

+ +
+

Nota: É importante notar que eventos web não são parte do core da linguagem JavaScript — elas são definidas como parte das APIs JavaScript incorporadas ao navegador.

+
+ +

Um exemplo simples

+ +

Vamos dar uma olhada em um simples exemplo para explicar o que nós queremos dizer aqui. Você já viu eventos e manipuladores de eventos sendo utilizados na maioria dos exemplos deste curso até agora, mas vamos recapitular somente para cimentar nosso conhecimento. No exemplo a seguir, nós temos um simples {{htmlelement("button")}} que quando pressionado, irá fazer com que o fundo mude para uma cor aleatória:

+ +
<button>Change color</button>
+ + + +

O JavaScript seria algo como:

+ +
var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

Nesse código, nós guardamos uma referência ao botão dentro de uma variável chamada btn, usando a função {{domxref("Document.querySelector()")}}. Também definimos uma função que retorna um número aleatório. A terceira parte do código é o manipulador de eventos. A variável btn aponta para um elemento <button>, e esse tipo de objeto tem um número de eventos que podem ser disparados nele, assim sendo, manipuladores de eventos estão disponíveis.

+ +

Esse código rodará sempre que o evento de clique for disparado pelo elemento <button>, isto é, sempre que um usuário clicar nele.

+ +

Um exemplo de saída seria:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

Não são apenas paginas da web

+ +

Outra coisa que vale mencionar a esse ponto é que eventos não são exclusivos ao JavaScript — muitas linguagens de programação possuem algum tipo de modelo de evento, e a maneira que elas funcionam irão, frequentemente, diferenciar-se da maneira que funciona em JavaScript. De fato, o modelo de evento no JavaScript para web pages difere dos outros modelos de evento do próprio JavaScript quando usados em outros ambientes.

+ +

Por exemplo, Node.js é um interpretador de código JavaScript muito popular que permite desenvolvedores a usarem JavaScript para construir aplicações de rede e do lado do servidor. O Node.js event model depende dos ouvintes para escutar eventos e emissores para emitir eventos periodicamente. — não parece tão diferente, mas o código é bem diferente, fazendo uso de funções como on() para registrar um ouvinte de evento e  once() para registrar um ouvinte de evento que cancela o registro depois de ter sido executado uma vez. Os Documentos do evento de conexão HTTP fornecem um bom exemplo de uso.

+ +

Como outro exemplo, agora você também pode usar o JavaScript para criar complementos entre navegadores — aprimoramentos da funcionalidade do navegador — usando uma tecnologia chamada WebExtensions. O modelo de eventos é semelhante ao modelo de eventos da Web, mas um pouco diferente — as propriedades dos event listeners são camel-cased, onde cada palavra é iniciada com maiúsculas e unidas sem espaços (por exemplo, onMessage em vez de onmessage), e precisam ser combinadas com a função addListener. Veja a página runtime.onMessage para um exemplo.

+ +

Você não precisa entender nada sobre outros ambientes nesse estágio do aprendizado; nós só queríamos deixar claro que os eventos podem diferir em diferentes ambientes de programação.

+ +

Formas de usar eventos da web

+ +

Há várias maneiras diferentes de adicionar código de ouvinte de evento a páginas da Web para que ele seja executado quando o evento associado for disparado. Nesta seção, revisaremos os diferentes mecanismos e discutiremos quais devem ser usados.

+ +

Propriedades do manipulador de eventos

+ +

Essas são as propriedades que existem para conter o código do manipulador de eventos que vimos com mais frequência durante o curso. Voltando ao exemplo acima:

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

A propriedade onclick é a propriedade do manipulador de eventos que está sendo usada nesta situação. É essencialmente uma propriedade como qualquer outra disponível no botão (por exemplo, btn.textContent, ou btn.style), mas é um tipo especial — quando você configura para ser igual a algum código, esse código será executado quando o evento é acionado no botão.

+ +

Você também pode definir a propriedade handler para ser igual a um nome de função nomeado (como vimos em Construa sua própria função). O seguinte funcionaria da mesma forma:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

Há muitas propriedades diferentes de manipulador de eventos disponíveis. Vamos fazer um experimento.

+ +

Primeiro de tudo, faça uma cópia local do random-color-eventhandlerproperty.html, e abra-o no seu navegador. É apenas uma cópia do exemplo de cor aleatória simples com o qual já estamos jogando neste artigo. Agora tente alterar btn.onclick para os seguintes valores diferentes, por sua vez, e observando os resultados no exemplo:

+ + + +

Alguns eventos são muito gerais e estão disponíveis praticamente em qualquer lugar (por exemplo, um manipulador  onclick pode ser registrado em quase qualquer elemento), enquanto alguns são mais específicos e úteis apenas em certas situações (por exemplo, faz sentido usar onplay apenas em elementos específicos, como {{htmlelement("video")}}).

+ +

Manipuladores de eventos in-line - não use esses

+ +

Você também pode ver um padrão como este em seu código:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Nota:  Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

+
+ +

O método mais antigo de registrar manipuladores de eventos encontrados na Web envolveu atributos HTML de manipulador de eventos (também conhecidos como manipuladores de eventos inline) como o mostrado acima — o valor do atributo é literalmente o código JavaScript que você deseja executar quando o evento ocorre. O exemplo acima chama uma função definida dentro de um elemento {{htmlelement("script")}} na mesma página, mas você também pode inserir JavaScript diretamente dentro do atributo, por exemplo:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

Você encontrará equivalentes de atributo HTML para muitas das propriedades do manipulador de eventos; no entanto, você não deve usá-los — eles são considerados uma prática ruim. Pode parecer fácil usar um atributo manipulador de eventos se você estiver apenas fazendo algo realmente rápido, mas eles se tornam rapidamente incontroláveis e ineficientes.

+ +

Para começar, não é uma boa ideia misturar o seu HTML e o seu JavaScript, pois é difícil analisar — manter seu JavaScript em um só lugar é melhor; se estiver em um arquivo separado, você poderá aplicá-lo a vários documentos HTML.

+ +

Mesmo em um único arquivo, os manipuladores de eventos in-line não são uma boa ideia. Um botão está OK, mas e se você tivesse 100 botões? Você teria que adicionar 100 atributos ao arquivo; isso rapidamente se tornaria um pesadelo de manutenção. Com JavaScript, você poderia facilmente adicionar uma função de manipulador de eventos a todos os botões da página, não importando quantos fossem, usando algo assim:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +
+

Nota: Separar sua lógica de programação do seu conteúdo também torna seu site mais amigável aos mecanismos de pesquisa.

+
+ +

addEventListener() e removeEventListener()

+ +

O mais novo tipo de mecanismo de evento é definido na Especificação de Eventos Nível 2 do Document Object Model (DOM), que fornece aos navegadores uma nova função — addEventListener(). Isso funciona de maneira semelhante às propriedades do manipulador de eventos, mas a sintaxe é obviamente diferente. Poderíamos reescrever nosso exemplo de cor aleatória para ficar assim:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Nota: Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

+
+ +

Dentro da função addEventListener(), especificamos dois parâmetros — o nome do evento para o qual queremos registrar esse manipulador, e o código que compreende a função do manipulador que queremos executar em resposta a ele. Note que é perfeitamente apropriado colocar todo o código dentro da função addEventListener(), em uma função anônima, assim:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

Esse mecanismo tem algumas vantagens sobre os mecanismos mais antigos discutidos anteriormente. Para começar, há uma função de contraparte, removeEventListener(), que remove um listener adicionado anteriormente. Por exemplo, isso removeria o listener definido no primeiro bloco de código nesta seção:

+ +
btn.removeEventListener('click', bgChange);
+ +

Isso não é significativo para programas pequenos e simples, mas para programas maiores e mais complexos, pode melhorar a eficiência para limpar antigos manipuladores de eventos não utilizados. Além disso, por exemplo, isso permite que você tenha o mesmo botão executando ações diferentes em circunstâncias diferentes — tudo o que você precisa fazer é adicionar / remover manipuladores de eventos conforme apropriado.

+ +

Em segundo lugar, você também pode registrar vários manipuladores para o mesmo ouvinte. Os dois manipuladores a seguir não seriam aplicados:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

Como a segunda linha sobrescreveria o valor de  onclick definido pelo primeiro. Isso funcionaria, no entanto:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Ambas as funções serão executadas quando o elemento for clicado.

+ +

Além disso, há vários outros recursos e opções poderosos disponíveis com esse mecanismo de eventos. Estes são um pouco fora do escopo deste artigo, mas se você quiser ler sobre eles, dê uma olhada nas páginas de referência addEventListener() e removeEventListener().

+ +

Qual mecanismo devo usar?

+ +

Dos três mecanismos, você definitivamente não deve usar os atributos do manipulador de eventos HTML — estas são desatualizadas e más práticas, como mencionado acima.

+ +

Os outros dois são relativamente intercambiáveis, pelo menos para usos simples:

+ + + +

As principais vantagens do terceiro mecanismo são que você pode remover o código do manipulador de eventos, se necessário, usando removeEventListener(), e você pode adicionar vários listeners do mesmo tipo aos elementos, se necessário. Por exemplo, você pode chamar addEventListener('click', function() { ... }) em um elemento várias vezes, com diferentes funções especificadas no segundo argumento. Isso é impossível com as propriedades do manipulador de eventos porque qualquer tentativa subseqüente de definir uma propriedade sobrescreverá as anteriores, por exemplo:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Nota: Se você for chamado para oferecer suporte a navegadores anteriores ao Internet Explorer 8 em seu trabalho, poderá encontrar dificuldades, pois esses navegadores antigos usam modelos de eventos diferentes dos navegadores mais recentes. Mas não tenha medo, a maioria das bibliotecas JavaScript (por exemplo, jQuery) tem funções internas que abstraem as diferenças entre navegadores. Não se preocupe muito com isso neste estágio de sua jornada de aprendizado.

+
+ +

Outros conceitos de evento

+ +

Nesta seção, abordaremos brevemente alguns conceitos avançados que são relevantes para os eventos. Não é importante entendê-las totalmente neste momento, mas pode servir para explicar alguns padrões de código que você provavelmente encontrará ao longo do tempo.

+ +

Objetos de evento

+ +

Às vezes, dentro de uma função de manipulador de eventos, você pode ver um parâmetro especificado com um nome como event, evt, ou simplesmente e. Isso é chamado de event object, e é passado automaticamente para os manipuladores de eventos para fornecer recursos e informações extras. Por exemplo, vamos reescrever nosso exemplo de cor aleatória novamente:

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Nota: Você pode encontrar o código fonte completo para este exemplo no GitHub (também veja isso executando em tempo real).

+
+ +

Aqui você pode ver que estamos incluindo um objeto de evento, e, na função, e na função definindo um estilo de cor de fundo em e.target — que é o próprio botão. A propriedade target do objeto de evento é sempre uma referência ao elemento em que o evento acabou de ocorrer. Portanto, neste exemplo, estamos definindo uma cor de fundo aleatória no botão, não na página.

+ +
+

Note: Você pode usar qualquer nome que desejar para o objeto de evento — você só precisa escolher um nome que possa ser usado para referenciá-lo dentro da função de manipulador de eventos. e/evt/event são mais comumente usados pelos desenvolvedores porque são curtos e fáceis de lembrar. É sempre bom manter um padrão.

+
+ +

e.target é incrivelmente útil quando você deseja definir o mesmo manipulador de eventos em vários elementos e fazer algo com todos eles quando ocorre um evento neles. Você pode, por exemplo, ter um conjunto de 16 blocos que desaparecem quando são clicados. É útil poder sempre apenas definir a coisa para desaparecer como e.target, ao invés de ter que selecioná-lo de alguma forma mais difícil. No exemplo a seguir (veja useful-eventtarget.html para o código-fonte completo; veja também a execução ao vivo aqui), criamos 16 elementos {{htmlelement("div")}} usando JavaScript. Em seguida, selecionamos todos eles usando {{domxref("document.querySelectorAll()")}}  e, em seguida, percorremos cada um deles, adicionando um manipulador onclick a cada um, de modo que uma cor aleatória seja aplicada a cada um deles quando clicados:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

A saída é a seguinte (tente clicar em cima — divirta-se):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

A maioria dos manipuladores de eventos que você encontrará apenas tem um conjunto padrão de propriedades e funções (métodos) disponíveis no objeto de evento (consulte a referência de objeto {{domxref("Event")}} para obter uma lista completa). Alguns manipuladores mais avançados, no entanto, adicionam propriedades especializadas contendo dados extras que precisam para funcionar. A Media Recorder API, por exemplo, tem um evento dataavailable que é acionado quando algum áudio ou vídeo é gravado e está disponível para fazer algo com (por exemplo, salvá-lo ou reproduzi-lo). O objeto de evento do manipulador correspondente ondataavailable tem uma propriedade de dados disponível contendo os dados de áudio ou vídeo gravados para permitir que você acesse e faça algo com ele.

+ +

Evitando o comportamento padrão

+ +

Às vezes, você se deparará com uma situação em que deseja interromper um evento fazendo o que ele faz por padrão. O exemplo mais comum é o de um formulário da Web, por exemplo, um formulário de registro personalizado. Quando você preenche os detalhes e pressiona o botão Enviar, o comportamento natural é que os dados sejam enviados para uma página específica no servidor para processamento, e o navegador seja redirecionado para uma página de "mensagem de sucesso" de algum tipo (ou a mesma página, se outra não for especificada.)

+ +

O problema surge quando o usuário não submete os dados corretamente - como desenvolvedor, você deve interromper o envio para o servidor e fornecer uma mensagem de erro informando o que está errado e o que precisa ser feito para corrigir as coisas. Alguns navegadores suportam recursos automáticos de validação de dados de formulário, mas como muitos não oferecem isso, é recomendável não depender deles e implementar suas próprias verificações de validação. Vamos dar uma olhada em um exemplo simples.

+ +

Primeiro, um formulário HTML simples que requer que você digite seu primeiro e último nome:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Agora algum JavaScript — aqui nós implementamos uma verificação muito simples dentro de um manipulador de evento onsubmit (o evento submit é disparado em um formulário quando é enviado) que testa se os campos de texto estão vazios. Se estiverem, chamamos a função preventDefault() no objeto de evento — que interrompe o envio do formulário — e, em seguida, exibir uma mensagem de erro no parágrafo abaixo do nosso formulário para informar ao usuário o que está errado:

+ +
var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Obviamente, isso é uma validação de forma bastante fraca — ela não impediria o usuário de validar o formulário com espaços ou números inseridos nos campos, por exemplo — mas está tudo bem, por exemplo. A saída é a seguinte:

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: para o código fonte completo, veja preventdefault-validation.html (também veja isso executando em tempo real aqui.)

+
+ +

Borbulhamento e captura de eventos

+ +

O assunto final a ser abordado aqui é algo que você não encontrará com frequência, mas pode ser uma dor real se você não entender. Borbulhamento e captura de eventos são dois mecanismos que descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento. Vamos dar uma olhada em um exemplo para facilitar isso — abra o exemplo show-video-box.html em uma nova guia (e o código-fonte em outra guia). Ele também está disponível ao vivo abaixo:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Este é um exemplo bastante simples que mostra e oculta um {{htmlelement("div")}} com um elemento {{htmlelement("video")}} dentro dele:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

Quando o {{htmlelement("button")}} é clicado, o vídeo é exibido, alterando o atributo de classe em <div> de hidden para showing (o CSS do exemplo contém essas duas classes, que posicione a caixa fora da tela e na tela, respectivamente):

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

Em seguida, adicionamos mais alguns manipuladores de eventos onclick — o primeiro ao <div> e o segundo ao <video>. A ideia é que, quando a área do <div> fora do vídeo for clicada, a caixa deve ser ocultada novamente; quando o vídeo em si é clicado, o vídeo deve começar a tocar.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

Mas há um problema — atualmente, quando você clica no vídeo, ele começa a ser reproduzido, mas faz com que o <div> também fique oculto ao mesmo tempo. Isso ocorre porque o vídeo está dentro do <div> — é parte dele — portanto, clicar no vídeo realmente executa os dois manipuladores de eventos acima.

+ +

Borbulhando e capturando explicados

+ +

Quando um evento é acionado em um elemento que possui elementos pai (por exemplo, o {{htmlelement("video")}} no nosso caso), os navegadores modernos executam duas fases diferentes — a fase de  captura e a fase de bubbling.

+ +

Na fase de captura:

+ + + +

Na fase de bubbling, ocorre exatamente o oposto:

+ + + +

+ +

(Clique na imagem para um diagrama maior)

+ +

Nos navegadores modernos, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling. Portanto, em nosso exemplo atual, quando você clica no vídeo, o evento de clique passa do elemento <video> para o elemento <html> Pelo caminho:

+ + + +

Corrigindo o problema com stopPropagation()

+ +

Este é um comportamento irritante, mas existe uma maneira de corrigir isso! O objeto de evento padrão tem uma função disponível chamada stopPropagation(), que quando invocada no objeto de evento de um manipulador, faz com que o manipulador seja executado, mas o evento não borbulha mais acima na cadeia, portanto, mais nenhum manipulador rodará.

+ +

Podemos, portanto, consertar nosso problema atual alterando a segunda função do manipulador no bloco de códigos anterior para isto:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

Você pode tentar fazer uma cópia local do código-fonte show-video-box.html source code e tentar corrigi-lo sozinho, ou observar o resultado corrigido em show-video-box-fixed.html (veja também o código-fonte aqui).

+ +
+

Nota: Por que se preocupar em capturar e borbulhar? Bem, nos velhos tempos em que os navegadores eram muito menos compatíveis entre si do que são agora, o Netscape usava apenas captura de eventos, e o Internet Explorer usava apenas borbulhamento de eventos. Quando o W3C decidiu tentar padronizar o comportamento e chegar a um consenso, eles acabaram com esse sistema que incluía ambos, que é o único navegador moderno implementado.

+
+ +
+

Note: Como mencionado acima, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling, e isso faz mais sentido na maioria das vezes. Se você realmente quiser registrar um evento na fase de captura, registre seu manipulador usando addEventListener(), e defina a propriedade terceira opcional como true.

+
+ +

Delegação de eventos

+ +

O borbulhar também nos permite aproveitar a delegação de eventos — esse conceito depende do fato de que, se você quiser que algum código seja executado quando clicar em qualquer um de um grande número de elementos filho, você pode definir o ouvinte de evento em seu pai e ter os eventos que acontecem neles confluem com o pai, em vez de precisar definir o ouvinte de evento em cada filho individualmente.

+ +

Um bom exemplo é uma série de itens de lista — Se você quiser que cada um deles apareça uma mensagem quando clicado, você pode definir o ouvinte de evento click no pai <ul>,  e ele irá aparecer nos itens da lista.

+ +

Este conceito é explicado mais adiante no blog de David Walsh, com vários exemplos — veja Como funciona a delegação de eventos em JavaScript.

+ +

Conclusão

+ +

Agora você deve saber tudo o que precisa saber sobre os eventos da Web nesse estágio inicial. Como mencionado acima, os eventos não são realmente parte do núcleo do JavaScript — eles são definidos nas APIs da Web do navegador.

+ +

Além disso, é importante entender que os diferentes contextos nos quais o JavaScript é usado tendem a ter diferentes modelos de evento — de APIs da Web a outras áreas, como WebExtensions de navegador e Node.js (JavaScript do lado do servidor). Não esperamos que você entenda todas essas áreas agora, mas certamente ajuda a entender os fundamentos dos eventos à medida que você avança no aprendizado do desenvolvimento da web.

+ +

Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente, ou entre em contato conosco para pedir ajuda.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/building_blocks/functions/index.html b/files/pt-br/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..05e9ffcfea --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,394 @@ +--- +title: Funções — blocos reutilizáveis de código +slug: Aprender/JavaScript/Elementos_construtivos/Functions +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

Outro conceito essencial em código é função, que permitem que você armazene um pedaço de código que realiza uma simples tarefa dentro de um bloco, e então chama aquele código sempre que você precisar usá-lo com um curto comando — em vez de ter que escrever o mesmo código multiplas vezes. Neste artigo nós vamos explorar conceitos fundamentais por trás  das funções como sintaxe básica, como invocá-las e defini-las, escopo, e parâmetros.

+ + + + + + + + + + + + +
Prerequisitos:Infrmática básica, um entendimento básico de HTML e CSS, Primeiros passos em JavaScript.
Objetivo:Entender conceitos fundamentais por trás das funções em JavaScript.
+ +

Onde eu encontro funções?

+ +

Em JavaScript, você encontrará funções em todos os lugares, de fato, nós vamos usar funções ao longo de todo o curso; nós só não falaremos sobre elas em damasia. Agora está na hora, contudo, para falarmos sobre funções explicitamente, e realmente explorar sua sintaxe.

+ +
+
Praticamente sempre que você faz uso de um uma estrutura JavaScript em que tem um par de parenteses — () — e você não está usando uma estrutura  embutida da linguagem como um for loop, while or do...while loop, ou if...else statement, você está fazendo uso de uma função.
+
+ +

Funções embutidas do navegador

+ +

Nós fizemos bastante uso de funções embutidas do navegador neste curso. Toda vez que manipulamos uma string de texto, por exemplo:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made
+ +

Ou toda vez que manipulamos uma lista:

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string
+ +

Ou toda vez que nós geramos um número aleatório:

+ +
var myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number
+ +

...nós usamos uma função!

+ +
+

Nota: Fique a vontade para inserir essas linhas no console JavaScript do navegador para refamiliarizar-se com suas funcionalidades, se necessário.

+
+ +

A linguagem JavaScript tem muitas funções embutidas que o permitem fazer coisas úteis sem que você mesmo tenha que escrever aquele código. De fato, alguns dos códigos que você está chamando quando você invoca (uma palavra rebuscada para rodar, ou executar) uma função embutida de navegador não poderia ser escrita em JavaScript — muitas dessa funções são chamadas a partes de código base do navegador, que é escrita grandemente em linguages de sistema de baixo nível como C++, não linguagem Web como JavaScript.

+ +

Tenha em mente que algumas funções embutidas de navegador não são parte do core da linguagem JavaScript — algumas são definidas como partes de APIs do navegador, que são construídas no topo da linguagem padão para prover ainda mais funcionalidades (recorra a esta seção inicial de nosso curso para mais descrições). Nós olharemos o uso de APIs de navegador em mais detalhes em um módulo posterior.

+ +

Funções versus métodos

+ +

Uma coisas que devemos esclarecer antes de seguir em frente — tecnicamente falando, funções embutidas de navegador não são funções — elas são métodos. Isso pode soar um pouco assustador e confuso, mas não se preocupe — as palavras funções e métodos são largamente intercambeáveis, ao menos para nossos propósitos, neste estágio de nosso aprendizado.

+ +

A distinção é que métodos são funções definidas dentro de objetos. Funções embutidas de navegador (métodos) e variáveis (que são chamadas propriedades) são armazenadas dentro de objetos estruturados, para tornar o código mais estruturado e fácil de manipular.

+ +

Você não precisa aprender sobre o funcionamento interno de objetos estruturados em JavaScript ainda — você pode esperar nosso módulo posterior que ensinará tudo sobre funcionamento interno de objetos, e como criar o seu próprio. Por hora, nós só queremos esclarecer qualquer confusão possível de método versus função — é provável que você encontre ambos termos enquanto você olhar os recursos disponível pela  Web.

+ +

Funções personalizadas

+ +

Nós vimos também várias funções personalizadas no curso até agora — funções definidas em seu código, não dentro do navegador. Sempre que você viu um nome personalizado com parênteses logo após ele, você estava usando funções personalizadas. em nosso exemplo random-canvas-circles.html (veja também o código fonte completo) de nosso loops article, nós incluimos a função personalizada draw() que era semelhante a essa:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

Esta função desenha 100 círculos aleatórios dentro de um elemento {{htmlelement("canvas")}}. Toda vez que queremos fazer isso, nós podemos simplesmente invocar a função com isto

+ +
draw();
+ +

ao invés de ter que escrever todo o código novamente todas as vezes que queremos repetí-lo. E funções podem conter qualquer código que você gosta — você pode até chamar outra função dentro das funções. A função acima por exemplo chama a função random() três vezes, o qual é definido pelo seguinte código:

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Nós precisamos desta função porque a função embutida do navegadorMath.random() só gera números decimais aleatórios entre 0 e 1. Nós queriamos um número aleatório inteiro entre 0 e um número especificado.

+ +

Invocando funções

+ +

Provavelmente você já tem conhecimento sobre iso agora, mas... para realmente usar uma função depois dela ter sido definida, você tem que rodá-la — ou invocá-la. Isso é feito ao se incluir o nome da função em algum lugar do código, seguido por parênteses.

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// Chama a função um vez
+ +

Funções anônimas

+ +

Você viu funções definidas e invocadas de maneiras ligeiramente diferentes. Até agora nós só criamos funções como esta:

+ +
function myFunction() {
+  alert('hello');
+}
+ +

Mas você também pode criar funções que não tem nome:

+ +
function() {
+  alert('hello');
+}
+ +

Isto é chamado Função anônima — não tem nome! E também não fará nada em si mesma. Você geralmente cria funções anônimas junto com um  manipulador de eventos, o exemplo a seguir poderia rodar o código dentro da função sempre que o botão associado é clicado:

+ +
var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

O exemplo acima requer que exista um elemento {{htmlelement("button")}} diponível na página para selecionar e clicar. Você já viu essa estrutura algumas vezes ao longo do curso, e aprenderá mais a respeito disso e o verá no próximo artigo.

+ +

Voce também pode atribuir uma função anônima para ser o valor de uma variável, por exemplo:

+ +
var myGreeting = function() {
+  alert('hello');
+}
+ +

Esta função agora poder ser invocada usando:

+ +
myGreeting();
+ +

Isso dá efetivamente um nome a função; você também pode atribuir uma função para ser o valor de múltiplas variáveis , por exemplo:

+ +
var anotherGreeting = function() {
+  alert('hello');
+}
+ +

Esta função agora pode ser invocada usando qualquer das funções abaixo

+ +
myGreeting();
+anotherGreeting();
+ +

Mas isso pode simplesmente ser confuso, então não faça! Quando criar funções, é melhor ficar com apenas uma forma:

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

De modo geral você irá usar funções anônimas só para rodar um código em resposta a um disparo de evento — como um botão ao ser clicado — usando um gerenciador de eventos. Novamente, Isso é algo parecido com:

+ +
myButton.onclick = function() {
+  alert('hello');
+  // Eu posso colocar código aqui
+  // dentro o quanto eu quiser
+}
+ +

Parâmetro de funções

+ +

Algumas funções requerem parâmetros a ser especificado quando você está invocando-os — esses são valores que precisam ser inclusos dentro dos parênteses da função, o que é necessário para fazer seu trabalho apropriado.

+ +
+

Nota: Parâmetros algumas vezes são chamados de argumentos, propriedades, ou até atributos.

+
+ +

Como um exemplo, a função embutida de navegador Math.random() não requer nenhum parâmetro. Quando chamada, ela sempre retorna um número aleatório entre 0 e 1:

+ +
var myNumber = Math.random();
+ +

A função embutida de navegador replace()  entretanto precisa de dois parâmetros — a substring para encotrar a string principal, e a substring para ser substituida com ela:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+ +
+

Nota: Quando você precisa especificar multiplos parâmetros, eles são separados por vígulas.

+
+ +

Nota-se também que algumas vezes os parâmetros são opcionais — você não tem que especificá-los. Se você não o faz, a função geralmente adota algum tipo de comportamento padrão. Como exemplo, a função join() tem parâmetro opcional:

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'
+ +

Se nenhum parâmetro é incluído para especificar a combinação/delimitação de caractere, uma vírgula é usada por padrão.

+ +

Função escopo e conflitos

+ +

vamos falar um pouco sobre {{glossary("scope")}} — um conceito muito importante quando lidamos com funções. Quando você cria uma função, as variáveis e outras coisas definidas dentro da função ficam dentro de seu próprio e separado escopo, significando que eles estão trancados a parte em seu próprio compartimento, inacesível de dentro de outras funções ou de código fora das funções.

+ +

O mais alto nível fora de todas suas funções é chamado de escopo global. Valores definidos no escopo global são acessíveis em todo lugar do código.

+ +

JavaScript é configurado assim por várias razões — mas principalmente por segurança e organização. Algumas vezes você não quer que variáveis sejam acessadas de todo lugar no código — scripts externos que você chama de algum outro lugar podem iniciar uma bagunça no seu código e causar problemas porque eles estão usando os mesmos nomes de variáveis que em outras partes do código, provocando conflitos. Isso pode ser feito maliciosamente, ou só por acidente.

+ +

Por exemplo, digamos que você tem um arquivo HTML que está chamando dois arquivos JavaScript externos, e ambos tem uma variável e uma função definidos que usam o mesmo nome:

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Olá ' + name + ': bem-vindo a nossa compania.');
+}
+ +
// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Nossa compania é chamada ' + name + '.');
+}
+ +

Ambas as funções que você quer chamar são chamadas greeting(), mas você só pode acessar o arquivo second.js da função greeting()  — Ele é aplicado no HTML depois no código fonte, então suas variáveis e funções sobrescrevem as de first.js.

+ +
+

Nota: Você pode ver este exemplo rodando no GitHub (veja também o código fonte).

+
+ +

Manter parte de seus código trancada em funções evita tais problemas, e é considerado boa prática.

+ +

Parece um pouco com um zoológico. Os leões, zebras, tigres, e pinguins são mantidos em seus próprios cercados, e só tem acesso as coisas dentro de seu cercado — da mesma maneira que escopos de função. Se eles forem capazes de entrar em outros cercados, problemas podem acontecer. No melhor caso, diferentes animais poderiam sentir-se ralmente desconfortáveis dentro de habitats não familiares — um leão e um tigre poderiam sentir-se muito mal dentro de um úmido e gelado terreno. No pior caso, os leões e tigres poderiam tentar comer os pinguins!

+ +

+ +

O zelador do zoológico é como o escopo global — ele ou ela tem as chaves para acessar cada cercado, reabastecer comida, tratar animais doentes, etc.

+ +

Aprendizado ativo: Brincando com o escopo

+ +

Vamos observar um exemplo real para mostrar escopo.

+ +
    +
  1. Primeiro, faça uma cópia local de nosso exmplo function-scope.html. Isto contém duas funções chamadas a() e b(), e três variáveis — x, y, e z — duas das quais estão definidas dentro de funções, e uma no escopo global. Ele também contém uma terceira função chamada output(), que leva um simples parâmetro e mostra-o em um parágrafo na página.
    2. +
  2. Abra o exemplo em um navegador e em um editor de textos.
    3. +
  3. Abra o console JavaScript no developer tools de seu navegador. No console  JavaScript, digite o seguinte comando: + 
    output(x);
    + Você deve ver o valor da variável x exibida na página.
    4. +
  4. Agora tente digitar o seguinte no seu console: + 
    output(y);
+output(z);
    + Ambos dever retornar um erro com as seguintes linhas "ReferenceError: y is not defined". Por que isso? Porque o escopo da função — y e z estão trancadas dentro das funções a() e  b(), então output() não pode acessá-las quando chamadas do escopo global.
    5. +
  5. Contudo, que tal chamá-las de dentro de outra função? Tente editar a() e b() para que fiquem desta forma: + 
    function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}
    + Salve o código e atualize o navegador, então tente chamar as funções a() e b() do console JavaScript: + + 
    a();
+b();
    + Você verá os valores de y e z mostrados na página. Isso funciona bem, desde que a função output() está sendo chamada dentro de outra função — no mesmo escopo que as variáveis que estam imprimindo são definidas, em cada caso. output() em si é acessível de qualquer lugar, como é definido no escopo global.
    6. +
  6. Agora tente atualizar seu código como este: + 
    function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}
    + Salve e atualize novamente, e tente isso novamente em seu console JavaScript:         
    7. +
  7. + 
    a();
+b();
    + Ambas chamadas de a() e b() devem mostrar o valor de x — 1. Isso dá certo porque até mesmo a chamada de  output() não está no mesmo escopo em que x é definido, x é uma variável global então é disponível dentro de todo código, em toda parte.
    8. +
  8. Finalmente, tente atualizar o código o seguinte: + 
    function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}
    + Salve e atualize novamente, e tente isso novamente em seu console JavaScript: 
    9. +
  9. + 
    a();
+b();
    + Desta vez as chamadas de a() e b() retornaram o irritante erro "ReferenceError: z is not defined" — isto porque a chamada de output() e as variáveis que eles estão tentando imprimir não estão definidas dentro do mesmo escopo das funções — as variáveis são efetivamente invisíveis aquelas chamadas de função.
    10. +
+ +
+

Nota: As mesmas regras de escopo não se aplicam a laços (ex.: for() { ... }) e blocos condicionais (ex.: if() { ... }) — eles parecem muito semelhantes, mas eles não são a mesma coisa! Tome cuidado para não confudir-se.

+
+ +
+

Nota: O erro ReferenceError: "x" is not defined é um dos mais comuns que você encontrará. Se você receber este erro e tem certeza que definiu a variável em questão, cheque em que escopo ela está.

+
+ + + +

Funções dentro de funções

+ +

Tenha em mente que você pode chamar uma função de qualquer lugar, até mesmo dentro de outra função.  Isso é frenquentemente usado para manter o código organizado — se você tem uma função grande e complexa, é mais fácil de entendê-la se você quebrá-la em várias subfunções:

+ +
function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

Apenas certifique-se que os valores usados dentro da função estão apropriadamente no escopo. O exemplo acima deve lançar um erro ReferenceError: myValue is not defined, porque apesar da variável myValue estar definida no mesmo escopo da chamda da função, ela não está definida dentro da definição da função — o código real que está rodando quando as funções são chamadas. Para fazer isso funcionar, você deveria passar o valor dentro da função como um parâmetro, desta forma:

+ +
function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}
+ +

Conclusão

+ +

Este arquivo explorou os conceitos fundamentais por trás das funções, pavimentando o caminho para o próximo no qual nos tornamos práticos e o levamos através de passos para construir suas próprias funções personalizadas.

+ +

Veja também

+ + + + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html b/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..2e4fc27c4d --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,140 @@ +--- +title: Galeria de Imagens +slug: Aprender/JavaScript/Elementos_construtivos/Image_gallery +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Agora que analisamos os blocos de construção fundamentais do JavaScript, testaremos seu conhecimento de loops, funções, condicionais e eventos, fazendo com que você crie um item bastante comum que você verá em muitos sites — uma galeria de imagens ativadas em JavaScript.

+ + + + + + + + + + + + +
Pré-requisitos:Antes de tentar esta avaliação, você já deve ter trabalhado em todos os artigos deste módulo.
Objetivo:Para testar a compreensão de loops, funções, condicionais e eventos de JavaScript.
+ +

Ponto de partida

+ +

Para começar esta avaliação, você deve pegar o arquivo ZIP para o exemplo e descompactá-lo em algum lugar no seu computador.

+ +
+

Note: Como alternativa, você pode usar um site como o JSBin ou Thimble para fazer sua avaliação. Você pode colar o HTML, CSS e JavaScript em um desses editores on-line. Se o editor on-line que você está usando não tiver painéis JavaScript / CSS separados, sinta-se à vontade para colocar os elementos in-line <script> e <style> dentro da página HTML.

+
+ +

Resumo do projeto

+ +

Você recebeu alguns recursos de HTML, CSS e imagem e algumas linhas de código JavaScript; você precisa escrever o JavaScript necessário para transformar isso em um programa de trabalho. O corpo do HTML se parece com isto:

+ +
<h1>Image gallery example</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

O exemplo é assim:

+ +

+ + + +

As partes mais interessantes do arquivo CSS do exemplo:

+ + + +

Seu JavaScript precisa:

+ + + +

Para lhe dar mais uma ideia, dê uma olhada no exemplo finalizado (não espreite o código-fonte!)

+ +

Passos para concluir

+ +

As seções a seguir descrevem o que você precisa fazer.

+ +

Looping através das imagens

+ +

Já fornecemos a você linhas que armazenam uma referência à thumb-bar <div> dentro de uma variável chamada thumbBar, cria um novo elemento <img> define seu atributo src como um valor de espaço reservado xxx, e acrescenta essa nova  <img> elemento dentro do thumbBar.

+ +

Você precisa:

+ +
    +
  1. Coloque a seção de código abaixo do comentário "Looping through images" dentro de um loop que percorre todas as 5 imagens — você só precisa percorrer cinco números, um representando cada imagem.
    2. +
  2. Em cada iteração de loop, substitua o valor de espaço reservado xxx por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributo src para esse valor em cada caso. Tenha em mente que, em cada caso, a imagem está dentro do diretório de imagens e seu nome é pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Adicionando um manipulador onclick a cada imagem em miniatura

+ +

Em cada iteração de loop, você precisa adicionar um manipulador onclick ao atual newImage — isso deve:

+ +
    +
  1. Encontre o valor do atributo src da imagem atual. Isto pode ser feito executando a função getAttribute() no <img> em cada caso e passando um parâmetro de "src" em cada caso. Mas como conseguir a imagem? O uso do newImage.getAttribute() não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valor src do último <img> para todos os casos. Para resolver isso, tenha em mente que, no caso de cada manipulador de eventos, o <img> é o destino do manipulador. Que tal obter as informações do objeto de evento?
    2. +
  2. Rode uma função, passando o valor src retornado como um parâmetro. Você pode chamar essa função como quiser.
    3. +
  3. Esta função do manipulador de eventos deve definir o valor do atributo src do displayed-img <img> para o valor src passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao <img> relevante em uma variável chamada displayedImg. Note que queremos uma função nomeada definida aqui.
    4. +
+ +

Escrevendo um manipulador que executa o botão escurecer / clarear

+ +

Isso só deixa o nosso escurecer / clarear <button> — nós já fornecemos uma linha que armazena uma referência ao <button> em uma variável chamada btn. Você precisa adicionar um manipulador onclick que:

+ +
    +
  1. Verifica o nome da classe atual definido no <button> — você pode novamente fazer isso usando getAttribute().
    2. +
  2. Se o nome da classe for "dark", altera a classe <button> para "light" (usando setAttribute()), seu conteúdo de texto para "Lighten", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0.5)".
    3. +
  3. Se o nome da classe não for "dark", a classe <button> será alterada para "dark", o conteúdo de texto de volta para "Darken", e o {{cssxref("background-color")}} da sobreposição <div> para "rgba(0,0,0,0)".
    4. +
+ +

As linhas seguintes fornecem uma base para alcançar as mudanças estipuladas nos pontos 2 e 3 acima.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Dicas e sugestões

+ + + +

Avaliação

+ +

Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então pode obter o guia de marcação com bastante facilidade, perguntando no tópico de discussão sobre este exercício, ou no canal #mdn IRC da Mozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/pt-br/learn/javascript/building_blocks/index.html b/files/pt-br/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..cb8deab502 --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/index.html @@ -0,0 +1,51 @@ +--- +title: Elementos construtivos do Javascript +slug: Aprender/JavaScript/Elementos_construtivos +tags: + - Artigo + - Condicionais + - Exercício + - Funções + - Iniciante + - JavaScript + - Loops + - eventos +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

Neste módulo, continuaremos nossa abordagem por todos os recursos-chave fundamentais de Javascript, voltando nossa atenção para os tipos de bloco de código comumente encontrados, tais como declarações condicionais, laços, funções e eventos. Você já viu isso no curso, mas apenas de passagem - aqui nós vamos discutir tudo isso explicitamente.

+ +

Pré-requisitos

+ +

Antes  de iniciar este módulo, você deve ter familiaridade com os conceitos básicos de HTML e CSS, além de ter estudado nosso módulo anterior, primeiros passos no Javacript.

+ +
+

Nota: Se você está trabalhando em um computador, tablet ou outro dispositivo onde você não tem a habilidade para criar seus próprios arquivos, você pode testar os exemplos de código (a maioria deles) em um programa de codificação online, tal como JSBin ou Thimble.

+
+ +

Guias

+ +
+
Tomando decisões em seu código — condicionais
+
Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo com diferentes valores de entrada. Por exemplo, em um jogo, se o número de vidas de um jogador é 0, então é "fim de jogo". Em um aplicativo de previsão do tempo, se ele está sendo olhado de manhã, é exibido um gráfico de nascer do sol; se for noite, mostra estrelas e a lua. Neste artigo, vamos explorar como as estruturas condicionais funcionam em Javascript.
+
Re-executando código
+
Às vezes você precisa que uma tarefa seja feita mais de uma vez em uma linha. Por exemplo, percorrendo uma lista de nomes. Em programação, laços realizam esse trabalho muito bem. Aqui nós vamos ver estruturas de laço em Javascript.
+
Funções — blocos reutilizáveis de código
+
Outro conceito essencial em codificação são funções. Funções permitem que você armazene um trecho de código que executa uma única tarefa dentro de um bloco definido, e então chame aquele código em qualquer lugar que você precise dele usando um comando curto - em vez de ter que digitar o mesmo código múltiplas vezes. Neste artigo, vamos explorar conceitos fundamentais por trás das funções, tais como sintaxe básica, como invocar e definir funções, escopo e parâmetros.
+
Construa sua própria função
+
Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece uma experiência prática. Aqui você vai adquirir um pouco de prática construindo sua própria função personalizada. Junto com isso, vamos explicar mais alguns detalhes úteis sobre lidar com funções.
+
Funções retornam valores
+
Há um último conceito essencial para discutirmos nesse curso, antes de encerrarmos nossa abordagem sobre funções — valores de retorno. Algumas funções não retornam nenhum valor significativo após executar, outras retornam. É importantes entender o que esses valores são, como utilizá-los em seu código, e como fazer suas próprias funções customizadas retornarem valores utilizáveis. 
+
Introdução a eventos
+
Eventos são ações ou ocorrências que acontecem no sistema que você está programando, sobre os quais o sistema te informa para que você possa reagir a eles de alguma forma se desejar. Por exemplo se o usuário clica em um botão numa página, você deve querer responder a essa ação exibindo uma caixa de informação. Neste artigo final nós discutiremos alguns conceitos importantes sobre eventos, e ver como eles funcionam em navegadores.
+
+ +

Exercícios

+ +

O exercício a seguir irá testar seu entendimento do básico de JavaScript abordado nos guias acima.

+ +
+
Galeria de imagens
+
Agora que demos uma olhada os elementos construtivos do JavaScript, vamos testar seu conhecimento sobre loops, funções, condicionais e eventos construindo um item bastante comum que você verá em muitos websites — uma galeria de imagens movida a JavaScript.
+
diff --git a/files/pt-br/learn/javascript/building_blocks/looping_code/index.html b/files/pt-br/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..058ce0385c --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,940 @@ +--- +title: Código em loop +slug: Aprender/JavaScript/Elementos_construtivos/Código_em_loop +tags: + - Artigo + - CodingScripting + - DO + - Guide + - Iniciante + - JavaScript + - Loop + - break + - continue + - for + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

As linguagens de programação são muito úteis para concluir rapidamente tarefas repetitivas, desde vários cálculos básicos até praticamente qualquer outra situação em que você tenha muitos itens semelhantes para manipular. Aqui, veremos as estruturas de loop disponíveis no JavaScript que ajudam com essas necessidades..

+ + + + + + + + + + + + +
Prerequisitos:Conhecimento básico em informática, um básico entendimento  de HTML e CSS, JavaScript first steps.
Objectivo:Entender como usar loops em JavaScript.
+ +

Mantenha-me no loop(laço)

+ +

Loops, loops, loops. Além de estarem associados a populares cereais matinais, montanhas-russas e produção musical, eles também são um conceito importante na programação. O loop de programação é como fazer a mesma coisa repetidas vezes - o que é chamado de iteração na linguagem de programação.

+ +

Vamos considerar o caso de um agricultor que quer se certificar de que ele terá comida suficiente para alimentar sua família durante a semana. Ele pode usar o seguinte loop para conseguir isso:

+ +


+

+ +

Um loop geralmente possui um ou mais dos seguintes itens:

+ + + +

No seu {{glossary("pseudocode")}}, isso seria algo como o seguinte:

+ +
loop(food = 0; foodNeeded = 10) {
+  if (food = foodNeeded) {
+    exit loop;
+    // Nós temos comida o suficiente, Vamos para casa
+  } else {
+    food += 2; // Passe uma hora coletando mais 2 alimentos(food)
+    // loop será executado novamente
+  }
+}
+ +

Assim, a quantidade de comida necessária é fixada em 10, e o montante que o agricultor tem atualmente é fixado em 0. Em cada iteração do ciclo, verificamos se a quantidade de alimento que o agricultor tem é igual à quantidade que ele precisa. Se assim for, podemos sair do loop. Se não, o agricultor gasta mais uma hora coletando duas porções de comida, e o laço é executado novamente.

+ +

Porque se importar?

+ +

Neste ponto, você provavelmente já entendeu o conceito de alto nível por trás dos loops, mas provavelmente está pensando "OK, ótimo, mas como isso me ajuda a escrever um código JavaScript melhor?" Como dissemos anteriormente, os loops têm tudo a ver com fazer a mesma coisa repetidas vezes, o que é ótimo para concluir rapidamente tarefas repetitivas.

+ +

Muitas vezes, o código será um pouco diferente em cada iteração sucessiva do loop, o que significa que você pode completar toda uma carga de tarefas que são semelhantes, mas não são totalmente iguais — se você tem muitos cálculos diferentes para fazer, e você quer fazer um diferente do outro, e não o mesmo repetidamente!

+ +

Vejamos um exemplo para ilustrar perfeitamente por que os loops são uma coisa tão boa. Digamos que quiséssemos desenhar 100 círculos aleatórios em um elemento  {{htmlelement("canvas")}}  (pressione o botão Atualizar para executar o exemplo várias vezes para ver os conjuntos aleatórios diferentes):

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Você não precisa entender todo esse código por enquanto, mas vamos ver a parte do código que realmente desenha os 100 círculos:

+ +
for (var i = 0; i < 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}
+ + + +

Você deve ter notado - estamos usando um loop para executar 100 iterações desse código, cada uma delas desenhando um círculo em uma posição aleatória na página. A quantidade de código necessária seria a mesma se estivéssemos desenhando 100 círculos, 1.000 ou 10.000. Apenas um número tem que mudar.

+ +

Se não estivéssemos usando um loop aqui, teríamos que repetir o seguinte código para cada círculo que queríamos desenhar:

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Isso ficaria muito chato, difícil e lento de manter. Loops são realmente os melhores.

+ +

O for loop padrão

+ +

Vamos começar a explorar alguns exemplos específicos de construções de loop. O primeiro e que você usará na maior parte do tempo, é o loop for - ele tem a seguinte sintaxe:

+ +
for (inicializador; condição-saída; expressão-final) {
+  // código para executar
+}
+ +

Aqui nós temos:

+ +
    +
  1. A palavra-chave for, seguido por parênteses.
    2. +
  2. Dentro do parênteses temos três itens, sepados por ponto e vírgula: +
      +
    1. O inicializador— geralmente é uma variável configurada para um número, que é incrementado para contar o número de vezes que o loop foi executado. É também por vezes referido como uma variável de contador.
      2. +
    2. A condição-saída — como mencionado anteriormente, aqui é definido qundo o loop deve parar de executar. Geralmente, essa é uma expressão que apresenta um operador de comparação, um teste para verificar se a condição de saída foi atendida.
      3. +
    3. A expressão-final — isso sempre é avaliado (ou executado) cada vez que o loop passou por uma iteração completa. Geralmente serve para incrementar (ou, em alguns casos, decrementar) a variável do contador, aproximando-a do valor da condição de saída.
      4. +
    +
    3. +
  3. Algumas chaves contêm um bloco de código - esse código será executado toda vez que o loop for iterado.
    4. +
+ +

Vejamos um exemplo real para podermos visualizar o que isso faz com mais clareza.

+ +
var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i < cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;
+ +

Isso nos dá a seguinte saída:

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

+
+ +

Aqui mostra um loop sendo usado para iterar os itens em uma matriz e fazer algo com cada um deles - um padrão muito comum em JavaScript. Aqui:

+ +
    +
  1. O iterador, i, começa em 0 (var i = 0).
    2. +
  2. Foi dito para executar até que não seja menor que o comprimento do array dos gatos. Isso é importante - a condição de saída mostra a condição sob a qual o loop ainda será executado. No caso, enquanto i < cats.length  for verdadeiro, o loop continuará executando.
    3. +
  3. Dentro do loop, nós concatenamos o item de loop atual (cats[i] é cats[o nome do item que está iterado no momento]) junto com uma vírgula e um espaço, no final da variável info . Assim: +
      +
    1. Durante a primeira execução, i = 0, então cats[0] + ', ' será concatenado na variável info ("Bill").
      2. +
    2. Durante a segunda execução, i = 1, so cats[1] + ', ' será concatenado na variável info ("Jeff, ")
      3. +
    3. E assim por diante. Após cada execução do loop, 1 será adicionado à i (i++), então o processo será iniciado novamente.
      4. +
    +
    4. +
  4. Quando i torna-se igual a cats.length, o loop é interrompido e o navegador passará para o próximo trecho de código abaixo do loop.
    5. +
+ +
+

Nota:Nós fizemos a condição de saída i < cats.length, e não i <= cats.length, porque os computadores contam a partir de 0, não 1 - estamos começando i em 0, e indo até i = 4 (o index do último item do array). cats.length retorna 5, pois há 5 itens no array, mas não queremos chegar até  i = 5, pois isso retornaria  undefined para o último item (não há nenhum item  no índice 5 do array). Então, portanto, queremos ir até 1 a menos de  cats.length (i <), não é o mesmo que cats.length (i <=).

+
+ +
+

Nota: Um erro comum nas condições de saída é usá-las "igual a" (===) em vez de dizer "menor ou igual a" (<=). Se quiséssemos executar nosso loop até  i = 5, a condição de saída precisaria ser  i <= cats.length. Se nós setarmos para  i === cats.length, o loop não seria executado em todos, porque  i não é igual a 5 na primeira iteração do loop, a execução pararia imediatamente.

+
+ +

Um pequeno problema que nos resta é que a sentença de saída final não é muito bem formada:

+ +
+

Meus gatos se chamam: Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

Neste caso, queremos alterar a concatenação na iteração final do loop, para que não tenhamos uma vírgula no final da frase. Bem, não há problema - podemos muito bem inserir uma condicional dentro do nosso loop for para lidar com este caso especial:

+ +
for (var i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

+
+ +
+

Importante: Com for - como acontece com todos os loops - você deve certificar-se de que o inicializador está iterado(configurado) para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente executando e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.

+
+ +

Saindo do loop com o break

+ +

Se você quiser sair de um loop antes que todas as iterações sejam concluídas, você poderá usar a instrução break. Nós já encontramos isso em um artigo anterior, quando observamos as instruções switch - quando um determinado caso é atendido em uma condição do switch e que corresponde à expressão de entrada informada, a instrução break sai imediatamente da instrução switch e passa para o trecho de código seguinte.

+ +

É o mesmo com loops  — um comando  break  irá imediatamente sair do loop e fazer o navegador passar para o código seguinte.

+ +

Digamos que quiséssemos pesquisar por uma variedade de contatos e números de telefone e retornar apenas o número que queríamos encontrar? Primeiro, algum HTML simples  — um texto {{htmlelement("input")}} permitindo-nos iserir um nome para pesquisar, {{htmlelement("button")}} elemento para submeter a pesquisa e um {{htmlelement("p")}} elemento para mostrar o resultado em:

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Agora para no JavaScript:

+ +
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i < contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. Primeiramente, temos algumas definições de variáveis —  temos um array com as informações dos contatos, cada item é uma string e contém um nome e um número de telefone separados por dois pontos.
    2. +
  2. Em seguida, anexamos um ouvinte de evento ao botão (btn),  de modo que quando ele é pressionado, algum código é invocado para executar a pesquisa e retornar os resultados.
    3. +
  3. Armazenamos o valor que foi inserido no input de texto em uma variável chamada  searchName, antes de limpar a entrada de texto e focar novamente, deixando o campo pronto para a próxima pesquisa.
    4. +
  4. Agora, na parte interessante, o loop for: +
      +
    1. Iniciamos o contador em 0, executamos o loop até que o contador não seja menor que  contacts.length, e incrementamos i com 1 depois e cada iteração do loop.
      2. +
    2. Dentro do loop, primeiro dividimos o contato atual (contacts[i]) no caractere " : " e armazenamos os dois valores resultantes em uma matriz chamada  splitContact.
      3. +
    3. Em seguida, usamos uma instrução condicional para testar se o  splitContact[0] (nome do contato) é igual ao  searchName. Se for igual, inserimos uma string no parágrafo para mostrar em tela qual é o número do contato e usamos o break para encerrar o loop.
      4. +
    +
    5. +
  5. +

    Após (contacts.length-1) iterações, se o nome do contato não corresponder à pesquisa inserida, o texto do parágrafo será definido como "Contato não encontrado" e o loop continuará a iterar.

    +
    6. +
+ +
+

Nota: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

+
+ +

Ignorando iterações com continue

+ +

A instrução continue funciona de maneira semelhante ao  break, mas ao invés de sair inteiramente do loop, ele pula para a próxima iteração do loop. Vejamos outro exemplo que usa um número como entrada e retorna apenas os números que são quadrados de inteiros (números inteiros).

+ +

O HTML é basicamente o mesmo do último exemplo - uma entrada de texto simples e um parágrafo para saída. O JavaScript é basicamente o mesmo, embora o próprio loop seja um pouco diferente:

+ +
var num = input.value;
+
+for (var i = 1; i <= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}
+ +

Aqui está a saída:

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. Nesse caso, a entrada deve ser um número (num). O loop for recebe um contador começando em 1 (como não estamos interessados em 0 neste caso), uma condição de saída que diz que o loop irá parar quando o contador se tornar maior que o input num, e um iterador que adiciona 1 ao contador a cada vez.
    2. +
  2. Dentro do loop, encontramos a raiz quadrada de cada número usando Math.sqrt(i), e, em seguida, verificamos se a raiz quadrada é um inteiro, testando se é igual a ela mesma quando foi arredondada para o inteiro mais próximo é o que Math.floor() faz com o número que é passado).
    3. +
  3. Se a raiz quadrada e a raiz quadrada arredondada não forem iguais (! ==), isso significa que a raiz quadrada não é um número inteiro, portanto, não estamos interessados nela. Nesse caso, usamos a instrução continue para pular para a próxima iteração de loop sem registrar o número em nenhum lugar.
    4. +
  4. Se a raiz quadrada é um inteiro, nós pulamos o bloco if inteiramente para que a instrução continue não seja executada; em vez disso, concatenamos o valor i atual mais um espaço até o final do conteúdo do parágrafo.
    5. +
+ +
+

Note: Você pode encontrar este código de exemplo no GitHub (também veja em execução ).

+
+ +

while e o do ... while

+ +

for não é o único tipo de loop disponível em JavaScript. Na verdade, existem muitos outros, embora você não precise entender tudo isso agora, vale a pena dar uma olhada na estrutura dos outros tipos de loops para que você possa reconhecer a mesma lógica na funcionalidade porém empregada de uma forma diferente.

+ +

Primeiro, vamos dar uma olhada no while loop. A sintaxe deste loop é assim:

+ +
inicializador
+while (condição-saída) {
+  // code to run
+
+  expressão-final
+}
+ +

While funciona de maneira muito semelhante ao loop for, exceto que a variável inicializadora é definida antes do loop, e a expressão final é incluída dentro do loop após o código a ser executado - em vez de esses dois itens serem incluídos dentro dos parênteses. A condição de saída está incluída dentro dos parênteses, que são precedidos pela palavra-chave while e não por for.

+ +

Os mesmos três itens ainda estão presentes, e eles ainda são definidos na mesma ordem do loop for - isso faz sentido, já que você ainda precisa ter um inicializador definido antes de poder verificar se ele atingiu a condição de saída ; a condição final é então executada após o código dentro do loop ser executado (uma iteração foi concluída), o que só acontecerá se a condição de saída ainda não tiver sido atingida.

+ +

Vamos dar uma olhada novamente no nosso exemplo de lista de gatos, que reescrevemos para usar um loop while:

+ +
var i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Nota: Isso ainda funciona da mesma forma esperada — dê uma olhada no código em execução  (também veja o código fonte completo).

+
+ +

O do...while loop é muito semelhante, mas fornece uma variação na estrutura while:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

Nesse caso, o inicializador novamente vem em primeiro lugar, antes que o loop seja iniciado. A palavra-chave precede diretamente as chaves que contêm o código a ser executado e a expressão final.

+ +

O diferenciador aqui é que a condição de saída vem depois de todo o resto, envolvida em parênteses e precedida por uma palavra-chave while. Em um loop do ... while, o código dentro das chaves é sempre executado uma vez antes da verificação ser feita para ver se deve ser executada novamente (no while e para, a verificação vem primeiro, então o código pode nunca ser executado ).

+ +

Vamos reescrever nosso exemplo de listagem de gato novamente para usar um loop do ... while:

+ +
var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Nota: Novamente, isso funciona exatamente como esperado - dê uma olhada nele executando no GitHub (veja também o código fonte completo).

+
+ +
+

Importante: Com while e do ... while - como em todos os loops - você deve certificar-se de que o inicializador esteja iterado para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.

+
+ +

Aprendizado ativo: contagem regressiva!

+ +

Nesse exercício, nós queremos que você imprima uma simples contagem regressiva na caixa de saída, de 10 até terminar. Especificamente, queremos que você:

+ + + +

Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizado ativo: preenchendo uma lista de convidados

+ +

Nesse exercício, nós queremos que você pegue uma lista de nomes armazenados em um array, e os coloque em uma lista de convidados. Mas não tão fácil — nós não queremos que Phil e Lola estejam nela porque eles são gananciosos e rudes, e sempre comem a comida toda! Nós temos duas listas, uma para convidados aceitos, e uma para convidados recusados.

+ +

Especificamente, nós queremos que você:

+ + + +

Nós já fornecemos a você:

+ + + +

Questão bônus extra  — depois de completar as tarefas acima com sucesso, você terá duas listas de nomes, separados por vírgulas, mas eles estarão desarrumados — haverá uma vírgula no final decada um. Você pode descobrir como escrever linhas que que cortam a última vírgula em cada caso, e adicionar um ponto final? Dê uma olhada no artigo Métodos úteis de string para ajuda.

+ +

Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+ +

Which loop type should you use?

+ +

For basic uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.

+ +

First for:

+ +
for (initializer; exit-condition; final-expression) {
+  // code to run
+}
+ +

while:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

and finally do...while:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

Nós recomendamos o uso do for, pelo menos no começo, já que ele é provavelmente a forma mais fácil de lembrar de tudo  — o inicializador, a condição de saída, e a expressão final final tudo fica ordenadamente dentro dos parênteses, então é fácil de ver onde eles estão e para verifcar se você não os esqueceu.

+ +
+

Note: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced Loops and iteration guide.

+
+ +

Conclusion

+ +

This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/building_blocks/return_values/index.html b/files/pt-br/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..39d72a1660 --- /dev/null +++ b/files/pt-br/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,168 @@ +--- +title: Valores de retorno de função +slug: Aprender/JavaScript/Elementos_construtivos/Return_values +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Há um último conceito essencial para discutirmos neste curso, para fechar nossa visão das funções — valores de retorno. Algumas funções não retornam um valor significativo após a conclusão, mas outras o fazem, e é importante entender quais são seus valores, como utilizá-los em seu código e como fazer com que suas próprias funções personalizadas retornem valores úteis. Nós vamos cobrir tudo isso abaixo.

+ + + + + + + + + + + + +
Pré-requisitos: +

Conhecimento básico de internet, compreenção básica de HTML e CSS, JavaScript primeiros passos, Funções — reutilizando blocos de código.

+
Objetivo:Entender os valores de retorno de uma função, e como utilizá-los
+ +

Quais são os valores de retorno?

+ +

Valores de retorno são exatamente como soam — valores retornados pela função quando são concluídos. Você já conheceu os valores de retorno várias vezes, embora possa não ter pensado neles explicitamente. Vamos voltar para algum código familiar:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made
+ +

Nós vimos exatamente este bloco de código em nosso primeiro artigo de função. Estamos invocando a função replace() na string myText e passando a ela dois parâmetros — a substring para localizar e a substring para substituí-la. Quando essa função é concluída (termina a execução), ela retorna um valor, que é uma nova string com a substituição feita. No código acima, estamos salvando esse valor de retorno como o valor da variável  newString.

+ +

Se você observar a página de referência MDN da função de substituição, verá uma seção chamada Valor de retorno. É muito útil conhecer e entender quais valores são retornados por funções, portanto, tentamos incluir essas informações sempre que possível.

+ +

Algumas funções não retornam um valor de retorno como tal (em nossas páginas de referência, o valor de retorno é listado como void ou undefined em tais casos). Por exemplo, na função displayMessage() que criamos no artigo anterior, nenhum valor específico é retornado como resultado da função que está sendo chamada. Apenas faz uma caixa aparecer em algum lugar na tela — é isso!

+ +

Geralmente, um valor de retorno é usado onde a função é uma etapa intermediária em um cálculo de algum tipo. Você quer chegar a um resultado final, que envolve alguns valores. Esses valores precisam ser calculados por uma função, que retorna os resultados para que possam ser usados no próximo estágio do cálculo.

+ +

Usando valores de retorno em suas próprias funções

+ +

Para retornar um valor de uma função personalizada, você precisa usar ... aguarde por isso ... a palavra-chave return. Vimos isso em ação recentemente em nosso exemplo random-canvas-circles.html. Nossa função draw() desenha 100 círculos aleatórios em algum lugar em um HTML {{htmlelement("canvas")}}:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

Dentro de cada iteração de loop, três chamadas são feitas para a função random() , para gerar um valor aleatório para a coordenada x do círculo atual, coordenada y e raio, respectivamente. A função random() recebe um parâmetro — um número inteiro — e retorna um número aleatório inteiro entre 0 e esse número. Se parece com isso:

+ +
function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Isso pode ser escrito da seguinte maneira:

+ +
function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}
+ +

Mas a primeira versão é mais rápida de escrever e mais compacta.

+ +

Estamos retornando o resultado do cálculo Math.floor(Math.random()*number) cada vez que a função é chamada. Esse valor de retorno aparece no ponto em que a função foi chamada e o código continua. Então, por exemplo, se nós rodássemos a seguinte linha:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ +

e as três chamadas random() retornaram os valores 500, 200 e 35, respectivamente, a linha seria executada como se fosse isso:

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+ +

As chamadas de função na linha são executadas primeiro e seus valores de retorno substituem as chamadas de função, antes que a própria linha seja executada.

+ +

Aprendizagem ativa: nossa própria função de valor de retorno

+ +

Vamos escrever nossas próprias funções com valores de retorno.

+ +
    +
  1. Primeiro de tudo, faça uma cópia local do arquivo function-library.html do GitHub. Esta é uma página HTML simples contendo um campo de texto {{htmlelement("input")}} e um parágrafo. Há também um elemento {{htmlelement("script")}} no qual armazenamos uma referência a ambos os elementos HTML em duas variáveis. Esta pequena página permitirá que você insira um número na caixa de texto e exiba diferentes números relacionados a ele no parágrafo abaixo.
    2. +
  2. Vamos adicionar algumas funções úteis para este elemento <script>. Abaixo das duas linhas existentes de JavaScript, adicione as seguintes definições de função: + 
    function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x > 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}
    + As funções squared() e cubed() são bastante óbvias — elas retornam o quadrado ou cubo do número dado como um parâmetro. A função factorial() retorna o  fatorial do número fornecido.
    3. +
  3. Em seguida, vamos incluir uma maneira de imprimir informações sobre o número digitado na entrada de texto. Digite o seguinte manipulador de eventos abaixo das funções existentes: + 
    input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}
    + +

    Aqui estamos criando um manipulador de eventos onchange que é executado sempre que o evento de mudança é acionado na entrada de texto — ou seja, quando um novo valor é inserido na entrada de texto e enviado (insira um valor e pressione tab por exemplo). Quando essa função anônima é executada, o valor existente inserido na entrada é armazenado na variável num.

    + +

    Em seguida, fazemos um teste condicional — se o valor inserido não for um número, imprimiremos uma mensagem de erro no parágrafo. O teste analisa se a expressão isNaN(num) retorna true. Usamos a função isNaN() para testar se o valor num não é um número — se for, retorna true, e, se não, false.

    + +

    Se o teste retorna false, o valor  num é um número, então imprimimos uma frase dentro do elemento de parágrafo informando o que é o quadrado, o cubo e o fatorial do número. A sentença chama as funções squared(), cubed(), e factorial() para obter os valores necessários.

    +
    4. +
  4. Salve seu código, carregue-o em um navegador e experimente.
    5. +
+ +
+

Nota: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na versão finalizada no GitHub (consulte também sua execução), ou peça ajuda.

+
+ +

Neste ponto, gostaríamos que você escrevesse algumas funções e as adicionasse à biblioteca. Como sobre o quadrado ou raiz cúbica do número, ou a circunferência de um círculo com um raio de comprimento num?

+ +

Este exercício trouxe alguns pontos importantes além de ser um estudo sobre como usar a declaração de return. Além disso, temos:

+ + + +

Conclusão

+ +

Então, temos isso — funções são divertidas, muito úteis e, embora haja muito o que falar em relação à sua sintaxe e funcionalidade, bastante compreensíveis, dados os artigos certos para se estudar.

+ +

Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente ou entre em contato conosco para pedir ajuda.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..ce4d3c2a20 --- /dev/null +++ b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,778 @@ +--- +title: Client-side storage +slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +

{{LearnSidebar}}

+ +
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Os navegadores modernos oferecem suporte a várias maneiras de os sites armazenarem dados no computador do usuário - com a permissão do usuário - e depois recuperá-los quando necessário. Isso permite que você mantenha dados para armazenamento de longo prazo, salve sites ou documentos para uso offline, retenha configurações específicas do usuário para seu site e muito mais. Este artigo explica os princípios básicos de como eles funcionam.

+ + + + + + + + + + + + +
Pré-requisitos:Noções básicas de JavaScript (consulte as primeiras etapas  , blocos de construção , objetos JavaScript ), as noções básicas de APIs do lado do cliente
Objetivo:Para aprender como usar APIs de armazenamento do lado do cliente para armazenar dados de aplicativos
+ +

Armazenamento do lado do cliente?

+ +

Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre sites estáticos e sites dinâmicos . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do lado do servidor para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.

+ +

O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:

+ + + +

Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados ​​juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados ​​por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.

+ +
+

Nota : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte Limites de armazenamento do navegador e critérios de despejo para obter mais informações..

+
+ +

Old school: Cookies

+ +

The concept of client-side storage has been around for Nota : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consultea long time. Since the early days of the web, sites have used cookies to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web.

+ +

These days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. However, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session IDs and access tokens. For more information on cookies see our Using HTTP cookies article.

+ +

New school: Web Storage and IndexedDB

+ +

The "easier" features we mentioned above are as follows:

+ + + +

You'll learn more about these APIs below.

+ +

The future: Cache API

+ +

Some modern browsers support the new {{domxref("Cache")}} API. This API is designed for storing HTTP responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. Cache is usually used in combination with the Service Worker API, although it doesn't have to be.

+ +

Use of Cache and Service Workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the {{anch("Offline asset storage")}} section below.

+ +

Storing simple data — web storage

+ +

The Web Storage API is very easy to use — you store simple name/value pairs of data (limited to strings, numbers, etc.) and retrieve these values when needed.

+ +

Basic syntax

+ +

Let's show you how:

+ +
    +
  1. +

    First, go to our web storage blank template on GitHub (open this in a new tab).

    +
    2. +
  2. +

    Open the JavaScript console of your browser's developer tools.

    +
    3. +
  3. +

    All of your web storage data is contained within two object-like structures inside the browser: {{domxref("Window.sessionStorage", "sessionStorage")}} and {{domxref("Window.localStorage", "localStorage")}}. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful.

    + +

    The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):

    + + 
    localStorage.setItem('name','Chris');
    +
    4. +
  4. +

    The {{domxref("Storage.getItem()")}} method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. Now type these lines into your JavaScript console:

    + + 
    let myName = localStorage.getItem('name');
+myName
    + +

    Upon typing in the second line, you should see that the myName variable now contains the value of the name data item.

    +
    5. +
  5. +

    The {{domxref("Storage.removeItem()")}} method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. Type the following lines into your JavaScript console:

    + + 
    localStorage.removeItem('name');
+let myName = localStorage.getItem('name');
+myName
    + +

    The third line should now return null — the name item no longer exists in the web storage.

    +
    6. +
+ +

The data persists!

+ +

One key feature of web storage is that the data persists between page loads (and even when the browser is shut down, in the case of localStorage). Let's look at this in action.

+ +
    +
  1. +

    Open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! This will make it easier to deal with.

    +
    2. +
  2. +

    Type these lines into the browser's JavaScript console:

    + + 
    localStorage.setItem('name','Chris');
+let myName = localStorage.getItem('name');
+myName
    + +

    You should see the name item returned.

    +
    3. +
  3. +

    Now close down the browser and open it up again.

    +
    4. +
  4. +

    Enter the following lines again:

    + + 
    let myName = localStorage.getItem('name');
+myName
    + +

    You should see that the value is still available, even though the browser has been closed and then opened again.

    +
    5. +
+ +

Separate storage for each domain

+ +

There is a separate data store for each domain (each separate web address loaded in the browser). You will see that if you load two websites (say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website.

+ +

This makes sense — you can imagine the security issues that would arise if websites could see each other's data!

+ +

A more involved example

+ +

Let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. Our example will allow you enter a name, after which the page will update to give you a personalized greeting. This state will also persist across page/browser reloads, because the name is stored in web storage.

+ +

You can find the example HTML at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for entering your name.

+ +

+ +

Let's build up the example, so you can understand how it works.

+ +
    +
  1. +

    First, make a local copy of our personal-greeting.html file in a new directory on your computer.

    +
    2. +
  2. +

    Next, note how our HTML references a JavaScript file called index.js (see line 40). We need to create this and write our JavaScript code into it. Create an index.js file in the same directory as your HTML file. 

    +
    3. +
  3. +

    We'll start off by creating references to all the HTML features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. Add the following lines to your JavaScript file:

    + + 
    // create needed constants
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');
    +
    4. +
  4. +

    Next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. Add this snippet below your previous code:

    + + 
    // Stop the form from submitting when a button is pressed
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});
    +
    5. +
  5. +

    Now we need to add an event listener, the handler function of which will run when the "Say hello" button is clicked. The comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using setItem(), then running a function called nameDisplayCheck() that will handle updating the actual website text. Add this to the bottom of your code:

    + + 
    // run function when the 'Say hello' button is clicked
+submitBtn.addEventListener('click', function() {
+  // store the entered name in web storage
+  localStorage.setItem('name', nameInput.value);
+  // run nameDisplayCheck() to sort out displaying the
+  // personalized greetings and updating the form display
+  nameDisplayCheck();
+});
    +
    6. +
  6. +

    At this point we also need an event handler to run a function when the "Forget" button is clicked — this is only displayed after the "Say hello" button has been clicked (the two form states toggle back and forth). In  this function we remove the name item from web storage using removeItem(), then again run nameDisplayCheck() to update the display. Add this to the bottom:

    + + 
    // run function when the 'Forget' button is clicked
+forgetBtn.addEventListener('click', function() {
+  // Remove the stored name from web storage
+  localStorage.removeItem('name');
+  // run nameDisplayCheck() to sort out displaying the
+  // generic greeting again and updating the form display
+  nameDisplayCheck();
+});
    +
    7. +
  7. +

    It is now time to define the nameDisplayCheck() function itself. Here we check whether the name item has been stored in web storage by using localStorage.getItem('name') as a conditional test. If it has been stored, this call will evaluate to true; if not, it will be false. If it is true, we display a personalized greeting, display the "forget" part of the form, and hide the "Say hello" part of the form. If it is false, we display a generic greeting and do the opposite. Again, put the following code at the bottom:

    + + 
    // define the nameDisplayCheck() function
+function nameDisplayCheck() {
+  // check whether the 'name' data item is stored in web Storage
+  if(localStorage.getItem('name')) {
+    // If it is, display personalized greeting
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // hide the 'remember' part of the form and show the 'forget' part
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // if not, display generic greeting
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // hide the 'forget' part of the form and show the 'remember' part
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}
    +
    8. +
  8. +

    Last but not least, we need to run the nameDisplayCheck() function every time the page is loaded. If we don't do this, then the personalized greeting will not persist across page reloads. Add the following to the bottom of your code:

    + + 
    document.body.onload = nameDisplayCheck;
    +
    9. +
+ +

Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our finished version running live here.

+ +
+

Note: There is another, slightly more complex example to explore at Using the Web Storage API.

+
+ +
+

Note: In the line <script src="index.js" defer></script> of the source for our finished version, the defer attribute specifies that the contents of the {{htmlelement("script")}} element will not execute until the page has finished loading.

+
+ +

Storing complex data — IndexedDB

+ +

The IndexedDB API (sometimes abbreviated IDB) is a complete database system available in the browser in which you can store complex related data, the types of which aren't limited to simple values like strings or numbers. You can store videos, images, and pretty much anything else in an IndexedDB instance.

+ +

However, this does come at a cost: IndexedDB is much more complex to use than the Web Storage API. In this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started.

+ +

Working through a note storage example

+ +

Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.

+ +

The app looks something like this:

+ +

+ +

Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.

+ +

Getting started

+ +
    +
  1. First of all, make local copies of our index.html, style.css, and index-start.js files into a new directory on your local machine.
    2. +
  2. Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.
    3. +
  3. Rename your JavaScript file to index.js. You are now ready to start adding code to it.
    4. +
+ +

Database initial set up

+ +

Now let's look at what we have to do in the first place, to actually set up a database.

+ +
    +
  1. +

    Below the constant declarations, add the following lines:

    + + 
    // Create an instance of a db object for us to store the open database in
+let db;
    + +

    Here we are declaring a variable called db — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.

    +
    2. +
  2. +

    Next, add the following to the bottom of your code:

    + + 
    window.onload = function() {
+
+};
    + +

    We will write all of our subsequent code inside this window.onload event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).

    +
    3. +
  3. +

    Inside the window.onload handler, add the following:

    + + 
    // Open our database; it is created if it doesn't already exist
+// (see onupgradeneeded below)
+let request = window.indexedDB.open('notes_db', 1);
    + +

    This line creates a request to open version 1 of a database called notes_db. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.

    + +

    To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it request so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.

    + +
    +

    Note: The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the onupgradeneeded handler (see below), etc. We won't cover upgrading databases in this simple tutorial.

    +
    +
    4. +
  4. +

    Now add the following event handlers just below your previous addition — again inside the window.onload handler:

    + + 
    // onerror handler signifies that the database didn't open successfully
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// onsuccess handler signifies that the database opened successfully
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Store the opened database object in the db variable. This is used a lot below
+  db = request.result;
+
+  // Run the displayData() function to display the notes already in the IDB
+  displayData();
+};
    + +

    The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.

    + +

    The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the db variable we created earlier for later use. We also run a custom function called displayData(), which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.

    +
    5. +
  5. +

    Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:

    + + 
    // Setup the database tables if this has not already been done
+request.onupgradeneeded = function(e) {
+  // Grab a reference to the opened database
+  let db = e.target.result;
+
+  // Create an objectStore to store our notes in (basically like a single table)
+  // including a auto-incrementing key
+  let objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
+
+  // Define what data items the objectStore will contain
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};
    + +

    This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from the result property of the event's target (e.target.result), which is the request object. This is equivalent to the line db = request.result; inside the onsuccess handler, but we need to do this separately here because the onupgradeneeded handler (if needed) will run before the onsuccess handler, meaning that the db value wouldn't be available if we didn't do this.

    + +

    We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called notes_os. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an autoIncrement key field called id — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the id field will be used to uniquely identify records, such as when deleting or displaying a record.

    + +

    We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: title (which will contain a title for each note), and body (which will contain the body text of the note).

    +
    6. +
+ +

So with this simple database schema set up, when we start adding records to the database; each one will be represented as an object along these lines:

+ +
{
+  title: "Buy milk",
+  body: "Need both cows milk and soy.",
+  id: 8
+}
+ +

Adding data to the database

+ +

Now let's look at how we can add records to the database. This will be done using the form on our page.

+ +

Below your previous event handler (but still inside the window.onload handler), add the following line, which sets up an onsubmit handler that runs a function called addData() when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):

+ +
// Create an onsubmit handler so that when the form is submitted the addData() function is run
+form.onsubmit = addData;
+ +

Now let's define the addData() function. Add this below your previous line:

+ +
// Define the addData() function
+function addData(e) {
+  // prevent default - we don't want the form to submit in the conventional way
+  e.preventDefault();
+
+  // grab the values entered into the form fields and store them in an object ready for being inserted into the DB
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // open a read/write db transaction, ready for adding the data
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+
+  // call an object store that's already been added to the database
+  let objectStore = transaction.objectStore('notes_os');
+
+  // Make a request to add our newItem object to the object store
+  let request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // Clear the form, ready for adding the next entry
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // Report on the success of the transaction completing, when everything is done
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // update the display of data to show the newly added item, by running displayData() again.
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}
+ +

This is quite complex; breaking it down, we:

+ + + +

Displaying the data

+ +

We've referenced displayData() twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:

+ +
// Define the displayData() function
+function displayData() {
+  // Here we empty the contents of the list element each time the display is updated
+  // If you didn't do this, you'd get duplicates listed each time a new note is added
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Open our object store and then get a cursor - which iterates through all the
+  // different data items in the store
+  let objectStore = db.transaction('notes_os').objectStore('notes_os');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Get a reference to the cursor
+    let cursor = e.target.result;
+
+    // If there is still another data item to iterate through, keep running this code
+    if(cursor) {
+      // Create a list item, h3, and p to put each data item inside when displaying it
+      // structure the HTML fragment, and append it inside the list
+      const listItem = document.createElement('li');
+      const h3 = document.createElement('h3');
+      const para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Put the data from the cursor inside the h3 and para
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Store the ID of the data item inside an attribute on the listItem, so we know
+      // which item it corresponds to. This will be useful later when we want to delete items
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Create a button and place it inside each listItem
+      const deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Set an event handler so that when the button is clicked, the deleteItem()
+      // function is run
+      deleteBtn.onclick = deleteItem;
+
+      // Iterate to the next item in the cursor
+      cursor.continue();
+    } else {
+      // Again, if list item is empty, display a 'No notes stored' message
+      if(!list.firstChild) {
+        const listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // if there are no more cursor items to iterate through, say so
+      console.log('Notes all displayed');
+    }
+  };
+}
+ +

Again, let's break this down:

+ + + +

Deleting a note

+ +

As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the deleteItem() function, which looks like so:

+ +
// Define the deleteItem() function
+function deleteItem(e) {
+  // retrieve the name of the task we want to delete. We need
+  // to convert it to a number before trying it use it with IDB; IDB key
+  // values are type-sensitive.
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // open a database transaction and delete the task, finding it using the id we retrieved above
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+  let objectStore = transaction.objectStore('notes_os');
+  let request = objectStore.delete(noteId);
+
+  // report that the data item has been deleted
+  transaction.oncomplete = function() {
+    // delete the parent of the button
+    // which is the list item, so it is no longer displayed
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Again, if list item is empty, display a 'No notes stored' message
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}
+ + + +

So that's it! Your example should now work.

+ +

If you are having trouble with it, feel free to check it against our live example (see the source code also).

+ +

Storing complex data via IndexedDB

+ +

As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.

+ +

To demonstrate how to do it, we've written another example called IndexedDB video store (see it running live here also). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.

+ +

Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.

+ +
    +
  1. +

    For this simple example, we've stored the names of the videos to fetch in an array of objects:

    + + 
    const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];
    +
    2. +
  2. +

    To start with, once the database is successfully opened we run an init() function. This loops through the different video names, trying to load a record identified by each name from the videos database.

    + +

    If each video is found in the database (easily checked by seeing whether request.result evaluates to true — if the record is not present, it will be undefined), its video files (stored as blobs) and the video name are passed straight to the displayVideo() function to place them in the UI. If not, the video name is passed to the fetchVideoFromNetwork() function to ... you guessed it — fetch the video from the network.

    + + 
    function init() {
+  // Loop through the video names one by one
+  for(let i = 0; i < videos.length; i++) {
+    // Open transaction, get object store, and get() each video by name
+    let objectStore = db.transaction('videos_os').objectStore('videos_os');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // If the result exists in the database (is not undefined)
+      if(request.result) {
+        // Grab the videos from IDB and display them using displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Fetch the videos from the network
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}
    +
    3. +
  3. +

    The following snippet is taken from inside fetchVideoFromNetwork() — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.

    + +

    We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.

    + +

    When all those promises have fulfilled, the all() promise fulfills with an array containing all the individual fulfillment values. Inside the all() block, you can see that we then call the displayVideo() function like we did before to display the videos in the UI, then we also call the storeVideo() function to store those videos inside the database.

    + + 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
+  response.blob()
+);
+
+// Only run the next code when both promises have fulfilled
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // display the video fetched from the network with displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // store it in the IDB using storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});
    +
    4. +
  4. +

    Let's look at storeVideo() first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a readwrite transaction and get a reference to our videos_os object store, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.

    + + 
    function storeVideo(mp4Blob, webmBlob, name) {
+  // Open transaction, get object store; make it a readwrite so we can write to the IDB
+  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+  // Create a record to add to the IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Add the record to the IDB using add()
+  let request = objectStore.add(record);
+
+  ...
+
+};
    +
    5. +
  5. +

    Last but not least, we have displayVideo(), which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <video> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's src attributes, and it works fine.

    + + 
    function displayVideo(mp4Blob, webmBlob, title) {
+  // Create object URLs out of the blobs
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  const video = document.createElement('video');
+  video.controls = true;
+  const source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  const source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}
    +
    6. +
+ +

Offline asset storage

+ +

The above example already shows how to create an app that will store large assets in an IndexedDB database, avoiding the need to download them more than once. This is already a great improvement to the user experience, but there is still one thing missing — the main HTML, CSS, and JavaScript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection.

+ +

+ +

This is where Service workers and the closely-related Cache API come in.

+ +

A service worker is a JavaScript file that, simply put, is registered against a particular origin (web site, or part of a web site at a certain domain) when it is accessed by a browser. When registered, it can control pages available at that origin. It does this by sitting between a loaded page and the network and intercepting network requests aimed at that origin.

+ +

When it intercepts a request, it can do anything you wish to it (see use case ideas), but the classic example is saving the network responses offline and then providing those in response to a request instead of the responses from the network. In effect, it allows you to make a web site work completely offline.

+ +

The Cache API is a another client-side storage mechanism, with a bit of a difference — it is designed to save HTTP responses, and so works very well with service workers.

+ +
+

Note: Service workers and Cache are supported in most modern browsers now. At the time of writing, Safari was still busy implementing it, but it should be there soon.

+
+ +

A service worker example

+ +

Let's look at an example, to give you a bit of an idea of what this might look like. We have created another version of the video store example we saw in the previous section — this functions identically, except that it also saves the HTML, CSS, and JavaScript in the Cache API via a service worker, allowing the example to run offline!

+ +

See IndexedDB video store with service worker running live, and also see the source code.

+ +

Registering the service worker

+ +

The first thing to note is that there's an extra bit of code placed in the main JavaScript file (see index.js). First we do a feature detection test to see if the serviceWorker member is available in the {{domxref("Navigator")}} object. If this returns true, then we know that at least the basics of service workers are supported. Inside here we use the {{domxref("ServiceWorkerContainer.register()")}} method to register a service worker contained in the sw.js file against the origin it resides at, so it can control pages in the same directory as it, or subdirectories. When its promise fulfills, the service worker is deemed registered.

+ +
  // Register service worker to control making site work offline
+
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+             .then(function() { console.log('Service Worker Registered'); });
+  }
+ +
+

Note: The given path to the sw.js file is relative to the site origin, not the JavaScript file that contains the code. The service worker is at https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. The origin is https://mdn.github.io, and therefore the given path has to be /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. If you wanted to host this example on your own server, you'd have to change this accordingly. This is rather confusing, but it has to work this way for security reasons.

+
+ +

Installing the service worker

+ +

The next time any page under the service worker's control is accessed (e.g. when the example is reloaded), the service worker is installed against that page, meaning that it will start controlling it. When this occurs, an install event is fired against the service worker; you can write code inside the service worker itself that will respond to the installation.

+ +

Let's look at an example, in the sw.js file (the service worker). You'll see that the install listener is registered against self. This self keyword is a way to refer to the global scope of the service worker from inside the service worker file.

+ +

Inside the install handler we use the {{domxref("ExtendableEvent.waitUntil()")}} method, available on the event object, to signal that the browser shouldn't complete installation of the service worker until after the promise inside it has fulfilled successfully.

+ +

Here is where we see the Cache API in action. We use the {{domxref("CacheStorage.open()")}} method to open a new cache object in which responses can be stored (similar to an IndexedDB object store). This promise fulfills with a {{domxref("Cache")}} object representing the video-store cache. We then use the {{domxref("Cache.addAll()")}} method to fetch a series of assets and add their responses to the cache.

+ +
self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});
+ +

That's it for now, installation done.

+ +

Responding to further requests

+ +

With the service worker registered and installed against our HTML page, and the relevant assets all added to our cache, we are nearly ready to go. There is only one more thing to do, write some code to respond to further network requests.

+ +

This is what the second bit of code in sw.js does. We add another listener to the service worker global scope, which runs the handler function when the fetch event is raised. This happens whenever the browser makes a request for an asset in the directory the service worker is registered against.

+ +

Inside the handler we first log the URL of the requested asset. We then provide a custom response to the request, using the {{domxref("FetchEvent.respondWith()")}} method.

+ +

Inside this block we use {{domxref("CacheStorage.match()")}} to check whether a matching request (i.e. matches the URL) can be found in any cache. This promise fulfills with the matching response if a match is found, or undefined if it isn't.

+ +

If a match is found, we simply return it as the custom response. If not, we fetch() the response from the network and return that instead.

+ +
self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});
+ +

And that is it for our simple service worker. There is a whole load more you can do with them — for a lot more detail, see the service worker cookbook. And thanks to Paul Kinlan for his article Adding a Service Worker and Offline into your Web App, which inspired this simple example.

+ +

Testing the example offline

+ +

To test our service worker example, you'll need to load it a couple of times to make sure it is installed. Once this is done, you can:

+ + + +

If you refresh your example page again, you should still see it load just fine. Everything is stored offline — the page assets in a cache, and the videos in an IndexedDB database.

+ +

Summary

+ +

That's it for now. We hope you've found our rundown of client-side storage technologies useful.

+ +

See also

+ + + +

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/client-side_web_apis/index.html b/files/pt-br/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..03477c04af --- /dev/null +++ b/files/pt-br/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,52 @@ +--- +title: APIs web do lado cliente +slug: Aprender/JavaScript/Client-side_web_APIs +tags: + - API + - Aprender + - Artigos + - DOM + - Iniciante + - Mídia + - WebAPI + - dados + - graficos + - modulo +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +
{{LearnSidebar}}
+ +

Se você decidir usar JavaScript no lado do cliente para sites ou aplicativos, você rapidamente vai se deparar com as APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou mesmo dados de outros sites ou serviços. Neste módulo, descobriremos o que são APIs, e como usar algumas das APIs mais comuns, que serão úteis no seu trabalho de desenvolvimento.

+ +

Pré-requisitos

+ +

Para tirar o máximo proveito deste módulo, é recomendável a leitura dos módulos anteriores de JavaScript da série (Primeiros passos, Construindo blocos, e Objetos javaScript ). Esses módulos envolvem bastante uso de API simples, e não é facil escrever exemplos Javascript do lado do cliente sem eles. Aqui, subimos um nível, assumindo o conhecimento da linguagem core JavaScript e explorando as APIs comuns da Web com um pouco mais de detalhes.

+ +

Conhecimento básico de HTML e CSS serão utéis.

+ +
+

Notes Se você estiver trabalhando de um dispositivo que não permita a criação de arquivos. Você pode tentar editar os arquivos em um editor online como JSBin ou Thimble.

+
+ +

Guias

+ +
+
Introdução a APIs para a web
+
Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.
+
Manipulando documentos
+
Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.
+
Buscando dados do servidor
+
Outra tarefa muito comum em websites modernos e aplicações é recuperar dados individuais de um servidor para atualizar partes de uma página sem ter que recarregar uma página inteira novamente. Este aparentemente pequeno detalhe tem tido um impacto enorme sobre o desempenho e comportamento de websites, desse modo neste artigo, vamos explicar esse conceito, e observar as tecnologias que tornam isso possível, tais como  {{domxref("XMLHttpRequest")}} e o Fetch API.
+
Third party APIs 
+
The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.
+
Drawing graphics
+
The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see The Canvas API and WebGL). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.
+
Video and audio APIs
+
HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
+
Client-side storage
+
Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.
+
+ +
+
+
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html b/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..dfab85143b --- /dev/null +++ b/files/pt-br/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,274 @@ +--- +title: Introdução às Web APIs +slug: Aprender/JavaScript/Client-side_web_APIs/Introdução +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Primeiro, vamos ver as APIs a partir de um nível mais alto: o que são, como funcionam, como usá-las em seu código e como são estruturadas? Ainda, vamos entender quais são as principais classes de APIs e quais usos elas possuem.

+ + + + + + + + + + + + +
Pré-requisitos: +

Conhecimentos básicos de computação, HTML, CSS e JavaScript (veja primeiros passos, elementos construtivos e introdução a objetos).

+
Objetivo:Familiarizar-se com APIs, o que elas podem fazer, e como usá-las em seu código.
+ +

O que são APIs?

+ +

As APIs (Application Programming Interfaces) são construções disponíveis nas linguagens de programação que permitem a desenvolvedores criar funcionalidades complexas mais facilmente. Tais construções abstraem o código mais complexo, proporcionando o uso de sintaxes mais simples em seu lugar.

+ +

Pense no seguinte exemplo: o uso de energia elétrica em sua casa ou apartamento. Quando você deseja utilizar um eletrodoméstico, você precisa somente ligar o aparelho na tomada. Não é preciso conectar diretamente o fio do aparelho diretamente na caixa de luz. Isso seria, além de muito ineficiente, difícil e perigoso de ser feito (caso você não seja eletricista).

+ +

+ +

Fonte da imagem: Overloaded plug socket por The Clear Communication People, retirado do Flickr.

+ +

Da mesma forma, caso você queira programar gráficos em 3D, é muito mais fácil usar uma API escrita em linguagem de alto nível como JavaScript ou Python, do que escrever em código de mais baixo nível (C ou C++) que controla diretamente a GPU ou outras funções gráficas.

+ +
+

Nota: para mais informações, consulte o termo API no glossário.

+
+ +

APIs JavaScript client-side

+ +

A linguagem JavaScript, especialmente client-side, possui diversas APIs disponíveis. Elas não fazem parte da linguagem em si, mas são escritas sobre o core da linguagem JavaScript, fornecendo superpoderes para serem utilizados em seu código. Geralmente, tais APIs fazem parte de uma das seguintes categorias:

+ + + +

+ +

Relacionamento entre JavaScript, APIs, e outras ferramentas JavaScript

+ +

Na seção anterior, abordamos as APIs JavaScript client-side e como elas se relacionam com a linguagem JavaScript. Esse ponto merece uma revisão e também uma breve menção de como outras ferramentas JavaScript encaixam-se nesse contexto:

+ + + +

O que as APIs podem fazer?

+ +

Existem muitas APIs disponíveis, nos navegadores modernos, que permitem uma liberdade de ação na hora de codar. Você pode conferir isso na página de referência das APIs da MDN.

+ +

APIs comuns de navegadores

+ +

As categorias mais comuns de APIs de navegadores que você irá utilizar (e que veremos em detalhes neste módulo), são:

+ + + +

APIs comuns de terceiros

+ +

APIs de terceiros são bastante variadas. Dentre as mais populares, que você eventualmente irá utilizar em algum momento, podermos destacar:

+ + + +
+

Note: Você pode encontrar informações sobre muitas outras APIs de terceiros no Programmable Web API directory.

+
+ +

Como as APIs funcionam?

+ +

APIs JavaScript possuem pequenas diferenças mas, em geral, possuem funcionalidades em comum e operam de maneira semelhante.

+ +

Elas são baseadas em objetos

+ +

Your code interacts with APIs using one or more JavaScript objects, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).

+ +
+

Note: If you are not already familiar with how objects work, you should go back and work through our JavaScript objects module before continuing.

+
+ +

Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:

+ + + +

So how do these objects interact? If you look at our maps-example.html example (see it live also), you'll see the following code:

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});
+ +
+

Note: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to > Tools > Page Info > Permissions, then change the setting for Share Location; in Chrome go to Settings > Privacy > Show advanced settings > Content settings then change the settings for Location.

+
+ +

We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using

+ +
navigator.geolocation.getCurrentPosition(function(position) { ... });
+ +

Isso é equivalente a fazer algo como

+ +
var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+ +

But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.

+ +

The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.

+ +
+

Note: A function that is taken by another function as an argument is called a callback function.

+
+ +

This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called asynchronous operations. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:

+ +
var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+ +

If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of Promises, which were made available in ECMAScript 6 and are widely used in newer APIs.

+ +

We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by getCurrentPosition() on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:

+ +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+ +

To use the API, we first create a LatLng object instance using the google.maps.LatLng() constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:

+ +
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+ +

This object is itself set as the value of the center property of an options object that we've called myOptions. We then create an object instance to represent our map by calling the google.maps.Map() constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of map_canvas), and the options object we defined just above it.

+ +
var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+ +

With this done, our map now renders.

+ +

This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.

+ +
+

Note: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.

+
+ +

Possuem pontos de entrada reconhecíveis

+ +

When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.

+ +

The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:

+ +
var em = document.createElement('em'); // create a new em element
+var para = document.querySelector('p'); // reference an existing p element
+em.textContent = 'Hello there!'; // give em some text content
+para.appendChild(em); // embed em inside para
+ +

Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:

+ +
var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+ +

Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Note: You can see this code in action in our bouncing balls demo (see it running live also).

+
+ +

Usam eventos para lidar com mudanças de estado

+ +

We already discussed events earlier on in the course, in our Introduction to events article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.

+ +

Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the XMLHttpRequest object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the load event is fired when a response has been successfully returned containing the requested resource, and it is now available.

+ +

O código seguinte fornece um exemplo simples de como isso seria utilizado:

+ +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Note: You can see this code in action in our ajax.html example (see it live also).

+
+ +

The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the XMLHttpRequest() constructor, open an HTTP GET request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.

+ +

The onload handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the superHeroes variable, then pass it to two different functions for further processing.

+ +

Possuem mecanismos de segurança adicionais, quando apropriado

+ +

WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example same-origin policy), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include Service Workers and Push).

+ +

In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier Geolocation example:

+ +

+ +

The Notifications API asks for permission in a similar fashion:

+ +

+ +

These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.

+ +

Resumo

+ +

Ao chegar aqui, você deve ter uma boa ideia do que são APIs, como funcionam e o que você pode fazer com elas em seu código JavaScript. Além do mais, você deve estar ansioso(a) para colocar a mão na massa e trabalhar com APIs. Na sequência, iremos ver como manipular documentos com o DOM (Document Object Model).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..544deb8960 --- /dev/null +++ b/files/pt-br/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,140 @@ +--- +title: JavaScript e CSS +slug: Web/CSS/Getting_Started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

{{ CSSTutorialTOC() }}

+

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

+

Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

+

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

+

Sessão Anterior (da Parte I): Media
+ Próxima sessão: SVG

+

Informação: JavaScript

+

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

+

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

+

Há três formas de fazer isso:

+ + + + + + + + +
+ Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.
+

Ação: Uma demonstração de  JavaScript

+

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

+
+ 
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+
+<div id="square"></div>
+
+<button type="button" onclick="doDemo(this);">Click Me</button>
+
+</body>
+</html>
+
+
+

Crie um novo arquivo  CSS, style5.css. Copie e cole o conteúdo daqui:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+}
+
+button {
+  padding: .5em 2em;
+}
+
+
+

Crie um novo arquivo de texto, script5.js. Coie e cole o conteúdo daqui:

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  button.removeAttribute("disabled");
+}
+
+
+

Abra o documento no seu Browser e pressione o botão.

+

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

+ + + + + + + +
+ + + + + + +
+

JavaScript demonstration

+
+ 		+ + + + + + +
+

JavaScript demonstration

+
+
+
+ Notas importantes sobre esta demonstração: + +
+ + + + + + + +
+ Desafio
+

Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

+
+

Veja a solução deste desafio.

+

O que vem agora?

+

Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de Discussão.

+

Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

diff --git a/files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html b/files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html deleted file mode 100644 index cc8a8cc542..0000000000 --- a/files/pt-br/learn/javascript/first_steps/gerador_de_historias_bobas/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Gerador de histórias bobas -slug: Learn/JavaScript/First_steps/Gerador_de_historias_bobas -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

Nesta avaliação, você será encarregado de utilizar parte do conhecimento que você adquiriu nos artigos deste módulo e aplicá-lo para criar um aplicativo divertido que gera histórias bobas aleatórias. Divirta-se!

- - - - - - - - - - - - -
Pré-requisitos:Antes de tentar esta avaliação, você já deve ter trabalhado com todos os artigos deste módulo.
Objetivo:Testar a compreensão dos fundamentos de JavaScript, como variáveis, números, operadores, cadeias de caracteres e matrizes.
- -

Ponto de partida

- -

Para começar esta avaliação, você deve:

- - - -
-

Nota: Alternativamente, você pode utilizar um site como JSBin ou Thimble para fazer a sua avaliação. Você pode colar o HTML, CSS e javaScript em um desses editores online. Se o editor online que você estiver utilizando não possuir um painel separado para javaScript, sinta-se a vontade para inseri-lo em um elemento <script> dentro da página HTML.

-
- -

Resumo do projeto

- -

Você recebeu algum HTML/CSS em bruto e algumas strings de texto e funções de JavaScript; Você precisa escrever o JavaScript necessário para transformar este em um programa funcional, que faz o seguinte:

- - - -

A seguinte captura de tela mostra um exemplo do que o programa concluído deve produzir:

- -

- -

Para dar-lhe mais uma ideia, dê uma olhada no exemplo concluído (sem espreitar o código fonte!)

- -

Passos para completar

- -

As seções a seguir descrevem o que você precisa fazer.

- -

Configuração básica:

- -
    -
  1. Crie um novo arquivo chamado main.js, no mesmo diretório que o arquivo index.html.
    2. -
  2. Aplique o arquivo JavaScript externo ao seu HTML inserindo um elemento {{htmlelement ("script")}} no seu HTML referenciando o main.js. Coloque-o antes da etiqueta de fechamento {{htmlelement("body")}}.
    3. -
- -

Variáveis e funções iniciais:

- -
    -
  1. No arquivo de texto cru, copie todo o código abaixo do cabeçalho "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" e cole-o no topo do arquivo main.js. Isso dá a você três variáveis que armazenam referências ao campo de texto "Inserir nome personalizado" (customName), o botão "Gerar história aleatória" (randomizar), E o elemento {{htmlelement ("p")}} na parte inferior do corpo HTML para onde a história será copiada (história), respectivamente. Além disso, você tem uma função chamada randomValueFromArray () que recebe um vetor e retorna um dos itens armazenados dentro do vetor aleatoriamente.
    2. -
  2. Agora, veja a segunda seção do arquivo de texto bruto - "2. RAW TEXT STRINGS". Ele contém strings de texto que atuarão como entrada em nosso programa. Gostaríamos que você armazenasse essas strings dentro de variáveis no main.js: -
      -
    1. Armazene a primeira, grande e longa linha de texto dentro de uma variável chamada storyText.
      2. -
    2. Armazene o primeiro conjunto de três strings dentro de um vetor chamado insertX.
      3. -
    3. Armazene o segundo conjunto de três strings dentro de um vetor chamado insertY.
      4. -
    4. Armazene o terceiro conjunto de três strings dentro de um vetor chamado insertZ.
      5. -
    -
    3. -
- -

Colocando o manipulador de eventos e a função incompleta:

- -
    -
  1. Agora volte ao arquivo de texto bruto.
    2. -
  2. Copie o código encontrado abaixo do cabeçalho "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" E cole ele na parte inferior do arquivo main.js. Isto: -
      -
    • Adicione um ouvinte de evento de clique à variável randomize para que, quando o botão que ele representa, for clicado, a função result() seja executada.
      • -
    • Adicione a função result() parcialmente concluída ao seu código. Para o restante da avaliação, você estará preenchendo linhas dentro desta função para completá-la e fazê-la funcionar corretamente.
      • -
    -
    3. -
- -

Completando a função result():

- -
    -
  1. Crie uma nova variável chamada newStory, e defina seu valor como igual a storyText. Isso é necessário para que possamos criar uma nova história aleatória toda vez que o botão for pressionado e a função for executada. Se fizermos alterações diretamente no storyText, só poderemos gerar uma nova história uma vez.
    2. -
  2. Crie três novas variáveis chamadas xItem, yItem, e zItem, e torne-as iguais ao resultado da chamada da função randomValueFromArray() em seus três arrays (o resultado em cada caso será um item aleatório de cada array em que é chamado). Por exemplo, você pode chamar a função e fazer com que ela retorne uma string aleatória de insertX escrevendo randomValueFromArray(insertX).
    3. -
  3. Em seguida, queremos substituir os três espaços reservados na variável newStory — :insertx:, :inserty:, e :insertz: — com strings armazenadas em xItem, yItem, e zItem. Existe um método de string específico que irá ajudá-lo aqui - em cada caso, faça a chamada para o método igual a newStory,então cada vez que é chamado, newStory é igual a si mesmo, mas com substituições feitas. Assim, cada vez que o botão é pressionado, esses espaços reservados são substituídos por uma string boba aleatória. Como uma dica adicional, o método em questão substitui apenas a primeira ocorrência da subseqüência de caracteres encontrada, portanto, talvez seja necessário fazer uma das chamadas duas vezes.
    4. -
  4. Dentro do primeiro bloco if, adicione outra chamada de método de substituição de string para substituir o nome 'Bob' encontrado na string newStory pela variável name. Neste bloco estamos dizendo "Se um valor foi inserido na entrada de texto customName, substitua Bob na história por esse nome personalizado ".
    5. -
  5. Dentro do segundo bloco if, estamos verificando se o botão de opção uk foi selecionado. Se assim for, converteremos os valores de peso e temperatura na história de libras e Fahrenheit em graus centígrados. O que você precisa fazer é o seguinte: -
      -
    1. Procure as fórmulas para converter libras em pedras e Fahrenheit em centígrados.
      2. -
    2. Dentro da linha que define a variável weight, substitua 300 por um cálculo que converta 300 libras em pedras. Concatene ' stone' no final do resultado da chamada geral Math.round().
      3. -
    3. Dentro da linha que define a variável temperature, substitua 94 por um cálculo que converta 94 graus Fahrenheit em graus centígrados. Concatene ' centigrade' no resultado da chamada geral Math.round().
      4. -
    4. Apenas sob as duas definições de variáveis, adicione mais duas linhas de substituição de string que substituem '94 fahrenheit' pelo conteúdo da variável temperature, e '300 libras' com o conteúdo da variável weight.
      5. -
    -
    6. -
  6. Finalmente, na segunda e última linha da função, torne a propriedadetextContent da variável story  (que faz referência ao parágrafo) igual a newStory.
    7. -
- -

Dicas e sugestões

- - - -

Avaliação

- -

Se você estiver seguindo esta avaliação como parte de um curso organizado, você está apto a entregar seu trabalho ao seu professor/mentor para avaliação. Se você é auto-didata, então você pode consultar o guia de marcação com bastante facilidade perguntando  no tópico do Discurso da área de aprendizagem, ou no no canal #mdn IRC no IRC Mozilla. Tente realizar o exercício primeiro  — não há nada a ganhar com a trapaça!

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/pt-br/learn/javascript/first_steps/matematica/index.html b/files/pt-br/learn/javascript/first_steps/matematica/index.html deleted file mode 100644 index fce74528f7..0000000000 --- a/files/pt-br/learn/javascript/first_steps/matematica/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Matemática básica no JavaScript — números e operadores -slug: Learn/JavaScript/First_steps/Matematica -tags: - - Artigo - - Código - - Guía - - Iniciante - - JavaScript - - Matemática - - Operadores - - Script - - aprenda - - aumentada - - incremento - - modulo -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

Neste ponto do curso estaremos discutindo matemática em JavaScript — Como podemos usar {{Glossary("Operador","operadores")}} e outros recursos para manipular números e fazer cálculos.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo:Ganhar familiaridade com o básico em matemática no JavaScript.
- -

Todo mundo ama matemática

- -

Ok, talvez não. Alguns de nós gostam de matemática, alguns de nós tem a odiado desde que tivemos que aprender a tabuada de multiplicação e divisão na escola, e alguns de nós estão em algum lugar no meio dos dois cenários. Mas nenhum de nós pode negar que a matemática é uma parte fundamental da vida sem a qual não poderíamos ir muito longe. Isso é especialmente verdadeiro quando estamos aprendendo a programar em  JavaScript (ou em qualquer outra linguagem, diga-se de passagem) — muito do que fazemos se baseia no processamento de dados numéricos, cálculo de novos valores, etc. Assim você não ficará surpreso em aprender que o JavaScript tem uma configuração completa de funções matemáticas disponíveis.

- -

Este artigo discute apenas as partes básicas que você precisa saber agora.

- -

Tipos de números

- -

Em programação, até mesmo o humilde sistema de números decimais que todos nós conhecemos tão bem é mais complicado do que você possa pensar. Usamos diferentes termos para descrever diferentes tipos de números decimais, por exemplo:

- - - -

Temos até mesmo diferentes tipos de sistemas numéricos! O decimal tem por base 10 (o que significa que ele usa um número entre 0–9 em cada casa), mas temos também algo como:

- - - -

Antes de se preocupar com seu cérebro estar derretendo, pare agora mesmo! Para um começo, vamos nos ater aos números decimais no decorrer desse curso; você raramente irá se deparar com a necessidade de começar a pensar sobre os outros tipos, se é que vai precisar algum dia.

- -

A segunda boa notícia é que, diferentemente de outras linguagens de programação, o JavaScript tem apenas um tipo de dados para números, você advinhou, {{jsxref("Number")}}. Isso significa que qualquer que seja o tipo de números com os quais você está lidando em JavaScript, você os manipula do mesmo jeito.

- -

Tudo é número para mim

- -

Vamos brincar rapidamente com alguns números para nos familiarizarmos com a sintaxe básica que precisamos. Insira os comandos listados abaixo em seu console JavaScript, ou use o console simples incorporado abaixo, se preferir.

- -

{{EmbedGHLiveSample("learning-area-pt-br/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

- -

Abra em uma nova janela

- -
    -
  1. Primeiramente, vamos declarar duas variáveis e as inicializar com um integer e um float, respectivamente, então digitaremos os nomes das variávei para verificar se está tudo em ordem: - - 
    var meuInt = 5;
-var meuFloat = 6.667;
-meuInt;
-meuFloat;
    -
    2. -
  2. Valores numéricos são inseridos sem aspas — tente declarar e inicializar mais duas variáveis contendo números antes de seguir em frente.
    3. -
  3. Agora vamos checar se nossas duas variáveis originais são do mesmo tipo de dados. Há um operador chamado {{jsxref("Operators/typeof", "typeof")}} no JavaScript que faz isso. Insira as duas linhas conforme mostradas abaixo: - 
    typeof meuInt;
-typeof meuFloat;
    - Você deve obter "number" de volta nos dois casos — isso torna as coisas muito mais fáceis para nós do que se diferentes tipos de números tivessem diferentes tipos de dados, e tivéssemos que lidar com eles em diferentes maneiras. Ufa!
    4. -
- -

Operadores aritméticos

- -

São os operadores que utilizamos para fazer as operações aritiméticas básicas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNomePropósitoExemplo
+AdiçãoAdiciona um número a outro.6 + 9
-SubtraçãoSubtrai o número da direita do número da esquerda.20 - 15
*MultiplicaçãoMultiplica um número pelo outro.3 * 7
/DivisãoDivide o número da esquerda pelo número da direita.10 / 5
%Restante (Remainder - as vezes chamado de modulo) -

Retorna o resto da divisão em números inteiros do número da esquerda pelo número da direita.

- 		8 % 3 (retorna 2; como três cabe duas vezes em 8, deixando 2 como resto.)
- -
-

Nota: Você verá algumas vezes números envolvidos em aritimética chamados de {{Glossary("Operando", "operandos")}}.

-
- -

Nós provavelmente não precisamos ensinar a você como fazer matemática básica, mas gostaríamos de testar seu entendimento da sintaxe envolvida. Tente inserir os exemplos abaixo no seu console JavaScript, ou use o console incorporado visto anteriormente, se preferir, para familiarizar-se com a sintaxe.

- -
    -
  1. Primeiro tente inserir alguns exemplos simples por sua conta, como - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. Você pode tentar declarar e inicializar alguns números dentro de variáveis, e tentar usá-los nas operações — as variáveis irão se comportar exatamente como os valores que elas armazenam para a finalidade das operações. Por exemplo: - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. Por último, nesta seção, tente inserir algumas expressões mais complexas, como: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

Alguns dos exemplos do último bloco podem não ter retornado os valores que você estava esperando; a seção abaixo pode lhe explicar o porquê.

- -

Precedência de operador

- -

Vamos olhar para o último exemplo, assumindo que num2 guarda o valor 50 e num1 possui o valor 10 (como iniciado acima):

- -
num2 + num1 / 8 + 2;
- -

Como um ser humano, talvez você leia isso como "50 mais 10 é igual a 60", depois "8 mais 2 é igual a 10", e então "60 dividido por 10 é igual a 6".

- -

No entanto seu navegador vai ler "10 dividido por 8 é igual a 1.25", então "50 mais 1.25 mais 2 é igual a 53.25".

- -

Isto acontence por causa da precedência de operadores — algumas operações serão aplicadas antes de outras quando calcularmos o resultado de uma soma (referida em programação como uma expressão).  A precedência de operadores em JavaScript é semelhante ao ensinado nas aulas de matemática na escola — Multiplicação e divisão são realizados primeiro, depois a adição e subtração (a soma é sempre realizada da esquerda para a direita).

- -

Se você quiser substituir a precedência do operador, poderá colocar parênteses em volta das partes que desejar serem explicitamente tratadas primeiro. Então, para obter um resultado de 6, poderíamos fazer isso:

- -
(num2 + num1) / (8 + 2);
- -

Tente fazer e veja como fica.

- -
-

Nota: Uma lista completa de todos os operadores JavaScript e suas precedências pode ser vista em Expressões e operadores.

-
- -

Operadores de incremento e decremento

- -

Às vezes você desejará adicionar ou subtrair, repetidamente, um valor de uma variável numérica. Convenientemente isto pode ser feito usando os operadores incremento ++ e decremento --. Usamos ++  em nosso jogo "Adivinhe o número" no primeiro artigo  Um primeiro mergulho no JavaScript, quando adicionamos 1 ao nosso contagemPalpites para saber quantas adivinhações o usuário deixou após cada turno.

- -
contagemPalpites++;
- -
-

Nota: Eles são mais comumente usado em Laços e iterações, que será visto no curso mais tarde. Por exemplo, digamos que você queira passar por uma lista de preços e adicionar imposto sobre vendas a cada um deles. Você usaria um loop para passar por cada valor e fazer o cálculo necessário para adicionar o imposto sobre vendas em cada caso. O incrementador é usado para mover para o próximo valor quando necessário. Na verdade, fornecemos um exemplo simples mostrando como isso é feito - verifique ao vivo e observe o código-fonte para ver se consegue identificar os incrementadores! Veremos os loops detalhadamente mais adiante no curso.

-
- -

Vamos tentar brincar com eles no seu console. Para começar, note que você não pode aplicá-las diretamente a um número, o que pode parecer estranho, mas estamos atribuindo a variável um novo valor atualizado, não operando no próprio valor. O seguinte retornará um erro:

- -
3++;
- -

Então, você só pode incrementar uma variável existente. Tente isto: 

- -
var num1 = 4;
-num1++;
- -

Ok, segunda coisa estranha! Quando você fizer isso, verá um valor 4 retornado - isso ocorre porque o navegador retorna o valor atual e, em seguida, incrementa a variável. Você pode ver que ele foi incrementado se você retornar o valor da variável novamente:

- -
num1;
- -

Acontece a mesma coisa com -- : tente o seguinte

- -
var num2 = 6;
-num2--;
-num2;
- -
-

Nota: Você pode fazer o navegador fazer o contrário - incrementar/decrementar a variável e depois retornar o valor, colocando o operador no início da variável ao invés do final. Tente os exemplos acima novamente, mas desta vez use  ++num1 e --num2.

-
- -

Operadores de atribuição

- -

Operadores de atribuição são os que atribuem um valor à uma variável. Nós já usamos o básico, =, muitas vezes, simplesmente atribuindo à variável do lado ersquerdo o valor indicado do lado direito do operador:

- -
var x = 3; // x contém o valor 3
-var y = 4; // y contém o valor 4
-x = y; // x agora contém o mesmo valor de y, 4
- -

Mas existem alguns tipos mais complexos, que fornecem atalhos úteis para manter seu código mais puro e mais eficiente. Os mais comuns estão listados abaixo:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExampleShortcut for
+=Atribuição de adiçãoAdiciona o valor à direita ao valor da variável à esquerda e, em seguida, retorna o novo valor da variávelx = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Atribuição de subtraçãoSubtrai o valor à direita do valor da variável à esquerda e retorna o novo valor da variávelx = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=Atribuição de multiplicaçãoMultiplica o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variávelx = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=Atribuição de divisãoDivide o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variávelx = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

Tente digitar alguns dos exemplos acima em seu console para ter uma ideia de como eles funcionam. Em cada caso, veja se você pode adivinhar qual é o valor antes de digitar a segunda linha.

- -

Note que você pode muito bem usar outros valores ​​no lado direito de cada expressão, por exemplo:

- -
var x = 3; // x contém o valor 3
-var y = 4; // y contém o valor 4
-x *= y; // x agora contém o valor 12
- -
-

Nota: Existem muitos outros operadores de atribuição disponíveis, mas estes são os básicos que você deve aprender agora.

-
- -

Aprendizado ativo: dimensionando uma canvas box

- -

Neste exercício, você manipulará alguns números e operadores para alterar o tamanho de uma caixa. A caixa é desenhada usando uma API do navegador chamada {{domxref("Canvas API", "", "", "true")}}. Não há necessidade de se preocupar sobre como isso funciona, apenas concentre-se na matemática por enquanto. A largura e altura da caixa (em pixels) são definidas pelas variáveis x e y, que recebem um valor inicial de 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

- -

Abrir em nova janela

- -

Na caixa de código editável acima, há duas linhas marcadas com um comentário que gostaríamos que você atualizasse para aumentar/diminuir a caixa para determinados tamanhos, usando determinados operadores e/ou valores em cada caso. Vamos tentar o seguinte:

- - - -

Não se preocupe se você estragar totalmente o código. Você sempre pode pressionar o botão Reset para fazer as coisas funcionarem novamente. Depois de ter respondido corretamente a todas as perguntas acima, sinta-se à vontade para brincar um pouco com o código ou crie seus próprios desafios.

- -

Operadores de comparação

- -

Às vezes, queremos executar testes verdadeiro / falso e, em seguida, agir de acordo, dependendo do resultado desse teste, para fazer isso, usamos operadores de comparação.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExample
===Igualdade estritaVerifica se o valor da esquerda e o da direita são idênticos entre si.5 === 2 + 4
!==Não-igualdade-estritaVerifica se o valor da esquerda e o da direita não são idênticos entre si.5 !== 2 + 3
<Menor queVerifica se o valor da esquerda é menor que o valor da direita.10 < 6
>Maior queVerifica se o valor da esquerda é maior que o valor da direita.10 > 20
<=Menor ou igual queVerifica se o valor da esquerda é menor que ou igual ao valor da direita.3 <= 2
>=Maior ou igual queVerifica se o valor da esquerda é maior que ou igual ao valor da direita.5 >= 4
- -
-

Nota: Talvez você já tenha visto alguém usando == e!= afim de testar igualdade ou desigualdade em JavaScript. Estes são operadores válidos em JavaScript, mas que diferem de ===/!==. As versões anteriores testam se os valores são os mesmos, mas não se os tipos de dados dos valores são os mesmos. As últimas versões estritas testam a igualdade de ambos os valores e seus tipos de dados. Elas tendem a resultar em menos erros, por isso recomendamos que você as use.

-
- -

Se você tentar inserir alguns desses valores em um console, verá que todos eles retornam true/false — aqueles booleanos que mencionamos no último artigo. Eles são muito úteis, pois nos permitem tomar decisões em nosso código, e eles são usados ​​toda vez que queremos fazer uma escolha de algum tipo. Por exemplo, booleanos podem ser usados ​​para:

- - - -

Veremos como codificar essa lógica quando examinarmos instruções condicionais em um artigo futuro. Por enquanto, vamos dar uma olhada em um exemplo rápido:

- -
<button>Iniciar máquina</button>
-<p>A máquina está parada.</p>
-
- -
var btn = document.querySelector('button');
-var txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-   if (btn.textContent === 'Iniciar máquina') {
-       btn.textContent = 'Parar máquina';
-       txt.textContent = 'A máquina iniciou!';
-   } else {
-       btn.textContent = 'Iniciar máquina';
-       txt.textContent = 'A máquina está parada.';
-   }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Abrir em nova janela

- -

Você pode ver o operador de igualdade sendo usado apenas dentro da função updateBtn(). Neste caso, não estamos testando se duas expressões matemáticas têm o mesmo valor, estamos testando se o conteúdo de texto de um botão contém uma certa string , mas ainda é o mesmo princípio em funcionamento. Se o botão estiver dizendo "Iniciar máquina" quando for pressionado, mudaremos o rótulo para "Parar máquina" e atualizaremos o rótulo conforme apropriado. Se o botão estiver dizendo "Parar máquina" quando for pressionado, nós trocamos a tela de volta.

- -
-

Nota: Esse controle que troca entre dois estados geralmente é chamado de toggle. Ele alterna entre um estado e outro - acender, apagar, etc.

-
- -

Resumo

- -

Neste artigo, cobrimos as informações fundamentais que você precisa saber sobre números em JavaScript, por enquanto. Você verá os números sendo usados ​​de novo e de novo, durante todo o aprendizado de JavaScript. Portanto, é uma boa ideia tirar isso do caminho agora. Se você é uma daquelas pessoas que não gosta de matemática, pode se consolar com o fato de este capítulo ser muito curto.

- -

No próximo artigo, vamos explorar o texto e como o JavaScript nos permite manipulá-lo.

- -
-

Nota: Se você gosta de matemática e quer saber mais sobre como ela é implementada em JavaScriot, você pode encontrar muito mais detalhes na seção principal de JavaScript do MDN. Ótimos lugares para começar são os artigos Números e datas e Expressões e operadores .

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

diff --git a/files/pt-br/learn/javascript/first_steps/math/index.html b/files/pt-br/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..fce74528f7 --- /dev/null +++ b/files/pt-br/learn/javascript/first_steps/math/index.html @@ -0,0 +1,418 @@ +--- +title: Matemática básica no JavaScript — números e operadores +slug: Learn/JavaScript/First_steps/Matematica +tags: + - Artigo + - Código + - Guía + - Iniciante + - JavaScript + - Matemática + - Operadores + - Script + - aprenda + - aumentada + - incremento + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

Neste ponto do curso estaremos discutindo matemática em JavaScript — Como podemos usar {{Glossary("Operador","operadores")}} e outros recursos para manipular números e fazer cálculos.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo:Ganhar familiaridade com o básico em matemática no JavaScript.
+ +

Todo mundo ama matemática

+ +

Ok, talvez não. Alguns de nós gostam de matemática, alguns de nós tem a odiado desde que tivemos que aprender a tabuada de multiplicação e divisão na escola, e alguns de nós estão em algum lugar no meio dos dois cenários. Mas nenhum de nós pode negar que a matemática é uma parte fundamental da vida sem a qual não poderíamos ir muito longe. Isso é especialmente verdadeiro quando estamos aprendendo a programar em  JavaScript (ou em qualquer outra linguagem, diga-se de passagem) — muito do que fazemos se baseia no processamento de dados numéricos, cálculo de novos valores, etc. Assim você não ficará surpreso em aprender que o JavaScript tem uma configuração completa de funções matemáticas disponíveis.

+ +

Este artigo discute apenas as partes básicas que você precisa saber agora.

+ +

Tipos de números

+ +

Em programação, até mesmo o humilde sistema de números decimais que todos nós conhecemos tão bem é mais complicado do que você possa pensar. Usamos diferentes termos para descrever diferentes tipos de números decimais, por exemplo:

+ + + +

Temos até mesmo diferentes tipos de sistemas numéricos! O decimal tem por base 10 (o que significa que ele usa um número entre 0–9 em cada casa), mas temos também algo como:

+ + + +

Antes de se preocupar com seu cérebro estar derretendo, pare agora mesmo! Para um começo, vamos nos ater aos números decimais no decorrer desse curso; você raramente irá se deparar com a necessidade de começar a pensar sobre os outros tipos, se é que vai precisar algum dia.

+ +

A segunda boa notícia é que, diferentemente de outras linguagens de programação, o JavaScript tem apenas um tipo de dados para números, você advinhou, {{jsxref("Number")}}. Isso significa que qualquer que seja o tipo de números com os quais você está lidando em JavaScript, você os manipula do mesmo jeito.

+ +

Tudo é número para mim

+ +

Vamos brincar rapidamente com alguns números para nos familiarizarmos com a sintaxe básica que precisamos. Insira os comandos listados abaixo em seu console JavaScript, ou use o console simples incorporado abaixo, se preferir.

+ +

{{EmbedGHLiveSample("learning-area-pt-br/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

+ +

Abra em uma nova janela

+ +
    +
  1. Primeiramente, vamos declarar duas variáveis e as inicializar com um integer e um float, respectivamente, então digitaremos os nomes das variávei para verificar se está tudo em ordem: + + 
    var meuInt = 5;
+var meuFloat = 6.667;
+meuInt;
+meuFloat;
    +
    2. +
  2. Valores numéricos são inseridos sem aspas — tente declarar e inicializar mais duas variáveis contendo números antes de seguir em frente.
    3. +
  3. Agora vamos checar se nossas duas variáveis originais são do mesmo tipo de dados. Há um operador chamado {{jsxref("Operators/typeof", "typeof")}} no JavaScript que faz isso. Insira as duas linhas conforme mostradas abaixo: + 
    typeof meuInt;
+typeof meuFloat;
    + Você deve obter "number" de volta nos dois casos — isso torna as coisas muito mais fáceis para nós do que se diferentes tipos de números tivessem diferentes tipos de dados, e tivéssemos que lidar com eles em diferentes maneiras. Ufa!
    4. +
+ +

Operadores aritméticos

+ +

São os operadores que utilizamos para fazer as operações aritiméticas básicas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNomePropósitoExemplo
+AdiçãoAdiciona um número a outro.6 + 9
-SubtraçãoSubtrai o número da direita do número da esquerda.20 - 15
*MultiplicaçãoMultiplica um número pelo outro.3 * 7
/DivisãoDivide o número da esquerda pelo número da direita.10 / 5
%Restante (Remainder - as vezes chamado de modulo) +

Retorna o resto da divisão em números inteiros do número da esquerda pelo número da direita.

+ 		8 % 3 (retorna 2; como três cabe duas vezes em 8, deixando 2 como resto.)
+ +
+

Nota: Você verá algumas vezes números envolvidos em aritimética chamados de {{Glossary("Operando", "operandos")}}.

+
+ +

Nós provavelmente não precisamos ensinar a você como fazer matemática básica, mas gostaríamos de testar seu entendimento da sintaxe envolvida. Tente inserir os exemplos abaixo no seu console JavaScript, ou use o console incorporado visto anteriormente, se preferir, para familiarizar-se com a sintaxe.

+ +
    +
  1. Primeiro tente inserir alguns exemplos simples por sua conta, como + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Você pode tentar declarar e inicializar alguns números dentro de variáveis, e tentar usá-los nas operações — as variáveis irão se comportar exatamente como os valores que elas armazenam para a finalidade das operações. Por exemplo: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Por último, nesta seção, tente inserir algumas expressões mais complexas, como: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Alguns dos exemplos do último bloco podem não ter retornado os valores que você estava esperando; a seção abaixo pode lhe explicar o porquê.

+ +

Precedência de operador

+ +

Vamos olhar para o último exemplo, assumindo que num2 guarda o valor 50 e num1 possui o valor 10 (como iniciado acima):

+ +
num2 + num1 / 8 + 2;
+ +

Como um ser humano, talvez você leia isso como "50 mais 10 é igual a 60", depois "8 mais 2 é igual a 10", e então "60 dividido por 10 é igual a 6".

+ +

No entanto seu navegador vai ler "10 dividido por 8 é igual a 1.25", então "50 mais 1.25 mais 2 é igual a 53.25".

+ +

Isto acontence por causa da precedência de operadores — algumas operações serão aplicadas antes de outras quando calcularmos o resultado de uma soma (referida em programação como uma expressão).  A precedência de operadores em JavaScript é semelhante ao ensinado nas aulas de matemática na escola — Multiplicação e divisão são realizados primeiro, depois a adição e subtração (a soma é sempre realizada da esquerda para a direita).

+ +

Se você quiser substituir a precedência do operador, poderá colocar parênteses em volta das partes que desejar serem explicitamente tratadas primeiro. Então, para obter um resultado de 6, poderíamos fazer isso:

+ +
(num2 + num1) / (8 + 2);
+ +

Tente fazer e veja como fica.

+ +
+

Nota: Uma lista completa de todos os operadores JavaScript e suas precedências pode ser vista em Expressões e operadores.

+
+ +

Operadores de incremento e decremento

+ +

Às vezes você desejará adicionar ou subtrair, repetidamente, um valor de uma variável numérica. Convenientemente isto pode ser feito usando os operadores incremento ++ e decremento --. Usamos ++  em nosso jogo "Adivinhe o número" no primeiro artigo  Um primeiro mergulho no JavaScript, quando adicionamos 1 ao nosso contagemPalpites para saber quantas adivinhações o usuário deixou após cada turno.

+ +
contagemPalpites++;
+ +
+

Nota: Eles são mais comumente usado em Laços e iterações, que será visto no curso mais tarde. Por exemplo, digamos que você queira passar por uma lista de preços e adicionar imposto sobre vendas a cada um deles. Você usaria um loop para passar por cada valor e fazer o cálculo necessário para adicionar o imposto sobre vendas em cada caso. O incrementador é usado para mover para o próximo valor quando necessário. Na verdade, fornecemos um exemplo simples mostrando como isso é feito - verifique ao vivo e observe o código-fonte para ver se consegue identificar os incrementadores! Veremos os loops detalhadamente mais adiante no curso.

+
+ +

Vamos tentar brincar com eles no seu console. Para começar, note que você não pode aplicá-las diretamente a um número, o que pode parecer estranho, mas estamos atribuindo a variável um novo valor atualizado, não operando no próprio valor. O seguinte retornará um erro:

+ +
3++;
+ +

Então, você só pode incrementar uma variável existente. Tente isto: 

+ +
var num1 = 4;
+num1++;
+ +

Ok, segunda coisa estranha! Quando você fizer isso, verá um valor 4 retornado - isso ocorre porque o navegador retorna o valor atual e, em seguida, incrementa a variável. Você pode ver que ele foi incrementado se você retornar o valor da variável novamente:

+ +
num1;
+ +

Acontece a mesma coisa com -- : tente o seguinte

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Nota: Você pode fazer o navegador fazer o contrário - incrementar/decrementar a variável e depois retornar o valor, colocando o operador no início da variável ao invés do final. Tente os exemplos acima novamente, mas desta vez use  ++num1 e --num2.

+
+ +

Operadores de atribuição

+ +

Operadores de atribuição são os que atribuem um valor à uma variável. Nós já usamos o básico, =, muitas vezes, simplesmente atribuindo à variável do lado ersquerdo o valor indicado do lado direito do operador:

+ +
var x = 3; // x contém o valor 3
+var y = 4; // y contém o valor 4
+x = y; // x agora contém o mesmo valor de y, 4
+ +

Mas existem alguns tipos mais complexos, que fornecem atalhos úteis para manter seu código mais puro e mais eficiente. Os mais comuns estão listados abaixo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExampleShortcut for
+=Atribuição de adiçãoAdiciona o valor à direita ao valor da variável à esquerda e, em seguida, retorna o novo valor da variávelx = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Atribuição de subtraçãoSubtrai o valor à direita do valor da variável à esquerda e retorna o novo valor da variávelx = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Atribuição de multiplicaçãoMultiplica o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variávelx = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=Atribuição de divisãoDivide o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variávelx = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

Tente digitar alguns dos exemplos acima em seu console para ter uma ideia de como eles funcionam. Em cada caso, veja se você pode adivinhar qual é o valor antes de digitar a segunda linha.

+ +

Note que você pode muito bem usar outros valores ​​no lado direito de cada expressão, por exemplo:

+ +
var x = 3; // x contém o valor 3
+var y = 4; // y contém o valor 4
+x *= y; // x agora contém o valor 12
+ +
+

Nota: Existem muitos outros operadores de atribuição disponíveis, mas estes são os básicos que você deve aprender agora.

+
+ +

Aprendizado ativo: dimensionando uma canvas box

+ +

Neste exercício, você manipulará alguns números e operadores para alterar o tamanho de uma caixa. A caixa é desenhada usando uma API do navegador chamada {{domxref("Canvas API", "", "", "true")}}. Não há necessidade de se preocupar sobre como isso funciona, apenas concentre-se na matemática por enquanto. A largura e altura da caixa (em pixels) são definidas pelas variáveis x e y, que recebem um valor inicial de 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Abrir em nova janela

+ +

Na caixa de código editável acima, há duas linhas marcadas com um comentário que gostaríamos que você atualizasse para aumentar/diminuir a caixa para determinados tamanhos, usando determinados operadores e/ou valores em cada caso. Vamos tentar o seguinte:

+ + + +

Não se preocupe se você estragar totalmente o código. Você sempre pode pressionar o botão Reset para fazer as coisas funcionarem novamente. Depois de ter respondido corretamente a todas as perguntas acima, sinta-se à vontade para brincar um pouco com o código ou crie seus próprios desafios.

+ +

Operadores de comparação

+ +

Às vezes, queremos executar testes verdadeiro / falso e, em seguida, agir de acordo, dependendo do resultado desse teste, para fazer isso, usamos operadores de comparação.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExample
===Igualdade estritaVerifica se o valor da esquerda e o da direita são idênticos entre si.5 === 2 + 4
!==Não-igualdade-estritaVerifica se o valor da esquerda e o da direita não são idênticos entre si.5 !== 2 + 3
<Menor queVerifica se o valor da esquerda é menor que o valor da direita.10 < 6
>Maior queVerifica se o valor da esquerda é maior que o valor da direita.10 > 20
<=Menor ou igual queVerifica se o valor da esquerda é menor que ou igual ao valor da direita.3 <= 2
>=Maior ou igual queVerifica se o valor da esquerda é maior que ou igual ao valor da direita.5 >= 4
+ +
+

Nota: Talvez você já tenha visto alguém usando == e!= afim de testar igualdade ou desigualdade em JavaScript. Estes são operadores válidos em JavaScript, mas que diferem de ===/!==. As versões anteriores testam se os valores são os mesmos, mas não se os tipos de dados dos valores são os mesmos. As últimas versões estritas testam a igualdade de ambos os valores e seus tipos de dados. Elas tendem a resultar em menos erros, por isso recomendamos que você as use.

+
+ +

Se você tentar inserir alguns desses valores em um console, verá que todos eles retornam true/false — aqueles booleanos que mencionamos no último artigo. Eles são muito úteis, pois nos permitem tomar decisões em nosso código, e eles são usados ​​toda vez que queremos fazer uma escolha de algum tipo. Por exemplo, booleanos podem ser usados ​​para:

+ + + +

Veremos como codificar essa lógica quando examinarmos instruções condicionais em um artigo futuro. Por enquanto, vamos dar uma olhada em um exemplo rápido:

+ +
<button>Iniciar máquina</button>
+<p>A máquina está parada.</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+   if (btn.textContent === 'Iniciar máquina') {
+       btn.textContent = 'Parar máquina';
+       txt.textContent = 'A máquina iniciou!';
+   } else {
+       btn.textContent = 'Iniciar máquina';
+       txt.textContent = 'A máquina está parada.';
+   }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Abrir em nova janela

+ +

Você pode ver o operador de igualdade sendo usado apenas dentro da função updateBtn(). Neste caso, não estamos testando se duas expressões matemáticas têm o mesmo valor, estamos testando se o conteúdo de texto de um botão contém uma certa string , mas ainda é o mesmo princípio em funcionamento. Se o botão estiver dizendo "Iniciar máquina" quando for pressionado, mudaremos o rótulo para "Parar máquina" e atualizaremos o rótulo conforme apropriado. Se o botão estiver dizendo "Parar máquina" quando for pressionado, nós trocamos a tela de volta.

+ +
+

Nota: Esse controle que troca entre dois estados geralmente é chamado de toggle. Ele alterna entre um estado e outro - acender, apagar, etc.

+
+ +

Resumo

+ +

Neste artigo, cobrimos as informações fundamentais que você precisa saber sobre números em JavaScript, por enquanto. Você verá os números sendo usados ​​de novo e de novo, durante todo o aprendizado de JavaScript. Portanto, é uma boa ideia tirar isso do caminho agora. Se você é uma daquelas pessoas que não gosta de matemática, pode se consolar com o fato de este capítulo ser muito curto.

+ +

No próximo artigo, vamos explorar o texto e como o JavaScript nos permite manipulá-lo.

+ +
+

Nota: Se você gosta de matemática e quer saber mais sobre como ela é implementada em JavaScriot, você pode encontrar muito mais detalhes na seção principal de JavaScript do MDN. Ótimos lugares para começar são os artigos Números e datas e Expressões e operadores .

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

diff --git a/files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html b/files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html deleted file mode 100644 index 771541b047..0000000000 --- a/files/pt-br/learn/javascript/first_steps/o_que_e_javascript/index.html +++ /dev/null @@ -1,435 +0,0 @@ ---- -title: O que é JavaScript? -slug: Learn/JavaScript/First_steps/O_que_e_JavaScript -tags: - - API - - Aprender - - Artigo - - Código Script - - Iniciante - - JavaScript - - Navegador - - Núcleo - - O que - - Script - - comentários - - externo - - inline - - 'l10n:prioridade' - - terceiros -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Sejam bem-vindos ao curso de JavaScript para iniciantes do MDN! Neste primeiro artigo vamos fazer uma análise profunda da linguagem, respondendo questões como "O que é JavaScript?", e "O que ele faz?", para você se sentir confortável com a proposta da linguagem.

- - - - - - - - - - - - -
Pré requisitos:Interação básica com o computador, entendimento básico de HTML e CSS.
Objetivo:Se familiarizar com a linguagem, com o que ela pode fazer, e como tudo isso pode ser utilizado em um website.
- -

Definição de alto nível

- -

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós falamos com muito mais detalhes em outras partes da Área de Aprendizado.

- -

- - - -

As três camadas ficam muito bem uma em cima da outra. Vamos exemplificar com um simples bloco de texto. Nós podemos marcá-lo usando HTML para dar estrutura e propósito: 

- -
<p>Jogador 1: Chris</p>
- -

- -

Nós podemos adicionar um pouco de CSS na mistura, para deixar nosso parágrafo um pouco mais atraente:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

E finalmente, nós podemos adicionar JavaScript para implementar um comportamento dinâmico:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', atualizarNome);
-
-function atualizarNome() {
-  var nome = prompt('Insira um novo nome');
-  para.textContent = 'Jogador 1: ' + nome;
-}
-
- -

{{ EmbedLiveSample('Definição_de_alto_nível', '100%', 80) }}

- -

Experimente clicar no botão acima para ver o que acontece (note também que você pode encontrar essa demonstração no GitHub — veja o código fonte ou veja funcionar)!

- -

JavaScript pode fazer muito mais do que isso — vamos explorar com mais detalhes.

- -

Então o que ele pode realmente fazer?

- -

O núcleo da linguagem JavaScript consiste em alguns benefícios comuns da programação que permite a você fazer coisas como:

- - - -

O que é ainda mais empolgante é a funcionalidade construída no topo do núcleo da linguagem JavaScript. As APIs (Application Programming Interfaces - Interface de Programação de Aplicativos) proveem a você superpoderes extras para usar no seu código JavaScript.

- -

APIs são conjuntos prontos de blocos de construção de código que permitem que um desenvolvedor implemente programas que seriam difíceis ou impossíveis de implementar. Eles fazem o mesmo para a programação que os kits de móveis prontos para a construção de casas - é muito mais fácil pegar os painéis prontos e parafusá-los para formar uma estante de livros do que para elaborar o design, sair e encontrar a madeira, cortar todos os painéis no tamanho e formato certos, encontrar os parafusos de tamanho correto e depois montá-los para formar uma estante de livros.

- -

Elas geralmente se dividem em duas categorias.

- -

APIs de terceiros e APIs do navegador

- -

APIs de navegadores já vem implementadas no navegador, e são capazes de expor dados do ambiente do computador, ou fazer coisas complexas e úteis. Por exemplo:

- - - -
-

Nota: Muitas demonstrações acima não vão funcionar em navegadores antigos — quando você for experimentar, é uma boa ideia usar browsers modernos como Firefox, Edge ou Opera para ver o código funcionar. Você vai precisar estudar testes cross browser com mais detalhes quando você estiver chegando perto de produzir código (código real que as pessoas vão usar).

-
- -

APIs de terceiros não estão implementados no navegador automaticamente, e você geralmente tem que pegar seu código e informações em algum lugar da Web. Por exemplo:

- - - -
-

Note: Essas APIs são avançadas e nós não vamos falar sobre nenhuma delas nesse módulo.Vo cê pode achar muito mais sobre elas em nosso módulo APIs web no lado cliente.

-
- -

Tem muito mais coisas disponíveis! Contudo, não fique animado ainda. Você não estará pronto para desenvolver o próximo Facebook, Google Maps ou Instagram depois de estudar JavaScript por 24 horas — há um monte de coisas básicas para estudar primeiro. E é por isso que você está aqui — vamos começar! 

- -

O que JavaScript está fazendo na sua página web?

- -

Aqui nós vamos realmente começar a ver algum código, e enquanto fazemos isso vamos explorar o que realmente acontece quando você roda algum código JavaScript na sua página.

- -

Vamos recaptular brevemente a história do que acontece quando você carrega uma página web em um navegador (falamos sobre isso no nosso artigo Como o CSS funciona). Quando você carrega uma página web no seu navegador, você está executando seu código (o HTML, CSS e JavaScript) dentro de um ambiente de execução (a guia do navegador). Isso é como uma fábrica que pega a matéria prima (o código) e transforma em um produto (a página web).

- -

- -

Um uso muito comum do JavaScript é modificar dinamicamente HTML e CSS para atualizar uma interface do usuário, por meio da API do Document Object Model (conforme mencionado acima). Observe que o código em seus documentos web geralmente é carregado e executado na ordem em que aparece na página. Se o JavaScript carregar e tentar executar antes do carregamento do HTML e CSS afetado, poderão ocorrer erros. Você aprenderá maneiras de contornar isso mais adiante neste artigo, na seção Estratégias de carregamento de scripts .

- -

Segurança do navegador

- -

Cada guia do navegador tem seu próprio espaço para executar código (esses espaços são chamados de "ambientes de execução", em termos técnicos) — isso significa que na maioria dos casos o código em cada guia está sendo executado separadamente, e o código em uma guia não pode afetar diretamente o código de outra guia — ou de outro website. Isso é uma boa medida de segurança — se esse não fosse o caso, então hackers poderiam começar a escrever código para roubar informações de outros websites, e fazer outras coisas más.

- -
-

Nota: Há muitas maneiras de trocar código e conteúdo entre diferentes websites/guias de uma forma segura, mas são técnicas avançadas que não serão estudadas nesse curso.

-
- -

Ordem de execução do JavaScript

- -

Quando o navegador encontra um bloco de código JavaScript, ele geralmente executa na ordem, de cima para baixo. Isso significa que você precisa ter cuidado com a ordem na qual você coloca as coisas. Por exemplo, vamos voltar ao bloco JavaScript que nós vimos no primeiro exemplo:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', atualizarNome);
-
-function atualizarNome() {
-  ;et nome = prompt('Informe um novo nome:');
-  para.textContent = 'Jogador 1: ' + nome;
-}
- -

Aqui nós estamos selecionando um parágrafo (linha 1) e anexando a ele um event listener (linha 3). Então, quando o parágrafo recebe um clique, o bloco de código atualizarNome() (linhas 5 a 8) é executado. O bloco de código atualizarNome()(esses tipos de bloco de código reutilizáveis são chamados "funções") pede ao usuário que informe um novo nome, e então insere esse nome no parágrafo, atualizando-o.

- -

Se você inverte a ordem das duas primeiras linhas de código, ele não fucionaria — em vez disso, você receberia um erro no console do navegador — TypeError: para is undefined. Isso significa que o objeto para não existe ainda, então nós não podemos adicionar um event listener a ele.

- -
-

Nota: Esse é um erro muito comum — você precisa verificar se os objetos aos quais você se refere no seu código existem antes de você tentar anexar coisas a eles.

-
- -

Código interpretado x compilado

- -

Você pode ouvir os termos interpretado e compilado no contexto da programação. JavaScript é uma linguagem interpretada — o código é executado de cima para baixo e o resultado da execução do código é imediatamente retornado. Você não tem que transformar o código em algo diferente antes do navegador executa-lo.

- -

Linguagens compiladas, por outro lado, são transformadas (compiladas) em algo diferente antes que sejam executadas pelo computador. Por exemplo, C/C++ são compiladas em linguagem Assembly, e depois são executadas pelo computador.

- -

JavaScript é uma linguagem de programação leve e interpretada. O navegador recebe o código JavaScript em sua forma de texto original e executa o script a partir dele. Do ponto de vista técnico, a maioria dos intérpretes modernos de JavaScript realmente usa uma técnica chamada compilação just-in-time para melhorar o desempenho; o código-fonte JavaScript é compilado em um formato binário mais rápido enquanto o script está sendo usado, para que possa ser executado o mais rápido possível. No entanto, o JavaScript ainda é considerado uma linguagem interpretada, pois a compilação é manipulada em tempo de execução, e não antes.

- -

Há vantagens em ambos os tipos de linguagem, mas nós não iremos discutir no momento.

- -

Lado do servidor x Lado do cliente

- -

Você pode também ouvir os termos lado do servidor (server-side) e lado do cliente (client-side), especialmente no contexto de desenvolvimento web. Códigos do lado do cliente são executados no computador do usuário — quando uma página web é visualizada, o código do lado do cliente é baixado, executado e exibido pelo navegador. Nesse módulo JavaScript nós estamos explicitamente falando sobre JavaScript do lado do cliente.

- -

Códigos do lado do servidor, por outro lado, são executados no servidor e o resultado da execução é baixado e exibido no navegador. Exemplos de linguagens do lado do servidor populares incluem PHP, Python, Ruby, e ASP.NET. E JavaScript! JavaScript também pode ser usada como uma linguagem server-side, por exemplo, no popular ambiente Node.js — você pode encontrar mais sobre JavaScript do lado do servidor no nosso tópico Websites dinâmicos - Programação do lado do servidor.

- -

Código dinâmico x estático

- -

A palavra dinâmico é usada para descrever tanto o JavaScript client-side como o server-side — essa palavra se refere a habilidade de atualizar a exibição de uma página web/app para mostrar coisas diferentes em circunstâncias diferentes, gerando novo conteúdo como solicitado. Código do lado do servidor dinamicamente gera novo conteúdo no servidor, puxando dados de um banco de dados, enquanto que JavaScript do lado do cliente dinamicamente gera novo conteúdo dentro do navegador do cliente, como criar uma nova tabela HTML com dados recebidos do servidor e mostrar a tabela em uma página web exibida para o usuário. Os significados são ligeiramente diferente nos dois contextos, porém relacionados, e ambos (JavaScript server-side e client-side) geralmente trabalham juntos.

- -

Uma página web sem atualizações dinâmicas é chamada de estática — ela só mostra o mesmo conteúdo o tempo todo.

- -

Como você adiciona JavaScript na sua página?

- -

O JavaScript é inserido na sua página de uma maneira similar ao CSS. Enquanto o CSS usa o elemento {{htmlelement("link")}} para aplicar folhas de estilo externas e o elemento {{htmlelement("style")}} para aplicar folhas de estilo internas, o JavaScript só precisa de um amigo no mundo do HTML — o elemento {{htmlelement("script")}}. Vamos aprender como funciona.

- -

JavaScript interno

- -
    -
  1. Antes de tudo, faça uma cópia local do nosso arquivo de exemplo aplicando-javascript.html. Salve-o em alguma pasta, de uma forma sensata.
    2. -
  2. Abra o arquivo no seu navegador web e no seu editor de texto. Você verá que o HTML cria uma simples página web contendo um botão clicável.
    3. -
  3. Agora, vá até o seu editor de texto e adicione o código a seguir antes da tag de fechamento </body>: - 
    <script>
-
-  // O JavaScript fica aqui
-
-</script>
    -
    4. -
  4. Agora nós vamos adicionar um pouco de JavaScript dentro do nosso elemento {{htmlelement("script")}} para que a página faça algo mais interessante — adicione o seguinte código abaixo da linha "// O JavaScript fica aqui": - 
    function criarParagrafo() {
-  let para = document.createElement('p');
-  para.textContent = 'Você clicou no botão!';
-  document.body.appendChild(para);
-}
-
-const botoes = document.querySelectorAll('button');
-
-for(var i = 0; i < botoes.length ; i++) {
-  botoes[i].addEventListener('click', criarParagrafo);
-}
    -
    5. -
  5. Salve seu arquivo e recarregue a página — agora você deveria ver que quando você clique no botão, um novo parágrafo é gerado e colocado logo abaixo.
    6. -
- -
-

Nota: Se seu exemplo não parece funcionar, leia cada passo novamente e confira que você fez tudo certo. Você salvou sua cópia local do código inicial como um arquivo .html? Você adicionou o elemento {{htmlelement("script")}} imediatamente antes da tag </body>? Você digitou o código JavaScript exatamente como ele está sendo mostrado? JavaScript é uma linguagem case sensitive (isso significa que a linguagem vê diferença entre letras maiúsculas e minúsculas) e muito confusa, então você precisa digitar a sintaxe exatamente como foi mostrada, senão não vai funcionar.

-
- -
-

Nota: Você pode ver essa versão no GitHub como apicando-javascript-interno.html (veja funcionar também).

-
- -

JavaScript externo

- -

Isso funciona muito bem, mas e se nós quiséssemos colocar nosso JavaScript em um arquivo externo? Vamos explorar isso agora.

- -
    -
  1. Primeiro, crie um novo arquivo na mesma pasta que está o arquivo HTML de exemplo. Chame-o de script.js — tenha certeza de que o nome do arquivo tem a extensão .js, pois é assim que ele será reconhecido como JavaScript.
    2. -
  2. Agora substitua o elemento atual {{htmlelement("script")}} pelo seguinte código: - 
    <script src="script.js" defer></script>
    -
    3. -
  3. Em script.js, adidione o seguinte script: - 
    function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'Você clicou no botão!';
-  document.body.appendChild(para);
-}
-
-const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    4. -
  4. Salve e atualize seu navegador, e você deverá ver a mesma coisa! Funciona igualmente, mas agora nós temos o JavaScript em um arquivo externo. Isso é geralmente uma coisa boa em termos de organização de código, e faz com que seja possível reutilizar o código em múltiplos arquivos HTML. Além disso, o HTML fica mais legível sem grandes pedaços de script no meio dele.
    5. -
- -
-

Nota: Você pode ver essa versão no GitHub como aplicando-javascript-externo.html e script.js (veja funcionar também).

-
- -

Manipuladores de JavaScript inline

- -

Note que às vezes você vai encontrar código JavaScript escrito dentro do HTML. Isso deve ser algo como:

- -
-
function criarParagrafo() {
-  let para = document.createElement('p');
-  para.textContent = 'Você clicou o botao!';
-  document.body.appendChild(para);
-}
- -
-
<button onclick="criarParagrafo()">Me clique!</button>
-
- -

Você pode tentar essa versão na nossa demonstração abaixo.

- -

- -

Essa demonstração tem exatamente a mesma funcionalidade que vimos nas primeiras duas seções, exceto que o elemento {{htmlelement("button")}} inclui um manipulador inline onclick para fazer a função ser executada quando o botão é clicado.

- -

Contudo, por favor, não faça isso. É uma má prática poluir seu HTML com JavaScript, e isso é ineficiente — você teria que incluir o atributo onclick="criarParagrafo()" em todo botão que você quisesse aplicar JavaScript.

- -

Usando uma estrutura feita de puro JavaScript permite a você selecionar todos os botões usando uma instrução. O código que nós usamos acima para servir a esse propósito se parece com isso:

- -
const botoes = document.querySelectorAll('button');
-
-for(var i = 0; i < botoes.length ; i++) {
-  botoes[i].addEventListener('click', criarParagrafo);
-}
- -

Isso talvez parece ser mais do que o atributo onclick, mas isso vai funcionar para todos os botões, não importa quantos tem na página, e quantos forem adicionados ou removidos. O JavaScript não precisará ser mudado.

- -
-

Nota: Tente editar a sua versão do arquivo aplicar-javascript.html, adicionando alguns botões a mais. Quando você recarregar, você deverá ver que todos os botões, quando clicados, irão criar parágrafos. Agradável, não?

-
- -

Estratégias para o carregamento de scripts

- -

Há um considerável número de problemas envolvendo o carregamento de scripts na ordem correta. Infelizmente, nada é tão simples quanto parece ser! Um problema comum é que todo o HTML de uma página é carregado na ordem em que ele aparece. Se você estiver usando Javascript para manipular alguns elementos da página (sendo mais preciso, manipular o Document Object Model), seu código não irá funcionar caso o JavaScript for carregado e executado antes mesmo dos elementos HTML estarem disponíveis.

- -

Nos exemplos acima, tanto nos scripts internos ou externos, o JavaScript é carregado e acionado dentro do cabeçalho do documento, antes do corpo da página ser completamente carregado. Isso poderá causar algum erro. Assim, temos algumas soluções para isso.

- -

No exemplo interno, você pode ver essa estrutura em volta do código:

- -
document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

Isso é um event listener (ouvidor de eventos), que ouve e aguarda o disparo do evento "DOMContentLoaded" vindo do browser, evento este que significa que o corpo do HTML está completamente carregado e pronto. O código JavaScript que estiver dentro desse bloco não será executado até que o evento seja disparado, portanto, o erro será evitado (você irá aprender sobre eventos mais tarde).

- -

No exemplo externo, nós usamos um recurso moderno do JavaScript para resolver esse problema: Trata-se do atributo defer, que informa ao browser para continuar renderizando o conteúdo HTML uma vez que a tag <script> foi atingida.

- -
<script src="script.js" defer></script>
- -

Neste caso, ambos script e HTML irão carregar de forma simultânea e o código irá funcionar.

- -
-

Nota: No caso externo, nós não precisamos utilizar o evento DOMContentLoaded porque o atributo defer resolve o nosso problema. Nós não utilizamos defer como solução para os exemplos internos pois defer funciona apenas com scripts externos.

-
- -

Uma solução à moda antiga para esse problema era colocar o elemento script bem no final do body da página (antes da tag </body>). Com isso, os scripts iriam carregar logo após todo o conteúdo HTML. O problema com esse tipo de solução é que o carregamento/renderização do script seria completamente bloqueado até que todo o conteúdo HTML fosse analisado. Em sites de maior escala, com muitos scripts, essa solução causaria um grande problema de performance e deixaria o site lento. 

- -

async e defer

- -

Atualmente, há dois recursos bem modernos que podermos usar para evitar o problema com o bloqueio de scripts — async e defer (que vimos acima). Vamos ver as diferenças entre esses dois?

- -

Os scripts que são carregados usando o atributo async (veja abaixo) irão baixar o script sem bloquear a renderização da página e irão executar imediatamente após o script terminar de ser disponibilizado. Nesse modo você não tem garantia nenhuma que os scripts carregados irão rodar em uma ordem específica, mas saberá que dessa forma eles não irão impedir o carregamento do restante da página. O melhor uso para o async é quando os scripts de uma página rodam de forma independente entre si e também não dependem de nenhum outro script.

- -

Por exemplo, se você tiver os seguintes elementos script:

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

Você não pode garantir que o script. jquery.js carregará antes ou depois do script2.js e script3.js . Nesse caso, se alguma função desses scripts dependerem de algo vindo do jquery, ela produzirá um erro pois o jquery ainda não foi definido/carregado quando os scripts executaram essa função.

- -

async deve ser usado quando houver muitos scripts rodando no background, e você precisa que estejam disponíveis o mais rápido possível. Por exemplo, talvez você tenha muitos arquivos de dados de um jogo para carregar que serão necessários assim que o jogo iniciar, mas por enquanto, você só quer entrar e ver a tela de carregamento, a do titulo do jogo e o lobby, sem ser bloqueado pelo carregamento desses scripts.

- -

Scripts que são carregados utilizando o atributo defer (veja abaixo) irão rodar exatamente na ordem em que aparecem na página e serão executados assim que o script e o conteúdo for baixado.

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

Todos os scripts com o atributo defer irão carregar na ordem que aparecem na página. No segundo exemplo, podemos ter a certeza que o script jquery.js irá carregar antes do script2.js e script3.js e o script2.js irá carregar antes do script3.js. Os scripts não irão rodar sem que antes todo o conteúdo da página seja carregado, que no caso, é muito útil se os seus scripts dependem de um DOM completamente disponibilizado em tela (por exemplo, scripts que modificam um elemento).

- -

Resumindo:

- - - -

Comentários

- -

Assim como HTML e CSS, é possível escrever comentários dentro do seu código JavaScript que serão ignorados pelo navegador, e existirão simplesmente para prover instruções aos seus colegas desenvolvedores sobre como o código funciona (e pra você, se você tiver que voltar ao seu código depois de 6 meses e não se lembrar do que fez). Comentários são muito úteis, e você deveria usá-los frequentemente, principalmente quando seus códigos forem muito grandes. Há dois tipos:

- - - -

Então, por exemplo, você poderia fazer anotações na nossa última demonstração de código JavaScript, da seguinte forma:

- -
// Função: Cria um novo parágrafo e o insere no fim do arquivo HTML.
-
-function criarParagrafo() {
-  var para = document.createElement('p');
-  para.textContent = 'Você clicou no botão!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Captura referências de todos os botões na página e armazena isso em um array.
-  2. Vai até todos os botões e adiciona um event listener click a cada um deles.
-
-  Quando cada botão é clicado, a função criarParagrafo() será executada.
-*/
-
-const botoes = document.querySelectorAll('button');
-
-for(var i = 0; i < botoes.length ; i++) {
-  botoes[i].addEventListener('click', criarParagrafo);
-}
- -
-

Nota: Em geral mais comentários são melhores que menos, porém você deve tomar cuidado para não adicionar comentários de mais tentando explicar o que uma variável é (o nome da sua variável deve ser mais intuitivo), ou tentando explicar uma operação simples (talvez seu código seja muito complicado denecessariamente).

-
- -

Sumário

- -

Então, esse foi o seu primeiro passo no mundo do JavaScript. Nós iniciamos apenas com teoria, então te ensinamos porque usar JavaScript e que tipo de coisa você pode fazer com ele. Pelo caminho você viu alguns códigos de exemplo e aprendeu como JavaScript se encaixa com o resto do código do seu site, entre outras coisas.

- -

O JavaScript talvez pareça um pouco assustador agora, mas não se preocupe — nesse curso você será guiado passo a passo, e tudo vai começar a fazer sentido. No próximo artigo vamos mergulhar direto para a prática, levando você a construir seu próprio código JavaScript.

- -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- -

Neste módulo:

- - -
diff --git a/files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html b/files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..cc8a8cc542 --- /dev/null +++ b/files/pt-br/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,123 @@ +--- +title: Gerador de histórias bobas +slug: Learn/JavaScript/First_steps/Gerador_de_historias_bobas +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

Nesta avaliação, você será encarregado de utilizar parte do conhecimento que você adquiriu nos artigos deste módulo e aplicá-lo para criar um aplicativo divertido que gera histórias bobas aleatórias. Divirta-se!

+ + + + + + + + + + + + +
Pré-requisitos:Antes de tentar esta avaliação, você já deve ter trabalhado com todos os artigos deste módulo.
Objetivo:Testar a compreensão dos fundamentos de JavaScript, como variáveis, números, operadores, cadeias de caracteres e matrizes.
+ +

Ponto de partida

+ +

Para começar esta avaliação, você deve:

+ + + +
+

Nota: Alternativamente, você pode utilizar um site como JSBin ou Thimble para fazer a sua avaliação. Você pode colar o HTML, CSS e javaScript em um desses editores online. Se o editor online que você estiver utilizando não possuir um painel separado para javaScript, sinta-se a vontade para inseri-lo em um elemento <script> dentro da página HTML.

+
+ +

Resumo do projeto

+ +

Você recebeu algum HTML/CSS em bruto e algumas strings de texto e funções de JavaScript; Você precisa escrever o JavaScript necessário para transformar este em um programa funcional, que faz o seguinte:

+ + + +

A seguinte captura de tela mostra um exemplo do que o programa concluído deve produzir:

+ +

+ +

Para dar-lhe mais uma ideia, dê uma olhada no exemplo concluído (sem espreitar o código fonte!)

+ +

Passos para completar

+ +

As seções a seguir descrevem o que você precisa fazer.

+ +

Configuração básica:

+ +
    +
  1. Crie um novo arquivo chamado main.js, no mesmo diretório que o arquivo index.html.
    2. +
  2. Aplique o arquivo JavaScript externo ao seu HTML inserindo um elemento {{htmlelement ("script")}} no seu HTML referenciando o main.js. Coloque-o antes da etiqueta de fechamento {{htmlelement("body")}}.
    3. +
+ +

Variáveis e funções iniciais:

+ +
    +
  1. No arquivo de texto cru, copie todo o código abaixo do cabeçalho "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" e cole-o no topo do arquivo main.js. Isso dá a você três variáveis que armazenam referências ao campo de texto "Inserir nome personalizado" (customName), o botão "Gerar história aleatória" (randomizar), E o elemento {{htmlelement ("p")}} na parte inferior do corpo HTML para onde a história será copiada (história), respectivamente. Além disso, você tem uma função chamada randomValueFromArray () que recebe um vetor e retorna um dos itens armazenados dentro do vetor aleatoriamente.
    2. +
  2. Agora, veja a segunda seção do arquivo de texto bruto - "2. RAW TEXT STRINGS". Ele contém strings de texto que atuarão como entrada em nosso programa. Gostaríamos que você armazenasse essas strings dentro de variáveis no main.js: +
      +
    1. Armazene a primeira, grande e longa linha de texto dentro de uma variável chamada storyText.
      2. +
    2. Armazene o primeiro conjunto de três strings dentro de um vetor chamado insertX.
      3. +
    3. Armazene o segundo conjunto de três strings dentro de um vetor chamado insertY.
      4. +
    4. Armazene o terceiro conjunto de três strings dentro de um vetor chamado insertZ.
      5. +
    +
    3. +
+ +

Colocando o manipulador de eventos e a função incompleta:

+ +
    +
  1. Agora volte ao arquivo de texto bruto.
    2. +
  2. Copie o código encontrado abaixo do cabeçalho "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" E cole ele na parte inferior do arquivo main.js. Isto: +
      +
    • Adicione um ouvinte de evento de clique à variável randomize para que, quando o botão que ele representa, for clicado, a função result() seja executada.
      • +
    • Adicione a função result() parcialmente concluída ao seu código. Para o restante da avaliação, você estará preenchendo linhas dentro desta função para completá-la e fazê-la funcionar corretamente.
      • +
    +
    3. +
+ +

Completando a função result():

+ +
    +
  1. Crie uma nova variável chamada newStory, e defina seu valor como igual a storyText. Isso é necessário para que possamos criar uma nova história aleatória toda vez que o botão for pressionado e a função for executada. Se fizermos alterações diretamente no storyText, só poderemos gerar uma nova história uma vez.
    2. +
  2. Crie três novas variáveis chamadas xItem, yItem, e zItem, e torne-as iguais ao resultado da chamada da função randomValueFromArray() em seus três arrays (o resultado em cada caso será um item aleatório de cada array em que é chamado). Por exemplo, você pode chamar a função e fazer com que ela retorne uma string aleatória de insertX escrevendo randomValueFromArray(insertX).
    3. +
  3. Em seguida, queremos substituir os três espaços reservados na variável newStory — :insertx:, :inserty:, e :insertz: — com strings armazenadas em xItem, yItem, e zItem. Existe um método de string específico que irá ajudá-lo aqui - em cada caso, faça a chamada para o método igual a newStory,então cada vez que é chamado, newStory é igual a si mesmo, mas com substituições feitas. Assim, cada vez que o botão é pressionado, esses espaços reservados são substituídos por uma string boba aleatória. Como uma dica adicional, o método em questão substitui apenas a primeira ocorrência da subseqüência de caracteres encontrada, portanto, talvez seja necessário fazer uma das chamadas duas vezes.
    4. +
  4. Dentro do primeiro bloco if, adicione outra chamada de método de substituição de string para substituir o nome 'Bob' encontrado na string newStory pela variável name. Neste bloco estamos dizendo "Se um valor foi inserido na entrada de texto customName, substitua Bob na história por esse nome personalizado ".
    5. +
  5. Dentro do segundo bloco if, estamos verificando se o botão de opção uk foi selecionado. Se assim for, converteremos os valores de peso e temperatura na história de libras e Fahrenheit em graus centígrados. O que você precisa fazer é o seguinte: +
      +
    1. Procure as fórmulas para converter libras em pedras e Fahrenheit em centígrados.
      2. +
    2. Dentro da linha que define a variável weight, substitua 300 por um cálculo que converta 300 libras em pedras. Concatene ' stone' no final do resultado da chamada geral Math.round().
      3. +
    3. Dentro da linha que define a variável temperature, substitua 94 por um cálculo que converta 94 graus Fahrenheit em graus centígrados. Concatene ' centigrade' no resultado da chamada geral Math.round().
      4. +
    4. Apenas sob as duas definições de variáveis, adicione mais duas linhas de substituição de string que substituem '94 fahrenheit' pelo conteúdo da variável temperature, e '300 libras' com o conteúdo da variável weight.
      5. +
    +
    6. +
  6. Finalmente, na segunda e última linha da função, torne a propriedadetextContent da variável story  (que faz referência ao parágrafo) igual a newStory.
    7. +
+ +

Dicas e sugestões

+ + + +

Avaliação

+ +

Se você estiver seguindo esta avaliação como parte de um curso organizado, você está apto a entregar seu trabalho ao seu professor/mentor para avaliação. Se você é auto-didata, então você pode consultar o guia de marcação com bastante facilidade perguntando  no tópico do Discurso da área de aprendizagem, ou no no canal #mdn IRC no IRC Mozilla. Tente realizar o exercício primeiro  — não há nada a ganhar com a trapaça!

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html new file mode 100644 index 0000000000..1a14c86630 --- /dev/null +++ b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.html @@ -0,0 +1,85 @@ +--- +title: 'Teste suas habilidades: variáveis' +slug: 'Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis' +tags: + - Aprender + - Habilidades + - Iniciante + - JavaScript + - Teste suas habilidades + - Variáveis +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' +--- +
{{learnsidebar}}
+ +

O objetivo deste teste de habilidade é avaliar se você entendeu nosso artigo Armazenando as informações que você precisa — Variáveis.

+ +
+

Nota: Você pode experimentar soluções nos editores interativos abaixo. No entanto, pode ser útil fazer o download do código e usar uma ferramenta on-line como CodePen, jsFiddle, ou Glitch para realizar as tarefas.
+
+ Se você travar, peça ajuda — veja a seção {{anch("Assessment or further help")}} na parte inferior desta página.

+
+ +
+

Note: Nos exemplos abaixo, se houver um erro no seu código, ele será exibido no painel de resultados da página, para ajudá-lo a tentar descobrir a resposta (ou no console JavaScript do navegador, no caso da versão para download).

+
+ +

Variáveis 1

+ +

Nesta tarefa, queremos que você:

+ + + +

Tente atualizar o código ativo abaixo para recriar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}

+ +
+

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

+
+ +

Variáveis 2

+ +

Nesta tarefa, você precisa adicionar uma nova linha para corrigir o valor armazenado na variável meuNome existente para seu próprio nome.

+ +

Tente atualizar o código ativo abaixo para recriar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}

+ +
+

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

+
+ +

Variáveis 3

+ +

A tarefa final por enquanto — neste caso, você recebe um código existente, que possui dois erros. O painel de resultados deve exibir o nome Chris, e uma declaração sobre quantos anos Chris terá daqui a 20 anos. Como você pode corrigir o problema e corrigir a saída?

+ +

Tente atualizar o código ativo abaixo para recriar o exemplo final:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}

+ +
+

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

+
+ +

Avaliação ou ajuda adicional

+ +

Você pode praticar esses exemplos nos editores interativos acima.

+ +

Se você gostaria que seu trabalho fosse avaliado, ou está travado e quer pedir ajuda:

+ +
    +
  1. Coloque seu trabalho em um editor compartilhável on-line, como CodePen, jsFiddle, ou Glitch. Você pode escrever o código você mesmo ou usar os arquivos de ponto de partida vinculados nas seções acima.
    2. +
  2. Escreva um post pedindo avaliação e/ou ajuda na categoria MDN Discourse forum Learning. Seu post deve incluir: +
      +
    • Um título descritivo como "Avaliação desejada para o teste de habilidade Variáveis 1".
      • +
    • Detalhes do que você já tentou e o que gostaria que fizéssemos. Por exemplo, se você está travado e precisa de ajuda ou deseja uma avaliação.
      • +
    • Um link para o exemplo que você deseja que seja avaliado ou precisa de ajuda, em um editor compartilhável online (conforme mencionado na etapa 1 acima). Esta é uma boa prática para entrar - é muito difícil ajudar alguém com um problema de codificação se você não conseguir ver o código.
      • +
    • Um link para a página real de tarefas ou avaliações, para que possamos encontrar a pergunta com a qual você deseja ajuda.
      • +
    +
    3. +
diff --git a/files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html b/files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html deleted file mode 100644 index 1a14c86630..0000000000 --- a/files/pt-br/learn/javascript/first_steps/teste_suas_habilidades_colon__variaveis/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Teste suas habilidades: variáveis' -slug: 'Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis' -tags: - - Aprender - - Habilidades - - Iniciante - - JavaScript - - Teste suas habilidades - - Variáveis -translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' ---- -
{{learnsidebar}}
- -

O objetivo deste teste de habilidade é avaliar se você entendeu nosso artigo Armazenando as informações que você precisa — Variáveis.

- -
-

Nota: Você pode experimentar soluções nos editores interativos abaixo. No entanto, pode ser útil fazer o download do código e usar uma ferramenta on-line como CodePen, jsFiddle, ou Glitch para realizar as tarefas.
-
- Se você travar, peça ajuda — veja a seção {{anch("Assessment or further help")}} na parte inferior desta página.

-
- -
-

Note: Nos exemplos abaixo, se houver um erro no seu código, ele será exibido no painel de resultados da página, para ajudá-lo a tentar descobrir a resposta (ou no console JavaScript do navegador, no caso da versão para download).

-
- -

Variáveis 1

- -

Nesta tarefa, queremos que você:

- - - -

Tente atualizar o código ativo abaixo para recriar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}

- -
-

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

-
- -

Variáveis 2

- -

Nesta tarefa, você precisa adicionar uma nova linha para corrigir o valor armazenado na variável meuNome existente para seu próprio nome.

- -

Tente atualizar o código ativo abaixo para recriar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}

- -
-

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

-
- -

Variáveis 3

- -

A tarefa final por enquanto — neste caso, você recebe um código existente, que possui dois erros. O painel de resultados deve exibir o nome Chris, e uma declaração sobre quantos anos Chris terá daqui a 20 anos. Como você pode corrigir o problema e corrigir a saída?

- -

Tente atualizar o código ativo abaixo para recriar o exemplo final:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}

- -
-

Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

-
- -

Avaliação ou ajuda adicional

- -

Você pode praticar esses exemplos nos editores interativos acima.

- -

Se você gostaria que seu trabalho fosse avaliado, ou está travado e quer pedir ajuda:

- -
    -
  1. Coloque seu trabalho em um editor compartilhável on-line, como CodePen, jsFiddle, ou Glitch. Você pode escrever o código você mesmo ou usar os arquivos de ponto de partida vinculados nas seções acima.
    2. -
  2. Escreva um post pedindo avaliação e/ou ajuda na categoria MDN Discourse forum Learning. Seu post deve incluir: -
      -
    • Um título descritivo como "Avaliação desejada para o teste de habilidade Variáveis 1".
      • -
    • Detalhes do que você já tentou e o que gostaria que fizéssemos. Por exemplo, se você está travado e precisa de ajuda ou deseja uma avaliação.
      • -
    • Um link para o exemplo que você deseja que seja avaliado ou precisa de ajuda, em um editor compartilhável online (conforme mencionado na etapa 1 acima). Esta é uma boa prática para entrar - é muito difícil ajudar alguém com um problema de codificação se você não conseguir ver o código.
      • -
    • Um link para a página real de tarefas ou avaliações, para que possamos encontrar a pergunta com a qual você deseja ajuda.
      • -
    -
    3. -
diff --git a/files/pt-br/learn/javascript/first_steps/variables/index.html b/files/pt-br/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..1afd436622 --- /dev/null +++ b/files/pt-br/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,332 @@ +--- +title: Armazenando as informações que você precisa — Variáveis +slug: Learn/JavaScript/First_steps/Variáveis +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Depois de ler os últimos artigos, você deve saber agora o que é o JavaScript, o que ele pode fazer para você, como você usa isso junto com outras tecnologias da web e as características principais de alto nível. Neste artigo, iremos ao básico, vendo como trabalhar com a maioria dos blocos de construção básicos de JavaScript - Variáveis.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo:Familiarizar-se com o básico de variáveis em JavaScript.
+ +

Ferramentas que você precisa

+ +

Ao longo deste artigo, pediremos que você digite linhas de código para testar seu entendimento do conteúdo. Se você estiver utilizando um navegador em um computador, o melhor lugar para digitar seus código de exemplos é o console JavaScript do seu navegador (veja o artigo O que são as ferramentas de desenvolvimento do navegador para mais informações sobre como acessar essa ferramenta).

+ +

No entanto, nós também providenciamos um simples console JavaScript incorporado à página logo abaixo para que você inserir o código, caso não esteja usando um navegador com um console JavaScript facilmente disponível, ou se achar o console incorporado mais confortável.

+ +

O que é uma variável?

+ +

Uma variável é um container para um valor, como um número que podemos usar em uma operação de adição, ou uma sequência de texto que possamos usar como parte de uma oração. Mas uma coisa especial a respeito das variáveis é que seu conteúdo pode mudar. Vamos ver um exemplo simples:

+ +
<button>Aperte-me</button>
+ +
var button = document.querySelector('button');
+
+button.onclick = function() {
+  var nome = prompt('Qual é o seu nome?');
+  alert('Olá ' + nome + ', é um prazer te ver!');
+}
+ +

{{ EmbedLiveSample('O_que_é_uma_variável', '100%', 50, "", "", "hide-codepen-jsfiddle" ) }}

+ +

Nesse exemplo, apertar o botão executa algumas linhas de código. A primeira linha exibe uma caixa pop-up na tela que pede ao leitor para inserir o seu nome, e então armazena o valor na variável. A segunda linha exibe uma mensagem de boas vindas que inclui seu nome, obtido do valor da variável.

+ +

Para entender porque isso é útil, vamos pensar sobre como nós escreveríamos esse exemplo sem usar uma variável. Iria acabar se parecendo com algo do tipo:

+ +
var nome = prompt('Qual é o seu nome?');
+
+if (nome === 'Adão') {
+  alert('Olá Adão, é um prazer te ver!');
+} else if (nome === 'Alan') {
+  alert('Olá Alan, é um prazer te ver!');
+} else if (nome === 'Bella') {
+  alert('Olá Bella, é um prazer te ver!');
+} else if (nome === 'Bianca') {
+  alert('Olá Bianca, é um prazer te ver!');
+} else if (nome === 'Chris') {
+  alert('Olá Chris, é um prazer te ver !');
+}
+
+// ... e assim por diante ...
+ +

Você talvez não entenda totalmente a sintaxe que estamos usando (ainda!), mas deve ter pegado a ideia — se nós não tivermos variáveis disponíveis teríamos que implementar um bloco de código gigantesco para conferir qual era o nome inserido, e então exibir a mensagem apropriada para aquele nome. Isso é obviamente muito ineficiente (o código é muito maior, mesmo para apenas quatro opções de nome), e simplesmente não funcionaria — você não poderia armazenar todas as possíveis opções de nome.

+ +

Variáveis simplesmente fazem sentido, e a medida que você for aprendendo mais sobre JavaScript elas começarão a se tornar uma coisa natural.

+ +

Outra coisa especial sobra as variáveis é que elas podem conter praticamente qualquer coisa — não apenas cadeias de texto e números. Variáveis também podem conter dados complexos e até mesmo funções completas para fazer coisas incríveis. Você irá aprender mais sobre isso a medida que continuarmos.

+ +
+

Nota: Perceba que dissemos que as variáveis contém valores. Essa é uma distinção importante a se fazer. Elas não são os valores; e sim os containers para eles. Você pode pensar nelas sendo pequenas caixas de papelão nas quais você pode guardar coisas..

+
+ +

+ +

Declarando uma variável

+ +

Para usar uma variável primeiro tem que criá-la — mais precisamente, chamamos isso de declarar a variável. Para fazê-lo digitamos a palavra chave var seguido do nome que desejamos dar à variável:

+ +
var meuNome;
+var minhaIdade;
+ +

Aqui, estamos criando duas variáveis chamadas meuNome e minhaIdade. Tente agora digitar essas linhas no console do seu navegador. Depois disso, tente criar uma variável (ou duas) com suas próprias escolhas de nomes.

+ +
+

Nota: No JavaScript, todas as intruções em código deve terminar com um ponto e vírgula (;) — seu código pode até funcionar sem o ponto e vírgula em linhas únicas, mas provavelmente não irá funcionar quando estiver escrevendo várias linhas de código juntas. Tente pegar o hábito de sempre incluir o ponto e vírgula.

+
+ +

Você pode testar se os valores agora existem no ambiente de execução digitando apenas os nomes das variáveis, ex.:

+ +
meuNome;
+minhaidade;
+ +

Elas atualmente não possuem valor; são containers vazios. Quando você insere o nome de uma variável, você deve obter em retorno ou um valor undefined (indefinido), ou se a variável não existir, você recebe uma mensagem de erro — tente digitar:

+ +
scoobyDoo;
+ +
+

Nota: Não confunda uma variável que existe mas não tenho valor definido com uma variável que não existe — são coisas bem diferentes.

+
+ +

Inicializando uma variável

+ +

Uma vez que você declarou uma variável, você pode inicializá-la com um valor. Você faz isso digitando o nome da variável, seguido do sinal de igual (=) e o valor que deseja atribuir a ela. Por exemplo:

+ +
meuNome = 'Chris';
+minhaIdade = 37;
+ +

Tente voltar ao console agora e digitar essas linhas acima. Você deve ver o valor que atribuiu à variável retornado no console confirmando-o, em cada caso. De novo, você pode retornar os valores de suas variáveis simplesmente digitando seus nomes no console — tente isso novamente:

+ +
meuNome;
+minhaIdade;
+ +

Você pode declarar e inicializar uma variável ao mesmo tempo, assim:

+ +
var meuNome = 'Chris';
+ +

Isso provavelmente é como irá fazer na maioria das vezes, já que é mais rápido do que fazer as duas ações em duas linhas separadas.

+ +

A diferença entre var e let

+ +

Agora você pode estar pensando "por que precisamos de duas palavras-chave para definir variáveis? Por que var e let?".

+ +

As razões são um tanto históricas. Quando o JavaScript foi criado, havia apenas var. Isso funciona basicamente bem na maioria dos casos, mas tem alguns problemas na maneira como funciona — seu design pode ser confuso ou totalmente irritante. Portanto, let foi criada nas versões modernas de JavaScript, uma nova palavra-chave para criar variáveis que funcionam de maneira um pouco diferente para  var, corrigindo seus problemas no processo.

+ +

Algumas diferenças simples são explicadas abaixo. Não abordaremos todas as diferenças agora, mas você começará a descobri-las à medida que aprender mais sobre JavaScript (se realmente quiser ler sobre elas agora, fique à vontade para conferir nossa página de referência let).

+ +

Para começar, se você escrever um programa JavaScript de várias linhas que declare e inicialize uma variável, poderá realmente declarar uma variável com var depois de inicializá-la e ainda funcionará. Por exemplo:

+ +
meuNome = 'Chris';
+
+function logNome() {
+  console.log(meuNome);
+}
+
+logNome();
+
+var meuNome;
+ +
+

Nota: Isso não funcionará ao digitar linhas individuais em um console JavaScript, apenas ao executar várias linhas de JavaScript em um documento da web.

+
+ +

Isso funciona por causa do hoisting — leia var hoisting pra mais detalhes.

+ +

Hoisting não funciona mais com let. Se mudássemos de var para let no exemplo acima, teríamos um erro. Isso é bom — declarar uma variável depois que você a inicializa resulta em código confuso e difícil de entender.

+ +

E depois, ao usar var, você pode declarar a mesma variável quantas vezes quiser, mas com let você não consegue. Isso pode funcionar:

+ +
var meuNome = 'Chris';
+var meuNome = 'Bob';
+ +

Mas isso geraria um erro na segunda linha:

+ +
let meuNome = 'Chris';
+let meuNome = 'Bob';
+ +

Você precisaria fazer assim:

+ +
let meuNome = 'Chris';
+meuNome = 'Bob';
+ +

Novamente, essa é uma decisão sensata da linguagem. Não há razão para redeclarar variáveis — isso apenas torna as coisas mais confusas.

+ +

Por esses motivos e mais, recomendamos que você use let o máximo possível em seu código, em vez de var. Não há motivo para usar var, a menos que você precise oferecer suporte para versões antigas do Internet Explorer com seu código (ele não suporta let até a versão 11; o navegador mais moderno do Windows, o Edge, suporta let).

+ +

Atualizando uma variável

+ +

Uma vez que uma tenha um valor atribuido, você pode atualizar esse valor simplesmente dando a ela um valor diferente. Tente inserir as seguintes linhas no seu console:

+ +
meuNome = 'Bob';
+minhaIdade = 40;
+ +

Um adendo sobre regras de nomeação de variáveis

+ +

Você pode chamar uma variável praticamente qualquer nome que queira, mas há limitações. Geralmente você deve se limitar a utilizar somente caracteres latinos (0-9, a-z, A-Z) e o caractere underline ( _ ).

+ + + +
+

Nota: Você pode encontrar uma lista bem completa de palavras reservadas para evitar em Gramática léxica — Palavras-chave.

+
+ +

Exemplos de bons nomes:

+ +
idade
+minhaIdade
+inicio
+corInicial
+valorFinalDeSaida
+audio1
+audio2
+ +

Exemplos ruins de nomes:

+ +
1
+a
+_12
+minhaidade
+MINHAIDADE
+var
+Document
+skjfndskjfnbdskjfb
+esseeumnomedevariavelbemlongoeestupido
+
+ +

Tente criar mais  algumas variáveis agora, com a orientação acima em mente.

+ +

Tipos de variáveis

+ +

Existem alguns diferentes tipos de dados que podemos armazenar em variáveis. Nessa seção iremos descrevê-los brevemente, e então em artigos futuros você aprenderá sobre eles em mais detalhes.

+ +

Até agora nós vimos os dois primeiros, mas há outros.

+ +

Números

+ +

Você pode armazenar números em variáveis, tanto números inteiros, como por exemplo 30 (também chamados de integers) como números decimais, por exemplo 2.456 (também chamados de floats ou floating point numbers). Você não precisa declarar tipos de variáveis no JavaScript, diferentemente de outras linguagens de programação. Quando você atribui a uma variável o valor em número, você não inclui as aspas:

+ +
var minhaIdade = 17;
+ +

Strings (cadeias de texto)

+ +

Strings são sequências de texto. Quando você dá a uma variável um valor em texto (string), você precisa envolver o texto em aspas simples ou duplas; caso contrário, o JavaScript vai tentar interpretá-lo como sendo outro nome de variável.

+ +
var despedidaGolfinho = 'Até logo e obrigado por todos os peixes!';
+ +

Booleans (boleanos)

+ +

Booleans são valores verdadeiro/falso (true/false) — eles podem ter dois valores, true (verdadeiro) ou false (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apopriadamente. Por exemplo, um caso simples seria:

+ +
var estouVivo = true;
+ +

Enquanto na realidade seria utlizado mais da seguinte forma:

+ +
var teste = 6 < 3;
+ +

Esse exemplo está usando o operador "menor que" (<) para testar se 6 é menor que 3. Como você pode esperar, irá retornar false (falso), porque 6 não é menor que 3! Você aprenderá mais sobre tais operadores mais tarde no curso.

+ +

Arrays

+ +

Um array é um único objeto que contém valores múltiplos inseridos entre colchetes e separados por vírgulas. Tente inserir as seguintes linhas de código no seu console:

+ +
var meuNomeArray = ['Chris', 'Bob', 'Jim'];
+var meuNumeroArray = [10,15,40];
+ +

Uma vez que esses arrays estejam definidos, você pode acessar cada um de seus valores através de sua localização dentro do array. Tente essas linhas:

+ +
meuNomeArray[0]; // deve retornar 'Chris'
+meuNumeroArray[2]; // deve retornar 40
+ +

Os colchetes especificam um valor do índice correspondente à posição do valor que você deseja retornado. Você talvez tenha notado que os arrays em JavaScript são indexados a partir do zero: o primeiro elemento está na posíção 0 do índice.

+ +

Você aprenderá mais sobre arrays em um artigo futuro.

+ +

Objetos

+ +

Em programação, um objeto é uma estrutura de código que representa um objeto da vida real. Você pode ter um simples objeto que representa um estacionamento de carro contendo informações sobre sobre sua largura e comprimento, ou você poderia ter um objeto que representa uma pessoa, e contém dados sobre seu nome, altura, peso, que idioma ela fala, como dizer olá a ela, e mais.

+ +

Tente inserir a seguinte linha em seu console:

+ +
var cachorro = { nome : 'Totó', raca : 'Dálmata' };
+ +

Para obeter a informação armazenada no objeto, você pode usar a seguinte sintaxe:

+ +
cachorro.nome
+ +

Nós não iremos ver mais sobre objetos por agora — você pode aprender mais sobre eles em um artigo futuro.

+ +

Digitação permissiva

+ +

JavaScript é uma "dynamically typed language", o que significa que, diferente de outras linguagens, você não precisa especificar que tipo de dados uma variável irá conter (ex.: números, cadeias de texto, arrays, etc).

+ +

Por exemplo, se você declarar uma variável e dar a ela um valor encapsulado em aspas, o navegador irá tratar a variável como sendo uma string (cadeia de texto):

+ +
var minhaString = 'Olá';
+ +

Irá continuar sendo uma string, mesmo que dentro das apas contenha um número, então seja cuidadoso:

+ +
var meuNumero = '500'; // opa, isso continua sendo uma string
+typeof(meuNumero);
+meuNumero = 500; // bem melhor — agora isso é um número
+typeof(meuNumero);
+ +

Tente inserir as quatro linhas acima em seu console uma por uma, e veja quais são os resultados. Você notará que estamos usando uma função especial chamada typeof() — ela irá retornar o tipo de dado da variável que você passar. Da primeira vez que for executada, deve retornar string, como naquele ponto a variável meuNumero contém uma string, '500'. Dê uma olhada e veja o que é retornado da segunda vez que você a utilizar.

+ +

Constants em JavaScript

+ +

Muitas linguagens de programação têm o conceito de constant —  um valor que uma vez declarado não pode ser alterado. Há muitas razões pelas quais você deseja fazer isso, desde segurança (se um script de terceiros alterou esses valores, poderia causar problemas)  até a depuração e a compreensão do código (é mais difícil alterar acidentalmente valores que não devem ser alterados e bagunçar as coisas).

+ +

Nos primeiros dias do JavaScript, não existiam constants. No JavaScript moderno, temos a palavra-chave const, que nos permite armazenar valores que nunca podem ser alterados:

+ +
const diasNaSemana = 7;
+const horasNoDia = 24;
+ +

const funciona exatamente da mesma maneira que let, exceto que você não pode atribuir um novo valor a const. No exemplo a seguir, a segunda linha geraria um erro:

+ +
const diasNaSemana = 7;
+diasNaSemana = 8;
+ +

Teste suas habilidades!

+ +

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja Teste suas habilidades: variáveis.

+ +

Sumário

+ +

Por agora você deve saber razoavelmente sobre variáveis JavaScript e como criá-las. No próximo artigo Vamos focar nos números em mais detalhes, vendo como fazer matemática básica no JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

Neste módulo

+ + diff --git "a/files/pt-br/learn/javascript/first_steps/vari\303\241veis/index.html" "b/files/pt-br/learn/javascript/first_steps/vari\303\241veis/index.html" deleted file mode 100644 index 1afd436622..0000000000 --- "a/files/pt-br/learn/javascript/first_steps/vari\303\241veis/index.html" +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Armazenando as informações que você precisa — Variáveis -slug: Learn/JavaScript/First_steps/Variáveis -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Depois de ler os últimos artigos, você deve saber agora o que é o JavaScript, o que ele pode fazer para você, como você usa isso junto com outras tecnologias da web e as características principais de alto nível. Neste artigo, iremos ao básico, vendo como trabalhar com a maioria dos blocos de construção básicos de JavaScript - Variáveis.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo:Familiarizar-se com o básico de variáveis em JavaScript.
- -

Ferramentas que você precisa

- -

Ao longo deste artigo, pediremos que você digite linhas de código para testar seu entendimento do conteúdo. Se você estiver utilizando um navegador em um computador, o melhor lugar para digitar seus código de exemplos é o console JavaScript do seu navegador (veja o artigo O que são as ferramentas de desenvolvimento do navegador para mais informações sobre como acessar essa ferramenta).

- -

No entanto, nós também providenciamos um simples console JavaScript incorporado à página logo abaixo para que você inserir o código, caso não esteja usando um navegador com um console JavaScript facilmente disponível, ou se achar o console incorporado mais confortável.

- -

O que é uma variável?

- -

Uma variável é um container para um valor, como um número que podemos usar em uma operação de adição, ou uma sequência de texto que possamos usar como parte de uma oração. Mas uma coisa especial a respeito das variáveis é que seu conteúdo pode mudar. Vamos ver um exemplo simples:

- -
<button>Aperte-me</button>
- -
var button = document.querySelector('button');
-
-button.onclick = function() {
-  var nome = prompt('Qual é o seu nome?');
-  alert('Olá ' + nome + ', é um prazer te ver!');
-}
- -

{{ EmbedLiveSample('O_que_é_uma_variável', '100%', 50, "", "", "hide-codepen-jsfiddle" ) }}

- -

Nesse exemplo, apertar o botão executa algumas linhas de código. A primeira linha exibe uma caixa pop-up na tela que pede ao leitor para inserir o seu nome, e então armazena o valor na variável. A segunda linha exibe uma mensagem de boas vindas que inclui seu nome, obtido do valor da variável.

- -

Para entender porque isso é útil, vamos pensar sobre como nós escreveríamos esse exemplo sem usar uma variável. Iria acabar se parecendo com algo do tipo:

- -
var nome = prompt('Qual é o seu nome?');
-
-if (nome === 'Adão') {
-  alert('Olá Adão, é um prazer te ver!');
-} else if (nome === 'Alan') {
-  alert('Olá Alan, é um prazer te ver!');
-} else if (nome === 'Bella') {
-  alert('Olá Bella, é um prazer te ver!');
-} else if (nome === 'Bianca') {
-  alert('Olá Bianca, é um prazer te ver!');
-} else if (nome === 'Chris') {
-  alert('Olá Chris, é um prazer te ver !');
-}
-
-// ... e assim por diante ...
- -

Você talvez não entenda totalmente a sintaxe que estamos usando (ainda!), mas deve ter pegado a ideia — se nós não tivermos variáveis disponíveis teríamos que implementar um bloco de código gigantesco para conferir qual era o nome inserido, e então exibir a mensagem apropriada para aquele nome. Isso é obviamente muito ineficiente (o código é muito maior, mesmo para apenas quatro opções de nome), e simplesmente não funcionaria — você não poderia armazenar todas as possíveis opções de nome.

- -

Variáveis simplesmente fazem sentido, e a medida que você for aprendendo mais sobre JavaScript elas começarão a se tornar uma coisa natural.

- -

Outra coisa especial sobra as variáveis é que elas podem conter praticamente qualquer coisa — não apenas cadeias de texto e números. Variáveis também podem conter dados complexos e até mesmo funções completas para fazer coisas incríveis. Você irá aprender mais sobre isso a medida que continuarmos.

- -
-

Nota: Perceba que dissemos que as variáveis contém valores. Essa é uma distinção importante a se fazer. Elas não são os valores; e sim os containers para eles. Você pode pensar nelas sendo pequenas caixas de papelão nas quais você pode guardar coisas..

-
- -

- -

Declarando uma variável

- -

Para usar uma variável primeiro tem que criá-la — mais precisamente, chamamos isso de declarar a variável. Para fazê-lo digitamos a palavra chave var seguido do nome que desejamos dar à variável:

- -
var meuNome;
-var minhaIdade;
- -

Aqui, estamos criando duas variáveis chamadas meuNome e minhaIdade. Tente agora digitar essas linhas no console do seu navegador. Depois disso, tente criar uma variável (ou duas) com suas próprias escolhas de nomes.

- -
-

Nota: No JavaScript, todas as intruções em código deve terminar com um ponto e vírgula (;) — seu código pode até funcionar sem o ponto e vírgula em linhas únicas, mas provavelmente não irá funcionar quando estiver escrevendo várias linhas de código juntas. Tente pegar o hábito de sempre incluir o ponto e vírgula.

-
- -

Você pode testar se os valores agora existem no ambiente de execução digitando apenas os nomes das variáveis, ex.:

- -
meuNome;
-minhaidade;
- -

Elas atualmente não possuem valor; são containers vazios. Quando você insere o nome de uma variável, você deve obter em retorno ou um valor undefined (indefinido), ou se a variável não existir, você recebe uma mensagem de erro — tente digitar:

- -
scoobyDoo;
- -
-

Nota: Não confunda uma variável que existe mas não tenho valor definido com uma variável que não existe — são coisas bem diferentes.

-
- -

Inicializando uma variável

- -

Uma vez que você declarou uma variável, você pode inicializá-la com um valor. Você faz isso digitando o nome da variável, seguido do sinal de igual (=) e o valor que deseja atribuir a ela. Por exemplo:

- -
meuNome = 'Chris';
-minhaIdade = 37;
- -

Tente voltar ao console agora e digitar essas linhas acima. Você deve ver o valor que atribuiu à variável retornado no console confirmando-o, em cada caso. De novo, você pode retornar os valores de suas variáveis simplesmente digitando seus nomes no console — tente isso novamente:

- -
meuNome;
-minhaIdade;
- -

Você pode declarar e inicializar uma variável ao mesmo tempo, assim:

- -
var meuNome = 'Chris';
- -

Isso provavelmente é como irá fazer na maioria das vezes, já que é mais rápido do que fazer as duas ações em duas linhas separadas.

- -

A diferença entre var e let

- -

Agora você pode estar pensando "por que precisamos de duas palavras-chave para definir variáveis? Por que var e let?".

- -

As razões são um tanto históricas. Quando o JavaScript foi criado, havia apenas var. Isso funciona basicamente bem na maioria dos casos, mas tem alguns problemas na maneira como funciona — seu design pode ser confuso ou totalmente irritante. Portanto, let foi criada nas versões modernas de JavaScript, uma nova palavra-chave para criar variáveis que funcionam de maneira um pouco diferente para  var, corrigindo seus problemas no processo.

- -

Algumas diferenças simples são explicadas abaixo. Não abordaremos todas as diferenças agora, mas você começará a descobri-las à medida que aprender mais sobre JavaScript (se realmente quiser ler sobre elas agora, fique à vontade para conferir nossa página de referência let).

- -

Para começar, se você escrever um programa JavaScript de várias linhas que declare e inicialize uma variável, poderá realmente declarar uma variável com var depois de inicializá-la e ainda funcionará. Por exemplo:

- -
meuNome = 'Chris';
-
-function logNome() {
-  console.log(meuNome);
-}
-
-logNome();
-
-var meuNome;
- -
-

Nota: Isso não funcionará ao digitar linhas individuais em um console JavaScript, apenas ao executar várias linhas de JavaScript em um documento da web.

-
- -

Isso funciona por causa do hoisting — leia var hoisting pra mais detalhes.

- -

Hoisting não funciona mais com let. Se mudássemos de var para let no exemplo acima, teríamos um erro. Isso é bom — declarar uma variável depois que você a inicializa resulta em código confuso e difícil de entender.

- -

E depois, ao usar var, você pode declarar a mesma variável quantas vezes quiser, mas com let você não consegue. Isso pode funcionar:

- -
var meuNome = 'Chris';
-var meuNome = 'Bob';
- -

Mas isso geraria um erro na segunda linha:

- -
let meuNome = 'Chris';
-let meuNome = 'Bob';
- -

Você precisaria fazer assim:

- -
let meuNome = 'Chris';
-meuNome = 'Bob';
- -

Novamente, essa é uma decisão sensata da linguagem. Não há razão para redeclarar variáveis — isso apenas torna as coisas mais confusas.

- -

Por esses motivos e mais, recomendamos que você use let o máximo possível em seu código, em vez de var. Não há motivo para usar var, a menos que você precise oferecer suporte para versões antigas do Internet Explorer com seu código (ele não suporta let até a versão 11; o navegador mais moderno do Windows, o Edge, suporta let).

- -

Atualizando uma variável

- -

Uma vez que uma tenha um valor atribuido, você pode atualizar esse valor simplesmente dando a ela um valor diferente. Tente inserir as seguintes linhas no seu console:

- -
meuNome = 'Bob';
-minhaIdade = 40;
- -

Um adendo sobre regras de nomeação de variáveis

- -

Você pode chamar uma variável praticamente qualquer nome que queira, mas há limitações. Geralmente você deve se limitar a utilizar somente caracteres latinos (0-9, a-z, A-Z) e o caractere underline ( _ ).

- - - -
-

Nota: Você pode encontrar uma lista bem completa de palavras reservadas para evitar em Gramática léxica — Palavras-chave.

-
- -

Exemplos de bons nomes:

- -
idade
-minhaIdade
-inicio
-corInicial
-valorFinalDeSaida
-audio1
-audio2
- -

Exemplos ruins de nomes:

- -
1
-a
-_12
-minhaidade
-MINHAIDADE
-var
-Document
-skjfndskjfnbdskjfb
-esseeumnomedevariavelbemlongoeestupido
-
- -

Tente criar mais  algumas variáveis agora, com a orientação acima em mente.

- -

Tipos de variáveis

- -

Existem alguns diferentes tipos de dados que podemos armazenar em variáveis. Nessa seção iremos descrevê-los brevemente, e então em artigos futuros você aprenderá sobre eles em mais detalhes.

- -

Até agora nós vimos os dois primeiros, mas há outros.

- -

Números

- -

Você pode armazenar números em variáveis, tanto números inteiros, como por exemplo 30 (também chamados de integers) como números decimais, por exemplo 2.456 (também chamados de floats ou floating point numbers). Você não precisa declarar tipos de variáveis no JavaScript, diferentemente de outras linguagens de programação. Quando você atribui a uma variável o valor em número, você não inclui as aspas:

- -
var minhaIdade = 17;
- -

Strings (cadeias de texto)

- -

Strings são sequências de texto. Quando você dá a uma variável um valor em texto (string), você precisa envolver o texto em aspas simples ou duplas; caso contrário, o JavaScript vai tentar interpretá-lo como sendo outro nome de variável.

- -
var despedidaGolfinho = 'Até logo e obrigado por todos os peixes!';
- -

Booleans (boleanos)

- -

Booleans são valores verdadeiro/falso (true/false) — eles podem ter dois valores, true (verdadeiro) ou false (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apopriadamente. Por exemplo, um caso simples seria:

- -
var estouVivo = true;
- -

Enquanto na realidade seria utlizado mais da seguinte forma:

- -
var teste = 6 < 3;
- -

Esse exemplo está usando o operador "menor que" (<) para testar se 6 é menor que 3. Como você pode esperar, irá retornar false (falso), porque 6 não é menor que 3! Você aprenderá mais sobre tais operadores mais tarde no curso.

- -

Arrays

- -

Um array é um único objeto que contém valores múltiplos inseridos entre colchetes e separados por vírgulas. Tente inserir as seguintes linhas de código no seu console:

- -
var meuNomeArray = ['Chris', 'Bob', 'Jim'];
-var meuNumeroArray = [10,15,40];
- -

Uma vez que esses arrays estejam definidos, você pode acessar cada um de seus valores através de sua localização dentro do array. Tente essas linhas:

- -
meuNomeArray[0]; // deve retornar 'Chris'
-meuNumeroArray[2]; // deve retornar 40
- -

Os colchetes especificam um valor do índice correspondente à posição do valor que você deseja retornado. Você talvez tenha notado que os arrays em JavaScript são indexados a partir do zero: o primeiro elemento está na posíção 0 do índice.

- -

Você aprenderá mais sobre arrays em um artigo futuro.

- -

Objetos

- -

Em programação, um objeto é uma estrutura de código que representa um objeto da vida real. Você pode ter um simples objeto que representa um estacionamento de carro contendo informações sobre sobre sua largura e comprimento, ou você poderia ter um objeto que representa uma pessoa, e contém dados sobre seu nome, altura, peso, que idioma ela fala, como dizer olá a ela, e mais.

- -

Tente inserir a seguinte linha em seu console:

- -
var cachorro = { nome : 'Totó', raca : 'Dálmata' };
- -

Para obeter a informação armazenada no objeto, você pode usar a seguinte sintaxe:

- -
cachorro.nome
- -

Nós não iremos ver mais sobre objetos por agora — você pode aprender mais sobre eles em um artigo futuro.

- -

Digitação permissiva

- -

JavaScript é uma "dynamically typed language", o que significa que, diferente de outras linguagens, você não precisa especificar que tipo de dados uma variável irá conter (ex.: números, cadeias de texto, arrays, etc).

- -

Por exemplo, se você declarar uma variável e dar a ela um valor encapsulado em aspas, o navegador irá tratar a variável como sendo uma string (cadeia de texto):

- -
var minhaString = 'Olá';
- -

Irá continuar sendo uma string, mesmo que dentro das apas contenha um número, então seja cuidadoso:

- -
var meuNumero = '500'; // opa, isso continua sendo uma string
-typeof(meuNumero);
-meuNumero = 500; // bem melhor — agora isso é um número
-typeof(meuNumero);
- -

Tente inserir as quatro linhas acima em seu console uma por uma, e veja quais são os resultados. Você notará que estamos usando uma função especial chamada typeof() — ela irá retornar o tipo de dado da variável que você passar. Da primeira vez que for executada, deve retornar string, como naquele ponto a variável meuNumero contém uma string, '500'. Dê uma olhada e veja o que é retornado da segunda vez que você a utilizar.

- -

Constants em JavaScript

- -

Muitas linguagens de programação têm o conceito de constant —  um valor que uma vez declarado não pode ser alterado. Há muitas razões pelas quais você deseja fazer isso, desde segurança (se um script de terceiros alterou esses valores, poderia causar problemas)  até a depuração e a compreensão do código (é mais difícil alterar acidentalmente valores que não devem ser alterados e bagunçar as coisas).

- -

Nos primeiros dias do JavaScript, não existiam constants. No JavaScript moderno, temos a palavra-chave const, que nos permite armazenar valores que nunca podem ser alterados:

- -
const diasNaSemana = 7;
-const horasNoDia = 24;
- -

const funciona exatamente da mesma maneira que let, exceto que você não pode atribuir um novo valor a const. No exemplo a seguir, a segunda linha geraria um erro:

- -
const diasNaSemana = 7;
-diasNaSemana = 8;
- -

Teste suas habilidades!

- -

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja Teste suas habilidades: variáveis.

- -

Sumário

- -

Por agora você deve saber razoavelmente sobre variáveis JavaScript e como criá-las. No próximo artigo Vamos focar nos números em mais detalhes, vendo como fazer matemática básica no JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html b/files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..771541b047 --- /dev/null +++ b/files/pt-br/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,435 @@ +--- +title: O que é JavaScript? +slug: Learn/JavaScript/First_steps/O_que_e_JavaScript +tags: + - API + - Aprender + - Artigo + - Código Script + - Iniciante + - JavaScript + - Navegador + - Núcleo + - O que + - Script + - comentários + - externo + - inline + - 'l10n:prioridade' + - terceiros +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Sejam bem-vindos ao curso de JavaScript para iniciantes do MDN! Neste primeiro artigo vamos fazer uma análise profunda da linguagem, respondendo questões como "O que é JavaScript?", e "O que ele faz?", para você se sentir confortável com a proposta da linguagem.

+ + + + + + + + + + + + +
Pré requisitos:Interação básica com o computador, entendimento básico de HTML e CSS.
Objetivo:Se familiarizar com a linguagem, com o que ela pode fazer, e como tudo isso pode ser utilizado em um website.
+ +

Definição de alto nível

+ +

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós falamos com muito mais detalhes em outras partes da Área de Aprendizado.

+ +

+ + + +

As três camadas ficam muito bem uma em cima da outra. Vamos exemplificar com um simples bloco de texto. Nós podemos marcá-lo usando HTML para dar estrutura e propósito: 

+ +
<p>Jogador 1: Chris</p>
+ +

+ +

Nós podemos adicionar um pouco de CSS na mistura, para deixar nosso parágrafo um pouco mais atraente:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}
+ +

+ +

E finalmente, nós podemos adicionar JavaScript para implementar um comportamento dinâmico:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', atualizarNome);
+
+function atualizarNome() {
+  var nome = prompt('Insira um novo nome');
+  para.textContent = 'Jogador 1: ' + nome;
+}
+
+ +

{{ EmbedLiveSample('Definição_de_alto_nível', '100%', 80) }}

+ +

Experimente clicar no botão acima para ver o que acontece (note também que você pode encontrar essa demonstração no GitHub — veja o código fonte ou veja funcionar)!

+ +

JavaScript pode fazer muito mais do que isso — vamos explorar com mais detalhes.

+ +

Então o que ele pode realmente fazer?

+ +

O núcleo da linguagem JavaScript consiste em alguns benefícios comuns da programação que permite a você fazer coisas como:

+ + + +

O que é ainda mais empolgante é a funcionalidade construída no topo do núcleo da linguagem JavaScript. As APIs (Application Programming Interfaces - Interface de Programação de Aplicativos) proveem a você superpoderes extras para usar no seu código JavaScript.

+ +

APIs são conjuntos prontos de blocos de construção de código que permitem que um desenvolvedor implemente programas que seriam difíceis ou impossíveis de implementar. Eles fazem o mesmo para a programação que os kits de móveis prontos para a construção de casas - é muito mais fácil pegar os painéis prontos e parafusá-los para formar uma estante de livros do que para elaborar o design, sair e encontrar a madeira, cortar todos os painéis no tamanho e formato certos, encontrar os parafusos de tamanho correto e depois montá-los para formar uma estante de livros.

+ +

Elas geralmente se dividem em duas categorias.

+ +

APIs de terceiros e APIs do navegador

+ +

APIs de navegadores já vem implementadas no navegador, e são capazes de expor dados do ambiente do computador, ou fazer coisas complexas e úteis. Por exemplo:

+ + + +
+

Nota: Muitas demonstrações acima não vão funcionar em navegadores antigos — quando você for experimentar, é uma boa ideia usar browsers modernos como Firefox, Edge ou Opera para ver o código funcionar. Você vai precisar estudar testes cross browser com mais detalhes quando você estiver chegando perto de produzir código (código real que as pessoas vão usar).

+
+ +

APIs de terceiros não estão implementados no navegador automaticamente, e você geralmente tem que pegar seu código e informações em algum lugar da Web. Por exemplo:

+ + + +
+

Note: Essas APIs são avançadas e nós não vamos falar sobre nenhuma delas nesse módulo.Vo cê pode achar muito mais sobre elas em nosso módulo APIs web no lado cliente.

+
+ +

Tem muito mais coisas disponíveis! Contudo, não fique animado ainda. Você não estará pronto para desenvolver o próximo Facebook, Google Maps ou Instagram depois de estudar JavaScript por 24 horas — há um monte de coisas básicas para estudar primeiro. E é por isso que você está aqui — vamos começar! 

+ +

O que JavaScript está fazendo na sua página web?

+ +

Aqui nós vamos realmente começar a ver algum código, e enquanto fazemos isso vamos explorar o que realmente acontece quando você roda algum código JavaScript na sua página.

+ +

Vamos recaptular brevemente a história do que acontece quando você carrega uma página web em um navegador (falamos sobre isso no nosso artigo Como o CSS funciona). Quando você carrega uma página web no seu navegador, você está executando seu código (o HTML, CSS e JavaScript) dentro de um ambiente de execução (a guia do navegador). Isso é como uma fábrica que pega a matéria prima (o código) e transforma em um produto (a página web).

+ +

+ +

Um uso muito comum do JavaScript é modificar dinamicamente HTML e CSS para atualizar uma interface do usuário, por meio da API do Document Object Model (conforme mencionado acima). Observe que o código em seus documentos web geralmente é carregado e executado na ordem em que aparece na página. Se o JavaScript carregar e tentar executar antes do carregamento do HTML e CSS afetado, poderão ocorrer erros. Você aprenderá maneiras de contornar isso mais adiante neste artigo, na seção Estratégias de carregamento de scripts .

+ +

Segurança do navegador

+ +

Cada guia do navegador tem seu próprio espaço para executar código (esses espaços são chamados de "ambientes de execução", em termos técnicos) — isso significa que na maioria dos casos o código em cada guia está sendo executado separadamente, e o código em uma guia não pode afetar diretamente o código de outra guia — ou de outro website. Isso é uma boa medida de segurança — se esse não fosse o caso, então hackers poderiam começar a escrever código para roubar informações de outros websites, e fazer outras coisas más.

+ +
+

Nota: Há muitas maneiras de trocar código e conteúdo entre diferentes websites/guias de uma forma segura, mas são técnicas avançadas que não serão estudadas nesse curso.

+
+ +

Ordem de execução do JavaScript

+ +

Quando o navegador encontra um bloco de código JavaScript, ele geralmente executa na ordem, de cima para baixo. Isso significa que você precisa ter cuidado com a ordem na qual você coloca as coisas. Por exemplo, vamos voltar ao bloco JavaScript que nós vimos no primeiro exemplo:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', atualizarNome);
+
+function atualizarNome() {
+  ;et nome = prompt('Informe um novo nome:');
+  para.textContent = 'Jogador 1: ' + nome;
+}
+ +

Aqui nós estamos selecionando um parágrafo (linha 1) e anexando a ele um event listener (linha 3). Então, quando o parágrafo recebe um clique, o bloco de código atualizarNome() (linhas 5 a 8) é executado. O bloco de código atualizarNome()(esses tipos de bloco de código reutilizáveis são chamados "funções") pede ao usuário que informe um novo nome, e então insere esse nome no parágrafo, atualizando-o.

+ +

Se você inverte a ordem das duas primeiras linhas de código, ele não fucionaria — em vez disso, você receberia um erro no console do navegador — TypeError: para is undefined. Isso significa que o objeto para não existe ainda, então nós não podemos adicionar um event listener a ele.

+ +
+

Nota: Esse é um erro muito comum — você precisa verificar se os objetos aos quais você se refere no seu código existem antes de você tentar anexar coisas a eles.

+
+ +

Código interpretado x compilado

+ +

Você pode ouvir os termos interpretado e compilado no contexto da programação. JavaScript é uma linguagem interpretada — o código é executado de cima para baixo e o resultado da execução do código é imediatamente retornado. Você não tem que transformar o código em algo diferente antes do navegador executa-lo.

+ +

Linguagens compiladas, por outro lado, são transformadas (compiladas) em algo diferente antes que sejam executadas pelo computador. Por exemplo, C/C++ são compiladas em linguagem Assembly, e depois são executadas pelo computador.

+ +

JavaScript é uma linguagem de programação leve e interpretada. O navegador recebe o código JavaScript em sua forma de texto original e executa o script a partir dele. Do ponto de vista técnico, a maioria dos intérpretes modernos de JavaScript realmente usa uma técnica chamada compilação just-in-time para melhorar o desempenho; o código-fonte JavaScript é compilado em um formato binário mais rápido enquanto o script está sendo usado, para que possa ser executado o mais rápido possível. No entanto, o JavaScript ainda é considerado uma linguagem interpretada, pois a compilação é manipulada em tempo de execução, e não antes.

+ +

Há vantagens em ambos os tipos de linguagem, mas nós não iremos discutir no momento.

+ +

Lado do servidor x Lado do cliente

+ +

Você pode também ouvir os termos lado do servidor (server-side) e lado do cliente (client-side), especialmente no contexto de desenvolvimento web. Códigos do lado do cliente são executados no computador do usuário — quando uma página web é visualizada, o código do lado do cliente é baixado, executado e exibido pelo navegador. Nesse módulo JavaScript nós estamos explicitamente falando sobre JavaScript do lado do cliente.

+ +

Códigos do lado do servidor, por outro lado, são executados no servidor e o resultado da execução é baixado e exibido no navegador. Exemplos de linguagens do lado do servidor populares incluem PHP, Python, Ruby, e ASP.NET. E JavaScript! JavaScript também pode ser usada como uma linguagem server-side, por exemplo, no popular ambiente Node.js — você pode encontrar mais sobre JavaScript do lado do servidor no nosso tópico Websites dinâmicos - Programação do lado do servidor.

+ +

Código dinâmico x estático

+ +

A palavra dinâmico é usada para descrever tanto o JavaScript client-side como o server-side — essa palavra se refere a habilidade de atualizar a exibição de uma página web/app para mostrar coisas diferentes em circunstâncias diferentes, gerando novo conteúdo como solicitado. Código do lado do servidor dinamicamente gera novo conteúdo no servidor, puxando dados de um banco de dados, enquanto que JavaScript do lado do cliente dinamicamente gera novo conteúdo dentro do navegador do cliente, como criar uma nova tabela HTML com dados recebidos do servidor e mostrar a tabela em uma página web exibida para o usuário. Os significados são ligeiramente diferente nos dois contextos, porém relacionados, e ambos (JavaScript server-side e client-side) geralmente trabalham juntos.

+ +

Uma página web sem atualizações dinâmicas é chamada de estática — ela só mostra o mesmo conteúdo o tempo todo.

+ +

Como você adiciona JavaScript na sua página?

+ +

O JavaScript é inserido na sua página de uma maneira similar ao CSS. Enquanto o CSS usa o elemento {{htmlelement("link")}} para aplicar folhas de estilo externas e o elemento {{htmlelement("style")}} para aplicar folhas de estilo internas, o JavaScript só precisa de um amigo no mundo do HTML — o elemento {{htmlelement("script")}}. Vamos aprender como funciona.

+ +

JavaScript interno

+ +
    +
  1. Antes de tudo, faça uma cópia local do nosso arquivo de exemplo aplicando-javascript.html. Salve-o em alguma pasta, de uma forma sensata.
    2. +
  2. Abra o arquivo no seu navegador web e no seu editor de texto. Você verá que o HTML cria uma simples página web contendo um botão clicável.
    3. +
  3. Agora, vá até o seu editor de texto e adicione o código a seguir antes da tag de fechamento </body>: + 
    <script>
+
+  // O JavaScript fica aqui
+
+</script>
    +
    4. +
  4. Agora nós vamos adicionar um pouco de JavaScript dentro do nosso elemento {{htmlelement("script")}} para que a página faça algo mais interessante — adicione o seguinte código abaixo da linha "// O JavaScript fica aqui": + 
    function criarParagrafo() {
+  let para = document.createElement('p');
+  para.textContent = 'Você clicou no botão!';
+  document.body.appendChild(para);
+}
+
+const botoes = document.querySelectorAll('button');
+
+for(var i = 0; i < botoes.length ; i++) {
+  botoes[i].addEventListener('click', criarParagrafo);
+}
    +
    5. +
  5. Salve seu arquivo e recarregue a página — agora você deveria ver que quando você clique no botão, um novo parágrafo é gerado e colocado logo abaixo.
    6. +
+ +
+

Nota: Se seu exemplo não parece funcionar, leia cada passo novamente e confira que você fez tudo certo. Você salvou sua cópia local do código inicial como um arquivo .html? Você adicionou o elemento {{htmlelement("script")}} imediatamente antes da tag </body>? Você digitou o código JavaScript exatamente como ele está sendo mostrado? JavaScript é uma linguagem case sensitive (isso significa que a linguagem vê diferença entre letras maiúsculas e minúsculas) e muito confusa, então você precisa digitar a sintaxe exatamente como foi mostrada, senão não vai funcionar.

+
+ +
+

Nota: Você pode ver essa versão no GitHub como apicando-javascript-interno.html (veja funcionar também).

+
+ +

JavaScript externo

+ +

Isso funciona muito bem, mas e se nós quiséssemos colocar nosso JavaScript em um arquivo externo? Vamos explorar isso agora.

+ +
    +
  1. Primeiro, crie um novo arquivo na mesma pasta que está o arquivo HTML de exemplo. Chame-o de script.js — tenha certeza de que o nome do arquivo tem a extensão .js, pois é assim que ele será reconhecido como JavaScript.
    2. +
  2. Agora substitua o elemento atual {{htmlelement("script")}} pelo seguinte código: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Em script.js, adidione o seguinte script: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'Você clicou no botão!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Salve e atualize seu navegador, e você deverá ver a mesma coisa! Funciona igualmente, mas agora nós temos o JavaScript em um arquivo externo. Isso é geralmente uma coisa boa em termos de organização de código, e faz com que seja possível reutilizar o código em múltiplos arquivos HTML. Além disso, o HTML fica mais legível sem grandes pedaços de script no meio dele.
    5. +
+ +
+

Nota: Você pode ver essa versão no GitHub como aplicando-javascript-externo.html e script.js (veja funcionar também).

+
+ +

Manipuladores de JavaScript inline

+ +

Note que às vezes você vai encontrar código JavaScript escrito dentro do HTML. Isso deve ser algo como:

+ +
+
function criarParagrafo() {
+  let para = document.createElement('p');
+  para.textContent = 'Você clicou o botao!';
+  document.body.appendChild(para);
+}
+ +
+
<button onclick="criarParagrafo()">Me clique!</button>
+
+ +

Você pode tentar essa versão na nossa demonstração abaixo.

+ +

+ +

Essa demonstração tem exatamente a mesma funcionalidade que vimos nas primeiras duas seções, exceto que o elemento {{htmlelement("button")}} inclui um manipulador inline onclick para fazer a função ser executada quando o botão é clicado.

+ +

Contudo, por favor, não faça isso. É uma má prática poluir seu HTML com JavaScript, e isso é ineficiente — você teria que incluir o atributo onclick="criarParagrafo()" em todo botão que você quisesse aplicar JavaScript.

+ +

Usando uma estrutura feita de puro JavaScript permite a você selecionar todos os botões usando uma instrução. O código que nós usamos acima para servir a esse propósito se parece com isso:

+ +
const botoes = document.querySelectorAll('button');
+
+for(var i = 0; i < botoes.length ; i++) {
+  botoes[i].addEventListener('click', criarParagrafo);
+}
+ +

Isso talvez parece ser mais do que o atributo onclick, mas isso vai funcionar para todos os botões, não importa quantos tem na página, e quantos forem adicionados ou removidos. O JavaScript não precisará ser mudado.

+ +
+

Nota: Tente editar a sua versão do arquivo aplicar-javascript.html, adicionando alguns botões a mais. Quando você recarregar, você deverá ver que todos os botões, quando clicados, irão criar parágrafos. Agradável, não?

+
+ +

Estratégias para o carregamento de scripts

+ +

Há um considerável número de problemas envolvendo o carregamento de scripts na ordem correta. Infelizmente, nada é tão simples quanto parece ser! Um problema comum é que todo o HTML de uma página é carregado na ordem em que ele aparece. Se você estiver usando Javascript para manipular alguns elementos da página (sendo mais preciso, manipular o Document Object Model), seu código não irá funcionar caso o JavaScript for carregado e executado antes mesmo dos elementos HTML estarem disponíveis.

+ +

Nos exemplos acima, tanto nos scripts internos ou externos, o JavaScript é carregado e acionado dentro do cabeçalho do documento, antes do corpo da página ser completamente carregado. Isso poderá causar algum erro. Assim, temos algumas soluções para isso.

+ +

No exemplo interno, você pode ver essa estrutura em volta do código:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

Isso é um event listener (ouvidor de eventos), que ouve e aguarda o disparo do evento "DOMContentLoaded" vindo do browser, evento este que significa que o corpo do HTML está completamente carregado e pronto. O código JavaScript que estiver dentro desse bloco não será executado até que o evento seja disparado, portanto, o erro será evitado (você irá aprender sobre eventos mais tarde).

+ +

No exemplo externo, nós usamos um recurso moderno do JavaScript para resolver esse problema: Trata-se do atributo defer, que informa ao browser para continuar renderizando o conteúdo HTML uma vez que a tag <script> foi atingida.

+ +
<script src="script.js" defer></script>
+ +

Neste caso, ambos script e HTML irão carregar de forma simultânea e o código irá funcionar.

+ +
+

Nota: No caso externo, nós não precisamos utilizar o evento DOMContentLoaded porque o atributo defer resolve o nosso problema. Nós não utilizamos defer como solução para os exemplos internos pois defer funciona apenas com scripts externos.

+
+ +

Uma solução à moda antiga para esse problema era colocar o elemento script bem no final do body da página (antes da tag </body>). Com isso, os scripts iriam carregar logo após todo o conteúdo HTML. O problema com esse tipo de solução é que o carregamento/renderização do script seria completamente bloqueado até que todo o conteúdo HTML fosse analisado. Em sites de maior escala, com muitos scripts, essa solução causaria um grande problema de performance e deixaria o site lento. 

+ +

async e defer

+ +

Atualmente, há dois recursos bem modernos que podermos usar para evitar o problema com o bloqueio de scripts — async e defer (que vimos acima). Vamos ver as diferenças entre esses dois?

+ +

Os scripts que são carregados usando o atributo async (veja abaixo) irão baixar o script sem bloquear a renderização da página e irão executar imediatamente após o script terminar de ser disponibilizado. Nesse modo você não tem garantia nenhuma que os scripts carregados irão rodar em uma ordem específica, mas saberá que dessa forma eles não irão impedir o carregamento do restante da página. O melhor uso para o async é quando os scripts de uma página rodam de forma independente entre si e também não dependem de nenhum outro script.

+ +

Por exemplo, se você tiver os seguintes elementos script:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

Você não pode garantir que o script. jquery.js carregará antes ou depois do script2.js e script3.js . Nesse caso, se alguma função desses scripts dependerem de algo vindo do jquery, ela produzirá um erro pois o jquery ainda não foi definido/carregado quando os scripts executaram essa função.

+ +

async deve ser usado quando houver muitos scripts rodando no background, e você precisa que estejam disponíveis o mais rápido possível. Por exemplo, talvez você tenha muitos arquivos de dados de um jogo para carregar que serão necessários assim que o jogo iniciar, mas por enquanto, você só quer entrar e ver a tela de carregamento, a do titulo do jogo e o lobby, sem ser bloqueado pelo carregamento desses scripts.

+ +

Scripts que são carregados utilizando o atributo defer (veja abaixo) irão rodar exatamente na ordem em que aparecem na página e serão executados assim que o script e o conteúdo for baixado.

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Todos os scripts com o atributo defer irão carregar na ordem que aparecem na página. No segundo exemplo, podemos ter a certeza que o script jquery.js irá carregar antes do script2.js e script3.js e o script2.js irá carregar antes do script3.js. Os scripts não irão rodar sem que antes todo o conteúdo da página seja carregado, que no caso, é muito útil se os seus scripts dependem de um DOM completamente disponibilizado em tela (por exemplo, scripts que modificam um elemento).

+ +

Resumindo:

+ + + +

Comentários

+ +

Assim como HTML e CSS, é possível escrever comentários dentro do seu código JavaScript que serão ignorados pelo navegador, e existirão simplesmente para prover instruções aos seus colegas desenvolvedores sobre como o código funciona (e pra você, se você tiver que voltar ao seu código depois de 6 meses e não se lembrar do que fez). Comentários são muito úteis, e você deveria usá-los frequentemente, principalmente quando seus códigos forem muito grandes. Há dois tipos:

+ + + +

Então, por exemplo, você poderia fazer anotações na nossa última demonstração de código JavaScript, da seguinte forma:

+ +
// Função: Cria um novo parágrafo e o insere no fim do arquivo HTML.
+
+function criarParagrafo() {
+  var para = document.createElement('p');
+  para.textContent = 'Você clicou no botão!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Captura referências de todos os botões na página e armazena isso em um array.
+  2. Vai até todos os botões e adiciona um event listener click a cada um deles.
+
+  Quando cada botão é clicado, a função criarParagrafo() será executada.
+*/
+
+const botoes = document.querySelectorAll('button');
+
+for(var i = 0; i < botoes.length ; i++) {
+  botoes[i].addEventListener('click', criarParagrafo);
+}
+ +
+

Nota: Em geral mais comentários são melhores que menos, porém você deve tomar cuidado para não adicionar comentários de mais tentando explicar o que uma variável é (o nome da sua variável deve ser mais intuitivo), ou tentando explicar uma operação simples (talvez seu código seja muito complicado denecessariamente).

+
+ +

Sumário

+ +

Então, esse foi o seu primeiro passo no mundo do JavaScript. Nós iniciamos apenas com teoria, então te ensinamos porque usar JavaScript e que tipo de coisa você pode fazer com ele. Pelo caminho você viu alguns códigos de exemplo e aprendeu como JavaScript se encaixa com o resto do código do seu site, entre outras coisas.

+ +

O JavaScript talvez pareça um pouco assustador agora, mas não se preocupe — nesse curso você será guiado passo a passo, e tudo vai começar a fazer sentido. No próximo artigo vamos mergulhar direto para a prática, levando você a construir seu próprio código JavaScript.

+ +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

Neste módulo:

+ + +
diff --git a/files/pt-br/learn/javascript/howto/index.html b/files/pt-br/learn/javascript/howto/index.html new file mode 100644 index 0000000000..c06dbd4d3f --- /dev/null +++ b/files/pt-br/learn/javascript/howto/index.html @@ -0,0 +1,290 @@ +--- +title: Solve common problems in your JavaScript code +slug: Aprender/JavaScript/Howto +translation_of: Learn/JavaScript/Howto +--- +
{{LearnSidebar}}
+ +

Os links a seguir apontam soluções para problemas comuns do dia a dia, você precisará consertar em ordem para que seu código javascript execute corretamente.

+ +

Erros comuns de iniciantes

+ +

Digitação correta and casing

+ +

Se o seu código não funciona e/ou se seu navegador indicar que algo está indefinido, verifique se você declarou todas os nomes de suas variáveis, nomes de funções, etc. corretamente.

+ +

Algumas funções comuns dos navegadores que causam problema são:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorretoIncorreto
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posições de ponto e vírgula

+ +

Você precisa ter certeza que você não colocou nenhum ponto e vírgula incorretamente. Por exemplo:

+ + + + + + + + + + + + +
CorrectWrong
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funções

+ +

Há uma série de coisas que podem dar errado com funções

+ +

Um dos erros mais comuns é declarar a função, mas não chama-la em lugar nenhum. Por exemplo:

+ +
function myFunction() {
+  alert('This is my function.');
+};
+ +

Este código não fará nada a menos que você o chame, por exemplo com

+ +
myFunction();
+ +

Escopo da função

+ +

Lembre-se que funções tem seu próprio escopo — você não pode acessar um conjunto de valores de variáveis ​​dentro de uma função fora da função, a não ser que você tenha declarado a variável globalmente (i.e. não dentro de nenhuma função), ou retorne o valor or retorne o valor fora da função

+ +

Executar o código antes de uma declaração de retorno

+ +

Remember also that when you return a value out of a function, the JavaScript interpreter exits the function — no code declared after the return statement will run.

+ +

In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".

+ +

Object notation versus normal assignment

+ +

When you assign something normally in JavaScript, you use a single equals sign, e.g.:

+ +
var myNumber = 0;
+ +

This doesn't work in Objects, however — with objects you need to separate member names from their values using colons, and separate each member with a comma, for example:

+ +
var myObject = {
+  name : 'Chris',
+  age : 38
+}
+ +

Definições básicas

+ +
+
+ +
+ +
+ +
+
+ +

Casos de uso básicos

+ +
+
+

Geral

+ + + +

Variáveis

+ + + +

Matemática

+ + + +

Strings

+ + +
+ +
+

Arrays

+ + + +

Debugging JavaScript

+ + + +

For more information on JavaScript debugging, see Handling common JavaScript problems; also see Other common errors for a description of common errors.

+ +

Making decisions in code

+ + + +

Looping/iteration

+ + +
+
+ +

Intermediate use cases

+ +
+
+

Functions

+ + + +

Objects

+ + + +

JSON

+ + +
+ +
+

Eventos

+ + + +

Javascript Orientado a objetos

+ + + +

Web APIs

+ + + +

 

+
+
diff --git a/files/pt-br/learn/javascript/index.html b/files/pt-br/learn/javascript/index.html new file mode 100644 index 0000000000..d1a9db5057 --- /dev/null +++ b/files/pt-br/learn/javascript/index.html @@ -0,0 +1,78 @@ +--- +title: JavaScript +slug: Aprender/JavaScript +tags: + - Beginner + - CodingScripting + - Iniciante Javascript + - JavaScript + - NeedsContent + - Principiante + - Tópico + - modulo +translation_of: Learn/JavaScript +--- +

{{LearnSidebar}}

+ +

{{glossary('JavaScript')}} é uma linguagem de programação que permite implementar funcionalidades mais complexas em páginas web. Sempre que uma página web faz mais do que apenas mostrar informações estáticas para você - ela mostra em tempo real conteúdos atualizados, mapas interativos, animações gráficas em 2D/3D, vídeos, etc. -  você pode apostar que o Javascript provavelmente está envolvido.

+ +

O caminho para o aprendizado

+ +

O JavaScript não é tão fácil de aprender como outras linguagens, como HTML e CSS, que são outros dois pilares do desenvolvimento front-end. Antes de tentar aprender JavaScript, é altamente recomendável que você aprenda e se familiarize com pelo menos estas duas tecnologias primeiro. Você pode começar através dos seguintes módulos:

+ + + +

Possuir experiência em outras linguagens de programação pode também ser útil.

+ +

Depois de aprender o básico de JavaScript, você estará apto a estudar tópicos mais avançados, como:

+ + + +

Módulos

+ +

Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.

+ +
+
Primeiros passos em JavaScript
+
Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.
+
Blocos de codigo JavaScript
+
Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código, como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.
+
Introdução a objetos em JavaScript
+
Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.
+
JavaScript Assíncrono
+
Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.
+
API's Web do lado cliente
+
Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.
+
+ +

Aprofundando

+ +

Uma vez que você se acostumar com o mundo do JavaScript aqui estão alguns outros módulos em que você pode mergulhar:

+ +
+
Biblioteca de referência JavaScript
+
Em nossa extensa biblioteca de referência você encontrará cada aspecto de Javascript tratado em detalhes: objetos globais, operadores, declarações e funções.
+
Introdução à Orientação a Objetos (OO) em JavaScript
+
Introdução aos conceitos de {{glossary("OOP","Programação orientada a objetos")}} em JavaScript.
+
+ +

Resolvendo problemas comuns com Javascript

+ +

Use Javascript para resolver problemas comuns, este link proporciona contéudos explicativos de como usar o JavaScript para solucionar problemas muito comuns ao criar uma página da Web.

+ +

Veja também

+ +
+
JavaScript
+
O ponto de entrada principal para a documentação básica do JavaScript no MDN - é aqui que você encontrará extensos documentos de referência em todos os aspectos do JavaScript e alguns tutoriais avançados destinados a JavaScripters experientes.
+
Matemática do programador
+
Uma excelente série de vídeos que ensina a matemática necessária para ser um bom programador, por Keith Peters.
+
+
diff --git a/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..b0e0c0d534 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,202 @@ +--- +title: Adicionando recursos à nossa demonstração de bolas pulantes +slug: Aprender/JavaScript/Objetos/Adding_bouncing_balls_features +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

Nesta avaliação, espera-se que você use a demonstração de bolas saltantes do artigo anterior como ponto de partida e adicione alguns recursos novos e interessantes a ela.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of JavaScript objects and object-oriented constructs
+ +

Ponto de partida

+ +

Para iniciar essa avaliação, faça uma cópia local de index-finished.html, style.css, e main-finished.js do nosso último artigo em um novo diretório em seu computador local.

+ +
+

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <script>/<style> elements inside the HTML page.

+
+ +

Resumo do projeto

+ +

Nossa demo com bola saltitante é divertida, mas agora queremos torná-la um pouco mais interativa, adicionando um círculo maligno controlado pelo usuário, que vai comer as bolas se elas forem capturadas. Também queremos testar suas habilidades de construção de objetos criando um objeto Shape() genérico do qual nossas bolas e círculo maligno podem herdar. Por fim, queremos adicionar um contador de pontuação para rastrear o número de bolas a serem capturadas.

+ +

A imagem seguinte dá-lhe uma ideia do que deve ser o programa final:

+ +

+ + + +

Para lhe dar mais uma ideia, dê uma olhada no exemplo finalizado (não espreitar o código-fonte!)

+ +

Passos para concluir

+ +

As seções a seguir descrevem o que você precisa fazer.

+ +

Criando nossos novos objetos

+ +

Primeiro de tudo, altere seu construtor Ball() existente para que ele se torne um construtor Shape() e adicione um novo construtor Ball():

+ +
    +
  1. O construtor Shape()  deve definir as propriedades x, y, velX, e velY da mesma maneira que o construtor Ball() fez originalmente, mas não as propriedades de color e size.
    2. +
  2. Também deve definir uma nova propriedade chamada exists, que é usada para rastrear se as bolas existem no programa (não foram comidas pelo círculo do mal). Este deve ser um booleano (true/false).
    3. +
  3. O construtor Ball() deve herdar as propriedades x, y, velX, velY, e exists do construtor Shape().
    4. +
  4. Ele também deve definir uma propriedade color e uma size, como fez o construtor  Ball() original.
    5. +
  5. Lembre-se de definir o prototype e o constructor do construtor Ball() adequadamente.
    6. +
+ +

As definições do método ball draw(), update(), e collisionDetect() devem permanecer exatamente iguais às anteriores.

+ +

Você também precisa adicionar um novo parâmetro à nova chamada de construtor new Ball() ( ... ) — o parâmetro exists deve ser o quinto parâmetro, e deve receber um valor true.

+ +

Neste ponto, tente recarregar o código — ele deve funcionar da mesma forma que antes, com nossos objetos redesenhados.

+ +

Definindo EvilCircle()

+ +

Agora é hora de conhecer o cara mau — o EvilCircle()! Nosso jogo só envolverá um círculo maligno, mas ainda vamos defini-lo usando um construtor que herda de Shape() para lhe dar alguma prática. Você pode querer adicionar outro círculo ao aplicativo mais tarde, que pode ser controlado por outro jogador, ou ter vários círculos malignos controlados por computador. Você provavelmente não vai dominar o mundo com um único círculo maligno, mas fará por essa avaliação.

+ +

O construtor EvilCircle() deve herdar  x, y, velX, velY, e exists de Shape(), mas velX e velY devem sempre ser iguais a 20.

+ +

Você deveria fazer algo como Shape.call(this, x, y, 20, 20, exists);

+ +

Ele também deve definir suas próprias propriedades, da seguinte maneira:

+ + + +

Novamente, lembre-se de definir suas propriedades herdadas como parâmetros no construtor e defina as propriedades prototype e constructor corretamente.

+ +

Definindo os métodos de EvilCircle()

+ +

EvilCircle() deve ter quatro métodos, conforme descrito abaixo.

+ +

draw()

+ +

Este método tem o mesmo propósito que o método draw() de Ball(): Ele desenha a instância do objeto na tela. Ele funcionará de maneira muito semelhante, portanto, você pode começar copiando a definição Ball.prototype.draw. Você deve então fazer as seguintes alterações:

+ + + +

checkBounds()

+ +

Este método fará a mesma coisa que a primeira parte da função update() do Ball() — olhe para ver se o círculo do mal vai sair da borda da tela, e pare de fazer isso. Novamente, você pode simplesmente copiar a definição de Ball.prototype.update, mas há algumas alterações que você deve fazer:

+ + + +

setControls()

+ +

Esse método adicionará um ouvinte de evento  onkeydown ao objeto window para que, quando determinadas teclas do teclado forem pressionadas, possamos mover o círculo maligno ao redor. O bloco de código a seguir deve ser colocado dentro da definição do método:

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

Assim, quando uma tecla é pressionada, a propriedade keyCode é consultada para ver qual tecla é pressionada. Se for um dos quatro representados pelos códigos de teclas especificados, o círculo maligno se moverá para a esquerda / direita / para cima / para baixo.

+ + + +

collisionDetect()

+ +

Este método irá agir de forma muito semelhante ao método collisionDetect() do Ball(), então você pode usar uma cópia disso como base deste novo método. Mas há algumas diferenças:

+ + + +

Trazendo o círculo do mal para o programa

+ +

Agora nós definimos o círculo do mal, precisamos realmente fazer isso aparecer em nossa cena. Para fazer isso, você precisa fazer algumas alterações na função loop().

+ + + +

Implementando o contador de pontuação

+ +

Para implementar o contador de pontuação, siga os seguintes passos:

+ +
    +
  1. No seu arquivo HTML, adicione um elemento {{HTMLElement("p")}} logo abaixo do elemento {{HTMLElement("h1")}} contendo o texto "Contagem de bolas:".
    2. +
  2. No seu arquivo CSS, adicione a seguinte regra na parte inferior: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. Em seu JavaScript, faça as seguintes atualizações: +
      +
    • Crie uma variável que armazene uma referência ao parágrafo.
      • +
    • Mantenha uma contagem do número de bolas na tela de alguma forma.
      • +
    • Incrementar a contagem e exibir o número atualizado de bolas cada vez que uma bola é adicionada à cena.
      • +
    • Decrementar a contagem e exibir o número atualizado de bolas cada vez que o círculo maligno come uma bola (faz com que ele não exista).
      • +
    +
    4. +
+ +

Dicas e sugestões

+ + + +

Avaliação

+ +

Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então você pode obter o guia de marcação com bastante facilidade, perguntando no tópico de discussão para este exercício, ou no canal de #mdn IRC da Mozilla IRC. Tente o exercício primeiro — não há nada a ganhar com a trapaça!

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

 

+ +

Neste módulo

+ + + +

 

diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..ef9cb18c95 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: O básico sobre objetos JavaScript +slug: Aprender/JavaScript/Objetos/Básico +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Neste artigo, veremos a sintaxe fundamental de objetos JavaScript e revisitaremos alguns recursos JavaScript vistos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já utilizou são objetos.

+ + + + + + + + + + + + +
Pré-requisitos:Interação básica com o computador, entendimento básico de HTML e CSS, familiaridade com o básico de JavaScript (ver Primeiros passos e Elementos construtivos).
Objetivo:Entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com o JavaScript ("quase tudo é objeto"), e como começar a trabalhar com objetos JavaScript.
+ +

Objeto, noções básicas

+ +

Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.

+ +

Para começar, faça uma cópia do nosso arquivo oojs.html. Isto contém muito pouco — um elemento {{HTMLElement("script")}} para escrevermos nosso código-fonte. Vamos usar isto como base para explorar a sintaxe básica do objeto. Ao trabalhar com este exemplo, você deve ter seu console de ferramentas de desenvolvedor JavaScript aberto e pronto para digitar alguns comandos.

+ +

Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:

+ +
var pessoa = {};
+ +

Se você inserir pessoa no seu console JS e pressionar o botão, deverá obter o seguinte resultado:

+ +
[object Object]
+ +

Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:

+ +
var pessoa = {
+  nome: ['Bob', 'Smith'],
+  idade: 32,
+  sexo: 'masculino',
+  interesses: ['música', 'esquiar'],
+  bio: function() {
+    alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' + this.idade + ' anos de idade. Ele gosta de ' + this.interesses[0] + ' e ' + this.interesses[1] + '.');
+  },
+  saudacao: function() {
+    alert('Oi! Eu sou ' + this.nome[0] + '.');
+  }
+};
+
+ +

Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:

+ +
pessoa.nome
+pessoa.nome[0]
+pessoa.idade
+pessoa.interesses[1]
+pessoa.bio()
+pessoa.saudacao()
+ +

Agora você tem alguns dados e funcionalidades dentro de seu objeto e é capaz de acessá-los com uma sintaxe simples e agradável!

+ +
+

Nota: Se você está tendo problemas para fazer isto funcionar, tente comparar seu código com a nossa versão — veja oojs-finished.html (ou veja um exemplo funcionando). O exemplo lhe dará uma tela em branco, mas tudo bem — novamente, abra seu devtools e tente digitar os comandos acima para ver a estrutura do objeto.

+
+ +

Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um  com um nome (ex.: nome e idade vistos acima), e um valor (ex.: ['Bob', 'Smith'] e 32). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:

+ +
var nomeDoObjeto = {
+  nomeMembro1: valorMembro1,
+  nomeMembro2: valorMembro2,
+  nomeMembro3: valorMembro3
+};
+ +

O valor de um membro do objeto pode ser praticamente qualquer coisa. Em nosso objeto pessoa, temos uma string, um número, dois arrays e duas functions. Os primeiros quatro são data items (dados) e são referenciados como propriedades do objeto. Enquanto os dois últimos ítens são funções que permitem que o objeto faça algo com esses dados. São chamados de métodos do objeto.

+ +

Um objeto como esse é chamado de  objeto literal — ao pé da letra, escrevemos o conteúdo do objeto conforme o criamos. Isto está em contraste com objetos instanciados de classes, que veremos mais adiante.

+ +

É muito comum criar um objeto usando um objeto literal quando você deseja transferir uma série de itens de dados relacionados estruturados de alguma maneira, por exemplo, enviando uma solicitação para o servidor para ser colocado em um banco de dados. Enviar um único objeto é muito mais eficiente do que enviar vários itens individualmente, e é mais fácil trabalhar com um array, quando você deseja identificar itens individuais pelo nome.

+ +

Notação de ponto

+ +

Acima, você acessou as propriedades de objetos e métodos usando notação de ponto. O objeto nome (pessoa) atua como namespace (espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa encapsulada dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo: 

+ +
pessoa.idade
+pessoa.interesse[1]
+pessoa.bio()
+ +

Sub-namespaces

+ +

É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:

+ +
nome: ['Bob', 'Smith'],
+ +

para

+ +
nome : {
+  primeiro: 'Bob',
+  ultimo: 'Smith'
+},
+ +

Aqui estamos efetivamente criando um sub-namespace. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:

+ +
pessoa.nome.primeiro
+pessoa.nome.ultimo
+ +

Importante: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de

+ +
nome[0]
+nome[1]
+ +

para

+ +
nome.primeiro
+nome.ultimo
+ +

Caso contrário seus métodos não funcionarão.

+ +

Notação de colchetes

+ +

Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:

+ +
pessoa.idade
+pessoa.nome.primeiro
+ +

Você pode usar:

+ +
pessoa['idade']
+pessoa['nome']['primeiro']
+ +

Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de arrays associativos — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.

+ +

Setando membros do objeto

+ +

Até agora nós apenas procuramos receber (ou apanhar) membros de objetos — podemos também setar (atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:

+ +
pessoa.idade = 45;
+pessoa['nome']['ultimo'] = 'Cratchit';
+ +

Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:

+ +
pessoa.idade
+pessoa['nome']['ultimo']
+ +

Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:

+ +
pessoa['olhos'] = 'castanho'.
+pessoa.despedida = function() { alert( "Adeus a todos!" ); }
+ +

Podemos testar nossos novos membros:

+ +
pessoa['olhos'];
+pessoa.despedida();
+ +

Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

Podemos, então, adicionar esse novo nome e valor ao objeto pessoa assim:

+ +
pessoa[myDataName] = myDataValue;
+ +

Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto pessoa :

+ +
var myDataName = 'altura';
+var myDataValue = '1.75m';
+pessoa[myDataName] = myDataValue;
+ +

Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:

+ +
pessoa.altura
+ +

Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.

+ +

O que é o "this"?

+ +

Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:

+ +
saudacao: function(){
+  alert("Oi! Meu nome é " + this.nome.primeiro + ".");
+}
+ +

Você deve estar se perguntando o que é o "this". A palavra-chave this se refere ao objeto atual em que o código está sendo escrito — nesse caso o this se refere a pessoa. Então por que simplesmente não escrever pessoa? Como verá no artigo Orientaçã a objeto em JavaScript para iniciantes, quando começamos a criar funções construtoras, etc, o this é muito útil — sempre lhe assegurará que os valores corretos estão sendo usados quando o contexto de um mebro muda (exemplo: duas instâncias diferentes do objeto pessoa podem ter diferentes nomes, mas vão querer usar seu próprio nome ao usar a saudação).

+ +

Vamos ilustrar o que queremos dizer com um par de objetos pessoa:

+ +
var pessoa1 = {
+  nome: 'Chris',
+  saudacao: function() {
+    alert('Oi! Meu nome é ' + this.nome + '.');
+  }
+}
+
+var pessoa2 = {
+  nome: 'Brian',
+  saudacao: function() {
+    alert('Oi! Meu nome é ' + this.nome + '.');
+  }
+} 
+ +

Neste caso, pessoa1.saudacao() gerará "Oi! Meu nome é Chris."; No entanto, pessoa2.saudacao() retornará "Oi! Meu nome é Brian.", mesmo que os códigos dos métodos sejam idênticos. Como dissemos antes, o this é igual ao código do objeto dentro dele — não é exatamente útil quando estamos escrevendo objetos literais na mão, mas é realmente incrível quando adicionamos objetos gerados dinamicamente (por exemplo usando construtores). Tudo ficará mais claro mais para frente.

+ +

Você vem usando objetos o tempo todo

+ +

Enquanto passava por esses exemplos, você provavelmente andou pensando que essa notação de ponto que estamos usando é muito familiar. Isso é porque você vem usando isso durante todo o curso! Todas as vezes que trabalhamos num exemplo que usa uma API interna do navegador ou objetos Javascript, estamos usando objetos, porque esses recursos são construídos usando exatamente o mesmo tipo de estrutura de objetos que vimos aqui, embora mais complexos do que nossos exemplos básicos.

+ +

Então quando usamos métodos de strings como:

+ +
minhaString.split(',');
+ +

Estamos usando um método disponível na instância da class String. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de String, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.

+ +

Quando você acessa o document object model usando linhas como estas:

+ +
var minhaDiv = document.createElement('div');
+var meuVideo = document.querySelector('video');
+ +

Você está usando métodos disponíveis na instância da class Document. Cada vez que a página é recarrecada, uma instância de Document é criada, chamando document, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.

+ +

O mesmo pode ser dito de basicamente qualquer outro objeto/API embutido que esteja usando — Array, Math, etc.

+ +

Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a API de Notificações — que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:

+ +
var minhaNotificacao = new Notification('Hello!');
+ +

Novamente, olharemos constructores num artigo mais na frente.

+ +
+

Nota: É útil pensar sobre como os objetos se comunicam passando mensagens - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.

+
+ +

Teste suas habilidades !

+ +

Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante  — veja  Test your skills: Object basics.

+ +

Resumo

+ +

Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto pessoa como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.

+ +

No próximo artigo vamos começar a ver a teoria de programação orientada a objetos (OOP) e em como suas técnicas podem ser usadas em Javascript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

Nesse módulo

+ + diff --git a/files/pt-br/learn/javascript/objects/index.html b/files/pt-br/learn/javascript/objects/index.html new file mode 100644 index 0000000000..4c19a1956b --- /dev/null +++ b/files/pt-br/learn/javascript/objects/index.html @@ -0,0 +1,44 @@ +--- +title: Introdução a objetos em Javascript +slug: Aprender/JavaScript/Objetos +tags: + - Iniciante + - JavaScript + - Objetos +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

Em JavaScript, quase tudo é objeto. Desde as funcionalidades padrão, como strings e arrays, até as APIs para navegadores baseadas na linguagem. Até você pode criar seus próprios objetos. Você pode encapsular funções e variáveis relacionadas de uma forma eficiente. Os objetos agem como uma espécie de manipuladores de dados. Compreender a natureza da orientação a objetos do JavaScript é crucial para aprofundar os conhecimentos acerca da linguagem. Por isso, nós elaboramos esse módulo para auxiliá-lo. Ensinaremos a teoria de objetos em detalhes. Crie seus próprios objetos!

+ +

Antes de iniciar este módulo, você deve possuir alguma familiaridade com HTML e CSS. Se não possui, antes de continuar os estudos dos Objetos em Javascript, indicamos os módulos Introdução ao HTML e Introdução ao CSS .

+ +

Você precisa possuir também alguma familiaridade com os conceitos básicos de Javascript. Para isso indicamos o módulo Primeitos Passos: JavaScript e Blocos de Construção do JavaScript.

+ +
+

Nota: Se você está trabalhando em um computador/tablet/outros equipamentos , ao qual  não é possível  criar seus próprios arquivos , você pode testar (em grande parte) os nossos códigos de exemplo,  em um editor de código online , tal como o JSBin  ou o Thimble .

+
+ +

Guias

+ +
+
Objetos: O básico.
+
No primeiro artigo sobre objetos em Javascript, vamos analisar a sintaxe básica de objetos e rever algumas caracterísitcas. Nós já notamos, como mencionado anteriomente, que muitas funcionalidades que você já teve algum contato são, na verdade, Objetos .
+
JavaScript Orientado a Objetos para iniciantes
+
Com pelo menos o básico, agora vamos focar na Orientação a Objetos JavaScript  (OOJS) — este artigo cobre uma visão básica da teoria da Programação Orientada a Objetos (POO). Depois iremos explorar como o JavaScript emula classes de objetos via funções construtoras e como criar instâncias de objetos.
+
Prototipação de Objetos
+
Prototypes é o mecanismo pelo qual os objetos JavaScript herdam características de outros e como eles funcionam de uma forma diferente dos mecanismos de herança de linguagens de programação clássicas. Neste artigo, vamos explorar essas diferenças, explicar como a cadeia de protótipos trabalha e perceber como a propriedade prototype pode ser usada para adicionar métodos a contrutores existentes.
+
Herança em JavaScript
+
Com a parte central da OOJS já explicada, este artigo mostra como criar classes de objetos "filhos" (construtores) que herdam características das suas classes "pais". Nós daremos ainda algumas dicas sobre quando e onde você pode usar OOJS.
+
Trabalhando com dados JSON
+
JavaScript Object Notation (JSON) é um formato padronizado para representar estruturas de dados em objetos JavaScript,  que é comunmente usado para representar e transmitir dados em sites da web (i.e. enviar alguma informação do serviror para o cliente, para ser exibido na página). Neste artigo vamos mostrar o que você precisa para trabalhar com JSON usando JavaScript, inclusive acesso a itens de dados num objeto JSON. Além disso, mostraremos como criar seu próprio JSON.
+
Prática de Construção de Objetos
+
No artigo anterior, nós vimos toda a parte essencial da teoria de Objetos em JavaScript, além de detalhes de sintaxe, fornecendo assim uma base sólida para você seguir adiante. No presente artigo, vamos nos aprofundar com exercícios práticos na construção de objetos personalizados. Faremos algo divertido e colorido  — algumas bolas coloridas saltitantes!
+
+ +

Aprender mais...

+ +
+
Acrescentando funcionalidades a nossa demo de bolas saltitantes
+
Nesse "aprenda mais...", incentivamos você a usar a demo das bolas saltitantes do artigo anterior como ponto de partida para acrescentar algumas novas e interessantes funcionalidades.
+
diff --git a/files/pt-br/learn/javascript/objects/inheritance/index.html b/files/pt-br/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..81acc88a92 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,402 @@ +--- +title: Herança em JavaScript +slug: Aprender/JavaScript/Objetos/Herança +translation_of: Learn/JavaScript/Objects/Inheritance +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+ +

Com a maior parte dos detalhes principais do OOJS agora explicados, este artigo mostra como criar classes de objetos "child" (construtores) que herdam recursos de suas classes "parent". Além disso, apresentamos alguns conselhos sobre quando e onde você pode usar o OOJS e veja como as classes são tratadas na sintaxe moderna do ECMAScript.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico de computação, conhecimento básico de HTML e CSS, familiaridade com com o básico de Javascript (veja Primeiros passos e Construindo blocos) e OOJS básico (veja Introdução a objetos).
Objetivo:Entender como é possível implementar a herança em Javascript.
+ +

Herança Prototipada

+ +

Até agora vimos alguma herança em ação — vimos como funcionam as cadeias de protótipos e como os membros são herdados subindo em uma cadeia. Mas principalmente isso envolveu funções internas do navegador. Como criamos um objeto em JavaScript que herda de outro objeto?

+ +

Vamos explorar como fazer isso com um exemplo concreto.

+ +

Começando

+ +

Primeiro de tudo, faça uma cópia local do arquivo oojs-class-inheritance-start.html (veja também ao vivo). Aqui dentro você encontrará o mesmo exemplo de construtor  Person() que utilizamos durante todo o módulo, com uma pequena diferença — definimos apenas as propriedades dentro do construtor:

+ +
function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};
+ +

Os métodos são todos definidos no protótipo do construtor. Por exemplo:

+ +
Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};
+ +
+

Nota: No código fonte, você também verá os métodos bio() e farewell() definidos. Depois você verá como eles podem ser herdados por outros construtores.

+
+ +

Digamos que quiséssemos criar uma classe Teacher, como a que descrevemos em nossa definição inicial orientada a objetos, que herda todos os membros de Person, mas também inclui:

+ +
    +
  1. Uma nova propriedade, subject — isso irá conter o assunto que o professor ensina.
    2. +
  2. Um método greeting() atualizado, que soa um pouco mais formal do que o método padrão  greeting() — mais adequado para um professor que se dirige a alguns alunos da escola.
    3. +
+ +

Definindo uma função construtora Teacher()

+ +

A primeira coisa que precisamos fazer é criar um construtor Teacher() — adicione o seguinte abaixo do código existente:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}
+ +

Isto parece similar ao construtor Person de várias maneiras, mas há algo estranho aqui que nós não vimos antes — a função call(). Esta função basicamente permite chamar uma função definida em outro lugar, mas no contexto atual. O primeiro parâmetro especifica o valor this que você deseja usar ao executar a função, e os outros parâmetros são aqueles que devem ser passados para a função quando ela é invocada.

+ +

Nós queremos que o construtor Teacher() pegue os mesmos parâmetros que o construtor Person() de onde ele está herdando, então especificamos todos eles como parâmetros na chamada call().

+ +

A última linha dentro do construtor simplesmente define a nova propriedade subject que os professores terão, que pessoas genéricas não possuem.

+ +

Como nota, poderíamos simplesmente ter feito isso:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}
+ +

Mas isso é apenas redefinir as propriedades de novo, não herdá-las de  Person(), de modo que ela derrota o ponto que estamos tentando fazer. Também leva mais linhas de código.

+ +

Herdando de um construtor sem parâmetros

+ +

Observe que, se o construtor do qual você está herdando não tomar seus valores de propriedade de parâmetros, não será necessário especificá-los como argumentos adicionais em call(). Então, por exemplo, se você tivesse algo realmente simples assim:

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Você pode herdar as propriedades width e height fazendo isso (assim como as outras etapas descritas abaixo, é claro):

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Observe que apenas especificamos this dentro de call() — nenhum outro parâmetro é necessário, já que não estamos herdando propriedades do pai que são configuradas por meio de parâmetros.

+ +

Definindo o protótipo e referência de construtor do Teacher()

+ +

Tudo está bem até agora, mas nós temos um problema. Nós definimos um novo construtor, e ele tem uma propriedade  prototype, que por padrão apenas contém uma referência à própria função construtora. Ele não contém os métodos da propriedade prototype do construtor Person. Para ver isso, insira Object.getOwnPropertyNames(Teacher.prototype) no campo de entrada de texto ou no seu console JavaScript. Em seguida, insira-o novamente, substituindo Teacher por Person. O novo construtor também não herda esses métodos. Para ver isso, compare as saídas de Person.prototype.greeting e Teacher.prototype.greeting. Precisamos obter Teacher() para herdar os métodos definidos no protótipo Person(). Então, como fazemos isso?

+ +
    +
  1. Adicione a seguinte linha abaixo da sua adição anterior: + 
    Teacher.prototype = Object.create(Person.prototype);
    + Aqui nosso amigo create() vem para o resgate novamente. Nesse caso, estamos usando para criar um novo objeto e torná-lo o valor de Teacher.prototype. O novo objeto tem Person.prototype como seu protótipo e, portanto, herdará, se e quando necessário, todos os métodos disponíveis no Person.prototype.
    2. +
  2. Precisamos fazer mais uma coisa antes de prosseguirmos. Depois de adicionar a última linha, a propriedade constructor de Teacher.prototype agora é igual a Person(), porque apenas definimos Teacher.prototype para fazer referência a um objeto que herda suas propriedades de Person.prototype! Tente salvar seu código, carregar a página em um navegador e inserir Teacher.prototype.constructor no console para verificar.
    3. +
  3. Isso pode se tornar um problema, então precisamos definir isso corretamente. Você pode fazer isso voltando ao seu código-fonte e adicionando a seguinte linha na parte inferior: + 
    Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });
    +
    4. +
  4. Agora, se você salvar e atualizar, entrar em Teacher.prototype.constructor deve retornar Teacher(), conforme desejado, além de estarmos herdando de Person()!
    5. +
+ +

Dar a Teacher() uma nova função greeting() 

+ +

Para finalizar nosso código, precisamos definir uma nova função greeting() no construtor Teacher().

+ +

A maneira mais fácil de fazer isso é defini-lo no protótipo do Teacher() — adicione o seguinte na parte inferior do seu código:

+ +
Teacher.prototype.greeting = function() {
+  var prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Mrs.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};
+ +

Isso alerta a saudação do professor, que também usa um prefixo de nome apropriado para seu gênero, elaborado usando uma instrução condicional.

+ +

Testando o exemplo

+ +

Agora que você digitou todo o código, tente criar uma instância de objeto do Teacher() colocando o seguinte na parte inferior do seu JavaScript (ou algo semelhante à sua escolha):

+ +
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+ +

Agora salve e atualize e tente acessar as propriedades e os métodos do novo objeto teacher1, por exemplo:

+ +
teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();
+ +

Tudo isso deve funcionar bem. As consultas nas linhas 1, 2, 3 e 6 acessam membros herdados do construtor genérico Person() (class). A consulta na linha 4 acessa um membro que está disponível somente no construtor mais especializado  Teacher() (class). A consulta na linha 5 teria acessado um membro herdado de Person(), exceto pelo fato de que Teacher() tem seu próprio membro com o mesmo nome, portanto, a consulta acessa esse membro.

+ +
+

Note: If you have trouble getting this to work, compare your code to our finished version (see it running live also).

+
+ +

A técnica que abordamos aqui não é a única maneira de criar classes herdadas em JavaScript, mas funciona bem e dá uma boa idéia sobre como implementar a herança em JavaScript.

+ +

Você também pode estar interessado em conferir alguns dos novos recursos {{glossary("ECMAScript")}} que nos permitem fazer herança mais claramente em JavaScript (veja Classes). Nós não cobrimos esses aqui, pois eles ainda não são suportados amplamente pelos navegadores. Todas as outras construções de código que discutimos neste conjunto de artigos são suportadas desde o IE9 ou anterior, e existem maneiras de obter suporte anterior a isso.

+ +

Uma maneira comum é usar uma biblioteca JavaScript — a maioria das opções populares tem um conjunto fácil de funcionalidade disponível para fazer herança com mais facilidade e rapidez. CoffeeScript por exemplo, fornece class, extends, etc.

+ +

Um exercício adicional

+ +

Em nossa seção de teoria OOP, incluímos também uma classe Student como um conceito, que herda todos os recursos de Person, e também tem um método  greeting() diferente de Person que é muito mais informal do que a saudação do Teacher. Dê uma olhada na aparência da saudação do aluno nessa seção e tente implementar seu próprio construtor Student() que herda todos os recursos de Person(), e implemente a função greeting() diferente.

+ +
+

Note: If you have trouble getting this to work, have a look at our finished version (see it running live also).

+
+ +

Sumário de membro do objeto

+ +

Resumindo, você basicamente tem três tipos de propriedade / método para se preocupar:

+ +
    +
  1. Aqueles definidos dentro de uma função construtora que são dadas a instâncias de objetos. Estes são bastante fáceis de detectar — em seu próprio código personalizado, eles são os membros definidos dentro de um construtor usando as linhas this.x = x ; no código do navegador, eles são os membros disponíveis apenas para instâncias de objetos (geralmente criados chamando um construtor usando a palavra-chave new, por exemplo, var myInstance = new myConstructor()).
    2. +
  2. Aqueles definidos diretamente no próprio construtor, que estão disponíveis apenas no construtor. Geralmente, eles estão disponíveis apenas em objetos de navegador internos e são reconhecidos por serem encadeados diretamente em um construtor, não em uma instância. Por exemplo, Object.keys().
    3. +
  3. Aqueles definidos no protótipo de um construtor, que são herdados por todas as instâncias e herdam as classes de objetos. Estes incluem qualquer membro definido na propriedade de protótipo de um Construtor, por ex. myConstructor.prototype.x().
    4. +
+ +

Se você não tem certeza de qual é qual, não se preocupe com isso ainda — você ainda está aprendendo e a familiaridade virá com a prática.

+ +

Classes ECMAScript 2015

+ +

O ECMAScript 2015 introduz a sintaxe de classe em JavaScript como uma maneira de escrever classes reutilizáveis usando uma sintaxe mais fácil e mais limpa, que é mais semelhante a classes em C ++ ou Java. Nesta seção, converteremos os exemplos Pessoa e Professor da herança protótipo para as classes, para mostrar como é feito.

+ +
+

Nota: Essa forma moderna de escrever classes é suportada em todos os navegadores modernos, mas ainda vale a pena saber como a herança prototípica subjacente, caso você trabalhe em um projeto que exija suporte a um navegador que não suporte essa sintaxe (mais notavelmente o Internet Explorer) .

+
+ +

Vejamos uma versão reescrita do exemplo Person, estilo de classe:

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+ +

A declaração class indica que estamos criando uma nova classe. Dentro deste bloco, definimos todos os recursos da classe:

+ + + +

Agora podemos instanciar instâncias de objeto usando o operador new, da mesma maneira que fizemos antes:

+ +
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+
+ +
+

Nota: Sob o capô, suas classes estão sendo convertidas em modelos de herança protótipos — isso é apenas açúcar sintático. Mas tenho certeza que você concordará que é mais fácil escrever.

+
+ +

Herança com sintaxe de classe

+ +

Acima nós criamos uma classe para representar uma pessoa. Eles têm uma série de atributos que são comuns a todas as pessoas; Nesta seção, criaremos nossa classe especializada Teacher, tornando-a herdada de Person usando a sintaxe de classe moderna. Isso é chamado de criação de uma subclasse ou subclasse.

+ +

Para criar uma subclasse, usamos a palavra-chave extends para informar ao JavaScript a classe na qual queremos basear nossa classe.

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}
+ +

Podemos tornar o código mais legível definindo o operador super() como o primeiro item dentro do constructor(). Isso chamará o construtor da classe pai e herdará os membros que especificarmos como parâmetros de super(), desde que sejam definidos lá:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+
+ +

Quando instanciamos instâncias de objeto Teacher , podemos agora chamar métodos e propriedades definidos em Teacher e Person, como seria de esperar:

+ +
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+
+ +

Como fizemos com Teachers, poderíamos criar outras subclasses de Person para torná-las mais especializadas sem modificar a classe base.

+ +
+

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

+
+ +

Getters e Setters

+ +

Pode haver momentos em que queremos alterar os valores de um atributo nas classes que criamos ou não sabemos qual será o valor final de um atributo. Usando o exemplo Teacher, podemos não saber o assunto que o professor ensinará antes de criá-lo, ou o assunto pode mudar entre os termos.

+ +

Podemos lidar com essas situações com getters e setters.

+ +

Vamos melhorar a classe Professor com getters e setters. A aula começa da mesma forma que foi a última vez que olhamos para ela.

+ +

Os getters e setters trabalham em pares. Um getter retorna o valor atual da variável e seu setter correspondente altera o valor da variável para o que ela define.

+ +

A classe Teacher modificada é assim:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+
+ +

Em nossa classe acima, temos um getter e setter para a propriedade subject. Usamos  _  para criar um valor separado no qual armazenar nossa propriedade de nome. Sem usar essa convenção, obteríamos erros toda vez que chamássemos get ou set. Neste ponto:

+ + + +

O exemplo abaixo mostra os dois recursos em ação:

+ +
// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+
+ +
+

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

+
+ +

Quando você usaria a herança em JavaScript?

+ +

Particularmente após este último artigo, você pode estar pensando "woo, isso é complicado". Bem, você está certo. Protótipos e herança representam alguns dos aspectos mais complexos do JavaScript, mas muito do poder e flexibilidade do JavaScript vem de sua estrutura e herança de objetos, e vale a pena entender como ele funciona.

+ +

De certa forma, você usa herança o tempo todo. Sempre que você usa vários recursos de uma API da Web ou métodos / propriedades definidos em um objeto de navegador interno que você chama em suas cadeias de caracteres, matrizes, etc., você está implicitamente usando herança.

+ +

Em termos de usar a herança em seu próprio código, você provavelmente não a usará com frequência, principalmente no começo e em pequenos projetos. É uma perda de tempo usar objetos e herança apenas por causa dela quando você não precisa deles. Mas à medida que suas bases de código aumentam, é mais provável que você encontre uma necessidade para isso. Se você estiver começando a criar vários objetos com recursos semelhantes, criar um tipo de objeto genérico para conter toda a funcionalidade compartilhada e herdar esses recursos em tipos de objetos mais especializados pode ser conveniente e útil.

+ +
+

Nota: Por causa da maneira como o JavaScript funciona, com a cadeia de protótipos, etc., o compartilhamento de funcionalidade entre objetos é frequentemente chamado de delegação. Os objetos especializados delegam a funcionalidade a um tipo de objeto genérico.

+
+ +

Ao usar a herança, você é aconselhado a não ter muitos níveis de herança, e manter um controle cuidadoso de onde você define seus métodos e propriedades. É possível começar a escrever código que modifica temporariamente os protótipos dos objetos do navegador interno, mas você não deve fazer isso a menos que tenha um bom motivo. Demasiada herança pode levar a confusão sem fim, e dor infinita quando você tenta depurar esse código.

+ +

Em última análise, os objetos são apenas outra forma de reutilização de código, como funções ou loops, com seus próprios papéis e vantagens específicos. Se você estiver criando um monte de variáveis e funções relacionadas e quiser rastreá-las todas juntas e empacotá-las perfeitamente, um objeto é uma boa ideia. Objetos também são muito úteis quando você quer passar uma coleção de dados de um lugar para outro. Ambas as coisas podem ser alcançadas sem o uso de construtores ou herança. Se você precisa apenas de uma única instância de um objeto, provavelmente é melhor usar apenas um literal de objeto e certamente não precisa de herança.

+ +

Alternativas para estender a cadeia de protótipos

+ +

Em JavaScript, existem várias maneiras diferentes de estender o protótipo de um objeto além do que mostramos acima. Para saber mais sobre as outras formas, visite nosso artigo Herança e a cadeia de protótipos.

+ +

Sumário

+ +

Este artigo cobriu o restante da teoria e sintaxe central do OOJS que achamos que você deveria saber agora. Neste ponto, você deve entender os princípios de objeto e OOP JavaScript, protótipos e herança prototypal, como criar classes (construtores) e instâncias de objetos, adicionar recursos a classes e criar subclasses que herdam de outras classes.

+ +

No próximo artigo, veremos como trabalhar com JavaScript Object Notation (JSON), um formato comum de troca de dados escrito usando objetos JavaScript.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..e10e3e27a6 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/json/index.html @@ -0,0 +1,350 @@ +--- +title: Trabalhando com JSON +slug: Aprender/JavaScript/Objetos/JSON +tags: + - JSON + - JavaScript + - assíncrono +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Você se deparará com isso com bastante frequência, portanto, neste artigo, oferecemos tudo o que você precisa para trabalhar com o JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar os dados dentro dele e criar o JSON.

+ + + + + + + + + + + + +
Pré-requisitos +

Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja Primeiros passos e Construindo blocos) e o básico de OOJS (veja Introdução a objetos).

+
Objetivo: +

Para entender como trabalhar com dados armazenados em JSON e criar seus próprios objetos JSON.

+
+ +

Não, sério, o que é o JSON?

+ +

{{glossary("JSON")}} é um formato de dados baseado em texto seguindo a sintaxe do objeto JavaScript, que foi popularizada por  Douglas Crockford. Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON

+ +

O JSON existe como uma string — útil quando você deseja transmitir dados por uma rede. Ele precisa ser convertido em um objeto JavaScript nativo quando você quiser acessar os dados. Isso não é um grande problema —  o JavaScript fornece um objeto JSON global que possui métodos disponíveis para conversão entre os dois.

+ +
+

Nota: Converter uma string em um objeto nativo é chamado de análise, enquanto a conversão de um objeto nativo em uma string para que possa ser transmitida pela rede é chamada de stringification.

+
+ +

Um objeto JSON pode ser armazenado em seu próprio arquivo, que é basicamente apenas um arquivo de texto com uma extensão de .json, e um {{glossary("MIME type")}} de application/json.

+ +

Estrutura JSON

+ +

Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Se nós carregássemos esse objeto em um programa JavaScript, analisado em uma variável chamada superHeroes por exemplo, poderíamos então acessar os dados dentro dele usando a mesma notação dot / bracket que observamos no artigo básico do objeto JavaScript. Por exemplo:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Para acessar os dados mais abaixo na hierarquia, basta encadear os nomes de propriedades e os índices de array necessários juntos. Por exemplo, para acessar o terceiro superpoder do segundo herói listado na lista de membros, você faria isso:

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Primeiro temos o nome da variável — superHeroes.
    2. +
  2. Por dentro, queremos acessar a propriedade dos members, então usamos ["members"].
    3. +
  3. members contém uma matriz preenchida por objetos. Queremos acessar o segundo objeto dentro da matriz, então usamos [1].
    4. +
  4. Dentro deste objeto, queremos acessar a propriedade powers, então usamos ["powers"].
    5. +
  5. Dentro da propriedade  powers está um array contendo os superpoderes do herói selecionado. Nós queremos o terceiro, então nós usamos
    + [2].
    6. +
+ +
+

Nota: Nós fizemos o JSON visto acima disponível dentro de uma variável em nosso exemplo JSONTest.html (veja o código fonte). Tente carregar isso e depois acessar os dados dentro da variável pelo console JavaScript do seu navegador.

+
+ +

Matrizes como JSON

+ +

Acima, mencionamos que o texto JSON basicamente se parece com um objeto JavaScript, e isso é basicamente correto. A razão pela qual dissemos "principalmente certo" é que uma matriz também é válida como JSON, por exemplo:

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

O código acima é um JSON perfeitamente válido. Você teria que acessar itens de matriz (em sua versão analisada) iniciando com um índice de matriz, por exemplo [0]["powers"][0].

+ +

Outras notas

+ + + +

Aprendizado ativo: trabalhando por meio de um exemplo de JSON

+ +

Então, vamos trabalhar em um exemplo para mostrar como poderíamos usar alguns dados JSON em um site.

+ +

Começando

+ +

Para começar, faça cópias locais de nossos arquivos heroes.html e style.css. O último contém alguns CSS simples para estilizar nossa página, enquanto o primeiro contém um HTML muito simples:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Mais um elemento {{HTMLElement("script")}} para conter o código JavaScript que escreveremos neste exercício. No momento, ele contém apenas duas linhas, que pegam referências aos elementos {{HTMLElement("header")}} e {{HTMLElement("section")}} e os armazenam em variáveis:

+ +
var header = document.querySelector('header');
+var section = document.querySelector('section');
+ +

Disponibilizamos nossos dados JSON em nosso GitHub, emhttps://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

Vamos carregá-lo em nossa página e usar algumas manipulações de DOM nifty para exibi-lo, assim:

+ +

+ +

Obtendo o JSON

+ +

Para obter o JSON, vamos usar uma API chamada {{domxref("XMLHttpRequest")}} (geralmente chamada de XHR). Esse é um objeto JavaScript muito útil que nos permite fazer solicitações de rede para recuperar recursos de um servidor via JavaScript (por exemplo, imagens, texto, JSON e até trechos de código HTML), o que significa que podemos atualizar pequenas seções de conteúdo sem ter que recarregar todo página. Isso levou a páginas da Web mais responsivas e parece empolgante, mas está além do escopo deste artigo ensinar isso com muito mais detalhes.

+ +
    +
  1. Para começar, vamos armazenar a URL do JSON que queremos recuperar em uma variável. Adicione o seguinte na parte inferior do seu código JavaScript: + 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. Para criar uma solicitação, precisamos criar uma nova instância de objeto de solicitação a partir do construtor XMLHttpRequest usando a palavra-chave new. Adicione o seguinte abaixo sua última linha: + 
    var request = new XMLHttpRequest();
    +
    3. +
  3. Agora precisamos abrir uma nova solicitação usando o método open() . Adicione a seguinte linha: + 
    request.open('GET', requestURL);
    + +

    Isso leva pelo menos dois parâmetros — existem outros parâmetros opcionais disponíveis. Nós só precisamos dos dois obrigatórios para este exemplo simples:

    + +
      +
    • O método HTTP a ser usado ao fazer a solicitação de rede. Neste caso, GET é bom, pois estamos apenas recuperando alguns dados simples.
      • +
    • O URL para fazer a solicitação — esta é a URL do arquivo JSON que armazenamos anteriormente.
      • +
    +
    4. +
  4. Em seguida, adicione as duas linhas a seguir — aqui estamos definindo o  responseType como JSON, para que o XHR saiba que o servidor retornará o JSON e que isso deve ser convertido nos bastidores em um objeto JavaScript. Em seguida, enviamos a solicitação com o método send(): + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. A última parte desta seção envolve aguardar a resposta retornar do servidor e, em seguida, lidar com ela. Adicione o seguinte código abaixo do seu código anterior: + 
    request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Aqui estamos armazenando a resposta ao nosso pedido (disponível na propriedade response) em uma variável chamada superHeroes; essa variável agora conterá o objeto JavaScript com base no JSON! Então, estamos passando esse objeto para duas chamadas de função — a primeira preencherá o <header> com os dados corretos, enquanto a segunda criará uma ficha de informações para cada herói da equipe e a inserirá na <section>.

+ +

Envolvemos o código em um manipulador de eventos que é executado quando o evento de carregamento é acionado no objeto de solicitação (consulte onload) — isso ocorre porque o evento load é acionado quando a resposta é retornada com sucesso; Fazê-lo desta forma garante que request.response estará definitivamente disponível quando chegarmos a tentar fazer algo com ele.

+ +

Preenchendo o Cabeçalho

+ +

Agora, recuperamos os dados JSON e os convertemos em um objeto JavaScript, vamos usá-lo escrevendo as duas funções mencionadas acima. Primeiro de tudo, adicione a seguinte definição de função abaixo do código anterior:

+ +
function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

Nós chamamos o parâmetro jsonObj, para nos lembrarmos que esse objeto JavaScript foi originado do JSON. Aqui, primeiro criamos um elemento {{HTMLElement("h1")}} como createElement(), definimos seu textContent para igualar a propriedade squadName do objeto e, em seguida, o adicionamos ao cabeçalho usando appendChild(). Em seguida, fazemos uma operação muito semelhante com um parágrafo: criá-lo, definir seu conteúdo de texto e anexá-lo ao cabeçalho. A única diferença é que seu texto é definido como uma string concatenada contendo as propriedades homeTown e formed do objeto.

+ +

Criando os cartões de informações do herói

+ +

Em seguida, adicione a seguinte função na parte inferior do código, que cria e exibe as cartas de super-heróis:

+ +
function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i < heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j < superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

Para começar, armazenamos a propriedade  members do objeto JavaScript em uma nova variável. Esta matriz contém vários objetos que contêm as informações para cada herói.

+ +

Em seguida, usamos um loop for para percorrer cada objeto na matriz. Para cada um, nós:

+ +
    +
  1. Criamos vários novos elementos: um <article>, um <h2>, três <p>s, e um <ul>.
    2. +
  2. Definimos o <h2> para conter o name do herói atual.
    3. +
  3. Preenchemos os três parágrafos com sua secretIdentity, age, e uma linha dizendo "Superpoderes:" para introduzir as informações na lista.
    4. +
  4. Armazenamos a propriedade powers em outra nova variável chamada superPowers — isso contém uma matriz que lista os superpoderes do herói atual.
    5. +
  5. Usamos outro loop for para percorrer os superpoderes do herói atual — para cada um criamos um elemento <li> colocamos o super poder dentro dele e colocamos o listItem dentro do elemento <ul> (myList) usando appendChild().
    6. +
  6. A última coisa que fizemos foi acrescentar os <h2>, <p>s, e <ul> dentro do <article> (myArticle), depois acrescentar o <article> dentro do <section>. A ordem em que as coisas são anexadas é importante, pois essa é a ordem em que elas serão exibidas dentro do HTML.
    7. +
+ +
+

Nota: Se você está com problemas pegue um exemplo para trabalhar, tente nosso código fonte heroes-finished.html (veja isso ao vivo também.)

+
+ +
+

Nota: Se você está tendo problemas para seguir a notação ponto / colchete que estamos usando para acessar o objeto JavaScript, pode ajudar a abrir o arquivo superheroes.json em outra guia ou em seu editor de texto, e consultá-lo enquanto observa nosso JavaScript. Você também pode consultar o artigo sobre conceitos O básico de objetos JavaScript para obter mais informações sobre a notação de pontos e colchetes.

+
+ +

Conversão entre objetos e texto

+ +

O exemplo acima foi simples em termos de acesso ao objeto JavaScript, porque definimos a solicitação XHR para converter a resposta JSON diretamente em um objeto JavaScript usando:

+ +
request.responseType = 'json';
+ +

Mas às vezes não temos muita sorte — às vezes recebemos uma string JSON bruta e precisaremos convertê-la em um objeto por conta própria. E quando queremos enviar um objeto JavaScript pela rede, precisamos convertê-lo em JSON (uma string) antes de enviá-lo. Felizmente, esses dois problemas são tão comuns no desenvolvimento da Web que um objeto JSON interno está disponível nos navegadores, o que contém os dois métodos a seguir:

+ + + +

Você pode ver o primeiro em ação em nosso exemplo heroes-finished-json-parse.html (veja o source code) — isso faz exatamente a mesma coisa que o exemplo que construímos anteriormente, exceto pelo fato de configurarmos o XHR para retornar texto JSON bruto, em seguida, usado parse() para convertê-lo em um objeto JavaScript real. O trecho principal do código está aqui:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

Como você pode imaginar, stringify() funciona da maneira oposta. Tente inserir as seguintes linhas no console JavaScript de seu navegador, uma por uma, para vê-lo em ação:

+ +
var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString
+ +

Aqui estamos criando um objeto JavaScript, em seguida, verificando o que ele contém, convertendo-o em uma string JSON usando stringify() — salvando o valor de retorno em uma nova variável — e, em seguida, verificando-o novamente.

+ +

Sumário

+ +

Neste artigo, fornecemos um guia simples para usar o JSON em seus programas, incluindo como criar e analisar o JSON e como acessar dados bloqueados nele. No próximo artigo começaremos a analisar o JavaScript orientado a objetos.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

Nesse módulo

+ + diff --git a/files/pt-br/learn/javascript/objects/object-oriented_js/index.html b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..7772eec5cf --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,275 @@ +--- +title: JavaScript orientado a objetos para iniciantes +slug: Aprender/JavaScript/Objetos/Object-oriented_JS +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Com o básico fora do caminho, agora vamos nos concentrar no JavaScript orientado a objetos (OOJS) — Este artigo apresenta uma visão básica da teoria de programação orientada a objeto (OOP), em seguida, explora como o JavaScript emula as classes de objetos através de funções de construtor e como criar instâncias de objeto.

+ + + + + + + + + + + + +
Pré-requisitos:Alfabetização básica em informática, um entendimento básico de HTML e CSS, familiaridade com o básico do JavaScript (consulte Primeiros passos e Blocos de construção) e noções básicas do OOJS (consulte Introdução aos objetos).
Objetivo:Para entender a teoria básica por trás da programação orientada a objetos, como isso se relaciona com JavaScript ("tudo é um objeto") e como criar construtores e instâncias de objetos.
+ +

Programação orientada a objetos - o básico

+ +

Para começar, vamos dar uma visão simplista e de alto nível do que é programação orientada a objeto (OOP). Dizemos simplista, porque a OOP pode rapidamente se tornar muito complicada, e dar a ela um tratamento completo agora provavelmente confundiria mais do que ajuda. A idéia básica da OOP é que usamos objetos para modelar coisas do mundo real que queremos representar dentro de nossos programas, e / ou fornecer uma maneira simples de acessar funcionalidades que de outra forma seriam difíceis ou impossíveis de usar.

+ +

Os objetos podem conter dados e códigos relacionados, que representam informações sobre o que você está tentando modelar e a funcionalidade ou o comportamento que você deseja ter. Dados de objeto (e muitas vezes, funções também) podem ser armazenados ordenadamente (a palavra oficial é encapsulados) dentro de um pacote de objetos (que pode ser dado um nome específico para se referir, que é às vezes chamado de namespace), tornando fácil de estruturar e acessar; objetos também são comumente usados como armazenamentos de dados que podem ser facilmente enviados pela rede.

+ +

Definindo um modelo de objeto

+ +

Vamos considerar um programa simples que exibe informações sobre os alunos e professores de uma escola. Aqui vamos olhar para a teoria OOP em geral, não no contexto de qualquer linguagem de programação específica.

+ +

Para começar, poderíamos retornar ao nosso tipo de objeto Person do nosso primeiro artigo de objetos, que define os dados genéricos e a funcionalidade de uma pessoa. Há muitas coisas que você poderia saber sobre uma pessoa (endereço, altura, tamanho do sapato, perfil de DNA, número de passaporte, traços de personalidade significativos ...), mas neste caso estamos interessados apenas em mostrar seu nome, idade, sexo e interesses, e também queremos ser capazes de escrever uma breve introdução sobre eles com base nesses dados e fazê-los dizer oi. Isso é conhecido como abstração — criando um modelo simples de uma coisa mais complexa, que representa seus aspectos mais importantes de uma forma que é fácil trabalhar com os objetivos do nosso programa.

+ +

+ +

Criando objetos reais

+ +

De nossa classe, podemos criar instâncias de objeto — objetos que contêm os dados e a funcionalidade definidos na classe. Da nossa classe Person, podemos criar algumas pessoas reais:

+ +

+ +

Quando uma instância de objeto é criada a partir de uma classe, a função construtora da classe é executada para criá-la. Esse processo de criação de uma instância de objeto de uma classe é chamado de instanciação — a instância do objeto é instanciada a partir da classe.

+ +

Classes especialistas

+ +

Neste caso, não queremos pessoas genéricas — queremos professores e alunos, que são tipos mais específicos de pessoas. Em OOP, podemos criar novas classes com base em outras classes — essas novas classes filhas podem herdar os recursos de dados e código de sua classe pai, para que você possa reutilizar a funcionalidade comum a todos os tipos de objetos em vez de duplicá-los. Onde a funcionalidade difere entre as classes, você pode definir recursos especializados diretamente sobre eles, conforme necessário.

+ +

+ +

Isso é realmente útil — professores e alunos compartilham muitos recursos comuns, como nome, sexo e idade, por isso é conveniente definir apenas esses recursos uma vez. Você também pode definir o mesmo recurso separadamente em classes diferentes, já que cada definição desse recurso estará em um namespace diferente. Por exemplo, a saudação de um aluno pode estar no formato "Yo, I'm [firstName]" (por exemplo, Yo, I'm Sam), enquanto um professor pode usar algo mais formal, como "Olá, meu nome é [Prefixo [lastName], e eu ensino [Subject]. " (por exemplo Olá, Meu nome é Mr Griffiths, e eu ensino Química).

+ +
+

Nota: A palavra chique para a capacidade de múltiplos tipos de objeto de implementar a mesma funcionalidade é o polimorfismo. Apenas no caso de você estar se perguntando.

+
+ +

Agora você pode criar instâncias de objetos de suas classes filhas. Por exemplo:

+ +

+ +

No restante do artigo, começaremos a analisar como a teoria da POO pode ser colocada em prática no JavaScript.

+ +

Construtores e instâncias de objeto

+ +

O JavaScript usa funções especiais chamadas funções construtoras para definir objetos e seus recursos. Eles são úteis porque muitas vezes você encontrará situações em que não sabe quantos objetos estará criando; Os construtores fornecem os meios para criar quantos objetos forem necessários de forma eficaz, anexando dados e funções a eles, conforme necessário.

+ +

Vamos explorar a criação de classes por meio de construtores e criar instâncias de objeto a partir deles em JavaScript. Primeiro de tudo, gostaríamos que você fizesse uma nova cópia local do arquivo oojs.html que vimos em nosso primeiro artigo Objetos.

+ +

Um exemplo simples

+ +
    +
  1. Vamos começar observando como você pode definir uma pessoa com uma função normal. Adicione esta função dentro do elemento script: + + 
    function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + obj.name + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Agora você pode criar uma nova pessoa chamando essa função — tente as seguintes linhas no console JavaScript do seu navegador: + 
    var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();
    + Isso funciona bem o suficiente, mas é um pouco prolixo; Se sabemos que queremos criar um objeto, por que precisamos criar explicitamente um novo objeto vazio e devolvê-lo? Felizmente, o JavaScript nos fornece um atalho útil, na forma de funções de construtor — vamos criar um agora!
    3. +
  3. Substitua sua função anterior pelo seguinte: + 
    function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
    +
    4. +
+ +

A função de construtor é a versão do JavaScript de uma classe. Você notará que ela tem todos os recursos que você espera em uma função, embora ela não retorne nada ou crie explicitamente um objeto — ela basicamente define propriedades e métodos. Você verá a palavra-chave this sendo usada aqui também — é basicamente dizer que sempre que uma dessas instâncias de objeto é criada, a propriedade name  do objeto será igual ao valor do nome passado à chamada do construtor, e o método greeting() usará o valor do nome passado para a chamada do construtor também.

+ +
+

Nota: Um nome de função de construtor geralmente começa com uma letra maiúscula — essa convenção é usada para tornar as funções do construtor mais fáceis de reconhecer no código.

+
+ +

Então, como podemos chamar um construtor para criar alguns objetos?

+ +
    +
  1. Adicione as seguintes linhas abaixo da sua adição de código anterior: + 
    var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
    +
    2. +
  2. Salve seu código e recarregue-o no navegador e tente inserir as seguintes linhas em seu console JS: + 
    person1.name
+person1.greeting()
+person2.name
+person2.greeting()
    +
    3. +
+ +

Legal! Você verá agora que temos dois novos objetos na página, cada um deles armazenado em um namespace diferente — quando você acessa suas propriedades e métodos, é necessário iniciar chamadas com person1 ou person2; a funcionalidade contida é cuidadosamente empacotada para que não entre em conflito com outras funcionalidades. Eles, no entanto, têm a mesma propriedade de name e o método greeting() disponível. Observe que eles estão usando seu próprio valor de name que foi atribuído a eles quando foram criados; Esta é uma razão pela qual é muito importante usar this, então eles usarão seus próprios valores e não algum outro valor.

+ +

Vamos ver novamente as chamadas do construtor:

+ +
var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
+ +

Em cada caso, a palavra-chave new é usada para informar ao navegador que queremos criar uma nova instância de objeto, seguida pelo nome da função com seus parâmetros obrigatórios contidos entre parênteses, e o resultado é armazenado em uma variável — muito semelhante a como uma função padrão é chamada. Cada instância é criada de acordo com esta definição:

+ +
function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
+ +

Após a criação dos novos objetos, as variáveis person1 e person2 contêm os seguintes objetos:

+ +
{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

Note que quando estamos chamando nossa função de construtor, estamos definindo greeting() toda vez, o que não é ideal. Para evitar isso, podemos definir funções no protótipo, que veremos mais adiante.

+ +

Criando nosso construtor acabado

+ +

O exemplo que vimos acima foi apenas um exemplo simples para começarmos. Vamos agora começar e criar nossa função final do construtor Person().

+ +
    +
  1. Remova o código que você inseriu até agora e inclua este construtor de substituição — isso é exatamente o mesmo que o exemplo simples em princípio, com um pouco mais de complexidade: + 
    function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}
    +
    2. +
  2. Agora adicione a seguinte linha abaixo, para criar uma instância de objeto a partir dela: + 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    +
    3. +
+ +

Agora você verá que pode acessar as propriedades e os métodos exatamente como fizemos anteriormente — Tente isso no seu console JS:

+ +
person1['age']
+person1.interests[1]
+person1.bio()
+// etc.
+ +
+

Nota: Se você está tendo problemas para fazer isso funcionar, tente comparar seu código com a nossa versão — veja o código em oojs-class-finished.html (também você pode ve-lo sendo executado aqui).

+
+ +

Exercícios adicionais

+ +

Para começar, tente adicionar mais algumas linhas de criação de objetos e tente obter e configurar os membros das instâncias de objetos resultantes.

+ +

Além disso, há alguns problemas com nosso método  bio() — a saída sempre inclui o pronome "Ele", mesmo que sua pessoa seja do sexo feminino ou alguma outra classificação de gênero preferida. E a biografia incluirá apenas dois interesses, mesmo que mais sejam listados na matriz interests. Você pode descobrir como corrigir isso na definição de classe (construtor)? Você pode colocar qualquer código que você gosta dentro de um construtor (você provavelmente precisará de alguns condicionais e um loop). Pense em como as sentenças devem ser estruturadas de maneira diferente dependendo do gênero e dependendo se o número de interesses listados é 1, 2 ou mais de 2.

+ +
+

Note: If you get stuck, we have provided an answer inside our GitHub repo (see it live) — try writing it yourself first though!

+
+ +

Outras maneiras de criar instâncias de objeto

+ +

Até agora, vimos duas maneiras diferentes de criar uma instância de objeto — declarar um literal de objeto, e usar uma função de construtor (veja acima).

+ +

Isso faz sentido, mas existem outras maneiras — queremos familiarizá-lo com essas informações caso você as encontre em suas viagens pela Web.

+ +

O construtor Object() 

+ +

Primeiro de tudo, você pode usar o construtor Object() para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio.

+ +
    +
  1. Tente inserir isso no console JavaScript do seu navegador: + 
    var person1 = new Object();
    +
    2. +
  2. Isso armazena um objeto vazio na variável person1. Você pode adicionar propriedades e métodos a esse objeto usando a notação de pontos ou colchetes conforme desejado; tente estes exemplos no seu console: + 
    person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};
    +
    3. +
  3. Você também pode passar um literal de objeto para o construtor Object() como um parâmetro, para preenchê-lo com propriedades / métodos. Tente isso no seu console JS: + 
    var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});
    +
    4. +
+ +

Usando o método create()

+ +

Os construtores podem ajudá-lo a fornecer seu pedido de código — você pode criar construtores em um único local e, em seguida, criar instâncias conforme necessário, e fica claro de onde eles vieram.

+ +

No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado create() que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente.

+ +
    +
  1. Com o exercício concluído das seções anteriores carregadas no navegador, tente isso no seu console JavaScript: + 
    var person2 = Object.create(person1);
    +
    2. +
  2. Agora tente estes: + 
    person2.name
+person2.greeting()
    +
    3. +
+ +

Você verá que a person2 foi criada com base na  person1  —  ela tem as mesmas propriedades e métodos disponíveis para ela.

+ +

Uma limitação do create()  é que o IE8 não o suporta. Então os construtores são mais efetivos se você quiser que funcione em navegadores antigos.

+ +

Vamos explorar os efeitos de create() em mais detalhes posteriormente.

+ +

Sumário

+ +

Este artigo forneceu uma visão simplificada da teoria orientada a objetos — isso não é toda a história, mas dá uma idéia do que estamos lidando aqui. Além disso, começamos a analisar diferentes maneiras de gerar instâncias de objetos.

+ +

No próximo artigo, vamos explorar os protótipos de objetos JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/javascript/objects/object_building_practice/index.html b/files/pt-br/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..4c4ab6c629 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,300 @@ +--- +title: Prática de construção de objetos +slug: Aprender/JavaScript/Objetos/Object_building_practice +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

Nos artigos anteriores, analisamos todos os detalhes essenciais da teoria e da sintaxe do objeto JavaScript, fornecendo uma base sólida para começar. Neste artigo, vamos mergulhar em um exercício prático, dando a você mais prática na construção de objetos JavaScript personalizados, com um resultado divertido e colorido.

+ + + + + + + + + + + + +
Prerequisites:Conhecimentos básicos de informática, conhecimento básico de HTML e CSS, familiaridade com o básico de JavaScript (veja First steps e Building blocks) e o básico de OOJS (veja Introduction to objects).
Objective:Adiquirir alguma prática no uso de objetos e técnicas de orientação a objetos num contexto real.
+ +

Vamos saltitar algumas bolas

+ +

Neste artigo, vamos escrever uma demo clássica de "bolas saltitantes", para mostrar o quão úteis os objetos podem ser em JavaScript. Nossas bolinhas vão saltar pela tela e mudam de cor quando se tocam. O exemplo acabado vai parecer um pouco assim:

+ +
    +
+ +

Este exemplo fará uso da Canvas API, para desenhar as bolas na tela, e da requestAnimationFrame API para animar toda a exibição — você não precisa ter nenhum conhecimento prévio dessas APIs e esperamos que, no momento em que você terminar este artigo, você esteja interessado em explorá-los mais. Ao longo do caminho, faremos uso de alguns objetos bacanas, e mostraremos algumas técnicas legais, como bolas quicando nas paredes, e verificando se elas se chocaram (também conhecidas como detecção de colisão).

+ +

Começando

+ +

Para começar, faça cópias locais de nossos arquivos  index.html, style.css, e main.js. Estes contêm o seguinte, respectivamente:

+ +
    +
  1. Um documento HTML muito simples com um elemento {{HTMLElement("h1")}}, um elemento {{HTMLElement("canvas")}} para desenhar nossas bolas e elementos para aplicar nosso CSS e JavaScript em nosso HTML.
    2. +
  2. Alguns estilos muito simples, que servem principalmente para estilizar e posicionar o <h1>, e se livrar de qualquer barra de rolagem ou margem ao redor da borda da página (para que fique bonito e arrumado).
    3. +
  3. Algum JavaScript que serve para configurar o elemento <canvas> e fornecer uma função geral que vamos usar.
    4. +
+ +

A primeira parte do script é assim:

+ +
const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;
+ +

Esse script obtém uma referência ao elemento <canvas> e, em seguida, chama o método getContext() para nos fornecer um contexto no qual podemos começar a desenhar. A variável resultante (ctx) é o objeto que representa diretamente a área de desenho da tela e nos permite desenhar formas 2D nela.

+ +

Em seguida, definimos variáveis chamadas width e height, e a largura e altura do elemento canvas (representado pelas propriedades canvas.width e canvas.height) para igualar a largura e a altura da viewport do navegador (a área em que a página da Web aparece — isso pode ser obtido das propriedades {{domxref("Window.innerWidth")}} e {{domxref("Window.innerHeight")}} ).

+ +

Você verá aqui que estamos encadeando várias tarefas juntas, para que as variáveis sejam todas mais rápidas — isso é perfeitamente aceitável.

+ +

A última parte do script inicial é a seguinte:

+ +
function random(min, max) {
+  const num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Essa função usa dois números como argumentos e retorna um número aleatório no intervalo entre os dois.

+ +

Modelando uma bola no nosso programa

+ +

Nosso programa contará com muitas bolas saltando ao redor da tela. Como todas essas bolas se comportarão da mesma maneira, faz sentido representá-las com um objeto. Vamos começar adicionando o construtor a seguir ao final do código.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+ +

Aqui incluímos alguns parâmetros que definem as propriedades que cada bola precisa para funcionar em nosso programa:

+ + + +

Isso classifica as propriedades, mas e os métodos? Queremos realmente fazer com que nossas bolas façam algo em nosso programa.

+ +

Desenhando a bola

+ +

Primeiro adicione o seguinte método draw() ao prototype do Ball():

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Usando esta função, podemos dizer a nossa bola para desenhar-se na tela, chamando uma série de membros do contexto de tela 2D que definimos anteriormente (ctx). O contexto é como o papel, e agora queremos comandar nossa caneta para desenhar algo nela:

+ + + +

Você pode começar a testar seu objeto já.

+ +
    +
  1. Salve o código até o momento e carregue o arquivo HTML em um navegador.
    2. +
  2. Abra o console JavaScript do navegador e, em seguida, atualize a página para que o tamanho da tela mude para a viewport menor visível deixada quando o console for aberto.
    3. +
  3. Digite o seguinte para criar uma nova instância de bola: + 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Tente chamar seus membros: + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Quando você entra na última linha, você deve ver a bola se desenhando em algum lugar na sua tela.
    6. +
+ +

Atualizando os dados da bola

+ +

Podemos desenhar a bola na posição, mas para começar a mover a bola, precisamos de uma função de atualização de algum tipo. Adicione o seguinte código na parte inferior do seu arquivo JavaScript, para adicionar um método  update() ao prototype do Ball():

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

As primeiras quatro partes da função verificam se a bola atingiu a borda da tela. Se tiver, invertemos a polaridade da velocidade relevante para fazer a bola viajar na direção oposta. Assim, por exemplo, se a bola estava viajando para cima (positivo velY), então a velocidade vertical é alterada de forma que ela comece a viajar para baixo (negativo velY).

+ +

Nos quatro casos, estamos verificando se:

+ + + +

Em cada caso, estamos incluindo o size da bola no cálculo, porque as coordenadas x/y estão no centro da bola, mas queremos que a borda da bola saia do perímetro — não queremos a bola para fique no meio da tela antes de quicar de volta.

+ +

As duas últimas linhas adicionam o valor velX à coordenada x, e o valor velY à coordenada y —  a bola é efitivamente movida cada vez que este método é chamado.

+ +

Isso é o que será feito por ora; vamos continuar com alguma animação!

+ +

Animando a bola

+ +

Agora vamos tornar isso divertido. Vamos começar a adicionar bolas à tela e a animá-las.

+ +
    +
  1. Primeiro, precisamos de um lugar para armazenar todas as nossas bolas. O array a seguir fará esse trabalho — adicione-o ao final do seu código agora: + 
    let balls = [];
    + +

    Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas.

    +
    2. +
  2. Adicione o seguinte ao final do seu código agora: + 
    function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length < 25) {
+    let size = random(10,20);
+    let ball = new Ball(
+      // ball position always drawn at least one ball width
+      // away from the edge of the canvas, to avoid drawing errors
+      random(0 + size,width - size),
+      random(0 + size,height - size),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      size
+    );
+    balls.push(ball);
+  }
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
    + +

    Nossa função loop() faz o seguinte:

    + +
      +
    • Define a cor de preenchimento da tela como preto semitransparente e desenha um retângulo com a cor em toda a largura e altura da tela, usando fillRect() (os quatro parâmetros fornecem uma coordenada de início e uma largura e altura para o retângulo desenhado ). Isso serve para encobrir o desenho do quadro anterior antes que o próximo seja desenhado. Se você não fizer isso, você verá apenas longas cobras se movimentando ao redor da tela, em vez de mover as bolas! A cor do preenchimento é definida como semitransparente, rgba(0,0,0,0.25), para permitir que os poucos quadros anteriores brilhem levemente, produzindo as pequenas trilhas atrás das bolas à medida que elas se movem. Se você mudou 0,25 para 1, você não vai mais vê-los. Tente variar esse número para ver o efeito que ele tem.
      • +
    • Cria uma nova instância de nossa  Ball() usando valores aleatórios gerados com a nossa função  random() então push()para o final de nosso array de bolas, mas somente enquanto o número de bolas no array é menor que 25. Então quando temos 25 bolas na tela, não aparecem mais bolas. Você pode tentar variar o número emballs.length < 25 para obter mais ou menos bolas na tela. Dependendo de quanto poder de processamento seu computador / navegador possui, especificar vários milhares de bolas pode retardar bastante a animação!
      • +
    • Faz um loop em todas as balls no array de bolas e executa a função draw() e update() de cada bola para desenhar cada uma delas na tela, depois faz as atualizações necessárias para a posição e a velocidade no tempo para o próximo quadro.
      • +
    • Executa a função novamente usando o método requestAnimationFrame() — quando esse método é executado constantemente e passa o mesmo nome de função, ele executará essa função um número definido de vezes por segundo para criar uma animação suave. Isso geralmente é feito de forma recursiva — o que significa que a função está chamando a si mesma toda vez que é executada, portanto, ela será executada repetidas vezes.
      • +
    +
    3. +
  3. Por último mas não menos importante, adicione a seguinte linha à parte inferior do seu código — precisamos chamar a função uma vez para iniciar a animação. + 
    loop();
    +
    4. +
+ +

É isso para o básico — tente salvar e atualizar para testar suas bolas quicando!

+ +

Adicionando detecção de colisão

+ +

Agora, para um pouco de diversão, vamos adicionar alguma detecção de colisão ao nosso programa, para que nossas bolas saibam quando bateram em outra bola.

+ +
    +
  1. Primeiro de tudo, adicione a seguinte definição de método abaixo onde você definiu o método  update() (ou seja, o bloco Ball.prototype.update). + + 
    Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Esse método é um pouco complexo, então não se preocupe se você não entender exatamente como isso funciona agora. Uma explicação a seguir:

    + +
      +
    • Para cada bola, precisamos checar todas as outras bolas para ver se ela colidiu com a bola atual. Para fazer isso, abrimos outro loop for para percorrer todas as bolas no array balls[].
      • +
    • Imediatamente dentro de nosso loop for, usamos uma instrução  if para verificar se a bola atual em loop é a mesma bola que estamos verificando no momento. Não queremos verificar se uma bola colidiu consigo mesma! Para fazer isso, verificamos se a bola atual (ou seja, a bola cujo método collisionDetect está sendo invocado) é a mesma que a bola de loop (ou seja, a bola que está sendo referenciada pela iteração atual do loop for no collisionDetect método). Nós então usamos ! para negar a verificação, para que o código dentro da instrução if seja executado apenas se eles não forem iguais.
      • +
    • Em seguida, usamos um algoritmo comum para verificar a colisão de dois círculos. Estamos basicamente verificando se alguma das áreas dos dois círculos se sobrepõe. Isso é explicado ainda mais na 2D collision detection.
      • +
    • Se uma colisão for detectada, o código dentro da instrução if interna será executado. Neste caso, estamos apenas definindo a propriedade color de ambos os círculos para uma nova cor aleatória. Poderíamos ter feito algo muito mais complexo, como fazer com que as bolas saltassem umas das outras de forma realista, mas isso teria sido muito mais complexo de implementar. Para essas simulações físicas, os desenvolvedores tendem a usar jogos ou bibliotecas físicas, como PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. Você também precisa chamar esse método em cada quadro da animação. Adicione o seguinte abaixo do balls[i].update();: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Salve e atualize a demonstração novamente, e você verá suas bolas mudando de cor quando colidirem!
    4. +
+ +
+

Note: If you have trouble getting this example to work, try comparing your JavaScript code against our finished version (also see it running live).

+
+ +

Sumário

+ +

Esperamos que você tenha se divertido escrevendo seu próprio exemplo de bolas saltitantes aleatórias do mundo real, usando várias técnicas orientadas a objetos e objetos de todo o módulo! Isso deve ter lhe dado alguma prática útil no uso de objetos e um bom contexto do mundo real.

+ +

É isso para artigos de objetos — tudo o que resta agora é para você testar suas habilidades na avaliação de objetos.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/javascript/objects/object_prototypes/index.html b/files/pt-br/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..c574781301 --- /dev/null +++ b/files/pt-br/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,269 @@ +--- +title: Protótipos de objetos +slug: Aprender/JavaScript/Objetos/Object_prototypes +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +

Protótipos são o mecanismo pelo qual objetos JavaScript herdam recursos uns dos outros. Neste artigo, explicamos como as cadeias de protótipos funcionam e observamos como a propriedade prototype pode ser usada para adicionar métodos aos construtores existentes.

+ + + + + + + + + + + + +
Pré-requisitos:Entender como funções em JavaScript funcionam, familiaridade com o básico de JavaScript (veja Primeiros Passos e Elementos Construtivos), e o básico de Orientação a Objetos em JavaScript (veja Introdução a Objetos).
Objetivo:Entender protótipos de objetos JavaScript, como a cadeia de protótipos funciona, e como adicionar novos métodos à propriedade prototype.
+ +

Uma linguagem baseada em protótipos?

+ +

O JavaScript é frequentemente descrito como uma linguagem baseada em protótipos — para fornecer herança, os objetos podem ter um objeto de protótipo, que atua como um objeto de modelo do qual herda métodos e propriedades. O objeto de protótipo de um objeto também pode ter um objeto de protótipo, do qual herda métodos e propriedades, e assim por diante. Isso geralmente é chamado de cadeia de protótipos e explica por que objetos diferentes têm propriedades e métodos definidos em outros objetos disponíveis para eles.

+ +

Bem, para ser exato, as propriedades e os métodos são definidos na propriedade prototype nas funções construtoras dos Objetos, não nas próprias instâncias do objeto.

+ +

Em JavaScript, é feito um link entre a instância do objeto e seu protótipo (sua propriedade  __proto__, que é derivada da propriedade prototype no construtor), e as propriedades e os métodos são encontrados percorrendo a cadeia de protótipos.

+ +
+

Note: É importante entender que há uma distinção entre o protótipo de um objeto (que está disponível por meio de Object.getPrototypeOf(obj), ou por meio da propriedade __proto__ ) e a propriedade prototype em funções construtoras. O primeiro é a propriedade em cada instância e o último é a propriedade no construtor. Ou seja, Object.getPrototypeOf(new Foobar()) efere-se ao mesmo objeto que Foobar.prototype.

+
+ +

Vejamos um exemplo para tornar isso um pouco mais claro.

+ +

Noções básicas sobre objetos de protótipo

+ +

Aqui voltaremos ao exemplo em que terminamos de escrever nosso construtor Person() — carregamos o exemplo em seu navegador. Se você ainda não o conseguiu trabalhar no último artigo, use nosso exemplo  oojs-class-further-exercises.html (veja também o código-fonte).

+ +

Neste exemplo, definimos uma função construtora, assim:

+ +
function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+  this.first = first;
+  this.last = last;
+//...
+}
+ +

Nós criamos então uma instância de objeto como esta:

+ +
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
+ +

Se você digitar "person1." em seu console JavaScript, você deve ver o navegador tentar concluir automaticamente isso com os nomes de membros disponíveis neste objeto:

+ +

+ +

Nesta lista, você verá os membros definidos no construtor de person1's constructor — Person() — name, age, gender, interests, bio, e greeting. No entanto, você também verá alguns outros membros — watch, valueOf, etc — estes estão definidos no objeto de protótipo do Person(), que é Object.

+ +

+ +

O que acontece se você chamar um método em person1, que é realmente definido em Object? Por exemplo:

+ +
person1.valueOf()
+ +

Este método — Object.valueOf() é herdado por  person1 porque seu construtor é Person(), e o protótipo de Person() é  Object(). valueOf() retorna o valor do objeto em que é chamado — experimente e veja! Nesse caso, o que acontece é:

+ + + +
+

Nota: Queremos reiterar que os métodos e as propriedades não são copiados de um objeto para outro na cadeia de protótipos — eles são acessados ao percorrer a cadeia como descrito acima.

+
+ +
+

Nota: Não existe uma maneira oficial de acessar diretamente o objeto protótipo de um objeto — os "links" entre os itens da cadeia são definidos em uma propriedade interna, chamada de [[prototype]] na especificação da linguagem JavaScript (veja {{glossary("ECMAScript")}}). A maioria dos navegadores modernos, no entanto, tem uma propriedade disponível neles chamada __proto__ (que é sublinhada em ambos os lados), que contém o objeto de protótipo do construtor do objeto. Por exemplo, tente person1.__proto__ and person1.__proto__.__proto__ para ver como a cadeia se parece no código!

+ +

Desde ECMAScript 2015 você pode acessar o objeto protótipo de um objeto indiretamente via Object.getPrototypeOf(obj).

+
+ +

A propriedade prototype: Onde os membros herdados são definidos

+ +

Então, onde estão as propriedades e os métodos herdados definidos? Se você observar a página de referência do  Object, verá, à esquerda, um grande número de propriedades e métodos — muito mais do que o número de membros herdados que vimos disponíveis no objeto person1. Alguns são herdados e outros não — por que isso acontece?

+ +

Como mencionado acima, os herdados são os definidos na propriedade  prototype (você poderia chamá-lo de um subespaço de nomes) — ou seja, aqueles que começam com Object.prototype., e não os que começam com apenas Object. O valor da propriedade prototype é um objeto, que é basicamente um bucket para armazenar propriedades e métodos que queremos que sejam herdados por objetos mais abaixo na cadeia de protótipos.

+ +

Portanto, Object.prototype.watch(), Object.prototype.valueOf(), etc., estão disponíveis para qualquer tipo de objeto que herda de Object.prototype, incluindo novas instâncias de objeto criadas a partir do construtor Person().

+ +

Object.is(), Object.keys(), e outros membros não definidos dentro do bloco prototype não são herdados por instâncias de objetos ou tipos de objetos que herdam de Object.prototype. Eles são métodos / propriedades disponíveis apenas no próprio construtor Object().

+ +
+

Nota: Isso parece estranho — como você pode ter um método definido em um construtor, que é em si uma função? Bem, uma função também é um tipo de objeto — veja a referência do construtor Function() se você não acredita em nós.

+
+ +
    +
  1. Você pode conferir as propriedades de protótipo existentes para si mesmo — volte ao nosso exemplo anterior e tente inserir o seguinte no console JavaScript: + 
    Person.prototype
    +
    2. +
  2. A saída não mostrará muito porque não definimos nada no protótipo do nosso construtor personalizado! Por padrão, o  prototype de um construtor sempre começa vazio. Agora tente o seguinte: + 
    Object.prototype
    +
    3. +
+ +

Você verá um grande número de métodos definidos na propriedade prototype  do  Object, que estão disponíveis em objetos que herdam  Object, como mostrado anteriormente.

+ +

Você verá outros exemplos de herança de cadeia de protótipos em todo o JavaScript — tente procurar os métodos e propriedades definidos no protótipo dos objetos globais String, Date, Number, e Array, por exemplo. Estes todos têm um número de membros definidos em seu protótipo, e é por isso que, por exemplo, quando você cria uma string, como esta:

+ +
var myString = 'This is my string.';
+ +

myString imediatamente tem vários métodos úteis disponíveis, como split(), indexOf(), replace(), etc.

+ +
+

Nota: Vale a pena ler nosso guia mais aprofundado sobre Como usar protótipos em JavaScript, uma vez que você tenha entendido esta seção e queira saber mais. Esta seção é intencionalmente simplificada para tornar esses conceitos um pouco mais fáceis de entender quando você os conhecer pela primeira vez.

+
+ +
+

Importante: A propriedade prototype é uma das partes com o nome mais confuso do JavaScript — você pode pensar que this aponta para o objeto de protótipo do objeto atual, mas não (esse é um objeto interno que pode ser acessado por __proto__, lembra?) . Em vez disso, prototype é uma propriedade que contém um objeto no qual você define os membros que deseja herdar.

+
+ +

Revisitando create()

+ +

Anteriormente mostramos como o método Object.create() pode ser usado para criar uma nova instância de objeto.

+ +
    +
  1. Por exemplo, tente isso no console JavaScript do seu exemplo anterior: + 
    var person2 = Object.create(person1);
    +
    2. +
  2. O que create() realmente faz é criar um novo objeto a partir de um objeto de protótipo especificado. Aqui, person2 está sendo criado usando  person1 como um objeto de protótipo. Você pode verificar isso inserindo o seguinte no console: + 
    person2.__proto__
    +
    3. +
+ +

Isso retornará o person1.

+ +

A propriedade do construtor

+ +

Toda função de construtor possui uma propriedade prototype cujo valor é um objeto que contém uma propriedade constructor. Esta propriedade construtora aponta para a função construtora original. Como você verá na próxima seção, as propriedades definidas na propriedade Person.prototype (ou, em geral, na propriedade prototype de uma função construtora, que é um objeto, conforme mencionado na seção acima) tornam-se disponíveis para todos os objetos de instância criados usando Construtor Person(). Portanto, a propriedade constructor também está disponível para os objetos person1 e person2.

+ +
    +
  1. Por exemplo, tente estes comandos no console: + 
    person1.constructor
+person2.constructor
    + +

    Estes devem retornar o construtor Person(), pois contém a definição original dessas instâncias.

    + +

    Um truque inteligente é que você pode colocar parênteses no final da propriedade do constructor (contendo quaisquer parâmetros necessários) para criar outra instância de objeto daquele construtor. O construtor é uma função depois de tudo, então pode ser chamado usando parênteses; você só precisa incluir a palavra-chave new para especificar que deseja usar a função como um construtor.

    +
    2. +
  2. Tente isso no console: + 
    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    +
    3. +
  3. Agora tente acessar os recursos do seu novo objeto, por exemplo: + 
    person3.name.first
+person3.age
+person3.bio()
    +
    4. +
+ +

Isso funciona bem. Você não precisará usá-lo com frequência, mas pode ser realmente útil quando você deseja criar uma nova instância e não tem uma referência ao construtor original facilmente disponível por algum motivo.

+ +

A propriedade do constructor tem outros usos. Por exemplo, se você tiver uma instância de objeto e desejar retornar o nome do construtor do qual ela é uma instância, use o seguinte:

+ +
instanceName.constructor.name
+ +

Tente isso, por exemplo:

+ +
person1.constructor.name
+
+ +
+

Nota: O valor de  constructor.name pode mudar (devido à herança prototípica, ligação, pré-processadores, transpilers, etc.), portanto, para exemplos mais complexos, você desejará usar o operador instanceof. 

+
+ +
    +
+ +

Modificando Protótipos

+ +

Vamos dar uma olhada em um exemplo de modificação da propriedade prototype de uma função construtora — os métodos adicionados ao protótipo estão então disponíveis em todas as instâncias de objeto criadas a partir do construtor. Neste ponto, finalmente adicionaremos algo ao protótipo do nosso construtor Person().

+ +
    +
  1. Volte para o nosso exemplo de oojs-class-further-exercises.html e faça uma cópia local do código-fonte. Abaixo do JavaScript existente, adicione o seguinte código, que adiciona um novo método à propriedade prototype do construtor: + + 
    Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};
    +
    2. +
  2. Salve o código e carregue a página no navegador e tente inserir o seguinte na entrada de texto: + 
    person1.farewell();
    +
    3. +
+ +

Você deve receber uma mensagem de alerta, mostrando o nome da pessoa, conforme definido dentro do construtor. Isso é realmente útil, mas o que é ainda mais útil é que toda a cadeia de herança foi atualizada dinamicamente, disponibilizando automaticamente esse novo método em todas as instâncias de objeto derivadas do construtor.

+ +

Pense nisso por um momento. Em nosso código, definimos o construtor, então criamos um objeto de instância a partir do construtor, então adicionamos um novo método ao protótipo do construtor:

+ +
function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};
+ +

Mas o método  farewell() ainda está disponível na instância do objeto  person1 — seus membros foram atualizados automaticamente para incluir o método farewell().

+ +
+

Note: Se você está tendo problemas para fazer este exemplo funcionar, dê uma olhada no nosso exemplo oojs-class-prototype.html (veja também running live).

+
+ +

Você raramente verá propriedades definidas na propriedade prototype, porque elas não são muito flexíveis quando definidas dessa forma. Por exemplo, você poderia adicionar uma propriedade assim:

+ +
Person.prototype.fullName = 'Bob Smith';
+ +

sso não é muito flexível, pois a pessoa pode não ser chamada assim. Seria muito melhor construir o fullName fora do name.first e name.last:

+ +
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+ +

No entanto, isso não funciona, pois  this fará referência ao escopo global nesse caso, não ao escopo da função. Chamar essa propriedade retornaria undefined undefined. Isso funcionou bem no método que definimos anteriormente no protótipo porque ele está dentro um escopo de função, que será transferido com sucesso para o escopo da instância do objeto, portanto, você pode definir propriedades constantes no protótipo (ou seja, aquelas que nunca precisam ser alteradas), mas geralmente funciona melhor definir propriedades dentro do construtor.

+ +

Na verdade, um padrão bastante comum para mais definições de objetos é definir as propriedades dentro do construtor e os métodos no protótipo. Isso torna o código mais fácil de ler, pois o construtor contém apenas as definições de propriedade e os métodos são divididos em blocos separados. Por exemplo:

+ +
// Constructor with property definitions
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// First method definition
+
+Test.prototype.x = function() { ... };
+
+// Second method definition
+
+Test.prototype.y = function() { ... };
+
+// etc.
+ +

Esse padrão pode ser visto em ação no exemplo de aplicativo de plano escolar de Piotr Zalewa.

+ +

Sumário

+ +

Este artigo abrangeu protótipos de objetos JavaScript, incluindo como cadeias de objetos de protótipos permitem que objetos herdem recursos uns dos outros, a propriedade prototype e como ela pode ser usada para adicionar métodos a construtores e outros tópicos relacionados.

+ +

No próximo artigo, veremos como você pode implementar a herança de funcionalidade entre dois dos seus próprios objetos personalizados.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

+ + + +

Neste módulo

+ + diff --git a/files/pt-br/learn/learning_and_getting_help/index.html b/files/pt-br/learn/learning_and_getting_help/index.html new file mode 100644 index 0000000000..39d219bae4 --- /dev/null +++ b/files/pt-br/learn/learning_and_getting_help/index.html @@ -0,0 +1,315 @@ +--- +title: Learning and getting help +slug: Aprender/Learning_and_getting_help +translation_of: Learn/Learning_and_getting_help +--- +

{{learnsidebar}}{{draft}}

+ +

É muito bom aplicar seu tempo e esforço para aprender a fazer coisas novas, mas seu aprendizado poderá ser mais eficaz se você adotar boas práticas durante o percurso. Nem sempre você terá sucesso em realizar uma tarefa; se você não for uma pessoa com transtorno hiperativo, poderá ficar preso a uma tarefa devido a determinação de nunca desistir enquanto não conseguir realizar o objetivo traçado. Se não conseguir pode ficar frustrado. Mesmo desenvolvedores profissionais sentem-se assim de vez em quando. Para quem é sempre focado, vale a pena descobrir maneiras eficazes de pedir e receber ajuda para não ficar atolado em uma tarefa e consequentemente progredir na capacitação técnica. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..

+ +

Effective learning

+ +

Let's move straight on and think about effective learning.

+ +

Different learning methods

+ +

It is interesting to consider that there are two main ways in whch your brain learns things — focused and diffuse learning:

+ + + +

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage on both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality both are very important.

+ +

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. 

+ +

For that you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

+ +

This is why it is usually good to read some introductory material first to get a high level understanding of an area, before you leap into the specific details.

+ +

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

+ +
    +
  1. Know how to fix problem A with tool A.
    2. +
  2. Know how to fix problem B with tool B.
    3. +
  3. Not know how to fix problem C.
    4. +
+ +

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

+ +

Different learning materials

+ +

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

+ +

Textual articles

+ +

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS background property"?)

+ +

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

+ +

There are also several other great resources on the web, some of which we'll mention below.

+ +
+

Note: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem solving and learning patterns than it is about learning lots of syntax.

+
+ +

Videos

+ +

There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.

+ +

Interactive code playgrounds

+ +

You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. Codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.

+ +

Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!

+ +
+

Note: Online code editors are also really useful for sharing code you've written, for example if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You cna share the web address of the example with them so they can see it.

+
+ +
+

Note: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.

+
+ +

Making a plan

+ +

It is a good idea to create a plan to help you achieve what you want to achieve through your learning.

+ +

A goal statement

+ +

It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:

+ + + +

The following are not quite as reasonable:

+ + + +

What do you need to get there?

+ +

Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:

+ +

Materials I need:

+ + + +

Knowledge I need:

+ + + +

How much time and money will it take?

+ +

Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.

+ +

How many hours per week do I need to do?

+ +

Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:

+ +

"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."

+ +

How much time you can spend on this of course depends on what your circumstances are. If you at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.

+ +

If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!

+ +

When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple speadsheet or even in a notebook!

+ +

Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:

+ + + +

Keep thinking about how much progress you are making, and adjust your plan if needs be.

+ +

Staying motivated

+ +

It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:

+ + + +

Effective problem solving

+ +

There is no one effective way to solve all problems (and learn all things) associated wth web design and development, but there some general bits of advice that will serve you well in most cases.

+ +

Break things down into chunks

+ +

For a start, when you are trying to implement something specific and it sems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.

+ +

For example, if you are looking a task of "Build a simple two column website", you could break it down as follows:

+ + + +

Then you could break it down further, for example "Implement horizontal navigation menu" could be written out as:

+ + + +

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!

+ +

Learn and recognise the patterns

+ +

As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll problem immediately start thinking of a solution like this:

+ +

A nav menu is usually created from a list of links, something like:

+ +
<ul>
+  <li>First menu item</li>
+  <li>Second menu item</li>
+  <li>Third menu item</li>
+  <li>etc.</li>
+</ul>
+
+ +

To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:

+ +
ul {
+  display: flex;
+}
+ +

To remove unneeded spacing and bullet points, we can do this:

+ +
ul {
+  list-style-type: none;
+  padding: 0;
+}
+ +

etc.

+ +

If you are a complete beginner to web development, you'll have to do some study and web searches, and look up solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of syntax that you forgot since then.

+ +

When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.

+ +

In addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.

+ +
+

Note: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.

+
+ +
+

Note: The simplest solution is often the best.

+
+ +

Getting practice

+ +

The more you practice solving a problem, the stronger your brain's neutral pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.

+ +

Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.

+ +

Getting help

+ +

Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.

+ +

There are a variety of ways to get help, and what follows are some tips for doing so more effectively.

+ +

Effective web searches

+ +

One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? 

+ +

It is often fairly obvious what to search for. For example:

+ + + +

If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.

+ + + +

Error messages

+ +

If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.

+ +
+

Note: Stack Overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.

+
+ +

Browser testing

+ +

It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:

+ + + +

Using MDN

+ +

The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.

+ +

We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.

+ +

If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality, or better still, use your favorite search engine and put "mdn" in front of the search term, for example "mdn responsive web design" or "mdn background-color".

+ +

Other online resources

+ +

We already mentioned Stack Overflow, but there are other online resources that can help.

+ +

It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:

+ + + +

However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.

+ +

Physical meetups

+ +

Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater for beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.

+ +

You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example student or diversity tickets.

+ +

See also

+ + diff --git a/files/pt-br/learn/release_notes/index.html b/files/pt-br/learn/release_notes/index.html new file mode 100644 index 0000000000..d90c63c81b --- /dev/null +++ b/files/pt-br/learn/release_notes/index.html @@ -0,0 +1,66 @@ +--- +title: Learning area release notes +slug: Aprender/Release_notes +translation_of: Learn/Release_notes +--- +
{{learnsidebar}}
+ +

Esta página detalha as mudanças significativas feitas na área de aprendizagem. Volte aqui se quiser saber qual conteúdo novo está disponível e qual conteúdo existente foi aprimorado.

+ +

Se você quiser dar feedback sobre qualquer uma dessas novas adições, deixe seus comentários em nosso Fórum de discussão.

+ +

Junho 2020

+ +

Nosso Caminho de aprendizagem para desenvolvedores da web de front-end foi oficialmente lançado! confira um caminho opcional a seguir  para o desenvolvimento de front-end de aprendizagem! Consulte também  nossa postagem sobro hacks — Apresentando o caminho de aprendizagem do desenvolvimento do MDN Web Docs Front-end — para obter mais informações sobre a lógica por trás disso.

+ +

Maio 2020

+ +

Nosso módulo Entendendo as estruturas do Client-side JavaScript  já está disponível. Aprenda por que existem frameworks, quando você deve usar um (e quando não deveria), que tipos de recursos são comuns a todos os frameworks e como eles se relacionam com o JavaScript básico que você conhece. Depois de ter uma compreensão geral das estruturas, vá para a série de tutoriais que abrangem estruturas populares como React, Ember e Vue.

+ +

Nosso aprendizado de  Web Forms agora tem avaliações "Teste suas habilidades" que acompanham os artigos.

+ +

Abril 2020

+ +

Nosso novo módulo Entendendo as ferramentas de desenvolvimento client-side web foi lançado! Aprenda os fundamentos das ferramentas de desenvolvimento da web, incluindo os tipos de ferrramentas existentes, as linhas de comando, gerenciadores de pacotes e como montar sua própria cadeia de ferramentas funcionais.

+ +

Março 2020

+ +

Agora você encontrará avaliações "Teste suas habilidades" que acompanham os artigos nos seguintes módulos:

+ + + +

Janeiro 2020

+ +

O módulo de formulários HTML foi significativamente atualizado:

+ + + +

Mais seções "Teste suas habilidades" foram adicionadas. Você pode ver isso em:

+ + + +

Dezembro 2019

+ +

estamos adicionando um novo tipo de artigo de avaliação à área de aprendizado — "Teste suas habilidades" — que oferecerá várias perguntas curtas destinadas a testar rapidadmente se você entendeu o que está acontecendo. Isso é uma adição aos artigos de avaliação mais longos que você já encontrará em alguns módulos de aprendizagem. Você encontrará esses novos artigos com links nas seções "Teste suas habilidades" na parte inferior dos artigos relevantes. Você pode ver isso em:

+ + diff --git a/files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html b/files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html deleted file mode 100644 index 101d1a15ad..0000000000 --- a/files/pt-br/learn/server-side/django/ambiente_de_desenvolvimento/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Configurando um ambiente de desenvolvimento Django -slug: Learn/Server-side/Django/ambiente_de_desenvolvimento -tags: - - Ambiente de desenvolvimento - - Aprender - - Iniciante - - Instalação - - Introdução - - Python - - django -translation_of: Learn/Server-side/Django/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
- -

Agora que você sabe para que serve o Django, nós iremos te mostrar como instalar, configurar e testar um ambiente de desenvolvimento no Windows, Linux (Ubuntu), e macOS - seja qual for o sistema operacional (SO) que você usar, este artigo deve fornecê-lo o suficiente para conseguir começar a desenvolver aplicativos Django.

- - - - - - - - - - - - -
Pré-requisitos:Saber como usar um teminal / linha de comando. Saber instalar softwares em seu sistema operacional.
Objetivo:Ter uma ambiente de desenvolvimento Django (2.0) operando em seu computador.
- -

Visão geral do ambiente de desenvolvimento Django

- -

Django facilita muito a configuração em seu computador para iniciar logo o desenvolvimento de aplicações web. Essa seção explica o que você ganha com o ambiente de desenvolvimento e fornece um plano geral de algumas opções de instalação e configuração. O resto do artigo explica o método recomendado de instalar o ambiente Django no Ubuntu, macOS e Windows e como testar.

- -

O que é o ambiente de desenvolvimento Django?

- -

O ambiente de desenvolvimento é uma instalação do Django em seu computador local para que você use-o para desenvolver e testar apps Django antes de implementá-los em um ambiente de produção

- -

A principal ferramenta que Django fornece é um conjunto de scripts Python para criar e trabalhar com projetos Django, junto com um simples webserver de desenvolvimento que você pode usar para testar localmente (i.e. no seu computador, não em um web server externo) aplicações web Django no seu navegador.

- -

Existem outras ferramentas secundárias que fazem parte do ambiente de desenvolvimento que não cobriremos aqui. Isso inclui coisas como um editor de texto ou IDE para edição de código, e uma ferramenta pra gerenciamento do controle de origem de códigos (como o Git) para administrar com segurança as diferentes versões de seu sistema. Nós estamos assumindo que você já tem um editor de texto instalado.

- -

Quais são as opções de instalação do Django?

- -

Django é extremamente flexível em termos de como e onde ele pode ser instalado e configurado. Django pode:

- - - -

Cada opção requer leves diferenças de configuração e instalação. As subseções abaixo explicam algumas de suas escolhas. No resto do artigo nós iremos mostrar como instalar o Django em um pequeno número de sistemas operacionais. No resto do módulo, assumiremos que você tenha instalado o Django em sua máquina.

- -
-

Nota: Outras possíveis opções de instalação são cobertas pela documentação oficial do Django. Nós linkamos os documents adequados abaixo.

-
- -

Quais sistemas operacionais suportam Django?

- -

Aplicações web Django podem rodar em quase todas as maquinas que suportam a linguagem de programação Python 3. Windows, macOS, Linux/Unix e Solaris são alguns desses SO's. A maioria dos computadores atuais devem ter o desempenho necessário para operar Django.

- -

Neste artigo, iremos fornecer instruções para Windows, macOS a Linux/Unix.

- -

Qual versão de Python deve ser usada?

- -

Nós recomendamos que use a mais recente versão disponível — no momento que escrevo é Python 3.7.1.

- -

Se necessário, versões a partir de Python 3.5 podem ser usadas (o suporte para Python 3.5 irá acabar em versões futuras).

- -
-

Nota: Python 2.7 não pode ser usado com Django 2.1 (A série Django 1.11.x é a última  que suporta Python 2.7).

-
- -

Onde posso baixar o Django?

- -

Existem três lugares para fazer o download do Django:

- - - -

Este artigo mostra a instalação pelo Pypi, pois queremos a última versão estável do Django.

- -

Qual banco de dados?

- -

Django suporta (principalmente) quatro bancos de dados (PostgreSQL, MySQL, Oracle, e SQLite ), contudo, existem bibliotecas community que fornecem níveis variados de suporte para outros populares bancos de dados SQL e NoSQL. Nós recomendamos que você use o mesmo banco de dados tanto para produção quanto para desenvolvimento (embora o Django abstraia muitas das diferenças dos bancos de dados usando seu Object-Relational Mapper (ORM), ainda há problemas em potencial que é melhor evitar).

- -

Neste artigo (e na maior parte deste módulo) nós usaremos o banco de Dados SQLite, que armazena dados em um arquivo. SQLite é destinado para uso sendo um banco de dados leve e que não consegue suportar uma demanda muito alta. Entretanto, uma excelente opção para aplicações de que focam em leitura de dados.

- -
-

Nota: Django é configurado por padrão a usar SQLite ao iniciar seu projeto usando as ferramentas padrão (django-admin). É uma ótima escolha quando você está começando, porque não requer configurações adicionais ou instalações.

-
- -

Instalar em todo o sistema ou em um ambiente virtual Python?

- -

Quando você instala Python 3 você pega um único ambiente global que é compartilhado por todo o código Python 3. Enquanto você pode instalar qualquer pacote Python que quiser no ambiente, você pode instalar apenas uma versão particular de cada pacote por vez.

- -
-

Nota: Aplicações Python instaladas no ambiente global têm forte potêncial de entrar em conflito entre si (i.e. se elas dependem de versões diferentes do mesmo pacote).

-
- -

Se você instalar Django no ambiente padrão/global você só será capaz de ter uma versão do Django em seu computador. Isto pode ser um problema se você quer criar novos websites (usando a versão mais recente do Django) enquanto ainda realiza manutenção nos websites que dependem das versões antigas.

- -

Pensando nisso, desenvolvedores experientes de Python/Django normalmente executam apps Python dentro de um ambiente virtual Python independente. Isso permite usar diferentes ambientes Django em um único computador. A própria equipe de desenvolvedores Django recomenda o uso de ambientes virtuais Python!

- -

Esse módulo assume que você instalou o Django em um ambiente virtual, nós iremos mostrá-lo como fazer isso logo abaixo.

- -

Instalando Python 3

- -

Você deve ter Python instalado em seu sistema operacional para usar Django. Se você estiver usando Python 3, também precisará da ferramenta Python Package Index — pip3 — que é usada para administrar (instalar, editar, remover) pacotes/bibliotecas Python usadas por Django e seus outros aplicativos Python.

- -

Essa parte explica brevemente como você pode checar quais versões de Python estão disponíveis e instalar novas versões se necessário (em Ubuntu 18.04, macOS e Windows 10).

- -
-

Nota: Dependendo da sua plataforma, você também pode instalar Python/pip3 no seu sistema operacional através de seu próprio gerenciador de pacotes ou por outros mecanismos. Para a maioria das plataformas, você pode baixar os arquivos necessários para instalação em https://www.python.org/downloads/ e instalá-los usando o método específico da plataforma em questão.

-
- -

Ubuntu 18.04

- -

Ubuntu Linux 18.04 LTS inclui Python 3.6.6 por padrão. Você pode confirmar isso executando o seguinte comando no Terminal:

- -
python3 -V
- Python 3.6.6
- -

Contudo, o Python Package Index, que você precisará para instalar pacotes para Python 3 (incluindo Django), não está disponível por padrão. Você pode instalar pip3 pelo Terminal usando:

- -
sudo apt install python3-pip
-
- -

macOS

- -

macOS "El Capitan" e outras versões mais recentes não incluem Python 3. Você pode confirmar isto executando os comandos abaixo no Terminal:

- -
python3 -V
- -bash: python3: command not found
- -

Você pode instalar Python 3 (com a ferramenta pip3) facilmente em python.org:

- -
    -
  1. Baixe o instalador exigido: -
      -
    1. Acesse https://www.python.org/downloads/
      2. -
    2. Selecione o botão Download Python 3.7.1 (o número exato da versão menor pode diferir).
      3. -
    -
    2. -
  2. Localize o arquivo usando o Finder, e clique duplo no arquivo do pacote. Siga os passos da instalação dos prompts.
    3. -
- -

Agora você pode confirmar se tudo deu certo checando o Python 3 como mostrado abaixo:

- -
python3 -V
- Python 3.7.1
-
- -

Você pode checar se pip3 está instalado listando todos os pacotes disponíveis.

- -
pip3 list
- -

Windows 10

- -

Windows não inclui Python por padrão, mas você pode instalá-lo facilmente (com a ferramenta pip3) em python.org:

- -
    -
  1. Baixe o instalador exigido: -
      -
    1. Acesse https://www.python.org/downloads/
      2. -
    2. Selecione o botão Download Python 3.7.1 (o número exato da versão menor pode diferir).
      3. -
    -
    2. -
  2. Instale Python com um clique duplo no arquivo baixado e siga a instalação dos prompts.
    3. -
  3. Tenha certeza que a caixa "Add Python to PATH" está checada.
    4. -
- -

Você pode verificar se o Python 3 foi instalado colocando o seguinte texto no Prompt de Comando

- -
py -3 -V
- Python 3.7.1
-
- -

O instalador do Windows incorpora pip3 (o administrador de pacotes Python) por padrão. Você pode facilmente listar os pacotes instalados com o comando abaixo:

- -
pip3 list
-
- -
-

Nota: O instalador deve ter configurado tudo que você precisa antes para esse comando funcionar. Se for exibida uma mensagem que Python não encontrou, você pode ter esquecido de adicioná-lo ao PATH do Sistema. Você pode fazer isso exexutando o instalador novamente, selecionando "Modify", e checando a caixa chamada " Add Python to environment variables "  na segunda tela.

-
- -

Usando Django em um ambiente virtual Python

- -

As bibliotecas que nós iremos usar para criar nossos ambientes virtuais são virtualenvwrapper (Linux e macOS) e virtualenvwrapper-win (Windows), sendo que ambas usam a ferramenta virtualenv. as bibliotecas criam uma interface consistente para manusear interfaces em todas plataformas;

- -

Instalando o software de ambiente virtual

- -

Instalação do ambiente virtual no Ubuntu

- -

Após instalar Python e pip, você pode instalar virtualenvwrapper (que incluivirtualenv). O guia oficial para a instalação pode ser encontrado aqui, ou siga as instruções abaixo.

- -

Instale a ferramenta usando pip3:

- -
sudo pip3 install virtualenvwrapper
- -

Em seguida, adicione as linhas abaixo no fim de seu arquivo shell startup (este é um arquivo oculto nomeado .bashrc em seu diretório home). Isto coloca a localização de onde seus ambientes virtuais deveriam estar, a localização dos diretórios para desevolvimento de projetos e a localização do script instalado com o pacote.

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
-
- -
-

Note: As variáveis VIRTUALENVWRAPPER_PYTHON e VIRTUALENVWRAPPER_VIRTUALENV_ARGS apontam para  a localização em uma instalação normal de Python 3, e source /usr/local/bin/virtualenvwrapper.sh aponta para a localização normal do script virtualenvwrapper.sh Se virtualenv não funciona quando você testa, uma coisa a se verificar é se o Python e o script estão na localização esperada (e então alterar o arquivo de startup com os caminhos corretos).
-
- Você pode encontrar a localização correta no seu sistema usando os comandos which virtualenvwrapper.sh e which python3.

-
- -

Recarregue o arquivo de startup executando o seguinte comando no Terminal:

- -
source ~/.bashrc
- -

Após executar o comando, você deveria ver scripts como esses:

- -
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
-
- -

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv.

- -

Instalação do ambiente virtual no macOS

- -

Instalar virtualenvwrapper no macOS é quase a mesma coisa que instalar no Ubuntu (novamente, você pode seguir as instruções do guia oficial de instalação ou as instruções abaixo).

- -

Instale virtualenvwrapper (e virtualenv) usando pip como abaixo.

- -
sudo pip3 install virtualenvwrapper
- -

Então adicione as seguintes linhas no arquivo de startup do seu shell.

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
- -
-

Note: A variável VIRTUALENVWRAPPER_PYTHON  aponta para uma localização em uma instalação normal de Python 3, e source /usr/local/bin/virtualenvwrapper.sh aponta para a localização comum do script virtualenvwrapper.sh. Se virtualenv não funciona quando você testa, uma coisa a se verificar é se o Python e o script estão na localização esperada (e então alterar o arquivo de startup com os caminhos corretos).

- -

Por exemplo, uma instalação teste no macOS termina com as seguintes linhas no arquivo de startup:

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
- -

Você pode encontrar a localização correta no seu sistema usando os comandos which virtualenvwrapper.sh e which python3.

-
- -

São as mesmas linhas digitadas no Ubuntu, mas o arquivo de startup é diferente nomeado como .bash_profile, oculto no seu diretório home.

- -
-

Nota: Se você não acha o arquivo .bash_profile pelo finder, você pode abir pelo terminal usando o nano.

- -

Os comandos são como esses:

- -
cd ~  # Navigate to my home directory
-ls -la #List the content of the directory. YOu should see .bash_profile
-nano .bash_profile # Open the file in the nano text editor, within the terminal
-# Scroll to the end of the file, and copy in the lines above
-# Use Ctrl+X to exit nano, Choose Y to save the file.
-
-
- -

Atualize o arquivo de startup fazendo o seguinte chamado no terminal:

- -
source ~/.bash_profile
- -

Com isso, você deveria ver alguns scripts na tela do terminal sendo executados (os mesmos scripts da instalação no Ubuntu). Agora você está apto a criar um novo ambiente virtual pelo comando mkvirtualenv.

- -

Instalação do ambiente virtual no Windows 10

- -

Instalar virtualenvwrapper-win é ainda mais simples que instalar virtualenvwrapper, porque você não precisa configurar onde a ferramenta armazena as informações do ambiente virtual (pois é um valor padrão). Tudo que você precisa fazer é rodar o seguinte comando no Prompt de Comando.

- -
pip3 install virtualenvwrapper-win
- -

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv.

- -

Criando um ambiente virtual

- -

Uma vez que você tenha instalado virtualenvwrapper ou virtualenvwrapper-win, trabalhar com ambientes virtuais é bem parecido em todas as plataformas.

- -

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv. Ao executar esse comando, você verá o ambiente sendo configurado (o que você verá varia um pouco em cada plataforma). Quando o comando encerrar a configuração, o ambiente virtual estará ativo — você pode ver isso porque no topo do prompt (aquela barra de título do programa) estará escrito o nome do ambiente entre colchetes (abaixo nós mostramos como é a criação do ambiente no Ubuntu, mas o comando é igual para o Windows/macOS).

- -
$ mkvirtualenv my_django_environment
-
-Running virtualenv with interpreter /usr/bin/python3
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$
-
- -

Agora que você está em um ambiente virtual, você pode instalar Django e iniciar o desenvolvimento.

- -
-

Nota: De agora em diante, esse artigo (na verdade todo o módulo) está supondo que todos os comando serão executados em um ambiente virtual Python como o que configuramos acima.

-
- -

Usando um ambiente virtual

- -

Existem apenas alguns poucos comandos que você deveria conhecer (há mais comandos que você pode encontrar na documentação da ferramenta, porém, os comandos abaixo serão os que você usará regularmente):

- - - -

Instalando o Django

- -

Após criar um ambiente virtual e usado o comando workon para ativá-lo, você pode usar pip3 para instalar o Django. 

- -
pip3 install django
-
- -

Você pode testar a instalação do Django executando o seguinte comando (isso apenas testa se o Python pode achar o módulo Django):

- -
# Linux/macOS
-python3 -m django --version
- 2.1.5
-
-# Windows
-py -3 -m django --version
- 2.1.5
-
- -
-

Nota: Se o comando Windows acima não mostrar um módulo django, tente:

- -
py -m django --version
- -

No Windows, os scripts Python 3 são iniciados prefixando o comando com py -3, embora isso possa variar de acordo com sua instalação. Tente omitir o modificador -3 se você encontrar algum problema com os comandos. No Linux/macOS, o comando é python3.

-
- -
-

Importante: O resto deste módulo usa o comando Linux  para chamar o Python 3 (python3). Se você  está usando o Windows, substitua o prefixo por: py -3

-
- -

Testando sua instalação

- -

O teste acima funciona, mas não é muito divertido. Um teste mais interessante é criar o esqueleto de um projeto e vê-lo funcionando. Para fazer isso, para isso navegue em seu prompt de comando/terminal até o diretório que quer armazenar seus aplicativos Django. Crie uma pasta para seu site e navegue nela.

- -
mkdir django_test
-cd django_test
-
- -

Agora você pode criar um novo site chamado "mytestsite" usando a ferramenta django-admin. Após criar o site você pode navegar dentro da pasta onde encontrará o script principal para gerenciar projetos, nomeado manage.py.

- -
django-admin startproject mytestsite
-cd mytestsite
- -

Nós podemos rodar o web server de desenvolvimento dentro dessa pasta usando o manage.py e o comando runserver, como mostrado.

- -
$ python3 manage.py runserver
-Performing system checks...
-
-System check identified no issues (0 silenced).
-
-You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
-Run 'python manage.py migrate' to apply them.
-
-December 16, 2018 - 07:06:30
-Django version 2.1.5, using settings 'mytestsite.settings'
-Starting development server at http://127.0.0.1:8000/
-Quit the server with CONTROL-C.
-
- -
-

Nota: Acima foi mostrado o comando em Linux/macOS. Você já pode ignorar o aviso sobre "15 unapplied migration(s)"!

-
- -

Uma vez que o servidor está operando, você pode acessar o site colocando a seguinte URL no seu navegador local:http://127.0.0.1:8000/. Você deveria ver um site como esse:
- Django Skeleton App Homepage - Django 2.0

- - - -

Resumo

- -

Agora você tem um ambiente de desenvolvimento em Django funcionando em seu computador.

- -

Na seção Testando sua instalação você viu brevemente como criar um website Django usando django-admin startproject, e executá-lo em seu navegador usando um web server de desenvolvimento (python3 manage.py runserver). No próximo artigo nós iremos expandir esse processo, construindo uma aplicação web simples, mas completa.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/server-side/django/deployment/index.html b/files/pt-br/learn/server-side/django/deployment/index.html new file mode 100644 index 0000000000..baa2217b71 --- /dev/null +++ b/files/pt-br/learn/server-side/django/deployment/index.html @@ -0,0 +1,692 @@ +--- +title: 'Tutorial Django Parte 11: Hospedando Django para produção' +slug: Learn/Server-side/Django/Hospedagem +tags: + - Codificação de Scripts + - Deploy do django + - Fazendo deploy + - Iniciante + - django + - servidor web +translation_of: Learn/Server-side/Django/Deployment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
+ +

Agora que criou (e testou) um fantástico website de Biblioteca Local, vai querer instalá-lo em um servidor web público para que possa ser acessado pelo pessoal da biblioteca e membros através da Internet. Este artigo fornece uma visão geral de como poderá encontrar um servidor de hospedagem para instalar o seu web site, e o que precisa fazer para ter o seu site web pronto para produção.

+ + + + + + + + + + + + +
Pré-requisitos: +

Completar todos os tópicos do tutorial anterior, incluindo o Tutorial Django Parte 10: Testando uma aplicação web Django.

+
Objectivo:Para saber onde e como se pode hospedar uma aplicação Django na produção.
+ +

Visão geral

+ +

Uma vez terminado o seu website (ou terminado "o suficiente" para iniciar testes públicos) vai precisar publicá-lo em um host mais público e acessível do que o seu computador de desenvolvimento pessoal.

+ +

Até agora tem trabalhado em um ambiente de desenvolvimento, utilizando o servidor web de desenvolvimento Django para compartilhar o seu site com o navegador/rede local, e executando o seu site com configurações de desenvolvimento (inseguras) que expõem debug e outras informações privadas. Antes de poder hospedar um website externamente, vai precisar fazer primeiro:

+ + + +

Este tutorial fornece algumas orientações sobre suas opções para escolher um site de hospedagem, uma breve visão geral do que você precisa fazer para deixar seu aplicativo Django pronto para produção e um exemplo prático de como instalar o site Biblioteca Local no serviço de hospedagem em nuvem do Heroku.

+ +

O que é um ambiente de produção?

+ +

O ambiente de produção é o ambiente fornecido pelo computador/servidor onde você executará seu site para consumo externo. O ambiente inclui:

+ + + +
+

Nota: Dependendo de como sua produção está configurada, você também pode ter um proxy reverso, load balancer(balanceador de carga), etc.

+
+ +

O computador/servidor pode estar localizado em suas instalações e conectado à Internet por um link rápido, mas é muito mais comum usar um computador hospedado "na nuvem". O que isso realmente significa é que seu código é executado em algum computador remoto (ou possivelmente em um computador "virtual") no(s) centro(s) de dados da empresa de hospedagem. O servidor remoto geralmente oferece algum nível garantido de recursos de computação (por exemplo, CPU, RAM, memória de armazenamento, etc.) e conectividade com a Internet por um determinado preço.

+ +

Esse tipo de hardware de computação/rede acessível remotamente é conhecido como Infraestrutura como Serviço (IaaS). Muitos fornecedores de IaaS fornecem opções para pré-instalar um sistema operacional específico, no qual você deve instalar os outros componentes de seu ambiente de produção. Outros fornecedores permitem que você selecione ambientes com mais recursos, talvez incluindo uma configuração completa de Django e servidor web.

+ +
+

Nota: Ambientes pré-construídos podem tornar a configuração do seu site muito fácil porque reduzem a configuração, mas as opções disponíveis podem limitar você a um servidor desconhecido (ou outros componentes) e podem ser baseadas em uma versão mais antiga do sistema operacional. Freqüentemente, é melhor instalar você mesmo os componentes, para obter os que deseja e, quando precisar atualizar partes do sistema, tenha uma ideia de por onde começar!

+
+ +

Outros provedores de hospedagem oferecem suporte a Django como parte de uma oferta de Plataforma como Serviço (PaaS). Nesse tipo de hospedagem, você não precisa se preocupar com a maior parte do seu ambiente de produção (servidor da web, servidor de aplicativos, balanceadores de carga), pois a plataforma host cuida disso para você (junto com a maior parte do que você precisa fazer para para dimensionar seu aplicativo). Isso torna a implantação muito fácil, porque você só precisa se concentrar em seu aplicativo da web e não em toda a outra infraestrutura de servidor.

+ +

Alguns desenvolvedores escolherão a maior flexibilidade fornecida por IaaS em vez de PaaS, enquanto outros apreciarão a sobrecarga de manutenção reduzida e escalonamento mais fácil de PaaS. Quando você está começando, configurar seu site em um sistema PaaS é muito mais fácil e é isso que faremos neste tutorial.

+ +
+

Dica: Se você escolher um provedor de hospedagem compatível com Python / Django, ele deve fornecer instruções sobre como configurar um site Django usando diferentes configurações de servidor da web, servidor de aplicativos, proxy reverso, etc (isso não será relevante se você escolher um PaaS ) Por exemplo, existem muitos guias passo a passo para várias configurações nos documentos da comunidade Digital Ocean Django.

+
+ +

Escolhendo um provedor de hospedagem

+ +

Existem mais de 100 provedores de hospedagem que são conhecidos por oferecer suporte ativo ou funcionar bem com o Django (você pode encontrar uma lista bastante exaustiva em Djangofriendly hosts). Esses fornecedores oferecem diferentes tipos de ambientes (IaaS, PaaS) e diferentes níveis de recursos de computação e rede a preços diferentes.

+ +

Algumas coisas a serem consideradas ao escolher um host:

+ + + +

A boa notícia quando você está começando é que existem alguns sites que fornecem ambientes de computação de "avaliação", "desenvolvedor" ou "amador" de graça. Esses são sempre ambientes com recursos limitados / restritos e você precisa estar ciente de que eles podem expirar após um período introdutório. No entanto, eles são ótimos para testar sites de baixo tráfego em um ambiente real e podem fornecer uma migração fácil para pagar por mais recursos quando seu site ficar mais ocupado. As escolhas populares nesta categoria incluem Heroku, Python Anywhere, Amazon Web Services, Microsoft Azure, etc.

+ +

Muitos provedores também têm uma camada "básica" que fornece níveis mais úteis de capacidade de computação e menos limitações. Digital Ocean e Python Anywhere são exemplos de provedores de hospedagem populares que oferecem uma camada de computação básica relativamente barata (na faixa de US$5 a US$10 por mês).

+ +
+

Nota: Lembre-se de que o preço não é o único critério de seleção. Se o seu site for bem-sucedido, pode ser que a escalabilidade seja a consideração mais importante.

+
+ +

Preparando seu site para publicação

+ +

O esqueleto do site do Django criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.

+ +
+

Dica: É comum ter um arquivo settings.py separado para produção e importar configurações confidenciais de um arquivo separado ou de uma variável de ambiente. Este arquivo deve ser protegido, mesmo se o resto do código-fonte estiver disponível em um repositório público.

+
+ +

As configurações críticas que você deve verificar são:

+ + + +

Vamos mudar o aplicativo LocalLibrary para que possamos ler nosso SECRET_KEY e DEBUG variáveis ​​de variáveis ​​de ambiente se forem definidas, mas caso contrário, use os valores padrão no arquivo de configuração.

+ +

Abra /locallibrary/settings.py, desative o original SECRET_KEYconfiguração e adicione as novas linhas conforme mostrado abaixo em negrito. Durante o desenvolvimento, nenhuma variável de ambiente será especificada para a chave, então o valor padrão será usado (não importa qual chave você usa aqui, ou se a chave "vaza", porque você não a usará na produção).

+ +
# SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag'
+import os
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')
+
+ +

Em seguida, comente o existente DEBUG configuração e adicione a nova linha mostrada abaixo.

+ +
# SECURITY WARNING: don't run with debug turned on in production!
+# DEBUG = True
+DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
+
+ +

O valor do DEBUG será True por padrão, mas será apenas False se o valor do DJANGO_DEBUG variável de ambiente é definida para False. Observe que as variáveis ​​de ambiente são strings e não tipos Python. Portanto, precisamos comparar strings. A única maneira de definir o DEBUG variável para False é realmente configurá-lo para a string False

+ +

Você pode definir a variável de ambiente como False, emitindo o seguinte comando:

+ +
export DJANGO_DEBUG=False
+ +

Uma lista de verificação completa das configurações que você pode querer mudar é fornecida na Lista de verificação de implantação (documentos do Django). Você também pode listar vários deles usando o comando de terminal abaixo:

+ +
python3 manage.py check --deploy
+
+ +

Exemplo: Instalando LocalLibrary no Heroku

+ +

Esta seção fornece uma demonstração prática de como instalar a LocalLibrary na nuvem Heroku PaaS.

+ +

Por que Heroku?

+ +

Heroku é um dos mais antigos e populares serviços de PaaS baseados em nuvem. Originalmente, ele suportava apenas aplicativos Ruby, mas agora pode ser usado para hospedar aplicativos de muitos ambientes de programação, incluindo Django!

+ +

Estamos optando por usar o Heroku por vários motivos:

+ + + +

Embora o Heroku seja perfeito para hospedar esta demonstração, pode não ser perfeito para o seu site real. O Heroku torna as coisas fáceis de configurar e escalar, ao custo de ser menos flexível e potencialmente muito mais caro depois que você sai do nível gratuito.

+ +

How does Heroku work?

+ +

Heroku runs Django websites within one or more "Dynos", which are isolated, virtualized Unix containers that provide the environment required to run an application. The dynos are completely isolated and have an ephemeral file system (a short-lived file system that is cleaned/emptied every time the dyno restarts). The only thing that dynos share by default are application configuration variables. Heroku internally uses a load balancer to distribute web traffic to all "web" dynos. Since nothing is shared between them, Heroku can scale an app horizontally simply by adding more dynos (though of course you may also need to scale your database to accept additional connections).

+ +

Because the file system is ephemeral you can't install services required by your application directly (e.g. databases, queues, caching systems, storage, email services, etc). Instead Heroku web applications use backing services provided as independent "add-ons" by Heroku or 3rd parties. Once attached to your web application, the dynos access the services using information contained in application configuration variables.

+ +

In order to execute your application Heroku needs to be able to set up the appropriate environment and dependencies, and also understand how it is launched. For Django apps we provide this information in a number of text files:

+ + + +

Developers interact with Heroku using a special client app/terminal, which is much like a Unix Bash shell. This allows you to upload code that is stored in a git repository, inspect the running processes, see logs, set configuration variables and much more!

+ +

In order to get our application to work on Heroku we'll need to put our Django web application into a git repository, add the files above, integrate with a database add-on, and make changes to properly handle static files.

+ +

Once we've done all that we can set up a Heroku account, get the Heroku client, and use it to install our website.

+ +
+

Note: The instructions below reflect how to work with Heroku at time of writing. If Heroku significantly change their processes, you may wish to instead check their setup documents: Getting Started on Heroku with Django.

+
+ +

That's all the overview you need in order to get started (see How Heroku works for a more comprehensive guide).

+ +

Creating an application repository in Github

+ +

Heroku is closely integrated with the git source code version control system, using it to upload/synchronise any changes you make to the live system. It does this by adding a new heroku "remote" repository named heroku pointing to a repository for your source on the Heroku cloud. During development you use git to store changes on your "master" repository. When you want to deploy your site, you sync your changes to the Heroku repository.

+ +
+

Note: If you're used to following good software development practices you are probably already using git or some other SCM system. If you already have a git repository, then you can skip this step.

+
+ +

There are a lot of ways to work with git, but one of the easiest is to first set up an account on Github, create the repository there, and then sync to it locally:

+ +
    +
  1. Visit https://github.com/ and create an account.
    2. +
  2. Once you are logged in, click the + link in the top toolbar and select New repository.
    3. +
  3. Fill in all the fields on this form. While these are not compulsory, they are strongly recommended. +
      +
    • Enter a new repository name (e.g. django_local_library), and description (e.g. "Local Library website written in Django".
      • +
    • Choose Python in the Add .gitignore selection list.
      • +
    • Choose your preferred license in the Add license selection list.
      • +
    • Check Initialize this repository with a README.
      • +
    +
    4. +
  4. Press Create repository.
    5. +
  5. Click the green "Clone or download" button on your new repo page.
    6. +
  6. Copy the URL value from the text field inside the dialog box that appears (it should be something like: https://github.com/<your_git_user_id>/django_local_library.git).
    7. +
+ +

Now that the repository ("repo") is created we are going to want to clone it on our local computer:

+ +
    +
  1. Install git for your local computer (you can find versions for different platforms here).
    2. +
  2. Open a command prompt/terminal and clone your repository using the URL you copied above: + 
    git clone https://github.com/<your_git_user_id>/django_local_library.git
+
    + This will create the repository in a new folder in the current working directory.
    3. +
  3. Navigate into the new repo. + 
    cd django_local_library
    +
    4. +
+ +

The final steps are to copy your application into this local project directory and then add (or "push", in git lingo) the local repository to your remote Github repository:

+ +
    +
  1. Copy your Django application into this folder (all the files at the same level as manage.py and below, not their containing locallibrary folder).
    2. +
  2. Open the .gitignore file, copy the following lines into the bottom of it, and then save (this file is used to identify files that should not be uploaded to git by default). + 
    # Text backup files
+*.bak
+
+# Database
+*.sqlite3
    +
    3. +
  3. Open a command prompt/terminal and use the add command to add all files to git. This adds the files which aren't ignored by the .gitignore file to the "staging area". + 
    git add -A
+
    +
    4. +
  4. Use the status command to check that all files you are about to commit are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below. + 
    > git status
+On branch master
+Your branch is up-to-date with 'origin/master'.
+Changes to be committed:
+  (use "git reset HEAD <file>..." to unstage)
+
+        modified:   .gitignore
+        new file:   catalog/__init__.py
+        ...
+        new file:   catalog/migrations/0001_initial.py
+        ...
+        new file:   templates/registration/password_reset_form.html
    +
    5. +
  5. When you're satisfied, commit the files to your local repository. This is essentially equivalent to signing off on the changes and making them an official part of the local repository. + 
    git commit -m "First version of application moved into github"
    +
    6. +
  6. At this point, the remote repository has not been changed. Synchronise (push) your local repository to the remote Github repository using the following command: + 
    git push origin master
    +
    7. +
+ +

When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.

+ +
+

Tip: This is a good point to make a backup of your "vanilla" project — while some of the changes we're going to be making in the following sections might be useful for deployment on any platform (or development) others might not.

+ +

The best way to do this is to use git to manage your revisions. With git you can not only go back to a particular old version, but you can maintain this in a separate "branch" from your production changes and cherry-pick any changes to move between production and development branches. Learning Git is well worth the effort, but is beyond the scope of this topic.

+ +

The easiest way to do this is to just copy your files into another location. Use whichever approach best matches your knowledge of git!

+
+ +

Update the app for Heroku

+ +

This section explains the changes you'll need to make to our LocalLibrary application to get it to work on Heroku. While Heroku's Getting Started on Heroku with Django instructions assume you will use the Heroku client to also run your local development environment, our changes are compatible with the existing Django development server and the workflows we've already learned.

+ +

Procfile

+ +

Create the file Procfile (no extension) in the root of your GitHub repository to declare the application's process types and entry points. Copy the following text into it:

+ +
web: gunicorn locallibrary.wsgi --log-file -
+ +

The "web:" tells Heroku that this is a web dyno and can be sent HTTP traffic. The process to start in this dyno is gunicorn, which is a popular web application server that Heroku recommends. We start Gunicorn using the configuration information in the module locallibrary.wsgi (created with our application skeleton: /locallibrary/wsgi.py).

+ +

Gunicorn

+ +

Gunicorn is the recommended HTTP server for use with Django on Heroku (as referenced in the Procfile above). It is a pure-Python HTTP server for WSGI applications that can run multiple Python concurrent processes within a single dyno (see Deploying Python applications with Gunicorn for more information).

+ +

While we won't need Gunicorn to serve our LocalLibrary application during development, we'll install it so that it becomes part of our requirements for Heroku to set up on the remote server.

+ +

Install Gunicorn locally on the command line using pip (which we installed when setting up the development environment):

+ +
+

Note: Make sure that you're in your Python virtual environment (use the workon [name-of-virtual-environment] command) before you install Gunicorn and further modules with pip, or you might experience problems with importing these modules in your /locallibrary/settings.py file in the later sections. 

+
+ +
pip3 install gunicorn
+
+ +

Database configuration

+ +

We can't use the default SQLite database on Heroku because it is file-based, and it would be deleted from the ephemeral file system every time the application restarts (typically once a day, and every time the application or its configuration variables are changed).

+ +

The Heroku mechanism for handling this situation is to use a database add-on and configure the web application using information from an environment configuration variable, set by the add-on. There are quite a lot of database options, but we'll use the hobby tier of the Heroku postgres database as this is free, supported by Django, and automatically added to our new Heroku apps when using the free hobby dyno plan tier.

+ +

The database connection information is supplied to the web dyno using a configuration variable named DATABASE_URL. Rather than hard-coding this information into Django, Heroku recommends that developers use the dj-database-url package to parse the DATABASE_URL environment variable and automatically convert it to Django’s desired configuration format. In addition to installing the dj-database-url package we'll also need to install psycopg2, as Django needs this to interact with Postgres databases.

+ +
dj-database-url (Django database configuration from environment variable)
+ +

Install dj-database-url locally so that it becomes part of our requirements for Heroku to set up on the remote server:

+ +
$ pip3 install dj-database-url
+
+ +
settings.py
+ +

Open /locallibrary/settings.py and copy the following configuration into the bottom of the file:

+ +
# Heroku: Update database configuration from $DATABASE_URL.
+import dj_database_url
+db_from_env = dj_database_url.config(conn_max_age=500)
+DATABASES['default'].update(db_from_env)
+ +
+

Note:

+ + +
+ +
psycopg2 (Python Postgres database support)
+ +

Django needs psycopg2 to work with Postgres databases and you will need to add this to the requirements.txt for Heroku to set this up on the remote server (as discussed in the requirements section below).

+ +

Django will use our SQLite database locally by default, because the DATABASE_URL environment variable isn't set in our local environment. If you want to switch to Postgres completely and use our Heroku free tier database for both development and production then you can. For example, to install psycopg2 and its dependencies locally on a Debian-flavoured Linux system you would use the following Bash/terminal commands:

+ +
sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib
+pip3 install psycopg2-binary
+
+ +

Installation instructions for the other platforms can be found on the psycopg2 website here.

+ +

However, you don't need to do this — you don't need PostgreSQL active on the local computer, as long as you give it to Heroku as a requirement, in requirements.txt (see below).

+ +

Serving static files in production

+ +

During development we used Django and the Django development web server to serve our static files (CSS, JavaScript, etc.). In a production environment we instead typically serve static files from a content delivery network (CDN) or the web server.

+ +
+

Note: Serving static files via Django/web application is inefficient because the requests have to pass through unnecessary additional code (Django) rather than being handled directly by the web server or a completely separate CDN. While this doesn't matter for local use during development, it would have a significant performance impact if we were to use the same approach in production. 

+
+ +

To make it easy to host static files separately from the Django web application, Django provides the collectstatic tool to collect these files for deployment (there is a settings variable that defines where the files should be collected when collectstatic is run). Django templates refer to the hosting location of the static files relative to a settings variable (STATIC_URL), so that this can be changed if the static files are moved to another host/server.

+ +

The relevant setting variables are:

+ + + +
settings.py
+ +

Open /locallibrary/settings.py and copy the following configuration into the bottom of the file. The BASE_DIR should already have been defined in your file (the STATIC_URL may already have been defined within the file when it was created. While it will cause no harm, you might as well delete the duplicate previous reference).

+ +
# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.1/howto/static-files/
+
+# The absolute path to the directory where collectstatic will collect static files for deployment.
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+# The URL to use when referring to static files (where they will be served from)
+STATIC_URL = '/static/'
+
+ +

We'll actually do the file serving using a library called WhiteNoise, which we install and configure in the next section.

+ +

For more information, see Django and Static Assets (Heroku docs).

+ +

Whitenoise

+ +

There are many ways to serve static files in production (we saw the relevant Django settings in the previous sections). Heroku recommends using the WhiteNoise project for serving of static assets directly from Gunicorn in production.

+ +
+

Note: Heroku automatically calls collectstatic and prepares your static files for use by WhiteNoise after it uploads your application. Check out WhiteNoise documentation for an explanation of how it works and why the implementation is a relatively efficient method for serving these files.

+
+ +

The steps to set up WhiteNoise to use with the project are given here (and reproduced below):

+ +
WhiteNoise
+ +

Install whitenoise locally using the following command:

+ +
$ pip3 install whitenoise
+
+ +
settings.py
+ +

To install WhiteNoise into your Django application, open /locallibrary/settings.py, find the MIDDLEWARE setting and add the WhiteNoiseMiddleware near the top of the list, just below the SecurityMiddleware:

+ +
MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ +

Optionally, you can reduce the size of the static files when they are served (this is more efficient). Just add the following to the bottom of /locallibrary/settings.py:

+ +
# Simplified static file serving.
+# https://warehouse.python.org/project/whitenoise/
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
+
+ +

Requirements

+ +

The Python requirements of your web application must be stored in a file requirements.txt in the root of your repository. Heroku will then install these automatically when it rebuilds your environment. You can create this file using pip on the command line (run the following in the repo root):

+ +
pip3 freeze > requirements.txt
+ +

After installing all the different dependencies above, your requirements.txt file should have at least these items listed (though the version numbers may be different). Please delete any other dependencies not listed below, unless you've explicitly added them for this application.

+ +
dj-database-url==0.5.0
+Django==2.1.5
+gunicorn==19.9.0
+psycopg2-binary==2.7.7
+whitenoise==4.1.2
+
+ +
+

Make sure that a psycopg2 line like the one above is present! Even if you didn't install this locally then you should still add it to requirements.txt.

+
+ +

Runtime

+ +

The runtime.txt file, if defined, tells Heroku which programming language to use. Create the file in the root of the repo and add the following text:

+ +
python-3.7.0
+ +
+

Note: Heroku only supports a small number of Python runtimes (at time of writing, this includes the one above). Heroku will use a supported runtime irrespective of the value specified in this file.

+
+ +

Re-test and save changes to Github

+ +

Before we proceed, lets test the site again locally and make sure it wasn't broken by any of our changes above. Run the development web server as usual and then check the site still works as you expect on your browser.

+ +
python3 manage.py runserver
+ +

Next, lets push our changes to Github. In the terminal (after having navigated to our local repository), enter the following commands:

+ +
git add -A
+git commit -m "Added files and changes required for deployment to heroku"
+git push origin master
+
+ +

We should now be ready to start deploying LocalLibrary on Heroku.

+ +

Get a Heroku account

+ +

To start using Heroku you will first need to create an account:

+ + + +

Install the client

+ +

Download and install the Heroku client by following the instructions on Heroku here.

+ +

After the client is installed you will be able run commands. For example to get help on the client:

+ +
heroku help
+
+ +

Create and upload the website

+ +

To create the app we run the "create" command in the root directory of our repository. This creates a git remote ("pointer to a remote repository") named heroku in our local git environment.

+ +
heroku create
+ +
+

Note: You can name the remote if you like by specifying a value after "create". If you don't then you'll get a random name. The name is used in the default URL.

+
+ +

We can then push our app to the Heroku repository as shown below. This will upload the app, package it in a dyno, run collectstatic, and start the site.

+ +
git push heroku master
+ +

If we're lucky, the app is now "running" on the site, but it won't be working properly because we haven't set up the database tables for use by our application. To do this we need to use the heroku run command and start a "one off dyno" to perform a migrate operation. Enter the following command in your terminal:

+ +
heroku run python manage.py migrate
+ +

We're also going to need to be able to add books and authors, so lets also create our administration superuser, again using a one-off dyno:

+ +
heroku run python manage.py createsuperuser
+ +

Once this is complete, we can look at the site. It should work, although it won't have any books in it yet. To open your browser to the new website, use the command:

+ +
heroku open
+ +

Create some books in the admin site, and check out whether the site is behaving as you expect.

+ +

Managing addons

+ +

You can check out the add-ons to your app using the heroku addons command. This will list all addons, and their price tier and state.

+ +
> heroku addons
+
+Add-on                                     Plan       Price  State
+─────────────────────────────────────────  ─────────  ─────  ───────
+heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
+ └─ as DATABASE
+ +

Here we see that we have just one add-on, the postgres SQL database. This is free, and was created automatically when we created the app. You can open a web page to examine the database add-on (or any other add-on) in more detail using the following command:

+ +
heroku addons:open heroku-postgresql
+
+ +

Other commands allow you to create, destroy, upgrade and downgrade addons (using a similar syntax to opening). For more information see Managing Add-ons (Heroku docs).

+ +

Setting configuration variables

+ +

You can check out the configuration variables for the site using the heroku config command. Below you can see that we have just one variable, the DATABASE_URL used to configure our database.

+ +
> heroku config
+
+=== locallibrary Config Vars
+DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3
+ +

If you recall from the section on getting the website ready to publish, we have to set environment variables for DJANGO_SECRET_KEY and DJANGO_DEBUG. Let's do this now.

+ +
+

Note: The secret key needs to be really secret! One way to generate a new key is to use the Django Secret Key Generator.

+
+ +

We set DJANGO_SECRET_KEY using the config:set command (as shown below). Remember to use your own secret key!

+ +
> heroku config:set DJANGO_SECRET_KEY='eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&='
+
+Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
+DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
+
+ +

We similarly set DJANGO_DEBUG:

+ +
> heroku config:set DJANGO_DEBUG=
+
+Setting DJANGO_DEBUG and restarting locallibrary... done, v8
+ +

If you visit the site now you'll get a "Bad request" error, because the ALLOWED_HOSTS setting is required if you have DEBUG=False (as a security measure). Open /locallibrary/settings.py and change the ALLOWED_HOSTS setting to include your base app url (e.g. 'locallibrary1234.herokuapp.com') and the URL you normally use on your local development server.

+ +
ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1']
+# For example:
+# ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com', '127.0.0.1']
+
+ +

Then save your settings and commit them to your Github repo and to Heroku:

+ +
git add -A
+git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
+git push origin master
+git push heroku master
+ +
+

After the site update to Heroku completes, enter a URL that does not exist (e.g. /catalog/doesnotexist/). Previously this would have displayed a detailed debug page, but now you should just see a simple "Not Found" page.

+
+ +

Debugging

+ +

The Heroku client provides a few tools for debugging:

+ +
# Show current logs
+heroku logs
+
+# Show current logs and keep updating with any new results
+heroku logs --tail
+
+# Add additional logging for collectstatic (this tool is run automatically during a build)
+heroku config:set DEBUG_COLLECTSTATIC=1
+
+# Display dyno status
+heroku ps
+
+ +

If you need more information than these can provide you will need to start looking into Django Logging.

+ + + +

Summary

+ +

That's the end of this tutorial on setting up Django apps in production, and also the series of tutorials on working with Django. We hope you've found them useful. You can check out a fully worked-through version of the source code on Github here.
+
+ The next step is to read our last few articles, and then complete the assessment task.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/server-side/django/development_environment/index.html b/files/pt-br/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..101d1a15ad --- /dev/null +++ b/files/pt-br/learn/server-side/django/development_environment/index.html @@ -0,0 +1,431 @@ +--- +title: Configurando um ambiente de desenvolvimento Django +slug: Learn/Server-side/Django/ambiente_de_desenvolvimento +tags: + - Ambiente de desenvolvimento + - Aprender + - Iniciante + - Instalação + - Introdução + - Python + - django +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

Agora que você sabe para que serve o Django, nós iremos te mostrar como instalar, configurar e testar um ambiente de desenvolvimento no Windows, Linux (Ubuntu), e macOS - seja qual for o sistema operacional (SO) que você usar, este artigo deve fornecê-lo o suficiente para conseguir começar a desenvolver aplicativos Django.

+ + + + + + + + + + + + +
Pré-requisitos:Saber como usar um teminal / linha de comando. Saber instalar softwares em seu sistema operacional.
Objetivo:Ter uma ambiente de desenvolvimento Django (2.0) operando em seu computador.
+ +

Visão geral do ambiente de desenvolvimento Django

+ +

Django facilita muito a configuração em seu computador para iniciar logo o desenvolvimento de aplicações web. Essa seção explica o que você ganha com o ambiente de desenvolvimento e fornece um plano geral de algumas opções de instalação e configuração. O resto do artigo explica o método recomendado de instalar o ambiente Django no Ubuntu, macOS e Windows e como testar.

+ +

O que é o ambiente de desenvolvimento Django?

+ +

O ambiente de desenvolvimento é uma instalação do Django em seu computador local para que você use-o para desenvolver e testar apps Django antes de implementá-los em um ambiente de produção

+ +

A principal ferramenta que Django fornece é um conjunto de scripts Python para criar e trabalhar com projetos Django, junto com um simples webserver de desenvolvimento que você pode usar para testar localmente (i.e. no seu computador, não em um web server externo) aplicações web Django no seu navegador.

+ +

Existem outras ferramentas secundárias que fazem parte do ambiente de desenvolvimento que não cobriremos aqui. Isso inclui coisas como um editor de texto ou IDE para edição de código, e uma ferramenta pra gerenciamento do controle de origem de códigos (como o Git) para administrar com segurança as diferentes versões de seu sistema. Nós estamos assumindo que você já tem um editor de texto instalado.

+ +

Quais são as opções de instalação do Django?

+ +

Django é extremamente flexível em termos de como e onde ele pode ser instalado e configurado. Django pode:

+ + + +

Cada opção requer leves diferenças de configuração e instalação. As subseções abaixo explicam algumas de suas escolhas. No resto do artigo nós iremos mostrar como instalar o Django em um pequeno número de sistemas operacionais. No resto do módulo, assumiremos que você tenha instalado o Django em sua máquina.

+ +
+

Nota: Outras possíveis opções de instalação são cobertas pela documentação oficial do Django. Nós linkamos os documents adequados abaixo.

+
+ +

Quais sistemas operacionais suportam Django?

+ +

Aplicações web Django podem rodar em quase todas as maquinas que suportam a linguagem de programação Python 3. Windows, macOS, Linux/Unix e Solaris são alguns desses SO's. A maioria dos computadores atuais devem ter o desempenho necessário para operar Django.

+ +

Neste artigo, iremos fornecer instruções para Windows, macOS a Linux/Unix.

+ +

Qual versão de Python deve ser usada?

+ +

Nós recomendamos que use a mais recente versão disponível — no momento que escrevo é Python 3.7.1.

+ +

Se necessário, versões a partir de Python 3.5 podem ser usadas (o suporte para Python 3.5 irá acabar em versões futuras).

+ +
+

Nota: Python 2.7 não pode ser usado com Django 2.1 (A série Django 1.11.x é a última  que suporta Python 2.7).

+
+ +

Onde posso baixar o Django?

+ +

Existem três lugares para fazer o download do Django:

+ + + +

Este artigo mostra a instalação pelo Pypi, pois queremos a última versão estável do Django.

+ +

Qual banco de dados?

+ +

Django suporta (principalmente) quatro bancos de dados (PostgreSQL, MySQL, Oracle, e SQLite ), contudo, existem bibliotecas community que fornecem níveis variados de suporte para outros populares bancos de dados SQL e NoSQL. Nós recomendamos que você use o mesmo banco de dados tanto para produção quanto para desenvolvimento (embora o Django abstraia muitas das diferenças dos bancos de dados usando seu Object-Relational Mapper (ORM), ainda há problemas em potencial que é melhor evitar).

+ +

Neste artigo (e na maior parte deste módulo) nós usaremos o banco de Dados SQLite, que armazena dados em um arquivo. SQLite é destinado para uso sendo um banco de dados leve e que não consegue suportar uma demanda muito alta. Entretanto, uma excelente opção para aplicações de que focam em leitura de dados.

+ +
+

Nota: Django é configurado por padrão a usar SQLite ao iniciar seu projeto usando as ferramentas padrão (django-admin). É uma ótima escolha quando você está começando, porque não requer configurações adicionais ou instalações.

+
+ +

Instalar em todo o sistema ou em um ambiente virtual Python?

+ +

Quando você instala Python 3 você pega um único ambiente global que é compartilhado por todo o código Python 3. Enquanto você pode instalar qualquer pacote Python que quiser no ambiente, você pode instalar apenas uma versão particular de cada pacote por vez.

+ +
+

Nota: Aplicações Python instaladas no ambiente global têm forte potêncial de entrar em conflito entre si (i.e. se elas dependem de versões diferentes do mesmo pacote).

+
+ +

Se você instalar Django no ambiente padrão/global você só será capaz de ter uma versão do Django em seu computador. Isto pode ser um problema se você quer criar novos websites (usando a versão mais recente do Django) enquanto ainda realiza manutenção nos websites que dependem das versões antigas.

+ +

Pensando nisso, desenvolvedores experientes de Python/Django normalmente executam apps Python dentro de um ambiente virtual Python independente. Isso permite usar diferentes ambientes Django em um único computador. A própria equipe de desenvolvedores Django recomenda o uso de ambientes virtuais Python!

+ +

Esse módulo assume que você instalou o Django em um ambiente virtual, nós iremos mostrá-lo como fazer isso logo abaixo.

+ +

Instalando Python 3

+ +

Você deve ter Python instalado em seu sistema operacional para usar Django. Se você estiver usando Python 3, também precisará da ferramenta Python Package Index — pip3 — que é usada para administrar (instalar, editar, remover) pacotes/bibliotecas Python usadas por Django e seus outros aplicativos Python.

+ +

Essa parte explica brevemente como você pode checar quais versões de Python estão disponíveis e instalar novas versões se necessário (em Ubuntu 18.04, macOS e Windows 10).

+ +
+

Nota: Dependendo da sua plataforma, você também pode instalar Python/pip3 no seu sistema operacional através de seu próprio gerenciador de pacotes ou por outros mecanismos. Para a maioria das plataformas, você pode baixar os arquivos necessários para instalação em https://www.python.org/downloads/ e instalá-los usando o método específico da plataforma em questão.

+
+ +

Ubuntu 18.04

+ +

Ubuntu Linux 18.04 LTS inclui Python 3.6.6 por padrão. Você pode confirmar isso executando o seguinte comando no Terminal:

+ +
python3 -V
+ Python 3.6.6
+ +

Contudo, o Python Package Index, que você precisará para instalar pacotes para Python 3 (incluindo Django), não está disponível por padrão. Você pode instalar pip3 pelo Terminal usando:

+ +
sudo apt install python3-pip
+
+ +

macOS

+ +

macOS "El Capitan" e outras versões mais recentes não incluem Python 3. Você pode confirmar isto executando os comandos abaixo no Terminal:

+ +
python3 -V
+ -bash: python3: command not found
+ +

Você pode instalar Python 3 (com a ferramenta pip3) facilmente em python.org:

+ +
    +
  1. Baixe o instalador exigido: +
      +
    1. Acesse https://www.python.org/downloads/
      2. +
    2. Selecione o botão Download Python 3.7.1 (o número exato da versão menor pode diferir).
      3. +
    +
    2. +
  2. Localize o arquivo usando o Finder, e clique duplo no arquivo do pacote. Siga os passos da instalação dos prompts.
    3. +
+ +

Agora você pode confirmar se tudo deu certo checando o Python 3 como mostrado abaixo:

+ +
python3 -V
+ Python 3.7.1
+
+ +

Você pode checar se pip3 está instalado listando todos os pacotes disponíveis.

+ +
pip3 list
+ +

Windows 10

+ +

Windows não inclui Python por padrão, mas você pode instalá-lo facilmente (com a ferramenta pip3) em python.org:

+ +
    +
  1. Baixe o instalador exigido: +
      +
    1. Acesse https://www.python.org/downloads/
      2. +
    2. Selecione o botão Download Python 3.7.1 (o número exato da versão menor pode diferir).
      3. +
    +
    2. +
  2. Instale Python com um clique duplo no arquivo baixado e siga a instalação dos prompts.
    3. +
  3. Tenha certeza que a caixa "Add Python to PATH" está checada.
    4. +
+ +

Você pode verificar se o Python 3 foi instalado colocando o seguinte texto no Prompt de Comando

+ +
py -3 -V
+ Python 3.7.1
+
+ +

O instalador do Windows incorpora pip3 (o administrador de pacotes Python) por padrão. Você pode facilmente listar os pacotes instalados com o comando abaixo:

+ +
pip3 list
+
+ +
+

Nota: O instalador deve ter configurado tudo que você precisa antes para esse comando funcionar. Se for exibida uma mensagem que Python não encontrou, você pode ter esquecido de adicioná-lo ao PATH do Sistema. Você pode fazer isso exexutando o instalador novamente, selecionando "Modify", e checando a caixa chamada " Add Python to environment variables "  na segunda tela.

+
+ +

Usando Django em um ambiente virtual Python

+ +

As bibliotecas que nós iremos usar para criar nossos ambientes virtuais são virtualenvwrapper (Linux e macOS) e virtualenvwrapper-win (Windows), sendo que ambas usam a ferramenta virtualenv. as bibliotecas criam uma interface consistente para manusear interfaces em todas plataformas;

+ +

Instalando o software de ambiente virtual

+ +

Instalação do ambiente virtual no Ubuntu

+ +

Após instalar Python e pip, você pode instalar virtualenvwrapper (que incluivirtualenv). O guia oficial para a instalação pode ser encontrado aqui, ou siga as instruções abaixo.

+ +

Instale a ferramenta usando pip3:

+ +
sudo pip3 install virtualenvwrapper
+ +

Em seguida, adicione as linhas abaixo no fim de seu arquivo shell startup (este é um arquivo oculto nomeado .bashrc em seu diretório home). Isto coloca a localização de onde seus ambientes virtuais deveriam estar, a localização dos diretórios para desevolvimento de projetos e a localização do script instalado com o pacote.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+
+ +
+

Note: As variáveis VIRTUALENVWRAPPER_PYTHON e VIRTUALENVWRAPPER_VIRTUALENV_ARGS apontam para  a localização em uma instalação normal de Python 3, e source /usr/local/bin/virtualenvwrapper.sh aponta para a localização normal do script virtualenvwrapper.sh Se virtualenv não funciona quando você testa, uma coisa a se verificar é se o Python e o script estão na localização esperada (e então alterar o arquivo de startup com os caminhos corretos).
+
+ Você pode encontrar a localização correta no seu sistema usando os comandos which virtualenvwrapper.sh e which python3.

+
+ +

Recarregue o arquivo de startup executando o seguinte comando no Terminal:

+ +
source ~/.bashrc
+ +

Após executar o comando, você deveria ver scripts como esses:

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+
+ +

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv.

+ +

Instalação do ambiente virtual no macOS

+ +

Instalar virtualenvwrapper no macOS é quase a mesma coisa que instalar no Ubuntu (novamente, você pode seguir as instruções do guia oficial de instalação ou as instruções abaixo).

+ +

Instale virtualenvwrapper (e virtualenv) usando pip como abaixo.

+ +
sudo pip3 install virtualenvwrapper
+ +

Então adicione as seguintes linhas no arquivo de startup do seu shell.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Note: A variável VIRTUALENVWRAPPER_PYTHON  aponta para uma localização em uma instalação normal de Python 3, e source /usr/local/bin/virtualenvwrapper.sh aponta para a localização comum do script virtualenvwrapper.sh. Se virtualenv não funciona quando você testa, uma coisa a se verificar é se o Python e o script estão na localização esperada (e então alterar o arquivo de startup com os caminhos corretos).

+ +

Por exemplo, uma instalação teste no macOS termina com as seguintes linhas no arquivo de startup:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
+ +

Você pode encontrar a localização correta no seu sistema usando os comandos which virtualenvwrapper.sh e which python3.

+
+ +

São as mesmas linhas digitadas no Ubuntu, mas o arquivo de startup é diferente nomeado como .bash_profile, oculto no seu diretório home.

+ +
+

Nota: Se você não acha o arquivo .bash_profile pelo finder, você pode abir pelo terminal usando o nano.

+ +

Os comandos são como esses:

+ +
cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.
+
+
+ +

Atualize o arquivo de startup fazendo o seguinte chamado no terminal:

+ +
source ~/.bash_profile
+ +

Com isso, você deveria ver alguns scripts na tela do terminal sendo executados (os mesmos scripts da instalação no Ubuntu). Agora você está apto a criar um novo ambiente virtual pelo comando mkvirtualenv.

+ +

Instalação do ambiente virtual no Windows 10

+ +

Instalar virtualenvwrapper-win é ainda mais simples que instalar virtualenvwrapper, porque você não precisa configurar onde a ferramenta armazena as informações do ambiente virtual (pois é um valor padrão). Tudo que você precisa fazer é rodar o seguinte comando no Prompt de Comando.

+ +
pip3 install virtualenvwrapper-win
+ +

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv.

+ +

Criando um ambiente virtual

+ +

Uma vez que você tenha instalado virtualenvwrapper ou virtualenvwrapper-win, trabalhar com ambientes virtuais é bem parecido em todas as plataformas.

+ +

Agora você pode criar um novo ambiente virtual com o comando mkvirtualenv. Ao executar esse comando, você verá o ambiente sendo configurado (o que você verá varia um pouco em cada plataforma). Quando o comando encerrar a configuração, o ambiente virtual estará ativo — você pode ver isso porque no topo do prompt (aquela barra de título do programa) estará escrito o nome do ambiente entre colchetes (abaixo nós mostramos como é a criação do ambiente no Ubuntu, mas o comando é igual para o Windows/macOS).

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+
+ +

Agora que você está em um ambiente virtual, você pode instalar Django e iniciar o desenvolvimento.

+ +
+

Nota: De agora em diante, esse artigo (na verdade todo o módulo) está supondo que todos os comando serão executados em um ambiente virtual Python como o que configuramos acima.

+
+ +

Usando um ambiente virtual

+ +

Existem apenas alguns poucos comandos que você deveria conhecer (há mais comandos que você pode encontrar na documentação da ferramenta, porém, os comandos abaixo serão os que você usará regularmente):

+ + + +

Instalando o Django

+ +

Após criar um ambiente virtual e usado o comando workon para ativá-lo, você pode usar pip3 para instalar o Django. 

+ +
pip3 install django
+
+ +

Você pode testar a instalação do Django executando o seguinte comando (isso apenas testa se o Python pode achar o módulo Django):

+ +
# Linux/macOS
+python3 -m django --version
+ 2.1.5
+
+# Windows
+py -3 -m django --version
+ 2.1.5
+
+ +
+

Nota: Se o comando Windows acima não mostrar um módulo django, tente:

+ +
py -m django --version
+ +

No Windows, os scripts Python 3 são iniciados prefixando o comando com py -3, embora isso possa variar de acordo com sua instalação. Tente omitir o modificador -3 se você encontrar algum problema com os comandos. No Linux/macOS, o comando é python3.

+
+ +
+

Importante: O resto deste módulo usa o comando Linux  para chamar o Python 3 (python3). Se você  está usando o Windows, substitua o prefixo por: py -3

+
+ +

Testando sua instalação

+ +

O teste acima funciona, mas não é muito divertido. Um teste mais interessante é criar o esqueleto de um projeto e vê-lo funcionando. Para fazer isso, para isso navegue em seu prompt de comando/terminal até o diretório que quer armazenar seus aplicativos Django. Crie uma pasta para seu site e navegue nela.

+ +
mkdir django_test
+cd django_test
+
+ +

Agora você pode criar um novo site chamado "mytestsite" usando a ferramenta django-admin. Após criar o site você pode navegar dentro da pasta onde encontrará o script principal para gerenciar projetos, nomeado manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Nós podemos rodar o web server de desenvolvimento dentro dessa pasta usando o manage.py e o comando runserver, como mostrado.

+ +
$ python3 manage.py runserver
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+December 16, 2018 - 07:06:30
+Django version 2.1.5, using settings 'mytestsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Nota: Acima foi mostrado o comando em Linux/macOS. Você já pode ignorar o aviso sobre "15 unapplied migration(s)"!

+
+ +

Uma vez que o servidor está operando, você pode acessar o site colocando a seguinte URL no seu navegador local:http://127.0.0.1:8000/. Você deveria ver um site como esse:
+ Django Skeleton App Homepage - Django 2.0

+ + + +

Resumo

+ +

Agora você tem um ambiente de desenvolvimento em Django funcionando em seu computador.

+ +

Na seção Testando sua instalação você viu brevemente como criar um website Django usando django-admin startproject, e executá-lo em seu navegador usando um web server de desenvolvimento (python3 manage.py runserver). No próximo artigo nós iremos expandir esse processo, construindo uma aplicação web simples, mas completa.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/server-side/django/hospedagem/index.html b/files/pt-br/learn/server-side/django/hospedagem/index.html deleted file mode 100644 index baa2217b71..0000000000 --- a/files/pt-br/learn/server-side/django/hospedagem/index.html +++ /dev/null @@ -1,692 +0,0 @@ ---- -title: 'Tutorial Django Parte 11: Hospedando Django para produção' -slug: Learn/Server-side/Django/Hospedagem -tags: - - Codificação de Scripts - - Deploy do django - - Fazendo deploy - - Iniciante - - django - - servidor web -translation_of: Learn/Server-side/Django/Deployment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
- -

Agora que criou (e testou) um fantástico website de Biblioteca Local, vai querer instalá-lo em um servidor web público para que possa ser acessado pelo pessoal da biblioteca e membros através da Internet. Este artigo fornece uma visão geral de como poderá encontrar um servidor de hospedagem para instalar o seu web site, e o que precisa fazer para ter o seu site web pronto para produção.

- - - - - - - - - - - - -
Pré-requisitos: -

Completar todos os tópicos do tutorial anterior, incluindo o Tutorial Django Parte 10: Testando uma aplicação web Django.

-
Objectivo:Para saber onde e como se pode hospedar uma aplicação Django na produção.
- -

Visão geral

- -

Uma vez terminado o seu website (ou terminado "o suficiente" para iniciar testes públicos) vai precisar publicá-lo em um host mais público e acessível do que o seu computador de desenvolvimento pessoal.

- -

Até agora tem trabalhado em um ambiente de desenvolvimento, utilizando o servidor web de desenvolvimento Django para compartilhar o seu site com o navegador/rede local, e executando o seu site com configurações de desenvolvimento (inseguras) que expõem debug e outras informações privadas. Antes de poder hospedar um website externamente, vai precisar fazer primeiro:

- - - -

Este tutorial fornece algumas orientações sobre suas opções para escolher um site de hospedagem, uma breve visão geral do que você precisa fazer para deixar seu aplicativo Django pronto para produção e um exemplo prático de como instalar o site Biblioteca Local no serviço de hospedagem em nuvem do Heroku.

- -

O que é um ambiente de produção?

- -

O ambiente de produção é o ambiente fornecido pelo computador/servidor onde você executará seu site para consumo externo. O ambiente inclui:

- - - -
-

Nota: Dependendo de como sua produção está configurada, você também pode ter um proxy reverso, load balancer(balanceador de carga), etc.

-
- -

O computador/servidor pode estar localizado em suas instalações e conectado à Internet por um link rápido, mas é muito mais comum usar um computador hospedado "na nuvem". O que isso realmente significa é que seu código é executado em algum computador remoto (ou possivelmente em um computador "virtual") no(s) centro(s) de dados da empresa de hospedagem. O servidor remoto geralmente oferece algum nível garantido de recursos de computação (por exemplo, CPU, RAM, memória de armazenamento, etc.) e conectividade com a Internet por um determinado preço.

- -

Esse tipo de hardware de computação/rede acessível remotamente é conhecido como Infraestrutura como Serviço (IaaS). Muitos fornecedores de IaaS fornecem opções para pré-instalar um sistema operacional específico, no qual você deve instalar os outros componentes de seu ambiente de produção. Outros fornecedores permitem que você selecione ambientes com mais recursos, talvez incluindo uma configuração completa de Django e servidor web.

- -
-

Nota: Ambientes pré-construídos podem tornar a configuração do seu site muito fácil porque reduzem a configuração, mas as opções disponíveis podem limitar você a um servidor desconhecido (ou outros componentes) e podem ser baseadas em uma versão mais antiga do sistema operacional. Freqüentemente, é melhor instalar você mesmo os componentes, para obter os que deseja e, quando precisar atualizar partes do sistema, tenha uma ideia de por onde começar!

-
- -

Outros provedores de hospedagem oferecem suporte a Django como parte de uma oferta de Plataforma como Serviço (PaaS). Nesse tipo de hospedagem, você não precisa se preocupar com a maior parte do seu ambiente de produção (servidor da web, servidor de aplicativos, balanceadores de carga), pois a plataforma host cuida disso para você (junto com a maior parte do que você precisa fazer para para dimensionar seu aplicativo). Isso torna a implantação muito fácil, porque você só precisa se concentrar em seu aplicativo da web e não em toda a outra infraestrutura de servidor.

- -

Alguns desenvolvedores escolherão a maior flexibilidade fornecida por IaaS em vez de PaaS, enquanto outros apreciarão a sobrecarga de manutenção reduzida e escalonamento mais fácil de PaaS. Quando você está começando, configurar seu site em um sistema PaaS é muito mais fácil e é isso que faremos neste tutorial.

- -
-

Dica: Se você escolher um provedor de hospedagem compatível com Python / Django, ele deve fornecer instruções sobre como configurar um site Django usando diferentes configurações de servidor da web, servidor de aplicativos, proxy reverso, etc (isso não será relevante se você escolher um PaaS ) Por exemplo, existem muitos guias passo a passo para várias configurações nos documentos da comunidade Digital Ocean Django.

-
- -

Escolhendo um provedor de hospedagem

- -

Existem mais de 100 provedores de hospedagem que são conhecidos por oferecer suporte ativo ou funcionar bem com o Django (você pode encontrar uma lista bastante exaustiva em Djangofriendly hosts). Esses fornecedores oferecem diferentes tipos de ambientes (IaaS, PaaS) e diferentes níveis de recursos de computação e rede a preços diferentes.

- -

Algumas coisas a serem consideradas ao escolher um host:

- - - -

A boa notícia quando você está começando é que existem alguns sites que fornecem ambientes de computação de "avaliação", "desenvolvedor" ou "amador" de graça. Esses são sempre ambientes com recursos limitados / restritos e você precisa estar ciente de que eles podem expirar após um período introdutório. No entanto, eles são ótimos para testar sites de baixo tráfego em um ambiente real e podem fornecer uma migração fácil para pagar por mais recursos quando seu site ficar mais ocupado. As escolhas populares nesta categoria incluem Heroku, Python Anywhere, Amazon Web Services, Microsoft Azure, etc.

- -

Muitos provedores também têm uma camada "básica" que fornece níveis mais úteis de capacidade de computação e menos limitações. Digital Ocean e Python Anywhere são exemplos de provedores de hospedagem populares que oferecem uma camada de computação básica relativamente barata (na faixa de US$5 a US$10 por mês).

- -
-

Nota: Lembre-se de que o preço não é o único critério de seleção. Se o seu site for bem-sucedido, pode ser que a escalabilidade seja a consideração mais importante.

-
- -

Preparando seu site para publicação

- -

O esqueleto do site do Django criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.

- -
-

Dica: É comum ter um arquivo settings.py separado para produção e importar configurações confidenciais de um arquivo separado ou de uma variável de ambiente. Este arquivo deve ser protegido, mesmo se o resto do código-fonte estiver disponível em um repositório público.

-
- -

As configurações críticas que você deve verificar são:

- - - -

Vamos mudar o aplicativo LocalLibrary para que possamos ler nosso SECRET_KEY e DEBUG variáveis ​​de variáveis ​​de ambiente se forem definidas, mas caso contrário, use os valores padrão no arquivo de configuração.

- -

Abra /locallibrary/settings.py, desative o original SECRET_KEYconfiguração e adicione as novas linhas conforme mostrado abaixo em negrito. Durante o desenvolvimento, nenhuma variável de ambiente será especificada para a chave, então o valor padrão será usado (não importa qual chave você usa aqui, ou se a chave "vaza", porque você não a usará na produção).

- -
# SECURITY WARNING: keep the secret key used in production secret!
-# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag'
-import os
-SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')
-
- -

Em seguida, comente o existente DEBUG configuração e adicione a nova linha mostrada abaixo.

- -
# SECURITY WARNING: don't run with debug turned on in production!
-# DEBUG = True
-DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
-
- -

O valor do DEBUG será True por padrão, mas será apenas False se o valor do DJANGO_DEBUG variável de ambiente é definida para False. Observe que as variáveis ​​de ambiente são strings e não tipos Python. Portanto, precisamos comparar strings. A única maneira de definir o DEBUG variável para False é realmente configurá-lo para a string False

- -

Você pode definir a variável de ambiente como False, emitindo o seguinte comando:

- -
export DJANGO_DEBUG=False
- -

Uma lista de verificação completa das configurações que você pode querer mudar é fornecida na Lista de verificação de implantação (documentos do Django). Você também pode listar vários deles usando o comando de terminal abaixo:

- -
python3 manage.py check --deploy
-
- -

Exemplo: Instalando LocalLibrary no Heroku

- -

Esta seção fornece uma demonstração prática de como instalar a LocalLibrary na nuvem Heroku PaaS.

- -

Por que Heroku?

- -

Heroku é um dos mais antigos e populares serviços de PaaS baseados em nuvem. Originalmente, ele suportava apenas aplicativos Ruby, mas agora pode ser usado para hospedar aplicativos de muitos ambientes de programação, incluindo Django!

- -

Estamos optando por usar o Heroku por vários motivos:

- - - -

Embora o Heroku seja perfeito para hospedar esta demonstração, pode não ser perfeito para o seu site real. O Heroku torna as coisas fáceis de configurar e escalar, ao custo de ser menos flexível e potencialmente muito mais caro depois que você sai do nível gratuito.

- -

How does Heroku work?

- -

Heroku runs Django websites within one or more "Dynos", which are isolated, virtualized Unix containers that provide the environment required to run an application. The dynos are completely isolated and have an ephemeral file system (a short-lived file system that is cleaned/emptied every time the dyno restarts). The only thing that dynos share by default are application configuration variables. Heroku internally uses a load balancer to distribute web traffic to all "web" dynos. Since nothing is shared between them, Heroku can scale an app horizontally simply by adding more dynos (though of course you may also need to scale your database to accept additional connections).

- -

Because the file system is ephemeral you can't install services required by your application directly (e.g. databases, queues, caching systems, storage, email services, etc). Instead Heroku web applications use backing services provided as independent "add-ons" by Heroku or 3rd parties. Once attached to your web application, the dynos access the services using information contained in application configuration variables.

- -

In order to execute your application Heroku needs to be able to set up the appropriate environment and dependencies, and also understand how it is launched. For Django apps we provide this information in a number of text files:

- - - -

Developers interact with Heroku using a special client app/terminal, which is much like a Unix Bash shell. This allows you to upload code that is stored in a git repository, inspect the running processes, see logs, set configuration variables and much more!

- -

In order to get our application to work on Heroku we'll need to put our Django web application into a git repository, add the files above, integrate with a database add-on, and make changes to properly handle static files.

- -

Once we've done all that we can set up a Heroku account, get the Heroku client, and use it to install our website.

- -
-

Note: The instructions below reflect how to work with Heroku at time of writing. If Heroku significantly change their processes, you may wish to instead check their setup documents: Getting Started on Heroku with Django.

-
- -

That's all the overview you need in order to get started (see How Heroku works for a more comprehensive guide).

- -

Creating an application repository in Github

- -

Heroku is closely integrated with the git source code version control system, using it to upload/synchronise any changes you make to the live system. It does this by adding a new heroku "remote" repository named heroku pointing to a repository for your source on the Heroku cloud. During development you use git to store changes on your "master" repository. When you want to deploy your site, you sync your changes to the Heroku repository.

- -
-

Note: If you're used to following good software development practices you are probably already using git or some other SCM system. If you already have a git repository, then you can skip this step.

-
- -

There are a lot of ways to work with git, but one of the easiest is to first set up an account on Github, create the repository there, and then sync to it locally:

- -
    -
  1. Visit https://github.com/ and create an account.
    2. -
  2. Once you are logged in, click the + link in the top toolbar and select New repository.
    3. -
  3. Fill in all the fields on this form. While these are not compulsory, they are strongly recommended. -
      -
    • Enter a new repository name (e.g. django_local_library), and description (e.g. "Local Library website written in Django".
      • -
    • Choose Python in the Add .gitignore selection list.
      • -
    • Choose your preferred license in the Add license selection list.
      • -
    • Check Initialize this repository with a README.
      • -
    -
    4. -
  4. Press Create repository.
    5. -
  5. Click the green "Clone or download" button on your new repo page.
    6. -
  6. Copy the URL value from the text field inside the dialog box that appears (it should be something like: https://github.com/<your_git_user_id>/django_local_library.git).
    7. -
- -

Now that the repository ("repo") is created we are going to want to clone it on our local computer:

- -
    -
  1. Install git for your local computer (you can find versions for different platforms here).
    2. -
  2. Open a command prompt/terminal and clone your repository using the URL you copied above: - 
    git clone https://github.com/<your_git_user_id>/django_local_library.git
-
    - This will create the repository in a new folder in the current working directory.
    3. -
  3. Navigate into the new repo. - 
    cd django_local_library
    -
    4. -
- -

The final steps are to copy your application into this local project directory and then add (or "push", in git lingo) the local repository to your remote Github repository:

- -
    -
  1. Copy your Django application into this folder (all the files at the same level as manage.py and below, not their containing locallibrary folder).
    2. -
  2. Open the .gitignore file, copy the following lines into the bottom of it, and then save (this file is used to identify files that should not be uploaded to git by default). - 
    # Text backup files
-*.bak
-
-# Database
-*.sqlite3
    -
    3. -
  3. Open a command prompt/terminal and use the add command to add all files to git. This adds the files which aren't ignored by the .gitignore file to the "staging area". - 
    git add -A
-
    -
    4. -
  4. Use the status command to check that all files you are about to commit are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below. - 
    > git status
-On branch master
-Your branch is up-to-date with 'origin/master'.
-Changes to be committed:
-  (use "git reset HEAD <file>..." to unstage)
-
-        modified:   .gitignore
-        new file:   catalog/__init__.py
-        ...
-        new file:   catalog/migrations/0001_initial.py
-        ...
-        new file:   templates/registration/password_reset_form.html
    -
    5. -
  5. When you're satisfied, commit the files to your local repository. This is essentially equivalent to signing off on the changes and making them an official part of the local repository. - 
    git commit -m "First version of application moved into github"
    -
    6. -
  6. At this point, the remote repository has not been changed. Synchronise (push) your local repository to the remote Github repository using the following command: - 
    git push origin master
    -
    7. -
- -

When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.

- -
-

Tip: This is a good point to make a backup of your "vanilla" project — while some of the changes we're going to be making in the following sections might be useful for deployment on any platform (or development) others might not.

- -

The best way to do this is to use git to manage your revisions. With git you can not only go back to a particular old version, but you can maintain this in a separate "branch" from your production changes and cherry-pick any changes to move between production and development branches. Learning Git is well worth the effort, but is beyond the scope of this topic.

- -

The easiest way to do this is to just copy your files into another location. Use whichever approach best matches your knowledge of git!

-
- -

Update the app for Heroku

- -

This section explains the changes you'll need to make to our LocalLibrary application to get it to work on Heroku. While Heroku's Getting Started on Heroku with Django instructions assume you will use the Heroku client to also run your local development environment, our changes are compatible with the existing Django development server and the workflows we've already learned.

- -

Procfile

- -

Create the file Procfile (no extension) in the root of your GitHub repository to declare the application's process types and entry points. Copy the following text into it:

- -
web: gunicorn locallibrary.wsgi --log-file -
- -

The "web:" tells Heroku that this is a web dyno and can be sent HTTP traffic. The process to start in this dyno is gunicorn, which is a popular web application server that Heroku recommends. We start Gunicorn using the configuration information in the module locallibrary.wsgi (created with our application skeleton: /locallibrary/wsgi.py).

- -

Gunicorn

- -

Gunicorn is the recommended HTTP server for use with Django on Heroku (as referenced in the Procfile above). It is a pure-Python HTTP server for WSGI applications that can run multiple Python concurrent processes within a single dyno (see Deploying Python applications with Gunicorn for more information).

- -

While we won't need Gunicorn to serve our LocalLibrary application during development, we'll install it so that it becomes part of our requirements for Heroku to set up on the remote server.

- -

Install Gunicorn locally on the command line using pip (which we installed when setting up the development environment):

- -
-

Note: Make sure that you're in your Python virtual environment (use the workon [name-of-virtual-environment] command) before you install Gunicorn and further modules with pip, or you might experience problems with importing these modules in your /locallibrary/settings.py file in the later sections. 

-
- -
pip3 install gunicorn
-
- -

Database configuration

- -

We can't use the default SQLite database on Heroku because it is file-based, and it would be deleted from the ephemeral file system every time the application restarts (typically once a day, and every time the application or its configuration variables are changed).

- -

The Heroku mechanism for handling this situation is to use a database add-on and configure the web application using information from an environment configuration variable, set by the add-on. There are quite a lot of database options, but we'll use the hobby tier of the Heroku postgres database as this is free, supported by Django, and automatically added to our new Heroku apps when using the free hobby dyno plan tier.

- -

The database connection information is supplied to the web dyno using a configuration variable named DATABASE_URL. Rather than hard-coding this information into Django, Heroku recommends that developers use the dj-database-url package to parse the DATABASE_URL environment variable and automatically convert it to Django’s desired configuration format. In addition to installing the dj-database-url package we'll also need to install psycopg2, as Django needs this to interact with Postgres databases.

- -
dj-database-url (Django database configuration from environment variable)
- -

Install dj-database-url locally so that it becomes part of our requirements for Heroku to set up on the remote server:

- -
$ pip3 install dj-database-url
-
- -
settings.py
- -

Open /locallibrary/settings.py and copy the following configuration into the bottom of the file:

- -
# Heroku: Update database configuration from $DATABASE_URL.
-import dj_database_url
-db_from_env = dj_database_url.config(conn_max_age=500)
-DATABASES['default'].update(db_from_env)
- -
-

Note:

- - -
- -
psycopg2 (Python Postgres database support)
- -

Django needs psycopg2 to work with Postgres databases and you will need to add this to the requirements.txt for Heroku to set this up on the remote server (as discussed in the requirements section below).

- -

Django will use our SQLite database locally by default, because the DATABASE_URL environment variable isn't set in our local environment. If you want to switch to Postgres completely and use our Heroku free tier database for both development and production then you can. For example, to install psycopg2 and its dependencies locally on a Debian-flavoured Linux system you would use the following Bash/terminal commands:

- -
sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib
-pip3 install psycopg2-binary
-
- -

Installation instructions for the other platforms can be found on the psycopg2 website here.

- -

However, you don't need to do this — you don't need PostgreSQL active on the local computer, as long as you give it to Heroku as a requirement, in requirements.txt (see below).

- -

Serving static files in production

- -

During development we used Django and the Django development web server to serve our static files (CSS, JavaScript, etc.). In a production environment we instead typically serve static files from a content delivery network (CDN) or the web server.

- -
-

Note: Serving static files via Django/web application is inefficient because the requests have to pass through unnecessary additional code (Django) rather than being handled directly by the web server or a completely separate CDN. While this doesn't matter for local use during development, it would have a significant performance impact if we were to use the same approach in production. 

-
- -

To make it easy to host static files separately from the Django web application, Django provides the collectstatic tool to collect these files for deployment (there is a settings variable that defines where the files should be collected when collectstatic is run). Django templates refer to the hosting location of the static files relative to a settings variable (STATIC_URL), so that this can be changed if the static files are moved to another host/server.

- -

The relevant setting variables are:

- - - -
settings.py
- -

Open /locallibrary/settings.py and copy the following configuration into the bottom of the file. The BASE_DIR should already have been defined in your file (the STATIC_URL may already have been defined within the file when it was created. While it will cause no harm, you might as well delete the duplicate previous reference).

- -
# Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/2.1/howto/static-files/
-
-# The absolute path to the directory where collectstatic will collect static files for deployment.
-STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
-
-# The URL to use when referring to static files (where they will be served from)
-STATIC_URL = '/static/'
-
- -

We'll actually do the file serving using a library called WhiteNoise, which we install and configure in the next section.

- -

For more information, see Django and Static Assets (Heroku docs).

- -

Whitenoise

- -

There are many ways to serve static files in production (we saw the relevant Django settings in the previous sections). Heroku recommends using the WhiteNoise project for serving of static assets directly from Gunicorn in production.

- -
-

Note: Heroku automatically calls collectstatic and prepares your static files for use by WhiteNoise after it uploads your application. Check out WhiteNoise documentation for an explanation of how it works and why the implementation is a relatively efficient method for serving these files.

-
- -

The steps to set up WhiteNoise to use with the project are given here (and reproduced below):

- -
WhiteNoise
- -

Install whitenoise locally using the following command:

- -
$ pip3 install whitenoise
-
- -
settings.py
- -

To install WhiteNoise into your Django application, open /locallibrary/settings.py, find the MIDDLEWARE setting and add the WhiteNoiseMiddleware near the top of the list, just below the SecurityMiddleware:

- -
MIDDLEWARE = [
-    'django.middleware.security.SecurityMiddleware',
-    'whitenoise.middleware.WhiteNoiseMiddleware',
-    'django.contrib.sessions.middleware.SessionMiddleware',
-    'django.middleware.common.CommonMiddleware',
-    'django.middleware.csrf.CsrfViewMiddleware',
-    'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'django.contrib.messages.middleware.MessageMiddleware',
-    'django.middleware.clickjacking.XFrameOptionsMiddleware',
-]
-
- -

Optionally, you can reduce the size of the static files when they are served (this is more efficient). Just add the following to the bottom of /locallibrary/settings.py:

- -
# Simplified static file serving.
-# https://warehouse.python.org/project/whitenoise/
-STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
-
- -

Requirements

- -

The Python requirements of your web application must be stored in a file requirements.txt in the root of your repository. Heroku will then install these automatically when it rebuilds your environment. You can create this file using pip on the command line (run the following in the repo root):

- -
pip3 freeze > requirements.txt
- -

After installing all the different dependencies above, your requirements.txt file should have at least these items listed (though the version numbers may be different). Please delete any other dependencies not listed below, unless you've explicitly added them for this application.

- -
dj-database-url==0.5.0
-Django==2.1.5
-gunicorn==19.9.0
-psycopg2-binary==2.7.7
-whitenoise==4.1.2
-
- -
-

Make sure that a psycopg2 line like the one above is present! Even if you didn't install this locally then you should still add it to requirements.txt.

-
- -

Runtime

- -

The runtime.txt file, if defined, tells Heroku which programming language to use. Create the file in the root of the repo and add the following text:

- -
python-3.7.0
- -
-

Note: Heroku only supports a small number of Python runtimes (at time of writing, this includes the one above). Heroku will use a supported runtime irrespective of the value specified in this file.

-
- -

Re-test and save changes to Github

- -

Before we proceed, lets test the site again locally and make sure it wasn't broken by any of our changes above. Run the development web server as usual and then check the site still works as you expect on your browser.

- -
python3 manage.py runserver
- -

Next, lets push our changes to Github. In the terminal (after having navigated to our local repository), enter the following commands:

- -
git add -A
-git commit -m "Added files and changes required for deployment to heroku"
-git push origin master
-
- -

We should now be ready to start deploying LocalLibrary on Heroku.

- -

Get a Heroku account

- -

To start using Heroku you will first need to create an account:

- - - -

Install the client

- -

Download and install the Heroku client by following the instructions on Heroku here.

- -

After the client is installed you will be able run commands. For example to get help on the client:

- -
heroku help
-
- -

Create and upload the website

- -

To create the app we run the "create" command in the root directory of our repository. This creates a git remote ("pointer to a remote repository") named heroku in our local git environment.

- -
heroku create
- -
-

Note: You can name the remote if you like by specifying a value after "create". If you don't then you'll get a random name. The name is used in the default URL.

-
- -

We can then push our app to the Heroku repository as shown below. This will upload the app, package it in a dyno, run collectstatic, and start the site.

- -
git push heroku master
- -

If we're lucky, the app is now "running" on the site, but it won't be working properly because we haven't set up the database tables for use by our application. To do this we need to use the heroku run command and start a "one off dyno" to perform a migrate operation. Enter the following command in your terminal:

- -
heroku run python manage.py migrate
- -

We're also going to need to be able to add books and authors, so lets also create our administration superuser, again using a one-off dyno:

- -
heroku run python manage.py createsuperuser
- -

Once this is complete, we can look at the site. It should work, although it won't have any books in it yet. To open your browser to the new website, use the command:

- -
heroku open
- -

Create some books in the admin site, and check out whether the site is behaving as you expect.

- -

Managing addons

- -

You can check out the add-ons to your app using the heroku addons command. This will list all addons, and their price tier and state.

- -
> heroku addons
-
-Add-on                                     Plan       Price  State
-─────────────────────────────────────────  ─────────  ─────  ───────
-heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
- └─ as DATABASE
- -

Here we see that we have just one add-on, the postgres SQL database. This is free, and was created automatically when we created the app. You can open a web page to examine the database add-on (or any other add-on) in more detail using the following command:

- -
heroku addons:open heroku-postgresql
-
- -

Other commands allow you to create, destroy, upgrade and downgrade addons (using a similar syntax to opening). For more information see Managing Add-ons (Heroku docs).

- -

Setting configuration variables

- -

You can check out the configuration variables for the site using the heroku config command. Below you can see that we have just one variable, the DATABASE_URL used to configure our database.

- -
> heroku config
-
-=== locallibrary Config Vars
-DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3
- -

If you recall from the section on getting the website ready to publish, we have to set environment variables for DJANGO_SECRET_KEY and DJANGO_DEBUG. Let's do this now.

- -
-

Note: The secret key needs to be really secret! One way to generate a new key is to use the Django Secret Key Generator.

-
- -

We set DJANGO_SECRET_KEY using the config:set command (as shown below). Remember to use your own secret key!

- -
> heroku config:set DJANGO_SECRET_KEY='eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&='
-
-Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
-DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
-
- -

We similarly set DJANGO_DEBUG:

- -
> heroku config:set DJANGO_DEBUG=
-
-Setting DJANGO_DEBUG and restarting locallibrary... done, v8
- -

If you visit the site now you'll get a "Bad request" error, because the ALLOWED_HOSTS setting is required if you have DEBUG=False (as a security measure). Open /locallibrary/settings.py and change the ALLOWED_HOSTS setting to include your base app url (e.g. 'locallibrary1234.herokuapp.com') and the URL you normally use on your local development server.

- -
ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1']
-# For example:
-# ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com', '127.0.0.1']
-
- -

Then save your settings and commit them to your Github repo and to Heroku:

- -
git add -A
-git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
-git push origin master
-git push heroku master
- -
-

After the site update to Heroku completes, enter a URL that does not exist (e.g. /catalog/doesnotexist/). Previously this would have displayed a detailed debug page, but now you should just see a simple "Not Found" page.

-
- -

Debugging

- -

The Heroku client provides a few tools for debugging:

- -
# Show current logs
-heroku logs
-
-# Show current logs and keep updating with any new results
-heroku logs --tail
-
-# Add additional logging for collectstatic (this tool is run automatically during a build)
-heroku config:set DEBUG_COLLECTSTATIC=1
-
-# Display dyno status
-heroku ps
-
- -

If you need more information than these can provide you will need to start looking into Django Logging.

- - - -

Summary

- -

That's the end of this tutorial on setting up Django apps in production, and also the series of tutorials on working with Django. We hope you've found them useful. You can check out a fully worked-through version of the source code on Github here.
-
- The next step is to read our last few articles, and then complete the assessment task.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}

- -

In this module

- - diff --git a/files/pt-br/learn/server-side/django/introduction/index.html b/files/pt-br/learn/server-side/django/introduction/index.html new file mode 100644 index 0000000000..9258d18dc6 --- /dev/null +++ b/files/pt-br/learn/server-side/django/introduction/index.html @@ -0,0 +1,346 @@ +--- +title: Introdução ao Django +slug: Learn/Server-side/Django/Introdução +tags: + - Aprender + - Codificação + - Iniciante + - Introdução + - Programação do lado do servidor + - Python + - django +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

Neste primeiro artigo do Django, respondemos a pergunta "O que é o Django?" e daremos uma visão geral do que torna este framework web especial. Vamos descrever os principais recursos, incluindo algumas das funcionalidades avançadas que não teremos tempo para abordar detalhadamente neste módulo. Também mostraremos alguns dos principais blocos de construção de um aplicativo Django (embora neste momento você ainda não tenha um ambiente de desenvolvimento para testá-lo).

+ + + + + + + + + + + + +
Pré-requisitos: +

Conhecimentos básicos em computação. Um entendimento geral de programação de websites do lado do servidor e, em particular, a mecânica de interações cliente-servidor em websites.

+
Objetivos:Ganhar familiaridade com o que é o Django, quais funcionalidades ele fornece e os principais blocos de construção de uma aplicação django.
+ +

O que é Django?

+ +

Django é um framework web Python de alto nível que permite o rápido desenvolvimento de sites seguros e de fácil manutenção. Construido por desenvolvedores experientes, o Django cuida de grande parte do trabalho de desenvolvimento web, para que você possa se concentrar em escrever seu aplicativo sem precisar reinventar a roda. É gratuito e de código aberto, tem uma comunidade próspera e ativa, ótima documentação e muitas opções de suporte gratuito e pago. 

+ +

Django ajuda você a escrever programas que são:

+ +
+
Completo
+
Django segue a filosofia de "baterias incluídas" e fornece quase tudo que desenvolvedores possam querer fazer "fora da caixa". Como tudo o que você precisa é parte de um "produto", tudo funciona perfeitamente junto, seguindo princípios de design consistentes, contando uma extensa e atualizada documentação.
+
Versátil
+
Django pode ser (e tem sido) utilizado para construir quase todo tipo de website - desde sistema de gestão de conteúdo e wikis, passando por redes sociais e sites de notícias. Ele pode trabalhar com qualquer framework do lado do cliente, e pode entregar conteúdo em praticamente qualquer formato (incluindo HTML, feeds RSS, JSON, XML, etc). Esse site que você está lendo agora é baseado em Django.
+
À medida em que, internamente, fornece opções para quase todo tipo de funcionalidade que você possa querer (por exemplo: vários banco de dados que são populares, motores de template, etc), ele pode também ser extendido para utilizar outros componentes, caso seja necessário.
+
Seguro
+
Django ajuda os desenvolvedores a evitar os erros de segurança mais comuns, fornecendo um framework que foi desenhado para "fazer as coisas certas", de modo a proteger o website automaticamente. Por exemplo, Django fornece uma maneira segura de gerenciar as contas dos usuários e suas senhas, evitando erros comuns, tais como colocar informações da sessão em cookies, onde ficam vulneráveis (ao invés disso os cookies contém apenas uma chave e os dados são armazenados no banco de dados), ou armazenar as senhas de forma direta, ao invés de gravar um hash para essas senhas.
+
Um hash de senha é um valor fixed-length (tamanho-fixo) criado mandando a senha por uma cryptographic hash function (função hash criptográfica). Django pode checar se uma senha inserida está correta executando ela pela função hash e comparando a saída com o valor hash armazenado. Porém devido a natureza "one-way" ("um-caminho") da função, mesmo que o valor hash armazenado estiver comprometido, é difcil para uma pessoa comentendo um ataque resolver a senha original.
+
O Django ativa a proteção contra muitas vulnerabilidades por padrão, incluindo SQL injection (injeção de SQL), cross-site scripting, cross-site request forgery (Falsificação de solicitação entre sites), e clickjacking ("furto de click") (veja Segurança de sites para mais detalhes de tais ataques).
+
Escalável
+
Django usa uma arquitetura baseada em componentes “shared-nothing” ("nada-compartilhado") (cada parte da arquitetura é idependente das outras, e consequentemente podem ser subistituidas ou mudadas caso necessário). Ter uma separação clara entre as partes diferentes significa que pode se escalar para um trágefo aumentado adicionando hardware em qualquer nível: servidores de cache, servidores de banco de dados ou servidores de aplicação. Alguns dos sites mais ocupados escalaram o Django com sucesso para cumprir com as suas demandas (ex: Instagram e Disqus).
+
Sustentável
+
O código do Django é escrito usando princípios de design e padrões que encorajam a criação de codigo sustentável (que facilita a manutenção) e reusável. Em particular, isso utiliza o principio  DRY - Don't Repeat Yourself (Não Repita a Si Mesmo) para que não haja duplicações desnecessárias, reduzindo a quantidade de código. O Django também promove o agrupamento de funcionalidades relacionadas para aplicativos reusáveis e, em um nível mais baixo, grupos de código relacionados para modulos (juntamente as linhas do padrão MVC - Model View Controller).
+
Portável
+
Django é escrito em Python, que executa em muitas plataformas. Isso significa que você não esta preso em nenhuma plataforma de servidor em particular, e pode executar seus aplicativos em muitas distrubuições do Linux, Windows e Mac OS X. Além disso, o Django tem um bom suporte em muitos provedores de servidores de web, que muitas vezes provem infraestrutura especifca e documentação para hospedar sites feitos com Django.
+
+ +

De onde o Django veio?

+ +

Django foi inicialmente desenvolvido entre 2003 e 2005 por um time de web que era responsável por criar e manter sites de jornal. Depois de criar um número de sites, o time começou a fatorar e reutilizar muitos de seus códigos comuns e padrões de design. Esse código comum evoluiu para um framework genérico de desenvolvimento web, que foi lançado como um projeto de código aberto nomeado "Django" em Julho de 2005.

+ +

Django continou a crescer e aprimorar, desde seu lançamento (1.0) em Setembro de 2008 até a versão recentemente lançada 2.0 em 2017. Cada lançamento adicionou novas funcionalidades e consertou falhas, variando entre suportar novos tipos de banco de dados, mecanismos de template e caches, até a adição de funções view "genéricas" e classes (que reduzem a quantidade de código que os desenvolvedores tem que escrever para um número de tarefas de programação).

+ +
+

Nota: Cheque as notas de lançamento no site do Django para ver o que mudou nas versões mais recentes, e quanto trabalho esta sendo feito para tornar o Django melhor.

+
+ +

Django é um projeto de código aberto, colaborativo e próspero, com milhares de usuários contribuindo. Embora ainda tenha alguns recursos que refletem sua origem, Django evoluiu para um framework versátil que é capaz de desenvovler qualquer tipo de website.

+ + + +

Não há nenhum método disponível e definitivo para medir a popularidade dos framework server-side (lado do servidor) (apesar de sites como Hot Frameworks tentam acessar a popularidade usando mecanismos como contar o numero de projetos no GitHub e perguntas no StackOverflow para cada cada platafroma). Uma questão melhor é se o Django é "popular o suficiente" para evitar problemas de plataformas não populares. Ele continua a evoluir? Você consegue ajuda se precisar? Existem oportunidades para você ganhar dinheiro se voce aprender Django?

+ +

Baseado no número de sites com alto perfil que usam Django, o número de pessoas contribuindo para a base de código, e o número de pessoas provendo ambos suporte gratuito e pago, então sim, Django é um framework popular!

+ +

Alguns sites de alto perfil que usam Django são: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, and Open Stack (fonte: Página inicial do django).

+ +

O Django é opinativo?

+ +

Frameworks de web frequentemente referem a si mesmos como "opinativo" e "não opinativo".

+ +

Frameworks opinativos são aqueles com opiniões sobre o "modo correto" de como lidar com uma tarefa em particular. Eles frequentemente auxiliam no desenvolvimento rapido em um domínio em particular (resolvendo problemas de um tipo em particular) porque o modo correto de fazer qualquer coisa normalmente já foi bem compreendido e bem documentado. Porém eles podem ser menos flexíveis para resolver problemas fora de seu principal domínio, e tendem a oferecer menos opções para quais componentes e abordagens eles podem usar.

+ +

Frameworks não opinativos, em contraste, possuem bem menos restrições sobre a melhor maneira de unir os componentes para atingir um objetivo, ou até mesmo quais componentes devem ser usados. Eles tornam mais fácil para os desenvolvedores usar as ferramentas mais adequadas para completar uma tarefa em particular, apesar do custo de você mesmo ter que achar esses componentes.
+
+ Django é "moderadamente opinativo" e, portantanto, oferece o "melhor dos dois mundo". Ele fornece um conjunto de componentes para lidar com a maioria das tarefas de desenvolvimento web, e uma (ou duas) maneiras preferidas de usá-las. No entanto, a arquitetura desacoplada do Django significa que você geralmente pode escolher entre várias opções diferentes, ou adicionar suporte para outras completamente novas, se desejar.

+ +

Com o que o código do Django parece?

+ +

Em um site data-driven (orientado a dados) tradicional, um aplicativo web aguarda solicitações HTTP do navegador da web (ou outro cliente). Quando uma solicitação é recebida, o aplicativo calcula o que é necessário com base na URL e possivelmente nas informações dos dados POST ou GET. Dependendo do que for necessário, ele poderá ler ou gravar informações de um banco de dados ou executar outras tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta para o navegador da web, normalmente criando dinamicamente uma página HTML para o navegador exibir, inserindo os dados recuperados em espaços reservados em um template HTML.

+ +

Aplicativos web feitos com Django geralmente agrupam o código que manipula cada uma dessas etapas em arquivos separados:

+ +

+ + + +
+

Nota: Django refere a essa organização como uma arquitetura nomeada "Model View Template (MVT)" ("Modelo Vista Template"). Ela tem muitas semelhanças com a familiar arquitetura Model View Controller (Modelo Vista Controlador).

+
+ + + +

As seções abaixo lhe darão uma idéia de como essas partes principais de um aplicativo do Django se parecerão (nos vamos entrar em mais detalhes mais tarde no curso, assim que configurarmos um ambiente de desenvolvimento).

+ +

Enviando a solicitação para a view correta (urls.py)

+ +

Um mapeador de URLs normalmente é armazenado em um arquivo chamado urls.py. No exemplo abaixo, o mapeador (urlpatterns) (padrões de url) define uma lista de mapeamentos entre rotas (padrões específicos de URL) e funções view correspondentes. Se uma solicitação HTTP for recebida com uma URL correspondente a um padrão especificado, a função view associada será chamada e a solicitação/requisição sera transmitida.

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/<int:id>/', views.book-detail, name='book-detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+
+# favor utilizar o código acima no seu projeto ao invés do que está abaixo
+# urlpatterns = [
+#     path('admin/', admin.site.urls),
+#     path('livro/<int:id>/', views.livro-detalhes, name='livro-detalhes'),
+#     path('catalogo/', include('catalogo.urls')),
+#     re_path(r'^([0-9]+)/$', views.melhor),
+# ]
+
+ +

O objeto urlpatterns é uma lista de funções path() (caminhos) e/ou re_path() (listas em Python são definidas usando colchetes, onde os itens são separados por vírgulas e podem conter opcionalmente uma vírgula no final. Por exemplo: [item1, item2, item3,]).

+ +

O primeiro argumento para ambos os métodos é uma rota (padrão) que será correspondida. O método path() usa sinais de menor e maior (<, >) para definir partes de uma URL que serão capturadas e passadas para a função view como argumentos nomeados. A função re_path() usa uma abordagem de correspondência de padrões flexível, conhecida como expressão regular. Nós vamos falar sobre isso em um artigo posterior!

+ +

O segundo argumento é outra função que será chamada quando o padrão for correspondido. A notação views.book-detail (views.livro-detalhes) indica que a função é chamada de book-detail() (livro-detalhes()) e pode ser encontrada em um módulo chamado views (ou seja, dentro de um arquivo chamado views.py)

+ +

Manipulando a solicitação (views.py)

+ +

As view são o coração do aplicativo web, recebendo solicitações HTTP de clientes da web e retornando respostas HTTP. No meio disto, eles preparam os outros recursos do framework para acessar bancos de dados, renderizar (exibir) templates, etc.

+ +

O exemplo abaixo mostra uma função view mínima chamada index(), que poderia ter sido chamado pelo nosso mapeador de URLs na seção anterior. Como todas as funções view, ele recebe um objeto HttpRequest como um parâmetro (request) e retorna um objeto HttpResponse. Nesse caso, não fazemos nada com a solicitação, e nossa resposta simplesmente retorna uma string. Mostraremos uma solicitação que faz algo mais interessante em uma seção posterior.

+ +
## filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+
+# favor utilizar o código acima no seu projeto ao invés do que está abaixo
+## nome do arquivo: views.py (Onde as funções view ficam)
+
+from django.http import HttpResponse
+
+def index(requisito):
+    # Recebe um HttpRequest - o parametro requisito
+    # Executar operações usando informações do requisito (solicitação).
+    # Retornar HttpResponse
+    return HttpResponse('Um oi do Django!')
+
+ +
+

Nota: Um pouquinho de Python:

+ + +
+ + + +

Views geralmente são armazenadas em um arquivo chamado views.py.

+ +

Definindo o modelo dos dados (models.py)

+ +

Os aplicativos web feitos com Django gerenciam e consultam dados por meio de objetos do Python chamados de modelos. Os modelos definem a estrutura dos dados armazenados, incluindo os tipos do campo e possivelmente também seu tamanho máximo, valores padrão, opções de lista de seleção, texto de ajuda para documentação, texto de etiqueta (label) para formulários etc. A definição do modelo é independente do banco de dados subjacente — você pode escolher um dentre vários como parte das configurações do seu projeto. Uma vez que você escolheu qual banco de dados você quer usar, você não precisa se comunicar diretamente com ele — você apenas escreve a estrutura dos seus modelos e qualquer outro código, e o Django lida com todo o trabalho de se comunicar com o banco de dados para você.

+ +

O trecho de código abaixo mostra um modelo simples do Django para um objeto Team (Time). A classe Team é derivada da classe do Django models.Model. Ela define o nome e o nível da equipe como campos de caractere e especifica um número máximo de caracteres a serem armazenados para cada registro. O team_level (time_nivel) pode ser um de vários valores, portanto, o definimos como um campo de opção e fornecemos um mapeamento entre as opções a serem exibidas e os dados a serem armazenados, junto com um valor padrão.

+ +
## filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+# favor utilizar o código acima no seu projeto ao invés do que está abaixo
+## nome do arquivo: models.py
+
+from django.db import models
+
+class Time(models.Model):
+    # models.CharField define um campo de caractere no banco de dados e max_length define o tamanho maximo permitido
+    time_nome = models.CharField(max_length=40)
+
+    TIME_NIVEIS = (
+        ('A09', 'Abaixo de 09'),
+        ('A10', 'Abaixo de 10'),
+        ('A11', 'Abaixo de 11'),
+        ... #list other team levels
+    )
+
+    time_nivel = models.CharField(max_length=3,choices=TIME_NIVEIS,default='A11') # choices-opções / default-padrão
+
+ +
+

Nota: Um pouquinho de Python:

+ + +
+ +

Consultando dados (views.py)

+ +

O modelo Django fornece uma query API simples para buscas no banco de dados. Isto pode combinar com um grande número de campos ao mesmo tempo utilizando diversos critérios (ex.: exato, maiúsculas e minúsculas (case-sensitive), maior que, etc.), e pode suportar definições complexas (por exemplo, você pode especificar a busca por times U11 que tem os nomes começando com 'Fr" ou terminando com "al").

+ +

O trecho de código mostra uma função da View (manipulador de recursos) para exibir todos os nossos times U09. A linha em negrito mostra como podemos usar a API modelo de consulta para filtrar todos os registros em que o campo team_level possui exatamente o texto 'U09' (observe como esse critério é passado para a função  filter()  com o argumento no campo de nome e o tipo de busca de correspondência (exact) separado por um sublinhado duplo: (team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+# favor utilizar o código acima no seu projeto ao invés do código abaixo
+## nome do arquivo: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    lista_times = Team.objects.filter(team_level__exact="U09")
+    contexto = {'times_jovens': lista_times}
+    return render(request, '/best/index.html', contexto)
+
+ +
+
+ +

A função index() usa a função render() para criar o HttpResponse que é enviado de volta para o navegador. Essa função é um atalho, ela cria um arquivo HTML combinando um modelo HTML específico com alguns dados (fornecidos pela variável denominada "context"). Na próxima seção, mostramos como os dados são inseridos no modelo para criar HTML.

+ +

Renderizando dados (Modelos HTML)

+ +

O sistema de modelo permite especificar a estrutura de um documento de saída, usando espaços reservados para dados que serão preenchidos quando uma página for gerada. Os modelos geralmente são usados para criar HTML, mas também podem criar outros tipos de documentos. O Django suporta o sistema de modelos nativo e outra biblioteca Python popular chamada Jinja2 pronta para uso (também pode ser feita para suportar outros sistemas, se necessário).

+ +

O trecho de código mostra a aparência do modelo HTML chamado pela função render() na seção anterior. Este modelo foi escrito sob a premissa de que ele terá acesso a uma variável do tipo lista chamada youngest_teams quando for renderizada (contida na variável context dentro da função render() acima). Dentro do esqueleto HTML, temos um a expressão que primeiro verifica se a variável youngest_teams existe e a itera em um loop for. Em cada iteração, o modelo exibe o valor team_name de cada equipe em um elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+
+#favor utilizar o código acima no seu projeto ao invés do código abaixo
+## nome do arquivo: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="pt">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+     {% for team in youngest_teams %}
+         <li>\{\{ team.team_name \}\}</li>
+     {% endfor %}     </ul> {% else %}
+     <p>Nenhum time disponível.</p>
+ {% endif %}
+ </body>
+ </html>
+
+ +

O que mais você pode fazer?

+ +

As seções anteriores mostram os principais recursos que você usará na maioria dos aplicativos Web: mapeamento de URL, views, moldes e modelos. O Django também fornece outras coisas, como:

+ + + +

Resumo

+ +

Parabéns, você completou o primeiro passo em sua jornada no Django! Agora você deve entender os principais benefícios do Django, um pouco sobre sua história e aproximadamente como podem ser as partes principais de um aplicativo Django. Você também deve ter aprendido algumas coisas sobre a linguagem de programação Python, incluindo a sintaxe para listas, funções e classes.

+ +

Você já viu algum código real do Django acima, mas, diferentemente do código do lado do cliente, você precisa configurar um ambiente de desenvolvimento para executá-lo. Esse é o nosso próximo passo.

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

Neste módulo

+ + diff --git "a/files/pt-br/learn/server-side/django/introdu\303\247\303\243o/index.html" "b/files/pt-br/learn/server-side/django/introdu\303\247\303\243o/index.html" deleted file mode 100644 index 9258d18dc6..0000000000 --- "a/files/pt-br/learn/server-side/django/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Introdução ao Django -slug: Learn/Server-side/Django/Introdução -tags: - - Aprender - - Codificação - - Iniciante - - Introdução - - Programação do lado do servidor - - Python - - django -translation_of: Learn/Server-side/Django/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

Neste primeiro artigo do Django, respondemos a pergunta "O que é o Django?" e daremos uma visão geral do que torna este framework web especial. Vamos descrever os principais recursos, incluindo algumas das funcionalidades avançadas que não teremos tempo para abordar detalhadamente neste módulo. Também mostraremos alguns dos principais blocos de construção de um aplicativo Django (embora neste momento você ainda não tenha um ambiente de desenvolvimento para testá-lo).

- - - - - - - - - - - - -
Pré-requisitos: -

Conhecimentos básicos em computação. Um entendimento geral de programação de websites do lado do servidor e, em particular, a mecânica de interações cliente-servidor em websites.

-
Objetivos:Ganhar familiaridade com o que é o Django, quais funcionalidades ele fornece e os principais blocos de construção de uma aplicação django.
- -

O que é Django?

- -

Django é um framework web Python de alto nível que permite o rápido desenvolvimento de sites seguros e de fácil manutenção. Construido por desenvolvedores experientes, o Django cuida de grande parte do trabalho de desenvolvimento web, para que você possa se concentrar em escrever seu aplicativo sem precisar reinventar a roda. É gratuito e de código aberto, tem uma comunidade próspera e ativa, ótima documentação e muitas opções de suporte gratuito e pago. 

- -

Django ajuda você a escrever programas que são:

- -
-
Completo
-
Django segue a filosofia de "baterias incluídas" e fornece quase tudo que desenvolvedores possam querer fazer "fora da caixa". Como tudo o que você precisa é parte de um "produto", tudo funciona perfeitamente junto, seguindo princípios de design consistentes, contando uma extensa e atualizada documentação.
-
Versátil
-
Django pode ser (e tem sido) utilizado para construir quase todo tipo de website - desde sistema de gestão de conteúdo e wikis, passando por redes sociais e sites de notícias. Ele pode trabalhar com qualquer framework do lado do cliente, e pode entregar conteúdo em praticamente qualquer formato (incluindo HTML, feeds RSS, JSON, XML, etc). Esse site que você está lendo agora é baseado em Django.
-
À medida em que, internamente, fornece opções para quase todo tipo de funcionalidade que você possa querer (por exemplo: vários banco de dados que são populares, motores de template, etc), ele pode também ser extendido para utilizar outros componentes, caso seja necessário.
-
Seguro
-
Django ajuda os desenvolvedores a evitar os erros de segurança mais comuns, fornecendo um framework que foi desenhado para "fazer as coisas certas", de modo a proteger o website automaticamente. Por exemplo, Django fornece uma maneira segura de gerenciar as contas dos usuários e suas senhas, evitando erros comuns, tais como colocar informações da sessão em cookies, onde ficam vulneráveis (ao invés disso os cookies contém apenas uma chave e os dados são armazenados no banco de dados), ou armazenar as senhas de forma direta, ao invés de gravar um hash para essas senhas.
-
Um hash de senha é um valor fixed-length (tamanho-fixo) criado mandando a senha por uma cryptographic hash function (função hash criptográfica). Django pode checar se uma senha inserida está correta executando ela pela função hash e comparando a saída com o valor hash armazenado. Porém devido a natureza "one-way" ("um-caminho") da função, mesmo que o valor hash armazenado estiver comprometido, é difcil para uma pessoa comentendo um ataque resolver a senha original.
-
O Django ativa a proteção contra muitas vulnerabilidades por padrão, incluindo SQL injection (injeção de SQL), cross-site scripting, cross-site request forgery (Falsificação de solicitação entre sites), e clickjacking ("furto de click") (veja Segurança de sites para mais detalhes de tais ataques).
-
Escalável
-
Django usa uma arquitetura baseada em componentes “shared-nothing” ("nada-compartilhado") (cada parte da arquitetura é idependente das outras, e consequentemente podem ser subistituidas ou mudadas caso necessário). Ter uma separação clara entre as partes diferentes significa que pode se escalar para um trágefo aumentado adicionando hardware em qualquer nível: servidores de cache, servidores de banco de dados ou servidores de aplicação. Alguns dos sites mais ocupados escalaram o Django com sucesso para cumprir com as suas demandas (ex: Instagram e Disqus).
-
Sustentável
-
O código do Django é escrito usando princípios de design e padrões que encorajam a criação de codigo sustentável (que facilita a manutenção) e reusável. Em particular, isso utiliza o principio  DRY - Don't Repeat Yourself (Não Repita a Si Mesmo) para que não haja duplicações desnecessárias, reduzindo a quantidade de código. O Django também promove o agrupamento de funcionalidades relacionadas para aplicativos reusáveis e, em um nível mais baixo, grupos de código relacionados para modulos (juntamente as linhas do padrão MVC - Model View Controller).
-
Portável
-
Django é escrito em Python, que executa em muitas plataformas. Isso significa que você não esta preso em nenhuma plataforma de servidor em particular, e pode executar seus aplicativos em muitas distrubuições do Linux, Windows e Mac OS X. Além disso, o Django tem um bom suporte em muitos provedores de servidores de web, que muitas vezes provem infraestrutura especifca e documentação para hospedar sites feitos com Django.
-
- -

De onde o Django veio?

- -

Django foi inicialmente desenvolvido entre 2003 e 2005 por um time de web que era responsável por criar e manter sites de jornal. Depois de criar um número de sites, o time começou a fatorar e reutilizar muitos de seus códigos comuns e padrões de design. Esse código comum evoluiu para um framework genérico de desenvolvimento web, que foi lançado como um projeto de código aberto nomeado "Django" em Julho de 2005.

- -

Django continou a crescer e aprimorar, desde seu lançamento (1.0) em Setembro de 2008 até a versão recentemente lançada 2.0 em 2017. Cada lançamento adicionou novas funcionalidades e consertou falhas, variando entre suportar novos tipos de banco de dados, mecanismos de template e caches, até a adição de funções view "genéricas" e classes (que reduzem a quantidade de código que os desenvolvedores tem que escrever para um número de tarefas de programação).

- -
-

Nota: Cheque as notas de lançamento no site do Django para ver o que mudou nas versões mais recentes, e quanto trabalho esta sendo feito para tornar o Django melhor.

-
- -

Django é um projeto de código aberto, colaborativo e próspero, com milhares de usuários contribuindo. Embora ainda tenha alguns recursos que refletem sua origem, Django evoluiu para um framework versátil que é capaz de desenvovler qualquer tipo de website.

- - - -

Não há nenhum método disponível e definitivo para medir a popularidade dos framework server-side (lado do servidor) (apesar de sites como Hot Frameworks tentam acessar a popularidade usando mecanismos como contar o numero de projetos no GitHub e perguntas no StackOverflow para cada cada platafroma). Uma questão melhor é se o Django é "popular o suficiente" para evitar problemas de plataformas não populares. Ele continua a evoluir? Você consegue ajuda se precisar? Existem oportunidades para você ganhar dinheiro se voce aprender Django?

- -

Baseado no número de sites com alto perfil que usam Django, o número de pessoas contribuindo para a base de código, e o número de pessoas provendo ambos suporte gratuito e pago, então sim, Django é um framework popular!

- -

Alguns sites de alto perfil que usam Django são: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, and Open Stack (fonte: Página inicial do django).

- -

O Django é opinativo?

- -

Frameworks de web frequentemente referem a si mesmos como "opinativo" e "não opinativo".

- -

Frameworks opinativos são aqueles com opiniões sobre o "modo correto" de como lidar com uma tarefa em particular. Eles frequentemente auxiliam no desenvolvimento rapido em um domínio em particular (resolvendo problemas de um tipo em particular) porque o modo correto de fazer qualquer coisa normalmente já foi bem compreendido e bem documentado. Porém eles podem ser menos flexíveis para resolver problemas fora de seu principal domínio, e tendem a oferecer menos opções para quais componentes e abordagens eles podem usar.

- -

Frameworks não opinativos, em contraste, possuem bem menos restrições sobre a melhor maneira de unir os componentes para atingir um objetivo, ou até mesmo quais componentes devem ser usados. Eles tornam mais fácil para os desenvolvedores usar as ferramentas mais adequadas para completar uma tarefa em particular, apesar do custo de você mesmo ter que achar esses componentes.
-
- Django é "moderadamente opinativo" e, portantanto, oferece o "melhor dos dois mundo". Ele fornece um conjunto de componentes para lidar com a maioria das tarefas de desenvolvimento web, e uma (ou duas) maneiras preferidas de usá-las. No entanto, a arquitetura desacoplada do Django significa que você geralmente pode escolher entre várias opções diferentes, ou adicionar suporte para outras completamente novas, se desejar.

- -

Com o que o código do Django parece?

- -

Em um site data-driven (orientado a dados) tradicional, um aplicativo web aguarda solicitações HTTP do navegador da web (ou outro cliente). Quando uma solicitação é recebida, o aplicativo calcula o que é necessário com base na URL e possivelmente nas informações dos dados POST ou GET. Dependendo do que for necessário, ele poderá ler ou gravar informações de um banco de dados ou executar outras tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta para o navegador da web, normalmente criando dinamicamente uma página HTML para o navegador exibir, inserindo os dados recuperados em espaços reservados em um template HTML.

- -

Aplicativos web feitos com Django geralmente agrupam o código que manipula cada uma dessas etapas em arquivos separados:

- -

- - - -
-

Nota: Django refere a essa organização como uma arquitetura nomeada "Model View Template (MVT)" ("Modelo Vista Template"). Ela tem muitas semelhanças com a familiar arquitetura Model View Controller (Modelo Vista Controlador).

-
- - - -

As seções abaixo lhe darão uma idéia de como essas partes principais de um aplicativo do Django se parecerão (nos vamos entrar em mais detalhes mais tarde no curso, assim que configurarmos um ambiente de desenvolvimento).

- -

Enviando a solicitação para a view correta (urls.py)

- -

Um mapeador de URLs normalmente é armazenado em um arquivo chamado urls.py. No exemplo abaixo, o mapeador (urlpatterns) (padrões de url) define uma lista de mapeamentos entre rotas (padrões específicos de URL) e funções view correspondentes. Se uma solicitação HTTP for recebida com uma URL correspondente a um padrão especificado, a função view associada será chamada e a solicitação/requisição sera transmitida.

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('book/<int:id>/', views.book-detail, name='book-detail'),
-    path('catalog/', include('catalog.urls')),
-    re_path(r'^([0-9]+)/$', views.best),
-]
-
-# favor utilizar o código acima no seu projeto ao invés do que está abaixo
-# urlpatterns = [
-#     path('admin/', admin.site.urls),
-#     path('livro/<int:id>/', views.livro-detalhes, name='livro-detalhes'),
-#     path('catalogo/', include('catalogo.urls')),
-#     re_path(r'^([0-9]+)/$', views.melhor),
-# ]
-
- -

O objeto urlpatterns é uma lista de funções path() (caminhos) e/ou re_path() (listas em Python são definidas usando colchetes, onde os itens são separados por vírgulas e podem conter opcionalmente uma vírgula no final. Por exemplo: [item1, item2, item3,]).

- -

O primeiro argumento para ambos os métodos é uma rota (padrão) que será correspondida. O método path() usa sinais de menor e maior (<, >) para definir partes de uma URL que serão capturadas e passadas para a função view como argumentos nomeados. A função re_path() usa uma abordagem de correspondência de padrões flexível, conhecida como expressão regular. Nós vamos falar sobre isso em um artigo posterior!

- -

O segundo argumento é outra função que será chamada quando o padrão for correspondido. A notação views.book-detail (views.livro-detalhes) indica que a função é chamada de book-detail() (livro-detalhes()) e pode ser encontrada em um módulo chamado views (ou seja, dentro de um arquivo chamado views.py)

- -

Manipulando a solicitação (views.py)

- -

As view são o coração do aplicativo web, recebendo solicitações HTTP de clientes da web e retornando respostas HTTP. No meio disto, eles preparam os outros recursos do framework para acessar bancos de dados, renderizar (exibir) templates, etc.

- -

O exemplo abaixo mostra uma função view mínima chamada index(), que poderia ter sido chamado pelo nosso mapeador de URLs na seção anterior. Como todas as funções view, ele recebe um objeto HttpRequest como um parâmetro (request) e retorna um objeto HttpResponse. Nesse caso, não fazemos nada com a solicitação, e nossa resposta simplesmente retorna uma string. Mostraremos uma solicitação que faz algo mais interessante em uma seção posterior.

- -
## filename: views.py (Django view functions)
-
-from django.http import HttpResponse
-
-def index(request):
-    # Get an HttpRequest - the request parameter
-    # perform operations using information from the request.
-    # Return HttpResponse
-    return HttpResponse('Hello from Django!')
-
-# favor utilizar o código acima no seu projeto ao invés do que está abaixo
-## nome do arquivo: views.py (Onde as funções view ficam)
-
-from django.http import HttpResponse
-
-def index(requisito):
-    # Recebe um HttpRequest - o parametro requisito
-    # Executar operações usando informações do requisito (solicitação).
-    # Retornar HttpResponse
-    return HttpResponse('Um oi do Django!')
-
- -
-

Nota: Um pouquinho de Python:

- - -
- - - -

Views geralmente são armazenadas em um arquivo chamado views.py.

- -

Definindo o modelo dos dados (models.py)

- -

Os aplicativos web feitos com Django gerenciam e consultam dados por meio de objetos do Python chamados de modelos. Os modelos definem a estrutura dos dados armazenados, incluindo os tipos do campo e possivelmente também seu tamanho máximo, valores padrão, opções de lista de seleção, texto de ajuda para documentação, texto de etiqueta (label) para formulários etc. A definição do modelo é independente do banco de dados subjacente — você pode escolher um dentre vários como parte das configurações do seu projeto. Uma vez que você escolheu qual banco de dados você quer usar, você não precisa se comunicar diretamente com ele — você apenas escreve a estrutura dos seus modelos e qualquer outro código, e o Django lida com todo o trabalho de se comunicar com o banco de dados para você.

- -

O trecho de código abaixo mostra um modelo simples do Django para um objeto Team (Time). A classe Team é derivada da classe do Django models.Model. Ela define o nome e o nível da equipe como campos de caractere e especifica um número máximo de caracteres a serem armazenados para cada registro. O team_level (time_nivel) pode ser um de vários valores, portanto, o definimos como um campo de opção e fornecemos um mapeamento entre as opções a serem exibidas e os dados a serem armazenados, junto com um valor padrão.

- -
## filename: models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11', 'Under 11s'),
-        ...  #list other team levels
-    )
-
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-
-# favor utilizar o código acima no seu projeto ao invés do que está abaixo
-## nome do arquivo: models.py
-
-from django.db import models
-
-class Time(models.Model):
-    # models.CharField define um campo de caractere no banco de dados e max_length define o tamanho maximo permitido
-    time_nome = models.CharField(max_length=40)
-
-    TIME_NIVEIS = (
-        ('A09', 'Abaixo de 09'),
-        ('A10', 'Abaixo de 10'),
-        ('A11', 'Abaixo de 11'),
-        ... #list other team levels
-    )
-
-    time_nivel = models.CharField(max_length=3,choices=TIME_NIVEIS,default='A11') # choices-opções / default-padrão
-
- -
-

Nota: Um pouquinho de Python:

- - -
- -

Consultando dados (views.py)

- -

O modelo Django fornece uma query API simples para buscas no banco de dados. Isto pode combinar com um grande número de campos ao mesmo tempo utilizando diversos critérios (ex.: exato, maiúsculas e minúsculas (case-sensitive), maior que, etc.), e pode suportar definições complexas (por exemplo, você pode especificar a busca por times U11 que tem os nomes começando com 'Fr" ou terminando com "al").

- -

O trecho de código mostra uma função da View (manipulador de recursos) para exibir todos os nossos times U09. A linha em negrito mostra como podemos usar a API modelo de consulta para filtrar todos os registros em que o campo team_level possui exatamente o texto 'U09' (observe como esse critério é passado para a função  filter()  com o argumento no campo de nome e o tipo de busca de correspondência (exact) separado por um sublinhado duplo: (team_level__exact).

- -
## filename: views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def index(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, '/best/index.html', context)
-
-# favor utilizar o código acima no seu projeto ao invés do código abaixo
-## nome do arquivo: views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def index(request):
-    lista_times = Team.objects.filter(team_level__exact="U09")
-    contexto = {'times_jovens': lista_times}
-    return render(request, '/best/index.html', contexto)
-
- -
-
- -

A função index() usa a função render() para criar o HttpResponse que é enviado de volta para o navegador. Essa função é um atalho, ela cria um arquivo HTML combinando um modelo HTML específico com alguns dados (fornecidos pela variável denominada "context"). Na próxima seção, mostramos como os dados são inseridos no modelo para criar HTML.

- -

Renderizando dados (Modelos HTML)

- -

O sistema de modelo permite especificar a estrutura de um documento de saída, usando espaços reservados para dados que serão preenchidos quando uma página for gerada. Os modelos geralmente são usados para criar HTML, mas também podem criar outros tipos de documentos. O Django suporta o sistema de modelos nativo e outra biblioteca Python popular chamada Jinja2 pronta para uso (também pode ser feita para suportar outros sistemas, se necessário).

- -

O trecho de código mostra a aparência do modelo HTML chamado pela função render() na seção anterior. Este modelo foi escrito sob a premissa de que ele terá acesso a uma variável do tipo lista chamada youngest_teams quando for renderizada (contida na variável context dentro da função render() acima). Dentro do esqueleto HTML, temos um a expressão que primeiro verifica se a variável youngest_teams existe e a itera em um loop for. Em cada iteração, o modelo exibe o valor team_name de cada equipe em um elemento {{htmlelement("li")}}.

- -
## filename: best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No teams are available.</p>
-{% endif %}
-
-</body>
-</html>
-
-#favor utilizar o código acima no seu projeto ao invés do código abaixo
-## nome do arquivo: best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="pt">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-     {% for team in youngest_teams %}
-         <li>\{\{ team.team_name \}\}</li>
-     {% endfor %}     </ul> {% else %}
-     <p>Nenhum time disponível.</p>
- {% endif %}
- </body>
- </html>
-
- -

O que mais você pode fazer?

- -

As seções anteriores mostram os principais recursos que você usará na maioria dos aplicativos Web: mapeamento de URL, views, moldes e modelos. O Django também fornece outras coisas, como:

- - - -

Resumo

- -

Parabéns, você completou o primeiro passo em sua jornada no Django! Agora você deve entender os principais benefícios do Django, um pouco sobre sua história e aproximadamente como podem ser as partes principais de um aplicativo Django. Você também deve ter aprendido algumas coisas sobre a linguagem de programação Python, incluindo a sintaxe para listas, funções e classes.

- -

Você já viu algum código real do Django acima, mas, diferentemente do código do lado do cliente, você precisa configurar um ambiente de desenvolvimento para executá-lo. Esse é o nosso próximo passo.

- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

Neste módulo

- - diff --git a/files/pt-br/learn/server-side/django/sessions/index.html b/files/pt-br/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..f2f16b521f --- /dev/null +++ b/files/pt-br/learn/server-side/django/sessions/index.html @@ -0,0 +1,205 @@ +--- +title: 'Tutorial Django Parte 7: Sessões' +slug: Learn/Server-side/Django/Sessões +tags: + - Artigo + - Iniciante + - Programação + - Python + - Script + - Servidor + - Tutorial + - aprenda + - django + - django português + - server-side + - sessões django +translation_of: Learn/Server-side/Django/Sessions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
+ +
Esse tutorial estende nosso site LocalLibrary, adicionando um contador de visitas baseado em sessões à página inicial. Esse é um exemplo relativamente simples, mas, capaz de mostrar como você pode usar a estrutura de sessão do framework para providenciar um comportamento persistente para usuários anônimos em seu próprio site.
+ +
+ + + + + + + + + + + + +
Pré-requisitos:Completar todos os tópicos anteriores do tutorial, incluindo Django Tutorial Part 6: Generic list and detail views
Objetivo:Entender como as sessões são usadas.
+ +

Visão Geral

+ +

O site LocalLibrary que criamos nos tutoriais anteriores permite que os usuarios busquem por livros e autores no catálogo. Enquanto o conteúdo é dinamicamente gerado a partir da base de dados, todos os usuários terão acessos às mesmas páginas e às mesmas informações quando acessarem o site.

+ +

Em uma biblioteca "real", você pode querer fornecer uma experiência personalizada para cada usuário, com base no uso anterior do site, nas preferências, etc. Por exemplo, você pode ocultar mensagens de aviso que o usuário reconheceu anteriormente na próxima visita deles ao site ou armazenar e respeitar suas preferências (por exemplo, o número de resultados de pesquisa que eles querem exibir em cada página).

+ +
+
A estrutura da sessão permite implementar esse tipo de comportamento, permitindo que você armazene e recupere dados arbitrários baseados em cada visitante do site.
+
+ +

O que são sessões?

+ +

Toda a comunicação entre os navegadores web e os servidores é feita via protocolo HTTP, qual é stateless (sem estados). O fato do protocolo ser stateless significa que as mensagenns entre o cliente e o servidor são completamente independentes uma da outra — não há uma noção de "sequência" ou comportamento diferente baseado nas mensagens anteriores. Como resultado, se você quiser ter um site que monitore os relacionamentos contínuos com um cliente, é necessário implementá-lo por conta própria.

+ +

Sessões são o mecanismo usado pelo Django (e muitos outros na Internet) para monitorar o "estado" entre o site e um navegador web em particular. Sessões permitem que você armazene dados arbitrários por navegador web, e têm esse dado disponível no site sempre que o navegador conectar. Dados de itens individuais associados com a sessão são referenciados por uma "chave", que é usada para armazenar e recuperar os dados.

+ +

O Django usa um cookie contendo um identificador especial de sessão para identificar cada navegador e associar com o site. Os dados da sessão atual são armazenados na base de dados do site por padrão (é mais seguro do que armazenar os dados em cookie, onde é mais vulnerável aos usuários perigisos). Você pode configurar o Django para armazenar os dados da sessão em outros lugares (cache, arquivos, cookies "seguros"), mas o local padrão é uma opção boa e relativamente "segura".

+ +

Habilitando as Sessões

+ +

As sessões foram ativadas automaticamente quando criamos o esqueleto do site (no tutorial 2).

+ +

A configuração e feita nas seções INSTALLED_APPS e MIDDLEWARE do arquivo (locallibrary/locallibrary/settings.py), exibidas a seguir:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.sessions',
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    ....
+ +

Usando Sessões

+ +

Você pode acessar o atributo session na view a partir do parâmetro request (um HttpRequest passado como primeiro argumento na view). Esse atributo de sessão representa a conexão atual específica com um usuário (ou, para ser mais preciso, a conexão com o navegador atual, conforme identificado pelo id da sessão no cookie do navegador para este site).

+ +

O atributo session é como um objeto dicionário que você pode ler e escrever quantas vezes você quiser na sua view, modificando-o como desejar. Você pode fazer todas as operações normais de um dicionário, incluindo limpar todos os dados, testar se uma chave está presente, loop em torno dos dados, etc. Na maior parte do tempo, você usará apenas a API padrão "dictionary" para obter e setar valores.

+ +

O fragmento de código abaixo mostra como você pode obter, setar e deletar qualquer dado com com a chave "my_car", associada com a sessão atual (navegador).

+ +
+

Nota: Uma das coisas boas sobre o Django é que você não precisa pensar sobre os mecanismos que vinculam a sessão atual à requisição em sua view. Se nós usarmos os fragmentos abaixo em nossa view, saberemos que as informações sobre my_car estão associadas apenas com o navegador que enviou a requisição atual.

+
+ +
# Pega um valor de sessão baseado na sua chave (ex.:'my_car'), disparando um KeyError se a chave não for encontrada.
+my_car = request.session['my_car']
+
+# Pega o valor da sessão, seta o valor padrão ('mini') se a chave não estiver presente.
+my_car = request.session.get('my_car', 'mini')
+
+# Seta o valor da sessão
+request.session['my_car'] = 'mini'
+
+# Deleta o valor da sessão
+del request.session['my_car']
+
+ +

A API também oferece um número de outros métodos que são muito usados para gerenciar a os cookies da sessão associada. Por exemplo, há metodos para testar se cookies são suportados no navegador do cliente, para setar e checar a data de validade do cookie, e para limpar sessões expiradas do armazenamento de dados. Você pode encontrar sobre a API completa em How to use sessions (documentação do Django).

+ +

Salvando os dados da sessão

+ +

Por padrão, o Django só salva na base de dados da sessão e envia o cookie da sessão para o cliente quando a sessão é modificada (atribuida) ou deletada. Se você está atualizando alguns dados utilizando sua chave de sessão, como mostrado na seção anterior, então você não precisa se preocupar com isso! Por exemplo:

+ +
# This is detected as an update to the session, so session data is saved.
+request.session['my_car'] = 'mini'
+ +

Se você está atualizando algumas informações dentro dos dados da sessão, então o Django não reconhecerá que você fez uma alteração nos dados da sessão e não salvará os dados (por exemplo, se você alterasse os dados de  "wheels"  dentro dos dados do seu "my_car", como mostrado abaixo). Nesse caso você precisará marcar explicitamente a sessão como tendo sido modificada.

+ +
# Session object not directly modified, only data within the session. Session changes not saved!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Set session as modified to force data updates/cookie to be saved.
+request.session.modified = True
+
+ +
+

Nota: Você pode mudar o comportamento do site para atualizar a base de dados/enviar cookie em qualquer requisição adicionando SESSION_SAVE_EVERY_REQUEST = True nas configurações (locallibrary/locallibrary/settings.py) do seu projeto.

+
+ +

Exemplo simples - obtendo a contagem de visitas

+ +

Como um exemplo simples do mundo real, atualizaremos nossa biblioteca para informar ao usuário atual quantas vezes ele visitou o site LocalLibrary. 

+ +

Abra /locallibrary/catalog/views.py, e faça as alterações mostradas em negrito abaixo.

+ +
def index(request):
+    ...
+
+    num_authors = Author.objects.count()  # The 'all()' is implied by default.
+
+    # Number of visits to this view, as counted in the session variable.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+        'num_visits': num_visits,
+    }
+
+    # Render the HTML template index.html with the data in the context variable.
+    return render(request, 'index.html', context=context)
+ +

Aqui primeiro obtemos o valor da  session key 'num_visits', setando o valor para 0 se não tiver sido definido anteiormente. Cada vez que uma requisição é recebida, nós então incrementamos o valor e armazenamos novamente na sessão (para a próxima vez que o usuário visitar a página). A variável num_visits é então passada para o template na nossa varável context.

+ +
+

Nota: Também podemos testar se os cookies são suportados no navegador (veja Como usar sessões para exemplos) ou projetar nossa UI (interface do usuário) para que não se importe se os cookies são ou não suportados.

+
+ +

Adicione a linha vista na parte inferior do bloco a seguir ao seu template HTML principal (/locallibrary/catalog/templates/index.html) na parte inferior da sessão "Dynamic content", para exibir a variável context:

+ +
<h2>Dynamic content</h2>
+
+<p>The library has the following record counts:</p>
+<ul>
+  <li><strong>Books:</strong> \{{ num_books }}</li>
+  <li><strong>Copies:</strong> \{{ num_instances }}</li>
+  <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+  <li><strong>Authors:</strong> \{{ num_authors }}</li>
+</ul>
+
+<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+
+ +

Salve suas alterações e reinicie o servidor de teste. Sempre que você atualiza a página, o número deve ser atualizado.

+ + + +

Resumo

+ +

Agora você sabe como é fácil utilizar sessões para melhorar sua interação com usuários anônimos. 

+ +

Em nosso próximo artigo nós iremos explicar a estrutura de autenticação e autorização (permissão), e mostrar como oferecer suporte a contas de usuário.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

+ +

Neste módulo

+ + diff --git "a/files/pt-br/learn/server-side/django/sess\303\265es/index.html" "b/files/pt-br/learn/server-side/django/sess\303\265es/index.html" deleted file mode 100644 index f2f16b521f..0000000000 --- "a/files/pt-br/learn/server-side/django/sess\303\265es/index.html" +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: 'Tutorial Django Parte 7: Sessões' -slug: Learn/Server-side/Django/Sessões -tags: - - Artigo - - Iniciante - - Programação - - Python - - Script - - Servidor - - Tutorial - - aprenda - - django - - django português - - server-side - - sessões django -translation_of: Learn/Server-side/Django/Sessions ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
- -
Esse tutorial estende nosso site LocalLibrary, adicionando um contador de visitas baseado em sessões à página inicial. Esse é um exemplo relativamente simples, mas, capaz de mostrar como você pode usar a estrutura de sessão do framework para providenciar um comportamento persistente para usuários anônimos em seu próprio site.
- -
- - - - - - - - - - - - -
Pré-requisitos:Completar todos os tópicos anteriores do tutorial, incluindo Django Tutorial Part 6: Generic list and detail views
Objetivo:Entender como as sessões são usadas.
- -

Visão Geral

- -

O site LocalLibrary que criamos nos tutoriais anteriores permite que os usuarios busquem por livros e autores no catálogo. Enquanto o conteúdo é dinamicamente gerado a partir da base de dados, todos os usuários terão acessos às mesmas páginas e às mesmas informações quando acessarem o site.

- -

Em uma biblioteca "real", você pode querer fornecer uma experiência personalizada para cada usuário, com base no uso anterior do site, nas preferências, etc. Por exemplo, você pode ocultar mensagens de aviso que o usuário reconheceu anteriormente na próxima visita deles ao site ou armazenar e respeitar suas preferências (por exemplo, o número de resultados de pesquisa que eles querem exibir em cada página).

- -
-
A estrutura da sessão permite implementar esse tipo de comportamento, permitindo que você armazene e recupere dados arbitrários baseados em cada visitante do site.
-
- -

O que são sessões?

- -

Toda a comunicação entre os navegadores web e os servidores é feita via protocolo HTTP, qual é stateless (sem estados). O fato do protocolo ser stateless significa que as mensagenns entre o cliente e o servidor são completamente independentes uma da outra — não há uma noção de "sequência" ou comportamento diferente baseado nas mensagens anteriores. Como resultado, se você quiser ter um site que monitore os relacionamentos contínuos com um cliente, é necessário implementá-lo por conta própria.

- -

Sessões são o mecanismo usado pelo Django (e muitos outros na Internet) para monitorar o "estado" entre o site e um navegador web em particular. Sessões permitem que você armazene dados arbitrários por navegador web, e têm esse dado disponível no site sempre que o navegador conectar. Dados de itens individuais associados com a sessão são referenciados por uma "chave", que é usada para armazenar e recuperar os dados.

- -

O Django usa um cookie contendo um identificador especial de sessão para identificar cada navegador e associar com o site. Os dados da sessão atual são armazenados na base de dados do site por padrão (é mais seguro do que armazenar os dados em cookie, onde é mais vulnerável aos usuários perigisos). Você pode configurar o Django para armazenar os dados da sessão em outros lugares (cache, arquivos, cookies "seguros"), mas o local padrão é uma opção boa e relativamente "segura".

- -

Habilitando as Sessões

- -

As sessões foram ativadas automaticamente quando criamos o esqueleto do site (no tutorial 2).

- -

A configuração e feita nas seções INSTALLED_APPS e MIDDLEWARE do arquivo (locallibrary/locallibrary/settings.py), exibidas a seguir:

- -
INSTALLED_APPS = [
-    ...
-    'django.contrib.sessions',
-    ....
-
-MIDDLEWARE = [
-    ...
-    'django.contrib.sessions.middleware.SessionMiddleware',
-    ....
- -

Usando Sessões

- -

Você pode acessar o atributo session na view a partir do parâmetro request (um HttpRequest passado como primeiro argumento na view). Esse atributo de sessão representa a conexão atual específica com um usuário (ou, para ser mais preciso, a conexão com o navegador atual, conforme identificado pelo id da sessão no cookie do navegador para este site).

- -

O atributo session é como um objeto dicionário que você pode ler e escrever quantas vezes você quiser na sua view, modificando-o como desejar. Você pode fazer todas as operações normais de um dicionário, incluindo limpar todos os dados, testar se uma chave está presente, loop em torno dos dados, etc. Na maior parte do tempo, você usará apenas a API padrão "dictionary" para obter e setar valores.

- -

O fragmento de código abaixo mostra como você pode obter, setar e deletar qualquer dado com com a chave "my_car", associada com a sessão atual (navegador).

- -
-

Nota: Uma das coisas boas sobre o Django é que você não precisa pensar sobre os mecanismos que vinculam a sessão atual à requisição em sua view. Se nós usarmos os fragmentos abaixo em nossa view, saberemos que as informações sobre my_car estão associadas apenas com o navegador que enviou a requisição atual.

-
- -
# Pega um valor de sessão baseado na sua chave (ex.:'my_car'), disparando um KeyError se a chave não for encontrada.
-my_car = request.session['my_car']
-
-# Pega o valor da sessão, seta o valor padrão ('mini') se a chave não estiver presente.
-my_car = request.session.get('my_car', 'mini')
-
-# Seta o valor da sessão
-request.session['my_car'] = 'mini'
-
-# Deleta o valor da sessão
-del request.session['my_car']
-
- -

A API também oferece um número de outros métodos que são muito usados para gerenciar a os cookies da sessão associada. Por exemplo, há metodos para testar se cookies são suportados no navegador do cliente, para setar e checar a data de validade do cookie, e para limpar sessões expiradas do armazenamento de dados. Você pode encontrar sobre a API completa em How to use sessions (documentação do Django).

- -

Salvando os dados da sessão

- -

Por padrão, o Django só salva na base de dados da sessão e envia o cookie da sessão para o cliente quando a sessão é modificada (atribuida) ou deletada. Se você está atualizando alguns dados utilizando sua chave de sessão, como mostrado na seção anterior, então você não precisa se preocupar com isso! Por exemplo:

- -
# This is detected as an update to the session, so session data is saved.
-request.session['my_car'] = 'mini'
- -

Se você está atualizando algumas informações dentro dos dados da sessão, então o Django não reconhecerá que você fez uma alteração nos dados da sessão e não salvará os dados (por exemplo, se você alterasse os dados de  "wheels"  dentro dos dados do seu "my_car", como mostrado abaixo). Nesse caso você precisará marcar explicitamente a sessão como tendo sido modificada.

- -
# Session object not directly modified, only data within the session. Session changes not saved!
-request.session['my_car']['wheels'] = 'alloy'
-
-# Set session as modified to force data updates/cookie to be saved.
-request.session.modified = True
-
- -
-

Nota: Você pode mudar o comportamento do site para atualizar a base de dados/enviar cookie em qualquer requisição adicionando SESSION_SAVE_EVERY_REQUEST = True nas configurações (locallibrary/locallibrary/settings.py) do seu projeto.

-
- -

Exemplo simples - obtendo a contagem de visitas

- -

Como um exemplo simples do mundo real, atualizaremos nossa biblioteca para informar ao usuário atual quantas vezes ele visitou o site LocalLibrary. 

- -

Abra /locallibrary/catalog/views.py, e faça as alterações mostradas em negrito abaixo.

- -
def index(request):
-    ...
-
-    num_authors = Author.objects.count()  # The 'all()' is implied by default.
-
-    # Number of visits to this view, as counted in the session variable.
-    num_visits = request.session.get('num_visits', 0)
-    request.session['num_visits'] = num_visits + 1
-
-    context = {
-        'num_books': num_books,
-        'num_instances': num_instances,
-        'num_instances_available': num_instances_available,
-        'num_authors': num_authors,
-        'num_visits': num_visits,
-    }
-
-    # Render the HTML template index.html with the data in the context variable.
-    return render(request, 'index.html', context=context)
- -

Aqui primeiro obtemos o valor da  session key 'num_visits', setando o valor para 0 se não tiver sido definido anteiormente. Cada vez que uma requisição é recebida, nós então incrementamos o valor e armazenamos novamente na sessão (para a próxima vez que o usuário visitar a página). A variável num_visits é então passada para o template na nossa varável context.

- -
-

Nota: Também podemos testar se os cookies são suportados no navegador (veja Como usar sessões para exemplos) ou projetar nossa UI (interface do usuário) para que não se importe se os cookies são ou não suportados.

-
- -

Adicione a linha vista na parte inferior do bloco a seguir ao seu template HTML principal (/locallibrary/catalog/templates/index.html) na parte inferior da sessão "Dynamic content", para exibir a variável context:

- -
<h2>Dynamic content</h2>
-
-<p>The library has the following record counts:</p>
-<ul>
-  <li><strong>Books:</strong> \{{ num_books }}</li>
-  <li><strong>Copies:</strong> \{{ num_instances }}</li>
-  <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
-  <li><strong>Authors:</strong> \{{ num_authors }}</li>
-</ul>
-
-<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
-
- -

Salve suas alterações e reinicie o servidor de teste. Sempre que você atualiza a página, o número deve ser atualizado.

- - - -

Resumo

- -

Agora você sabe como é fácil utilizar sessões para melhorar sua interação com usuários anônimos. 

- -

Em nosso próximo artigo nós iremos explicar a estrutura de autenticação e autorização (permissão), e mostrar como oferecer suporte a contas de usuário.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html b/files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..da69f5c9de --- /dev/null +++ b/files/pt-br/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,98 @@ +--- +title: 'Tutorial Django: Website da Biblioteca Local' +slug: Learn/Server-side/Django/Tutorial_website_biblioteca_local +tags: + - Artigo + - Guía + - Iniciante + - Tutorial + - django +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+ +

O primeiro artigo da nossa série de tutoriais práticos explica o que você irá aprender, e fornece uma visão do site de exemplo "biblioteca local" que estaremos trabalhando e evoluindo em artigos seguintes.

+ + + + + + + + + + + + +
Pré-requisitos:Ler a introdução ao Django. Para os próximos artigos você também necessitará ter montando o ambiente de desenvolvimento para o Django.
Objetivo:Introduzir o exemplo da aplicação usado neste tutorial, e permitir que os leitores entendam quais tópicos serão abordados.
+ +

Visão geral

+ +

Bem vindo ao tutorial Django "Biblioteca Local" do MDN, no qual desenvolveremos um website que pode ser usado para gerenciar um catálogo para uma biblioteca local.

+ +

Nessa série de artigos você irá:

+ + + +

Você já aprendeu alguns desses tópicos e passou brevemente por outros. Até o final dessa série de tutoriais você deve saber o suficiente para desenvolver uma aplicação simples em Django sozinho.

+ +

Website da Biblioteca Local - LocalLibrary

+ +

LocalLibrary é o nome do site que vamos criar e evoluir ao longo dessa série de tutoriais. Como seria de esperar, a proposta do site é fornecer um catálogo online para uma pequena biblioteca local, onde os usuários podem procurar por livros disponíveis e gerenciar suas contas.

+ +

Esse exemplo foi cuidadosamente escolhido porque escalar para mostrar quanto detalhe precisamos, muito ou pouco, e pode ser usado para mostrar quase qualquer recurso do Django. Mais importante ainda, nos permite fornecer um caminho guiado através da funcionalidade mais importante do estrutura web do Django:

+ + + +

Embora este seja um exemplo extenso, ele é chamado Biblioteca Local por uma razão - nós esperamos mostrar o mínimo de informação necessária para ajudar a desenvolver e executar uma aplicação com o Django rapidamente. Como resultado nós armazenaremos informações sobre livros, seus exemplares, autores e outras informações chave. Contudo, nós não armazenaremos informações sobre outros itens que uma biblioteca pode utilizar, ou fornecer a infraestrutura necessária para dar suporte a sites multi-biblioteca ou outros recursos do tipo "grande biblioteca".

+ +

Onde posso obter o código fonte?

+ +

Na medida em que você avança com o tutorial, nós forneceremos os fragmentos de código apropriados para que você possa copiá-los e colá-los em cada ponto. Também existirão outros códigos que você estenderá por conta própria (com alguma orientação).

+ +

Se você travar, a versão completa do website pode ser encontrada aqui no Github.

+ +

Resumo

+ +

Agora que você sabe um pouco mais sobre o website LocalLIbrary e o que você irá aprender, é hora de começar a criar um escopo do projeto.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

+ + + +

Neste módulo

+ + diff --git a/files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html b/files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html deleted file mode 100644 index da69f5c9de..0000000000 --- a/files/pt-br/learn/server-side/django/tutorial_website_biblioteca_local/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'Tutorial Django: Website da Biblioteca Local' -slug: Learn/Server-side/Django/Tutorial_website_biblioteca_local -tags: - - Artigo - - Guía - - Iniciante - - Tutorial - - django -translation_of: Learn/Server-side/Django/Tutorial_local_library_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
- -

O primeiro artigo da nossa série de tutoriais práticos explica o que você irá aprender, e fornece uma visão do site de exemplo "biblioteca local" que estaremos trabalhando e evoluindo em artigos seguintes.

- - - - - - - - - - - - -
Pré-requisitos:Ler a introdução ao Django. Para os próximos artigos você também necessitará ter montando o ambiente de desenvolvimento para o Django.
Objetivo:Introduzir o exemplo da aplicação usado neste tutorial, e permitir que os leitores entendam quais tópicos serão abordados.
- -

Visão geral

- -

Bem vindo ao tutorial Django "Biblioteca Local" do MDN, no qual desenvolveremos um website que pode ser usado para gerenciar um catálogo para uma biblioteca local.

- -

Nessa série de artigos você irá:

- - - -

Você já aprendeu alguns desses tópicos e passou brevemente por outros. Até o final dessa série de tutoriais você deve saber o suficiente para desenvolver uma aplicação simples em Django sozinho.

- -

Website da Biblioteca Local - LocalLibrary

- -

LocalLibrary é o nome do site que vamos criar e evoluir ao longo dessa série de tutoriais. Como seria de esperar, a proposta do site é fornecer um catálogo online para uma pequena biblioteca local, onde os usuários podem procurar por livros disponíveis e gerenciar suas contas.

- -

Esse exemplo foi cuidadosamente escolhido porque escalar para mostrar quanto detalhe precisamos, muito ou pouco, e pode ser usado para mostrar quase qualquer recurso do Django. Mais importante ainda, nos permite fornecer um caminho guiado através da funcionalidade mais importante do estrutura web do Django:

- - - -

Embora este seja um exemplo extenso, ele é chamado Biblioteca Local por uma razão - nós esperamos mostrar o mínimo de informação necessária para ajudar a desenvolver e executar uma aplicação com o Django rapidamente. Como resultado nós armazenaremos informações sobre livros, seus exemplares, autores e outras informações chave. Contudo, nós não armazenaremos informações sobre outros itens que uma biblioteca pode utilizar, ou fornecer a infraestrutura necessária para dar suporte a sites multi-biblioteca ou outros recursos do tipo "grande biblioteca".

- -

Onde posso obter o código fonte?

- -

Na medida em que você avança com o tutorial, nós forneceremos os fragmentos de código apropriados para que você possa copiá-los e colá-los em cada ponto. Também existirão outros códigos que você estenderá por conta própria (com alguma orientação).

- -

Se você travar, a versão completa do website pode ser encontrada aqui no Github.

- -

Resumo

- -

Agora que você sabe um pouco mais sobre o website LocalLIbrary e o que você irá aprender, é hora de começar a criar um escopo do projeto.

- -

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

- - - -

Neste módulo

- - diff --git a/files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html b/files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html deleted file mode 100644 index 289af21dde..0000000000 --- a/files/pt-br/learn/server-side/express_nodejs/ambiente_de_desenvolvimento/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: Configurando o Node como ambiente de desenvolvimento -slug: Learn/Server-side/Express_Nodejs/ambiente_de_desenvolvimento -tags: - - Express - - Iniciante - - Introdução - - Node - - nodejs - - npm - - server-side - - web server -translation_of: Learn/Server-side/Express_Nodejs/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
- -

Agora que você sabe para que serve o Express, nós vamos lhe mostrar como configurar e testar o ambiente Node/Express no Windows, Linux (Ubuntu) e macOS. Independentemente do sistema operacional que você prefere, este artigo deve lhe proporcionar o que você precisa para desenvolver aplicativos em Express.

- - - - - - - - - - - - -
Pré-Requisitos:Saber como abrir um terminal/linha de comando. Saber como instalar pacotes de software no sistema operacional do computador utilizado para desenvolvimento
Objetivo:Configurar o ambiente de desenvolvimento para Express (X.XX) em seu computador
- -

Visão geral do ambiente de desenvolvimento do Express

- -

Node e Express facilitam a configuração de seu computador para começar a desenvolver aplicações web. Esta seção fornece uma visão ampla de quais ferramentas serão necessárias, explica alguns métodos simples para instalar o Node (e Express) no Ubuntu, macOS e Windows e também mostra como você pode testar sua aplicação.

- -

O que é o ambiente de desenvolvimento Express?

- -

O ambiente de desenvolvimento Express inclui uma instalação do Nodejs, o pacote de gerenciamento NPM e (opcionalmente) o Gerador de Aplicações Express em seu computador local.

- -

O Node e o NPM são instalados em conjunto por meio de um pacote binário preparado, instaladores, pacotes de gerenciamento de sistemas operacionais ou diretamente da fonte (como mostra a seção seguinte). O Express é então instalado pelo NPM como uma dependência de sua aplicação web Express individual (junto a outras bibliotecas como motores de modelo, drivers de banco de dados, autenticações middleware, middleware para arquivos estáticos, etc.)

- -

NPM também pode ser utilizado para instalar (globalmente) o Express Application Generator, uma ferramenta que cria um "esqueleto" de um app Express, seguindo o padrão MVC. O gerador de app é opcional porque você não precisa dessa ferramenta para criar um app ou um construtor Express para ter a mesma arquitetura. Nós vamos usá-lo nesta seção porque nos permite iniciar uma aplicação de uma maneira mais rápida e promover uma estrutura modular.

- -
-

Nota: Ao contrário de muitos outros framework que não oferecem um servidor web junto ao ambiente de desenvolvimento, o Node/Express cria e roda o seu próprio servidor web.

-
- -

Há outras ferramentas periféricas que integram o ambiente de desenvolvimento, é o caso dos editores de textos (códigos), conhecidos como IDE, e versionadores de códigos, como o Git, que ajudam a gerenciar diferentes versões do código. Estamos partindo da ideia de que você já conhece essas ferramentas e as têm instaladas (em especial o editor de texto).

- -

Quais sistemas operacionais têm suporte?

- -

Node roda em Windows, macOS, diferentes versões do Linux, Docker, etc. Há uma lista de sistemas suportados que pode ser encontrada na página de Downloads do Nodejs. Quase todos os computadores pessoais têm o que é necessário para rodar o Node. O Express roda no ambiente Node e, consequentemente, roda em qualquer plataforma que roda o Node.

- -

Neste artigo, vamos abordar as instruções de configuração para Windows, macOS, e Ubuntu Linux.

- -

Qual versão do Node/Express você deve usar?

- -

Há várias versões do Node - as mais recentes contém correção de bugs, suporte para EMCAScript (JavaScript) e melhorias nas APIs do Node.

- -

De maneira geral, você deve usar a versão mais recente do LTS (long-term supported), pois é a mais estável do que a versão "current". Além disso, você deve usar a versão current apenas se precisar de alguma funcionalidade que não está presente na versão LTS.

- -

Para o Express, você deve usar sempre a versão mais completa.

- -

Sobre o banco de dados e outras dependências?

- -

Outras dependências, como database drivers, engine para templates, ferramentas para autenticação, etc, são parte da aplicação e são importadas para o ambiente a partir do NPM. Nós vamos falar sobre essa parte mais para frente.

- -

Instalando o Node

- -

Para utilizar o Express, você terá que instalar o Nodejs e o NPM em seu sistema operacional. Nas seções a seguir, vamos explicar o jeito mais fácil de instalar a versão LTS do Nodejs no Ubuntu Linux 16.04, macOS e Windows 10.

- -
-

Dica: As seções abaixo mostram o jeito mais fácil de instalar o NPM nos Sistemas Operacionais. Se você utilizar outro sistema ou quer ver uma abordagem diferente para as plataformas atuais acesse Instalando Node.js via NPM (nodejs.org).

-
- -

Windows e macOS

- -

Instalar o Node e o NPM no Windows ou no macOS é uma tarefa rápida e simples. Siga os seguintes passos:

- -
    -
  1. Baixar o instalador: -
      -
    1. Vá para https://nodejs.org/en/
      2. -
    2. Selecione o botão de download da versão LTS, que é a recomendada para a maioria dos usuários.
      3. -
    -
    2. -
  2. Instale o Node ao clicar duas vezes no arquivo de download. Siga a instalação a partir das janelas que vão aparecer na sua tela.
    3. -
- -

Ubuntu 16.04

- -

O jeito mais fácil de instalar a versão LTS do Node é usar o NPM a partir do Ubuntu binary distributions repository. Isso pode ser feito de uma maneira muito simples. Rode os seguintes comandos no seu terminal.

- -
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
-sudo apt-get install -y nodejs
-
- -
-

Atenção: Não faça a instalação direto do repositório normal do Ubuntu pois ele contém versões antigas do Node.

-
- -
    -
- -

Testando a instalação do Nodejs e do NPM

- -

O jeito mais fácil de testar se tudo correu bem na instalação é checar qual a versão do Node está rodando no computador. Para isso, vá ao terminal/command prompt e digite o seguinte comando para retornar a resposta com a versão mais recente.

- -
>node -v
-v8.9.4
- -

O NPM também deve ter sido instalado. Você pode checar da seguinte maneira:

- -
>npm -v
-5.6.0
- -

Uma maneira um pouco mais divertida de testar é criar um servidor web em "puro node". Vamos imprimir a tradicional frase "Hello World" no browser quando visitarmos uma determinada URL.

- -
    -
  1. Crie um arquivo chamado hellonode.js e cole dentro dele o código abaixo. Estamos usando apenas o Node, sem o Express, e com sintaxe do ES6. - 
    //Chame o módulo HTTP
-var http = require("http");
-
-//Crie um servidor HTTP para ouvir as requisições na porta 8000
-http.createServer(function (request, response) {
-
-   // Configure o resposta HTTP header com o HTTP status e Content type
-   response.writeHead(200, {'Content-Type': 'text/plain'});
-
-   // Envie a resposta do body "Hello World"
-   response.end('Hello World\n');
-}).listen(8000);
-
-// Imprima URL para acessar o servidor
-console.log('Server running at http://127.0.0.1:8000/')
-
    - -

    O código importa o módulo "http" e o utiliza para criar um servidor (createServer()) que escuta as requisições HTTP na porta 8000. O script, então, imprime a mensagem no console. A função createServer() recebe como argumento uma função callback que é chamada quando recebe uma requisição HTTP - isso retorna uma resposta com um status 200 ("OK") do HTTP e o texto "Hello World".

    -
    2. -
  2. -
    -

    Nota:  Não se preocupe se você não entendeu exatamente o que esse código faz. Nós vamos explicar isso em mais detalhes quando iniciarmos a parte do Express.

    -
    -
    3. -
  3. Inicie o servidor e navegue pelo mesmo diretório que o seu arquivo hellonode.js no terminal. Depois chame o Node da seguinte forma: - 
    >node hellonode.js
-Server running at http://127.0.0.1:8000/
-
    -
    4. -
  4. Navegue até a URL (http://127.0.0.1:8000/). Se tudo estiver funcionando bem, o browser vai apresentar a frase "Hello World".
    5. -
- -

Usando o NPM

- -

Ao lado do próprio Node, o NPM é a ferramenta de trabalho mais importante nas aplicações Node. O NPM é usado para buscar qualquer pacote (biblioteca JavaScript) que uma aplicação precisa para ser desenvolvida, testada ou produzida, além de ser adotado para rodar testes ao longo de todo o processo de desenvolvimento.

- -
-

Nota: A partir da perspectiva do Node, Express é um pacote que precisa ser instalado utilizando o NPM e depois importado para o seu código.

-
- -

Você pode usar o NPM separadamente para buscar cada pacote desejado. Em geral, nós gerenciamos as dependências com um arquivo chamado package.json. Esse arquivo lista todas as dependências para um pacote JavaScript específico, incluindo o nome do pacote, a versão, descrição, arquivo de inicialização, produção de dependências, desenvolvimento de dependências, versões do Node que podem ser utilizadas. O package.json contém tudo que o NPM precisa para buscar e rodar a sua aplicação (se você está escrevendo uma biblioteca para ser reutilizável, você pode usar essa definição para fazer o upload do pacote para o repositório npm e deixá-lo acessível a qualquer usuário).

- -

Adicionando dependências

- -

Os passos seguintes mostram como baixar pacotes via NPM, salvá-los nas dependências do projeto e importá-los/chamá-los para dentro da aplicação Node.

- -
-

Nota:  Nesta seção mostraremos como buscar e instalar o pacote do Express. Depois, explicaremos como esse e outros pacotes já estão especificados para nós graças ao Express Application Generator. É  muito importante entendermos como o NPM funciona e o que é criado com o generator. 

-
- -
    -
  1. Primeiro passo é criar um diretório para sua aplicação. No prompt, insira os comandos a seguir. - 
    mkdir myapp
-cd myapp
    -
    2. -
  2.  Use o comando npm init para criar o arquivo package.json da sua aplicação. Esse comando registra para você uma série de informações, como o nome e a versão do seu aplicativo, além do nome do seu "entry point" (index.js por padrão). Por hora, vamos manter a configuração padrão. - 
    npm init
    - -

    Se você acessar o arquivo package.json (cat packge.json), você verá toda a configuração padrão e, ao final, o tipo de licença que o app está utilizando.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-
    -
    3. -
  3. Agora, instale o Express dentro do diretório myapp. O pacote será salvo automaticamente na lista de dependências do seu package.json.
    4. -
  4. - 
    npm install express
    - -

    A lista de dependências do package.json agora mostra também a versão do Express que estamos usando. Está grifada no final do arquivo.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "express": "^4.16.2"
-  }
-}
-
    -
    5. -
  5. Para usar o Express, é preciso incluir a função require() no arquivo index.js dentro da sua aplicação. Crie esse arquivo agora mesmo na pasta raiz "myapp" e inclua o código a seguir. - 
    var express = require('express')
-var app = express()
-
-app.get('/', function (req, res) {
-  res.send('Hello World!')
-})
-
-app.listen(8000, function () {
-  console.log('Example app listening on port 8000!')
-})
-
    - -

    O código mostra uma aplicação web bem simples cujo objetivo único é imprimir a mensagem "HelloWorld". Em linhas gerais, esse arquivo importa o módulo do express e o utiliza para criar um servidor (app) que escuta as requisições HTTP pela porta 8000 e imprime a mensagem no console, além de definir qual URL usada para testar o servidor. A função app.get() responde apenas às requisições HTTP feitas com o método GET, desde que especificadas com o path ('/'). Nesse caso, chamando a função para enviar a mensagem Hello World!

    -
    6. -
  6. Rode a linha de comando abaixo para iniciar o servidor. - 
    >node index.js
-Example app listening on port 8000
-
    -
    7. -
  7. Vá para a seguinte URL (http://127.0.0.1:8000/). Se tudo estiver funcionando corretamente, o browser vai mostrar a mensagem "Hello World!".
    8. -
- -

Desenvolvendo dependências

- -

Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote esling (JavaScript Linting), você faria a instalação via NPM da seguinte forma.

- -
npm install eslint --save-dev
- -

Assim, a esling vai aparecer da seguinte forma na lista de dependências do package.json.

- -
  "devDependencies": {
-    "eslint": "^4.12.1"
-  }
-
- -
-

Note: "Linters" são ferramentas que nos ajudam a identificar e reportar que o código está sendo escrito dentro das melhores práticas.

-
- -

Rodando tarefas

- -

Além de definir e buscar dependências, você também pode nomear scripts dentro do seu arquivo package.json e chamar o NPM para executá-lo a partir de um run-script command. Essa abordagem é comum para automatizar testes e tarefas ao longo do desenvolvimento (por exemplo: minificar o JavaScript, reduzir imagens, LINT/análise de códigos, etc).

- -
-

Nota: Ferramentas de automação de tarefas como o Gulp e o Grunt também podem ser utilizados, além de outros pacotes externos. 

-
- -

Para definir o script que roda o esling, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso package.json (importante: sua aplicação precisa ter como source está na pasta /src/js):

- -
"scripts": {
-  ...
-  "lint": "eslint src/js"
-  ...
-}
-
- -

Explicando um pouco mais: eslint src/js é o comando que colocamos no nosso terminal para rodar o eslint nos arquivos JavaScript situados no diretório src/js dentro do diretório do nosso app. Incluindo o comando, criamos o comando de atalho - lint.

- -
npm run-script lint
-# OR (using the alias)
-npm run lint
-
- -

O exemplo pode não parecer mais curto do que o comando original, mas com o que você aprendeu é possível incluir comandos bem maiores dentro do npm scripts, como as cadeias de múltiplos comandos. Você pode até escrever um único script npm para rodar todos os seus testes de uma só vez.

- -

Instalando o Express Application Generator

- -

O Express Application Generator é uma ferramenta que cria "esqueleto" para aplicações Express. A instalação é realizada via NPM como mostrada a seguir (o comando -g instala a pacote globalmente, ou seja, você pode acessá-lo de qualquer lugar do seu computador).

- -
npm install express-generator -g
- -

Para criar um aplicativo Express chamado "helloworld" com as configurações padrões, vá até o local/pasta em que você deseja desenvolver o projeto e escreva a seguinte linha de comando:

- -
express helloworld
- -
-

Nota:  Você também pode definir a biblioteca de template que pretende usar e muitas outras configurações. Use o comando help para ver todas as opções. 

- -
express --help
-
-
- -

O NPM vai criar um novo aplicativo Express em uma subpasta na localização em que você está. O progresso será apresentado no console. Para finalizar, o processo, a ferramenta mostrará os comandos que você precisa seguir para instalar a dependência Node e iniciar o seu app.

- -
-

O novo app terá um arquivo package.json no diretório raiz. Você pode abrir esse arquivo para checar o que foi instalado, incluindo o Express e Jade (template library) .

- -
{
-  "name": "helloworld",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "start": "node ./bin/www"
-  },
-  "dependencies": {
-    "body-parser": "~1.18.2",
-    "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
-    "express": "~4.15.5",
-    "jade": "~1.11.0",
-    "morgan": "~1.9.0",
-    "serve-favicon": "~2.4.5"
-  }
-}
-
- -

Instale todas as dependências para o app helloworld com o NPM, de acordo com os comandos abaixo:

- -
cd helloworld
-npm install
-
- -

Agora, rode o aplicativo (o comando muda um pouco entre Windows, Linux/macOS), como está no código a seguir:

- -
# Rode o helloworld no Windows
-SET DEBUG=helloworld:* & npm start
-
-# Rode helloworld no Linux/macOS
-DEBUG=helloworld:* npm start
-
- -

O comando DEBUG gera um loggin bem útil, apresentando resultados, como abaixo:

- -
>SET DEBUG=helloworld:* & npm start
-
-> helloworld@0.0.0 start D:\Github\expresstests\helloworld
-> node ./bin/www
-
-  helloworld:server Listening on port 3000 +0ms
- -

Abre um browser e navegue para http://127.0.0.1:3000/ e veja a página default apresentada pelo aplicativo.

- -

Express - Generated App Default Screen

- -

Vamos falar mais sobre o "gerador" quando chegarmos ao artigo referente à geração de esqueletos de uma aplicação.

- - - -

Sumário

- -

Agora você tem o desenvolvimento do Node pronto para rodar no seu computador e que pode ser utilizado para criar aplicações web com o framework Express. Você também viu como o NPM é utilizado para importar o Express em sua aplicação e como criar um esqueleto a partir do Express Aplication Generator.

- -

No próximo artigo, nós vamos iniciar um tutorial para construir uma aplicação web completa utilizando esse ambiente junto com as ferramentas.

- -

Veja também

- - - -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

- -

Outros módulos

- - diff --git a/files/pt-br/learn/server-side/express_nodejs/development_environment/index.html b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..289af21dde --- /dev/null +++ b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,387 @@ +--- +title: Configurando o Node como ambiente de desenvolvimento +slug: Learn/Server-side/Express_Nodejs/ambiente_de_desenvolvimento +tags: + - Express + - Iniciante + - Introdução + - Node + - nodejs + - npm + - server-side + - web server +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+ +

Agora que você sabe para que serve o Express, nós vamos lhe mostrar como configurar e testar o ambiente Node/Express no Windows, Linux (Ubuntu) e macOS. Independentemente do sistema operacional que você prefere, este artigo deve lhe proporcionar o que você precisa para desenvolver aplicativos em Express.

+ + + + + + + + + + + + +
Pré-Requisitos:Saber como abrir um terminal/linha de comando. Saber como instalar pacotes de software no sistema operacional do computador utilizado para desenvolvimento
Objetivo:Configurar o ambiente de desenvolvimento para Express (X.XX) em seu computador
+ +

Visão geral do ambiente de desenvolvimento do Express

+ +

Node e Express facilitam a configuração de seu computador para começar a desenvolver aplicações web. Esta seção fornece uma visão ampla de quais ferramentas serão necessárias, explica alguns métodos simples para instalar o Node (e Express) no Ubuntu, macOS e Windows e também mostra como você pode testar sua aplicação.

+ +

O que é o ambiente de desenvolvimento Express?

+ +

O ambiente de desenvolvimento Express inclui uma instalação do Nodejs, o pacote de gerenciamento NPM e (opcionalmente) o Gerador de Aplicações Express em seu computador local.

+ +

O Node e o NPM são instalados em conjunto por meio de um pacote binário preparado, instaladores, pacotes de gerenciamento de sistemas operacionais ou diretamente da fonte (como mostra a seção seguinte). O Express é então instalado pelo NPM como uma dependência de sua aplicação web Express individual (junto a outras bibliotecas como motores de modelo, drivers de banco de dados, autenticações middleware, middleware para arquivos estáticos, etc.)

+ +

NPM também pode ser utilizado para instalar (globalmente) o Express Application Generator, uma ferramenta que cria um "esqueleto" de um app Express, seguindo o padrão MVC. O gerador de app é opcional porque você não precisa dessa ferramenta para criar um app ou um construtor Express para ter a mesma arquitetura. Nós vamos usá-lo nesta seção porque nos permite iniciar uma aplicação de uma maneira mais rápida e promover uma estrutura modular.

+ +
+

Nota: Ao contrário de muitos outros framework que não oferecem um servidor web junto ao ambiente de desenvolvimento, o Node/Express cria e roda o seu próprio servidor web.

+
+ +

Há outras ferramentas periféricas que integram o ambiente de desenvolvimento, é o caso dos editores de textos (códigos), conhecidos como IDE, e versionadores de códigos, como o Git, que ajudam a gerenciar diferentes versões do código. Estamos partindo da ideia de que você já conhece essas ferramentas e as têm instaladas (em especial o editor de texto).

+ +

Quais sistemas operacionais têm suporte?

+ +

Node roda em Windows, macOS, diferentes versões do Linux, Docker, etc. Há uma lista de sistemas suportados que pode ser encontrada na página de Downloads do Nodejs. Quase todos os computadores pessoais têm o que é necessário para rodar o Node. O Express roda no ambiente Node e, consequentemente, roda em qualquer plataforma que roda o Node.

+ +

Neste artigo, vamos abordar as instruções de configuração para Windows, macOS, e Ubuntu Linux.

+ +

Qual versão do Node/Express você deve usar?

+ +

Há várias versões do Node - as mais recentes contém correção de bugs, suporte para EMCAScript (JavaScript) e melhorias nas APIs do Node.

+ +

De maneira geral, você deve usar a versão mais recente do LTS (long-term supported), pois é a mais estável do que a versão "current". Além disso, você deve usar a versão current apenas se precisar de alguma funcionalidade que não está presente na versão LTS.

+ +

Para o Express, você deve usar sempre a versão mais completa.

+ +

Sobre o banco de dados e outras dependências?

+ +

Outras dependências, como database drivers, engine para templates, ferramentas para autenticação, etc, são parte da aplicação e são importadas para o ambiente a partir do NPM. Nós vamos falar sobre essa parte mais para frente.

+ +

Instalando o Node

+ +

Para utilizar o Express, você terá que instalar o Nodejs e o NPM em seu sistema operacional. Nas seções a seguir, vamos explicar o jeito mais fácil de instalar a versão LTS do Nodejs no Ubuntu Linux 16.04, macOS e Windows 10.

+ +
+

Dica: As seções abaixo mostram o jeito mais fácil de instalar o NPM nos Sistemas Operacionais. Se você utilizar outro sistema ou quer ver uma abordagem diferente para as plataformas atuais acesse Instalando Node.js via NPM (nodejs.org).

+
+ +

Windows e macOS

+ +

Instalar o Node e o NPM no Windows ou no macOS é uma tarefa rápida e simples. Siga os seguintes passos:

+ +
    +
  1. Baixar o instalador: +
      +
    1. Vá para https://nodejs.org/en/
      2. +
    2. Selecione o botão de download da versão LTS, que é a recomendada para a maioria dos usuários.
      3. +
    +
    2. +
  2. Instale o Node ao clicar duas vezes no arquivo de download. Siga a instalação a partir das janelas que vão aparecer na sua tela.
    3. +
+ +

Ubuntu 16.04

+ +

O jeito mais fácil de instalar a versão LTS do Node é usar o NPM a partir do Ubuntu binary distributions repository. Isso pode ser feito de uma maneira muito simples. Rode os seguintes comandos no seu terminal.

+ +
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+ +
+

Atenção: Não faça a instalação direto do repositório normal do Ubuntu pois ele contém versões antigas do Node.

+
+ +
    +
+ +

Testando a instalação do Nodejs e do NPM

+ +

O jeito mais fácil de testar se tudo correu bem na instalação é checar qual a versão do Node está rodando no computador. Para isso, vá ao terminal/command prompt e digite o seguinte comando para retornar a resposta com a versão mais recente.

+ +
>node -v
+v8.9.4
+ +

O NPM também deve ter sido instalado. Você pode checar da seguinte maneira:

+ +
>npm -v
+5.6.0
+ +

Uma maneira um pouco mais divertida de testar é criar um servidor web em "puro node". Vamos imprimir a tradicional frase "Hello World" no browser quando visitarmos uma determinada URL.

+ +
    +
  1. Crie um arquivo chamado hellonode.js e cole dentro dele o código abaixo. Estamos usando apenas o Node, sem o Express, e com sintaxe do ES6. + 
    //Chame o módulo HTTP
+var http = require("http");
+
+//Crie um servidor HTTP para ouvir as requisições na porta 8000
+http.createServer(function (request, response) {
+
+   // Configure o resposta HTTP header com o HTTP status e Content type
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Envie a resposta do body "Hello World"
+   response.end('Hello World\n');
+}).listen(8000);
+
+// Imprima URL para acessar o servidor
+console.log('Server running at http://127.0.0.1:8000/')
+
    + +

    O código importa o módulo "http" e o utiliza para criar um servidor (createServer()) que escuta as requisições HTTP na porta 8000. O script, então, imprime a mensagem no console. A função createServer() recebe como argumento uma função callback que é chamada quando recebe uma requisição HTTP - isso retorna uma resposta com um status 200 ("OK") do HTTP e o texto "Hello World".

    +
    2. +
  2. +
    +

    Nota:  Não se preocupe se você não entendeu exatamente o que esse código faz. Nós vamos explicar isso em mais detalhes quando iniciarmos a parte do Express.

    +
    +
    3. +
  3. Inicie o servidor e navegue pelo mesmo diretório que o seu arquivo hellonode.js no terminal. Depois chame o Node da seguinte forma: + 
    >node hellonode.js
+Server running at http://127.0.0.1:8000/
+
    +
    4. +
  4. Navegue até a URL (http://127.0.0.1:8000/). Se tudo estiver funcionando bem, o browser vai apresentar a frase "Hello World".
    5. +
+ +

Usando o NPM

+ +

Ao lado do próprio Node, o NPM é a ferramenta de trabalho mais importante nas aplicações Node. O NPM é usado para buscar qualquer pacote (biblioteca JavaScript) que uma aplicação precisa para ser desenvolvida, testada ou produzida, além de ser adotado para rodar testes ao longo de todo o processo de desenvolvimento.

+ +
+

Nota: A partir da perspectiva do Node, Express é um pacote que precisa ser instalado utilizando o NPM e depois importado para o seu código.

+
+ +

Você pode usar o NPM separadamente para buscar cada pacote desejado. Em geral, nós gerenciamos as dependências com um arquivo chamado package.json. Esse arquivo lista todas as dependências para um pacote JavaScript específico, incluindo o nome do pacote, a versão, descrição, arquivo de inicialização, produção de dependências, desenvolvimento de dependências, versões do Node que podem ser utilizadas. O package.json contém tudo que o NPM precisa para buscar e rodar a sua aplicação (se você está escrevendo uma biblioteca para ser reutilizável, você pode usar essa definição para fazer o upload do pacote para o repositório npm e deixá-lo acessível a qualquer usuário).

+ +

Adicionando dependências

+ +

Os passos seguintes mostram como baixar pacotes via NPM, salvá-los nas dependências do projeto e importá-los/chamá-los para dentro da aplicação Node.

+ +
+

Nota:  Nesta seção mostraremos como buscar e instalar o pacote do Express. Depois, explicaremos como esse e outros pacotes já estão especificados para nós graças ao Express Application Generator. É  muito importante entendermos como o NPM funciona e o que é criado com o generator. 

+
+ +
    +
  1. Primeiro passo é criar um diretório para sua aplicação. No prompt, insira os comandos a seguir. + 
    mkdir myapp
+cd myapp
    +
    2. +
  2.  Use o comando npm init para criar o arquivo package.json da sua aplicação. Esse comando registra para você uma série de informações, como o nome e a versão do seu aplicativo, além do nome do seu "entry point" (index.js por padrão). Por hora, vamos manter a configuração padrão. + 
    npm init
    + +

    Se você acessar o arquivo package.json (cat packge.json), você verá toda a configuração padrão e, ao final, o tipo de licença que o app está utilizando.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+
    +
    3. +
  3. Agora, instale o Express dentro do diretório myapp. O pacote será salvo automaticamente na lista de dependências do seu package.json.
    4. +
  4. + 
    npm install express
    + +

    A lista de dependências do package.json agora mostra também a versão do Express que estamos usando. Está grifada no final do arquivo.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.2"
+  }
+}
+
    +
    5. +
  5. Para usar o Express, é preciso incluir a função require() no arquivo index.js dentro da sua aplicação. Crie esse arquivo agora mesmo na pasta raiz "myapp" e inclua o código a seguir. + 
    var express = require('express')
+var app = express()
+
+app.get('/', function (req, res) {
+  res.send('Hello World!')
+})
+
+app.listen(8000, function () {
+  console.log('Example app listening on port 8000!')
+})
+
    + +

    O código mostra uma aplicação web bem simples cujo objetivo único é imprimir a mensagem "HelloWorld". Em linhas gerais, esse arquivo importa o módulo do express e o utiliza para criar um servidor (app) que escuta as requisições HTTP pela porta 8000 e imprime a mensagem no console, além de definir qual URL usada para testar o servidor. A função app.get() responde apenas às requisições HTTP feitas com o método GET, desde que especificadas com o path ('/'). Nesse caso, chamando a função para enviar a mensagem Hello World!

    +
    6. +
  6. Rode a linha de comando abaixo para iniciar o servidor. + 
    >node index.js
+Example app listening on port 8000
+
    +
    7. +
  7. Vá para a seguinte URL (http://127.0.0.1:8000/). Se tudo estiver funcionando corretamente, o browser vai mostrar a mensagem "Hello World!".
    8. +
+ +

Desenvolvendo dependências

+ +

Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote esling (JavaScript Linting), você faria a instalação via NPM da seguinte forma.

+ +
npm install eslint --save-dev
+ +

Assim, a esling vai aparecer da seguinte forma na lista de dependências do package.json.

+ +
  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+
+ +
+

Note: "Linters" são ferramentas que nos ajudam a identificar e reportar que o código está sendo escrito dentro das melhores práticas.

+
+ +

Rodando tarefas

+ +

Além de definir e buscar dependências, você também pode nomear scripts dentro do seu arquivo package.json e chamar o NPM para executá-lo a partir de um run-script command. Essa abordagem é comum para automatizar testes e tarefas ao longo do desenvolvimento (por exemplo: minificar o JavaScript, reduzir imagens, LINT/análise de códigos, etc).

+ +
+

Nota: Ferramentas de automação de tarefas como o Gulp e o Grunt também podem ser utilizados, além de outros pacotes externos. 

+
+ +

Para definir o script que roda o esling, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso package.json (importante: sua aplicação precisa ter como source está na pasta /src/js):

+ +
"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+
+ +

Explicando um pouco mais: eslint src/js é o comando que colocamos no nosso terminal para rodar o eslint nos arquivos JavaScript situados no diretório src/js dentro do diretório do nosso app. Incluindo o comando, criamos o comando de atalho - lint.

+ +
npm run-script lint
+# OR (using the alias)
+npm run lint
+
+ +

O exemplo pode não parecer mais curto do que o comando original, mas com o que você aprendeu é possível incluir comandos bem maiores dentro do npm scripts, como as cadeias de múltiplos comandos. Você pode até escrever um único script npm para rodar todos os seus testes de uma só vez.

+ +

Instalando o Express Application Generator

+ +

O Express Application Generator é uma ferramenta que cria "esqueleto" para aplicações Express. A instalação é realizada via NPM como mostrada a seguir (o comando -g instala a pacote globalmente, ou seja, você pode acessá-lo de qualquer lugar do seu computador).

+ +
npm install express-generator -g
+ +

Para criar um aplicativo Express chamado "helloworld" com as configurações padrões, vá até o local/pasta em que você deseja desenvolver o projeto e escreva a seguinte linha de comando:

+ +
express helloworld
+ +
+

Nota:  Você também pode definir a biblioteca de template que pretende usar e muitas outras configurações. Use o comando help para ver todas as opções. 

+ +
express --help
+
+
+ +

O NPM vai criar um novo aplicativo Express em uma subpasta na localização em que você está. O progresso será apresentado no console. Para finalizar, o processo, a ferramenta mostrará os comandos que você precisa seguir para instalar a dependência Node e iniciar o seu app.

+ +
+

O novo app terá um arquivo package.json no diretório raiz. Você pode abrir esse arquivo para checar o que foi instalado, incluindo o Express e Jade (template library) .

+ +
{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.15.5",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  }
+}
+
+ +

Instale todas as dependências para o app helloworld com o NPM, de acordo com os comandos abaixo:

+ +
cd helloworld
+npm install
+
+ +

Agora, rode o aplicativo (o comando muda um pouco entre Windows, Linux/macOS), como está no código a seguir:

+ +
# Rode o helloworld no Windows
+SET DEBUG=helloworld:* & npm start
+
+# Rode helloworld no Linux/macOS
+DEBUG=helloworld:* npm start
+
+ +

O comando DEBUG gera um loggin bem útil, apresentando resultados, como abaixo:

+ +
>SET DEBUG=helloworld:* & npm start
+
+> helloworld@0.0.0 start D:\Github\expresstests\helloworld
+> node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms
+ +

Abre um browser e navegue para http://127.0.0.1:3000/ e veja a página default apresentada pelo aplicativo.

+ +

Express - Generated App Default Screen

+ +

Vamos falar mais sobre o "gerador" quando chegarmos ao artigo referente à geração de esqueletos de uma aplicação.

+ + + +

Sumário

+ +

Agora você tem o desenvolvimento do Node pronto para rodar no seu computador e que pode ser utilizado para criar aplicações web com o framework Express. Você também viu como o NPM é utilizado para importar o Express em sua aplicação e como criar um esqueleto a partir do Express Aplication Generator.

+ +

No próximo artigo, nós vamos iniciar um tutorial para construir uma aplicação web completa utilizando esse ambiente junto com as ferramentas.

+ +

Veja também

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

+ +

Outros módulos

+ + diff --git a/files/pt-br/learn/server-side/express_nodejs/introduction/index.html b/files/pt-br/learn/server-side/express_nodejs/introduction/index.html new file mode 100644 index 0000000000..15ccfc6145 --- /dev/null +++ b/files/pt-br/learn/server-side/express_nodejs/introduction/index.html @@ -0,0 +1,519 @@ +--- +title: Introdução Express/Node +slug: Learn/Server-side/Express_Nodejs/Introdução +tags: + - Aprender + - Express + - Iniciante + - JavaScript + - Node + - Servidor + - Tutorial + - nodejs +translation_of: Learn/Server-side/Express_Nodejs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+ +

Neste primeiro artigo sobre Express responderemos as questões " O que é Node?" e "O que é Express?", além de dar a você uma visão geral sobre o que torna o Express um framework web tão especial. Vamos descrever as principais características e mostrar alguns dos principais blocos de códigos de construção de um aplicativo Express (embora neste momento você ainda não tenha um ambiente de desenvolvimento para testá-lo).

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimentos básicos em informática. Uma compreensão geral de programação web no lado servidor (backend), em particular, nos mecanismos de interação cliente-servidor de websites.
Objetivos:Familiarizar-se com Express, como este framework trabalha junto ao Node, quais as funcionalidades que fornece e quais são os principais blocos de construção de um aplicativo Express.
+ +

O que é Express e Node ?

+ +

Node (ou formalmente Node.js) é um ambiente em tempo de execução open-source (código aberto) e multiplataforma que permite aos desenvolvedores criarem todo tipo de aplicativos e ferramentas do lado servidor (backend) em JavaScript.  Node é usado fora do contexto de um navegador (ou seja executado diretamente no computador ou no servidor). Como tal, o ambiente omite APIs JavaScript específicas do navegador e adiciona suporte para APIs de sistema operacional mais tradicionais, incluindo bibliotecas de sistemas HTTP e arquivos.

+ +

Do ponto de vista do desenvolvimento de um servidor web, o Node possui vários benefícios:

+ + + +

Você pode utilizar o Node.js para criar um simples servidor web, utilizando o pacote Node HTTP.

+ +

Olá, Node.js

+ +

O exemplo a seguir cria um servidor web que escuta qualquer tipo de requisição HTTP na URL  http://127.0.0.1:8000/  --  quando uma requisição é recebida, o script vai responder com a string (texto) "Olá Mundo". Se você já instalou o Node, você pode seguir os passos seguintes deste exemplo.

+ +
    +
  1. Abre o Terminal (no Windows, abra o prompt da linha de comando)
    2. +
  2. Crie uma pasta onde você quer salvar o programa, por exemplo, test-node. Então, entre na pasta com o seguinte comando no terminal:
    3. +
+ +
cd test-node
+
+ +

Use o seu editor de texto preferido, crie um arquivo chamado hello.js e cole o código a seguir:

+ +
// Carrega o modulo HTTP do Node
+var http = require("http");
+
+// Cria um servidor HTTP e uma escuta de requisições para a porta 8000
+http.createServer(function(request, response) {
+
+  // Configura o cabeçalho da resposta com um status HTTP e um Tipo de Conteúdo
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Manda o corpo da resposta "Olá Mundo"
+   response.end('Olá Mundo\n');
+}).listen(8000, '127.0.0.1');
+
+// Imprime no console a URL de acesso ao servidor
+console.log('Servidor executando em http://127.0.0.1:8000/');
+ +

Salve o arquivo na pasta que você criou acima.

+ +

Por último, vá para o terminal e digite o comando a seguir:

+ +

node hello.js

+ +

Enfim, abra o browser e digite  http://localhost:8000. Você verá o texto "Olá, Mundo", no canto superior esquerdo.

+ +

Web Frameworks

+ +

Algumas tarefas comuns no desenvolvimento web não são suportadas diretamente pelo Node. Se você quiser que a sua aplicação possua diferentes verbos HTTP (por exemplo GET, POST, DELETE, etc), que gerencie requisições de diferentes URLs ("rotas"), apresente arquivos estáticos ou utilize templates para mostrar as respostas (response) de maneira dinâmica, você não terá muita praticidade usando apenas o Node. Você terá duas opções. Escrever o código por conta própria ou então evitar todo esse trabalho de reinventar a roda ao utilizar um framework.

+ +

Introduzindo o Express

+ +

Express é o framework Node mais popular e a biblioteca subjacente para uma série de outros frameworks do Node. O Express oferece soluções para:

+ + + +

O Express é bastante minimalista, no entanto, os desenvolvedores têm liberdade para criar pacotes de middleware específicos com o objetivo de resolver problemas específicos que surgem no desenvolvimento de uma aplicação. Há bibliotecas para trabalhar com cookies, sessões, login de usuários, parâmetros de URL, dados em requisições POST, cabeçalho de segurança e tantos outros. Você pode achar uma lista de pacotes de middleware mantidos pela equipe Express em Express Middleware (juntamente com uma lista de pacotes populares desenvolvidos por terceiros).

+ +
+

Nota: Essa flexibilidade do Express é uma espada de dois gumes. Há pacotes de middleware para resolver quase qualquer problema ou requisito ao longo do desenvolvimento, mas utilizar os pacotes corretos para cada situação às vezes se torna um grande desafio. Não há "caminho certo" para estruturar um aplicativo. Muitos exemplos que você encontra na Internet não são bons ou mostram apenas uma pequena parte do que você precisa fazer para desenvolver uma aplicação web.

+
+ +

De onde o Node e o Express vieram?

+ +

Node foi inicialmente lançado em 2009, mas naquela época apenas para Linux. O gerenciador de pacotes NPM veio no ano seguinte, 2010, e o suporte nativo do Windows chegou em 2012. A versão atual do Long Term Support (LTS) é o Node v8.9.3, enquanto a versão mais recente é o Node 9. Esse é um resumo da rica histórica do Node, mas é possível conhecer mais na Wikipédia.

+ +

O Express foi lançado em novembro de 2010 e atualmente está na versão 4.16 da API. Você pode verificar o changelog para obter informações sobre as mudanças na versão atual e o GitHub para obter notas detalhadas das versões históricas.

+ + + +

É importante considerar a popularidade de um framework web porque indica se a ferramenta continuará sendo mantida e atualizada, além de apontar quais recursos provavelmente estarão disponíveis na documentação, nas bibliotecas de complemento e no suporte técnico.

+ +

Não há nenhum número capaz de medir precisamente a popularidade de um framework (apesar de que alguns sites como o Hot Frameworks avaliarem a popularidade a partir do número de projetos do GitHub e do número de perguntas do StackOverflow relativas a cada tecnologia). Diante dessa limitação, o mais importante é fazermos algumas outras perguntas para saber se o Node e o Express são "suficientemente populares" para não caírem nos problemas clássicos das tecnologias com pouca adesão da comunidade.

+ +

O Node e o Express continuam a evoluir ? Você pode obter ajuda na comunidade caso precise? Existe uma oportunidade para você receber trabalho remunerado ao dominar o Node e o Express ?

+ +

Baseado no número de empresas de alto perfil que usam Express, no número de pessoas contribuindo para o código base, e no número de pessoas que oferecem suporte (gratuito ou pago), a reposta é sim. O Node e o Express são tecnologias populares!

+ +

Express é opinativo ?

+ +

Os frameworks web costumam se autodeclararem "opinativos" ou "não opinativos".

+ +

Os frameworks opinativos são aqueles com "opiniões" sobre o "caminho certo" para lidar com qualquer tarefa específica. Muitas vezes, apoiam o desenvolvimento rápido em um domínio particular (resolvendo problemas de um tipo específico) porque a maneira correta de fazer qualquer coisa geralmente é bem compreendida e bem documentada. No entanto, são menos flexíveis na resolução de problemas fora de seu domínio principal e tendem a oferecer menos opções para quais componentes e abordagens podem usar nesses casos.

+ +

Frameworks não opinativos, por outro lado, têm muito menos restrições sobre a melhor maneira de utilizar componentes para atingir um objetivo, ou mesmo quais componentes devem ser usados. Eles tornam mais fácil para os desenvolvedores usar as ferramentas mais adequadas para completar uma tarefa específica, embora você precise encontrar esses componentes por si próprio.

+ +

Express é um framework não opinativo. Você pode inserir qualquer middleware que você goste no manuseio das solicitações em quase qualquer ordem que desejar. Pode estruturar o aplicativo em um arquivo ou em vários, usar qualquer estrutura de pastas dentro do diretório principal, etc.

+ +

Como se parece o código do Express ?

+ +

Em um site tradicional baseado em dados, um aplicativo da Web aguarda pedidos HTTP do navegador da web (ou outro cliente). Quando um pedido é recebido, o aplicativo descreve quais ações são necessárias com base no padrão de URL e possivelmente informações associadas contidas em dados POST ou GET. Dependendo do que é necessário, pode-se ler ou escrever informações em um banco de dados ou executar outras tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta ao navegador da Web, criando, de forma dinâmica, uma página HTML para o navegador, exibindo e inserindo os dados recuperados em espaços reservados em um modelo HTML.

+ +

Express fornece métodos para especificar qual função é chamada quando chega requisição HTTP (GET, POST, SET, etc.) e de rotas e métodos para especificar o mecanismo de modelo ("view") usado, onde o modelo arquivos estão localizados e qual modelo usar para renderizar uma resposta. Você pode usar o middleware Express para adicionar suporte para cookies, sessões e usuários, obtendo parâmetros POST / GET, etc. Você pode usar qualquer mecanismo de banco de dados suportado por Node (o Express não define nenhum comportamento relacionado a banco de dados).

+ +

As seções a seguir explicam algumas das coisas comuns que você verá ao trabalhar com o código Express e Node.

+ +

Olá Mundo Express

+ +

Primeiro, considere o padrão do exemplo do Express Olá Mundo (discutiremos cada trecho do código nas seções abaixo e nas seções a seguir).

+ +
+

Dica: Se você tiver o Node e o Express já instalados (ou se você os instalar como mostrado no próximo artigo, você pode salvar este código em um arquivo chamado app.js e executá-lo em um prompt, ao digitar o comando node app.js.

+
+ +
var express = require('express');
+var app = express();
+
+app.get('/', function(req, res) {
+  res.send('Olá Mundo!');
+});
+
+app.listen(3000, function() {
+  console.log('App de Exemplo escutando na porta 3000!');
+});
+
+ +

As duas primeiras linhas require() importam o módulo Express e criam uma aplicação Express. Esse objeto (tradicionalmente nomeado de app), tem métodos de roteamento de requisições HTTP, configurações de middleware, renderização de views HTML, registro de engines de templates e modificação das configurações que controlam como o aplicativo se comporta (por exemplo, o modo de ambiente, se as definições de rota são sensíveis a maiúsculas e minúsculas, etc).

+ +

A parte do meio do código (as três linhas que começam com app.get) mostra uma definição de rota. O método app.get() especifica uma função de retorno de chamada que será invocada sempre que exista uma solicitação HTTP GET com um caminho ('/') relativo à raiz do site. A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumentos, e simplesmente chama send() na resposta para retornar a string "Olá Mundo!"

+ +

O bloco final inicia o servidor na porta '3000' e imprime um comentário de log no console. Com o servidor em execução, você pode acessar o localhost:3000 em seu navegador para ver o exemplo de resposta retornado.

+ +

Importando e criando módulos

+ +

Um módulo é uma biblioteca/arquivo de JavaScript que você pode importar para outro código usando a função require() do Node. Express por si é um módulo, assim como as bibliotecas de middleware e banco de dados que usamos em nossos aplicativos Express.

+ +

O código abaixo mostra como importamos um módulo por nome, usando o quadro Express como um exemplo. Primeiro invocamos a função require(), especificando o nome do módulo como uma string ('express'), e chamando o objeto retornado para criar um aplicativo Express. Podemos então acessar as propriedades e funções do objeto da aplicação.

+ +
var express = require('express');
+var app = express();
+
+ +

Você também pode criar seus próprios módulos para serem importados da mesma maneira.

+ +
+

Dica: Você vai querer criar seus próprios módulos porque isso permite que você organize seu código em peças gerenciáveis - um aplicativo monolítico (de arquivo único) é difícil de entender e manter. O uso de módulos também ajuda você a gerenciar o namespace, pois somente as variáveis que você exporta explicitamente são importadas quando você usa um módulo.

+
+ +

Para tornar os objetos disponíveis fora do módulo, você precisa apenas atribuí-los ao objeto exports. Por Exemplo, o módulo square.js abaixo é um arquivo que exporta os métodos area() e perimeter():

+ +
exports.area = function(width) { return width * width; };
+exports.perimeter = function(width) { return 4 * width; };
+
+ +

Nós podemos importar este módulo usando require(). Depois, conecte ao(s) método(s) exportado(s) como mostrado a seguir:

+ +
var square = require('./square'); // Chamamos o arquivo utilizando o require()
+console.log('The area of a square with a width of 4 is ' + square.area(4));
+ +
+

Nota: Você também pode especificar um caminho absoluto para o módulo (ou um nome, como fizemos inicialmente).

+
+ +

Se você deseja exportar um objeto completo em uma atribuição, em vez de criar uma propriedade de cada vez, atribua ao module.exports como mostrado abaixo (você também pode fazer isso para tornar a raiz do objeto exporter um construtor ou outra função):

+ +
module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+
+ +

Para muitas outras informações sobre módulos veja Módulos (Node API docs).

+ +

Usando APIs assíncronas

+ +

O código JavaScript frequentemente usa APIs assíncronas em vez de síncronas para operações que podem levar algum tempo para serem concluídas. Uma API síncrona é aquela em que cada operação deve ser concluída antes que a próxima operação seja iniciada. Por exemplo, as seguintes funções de log são síncronas e imprimirão o texto no console em ordem (Primeiro, Segundo).

+ +
console.log('Primeiro');
+console.log('Segundo');
+ +
+
Em contrapartida, uma API assíncrona é aquela em que a API iniciará uma operação e retornará imediatamente (antes da conclusão da operação). Assim que a operação terminar, a API usará algum mecanismo para executar operações adicionais. Por exemplo, o código abaixo imprimirá "Segundo, Primeiro". Isso porque, mesmo que o método setTimeout() seja chamado primeiro e retornae imediatamente, a operação precisa de três segundos para finalizar.
+ +
+
+ +
setTimeout(function() {
+   console.log('Primeiro');
+   }, 3000);
+console.log('Segundo');
+
+ +

O uso de APIs assíncronas não bloqueadoras é ainda mais importante no Node do que no navegador, pois o Node é um ambiente de execução orientado por evento único (single threaded). "Single threaded" significa que todos os pedidos para o servidor são executados no mesmo tópico (em vez de serem gerados em processos separados). Esse modelo é extremamente eficiente em termos de velocidade e recursos do servidor, mas isso significa que, se qualquer uma das suas funções chamar métodos síncronos que demoram muito para completar, eles bloquearão não apenas a solicitação atual, mas todas as outras solicitações serão tratadas por sua aplicação web.

+ +

Há várias maneiras de uma API assíncrona notificar para a aplicação que alguma função chegou ao fim. A maneira mais comum é registrar uma função de retorno de chamada quando você invoca a API assíncrona, que será chamada de volta quando a operação for concluída. Usamos essa abordagem acima.

+ +
+

Dica: O uso de callbacks pode ser bastante "bagunçado" se você tiver uma sequência de operações assíncronas dependentes que devem ser executadas em ordem, porque isto resulta em multiplo níveis de callbacks aninhados. Este problema é comumente conhecido como "inferno de callback" ou "código hadouken". Pode-se reduzir o problema ao adotar boas práticas de programação (veja http://callbackhell.com/), utilizar um módulo como async, ou mesmo adotar recursos do ES6, como Promises.

+
+ +
+

Dica: Uma convenção comum para Node e Express é usar as devoluções de retorno de erro. Nesta convenção, o primeiro valor em suas funções de retorno de chamada é um valor de erro, enquanto os argumentos subseqüentes contêm dados de sucesso. Há uma boa explicação de por que essa abordagem é útil neste blog: The Node.js Way - Understanding Error-First Callbacks (fredkschott.com).

+
+ +

Criando manipuladores de rotas

+ +

No nosso Olá Mundo em Express (veja acima), nós definimos uma (callback) função manipuladora de rota para requisição GET HTTP para a raiz do site ('/').

+ +
app.get('/', function(req, res) {
+  res.send('Olá Mundo');
+});
+
+ +

A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumento. Neste caso, o método simplesmente chama send() na resposta para retornar a string "Olá Mundo!" Há uma série de outros métodos de resposta para encerrar o ciclo de solicitação / resposta, por exemplo, você poderia chamar res.json() para enviar uma resposta JSON ou res.sendFile() para enviar um arquivo.

+ +
+

Dica JavaScript: Você pode usar qualquer argumento que você gosta nas funções de retorno de chamada. Quando o retorno de chamada é invocado, o primeiro argumento sempre será o pedido e o segundo sempre será a resposta. Faz sentido nomeá-los de tal forma que você possa identificar o objeto que você está trabalhando no corpo do retorno de chamada.

+
+ +

O Express também fornece métodos para definir manipuladores de rotas para todas as outras requisições HTTP, que são usadas exatamente da mesma maneira: post(), put(), delete(), options(), trace(), copy(), lock(), mkcol(), move(), purge(), propfind(), proppatch(), unlock(), report(), mkactivity(), checkout(), merge(), m-search(), notify(), subscribe(), unsubscribe(), patch(), search(), e connect().

+ +

Há um método de roteamento especial, app.all(), que será chamado em resposta a qualquer método HTTP. É usado para carregar funções de middleware em um caminho específico para todos os métodos de solicitação. O exemplo a seguir (da documentação Express) mostra um manipulador que será executado para solicitações /secret, independentemente do verbo HTTP usado (desde que seja suportado pelo módulo http).

+ +
app.all('/secret', function(req, res, next) {
+  console.log('Acessando a sessão secreta...');
+  next(); // passa o controle para o próximo manipulador
+});
+ +

As rotas permitem combinar padrões de caracteres específicos em um URL e extrair alguns valores do URL e passá-los como parâmetros para o manipulador de rotas (como atributos do objeto de solicitação passado como parâmetro).

+ +

Muitas vezes, é útil agrupar manipuladores de rotas para uma determinada parte de um site e acessá-los usando um prefixo de rota comum (por exemplo, um site com um Wiki pode ter todas as rotas relacionadas ao wiki em um arquivo e tê-los acessado com um prefixo de rota de / wiki /). Em Express, isso é alcançado usando o objeto express.Router. Por exemplo, podemos criar nossa rota wiki em um módulo chamado wiki.js e, em seguida, exportar o objeto Router, conforme mostrado abaixo:

+ +
// wiki.js - Rotas de Wiki
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route
+router.get('/', function(req, res) {
+  res.send('Wiki home page');
+});
+
+// About page route
+router.get('/about', function(req, res) {
+  res.send('About this wiki');
+});
+
+module.exports = router;
+
+ +
+

Nota: Adicionar rotas ao objeto Router é como adicionar rotas ao objeto app (como mostrado anteriormente).

+
+ +

Para usar o roteador em nosso arquivo de aplicativo principal, então, require() o módulo de rota (wiki.js) e depois use() no aplicativo Express para adicionar o Router ao caminho de gerenciamento de middleware. As duas rotas serão acessíveis a partir de /wiki/ e /wiki/about/.

+ +
var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);
+ +

Vamos mostrar-lhe muito mais sobre trabalhar com rotas e, em particular, sobre o uso do Router, mais tarde, na seção vinculada Rotas e controladores.

+ +

Usando middleware

+ +

O Middleware é usado extensivamente em aplicativos Express para que as tarefas ofereçam arquivos estáticos ao tratamento de erros, a comprensão de respostas HTTP. Enquanto as funções de rota terminam o ciclo de solicitação-resposta HTTP, retornando alguma resposta ao cliente HTTP, as funções de middleware normalmente executam alguma operação na solicitação ou resposta e, em seguida, ligue para a próxima função na "pilha", que pode ser mais um middleware ou uma rota manipuladora. A ordem em que o middleware é chamado depende do desenvolvedor do aplicativo.

+ +
+

Nota: O middleware pode executar qualquer operação, executar qualquer código, fazer alterações no objeto de solicitação e resposta, e também pode encerrar o ciclo de solicitação-resposta. Se não terminar o ciclo, ele deve chamar o next() para passar o controle para a próxima função de middleware (ou a solicitação ficará pendurada).

+
+ +

A maioria dos aplicativos usará middleware de terceiros para simplificar tarefas comuns de desenvolvimento web, como trabalhar com cookies, sessões, autenticação de usuários, acessar dados POST e JSON, log, etc. Você pode encontrar uma lista de pacotes de middleware mantidos pela equipe Express (que também inclui outros pacotes populares de terceiros). Outros pacotes Express estão disponíveis no gerenciador de pacotes do NPM.

+ +

Para usar middleware de terceiros, primeiro você precisa instalá-lo em seu aplicativo usando NPM. Por exemplo, para instalar o logger morgan HTTP, você faria isso:

+ +
$ npm install morgan
+
+ +

Você pode então chamar use() no objeto do aplicativo Express para adicionar o middleware à pilha:

+ +
var express = require('express');
+var logger = require('morgan');
+var app = express();
+app.use(logger('dev'));
+...
+ +
+

Nota: O middleware e as funções de roteamento são chamadas na ordem em que são declaradas. Para alguns middleware, a ordem é importante (por exemplo, se o middleware de sessão depende do middleware de cookies, então o manipulador de cookies deve ser adicionado primeiro). É quase sempre o caso em que o middleware é chamado antes de definir rotas, ou seus manipuladores de rotas não terão acesso à funcionalidade adicionada pelo seu middleware.

+
+ +

Você pode escrever suas próprias funções de middleware. É provável que você tenha que fazê-lo (somente para criar código de manipulação de erro). A única diferença entre uma função de middleware e um retorno de chamada de manipulador de rotas é que as funções de middleware têm um terceiro argumento next, que as funções de middleware devem chamar se não completam o ciclo de solicitação (quando a função de middleware é chamada, isso contém a próxima função que deve ser chamado).

+ +

Você pode adicionar uma função de middleware à cadeia de processamento com app.use() ou app.add(), dependendo se você deseja aplicar o middleware a todas as respostas ou a respostas com um verbo HTTP específico (GET, POST, etc. ). Você especifica rotas o mesmo em ambos os casos, embora a rota seja opcional ao chamar app.use().

+ +

O exemplo abaixo mostra como você pode adicionar a função middleware usando ambos os métodos e com/sem rota.

+ +
var express = require('express');
+var app = express();
+
+// Um exemplo de função middleware
+var a_middleware_function = function(req, res, next) {
+  // ... Executa alguma operação
+  next(); // next() Chama o próximo middleware ou função de rotas
+}
+
+// Função adicionada com use() para todas rotas e requisições
+app.use(a_middleware_function);
+
+// Função adicionada com use() para uma rota específica
+app.use('/someroute', a_middleware_function);
+
+// função middleware adicionado para uma rota e requisição específica
+app.get('/', a_middleware_function);
+
+app.listen(3000);
+ +
+

Dica JavaScript: Acima, declaramos a função de middleware separadamente e, em seguida, configuramos como retorno de chamada. Na nossa função anterior do operador de rotas, declaramos a função de retorno de chamada quando foi utilizada. Em JavaScript, ambas abordagens são válidas.

+
+ +

A documentação Express possui uma documentação excelente sobre como usar e escrever o middleware Express.

+ +

Servindo arquivos estáticos

+ +

Você pode usar o middleware express.static para servir arquivos estáticos, incluindo suas imagens, CSS e JavaScript (static() é a única função de middleware que é realmente parte do Express). Por exemplo, você usaria a linha abaixo para exibir imagens, arquivos CSS e arquivos JavaScript de um diretório chamado 'public' no mesmo nível onde você chama o nó:

+ +
app.use(express.static('public'));
+
+ +

Todos os arquivos no diretório público são atendidos adicionando o nome do arquivo (relativo ao diretório "público" base) ao URL base. Então, por exemplo:

+ +
http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+
+ +

Você pode chamar static() várias vezes para atender vários diretórios. Se um arquivo não puder ser encontrado por uma função de middleware, ele simplesmente será transmitido ao middleware subsequente (a ordem em que o middleware é chamado é baseada em sua ordem de declaração).

+ +
app.use(express.static('public'));
+app.use(express.static('media'));
+
+ +

Você também pode criar um prefixo virtual para seus URL estáticos, em vez de ter os arquivos adicionados ao URL base. Por exemplo, aqui especificamos um caminho de montagem para que os arquivos sejam carregados com o prefixo "/media":

+ +
app.use('/media', express.static('public'));
+
+ +

Agora, você pode carregar os arquivos que estão no diretório public a partir do prefixo de caminho /media.

+ +
http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3
+
+ +

Para obter mais informações, consulte Servindo arquivos estáticos no Express.

+ +

Erros de manipulação

+ +

Os erros são tratados por uma ou mais funções de middleware especiais que possuem quatro argumentos, em vez dos três habituais: (err, req, res, next). Por exemplo:

+ +
app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send('Something broke!');
+});
+
+ +

Isso pode retornar qualquer conteúdo exigido, mas deve ser chamado depois de todas as outras chamadas app.use() e rotas para que sejam o último middleware no processo de solicitação de pedidos!

+ +

Express vem com um manipulador de erros embutido, que cuida de todos os erros que podem ser encontrados no aplicativo. Essa função de middleware de gerenciamento de erros padrão é adicionada no final da pilha de funções do middleware. Se você passar um erro para next() e você não lidar com isso em um manipulador de erro, ele será tratado pelo manipulador de erros incorporado; o erro será gravado no cliente com o rastreamento da pilha.

+ +
+

Nota: O rastreamento da pilha não está incluído no ambiente de produção. Para executá-lo no modo de produção, você precisa configurar a variável de ambiente NODE_ENV para 'production'.

+
+ +
+

Nota: HTTP404 e outros códigos de status de "erro" não são tratados como erros. Se você quiser lidar com isso, você pode adicionar uma função de middleware para fazê-lo. Para mais informações, consulte as FAQ.

+
+ +

Para obter mais informações, consulte Gerenciamento de erros (Express docs).

+ +

Usando Banco de Dados

+ +

Aplicativos Express podem usar qualquer mecanismo de banco de dados suportado pelo Node (o Express em si não define nenhum comportamento/requisitos adicionais específicos para gerenciamento de banco de dados). Existem muitas opções, incluindo PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

+ +

Para usá-los, você deve primeiro instalar o driver do banco de dados usando NPM. Por exemplo, para instalar o driver para o popular NoSQL MongoDB você usaria o comando:

+ +
$ npm install mongodb
+
+ +

O próprio banco de dados pode ser instalado localmente ou em um servidor em nuvem. No seu código Express, você precisa do driver, conecte-se ao banco de dados e execute as operações criar, ler, atualizar e excluir (CRUD). O exemplo abaixo (da documentação Express) mostra como você pode encontrar registros de "mamíferos" usando MongoDB.

+ +
var MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});
+ +

Outra abordagem popular é acessar seu banco de dados indiretamente, através de um Object Relational Mapper ("ORM"). Nesta abordagem, você define seus dados como "objetos" ou "modelos" e o ORM mapeia estes para o formato de banco de dados subjacente. Esta abordagem tem o benefício de que, como desenvolvedor, você pode continuar a pensar em termos de objetos JavaScript, em vez de semântica de banco de dados, e que existe um local óbvio para realizar a validação e verificação de dados recebidos. Falaremos mais sobre bancos de dados em um artigo posterior.

+ +

Para obter mais informações, consulte integração com banco de dados (documentos express).

+ +

Renderizando dados (views)

+ +

Os mecanismos de modelo (referidos como "view engines" por Express) permitem que você especifique a estrutura de um documento de saída em um modelo, usando marcadores de posição para os dados que serão preenchidos quando uma página for gerada. Os modelos geralmente são usados para criar HTML, mas também podem criar outros tipos de documentos. Express tem suporte para uma série de mecanismos de modelos, e há uma comparação útil dos motores mais populares aqui: Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More.

+ +

No seu código de configurações do aplicativo você configurou o mecanismo do modelo para usar e o local onde Express deve procurar modelos usando as configurações 'visualizações' e 'visualizar mecanismos', conforme mostrado abaixo (você também terá que instalar o pacote que contém a biblioteca do modelo também !)

+ +
var express = require('express');
+var app = express();
+
+//  Definir o diretório para conter os modelos ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Definir o motor de visualização para usar, neste caso 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+
+ +

A aparência do modelo dependerá do mecanismo que você usa. Supondo que você tenha um arquivo de modelo chamado "índice. <Template_extension>" que contenha espaços reservados para variáveis de dados denominadas 'título' e 'mensagem', você chamaria Response.render() em uma função de roteador de rotas para criar e enviar a resposta HTML :

+ +
app.get('/', function(req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
+});
+ +

Para obter mais informações, consulte usando motores de modelo com Express (Express docs).

+ +

Estrutura de Arquivos

+ +

Express não faz suposições em termos de estrutura ou quais os componentes que você usa. Rotas, visualizações, arquivos estáticos e outra lógica específica da aplicação podem viver em qualquer número de arquivos com qualquer estrutura de diretório. Embora seja perfeitamente possível ter todo o aplicativo Express em um único arquivo, geralmente faz sentido dividir seu aplicativo em arquivos com base em função (por exemplo, gerenciamento de contas, blogs, fóruns de discussão) e domínio de problema arquitetônico (por exemplo, modelo, exibição ou controlador se você está usando uma arquitetura MVC).

+ +

Em um tópico posterior, usaremos o Express Application Generator, que cria um esqueleto de aplicativo modular que podemos estender facilmente para criar aplicativos da web.

+ + + +

Sumário

+ +

Parabéns, você completou o primeiro passo em sua viagem Express/Node! Agora você deve entender os principais benefícios do Express e Node, e aproximadamente o que as principais partes de um aplicativo Express podem ser (rotas, middleware, tratamento de erros e código de modelo). Por ser um framework não opinativo, o Express permite que você defina a maneira como essas partes e essas bibliotecas são integradas.

+ +

Claro que Express é deliberadamente uma estrutura de aplicativos web muito leve, tanto seu benefício e potencial vem de bibliotecas e recursos de terceiros. Examinaremos essa questão com mais detalhes nos próximos artigos. No artigo a seguir, vamos analisar a criação de um ambiente de desenvolvimento de Node, para que você possa começar a ver algum código Express em ação.

+ +

Veja também

+ + + +
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+ +

Próximos módulos

+ + diff --git "a/files/pt-br/learn/server-side/express_nodejs/introdu\303\247\303\243o/index.html" "b/files/pt-br/learn/server-side/express_nodejs/introdu\303\247\303\243o/index.html" deleted file mode 100644 index 15ccfc6145..0000000000 --- "a/files/pt-br/learn/server-side/express_nodejs/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,519 +0,0 @@ ---- -title: Introdução Express/Node -slug: Learn/Server-side/Express_Nodejs/Introdução -tags: - - Aprender - - Express - - Iniciante - - JavaScript - - Node - - Servidor - - Tutorial - - nodejs -translation_of: Learn/Server-side/Express_Nodejs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
- -

Neste primeiro artigo sobre Express responderemos as questões " O que é Node?" e "O que é Express?", além de dar a você uma visão geral sobre o que torna o Express um framework web tão especial. Vamos descrever as principais características e mostrar alguns dos principais blocos de códigos de construção de um aplicativo Express (embora neste momento você ainda não tenha um ambiente de desenvolvimento para testá-lo).

- - - - - - - - - - - - -
Pré-requisitos:Conhecimentos básicos em informática. Uma compreensão geral de programação web no lado servidor (backend), em particular, nos mecanismos de interação cliente-servidor de websites.
Objetivos:Familiarizar-se com Express, como este framework trabalha junto ao Node, quais as funcionalidades que fornece e quais são os principais blocos de construção de um aplicativo Express.
- -

O que é Express e Node ?

- -

Node (ou formalmente Node.js) é um ambiente em tempo de execução open-source (código aberto) e multiplataforma que permite aos desenvolvedores criarem todo tipo de aplicativos e ferramentas do lado servidor (backend) em JavaScript.  Node é usado fora do contexto de um navegador (ou seja executado diretamente no computador ou no servidor). Como tal, o ambiente omite APIs JavaScript específicas do navegador e adiciona suporte para APIs de sistema operacional mais tradicionais, incluindo bibliotecas de sistemas HTTP e arquivos.

- -

Do ponto de vista do desenvolvimento de um servidor web, o Node possui vários benefícios:

- - - -

Você pode utilizar o Node.js para criar um simples servidor web, utilizando o pacote Node HTTP.

- -

Olá, Node.js

- -

O exemplo a seguir cria um servidor web que escuta qualquer tipo de requisição HTTP na URL  http://127.0.0.1:8000/  --  quando uma requisição é recebida, o script vai responder com a string (texto) "Olá Mundo". Se você já instalou o Node, você pode seguir os passos seguintes deste exemplo.

- -
    -
  1. Abre o Terminal (no Windows, abra o prompt da linha de comando)
    2. -
  2. Crie uma pasta onde você quer salvar o programa, por exemplo, test-node. Então, entre na pasta com o seguinte comando no terminal:
    3. -
- -
cd test-node
-
- -

Use o seu editor de texto preferido, crie um arquivo chamado hello.js e cole o código a seguir:

- -
// Carrega o modulo HTTP do Node
-var http = require("http");
-
-// Cria um servidor HTTP e uma escuta de requisições para a porta 8000
-http.createServer(function(request, response) {
-
-  // Configura o cabeçalho da resposta com um status HTTP e um Tipo de Conteúdo
-   response.writeHead(200, {'Content-Type': 'text/plain'});
-
-   // Manda o corpo da resposta "Olá Mundo"
-   response.end('Olá Mundo\n');
-}).listen(8000, '127.0.0.1');
-
-// Imprime no console a URL de acesso ao servidor
-console.log('Servidor executando em http://127.0.0.1:8000/');
- -

Salve o arquivo na pasta que você criou acima.

- -

Por último, vá para o terminal e digite o comando a seguir:

- -

node hello.js

- -

Enfim, abra o browser e digite  http://localhost:8000. Você verá o texto "Olá, Mundo", no canto superior esquerdo.

- -

Web Frameworks

- -

Algumas tarefas comuns no desenvolvimento web não são suportadas diretamente pelo Node. Se você quiser que a sua aplicação possua diferentes verbos HTTP (por exemplo GET, POST, DELETE, etc), que gerencie requisições de diferentes URLs ("rotas"), apresente arquivos estáticos ou utilize templates para mostrar as respostas (response) de maneira dinâmica, você não terá muita praticidade usando apenas o Node. Você terá duas opções. Escrever o código por conta própria ou então evitar todo esse trabalho de reinventar a roda ao utilizar um framework.

- -

Introduzindo o Express

- -

Express é o framework Node mais popular e a biblioteca subjacente para uma série de outros frameworks do Node. O Express oferece soluções para:

- - - -

O Express é bastante minimalista, no entanto, os desenvolvedores têm liberdade para criar pacotes de middleware específicos com o objetivo de resolver problemas específicos que surgem no desenvolvimento de uma aplicação. Há bibliotecas para trabalhar com cookies, sessões, login de usuários, parâmetros de URL, dados em requisições POST, cabeçalho de segurança e tantos outros. Você pode achar uma lista de pacotes de middleware mantidos pela equipe Express em Express Middleware (juntamente com uma lista de pacotes populares desenvolvidos por terceiros).

- -
-

Nota: Essa flexibilidade do Express é uma espada de dois gumes. Há pacotes de middleware para resolver quase qualquer problema ou requisito ao longo do desenvolvimento, mas utilizar os pacotes corretos para cada situação às vezes se torna um grande desafio. Não há "caminho certo" para estruturar um aplicativo. Muitos exemplos que você encontra na Internet não são bons ou mostram apenas uma pequena parte do que você precisa fazer para desenvolver uma aplicação web.

-
- -

De onde o Node e o Express vieram?

- -

Node foi inicialmente lançado em 2009, mas naquela época apenas para Linux. O gerenciador de pacotes NPM veio no ano seguinte, 2010, e o suporte nativo do Windows chegou em 2012. A versão atual do Long Term Support (LTS) é o Node v8.9.3, enquanto a versão mais recente é o Node 9. Esse é um resumo da rica histórica do Node, mas é possível conhecer mais na Wikipédia.

- -

O Express foi lançado em novembro de 2010 e atualmente está na versão 4.16 da API. Você pode verificar o changelog para obter informações sobre as mudanças na versão atual e o GitHub para obter notas detalhadas das versões históricas.

- - - -

É importante considerar a popularidade de um framework web porque indica se a ferramenta continuará sendo mantida e atualizada, além de apontar quais recursos provavelmente estarão disponíveis na documentação, nas bibliotecas de complemento e no suporte técnico.

- -

Não há nenhum número capaz de medir precisamente a popularidade de um framework (apesar de que alguns sites como o Hot Frameworks avaliarem a popularidade a partir do número de projetos do GitHub e do número de perguntas do StackOverflow relativas a cada tecnologia). Diante dessa limitação, o mais importante é fazermos algumas outras perguntas para saber se o Node e o Express são "suficientemente populares" para não caírem nos problemas clássicos das tecnologias com pouca adesão da comunidade.

- -

O Node e o Express continuam a evoluir ? Você pode obter ajuda na comunidade caso precise? Existe uma oportunidade para você receber trabalho remunerado ao dominar o Node e o Express ?

- -

Baseado no número de empresas de alto perfil que usam Express, no número de pessoas contribuindo para o código base, e no número de pessoas que oferecem suporte (gratuito ou pago), a reposta é sim. O Node e o Express são tecnologias populares!

- -

Express é opinativo ?

- -

Os frameworks web costumam se autodeclararem "opinativos" ou "não opinativos".

- -

Os frameworks opinativos são aqueles com "opiniões" sobre o "caminho certo" para lidar com qualquer tarefa específica. Muitas vezes, apoiam o desenvolvimento rápido em um domínio particular (resolvendo problemas de um tipo específico) porque a maneira correta de fazer qualquer coisa geralmente é bem compreendida e bem documentada. No entanto, são menos flexíveis na resolução de problemas fora de seu domínio principal e tendem a oferecer menos opções para quais componentes e abordagens podem usar nesses casos.

- -

Frameworks não opinativos, por outro lado, têm muito menos restrições sobre a melhor maneira de utilizar componentes para atingir um objetivo, ou mesmo quais componentes devem ser usados. Eles tornam mais fácil para os desenvolvedores usar as ferramentas mais adequadas para completar uma tarefa específica, embora você precise encontrar esses componentes por si próprio.

- -

Express é um framework não opinativo. Você pode inserir qualquer middleware que você goste no manuseio das solicitações em quase qualquer ordem que desejar. Pode estruturar o aplicativo em um arquivo ou em vários, usar qualquer estrutura de pastas dentro do diretório principal, etc.

- -

Como se parece o código do Express ?

- -

Em um site tradicional baseado em dados, um aplicativo da Web aguarda pedidos HTTP do navegador da web (ou outro cliente). Quando um pedido é recebido, o aplicativo descreve quais ações são necessárias com base no padrão de URL e possivelmente informações associadas contidas em dados POST ou GET. Dependendo do que é necessário, pode-se ler ou escrever informações em um banco de dados ou executar outras tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta ao navegador da Web, criando, de forma dinâmica, uma página HTML para o navegador, exibindo e inserindo os dados recuperados em espaços reservados em um modelo HTML.

- -

Express fornece métodos para especificar qual função é chamada quando chega requisição HTTP (GET, POST, SET, etc.) e de rotas e métodos para especificar o mecanismo de modelo ("view") usado, onde o modelo arquivos estão localizados e qual modelo usar para renderizar uma resposta. Você pode usar o middleware Express para adicionar suporte para cookies, sessões e usuários, obtendo parâmetros POST / GET, etc. Você pode usar qualquer mecanismo de banco de dados suportado por Node (o Express não define nenhum comportamento relacionado a banco de dados).

- -

As seções a seguir explicam algumas das coisas comuns que você verá ao trabalhar com o código Express e Node.

- -

Olá Mundo Express

- -

Primeiro, considere o padrão do exemplo do Express Olá Mundo (discutiremos cada trecho do código nas seções abaixo e nas seções a seguir).

- -
-

Dica: Se você tiver o Node e o Express já instalados (ou se você os instalar como mostrado no próximo artigo, você pode salvar este código em um arquivo chamado app.js e executá-lo em um prompt, ao digitar o comando node app.js.

-
- -
var express = require('express');
-var app = express();
-
-app.get('/', function(req, res) {
-  res.send('Olá Mundo!');
-});
-
-app.listen(3000, function() {
-  console.log('App de Exemplo escutando na porta 3000!');
-});
-
- -

As duas primeiras linhas require() importam o módulo Express e criam uma aplicação Express. Esse objeto (tradicionalmente nomeado de app), tem métodos de roteamento de requisições HTTP, configurações de middleware, renderização de views HTML, registro de engines de templates e modificação das configurações que controlam como o aplicativo se comporta (por exemplo, o modo de ambiente, se as definições de rota são sensíveis a maiúsculas e minúsculas, etc).

- -

A parte do meio do código (as três linhas que começam com app.get) mostra uma definição de rota. O método app.get() especifica uma função de retorno de chamada que será invocada sempre que exista uma solicitação HTTP GET com um caminho ('/') relativo à raiz do site. A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumentos, e simplesmente chama send() na resposta para retornar a string "Olá Mundo!"

- -

O bloco final inicia o servidor na porta '3000' e imprime um comentário de log no console. Com o servidor em execução, você pode acessar o localhost:3000 em seu navegador para ver o exemplo de resposta retornado.

- -

Importando e criando módulos

- -

Um módulo é uma biblioteca/arquivo de JavaScript que você pode importar para outro código usando a função require() do Node. Express por si é um módulo, assim como as bibliotecas de middleware e banco de dados que usamos em nossos aplicativos Express.

- -

O código abaixo mostra como importamos um módulo por nome, usando o quadro Express como um exemplo. Primeiro invocamos a função require(), especificando o nome do módulo como uma string ('express'), e chamando o objeto retornado para criar um aplicativo Express. Podemos então acessar as propriedades e funções do objeto da aplicação.

- -
var express = require('express');
-var app = express();
-
- -

Você também pode criar seus próprios módulos para serem importados da mesma maneira.

- -
-

Dica: Você vai querer criar seus próprios módulos porque isso permite que você organize seu código em peças gerenciáveis - um aplicativo monolítico (de arquivo único) é difícil de entender e manter. O uso de módulos também ajuda você a gerenciar o namespace, pois somente as variáveis que você exporta explicitamente são importadas quando você usa um módulo.

-
- -

Para tornar os objetos disponíveis fora do módulo, você precisa apenas atribuí-los ao objeto exports. Por Exemplo, o módulo square.js abaixo é um arquivo que exporta os métodos area() e perimeter():

- -
exports.area = function(width) { return width * width; };
-exports.perimeter = function(width) { return 4 * width; };
-
- -

Nós podemos importar este módulo usando require(). Depois, conecte ao(s) método(s) exportado(s) como mostrado a seguir:

- -
var square = require('./square'); // Chamamos o arquivo utilizando o require()
-console.log('The area of a square with a width of 4 is ' + square.area(4));
- -
-

Nota: Você também pode especificar um caminho absoluto para o módulo (ou um nome, como fizemos inicialmente).

-
- -

Se você deseja exportar um objeto completo em uma atribuição, em vez de criar uma propriedade de cada vez, atribua ao module.exports como mostrado abaixo (você também pode fazer isso para tornar a raiz do objeto exporter um construtor ou outra função):

- -
module.exports = {
-  area: function(width) {
-    return width * width;
-  },
-
-  perimeter: function(width) {
-    return 4 * width;
-  }
-};
-
- -

Para muitas outras informações sobre módulos veja Módulos (Node API docs).

- -

Usando APIs assíncronas

- -

O código JavaScript frequentemente usa APIs assíncronas em vez de síncronas para operações que podem levar algum tempo para serem concluídas. Uma API síncrona é aquela em que cada operação deve ser concluída antes que a próxima operação seja iniciada. Por exemplo, as seguintes funções de log são síncronas e imprimirão o texto no console em ordem (Primeiro, Segundo).

- -
console.log('Primeiro');
-console.log('Segundo');
- -
-
Em contrapartida, uma API assíncrona é aquela em que a API iniciará uma operação e retornará imediatamente (antes da conclusão da operação). Assim que a operação terminar, a API usará algum mecanismo para executar operações adicionais. Por exemplo, o código abaixo imprimirá "Segundo, Primeiro". Isso porque, mesmo que o método setTimeout() seja chamado primeiro e retornae imediatamente, a operação precisa de três segundos para finalizar.
- -
-
- -
setTimeout(function() {
-   console.log('Primeiro');
-   }, 3000);
-console.log('Segundo');
-
- -

O uso de APIs assíncronas não bloqueadoras é ainda mais importante no Node do que no navegador, pois o Node é um ambiente de execução orientado por evento único (single threaded). "Single threaded" significa que todos os pedidos para o servidor são executados no mesmo tópico (em vez de serem gerados em processos separados). Esse modelo é extremamente eficiente em termos de velocidade e recursos do servidor, mas isso significa que, se qualquer uma das suas funções chamar métodos síncronos que demoram muito para completar, eles bloquearão não apenas a solicitação atual, mas todas as outras solicitações serão tratadas por sua aplicação web.

- -

Há várias maneiras de uma API assíncrona notificar para a aplicação que alguma função chegou ao fim. A maneira mais comum é registrar uma função de retorno de chamada quando você invoca a API assíncrona, que será chamada de volta quando a operação for concluída. Usamos essa abordagem acima.

- -
-

Dica: O uso de callbacks pode ser bastante "bagunçado" se você tiver uma sequência de operações assíncronas dependentes que devem ser executadas em ordem, porque isto resulta em multiplo níveis de callbacks aninhados. Este problema é comumente conhecido como "inferno de callback" ou "código hadouken". Pode-se reduzir o problema ao adotar boas práticas de programação (veja http://callbackhell.com/), utilizar um módulo como async, ou mesmo adotar recursos do ES6, como Promises.

-
- -
-

Dica: Uma convenção comum para Node e Express é usar as devoluções de retorno de erro. Nesta convenção, o primeiro valor em suas funções de retorno de chamada é um valor de erro, enquanto os argumentos subseqüentes contêm dados de sucesso. Há uma boa explicação de por que essa abordagem é útil neste blog: The Node.js Way - Understanding Error-First Callbacks (fredkschott.com).

-
- -

Criando manipuladores de rotas

- -

No nosso Olá Mundo em Express (veja acima), nós definimos uma (callback) função manipuladora de rota para requisição GET HTTP para a raiz do site ('/').

- -
app.get('/', function(req, res) {
-  res.send('Olá Mundo');
-});
-
- -

A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumento. Neste caso, o método simplesmente chama send() na resposta para retornar a string "Olá Mundo!" Há uma série de outros métodos de resposta para encerrar o ciclo de solicitação / resposta, por exemplo, você poderia chamar res.json() para enviar uma resposta JSON ou res.sendFile() para enviar um arquivo.

- -
-

Dica JavaScript: Você pode usar qualquer argumento que você gosta nas funções de retorno de chamada. Quando o retorno de chamada é invocado, o primeiro argumento sempre será o pedido e o segundo sempre será a resposta. Faz sentido nomeá-los de tal forma que você possa identificar o objeto que você está trabalhando no corpo do retorno de chamada.

-
- -

O Express também fornece métodos para definir manipuladores de rotas para todas as outras requisições HTTP, que são usadas exatamente da mesma maneira: post(), put(), delete(), options(), trace(), copy(), lock(), mkcol(), move(), purge(), propfind(), proppatch(), unlock(), report(), mkactivity(), checkout(), merge(), m-search(), notify(), subscribe(), unsubscribe(), patch(), search(), e connect().

- -

Há um método de roteamento especial, app.all(), que será chamado em resposta a qualquer método HTTP. É usado para carregar funções de middleware em um caminho específico para todos os métodos de solicitação. O exemplo a seguir (da documentação Express) mostra um manipulador que será executado para solicitações /secret, independentemente do verbo HTTP usado (desde que seja suportado pelo módulo http).

- -
app.all('/secret', function(req, res, next) {
-  console.log('Acessando a sessão secreta...');
-  next(); // passa o controle para o próximo manipulador
-});
- -

As rotas permitem combinar padrões de caracteres específicos em um URL e extrair alguns valores do URL e passá-los como parâmetros para o manipulador de rotas (como atributos do objeto de solicitação passado como parâmetro).

- -

Muitas vezes, é útil agrupar manipuladores de rotas para uma determinada parte de um site e acessá-los usando um prefixo de rota comum (por exemplo, um site com um Wiki pode ter todas as rotas relacionadas ao wiki em um arquivo e tê-los acessado com um prefixo de rota de / wiki /). Em Express, isso é alcançado usando o objeto express.Router. Por exemplo, podemos criar nossa rota wiki em um módulo chamado wiki.js e, em seguida, exportar o objeto Router, conforme mostrado abaixo:

- -
// wiki.js - Rotas de Wiki
-
-var express = require('express');
-var router = express.Router();
-
-// Home page route
-router.get('/', function(req, res) {
-  res.send('Wiki home page');
-});
-
-// About page route
-router.get('/about', function(req, res) {
-  res.send('About this wiki');
-});
-
-module.exports = router;
-
- -
-

Nota: Adicionar rotas ao objeto Router é como adicionar rotas ao objeto app (como mostrado anteriormente).

-
- -

Para usar o roteador em nosso arquivo de aplicativo principal, então, require() o módulo de rota (wiki.js) e depois use() no aplicativo Express para adicionar o Router ao caminho de gerenciamento de middleware. As duas rotas serão acessíveis a partir de /wiki/ e /wiki/about/.

- -
var wiki = require('./wiki.js');
-// ...
-app.use('/wiki', wiki);
- -

Vamos mostrar-lhe muito mais sobre trabalhar com rotas e, em particular, sobre o uso do Router, mais tarde, na seção vinculada Rotas e controladores.

- -

Usando middleware

- -

O Middleware é usado extensivamente em aplicativos Express para que as tarefas ofereçam arquivos estáticos ao tratamento de erros, a comprensão de respostas HTTP. Enquanto as funções de rota terminam o ciclo de solicitação-resposta HTTP, retornando alguma resposta ao cliente HTTP, as funções de middleware normalmente executam alguma operação na solicitação ou resposta e, em seguida, ligue para a próxima função na "pilha", que pode ser mais um middleware ou uma rota manipuladora. A ordem em que o middleware é chamado depende do desenvolvedor do aplicativo.

- -
-

Nota: O middleware pode executar qualquer operação, executar qualquer código, fazer alterações no objeto de solicitação e resposta, e também pode encerrar o ciclo de solicitação-resposta. Se não terminar o ciclo, ele deve chamar o next() para passar o controle para a próxima função de middleware (ou a solicitação ficará pendurada).

-
- -

A maioria dos aplicativos usará middleware de terceiros para simplificar tarefas comuns de desenvolvimento web, como trabalhar com cookies, sessões, autenticação de usuários, acessar dados POST e JSON, log, etc. Você pode encontrar uma lista de pacotes de middleware mantidos pela equipe Express (que também inclui outros pacotes populares de terceiros). Outros pacotes Express estão disponíveis no gerenciador de pacotes do NPM.

- -

Para usar middleware de terceiros, primeiro você precisa instalá-lo em seu aplicativo usando NPM. Por exemplo, para instalar o logger morgan HTTP, você faria isso:

- -
$ npm install morgan
-
- -

Você pode então chamar use() no objeto do aplicativo Express para adicionar o middleware à pilha:

- -
var express = require('express');
-var logger = require('morgan');
-var app = express();
-app.use(logger('dev'));
-...
- -
-

Nota: O middleware e as funções de roteamento são chamadas na ordem em que são declaradas. Para alguns middleware, a ordem é importante (por exemplo, se o middleware de sessão depende do middleware de cookies, então o manipulador de cookies deve ser adicionado primeiro). É quase sempre o caso em que o middleware é chamado antes de definir rotas, ou seus manipuladores de rotas não terão acesso à funcionalidade adicionada pelo seu middleware.

-
- -

Você pode escrever suas próprias funções de middleware. É provável que você tenha que fazê-lo (somente para criar código de manipulação de erro). A única diferença entre uma função de middleware e um retorno de chamada de manipulador de rotas é que as funções de middleware têm um terceiro argumento next, que as funções de middleware devem chamar se não completam o ciclo de solicitação (quando a função de middleware é chamada, isso contém a próxima função que deve ser chamado).

- -

Você pode adicionar uma função de middleware à cadeia de processamento com app.use() ou app.add(), dependendo se você deseja aplicar o middleware a todas as respostas ou a respostas com um verbo HTTP específico (GET, POST, etc. ). Você especifica rotas o mesmo em ambos os casos, embora a rota seja opcional ao chamar app.use().

- -

O exemplo abaixo mostra como você pode adicionar a função middleware usando ambos os métodos e com/sem rota.

- -
var express = require('express');
-var app = express();
-
-// Um exemplo de função middleware
-var a_middleware_function = function(req, res, next) {
-  // ... Executa alguma operação
-  next(); // next() Chama o próximo middleware ou função de rotas
-}
-
-// Função adicionada com use() para todas rotas e requisições
-app.use(a_middleware_function);
-
-// Função adicionada com use() para uma rota específica
-app.use('/someroute', a_middleware_function);
-
-// função middleware adicionado para uma rota e requisição específica
-app.get('/', a_middleware_function);
-
-app.listen(3000);
- -
-

Dica JavaScript: Acima, declaramos a função de middleware separadamente e, em seguida, configuramos como retorno de chamada. Na nossa função anterior do operador de rotas, declaramos a função de retorno de chamada quando foi utilizada. Em JavaScript, ambas abordagens são válidas.

-
- -

A documentação Express possui uma documentação excelente sobre como usar e escrever o middleware Express.

- -

Servindo arquivos estáticos

- -

Você pode usar o middleware express.static para servir arquivos estáticos, incluindo suas imagens, CSS e JavaScript (static() é a única função de middleware que é realmente parte do Express). Por exemplo, você usaria a linha abaixo para exibir imagens, arquivos CSS e arquivos JavaScript de um diretório chamado 'public' no mesmo nível onde você chama o nó:

- -
app.use(express.static('public'));
-
- -

Todos os arquivos no diretório público são atendidos adicionando o nome do arquivo (relativo ao diretório "público" base) ao URL base. Então, por exemplo:

- -
http://localhost:3000/images/dog.jpg
-http://localhost:3000/css/style.css
-http://localhost:3000/js/app.js
-http://localhost:3000/about.html
-
- -

Você pode chamar static() várias vezes para atender vários diretórios. Se um arquivo não puder ser encontrado por uma função de middleware, ele simplesmente será transmitido ao middleware subsequente (a ordem em que o middleware é chamado é baseada em sua ordem de declaração).

- -
app.use(express.static('public'));
-app.use(express.static('media'));
-
- -

Você também pode criar um prefixo virtual para seus URL estáticos, em vez de ter os arquivos adicionados ao URL base. Por exemplo, aqui especificamos um caminho de montagem para que os arquivos sejam carregados com o prefixo "/media":

- -
app.use('/media', express.static('public'));
-
- -

Agora, você pode carregar os arquivos que estão no diretório public a partir do prefixo de caminho /media.

- -
http://localhost:3000/media/images/dog.jpg
-http://localhost:3000/media/video/cat.mp4
-http://localhost:3000/media/cry.mp3
-
- -

Para obter mais informações, consulte Servindo arquivos estáticos no Express.

- -

Erros de manipulação

- -

Os erros são tratados por uma ou mais funções de middleware especiais que possuem quatro argumentos, em vez dos três habituais: (err, req, res, next). Por exemplo:

- -
app.use(function(err, req, res, next) {
-  console.error(err.stack);
-  res.status(500).send('Something broke!');
-});
-
- -

Isso pode retornar qualquer conteúdo exigido, mas deve ser chamado depois de todas as outras chamadas app.use() e rotas para que sejam o último middleware no processo de solicitação de pedidos!

- -

Express vem com um manipulador de erros embutido, que cuida de todos os erros que podem ser encontrados no aplicativo. Essa função de middleware de gerenciamento de erros padrão é adicionada no final da pilha de funções do middleware. Se você passar um erro para next() e você não lidar com isso em um manipulador de erro, ele será tratado pelo manipulador de erros incorporado; o erro será gravado no cliente com o rastreamento da pilha.

- -
-

Nota: O rastreamento da pilha não está incluído no ambiente de produção. Para executá-lo no modo de produção, você precisa configurar a variável de ambiente NODE_ENV para 'production'.

-
- -
-

Nota: HTTP404 e outros códigos de status de "erro" não são tratados como erros. Se você quiser lidar com isso, você pode adicionar uma função de middleware para fazê-lo. Para mais informações, consulte as FAQ.

-
- -

Para obter mais informações, consulte Gerenciamento de erros (Express docs).

- -

Usando Banco de Dados

- -

Aplicativos Express podem usar qualquer mecanismo de banco de dados suportado pelo Node (o Express em si não define nenhum comportamento/requisitos adicionais específicos para gerenciamento de banco de dados). Existem muitas opções, incluindo PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

- -

Para usá-los, você deve primeiro instalar o driver do banco de dados usando NPM. Por exemplo, para instalar o driver para o popular NoSQL MongoDB você usaria o comando:

- -
$ npm install mongodb
-
- -

O próprio banco de dados pode ser instalado localmente ou em um servidor em nuvem. No seu código Express, você precisa do driver, conecte-se ao banco de dados e execute as operações criar, ler, atualizar e excluir (CRUD). O exemplo abaixo (da documentação Express) mostra como você pode encontrar registros de "mamíferos" usando MongoDB.

- -
var MongoClient = require('mongodb').MongoClient;
-
-MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
-  if (err) throw err;
-
-  db.collection('mammals').find().toArray(function (err, result) {
-    if (err) throw err;
-
-    console.log(result);
-  });
-});
- -

Outra abordagem popular é acessar seu banco de dados indiretamente, através de um Object Relational Mapper ("ORM"). Nesta abordagem, você define seus dados como "objetos" ou "modelos" e o ORM mapeia estes para o formato de banco de dados subjacente. Esta abordagem tem o benefício de que, como desenvolvedor, você pode continuar a pensar em termos de objetos JavaScript, em vez de semântica de banco de dados, e que existe um local óbvio para realizar a validação e verificação de dados recebidos. Falaremos mais sobre bancos de dados em um artigo posterior.

- -

Para obter mais informações, consulte integração com banco de dados (documentos express).

- -

Renderizando dados (views)

- -

Os mecanismos de modelo (referidos como "view engines" por Express) permitem que você especifique a estrutura de um documento de saída em um modelo, usando marcadores de posição para os dados que serão preenchidos quando uma página for gerada. Os modelos geralmente são usados para criar HTML, mas também podem criar outros tipos de documentos. Express tem suporte para uma série de mecanismos de modelos, e há uma comparação útil dos motores mais populares aqui: Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More.

- -

No seu código de configurações do aplicativo você configurou o mecanismo do modelo para usar e o local onde Express deve procurar modelos usando as configurações 'visualizações' e 'visualizar mecanismos', conforme mostrado abaixo (você também terá que instalar o pacote que contém a biblioteca do modelo também !)

- -
var express = require('express');
-var app = express();
-
-//  Definir o diretório para conter os modelos ('views')
-app.set('views', path.join(__dirname, 'views'));
-
-// Definir o motor de visualização para usar, neste caso 'some_template_engine_name'
-app.set('view engine', 'some_template_engine_name');
-
- -

A aparência do modelo dependerá do mecanismo que você usa. Supondo que você tenha um arquivo de modelo chamado "índice. <Template_extension>" que contenha espaços reservados para variáveis de dados denominadas 'título' e 'mensagem', você chamaria Response.render() em uma função de roteador de rotas para criar e enviar a resposta HTML :

- -
app.get('/', function(req, res) {
-  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
-});
- -

Para obter mais informações, consulte usando motores de modelo com Express (Express docs).

- -

Estrutura de Arquivos

- -

Express não faz suposições em termos de estrutura ou quais os componentes que você usa. Rotas, visualizações, arquivos estáticos e outra lógica específica da aplicação podem viver em qualquer número de arquivos com qualquer estrutura de diretório. Embora seja perfeitamente possível ter todo o aplicativo Express em um único arquivo, geralmente faz sentido dividir seu aplicativo em arquivos com base em função (por exemplo, gerenciamento de contas, blogs, fóruns de discussão) e domínio de problema arquitetônico (por exemplo, modelo, exibição ou controlador se você está usando uma arquitetura MVC).

- -

Em um tópico posterior, usaremos o Express Application Generator, que cria um esqueleto de aplicativo modular que podemos estender facilmente para criar aplicativos da web.

- - - -

Sumário

- -

Parabéns, você completou o primeiro passo em sua viagem Express/Node! Agora você deve entender os principais benefícios do Express e Node, e aproximadamente o que as principais partes de um aplicativo Express podem ser (rotas, middleware, tratamento de erros e código de modelo). Por ser um framework não opinativo, o Express permite que você defina a maneira como essas partes e essas bibliotecas são integradas.

- -

Claro que Express é deliberadamente uma estrutura de aplicativos web muito leve, tanto seu benefício e potencial vem de bibliotecas e recursos de terceiros. Examinaremos essa questão com mais detalhes nos próximos artigos. No artigo a seguir, vamos analisar a criação de um ambiente de desenvolvimento de Node, para que você possa começar a ver algum código Express em ação.

- -

Veja também

- - - -
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
- -

Próximos módulos

- - diff --git a/files/pt-br/learn/server-side/first_steps/introduction/index.html b/files/pt-br/learn/server-side/first_steps/introduction/index.html new file mode 100644 index 0000000000..e5cc0b991c --- /dev/null +++ b/files/pt-br/learn/server-side/first_steps/introduction/index.html @@ -0,0 +1,237 @@ +--- +title: Introdução ao lado servidor +slug: Learn/Server-side/First_steps/Introdução +tags: + - Desenvolvimento Web + - Iniciante + - Introdução + - Programação + - Programação do lado do servidor + - Servidor + - programação do lado do cliente +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

Bem-vindo ao curso de programação do lado do servidor para iniciantes do MDN! Neste primeiro artigo, examinamos a programação do lado do servidor de um alto nível, respondendo a perguntas como "o que é?", "Como ela difere da programação do lado do cliente?" E "por que é tão útil?" . Depois de ler este artigo, você entenderá o poder adicional disponível para sites por meio da codificação do lado do servidor.

+ + + + + + + + + + + + +
Pré-requisitos :Conhecimento básico de informática. Uma compreensão básica do que é um servidor web
+

Objetivo :

+ 		Ganhar familiaridade com o que é programação do lado do servidor, o que ela pode fazer e como ela difere da programação do lado do cliente.
+ +

A maioria dos sites de grande escala usa código do lado do servidor para exibir dinamicamente diferentes dados quando necessário, geralmente retirados de um banco de dados armazenado em um servidor e enviados ao cliente para serem exibidos por meio de algum código (por exemplo, HTML e JavaScript).

+ +

Talvez o benefício mais significativo do código do lado do servidor seja que ele permite personalizar o conteúdo do site para usuários individuais. Os sites dinâmicos podem destacar o conteúdo que é mais relevante com base nas preferências e hábitos do usuário. Ele também pode tornar os sites mais fáceis de usar, armazenando preferências e informações pessoais - por exemplo, reutilizando os detalhes armazenados do cartão de crédito para agilizar os pagamentos subsequentes.

+ +

Pode até permitir a interação com os usuários do site, enviando notificações e atualizações por e-mail ou por outros canais. Todos esses recursos permitem um envolvimento muito mais profundo com os usuários.

+ +

No mundo moderno do desenvolvimento web, aprender sobre desenvolvimento do lado do servidor é extremamente recomendado.

+ +

O que é programação de site do lado do servidor ?

+ +

Navegadores comunicam-se com  web servers  utilizando o HyperText Transfer Protocol ({{glossary("HTTP")}}). Quando você clica em um link em uma página da web, envia um formulário ou faz uma pesquisa, uma HTTP request(solicitação HTTP) é enviada do seu navegador para o servidor de destino.

+ +

A solicitação inclui uma URL que identifica o recurso afetado, um método que define a ação necessária (por exemplo, para obter, excluir ou postar o recurso) e pode incluir informações adicionais codificadas em parâmetros de URL(Os pares field-value(campo-valor) são enviados por meio de uma query string), como dados POST (dados enviados pelo método HTTP POST ), ou em associado {{glossary("Cookie", "cookies")}} .

+ +

Os servidores da web esperam por mensagens de solicitação do cliente, processam-nas quando chegam e respondem ao navegador da web com uma mensagem HTTP response . A resposta contém uma linha de status indicando se a solicitação foi bem-sucedida ou não (e.g. "HTTP/1.1 200 OK" for success). 

+ +

O corpo de uma resposta bem-sucedida a uma solicitação conteria o recurso solicitado (por exemplo, uma nova página HTML ou uma imagem, etc ...), que poderia então ser exibido pelo navegador.

+ +

Sites estáticos

+ +

O diagrama abaixo mostra uma arquitetura básica de servidor da web para um site estático (um site estático é aquele que retorna o mesmo conteúdo embutido em código do servidor sempre que um determinado recurso é solicitado). Quando um usuário deseja navegar para uma página, o navegador envia uma solicitação HTTP "GET" especificando seu URL.

+ +

O servidor recupera o documento solicitado de seu sistema de arquivos e retorna uma resposta HTTP contendo o documento e um success status (geralmente, 200 OK). Se o arquivo não puder ser recuperado por algum motivo, um status de erro será retornado(Veja client error responses e server error responses).

+ +

A simplified diagram of a static web server.

+ +

Sites dinâmicos

+ +

Um site dinâmico é aquele em que parte do conteúdo da resposta é gerado dinamicamente, apenas quando necessário. Em um site dinâmico, as páginas HTML são normalmente criadas inserindo dados de um banco de dados em espaços reservados em modelos HTML (essa é uma maneira muito mais eficiente de armazenar grandes quantidades de conteúdo do que usar sites estáticos). 

+ +

Um site dinâmico pode retornar dados diferentes para um URL com base nas informações fornecidas pelo usuário ou preferências armazenadas e pode realizar outras operações como parte do retorno de uma resposta (e.g. enviando notificações).

+ +

A maior parte do código para oferecer suporte a um site dinâmico deve ser executado no servidor. A criação desse código é denominado "server-side programming" (ou às vezes "back-end scripting").

+ +

O diagrama abaixo mostra uma arquitetura simples para um site dinâmico. Como no diagrama anterior, os navegadores enviam solicitações HTTP para o servidor, então o servidor processa as solicitações e retorna as respostas HTTP apropriadas.

+ +

As solicitações de recursos estáticos são tratadas da mesma maneira que para sites estáticos (recursos estáticos são quaisquer arquivos que não mudam - normalmente: CSS, JavaScript, imagens, arquivos PDF pré-criados etc.).

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

As solicitações de recursos dinâmicos são encaminhadas (2) para o código do lado do servidor (mostrado no diagrama como uma web application). Para "solicitações dinâmicas", o servidor interpreta a solicitação, lê as informações necessárias do banco de dados (3), combina os dados recuperados com modelos HTML (4) e envia de volta uma resposta contendo o HTML gerado (5,6).

+ +
+

A programação do lado do servidor e do lado cliente são iguais ?

+
+ +

Vamos agora voltar nossa atenção para o código envolvido na programação do lado do servidor e do lado do cliente. Em cada caso, o código é significativamente diferente:

+ + + +

O código em execução no navegador  é conhecido como client-side code e se preocupa principalmente em melhorar a aparência e o comportamento de uma página da web renderizada. Isso inclui selecionar e definir o estilo dos componentes da IU, criação de layouts, navegação, validação de formulário etc. Por outro lado, a programação do site do lado do servidor envolve principalmente a escolha de qual conteúdo é retornado ao navegador em resposta às solicitações. O código do lado do servidor lida com tarefas como validação de dados e solicitações enviadas, usando bancos de dados para armazenar e recuperar dados e enviar os dados corretos para o cliente conforme necessário.

+ +

O código do lado do cliente é geralmente escrito em HTML, CSS, e JavaScript — ele é executado dentro de um navegador da web e tem pouco ou nenhum acesso ao sistema operacional subjacente (incluindo acesso limitado ao sistema de arquivos)

+ +

Os desenvolvedores da Web não podem controlar qual navegador cada usuário pode estar usando para visualizar um site - os navegadores fornecem níveis inconsistentes de compatibilidade com recursos de código do lado do cliente, e parte do desafio da programação do lado do cliente é lidar com as diferenças no suporte do navegador de maneira elegante.

+ +

O código do lado do servidor pode ser escrito algumas linguagens de programação - exemplos de linguagens da web do lado do servidor populares incluem PHP, Python, Ruby, C # e NodeJS (JavaScript). O código do lado do servidor tem acesso total ao sistema operacional do servidor e o desenvolvedor pode escolher qual linguagem de programação (e versão específica) deseja usar.

+ +

Desenvolvedores geralmente escrevem seus códigos utilizando web frameworks. Frameworks Web são coleções de funções, objetos, regras e outras construções de código projetadas para resolver problemas comuns, acelerar o desenvolvimento e simplificar os diferentes tipos de tarefas enfrentadas em um domínio específico.

+ +

Novamente, embora o código do lado do cliente e do servidor usem frameworks, os domínios são muito diferentes e, portanto, os frameworks também são. Os frameworks web do lado do cliente simplificam as tarefas de layout e apresentação, enquanto os frameworks web do lado do servidor fornecem muitas funcionalidades de servidor da web "comuns" que você mesmo poderia ter que implementar (por exemplo, suporte para sessões, suporte para usuários e autenticação, fácil acesso ao banco de dados, bibliotecas de modelos, etc.).

+ +
+

Nota : Os frameworks do lado do cliente costumam ser usados para ajudar a acelerar o desenvolvimento do código do lado do cliente, mas você também pode escolher escrever todo o código manualmente; na verdade, escrever seu código manualmente pode ser mais rápido e eficiente se você precisar apenas de uma IU de site da Web pequena e simples.

+ +

Em contraste, você quase nunca pensaria em escrever o componente do lado do servidor de um web application sem um framework - implementar um recurso vital como um servidor HTTP é realmente difícil de fazer do zero em, digamos, Python, mas frameworks web em Python como Django fornecem essa ferramenta , junto com outras ferramentas muito úteis.

+
+ +
+

O que você pode fazer no lado do servidor ?

+ +

A programação do lado do servidor é muito útil porque nos permite fornecer com eficiência informações personalizadas para usuários individuais e, assim, criar uma experiência de usuário muito melhor.

+
+ +

Empresas como a Amazon usam programação do lado do servidor para construir resultados de pesquisa de produtos, fazer sugestões de produtos direcionados com base nas preferências do cliente e hábitos de compra anteriores, simplificar as compras, etc.

+ +

Os bancos usam a programação do lado do servidor para armazenar informações de contas e permitir que apenas usuários autorizados visualizem e façam transações. Outros serviços como Facebook, Twitter, Instagram e Wikipedia usam programação do lado do servidor para destacar, compartilhar e controlar o acesso ao conteúdo .

+ +

Alguns dos usos e benefícios comuns da programação do lado do servidor estão listados abaixo. Você notará que há alguma sobreposição!

+ +

Armazenamento eficiente e entrega de informações

+ +

Imagine quantos produtos estão disponíveis na Amazon e quantas postagens foram escritas no Facebook? Criar uma página estática separada para cada produto ou postagem seria completamente impraticável.

+ +

A programação do lado do servidor nos permite, em vez disso, armazenar as informações em um banco de dados e construir e retornar dinamicamente HTML e outros tipos de arquivos (por exemplo, PDFs, imagens, etc.). Também é possível simplesmente retornar dados ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para renderização por frameworks web do lado do cliente apropriados (isso reduz a carga de processamento em um servidor e a quantidade de dados que precisa ser enviada).

+ +

O servidor não se limita a enviar informações de bancos de dados e pode, alternativamente, retornar o resultado de ferramentas de software ou dados de serviços de comunicação. O conteúdo pode até ser direcionado para o tipo de dispositivo que o cliente está recebendo.

+ +

Como as informações estão em um banco de dados, elas também podem ser mais facilmente compartilhadas e atualizadas com outros sistemas de negócios (por exemplo, quando os produtos são vendidos online ou em uma loja, a loja pode atualizar seu banco de dados de estoque).

+ +
+

Nota : Sua imaginação não precisa trabalhar muito para ver os benefícios do código do lado do servidor para armazenamento e entrega eficientes de informações:

+ +
    +
  1. Vá em Amazon ou em outro site comercial.
    2. +
  2. Pesquise várias palavras-chave e observe como a estrutura da página não muda, embora os resultados mudem.
    3. +
  3. Abra dois ou três produtos diferentes. Observe novamente como eles têm uma estrutura e layout comuns, mas o conteúdo de diferentes produtos foi retirado do banco de dados.
    4. +
+ +

Para um termo de pesquisa comum ("peixe", digamos), você pode ver literalmente milhões de valores retornados. O uso de um banco de dados permite que sejam armazenados e compartilhados de forma eficiente, além de permitir que a apresentação das informações seja controlada em um só lugar.

+
+ +

Experiência de usuário personalizada

+ +

Os servidores podem armazenar e usar informações sobre clientes para fornecer uma experiência de usuário conveniente e personalizada. Por exemplo, muitos sites armazenam cartões de crédito para que os detalhes não tenham que ser inseridos novamente. Sites como o Google Maps podem usar locais salvos ou atuais para fornecer informações de rota e pesquisar o histórico de viagens para destacar empresas locais nos resultados de pesquisa.

+ +

Uma análise mais profunda dos hábitos do usuário pode ser usada para antecipar seus interesses e personalizar ainda mais as respostas e notificações, por exemplo, fornecendo uma lista de locais visitados anteriormente ou que você pode querer ver em um mapa.

+ +
+

Nota: Google Maps salva sua pesquisa e histórico de visitas. Locais visitados ou pesquisados ​​com frequência são destacados mais do que outros.

+ +

Os resultados de pesquisa do Google são otimizados com base em pesquisas anteriores.

+ +
    +
  1.  Vá em Google search.
    2. +
  2.  Pesquise por "futeboll".
    3. +
  3. Agora tente digitar "favorito" na caixa de pesquisa e observe as previsões de pesquisa do preenchimento automático.
    4. +
+ +

Coincidência ? Nada!

+
+ +

Acesso controlado ao conteúdo

+ +

A programação do lado do servidor permite que os sites restrinjam o acesso a usuários autorizados e forneçam apenas as informações que um usuário tem permissão para ver.

+ +

Exemplos do mundo real, incluem :

+ + + +
+

Nota : Considere outros exemplos reais em que o acesso ao conteúdo é controlado. Por exemplo, o que você pode ver se acessar o site online do seu banco? Faça login em sua conta - quais informações adicionais você pode ver e modificar? Quais informações você pode ver que somente o banco pode alterar?

+
+ +

Sessão de armazenamento / informações de estado

+ +

A programação do lado do servidor permite que os desenvolvedores façam uso de sessões - basicamente, um mecanismo que permite a um servidor armazenar informações sobre o usuário atual de um site e enviar diferentes respostas com base nessas informações.

+ +

Isso permite, por exemplo, que um site saiba que um usuário fez login anteriormente e exiba links para seus e-mails ou histórico de pedidos, ou talvez salve o estado de um jogo simples para que o usuário possa ir a um site novamente e continuar onde eles deixaram.

+ +
+

Note:Visite um site de jornal que tem um modelo de assinatura e abra várias guias (por exemplo, The Age). Continue a visitar o site por algumas horas / dias. Eventualmente, você começará a ser redirecionado para páginas que explicam como se inscrever e não conseguirá acessar os artigos. Essas informações são um exemplo de informações de sessão armazenadas em cookies.

+
+ +

Notificações e comunicação

+ +

Os servidores podem enviar notificações gerais ou específicas do usuário por meio do próprio site ou por e-mail, SMS, mensagens instantâneas, conversas por vídeo ou outros serviços de comunicação.

+ +

Alguns exemplos, incluem :

+ + + +
+

Nota: O tipo mais comum de notificação é uma "confirmação de registro". Escolha quase todos os grandes sites de seu interesse (Google, Amazon, Instagram, etc.) e crie uma nova conta usando seu endereço de e-mail. Em breve, você receberá um e-mail confirmando seu registro ou solicitando confirmação para ativar sua conta.

+
+ +

Análise de dados

+ +

Um site pode coletar muitos dados sobre os usuários: o que procuram, o que compram, o que recomendam, quanto tempo permanecem em cada página. A programação do lado do servidor pode ser usada para refinar as respostas com base na análise desses dados.

+ +

Por exemplo, Amazon e Google anunciam produtos com base em pesquisas anteriores (e compras).

+ +
+

Nota:Se você é um usuário do Facebook, vá para o seu feed principal e veja o fluxo de postagens. Observe como algumas das postagens estão fora da ordem numérica - em particular, as postagens com mais "curtidas" geralmente estão no topo da lista do que as postagens mais recentes.

+ +

Observe também que tipo de anúncio está sendo mostrado - você pode ver anúncios de coisas que já viu em outros sites. O algoritmo do Facebook para destacar conteúdo e publicidade pode ser um pouco misterioso, mas é claro que depende de seus gostos e hábitos de visualização!

+
+ +

Resumo

+ +

Parabéns, você chegou ao final do primeiro artigo sobre programação do lado do servidor.

+ +

Agora você aprendeu que o código do lado do servidor é executado em um servidor da web e que sua função principal é controlar quais informações são enviadas ao usuário (enquanto o código do lado do cliente lida principalmente com a estrutura e apresentação desses dados para o usuário) .

+ +

Você também deve entender que é útil porque nos permite criar sites que fornecem informações sob medida para usuários individuais de forma eficiente e têm uma boa ideia de algumas das coisas que você pode fazer quando for um programador do lado do servidor.

+ +

Por último, você deve entender que o código do lado do servidor pode ser escrito em várias linguagens de programação e que você deve usar um framewoek web para tornar todo o processo mais fácil.

+ +

Em um artigo futuro, ajudaremos você a escolher o melhor framework web para seu primeiro site. Aqui, vamos levá-lo pelas principais interações cliente-servidor com um pouco mais de detalhes.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

+ +

Nesse módulo

+ + diff --git "a/files/pt-br/learn/server-side/first_steps/introdu\303\247\303\243o/index.html" "b/files/pt-br/learn/server-side/first_steps/introdu\303\247\303\243o/index.html" deleted file mode 100644 index e5cc0b991c..0000000000 --- "a/files/pt-br/learn/server-side/first_steps/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Introdução ao lado servidor -slug: Learn/Server-side/First_steps/Introdução -tags: - - Desenvolvimento Web - - Iniciante - - Introdução - - Programação - - Programação do lado do servidor - - Servidor - - programação do lado do cliente -translation_of: Learn/Server-side/First_steps/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
- -

Bem-vindo ao curso de programação do lado do servidor para iniciantes do MDN! Neste primeiro artigo, examinamos a programação do lado do servidor de um alto nível, respondendo a perguntas como "o que é?", "Como ela difere da programação do lado do cliente?" E "por que é tão útil?" . Depois de ler este artigo, você entenderá o poder adicional disponível para sites por meio da codificação do lado do servidor.

- - - - - - - - - - - - -
Pré-requisitos :Conhecimento básico de informática. Uma compreensão básica do que é um servidor web
-

Objetivo :

- 		Ganhar familiaridade com o que é programação do lado do servidor, o que ela pode fazer e como ela difere da programação do lado do cliente.
- -

A maioria dos sites de grande escala usa código do lado do servidor para exibir dinamicamente diferentes dados quando necessário, geralmente retirados de um banco de dados armazenado em um servidor e enviados ao cliente para serem exibidos por meio de algum código (por exemplo, HTML e JavaScript).

- -

Talvez o benefício mais significativo do código do lado do servidor seja que ele permite personalizar o conteúdo do site para usuários individuais. Os sites dinâmicos podem destacar o conteúdo que é mais relevante com base nas preferências e hábitos do usuário. Ele também pode tornar os sites mais fáceis de usar, armazenando preferências e informações pessoais - por exemplo, reutilizando os detalhes armazenados do cartão de crédito para agilizar os pagamentos subsequentes.

- -

Pode até permitir a interação com os usuários do site, enviando notificações e atualizações por e-mail ou por outros canais. Todos esses recursos permitem um envolvimento muito mais profundo com os usuários.

- -

No mundo moderno do desenvolvimento web, aprender sobre desenvolvimento do lado do servidor é extremamente recomendado.

- -

O que é programação de site do lado do servidor ?

- -

Navegadores comunicam-se com  web servers  utilizando o HyperText Transfer Protocol ({{glossary("HTTP")}}). Quando você clica em um link em uma página da web, envia um formulário ou faz uma pesquisa, uma HTTP request(solicitação HTTP) é enviada do seu navegador para o servidor de destino.

- -

A solicitação inclui uma URL que identifica o recurso afetado, um método que define a ação necessária (por exemplo, para obter, excluir ou postar o recurso) e pode incluir informações adicionais codificadas em parâmetros de URL(Os pares field-value(campo-valor) são enviados por meio de uma query string), como dados POST (dados enviados pelo método HTTP POST ), ou em associado {{glossary("Cookie", "cookies")}} .

- -

Os servidores da web esperam por mensagens de solicitação do cliente, processam-nas quando chegam e respondem ao navegador da web com uma mensagem HTTP response . A resposta contém uma linha de status indicando se a solicitação foi bem-sucedida ou não (e.g. "HTTP/1.1 200 OK" for success). 

- -

O corpo de uma resposta bem-sucedida a uma solicitação conteria o recurso solicitado (por exemplo, uma nova página HTML ou uma imagem, etc ...), que poderia então ser exibido pelo navegador.

- -

Sites estáticos

- -

O diagrama abaixo mostra uma arquitetura básica de servidor da web para um site estático (um site estático é aquele que retorna o mesmo conteúdo embutido em código do servidor sempre que um determinado recurso é solicitado). Quando um usuário deseja navegar para uma página, o navegador envia uma solicitação HTTP "GET" especificando seu URL.

- -

O servidor recupera o documento solicitado de seu sistema de arquivos e retorna uma resposta HTTP contendo o documento e um success status (geralmente, 200 OK). Se o arquivo não puder ser recuperado por algum motivo, um status de erro será retornado(Veja client error responses e server error responses).

- -

A simplified diagram of a static web server.

- -

Sites dinâmicos

- -

Um site dinâmico é aquele em que parte do conteúdo da resposta é gerado dinamicamente, apenas quando necessário. Em um site dinâmico, as páginas HTML são normalmente criadas inserindo dados de um banco de dados em espaços reservados em modelos HTML (essa é uma maneira muito mais eficiente de armazenar grandes quantidades de conteúdo do que usar sites estáticos). 

- -

Um site dinâmico pode retornar dados diferentes para um URL com base nas informações fornecidas pelo usuário ou preferências armazenadas e pode realizar outras operações como parte do retorno de uma resposta (e.g. enviando notificações).

- -

A maior parte do código para oferecer suporte a um site dinâmico deve ser executado no servidor. A criação desse código é denominado "server-side programming" (ou às vezes "back-end scripting").

- -

O diagrama abaixo mostra uma arquitetura simples para um site dinâmico. Como no diagrama anterior, os navegadores enviam solicitações HTTP para o servidor, então o servidor processa as solicitações e retorna as respostas HTTP apropriadas.

- -

As solicitações de recursos estáticos são tratadas da mesma maneira que para sites estáticos (recursos estáticos são quaisquer arquivos que não mudam - normalmente: CSS, JavaScript, imagens, arquivos PDF pré-criados etc.).

- -

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

- -

As solicitações de recursos dinâmicos são encaminhadas (2) para o código do lado do servidor (mostrado no diagrama como uma web application). Para "solicitações dinâmicas", o servidor interpreta a solicitação, lê as informações necessárias do banco de dados (3), combina os dados recuperados com modelos HTML (4) e envia de volta uma resposta contendo o HTML gerado (5,6).

- -
-

A programação do lado do servidor e do lado cliente são iguais ?

-
- -

Vamos agora voltar nossa atenção para o código envolvido na programação do lado do servidor e do lado do cliente. Em cada caso, o código é significativamente diferente:

- - - -

O código em execução no navegador  é conhecido como client-side code e se preocupa principalmente em melhorar a aparência e o comportamento de uma página da web renderizada. Isso inclui selecionar e definir o estilo dos componentes da IU, criação de layouts, navegação, validação de formulário etc. Por outro lado, a programação do site do lado do servidor envolve principalmente a escolha de qual conteúdo é retornado ao navegador em resposta às solicitações. O código do lado do servidor lida com tarefas como validação de dados e solicitações enviadas, usando bancos de dados para armazenar e recuperar dados e enviar os dados corretos para o cliente conforme necessário.

- -

O código do lado do cliente é geralmente escrito em HTML, CSS, e JavaScript — ele é executado dentro de um navegador da web e tem pouco ou nenhum acesso ao sistema operacional subjacente (incluindo acesso limitado ao sistema de arquivos)

- -

Os desenvolvedores da Web não podem controlar qual navegador cada usuário pode estar usando para visualizar um site - os navegadores fornecem níveis inconsistentes de compatibilidade com recursos de código do lado do cliente, e parte do desafio da programação do lado do cliente é lidar com as diferenças no suporte do navegador de maneira elegante.

- -

O código do lado do servidor pode ser escrito algumas linguagens de programação - exemplos de linguagens da web do lado do servidor populares incluem PHP, Python, Ruby, C # e NodeJS (JavaScript). O código do lado do servidor tem acesso total ao sistema operacional do servidor e o desenvolvedor pode escolher qual linguagem de programação (e versão específica) deseja usar.

- -

Desenvolvedores geralmente escrevem seus códigos utilizando web frameworks. Frameworks Web são coleções de funções, objetos, regras e outras construções de código projetadas para resolver problemas comuns, acelerar o desenvolvimento e simplificar os diferentes tipos de tarefas enfrentadas em um domínio específico.

- -

Novamente, embora o código do lado do cliente e do servidor usem frameworks, os domínios são muito diferentes e, portanto, os frameworks também são. Os frameworks web do lado do cliente simplificam as tarefas de layout e apresentação, enquanto os frameworks web do lado do servidor fornecem muitas funcionalidades de servidor da web "comuns" que você mesmo poderia ter que implementar (por exemplo, suporte para sessões, suporte para usuários e autenticação, fácil acesso ao banco de dados, bibliotecas de modelos, etc.).

- -
-

Nota : Os frameworks do lado do cliente costumam ser usados para ajudar a acelerar o desenvolvimento do código do lado do cliente, mas você também pode escolher escrever todo o código manualmente; na verdade, escrever seu código manualmente pode ser mais rápido e eficiente se você precisar apenas de uma IU de site da Web pequena e simples.

- -

Em contraste, você quase nunca pensaria em escrever o componente do lado do servidor de um web application sem um framework - implementar um recurso vital como um servidor HTTP é realmente difícil de fazer do zero em, digamos, Python, mas frameworks web em Python como Django fornecem essa ferramenta , junto com outras ferramentas muito úteis.

-
- -
-

O que você pode fazer no lado do servidor ?

- -

A programação do lado do servidor é muito útil porque nos permite fornecer com eficiência informações personalizadas para usuários individuais e, assim, criar uma experiência de usuário muito melhor.

-
- -

Empresas como a Amazon usam programação do lado do servidor para construir resultados de pesquisa de produtos, fazer sugestões de produtos direcionados com base nas preferências do cliente e hábitos de compra anteriores, simplificar as compras, etc.

- -

Os bancos usam a programação do lado do servidor para armazenar informações de contas e permitir que apenas usuários autorizados visualizem e façam transações. Outros serviços como Facebook, Twitter, Instagram e Wikipedia usam programação do lado do servidor para destacar, compartilhar e controlar o acesso ao conteúdo .

- -

Alguns dos usos e benefícios comuns da programação do lado do servidor estão listados abaixo. Você notará que há alguma sobreposição!

- -

Armazenamento eficiente e entrega de informações

- -

Imagine quantos produtos estão disponíveis na Amazon e quantas postagens foram escritas no Facebook? Criar uma página estática separada para cada produto ou postagem seria completamente impraticável.

- -

A programação do lado do servidor nos permite, em vez disso, armazenar as informações em um banco de dados e construir e retornar dinamicamente HTML e outros tipos de arquivos (por exemplo, PDFs, imagens, etc.). Também é possível simplesmente retornar dados ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para renderização por frameworks web do lado do cliente apropriados (isso reduz a carga de processamento em um servidor e a quantidade de dados que precisa ser enviada).

- -

O servidor não se limita a enviar informações de bancos de dados e pode, alternativamente, retornar o resultado de ferramentas de software ou dados de serviços de comunicação. O conteúdo pode até ser direcionado para o tipo de dispositivo que o cliente está recebendo.

- -

Como as informações estão em um banco de dados, elas também podem ser mais facilmente compartilhadas e atualizadas com outros sistemas de negócios (por exemplo, quando os produtos são vendidos online ou em uma loja, a loja pode atualizar seu banco de dados de estoque).

- -
-

Nota : Sua imaginação não precisa trabalhar muito para ver os benefícios do código do lado do servidor para armazenamento e entrega eficientes de informações:

- -
    -
  1. Vá em Amazon ou em outro site comercial.
    2. -
  2. Pesquise várias palavras-chave e observe como a estrutura da página não muda, embora os resultados mudem.
    3. -
  3. Abra dois ou três produtos diferentes. Observe novamente como eles têm uma estrutura e layout comuns, mas o conteúdo de diferentes produtos foi retirado do banco de dados.
    4. -
- -

Para um termo de pesquisa comum ("peixe", digamos), você pode ver literalmente milhões de valores retornados. O uso de um banco de dados permite que sejam armazenados e compartilhados de forma eficiente, além de permitir que a apresentação das informações seja controlada em um só lugar.

-
- -

Experiência de usuário personalizada

- -

Os servidores podem armazenar e usar informações sobre clientes para fornecer uma experiência de usuário conveniente e personalizada. Por exemplo, muitos sites armazenam cartões de crédito para que os detalhes não tenham que ser inseridos novamente. Sites como o Google Maps podem usar locais salvos ou atuais para fornecer informações de rota e pesquisar o histórico de viagens para destacar empresas locais nos resultados de pesquisa.

- -

Uma análise mais profunda dos hábitos do usuário pode ser usada para antecipar seus interesses e personalizar ainda mais as respostas e notificações, por exemplo, fornecendo uma lista de locais visitados anteriormente ou que você pode querer ver em um mapa.

- -
-

Nota: Google Maps salva sua pesquisa e histórico de visitas. Locais visitados ou pesquisados ​​com frequência são destacados mais do que outros.

- -

Os resultados de pesquisa do Google são otimizados com base em pesquisas anteriores.

- -
    -
  1.  Vá em Google search.
    2. -
  2.  Pesquise por "futeboll".
    3. -
  3. Agora tente digitar "favorito" na caixa de pesquisa e observe as previsões de pesquisa do preenchimento automático.
    4. -
- -

Coincidência ? Nada!

-
- -

Acesso controlado ao conteúdo

- -

A programação do lado do servidor permite que os sites restrinjam o acesso a usuários autorizados e forneçam apenas as informações que um usuário tem permissão para ver.

- -

Exemplos do mundo real, incluem :

- - - -
-

Nota : Considere outros exemplos reais em que o acesso ao conteúdo é controlado. Por exemplo, o que você pode ver se acessar o site online do seu banco? Faça login em sua conta - quais informações adicionais você pode ver e modificar? Quais informações você pode ver que somente o banco pode alterar?

-
- -

Sessão de armazenamento / informações de estado

- -

A programação do lado do servidor permite que os desenvolvedores façam uso de sessões - basicamente, um mecanismo que permite a um servidor armazenar informações sobre o usuário atual de um site e enviar diferentes respostas com base nessas informações.

- -

Isso permite, por exemplo, que um site saiba que um usuário fez login anteriormente e exiba links para seus e-mails ou histórico de pedidos, ou talvez salve o estado de um jogo simples para que o usuário possa ir a um site novamente e continuar onde eles deixaram.

- -
-

Note:Visite um site de jornal que tem um modelo de assinatura e abra várias guias (por exemplo, The Age). Continue a visitar o site por algumas horas / dias. Eventualmente, você começará a ser redirecionado para páginas que explicam como se inscrever e não conseguirá acessar os artigos. Essas informações são um exemplo de informações de sessão armazenadas em cookies.

-
- -

Notificações e comunicação

- -

Os servidores podem enviar notificações gerais ou específicas do usuário por meio do próprio site ou por e-mail, SMS, mensagens instantâneas, conversas por vídeo ou outros serviços de comunicação.

- -

Alguns exemplos, incluem :

- - - -
-

Nota: O tipo mais comum de notificação é uma "confirmação de registro". Escolha quase todos os grandes sites de seu interesse (Google, Amazon, Instagram, etc.) e crie uma nova conta usando seu endereço de e-mail. Em breve, você receberá um e-mail confirmando seu registro ou solicitando confirmação para ativar sua conta.

-
- -

Análise de dados

- -

Um site pode coletar muitos dados sobre os usuários: o que procuram, o que compram, o que recomendam, quanto tempo permanecem em cada página. A programação do lado do servidor pode ser usada para refinar as respostas com base na análise desses dados.

- -

Por exemplo, Amazon e Google anunciam produtos com base em pesquisas anteriores (e compras).

- -
-

Nota:Se você é um usuário do Facebook, vá para o seu feed principal e veja o fluxo de postagens. Observe como algumas das postagens estão fora da ordem numérica - em particular, as postagens com mais "curtidas" geralmente estão no topo da lista do que as postagens mais recentes.

- -

Observe também que tipo de anúncio está sendo mostrado - você pode ver anúncios de coisas que já viu em outros sites. O algoritmo do Facebook para destacar conteúdo e publicidade pode ser um pouco misterioso, mas é claro que depende de seus gostos e hábitos de visualização!

-
- -

Resumo

- -

Parabéns, você chegou ao final do primeiro artigo sobre programação do lado do servidor.

- -

Agora você aprendeu que o código do lado do servidor é executado em um servidor da web e que sua função principal é controlar quais informações são enviadas ao usuário (enquanto o código do lado do cliente lida principalmente com a estrutura e apresentação desses dados para o usuário) .

- -

Você também deve entender que é útil porque nos permite criar sites que fornecem informações sob medida para usuários individuais de forma eficiente e têm uma boa ideia de algumas das coisas que você pode fazer quando for um programador do lado do servidor.

- -

Por último, você deve entender que o código do lado do servidor pode ser escrito em várias linguagens de programação e que você deve usar um framewoek web para tornar todo o processo mais fácil.

- -

Em um artigo futuro, ajudaremos você a escolher o melhor framework web para seu primeiro site. Aqui, vamos levá-lo pelas principais interações cliente-servidor com um pouco mais de detalhes.

- -

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

- -

Nesse módulo

- - diff --git a/files/pt-br/learn/server-side/first_steps/seguranca_site/index.html b/files/pt-br/learn/server-side/first_steps/seguranca_site/index.html deleted file mode 100644 index 12a11cf641..0000000000 --- a/files/pt-br/learn/server-side/first_steps/seguranca_site/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Segurança em aplicação web -slug: Learn/Server-side/First_steps/Seguranca_site -tags: - - Aprendizagem - - Guía - - Iniciante - - Introdução - - Programação do server - - Segurança - - Segurança em aplicações web - - Segurança web -translation_of: Learn/Server-side/First_steps/Website_security ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

A segurança do site requer vigilância em todos os aspectos do design e uso do site. Este artigo introdutório não fará de você um guru da segurança de sites, mas ajudará a entender de onde vem as ameaças e o que você pode fazer para proteger sua aplicação web contra os ataques mais comuns.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento básico em informática.
Objetivo:Entender as ameaças mais comuns à segurança de aplicações web e o que você pode fazer para reduzir o risco de invasão do site.
- -

O que é segurança no site?

- -

A Internet é um lugar perigoso! Com grande regularidade, ouvimos sobre a indisponibilidade de sites devido a ataques de negação de serviço ou a exibição de informações modificadas (e muitas vezes prejudiciais) em suas páginas iniciais. Em outros casos de alto perfil, milhões de senhas, endereços de email e detalhes de cartão de crédito foram vazados para o domínio público, expondo os usuários do site a vergonha pessoal e risco financeiro.

- -

O objetivo da segurança do site é impedir esse (ou qualquer) tipo de ataque. A definição mais formal de segurança do site é o ato ou prática de proteger sites contra acesso, uso, modificação, destruição ou interrupção não autorizados.

- -

A segurança efetiva do site requer um esforço de design em todo o site: em sua aplicação web, na configuração do servidor da web, em suas políticas para criar e renovar senhas e no código do cliente. Embora tudo isso pareça muito ameaçador, a boa notícia é que, se você estiver usando framework (uma estrutura da web) no servidor, é provável que ele habilitará "por padrão" mecanismos de defesa robustos e bem pensados ​​contra vários ataques mais comuns. Outros ataques podem ser mitigados através da configuração do servidor da web, por exemplo, ativando o HTTPS. Por fim, existem ferramentas de scanner de vulnerabilidades disponíveis publicamente que podem ajudá-lo a descobrir se você cometeu algum erro óbvio.

- -

O restante deste artigo fornece mais detalhes sobre algumas ameaças comuns e algumas das etapas simples que você pode executar para proteger seu site.

- -
-

Nota: Este é um tópico introdutório projetado para ajudá-lo a começar a pensar na segurança do site, mas não é exaustivo.

-
- -

Ameaças à segurança do site

- -

Esta seção lista apenas algumas das ameaças mais comuns do site e como elas são mitigadas. Enquanto você lê, observe como as ameaças são mais bem-sucedidas quando a aplicação web confia ou não é paranóico o suficiente sobre os dados provenientes do navegador.

- -

Cross-Site Scripting (XSS)

- -

XSS é um termo usado para descrever uma classe de ataques que permitem que um invasor injete scripts do lado do cliente através do site nos navegadores de outros usuários. Como o código injetado chega ao navegador a partir do site, o código é confiável e pode fazer coisas como enviar o cookie de autorização do site do usuário ao invasor. Quando o invasor possui o cookie, ele pode fazer login em um site como se fosse o usuário e fazer tudo que o usário pode, como acessar os detalhes do cartão de crédito, ver detalhes do contato ou alterar senhas.

- -
-

Nota: As vulnerabilidades XSS têm sido historicamente mais comuns do que qualquer outro tipo de ameaça à segurança.

-
- -

As vulnerabilidades do XSS são divididas em refletidas e persistentes, de acordo como o site retorna os scripts injetados para um navegador.

- - - -

Embora os dados das solicitações POST ou GET sejam a fonte mais comum de vulnerabilidades XSS, qualquer dado do navegador é potencialmente vulnerável, como dados de cookies renderizados pelo navegador ou arquivos de usuário que são carregados e exibidos.

- -

A melhor defesa contra as vulnerabilidades do XSS é remover ou desativar qualquer marcação que possa conter instruções para executar o código. Para HTML, isso inclui elementos, como <script>, <object>, <embed> e <link> .

- -

O processo de modificação de dados do usuário para que não possa ser usado para executar scripts ou afetar a execução do código do servidor é conhecido como limpeza de entrada. Muitas estruturas da Web limpam automaticamente a entrada do usuário de formulários HTML por padrão.

- -

Injeção de SQL

- -

As vulnerabilidades de injeção de SQL permitem que usuários mal-intencionados executem código SQL arbitrário em um banco de dados, permitindo que os dados sejam acessados, modificados ou excluídos, independentemente das permissões do usuário. Um ataque de injeção bem-sucedido pode falsificar identidades, criar novas identidades com direitos de administração, acessar todos os dados no servidor ou destruir/modificar os dados para torná-los inutilizáveis.

- -

Os tipos de injeção SQL incluem injeção SQL baseada em erro, injeção SQL baseada em erros booleanos e injeção SQL baseada em tempo.

- -

Esta vulnerabilidade está presente se a entrada do usuário que é passada para uma instrução SQL subjacente puder alterar o significado da instrução. Por exemplo, o código a seguir tem como objetivo listar todos os usuários com um nome específico (nomeUsuario) fornecido a partir de um formulário HTML:

- -
statement = "SELECT * FROM usuarios WHERE name = '" + nomeUsuario + "';"
- -

Se o usuário especificar um nome real, a instrução funcionará como pretendido. No entanto, um usuário mal-intencionado pode alterar completamente o comportamento dessa instrução SQL para a nova instrução no exemplo a seguir, simplesmente especificando o texto em negrito para o nomeUsuario.

- -
SELECT * FROM usuarios WHERE name = 'a';DROP TABLE usuarios; SELECT * FROM userinfo WHERE 't' = 't';
-
- -

A instrução modificada cria uma instrução SQL válida que exclui a tabela de usuarios e seleciona todos os dados da tabela userinfo (que revela as informações de cada usuário). Isso funciona porque a primeira parte do texto injetado ( a';) completa a declaração original.

- -

Para evitar esse tipo de ataque, você deve garantir que os dados do usuário passados para uma consulta SQL não possam alterar a natureza da consulta. Uma maneira de fazer isso é utilizar 'escape' em todos os caracteres na entrada do usuário que tenham um significado especial no SQL.

- -
-

Nota: A instrução SQL trata o caractere ' como o início e o final de uma cadeia de caracteres literal. Ao colocar uma barra invertida na frente desse caractere (\'), "escapamos" do símbolo e dizemos ao SQL para tratá-lo como um caractere (apenas uma parte da string).

-
- -

Na declaração a seguir, escapamos o caractere '. O SQL agora interpretará o nome como toda a string em negrito (que é um nome muito estranho, mas não prejudicial).

- -
SELECT * FROM usarios WHERE name = 'a\';DROP TABLE usuarios; SELECT * FROM userinfo WHERE \'t\' = \'t';
-
-
- -

Frameworks web geralmente cuidam do caractere que está escapando para você. O Django, por exemplo, garante que todos os dados do usuário passados para os conjuntos de consultas (consultas de modelo) sejam escapados.

- -
-

Nota: Esta seção baseia-se fortemente nas informações da Wikipedia.

-
- -

Cross-Site Request Forgery (CSRF)

- -

Os ataques de CSRF permitem que um usuário mal-intencionado execute ações usando as credenciais de outro usuário sem o conhecimento ou consentimento desse usuário.

- -

Esse tipo de ataque é melhor explicado por exemplo. John é um usuário mal-intencionado que sabe que um site específico permite que usuários conectados enviem dinheiro para uma conta especificada usando uma solicitação HTTP POST que inclui o nome da conta e uma quantia em dinheiro. John cria um formulário que inclui seus dados bancários e uma quantia de dinheiro como campos ocultos e o envia por e-mail a outros usuários do site (com o botão Enviar, disfarçado como um link para um site "fique rico rapidamente").

- -

Se um usuário clicar no botão enviar, uma solicitação HTTP POST será enviada ao servidor contendo os detalhes da transação e quaisquer cookies do lado do cliente que o navegador associou ao site (adicionar cookies do site associados a solicitações é um comportamento normal do navegador). O servidor irá verificar os cookies e usá-los para determinar se o usuário está ou não conectado e tem permissão para fazer a transação.

- -

O resultado é que qualquer usuário que clicar no botão Enviar enquanto estiver conectado ao site de negociação fará a transação. John fica rico.

- -
-

Nota: O truque aqui é que John não precisa ter acesso aos cookies do usuário (ou credenciais de acesso). O navegador do usuário armazena essas informações e as inclui automaticamente em todas as solicitações ao servidor associado.

-
- -

Uma maneira de impedir esse tipo de ataque é o servidor exigir que as solicitações POST incluam um segredo gerado pelo site específico do usuário. O segredo seria fornecido pelo servidor ao enviar o formulário da web usado para fazer transferências. Essa abordagem impede John de criar seu próprio formulário, uma vez que ele precisaria conhecer o segredo que o servidor está fornecendo ao usuário. Mesmo se descobrisse o segredo e criasse um formulário para um usuário específico, ele não seria mais capaz de usar o mesmo formulário para atacar todos os usuários.

- -

Frameworks web geralmente incluem esses mecanismos de prevenção para CSRF.

- -

Outras ameaças

- -

Outros ataques e vulnerabilidades comuns incluem:

- - - -

Para obter uma lista abrangente das ameaças à segurança do site, consulte Categoria: explorações de segurança da Web (Wikipedia) e Categoria: Ataque (Projeto de Segurança para Aplicações Web Abertos).

- -

Algumas mensagens-chave

- -

Quase todas as explorações de segurança nas seções anteriores são bem-sucedidas quando a aplicação web confia nos dados do navegador. Tudo o que você fizer para melhorar a segurança do seu site, você deve limpar todos os dados originados pelo usuário antes de serem exibidos no navegador, usados em consultas SQL ou passados para um sistema operacional ou para uma chamada do sistema de arquivos.

- -
-

Importante: A lição mais importante que você pode aprender sobre segurança do site é nunca confiar nos dados do navegador. Isso inclui, mas não se limita a dados nos parâmetros de URL de solicitações GET, POST, cabeçalhos HTTP, cookies e arquivos enviados por usuários. Sempre verifique e limpe todos os dados recebidos. Sempre assuma o pior.

-
- -

Uma série de outras etapas concretas que você pode executar são:

- - - -

Frameworks web podem ajudar a mitigar muitas das vulnerabilidades mais comuns.

- -

Resumo

- -

Este artigo explicou o conceito de segurança na web e algumas das ameaças mais comuns contra as quais o site deve tentar se proteger. Mais importante, você deve entender que uma aplicação web não pode confiar em nenhum dado do navegador. Todos os dados do usuário devem ser limpos antes de serem exibidos ou usados em consultas SQL e chamadas do sistema de arquivos.

- -

Com este artigo, você chegou ao final deste módulo, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um Framework web e iniciar a programação.

- -

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/server-side/first_steps/website_security/index.html b/files/pt-br/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..12a11cf641 --- /dev/null +++ b/files/pt-br/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,175 @@ +--- +title: Segurança em aplicação web +slug: Learn/Server-side/First_steps/Seguranca_site +tags: + - Aprendizagem + - Guía + - Iniciante + - Introdução + - Programação do server + - Segurança + - Segurança em aplicações web + - Segurança web +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

A segurança do site requer vigilância em todos os aspectos do design e uso do site. Este artigo introdutório não fará de você um guru da segurança de sites, mas ajudará a entender de onde vem as ameaças e o que você pode fazer para proteger sua aplicação web contra os ataques mais comuns.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico em informática.
Objetivo:Entender as ameaças mais comuns à segurança de aplicações web e o que você pode fazer para reduzir o risco de invasão do site.
+ +

O que é segurança no site?

+ +

A Internet é um lugar perigoso! Com grande regularidade, ouvimos sobre a indisponibilidade de sites devido a ataques de negação de serviço ou a exibição de informações modificadas (e muitas vezes prejudiciais) em suas páginas iniciais. Em outros casos de alto perfil, milhões de senhas, endereços de email e detalhes de cartão de crédito foram vazados para o domínio público, expondo os usuários do site a vergonha pessoal e risco financeiro.

+ +

O objetivo da segurança do site é impedir esse (ou qualquer) tipo de ataque. A definição mais formal de segurança do site é o ato ou prática de proteger sites contra acesso, uso, modificação, destruição ou interrupção não autorizados.

+ +

A segurança efetiva do site requer um esforço de design em todo o site: em sua aplicação web, na configuração do servidor da web, em suas políticas para criar e renovar senhas e no código do cliente. Embora tudo isso pareça muito ameaçador, a boa notícia é que, se você estiver usando framework (uma estrutura da web) no servidor, é provável que ele habilitará "por padrão" mecanismos de defesa robustos e bem pensados ​​contra vários ataques mais comuns. Outros ataques podem ser mitigados através da configuração do servidor da web, por exemplo, ativando o HTTPS. Por fim, existem ferramentas de scanner de vulnerabilidades disponíveis publicamente que podem ajudá-lo a descobrir se você cometeu algum erro óbvio.

+ +

O restante deste artigo fornece mais detalhes sobre algumas ameaças comuns e algumas das etapas simples que você pode executar para proteger seu site.

+ +
+

Nota: Este é um tópico introdutório projetado para ajudá-lo a começar a pensar na segurança do site, mas não é exaustivo.

+
+ +

Ameaças à segurança do site

+ +

Esta seção lista apenas algumas das ameaças mais comuns do site e como elas são mitigadas. Enquanto você lê, observe como as ameaças são mais bem-sucedidas quando a aplicação web confia ou não é paranóico o suficiente sobre os dados provenientes do navegador.

+ +

Cross-Site Scripting (XSS)

+ +

XSS é um termo usado para descrever uma classe de ataques que permitem que um invasor injete scripts do lado do cliente através do site nos navegadores de outros usuários. Como o código injetado chega ao navegador a partir do site, o código é confiável e pode fazer coisas como enviar o cookie de autorização do site do usuário ao invasor. Quando o invasor possui o cookie, ele pode fazer login em um site como se fosse o usuário e fazer tudo que o usário pode, como acessar os detalhes do cartão de crédito, ver detalhes do contato ou alterar senhas.

+ +
+

Nota: As vulnerabilidades XSS têm sido historicamente mais comuns do que qualquer outro tipo de ameaça à segurança.

+
+ +

As vulnerabilidades do XSS são divididas em refletidas e persistentes, de acordo como o site retorna os scripts injetados para um navegador.

+ + + +

Embora os dados das solicitações POST ou GET sejam a fonte mais comum de vulnerabilidades XSS, qualquer dado do navegador é potencialmente vulnerável, como dados de cookies renderizados pelo navegador ou arquivos de usuário que são carregados e exibidos.

+ +

A melhor defesa contra as vulnerabilidades do XSS é remover ou desativar qualquer marcação que possa conter instruções para executar o código. Para HTML, isso inclui elementos, como <script>, <object>, <embed> e <link> .

+ +

O processo de modificação de dados do usuário para que não possa ser usado para executar scripts ou afetar a execução do código do servidor é conhecido como limpeza de entrada. Muitas estruturas da Web limpam automaticamente a entrada do usuário de formulários HTML por padrão.

+ +

Injeção de SQL

+ +

As vulnerabilidades de injeção de SQL permitem que usuários mal-intencionados executem código SQL arbitrário em um banco de dados, permitindo que os dados sejam acessados, modificados ou excluídos, independentemente das permissões do usuário. Um ataque de injeção bem-sucedido pode falsificar identidades, criar novas identidades com direitos de administração, acessar todos os dados no servidor ou destruir/modificar os dados para torná-los inutilizáveis.

+ +

Os tipos de injeção SQL incluem injeção SQL baseada em erro, injeção SQL baseada em erros booleanos e injeção SQL baseada em tempo.

+ +

Esta vulnerabilidade está presente se a entrada do usuário que é passada para uma instrução SQL subjacente puder alterar o significado da instrução. Por exemplo, o código a seguir tem como objetivo listar todos os usuários com um nome específico (nomeUsuario) fornecido a partir de um formulário HTML:

+ +
statement = "SELECT * FROM usuarios WHERE name = '" + nomeUsuario + "';"
+ +

Se o usuário especificar um nome real, a instrução funcionará como pretendido. No entanto, um usuário mal-intencionado pode alterar completamente o comportamento dessa instrução SQL para a nova instrução no exemplo a seguir, simplesmente especificando o texto em negrito para o nomeUsuario.

+ +
SELECT * FROM usuarios WHERE name = 'a';DROP TABLE usuarios; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

A instrução modificada cria uma instrução SQL válida que exclui a tabela de usuarios e seleciona todos os dados da tabela userinfo (que revela as informações de cada usuário). Isso funciona porque a primeira parte do texto injetado ( a';) completa a declaração original.

+ +

Para evitar esse tipo de ataque, você deve garantir que os dados do usuário passados para uma consulta SQL não possam alterar a natureza da consulta. Uma maneira de fazer isso é utilizar 'escape' em todos os caracteres na entrada do usuário que tenham um significado especial no SQL.

+ +
+

Nota: A instrução SQL trata o caractere ' como o início e o final de uma cadeia de caracteres literal. Ao colocar uma barra invertida na frente desse caractere (\'), "escapamos" do símbolo e dizemos ao SQL para tratá-lo como um caractere (apenas uma parte da string).

+
+ +

Na declaração a seguir, escapamos o caractere '. O SQL agora interpretará o nome como toda a string em negrito (que é um nome muito estranho, mas não prejudicial).

+ +
SELECT * FROM usarios WHERE name = 'a\';DROP TABLE usuarios; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Frameworks web geralmente cuidam do caractere que está escapando para você. O Django, por exemplo, garante que todos os dados do usuário passados para os conjuntos de consultas (consultas de modelo) sejam escapados.

+ +
+

Nota: Esta seção baseia-se fortemente nas informações da Wikipedia.

+
+ +

Cross-Site Request Forgery (CSRF)

+ +

Os ataques de CSRF permitem que um usuário mal-intencionado execute ações usando as credenciais de outro usuário sem o conhecimento ou consentimento desse usuário.

+ +

Esse tipo de ataque é melhor explicado por exemplo. John é um usuário mal-intencionado que sabe que um site específico permite que usuários conectados enviem dinheiro para uma conta especificada usando uma solicitação HTTP POST que inclui o nome da conta e uma quantia em dinheiro. John cria um formulário que inclui seus dados bancários e uma quantia de dinheiro como campos ocultos e o envia por e-mail a outros usuários do site (com o botão Enviar, disfarçado como um link para um site "fique rico rapidamente").

+ +

Se um usuário clicar no botão enviar, uma solicitação HTTP POST será enviada ao servidor contendo os detalhes da transação e quaisquer cookies do lado do cliente que o navegador associou ao site (adicionar cookies do site associados a solicitações é um comportamento normal do navegador). O servidor irá verificar os cookies e usá-los para determinar se o usuário está ou não conectado e tem permissão para fazer a transação.

+ +

O resultado é que qualquer usuário que clicar no botão Enviar enquanto estiver conectado ao site de negociação fará a transação. John fica rico.

+ +
+

Nota: O truque aqui é que John não precisa ter acesso aos cookies do usuário (ou credenciais de acesso). O navegador do usuário armazena essas informações e as inclui automaticamente em todas as solicitações ao servidor associado.

+
+ +

Uma maneira de impedir esse tipo de ataque é o servidor exigir que as solicitações POST incluam um segredo gerado pelo site específico do usuário. O segredo seria fornecido pelo servidor ao enviar o formulário da web usado para fazer transferências. Essa abordagem impede John de criar seu próprio formulário, uma vez que ele precisaria conhecer o segredo que o servidor está fornecendo ao usuário. Mesmo se descobrisse o segredo e criasse um formulário para um usuário específico, ele não seria mais capaz de usar o mesmo formulário para atacar todos os usuários.

+ +

Frameworks web geralmente incluem esses mecanismos de prevenção para CSRF.

+ +

Outras ameaças

+ +

Outros ataques e vulnerabilidades comuns incluem:

+ + + +

Para obter uma lista abrangente das ameaças à segurança do site, consulte Categoria: explorações de segurança da Web (Wikipedia) e Categoria: Ataque (Projeto de Segurança para Aplicações Web Abertos).

+ +

Algumas mensagens-chave

+ +

Quase todas as explorações de segurança nas seções anteriores são bem-sucedidas quando a aplicação web confia nos dados do navegador. Tudo o que você fizer para melhorar a segurança do seu site, você deve limpar todos os dados originados pelo usuário antes de serem exibidos no navegador, usados em consultas SQL ou passados para um sistema operacional ou para uma chamada do sistema de arquivos.

+ +
+

Importante: A lição mais importante que você pode aprender sobre segurança do site é nunca confiar nos dados do navegador. Isso inclui, mas não se limita a dados nos parâmetros de URL de solicitações GET, POST, cabeçalhos HTTP, cookies e arquivos enviados por usuários. Sempre verifique e limpe todos os dados recebidos. Sempre assuma o pior.

+
+ +

Uma série de outras etapas concretas que você pode executar são:

+ + + +

Frameworks web podem ajudar a mitigar muitas das vulnerabilidades mais comuns.

+ +

Resumo

+ +

Este artigo explicou o conceito de segurança na web e algumas das ameaças mais comuns contra as quais o site deve tentar se proteger. Mais importante, você deve entender que uma aplicação web não pode confiar em nenhum dado do navegador. Todos os dados do usuário devem ser limpos antes de serem exibidos ou usados em consultas SQL e chamadas do sistema de arquivos.

+ +

Com este artigo, você chegou ao final deste módulo, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um Framework web e iniciar a programação.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html deleted file mode 100644 index 5c1798518d..0000000000 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: Começando com React -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Comecando_com_React -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

Neste artigo mostraremos como dizer Olá para o React. Descobriremos um pouco sobre e os casos de usos, configurar uma Reac toolchain no computador localmente, e criar e usar um app simples como partida, aprendendo um pouco sobre como o processo de React funciona.

- - - - - - - - - - - - -
Pré-requisitos: -

Familiaridade com HTML, CSS, e linguagem JavaScript, conhecimento de terminal/linha de comandos.

- -

React usa a sintaxe HTML-in-JavaScript com o nome JSX (JavaScript e XML). Familiaridade em ambos HTML e JavaScript ajudará aprender JSX, e identificar melhor se os erros na sua aplicação estão relacionado ao JavaScript ou na parte especifíca do React.

-
Objetivo:Configurar um ambiente local de desenvolvimento React, criar o primeiro app e entender o básico de como as coisas funcionam.
- -

Olá, React

- -

Segundo seu slogan oficial, React é uma biblioteca para construção de interfaces de usuário. React não é um framework – nem mesmo é exclusivo para web. É utilizado com outras bibliotecas para renderização em certos ambientes. Por exemplo, React Native pode ser usado para construção de aplicativos móveis; React 360 pode ser usado para construir aplicações de realidade virtual; e muitas outras possibilidades.

- -

Para construir para web, desenvolvedores usam React em conjunto com ReactDOM. React e ReactDOM são frequentemente discutidos nos mesmos espaços e utlizados para resolver os mesmos problemas como outros arcabouços(frameworks). Quando referimos React como "arcabouço"(framework) estamos trabalhando com o termo/entendimento coloquial.

- -

A meta primária do React é minimizar os erros que ocorrem quando os desenvolvedores estão construindo UIs(User Interface). Isto é devido ao uso de componentes - autocontidos, partes lógicas de códigos que descrevem uma parte da interface do usuário. Estes componentes são adicionados para criar uma UI completa e o React concentra muito do trabalho de renderizar, proporcionando que se concentre no projeto de UI.

- -

Casos de uso

- -

Diferente de outros frameworks comentados neste módulo, React não implementa regras restritas no código como convenções ou organizações de arquivos. Isto permite que times criem convenções próprias que melhor se adequem e para adotar o React do jeito que desejar. React pode manusear um botão único, poucas partes da interface ou a interface inteira de um app.

- -

Enquanto React pode ser utilizado por pequenos pedaços de interface e não "cai" em uma aplicação com uma biblioteca como jQuery ou até mesmo como um framework como Vue - é mais acessível quando você constrói todo o app com React.

- -

Além disso, muitos dos beneficios da experiencias de desenvolvimento de uma aplicação React, tais como escrever interfaces com JSX, requerem um processo de compilação. Adicionar um compilador como o Babel em um website faz o código funcionar lentamente, então os desenvolvedores geralmente configuram algumas ferramentas para fazer compilações em etapas. React, sem duvídas, tem um grande ecossistema de ferramentas, mas isso pode ser aprendido.

- -

Este artigo será focado no caso de uso do React para renderizar toda a interface do usuario de um aplicativo, usando ferramentas fornecidas pelo prórpio create-react-app do Facebook.

- -

Como React usa Javascript?

- -

React utiliza características de Javascript moderno para muitos de seus padrões. O maior desvio do React para o JavaScript dá-se pela utilização sintaxe JSX. O JSX estende a sintaxe padrão do Javascript hablitando-o a utilizar código similar a HTML que pode viver lado a lado ao JSX. Por exemplo:

- -
const heading = <h1> Mozilla Developer Network</h1>;
- -

A constante heading acima é conhecida como uma expressão JSX. React pode utilizá-la para renderizar a tag <h1> em nosso aplicativo.

- -

Suponha que quiséssemos conter nosso cabeçalho em uma tag <header>, por razões semânticas? A aproximação em JSX permite-nos aninhar nossos elementos dentro uns dos outros, do mesmo jeito que fazemos com o HTML:

- -
const header = (
-  <header>
-    <h1>Mozilla Developer Network</h1>
-  </header>
-);
- -
-

Note: Os parenteses no recorte de código anterior não são exclusivos ao JSX e não têm nenhum efeito na sua aplicação. Eles estão lá para sinalizar para você (e seu computador) que as múltiplas linhas de código dentro do mesmo são parte da mesma expressão. Você poderia muito bem escrever a expressão do cabeçalho do seguinte jeito:

- -
const header = <header>
-    <h1>Mozilla Developer Network</h1>
-</header>
- -

Entretanto, isso é meio estranho, porquê a tag <header>  que inicia a expressão não está alinhada na mesma posição que sua tag de fechamento correspondente.

-
- -

Claro, seu navegador não é capaz de ler o JSX sem alguma ajuda. Quando compilado (utilizando uma ferramenta como Babel ou Parcel ), nossa expressão de cabeçalho ficaria assim:

- -
const header = React.createElement("header", null,
-  React.createElement("h1", null, "Mozilla Developer Network")
-);
- -

É possível pular o processo de compilação e utilizar React.createElement() para escrever sua UI você mesmo. Ao fazer isso, entretanto, você perde o benefício declarativo do JSX, e seu código torna-se mais difícil de ler. Compilação é um passo adicional no processo de desenvolvimento, porém muitos desenvolvedores na comunidade do React acham que a legibilidade do JSX vale a pena. Ainda mais, ferramentas populares fazem a parte de compilar JSX-para-Javascript parte do próprio processo de configuração. Você não vai ter que configurar a compilação você mesmo, a não ser que você queira.

- -

Por conta do JSX ser uma mistura de HTML e Javascript, muitos desenvolvedores acham o JSX intuitivo. Outros dizem que a natureza mista torna o mesmo mais confuso. Entretanto, assim que você estiver confortável com o JSX, este irá permitir que você construa interfaces de usuários mais rapidamente e intuitivamente, e permitirá que outros melhor entendam seu código com apenas algumas olhadas.

- -

Para ler mais sobre o JSX, confira este artigo do time do React, JSX In Depth.

- -

Configurando seu primeiro app React

- -

Existem muitos jeitos de utilizar o React, mas nós iremos utilizar a ferramenta de interface da linha de comando (ILC), create-react-app, como mencionado anteriormente, que acelera o processo de desenvolvimento da aplicação em React instalando alguns pacotes e criando alguns arquivos para você, lidando com os processos de automação mencionados acima.

- -

É possível adicionar React á um website sem create-react-app copiando alguns elementos <script> em um arquivo HTML, mas o a interface de linha de comando create-react-app é um ponto de partida comum para aplicações em React. Utilizar-lo vai permitir que você passe mais tempo construindo seu aplicativo e menos tempo incomodando-se com configurações.

- -

Requisitos

- -

Para começar a utilizar o create-react-app, você precisa ter o Node.js instalado. É recomendado que você utilize a versão com suporte de longa data (SLT). Node inclui o npm (o gerenciador de pacotes node), e o npx (o executador de pacotes do node).

- -

Você também pode utilizar o gerenciador de pacotes Yarn como uma alternativa, mas nós iremos assumir que você está utilizando o npm para esta série de tutoriais. Veja Gerenciador de pacotes - básico para mais informações sobre o npm ou o Yarn.

- -

Se você está utilizando o Windows, você vai precisar instalar alguns softwares adicionais para que você tenha as mesmas capacidades de um terminal Unix/macOS e utilizar os comandos de terminal que serão mencionados neste tutorial. Gitbash (que vem junto como parte do pacote de ferramentas Git para o Windows ) ou o subsistema Windows para Linux (WSL) ambos são adequados. Veja o Curso intensivo - Linha de comando para mais informações sobre estes e sobre comandos de terminal no geral.
-  

- -

Mantenha em mente também que React e ReactDOM produzem aplicativos que funcionam apenas em navegadores consideravelmente modernos, IE9+ (Internet Explorer 9) com o auxílio de alguns polyfills. É recomendado que você utilize um navegador moderno com o Firefox, Safari ou Chrome enquanto estiver trabalhando nestes tutoriais.

- -

Veja também os seguintes artigos para mais informações:

- - - -

Inicializando seu app

- -

O create-react-app leva apenas um argumento: o nome que você quer dar ao seu aplicativo. create-react-app utiliza este nome para criar uma nova pasta, e então cria os arquivos necessários para o funcionamento do seu aplicativo dentro desta pasta. Certifique-se de utilizar o comando cd até o local em seu computador que você deseja que seu aplicativo viva dentro de seu disco rígido, feito isso, utilize o seguinte comando em seu terminal:

- -
npx create-react-app moz-todo-react
- -

Isto criará a pasta moz-todo-react, e também faz mais algumas coisas dentro desta:

- - - -
-

Nota: Se você tem o gerenciador de pacotes Yarn instalado, create-react-app vai utilizá-lo por padrão em vez de utilizar o npm. Se você tem ambos gerenciadores de pacotes instalados e explicitamente quer utilizar o NPM, você pode adicionar a opção --use-npm quando você executar o create-react-app:

- -
npx create-react-app moz-todo-react --use-npm
-
- -

create-react-app vai mostrar várias mensagens em seu terminal enquanto ele trabalha; isto é normal! Isso pode levar alguns minutos, agora pode ser uma boa hora para ir preparar uma xícara de chá.

- -

Quando o processo finalizar, dê um cd para dentro da pasta moz-todo-react e execute o comando npm start. Os scripts instalados pelo create-react-app vão começar a serem servidos em um servidor local, no endereço localhost:3000, e abrirão o aplicativo em uma nova aba em seu navegador. Seu navegador vai mostrar algo como isto:

- -

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

- -

Estrutura da aplicação

- -

create-react-app dá para você tudo que você precisa para desenvolver uma aplicação React. A estrutura inicial do arquivo vai ficar assim:

- -
moz-todo-react
-├── README.md
-├── node_modules
-├── package.json
-├── package-lock.json
-├── .gitignore
-├── public
-│   ├── favicon.ico
-│   ├── index.html
-│   └── manifest.json
-└── src
-    ├── App.css
-    ├── App.js
-    ├── App.test.js
-    ├── index.css
-    ├── index.js
-    ├── logo.svg
-    └── serviceWorker.js
- -

A pasta src é onde nós iremos ficar a maior parte do nosso tempo, é onde o código fonte da nossa aplicação vive.

- -

A pasta public contém arquivos que serão lidos pelo navegador enquanto você desenvolve o aplicativo; o mais importante de todos estes arquivos é o index.html. O React irá injetar seu código neste arquivo para que seu navegador possa executá-lo. Existem outras marcações que ajudam o create-react-app a funcionar, então cuidado para não editar estas, a não ser que você saiba o que você está fazendo. Você é encorajado a mudar o texto dentro do elemento <title> neste arquivo, esta mudança irá refletir no título de sua aplicação. Títulos de páginas precisos são importante para acessibilidade!

- -

A pasta public também será publicada quando você construir e lançar uma versão de produção de seu aplicativo. Nós não cobriremos lançamento (deploy) de aplicações neste tutorial, entretanto você provavelmente conseguirá implementar uma solução similar para isso descrito em nosso tutorial Lançando nosso app.

- -

O arquivo package.json contém informação sobre nosso projeto que o Node.js/npm use para manté-lo organizado. Esse arquivo não é exclusivo para aplicações em React; o create-react-app simplesmente encarregasse de popular este. Você não precisa entender este arquivo para completar este tutorial, entretanto, se você estiver interessado em aprender mais sobre este, você pode ler O que é o arquivo 'package.json'? no NodeJS.org; nós também falamos sobre ele no nosso tutorial Básico sobre gerenciamento de pacotes.

- -

Explorando seu primeiro componente React — <App/>

- -

No React, um componente é um módulo reutilizável que renderiza parte de nosso aplicativo. Estas partes podem ser grandes ou pequenas, mas elas geralmente são claramente definidas: elas servem um único propósito, um propósito óbvio.

- -

Vamos o arquivo src/App.js dado que nosso navegador está nos instigando a editá-lo. Esse arquivo contém nosso primeiro componente, App, e algumas outras linhas de código.

- -
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-export default App;
- -

O arquivo App.js consiste de três partes principais: algumas declarações de import no topo, o componente App no meio, e uma declaração de export na parte de baixo. A maioria dos componentes React segue este padrão.

- -

Declarações de import

- -

As declaração de import no topo de nosso arquivo App.js nos permitem utilizar código que foi definido em outro lugar fora de nosso arquivo. Vamos dar uma olhada nestas declarações mais de perto.

- -
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
- -

A primeira declaração importa a própria biblioteca React mesmo. Por conta do React transformar o JSX que nós escrevemos em declarações de React.createElement(), todos componentes React devem importar o módulo React. Se você pular este passo, sua aplicação irá resultar em um erro.

- -

A segunda declaração importa um logo de .'/logo.svg. Note que o ./ no começo do caminho e a extensão .svg no final — estes nos falam que o arquivo é local e que não é um arquivo de Javascript. De fato, o arquivo logo.svg vive em nossa pasta base.

- -

Nós não escrevemos um caminho ou extensão quando importando o módulo React — este não é um arquivo local; em vez disso, este é listado como uma dependência em nosso arquivo package.json. Tome cuidado com esta distinção enquanto você trabalha nesta lição!

- -

A terceira declaração importa o CSS relacionado ao nosso componente App. Note que não existe um nome de variável e também não há a diretriz from. Essa declaração de import em particular não é nativa à sintaxe de módulos do Javascript — esta vem do Webpack, a ferramenta que o aplicativo create-react-app utiliza para agrupar todos nosso arquivos de Javascript e servi-los ao navegador.

- -

O componente App

- -

Depois dos imports, nós temos uma função chamada App. Enquanto a maior parte da nossa comunidade Javascript prefere nomes utilizando o padrão camel-case como helloWorld, os componentes React utilizam o padrão de formatação para variáveis em pascal-case, como HelloWorld, para ficar claro que um dado elemento JSX é um componente React e não apenas uma tag de HTML comum. Se você mudasse o nome da função App para app o seu navegador iria mostrar um erro.

- -

Vamos dar uma olhada em App mais de perto.

- -
function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
- -

A função App retrona uma expressão JSX. Essa expressão define o que, no fim, o seu navegador irá renderizar para o DOM.

- -

Alguns elementos na expressão têm atributos, que são escritos assim como no HTML, seguindo o seguinte padrão de atributo="valor". Na linha 3, a tag <div> de abertaura tem o atributo className. Isso é o mesmo que o atributo class no HTML, porém por conta do JSX ser Javascript, nós não podemos utilizar a palavra class - esta é reservada, isso quer dizer que o Javascript já utiliza-a para um propósito específico e causaria problemas no nosso código inseri-lá aqui. Alguns outros atributos de HTML são escritos diferentes em JSX em comparação com o HTML, pela mesma razão. Nós falaremos sobre estes quando encontrarmos os mesmos.

- -

Tome um momento para mudar a tag <p> na linha 6 para que esta diga "Hello, world!", e então salve o arquivo. Você irá notar que esta mudança é imediatamente refletida e renderiza no servidor de desenvolvimento executando em http://localhost:3000 em seu navegador. Agora delete a tag <a> e salve; o link "Learn React" vai desaparecer.

- -

Seu componente App deve estar assim agora:

- -
function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, World!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Declarações export

- -

Bem no final do seu arquivo App.js, a declaração export default App faz com que seu componente App esteja disponível para outros módulos.

- -

Interrogando o index

- -

Vamos abrir src/index.js, porque é onde nosso componente App está sendo utilizado. Esse arquivo é o ponto de entrada para nosso aplicativo, e inicialmente parece-se assim:

- -
import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
- -

Assim como em App.js, o arquivo começa importando todos os módulos de JS (Javascript) e outros recursos que precisa executar. src/index.css contém estilos globais (CSS) que são aplicados em todo nosso aplicativo. Nós podemos também ver nosso componente App importado aqui; este é disponibilizado para ser importado graças à declaração de export no final do nosso arquivo App.js.

- -

A linha 7 invoca a função ReactDOM.render() com dois argumentos:

- - - -

Tudo isso diz para o React que nós queremos renderizar nossa aplicação React como o componente App como a raíz do app, ou o primeiro componente.

- -
-

Nota: No JSX, componentes React e elementos HTML precisam ser barras de fechamento. Escrever apenas <App> ou apenas <img> irá causar um erro.

-
- -

Service workers são pedaços interessantes de código que ajudam a perfomance da aplicação e permitem a utilização de algumas características de sua aplicação de web a funcionarem offline, porém estes não estão no escopo deste artigo. Você pode deletar a linha 5, como também as linhas 9 até a 12.

- -

Seu arquivo index.js final deve estar assim:

- -
import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
- -

Variáveis e props

- -

A seguir, nós usaremos algumas de nossas habilidades de JavaScript para ficarmos mais confortáveis editando componentes e trabalhando com dados no React. Nós falaremos sobre como variáveis são utilizadas dentro do JSX, introduziremos props, que são por si uma forma de passar dados para um componente (que então podem ser acessadas utilizando-se de variáveis).

- -

Variáveis no JSX

- -

De volta ao App.js vamos focar na linha 9:

- -
<img src={logo} className="App-logo" alt="logo" />
- -

Aqui, na tag <img /> o atributo src está entre chaves ( { } ). É assim que o JSX reconhece variáveis. React irá ver {logo}, saberá que você está referindo-se ao import do logo na linha 2 do nosso aplicativo, e então buscar o arquivo logo e renderizá-lo.

- -

Vamos tentar fazer uma variável própria. Antes da declaração de return de App adicione const subject = 'React';. Seu componente App deve estar assim agora:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, World!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Muda a linha 8 para usar a nossa variável subject em vez da palavra "world", desta forma:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, {subject}!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Quando você salvar, seu navegador deverá mostrar "Hello, React!", em vez de mostrar "Hello, world!"

- -

Variáveis são conveniente, mas esta que nós definimos não faz jus aos ótimos recursos do React. É aí que entram as props.

- -

props de Componentes

- -

Uma prop é qualquer dado passado para um componente React. Props são escritos dentro de invocações de componentes e utilizam a mesma sintaxe que atributos de HTML - prop="valor". Vamos abrir o index.js e dar à nossa invocação do <App/> nossa primeira prop.

- -

Adicione a prop subject para a invocação do componente <App/>, com o valor de Clarice. Quando você terminar, seu código deve estar assim:

- -
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
- -

De volta ao App.js, vamos revisitar a própria função App, que é lida da seuginte forma ( com a declaração de return encurtada, a fim de ser breve.)

- -
function App() {
-  const subject = "React";
-  return (
-    // return statement
-  );
-}
- -

Mude a definação da nossa função App para que aceite props como um parâmetro. Assim como qualquer outro parâmetro, você pode colocar props em um console.log() para ler o que este contém no console de seu navegador. Vá em frente e faça justamente isto depois da sua constante subject porém antes da sua declaração de return, da seguinte forma:

- -
function App(props) {
-  const subject = "React";
-  console.log(props);
-  return (
-    // return statement
-  );
-}
- -

Salve seu arquivo e dê uma olhada no console do navegador. Você deve ver algo assim nos logs:

- -
Object { subject: "Clarice" }
- -

A propriedade subjet deste objeto corresponde à prop subject que nós adicionamos à nossa chamada do componente <App /> , e a string Clarice corresponde ao seu valor. props de coponentes no React são sempre coletadas em objetos neste mesmo estilo.

- -

Agora que subjet é uma de nossas props, vamos utilizá-la em App.js. Mude a constante subject para que, em vez de ler a string que diz React, você está lendo o valor de props.subject. Você também pode deletar o console.log(), se você quiser.

- -
function App(props) {
-  const subject = props.subject;
-  return (
-    // return statement
-  );
-}
- -

Quando você salvar o arquivo, o aplicativo agora deve dizer "Hello, Clarice!". Se você retornar ao index.js, editar o valor de subject e salvar, seu texto irá mudar.

- -

Sumário

- -

Isto nos traz ao fim da nossa primeira olhada no React, incluindo como instalá-lo localmente, criando um aplicativo inicial e como os básicos funcionam. No próximo artigo nós começaremos construindo nossa primeira aplicação de verdade — uma lista de afazeres. Antes de fazermos isso, entretanto, vamos relembrar algumas coisas que aprendemos.

- -

No React

- - - -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

Neste módulo

- - diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html new file mode 100644 index 0000000000..5c1798518d --- /dev/null +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -0,0 +1,461 @@ +--- +title: Começando com React +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Comecando_com_React +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Neste artigo mostraremos como dizer Olá para o React. Descobriremos um pouco sobre e os casos de usos, configurar uma Reac toolchain no computador localmente, e criar e usar um app simples como partida, aprendendo um pouco sobre como o processo de React funciona.

+ + + + + + + + + + + + +
Pré-requisitos: +

Familiaridade com HTML, CSS, e linguagem JavaScript, conhecimento de terminal/linha de comandos.

+ +

React usa a sintaxe HTML-in-JavaScript com o nome JSX (JavaScript e XML). Familiaridade em ambos HTML e JavaScript ajudará aprender JSX, e identificar melhor se os erros na sua aplicação estão relacionado ao JavaScript ou na parte especifíca do React.

+
Objetivo:Configurar um ambiente local de desenvolvimento React, criar o primeiro app e entender o básico de como as coisas funcionam.
+ +

Olá, React

+ +

Segundo seu slogan oficial, React é uma biblioteca para construção de interfaces de usuário. React não é um framework – nem mesmo é exclusivo para web. É utilizado com outras bibliotecas para renderização em certos ambientes. Por exemplo, React Native pode ser usado para construção de aplicativos móveis; React 360 pode ser usado para construir aplicações de realidade virtual; e muitas outras possibilidades.

+ +

Para construir para web, desenvolvedores usam React em conjunto com ReactDOM. React e ReactDOM são frequentemente discutidos nos mesmos espaços e utlizados para resolver os mesmos problemas como outros arcabouços(frameworks). Quando referimos React como "arcabouço"(framework) estamos trabalhando com o termo/entendimento coloquial.

+ +

A meta primária do React é minimizar os erros que ocorrem quando os desenvolvedores estão construindo UIs(User Interface). Isto é devido ao uso de componentes - autocontidos, partes lógicas de códigos que descrevem uma parte da interface do usuário. Estes componentes são adicionados para criar uma UI completa e o React concentra muito do trabalho de renderizar, proporcionando que se concentre no projeto de UI.

+ +

Casos de uso

+ +

Diferente de outros frameworks comentados neste módulo, React não implementa regras restritas no código como convenções ou organizações de arquivos. Isto permite que times criem convenções próprias que melhor se adequem e para adotar o React do jeito que desejar. React pode manusear um botão único, poucas partes da interface ou a interface inteira de um app.

+ +

Enquanto React pode ser utilizado por pequenos pedaços de interface e não "cai" em uma aplicação com uma biblioteca como jQuery ou até mesmo como um framework como Vue - é mais acessível quando você constrói todo o app com React.

+ +

Além disso, muitos dos beneficios da experiencias de desenvolvimento de uma aplicação React, tais como escrever interfaces com JSX, requerem um processo de compilação. Adicionar um compilador como o Babel em um website faz o código funcionar lentamente, então os desenvolvedores geralmente configuram algumas ferramentas para fazer compilações em etapas. React, sem duvídas, tem um grande ecossistema de ferramentas, mas isso pode ser aprendido.

+ +

Este artigo será focado no caso de uso do React para renderizar toda a interface do usuario de um aplicativo, usando ferramentas fornecidas pelo prórpio create-react-app do Facebook.

+ +

Como React usa Javascript?

+ +

React utiliza características de Javascript moderno para muitos de seus padrões. O maior desvio do React para o JavaScript dá-se pela utilização sintaxe JSX. O JSX estende a sintaxe padrão do Javascript hablitando-o a utilizar código similar a HTML que pode viver lado a lado ao JSX. Por exemplo:

+ +
const heading = <h1> Mozilla Developer Network</h1>;
+ +

A constante heading acima é conhecida como uma expressão JSX. React pode utilizá-la para renderizar a tag <h1> em nosso aplicativo.

+ +

Suponha que quiséssemos conter nosso cabeçalho em uma tag <header>, por razões semânticas? A aproximação em JSX permite-nos aninhar nossos elementos dentro uns dos outros, do mesmo jeito que fazemos com o HTML:

+ +
const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+ +
+

Note: Os parenteses no recorte de código anterior não são exclusivos ao JSX e não têm nenhum efeito na sua aplicação. Eles estão lá para sinalizar para você (e seu computador) que as múltiplas linhas de código dentro do mesmo são parte da mesma expressão. Você poderia muito bem escrever a expressão do cabeçalho do seguinte jeito:

+ +
const header = <header>
+    <h1>Mozilla Developer Network</h1>
+</header>
+ +

Entretanto, isso é meio estranho, porquê a tag <header>  que inicia a expressão não está alinhada na mesma posição que sua tag de fechamento correspondente.

+
+ +

Claro, seu navegador não é capaz de ler o JSX sem alguma ajuda. Quando compilado (utilizando uma ferramenta como Babel ou Parcel ), nossa expressão de cabeçalho ficaria assim:

+ +
const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);
+ +

É possível pular o processo de compilação e utilizar React.createElement() para escrever sua UI você mesmo. Ao fazer isso, entretanto, você perde o benefício declarativo do JSX, e seu código torna-se mais difícil de ler. Compilação é um passo adicional no processo de desenvolvimento, porém muitos desenvolvedores na comunidade do React acham que a legibilidade do JSX vale a pena. Ainda mais, ferramentas populares fazem a parte de compilar JSX-para-Javascript parte do próprio processo de configuração. Você não vai ter que configurar a compilação você mesmo, a não ser que você queira.

+ +

Por conta do JSX ser uma mistura de HTML e Javascript, muitos desenvolvedores acham o JSX intuitivo. Outros dizem que a natureza mista torna o mesmo mais confuso. Entretanto, assim que você estiver confortável com o JSX, este irá permitir que você construa interfaces de usuários mais rapidamente e intuitivamente, e permitirá que outros melhor entendam seu código com apenas algumas olhadas.

+ +

Para ler mais sobre o JSX, confira este artigo do time do React, JSX In Depth.

+ +

Configurando seu primeiro app React

+ +

Existem muitos jeitos de utilizar o React, mas nós iremos utilizar a ferramenta de interface da linha de comando (ILC), create-react-app, como mencionado anteriormente, que acelera o processo de desenvolvimento da aplicação em React instalando alguns pacotes e criando alguns arquivos para você, lidando com os processos de automação mencionados acima.

+ +

É possível adicionar React á um website sem create-react-app copiando alguns elementos <script> em um arquivo HTML, mas o a interface de linha de comando create-react-app é um ponto de partida comum para aplicações em React. Utilizar-lo vai permitir que você passe mais tempo construindo seu aplicativo e menos tempo incomodando-se com configurações.

+ +

Requisitos

+ +

Para começar a utilizar o create-react-app, você precisa ter o Node.js instalado. É recomendado que você utilize a versão com suporte de longa data (SLT). Node inclui o npm (o gerenciador de pacotes node), e o npx (o executador de pacotes do node).

+ +

Você também pode utilizar o gerenciador de pacotes Yarn como uma alternativa, mas nós iremos assumir que você está utilizando o npm para esta série de tutoriais. Veja Gerenciador de pacotes - básico para mais informações sobre o npm ou o Yarn.

+ +

Se você está utilizando o Windows, você vai precisar instalar alguns softwares adicionais para que você tenha as mesmas capacidades de um terminal Unix/macOS e utilizar os comandos de terminal que serão mencionados neste tutorial. Gitbash (que vem junto como parte do pacote de ferramentas Git para o Windows ) ou o subsistema Windows para Linux (WSL) ambos são adequados. Veja o Curso intensivo - Linha de comando para mais informações sobre estes e sobre comandos de terminal no geral.
+  

+ +

Mantenha em mente também que React e ReactDOM produzem aplicativos que funcionam apenas em navegadores consideravelmente modernos, IE9+ (Internet Explorer 9) com o auxílio de alguns polyfills. É recomendado que você utilize um navegador moderno com o Firefox, Safari ou Chrome enquanto estiver trabalhando nestes tutoriais.

+ +

Veja também os seguintes artigos para mais informações:

+ + + +

Inicializando seu app

+ +

O create-react-app leva apenas um argumento: o nome que você quer dar ao seu aplicativo. create-react-app utiliza este nome para criar uma nova pasta, e então cria os arquivos necessários para o funcionamento do seu aplicativo dentro desta pasta. Certifique-se de utilizar o comando cd até o local em seu computador que você deseja que seu aplicativo viva dentro de seu disco rígido, feito isso, utilize o seguinte comando em seu terminal:

+ +
npx create-react-app moz-todo-react
+ +

Isto criará a pasta moz-todo-react, e também faz mais algumas coisas dentro desta:

+ + + +
+

Nota: Se você tem o gerenciador de pacotes Yarn instalado, create-react-app vai utilizá-lo por padrão em vez de utilizar o npm. Se você tem ambos gerenciadores de pacotes instalados e explicitamente quer utilizar o NPM, você pode adicionar a opção --use-npm quando você executar o create-react-app:

+ +
npx create-react-app moz-todo-react --use-npm
+
+ +

create-react-app vai mostrar várias mensagens em seu terminal enquanto ele trabalha; isto é normal! Isso pode levar alguns minutos, agora pode ser uma boa hora para ir preparar uma xícara de chá.

+ +

Quando o processo finalizar, dê um cd para dentro da pasta moz-todo-react e execute o comando npm start. Os scripts instalados pelo create-react-app vão começar a serem servidos em um servidor local, no endereço localhost:3000, e abrirão o aplicativo em uma nova aba em seu navegador. Seu navegador vai mostrar algo como isto:

+ +

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

+ +

Estrutura da aplicação

+ +

create-react-app dá para você tudo que você precisa para desenvolver uma aplicação React. A estrutura inicial do arquivo vai ficar assim:

+ +
moz-todo-react
+├── README.md
+├── node_modules
+├── package.json
+├── package-lock.json
+├── .gitignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.css
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js
+ +

A pasta src é onde nós iremos ficar a maior parte do nosso tempo, é onde o código fonte da nossa aplicação vive.

+ +

A pasta public contém arquivos que serão lidos pelo navegador enquanto você desenvolve o aplicativo; o mais importante de todos estes arquivos é o index.html. O React irá injetar seu código neste arquivo para que seu navegador possa executá-lo. Existem outras marcações que ajudam o create-react-app a funcionar, então cuidado para não editar estas, a não ser que você saiba o que você está fazendo. Você é encorajado a mudar o texto dentro do elemento <title> neste arquivo, esta mudança irá refletir no título de sua aplicação. Títulos de páginas precisos são importante para acessibilidade!

+ +

A pasta public também será publicada quando você construir e lançar uma versão de produção de seu aplicativo. Nós não cobriremos lançamento (deploy) de aplicações neste tutorial, entretanto você provavelmente conseguirá implementar uma solução similar para isso descrito em nosso tutorial Lançando nosso app.

+ +

O arquivo package.json contém informação sobre nosso projeto que o Node.js/npm use para manté-lo organizado. Esse arquivo não é exclusivo para aplicações em React; o create-react-app simplesmente encarregasse de popular este. Você não precisa entender este arquivo para completar este tutorial, entretanto, se você estiver interessado em aprender mais sobre este, você pode ler O que é o arquivo 'package.json'? no NodeJS.org; nós também falamos sobre ele no nosso tutorial Básico sobre gerenciamento de pacotes.

+ +

Explorando seu primeiro componente React — <App/>

+ +

No React, um componente é um módulo reutilizável que renderiza parte de nosso aplicativo. Estas partes podem ser grandes ou pequenas, mas elas geralmente são claramente definidas: elas servem um único propósito, um propósito óbvio.

+ +

Vamos o arquivo src/App.js dado que nosso navegador está nos instigando a editá-lo. Esse arquivo contém nosso primeiro componente, App, e algumas outras linhas de código.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+export default App;
+ +

O arquivo App.js consiste de três partes principais: algumas declarações de import no topo, o componente App no meio, e uma declaração de export na parte de baixo. A maioria dos componentes React segue este padrão.

+ +

Declarações de import

+ +

As declaração de import no topo de nosso arquivo App.js nos permitem utilizar código que foi definido em outro lugar fora de nosso arquivo. Vamos dar uma olhada nestas declarações mais de perto.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+ +

A primeira declaração importa a própria biblioteca React mesmo. Por conta do React transformar o JSX que nós escrevemos em declarações de React.createElement(), todos componentes React devem importar o módulo React. Se você pular este passo, sua aplicação irá resultar em um erro.

+ +

A segunda declaração importa um logo de .'/logo.svg. Note que o ./ no começo do caminho e a extensão .svg no final — estes nos falam que o arquivo é local e que não é um arquivo de Javascript. De fato, o arquivo logo.svg vive em nossa pasta base.

+ +

Nós não escrevemos um caminho ou extensão quando importando o módulo React — este não é um arquivo local; em vez disso, este é listado como uma dependência em nosso arquivo package.json. Tome cuidado com esta distinção enquanto você trabalha nesta lição!

+ +

A terceira declaração importa o CSS relacionado ao nosso componente App. Note que não existe um nome de variável e também não há a diretriz from. Essa declaração de import em particular não é nativa à sintaxe de módulos do Javascript — esta vem do Webpack, a ferramenta que o aplicativo create-react-app utiliza para agrupar todos nosso arquivos de Javascript e servi-los ao navegador.

+ +

O componente App

+ +

Depois dos imports, nós temos uma função chamada App. Enquanto a maior parte da nossa comunidade Javascript prefere nomes utilizando o padrão camel-case como helloWorld, os componentes React utilizam o padrão de formatação para variáveis em pascal-case, como HelloWorld, para ficar claro que um dado elemento JSX é um componente React e não apenas uma tag de HTML comum. Se você mudasse o nome da função App para app o seu navegador iria mostrar um erro.

+ +

Vamos dar uma olhada em App mais de perto.

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+ +

A função App retrona uma expressão JSX. Essa expressão define o que, no fim, o seu navegador irá renderizar para o DOM.

+ +

Alguns elementos na expressão têm atributos, que são escritos assim como no HTML, seguindo o seguinte padrão de atributo="valor". Na linha 3, a tag <div> de abertaura tem o atributo className. Isso é o mesmo que o atributo class no HTML, porém por conta do JSX ser Javascript, nós não podemos utilizar a palavra class - esta é reservada, isso quer dizer que o Javascript já utiliza-a para um propósito específico e causaria problemas no nosso código inseri-lá aqui. Alguns outros atributos de HTML são escritos diferentes em JSX em comparação com o HTML, pela mesma razão. Nós falaremos sobre estes quando encontrarmos os mesmos.

+ +

Tome um momento para mudar a tag <p> na linha 6 para que esta diga "Hello, world!", e então salve o arquivo. Você irá notar que esta mudança é imediatamente refletida e renderiza no servidor de desenvolvimento executando em http://localhost:3000 em seu navegador. Agora delete a tag <a> e salve; o link "Learn React" vai desaparecer.

+ +

Seu componente App deve estar assim agora:

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, World!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Declarações export

+ +

Bem no final do seu arquivo App.js, a declaração export default App faz com que seu componente App esteja disponível para outros módulos.

+ +

Interrogando o index

+ +

Vamos abrir src/index.js, porque é onde nosso componente App está sendo utilizado. Esse arquivo é o ponto de entrada para nosso aplicativo, e inicialmente parece-se assim:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+ +

Assim como em App.js, o arquivo começa importando todos os módulos de JS (Javascript) e outros recursos que precisa executar. src/index.css contém estilos globais (CSS) que são aplicados em todo nosso aplicativo. Nós podemos também ver nosso componente App importado aqui; este é disponibilizado para ser importado graças à declaração de export no final do nosso arquivo App.js.

+ +

A linha 7 invoca a função ReactDOM.render() com dois argumentos:

+ + + +

Tudo isso diz para o React que nós queremos renderizar nossa aplicação React como o componente App como a raíz do app, ou o primeiro componente.

+ +
+

Nota: No JSX, componentes React e elementos HTML precisam ser barras de fechamento. Escrever apenas <App> ou apenas <img> irá causar um erro.

+
+ +

Service workers são pedaços interessantes de código que ajudam a perfomance da aplicação e permitem a utilização de algumas características de sua aplicação de web a funcionarem offline, porém estes não estão no escopo deste artigo. Você pode deletar a linha 5, como também as linhas 9 até a 12.

+ +

Seu arquivo index.js final deve estar assim:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+ +

Variáveis e props

+ +

A seguir, nós usaremos algumas de nossas habilidades de JavaScript para ficarmos mais confortáveis editando componentes e trabalhando com dados no React. Nós falaremos sobre como variáveis são utilizadas dentro do JSX, introduziremos props, que são por si uma forma de passar dados para um componente (que então podem ser acessadas utilizando-se de variáveis).

+ +

Variáveis no JSX

+ +

De volta ao App.js vamos focar na linha 9:

+ +
<img src={logo} className="App-logo" alt="logo" />
+ +

Aqui, na tag <img /> o atributo src está entre chaves ( { } ). É assim que o JSX reconhece variáveis. React irá ver {logo}, saberá que você está referindo-se ao import do logo na linha 2 do nosso aplicativo, e então buscar o arquivo logo e renderizá-lo.

+ +

Vamos tentar fazer uma variável própria. Antes da declaração de return de App adicione const subject = 'React';. Seu componente App deve estar assim agora:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, World!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Muda a linha 8 para usar a nossa variável subject em vez da palavra "world", desta forma:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, {subject}!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Quando você salvar, seu navegador deverá mostrar "Hello, React!", em vez de mostrar "Hello, world!"

+ +

Variáveis são conveniente, mas esta que nós definimos não faz jus aos ótimos recursos do React. É aí que entram as props.

+ +

props de Componentes

+ +

Uma prop é qualquer dado passado para um componente React. Props são escritos dentro de invocações de componentes e utilizam a mesma sintaxe que atributos de HTML - prop="valor". Vamos abrir o index.js e dar à nossa invocação do <App/> nossa primeira prop.

+ +

Adicione a prop subject para a invocação do componente <App/>, com o valor de Clarice. Quando você terminar, seu código deve estar assim:

+ +
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+ +

De volta ao App.js, vamos revisitar a própria função App, que é lida da seuginte forma ( com a declaração de return encurtada, a fim de ser breve.)

+ +
function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}
+ +

Mude a definação da nossa função App para que aceite props como um parâmetro. Assim como qualquer outro parâmetro, você pode colocar props em um console.log() para ler o que este contém no console de seu navegador. Vá em frente e faça justamente isto depois da sua constante subject porém antes da sua declaração de return, da seguinte forma:

+ +
function App(props) {
+  const subject = "React";
+  console.log(props);
+  return (
+    // return statement
+  );
+}
+ +

Salve seu arquivo e dê uma olhada no console do navegador. Você deve ver algo assim nos logs:

+ +
Object { subject: "Clarice" }
+ +

A propriedade subjet deste objeto corresponde à prop subject que nós adicionamos à nossa chamada do componente <App /> , e a string Clarice corresponde ao seu valor. props de coponentes no React são sempre coletadas em objetos neste mesmo estilo.

+ +

Agora que subjet é uma de nossas props, vamos utilizá-la em App.js. Mude a constante subject para que, em vez de ler a string que diz React, você está lendo o valor de props.subject. Você também pode deletar o console.log(), se você quiser.

+ +
function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}
+ +

Quando você salvar o arquivo, o aplicativo agora deve dizer "Hello, Clarice!". Se você retornar ao index.js, editar o valor de subject e salvar, seu texto irá mudar.

+ +

Sumário

+ +

Isto nos traz ao fim da nossa primeira olhada no React, incluindo como instalá-lo localmente, criando um aplicativo inicial e como os básicos funcionam. No próximo artigo nós começaremos construindo nossa primeira aplicação de verdade — uma lista de afazeres. Antes de fazermos isso, entretanto, vamos relembrar algumas coisas que aprendemos.

+ +

No React

+ + + +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

Neste módulo

+ + diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html new file mode 100644 index 0000000000..607b876a2e --- /dev/null +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -0,0 +1,281 @@ +--- +title: Iniciando com Vue +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_iniciando +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Agora vamos apresentar o Vue, o nosso terceiro frameworks. Neste artigo, examinaremos um pouco do histórico do Vue, aprenderemos como instalá-lo e criar um novo projeto, estudaremos a estrutura de alto nível de todo o projeto e um componente individual, veremos como executar o projeto localmente e o deixaremos preparado para começar a construir o nosso exemplo.

+ + + + + + + + + + + + +
Pré-requisitos: +

Conhecimento com as liguagens HTML, CSS, e JavaScript, conhecimento do terminal/command line.

+ +

Os componentes do Vue são escritos como uma combinação de objetos JavaScript que gerenciam os dados do aplicativo e uma sintaxe de modelo baseada em HTML que é mapeada para a estrutura DOM subjacente. Para a instalação e para usar alguns dos recursos mais avançados do Vue (como simples Componentes de arquivo ou funções de renderização), você precisará de um terminal com node + npm instalados.

+
Objetivo:Para configurar um ambiente de desenvolvimento local do Vue, crie um aplicativo inicial e entenda o básico de como ele funciona.
+ +

Um Vue mais claro

+ +

O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o JQuery.

+ +

Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.

+ +

Além de permitir a integração progressiva do Vue em seus aplicativos, o Vue também fornece uma abordagem progressiva para escrever marcações. Como a maioria dos frameworks, o Vue permite criar blocos reutilizáveis de marcação por meio de componentes. Na maioria das vezes, os componentes do Vue são gravados usando uma sintaxe de modelo HTML especial. Quando você precisar de mais controle do que a sintaxe HTML permite, poderá escrever funções JSX ou JavaScript simples para definir seus componentes.

+ +

À medida que você trabalha neste tutorial, convém manter o guia do Vue e a documentação da API abertos em outras guias, para poder consultar um item se quiser obter mais informações sobre qualquer subtópico.
+ Para uma boa comparação (mas potencialmente tendenciosa) entre o Vue e muitos outros frameworks, consulte Vue Docs: Comparação com outros frameworks.

+ +

Installation

+ +

To use Vue in an existing site, you can drop one of the following <script> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.

+ + + +

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

+ +
    +
  1. Node.js 8.11+ installed.
    2. +
  2. npm or yarn.
    3. +
+ +
+

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

+
+ +

To install the CLI, run the following command in your terminal:

+ +
npm install --global @vue/cli
+ +

Or if you'd prefer to use yarn:

+ +
yarn global add @vue/cli
+ +

Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.

+ +

We’ll look at using this below.

+ +

Initializing a new project

+ +

To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:

+ +
    +
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. +
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. +
  3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
    4. +
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. +
  5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit Enter to continue.
    6. +
  6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's package.json file. Select "In dedicated config files" and push Enter.
    7. +
  7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.
    8. +
+ +

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

+ +

If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

+ +
+

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

+
+ +

Project structure

+ +

If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:

+ + + +
+

Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a views directory).

+
+ +

.vue files (single file components)

+ +

Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.

+ +

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.

+ +

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

+ +

<template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

+ +
+

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

+ +

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.

+ +
import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};
+ +
+

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

+
+ +

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.

+ +
+

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

+
+ +

Running the app locally

+ +

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a serve command to the project’s package.json file as an npm script, so you can easily run it.

+ +

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

+ +
INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   <http://localhost:8080/>
+  - Network: <http://192.168.1.9:8080/>
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.
+ +

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

+ +

default vue app render, with vue logo, welcome message, and some documentation links

+ +

Making a couple of changes

+ +

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

+ +
<img alt="Vue logo" src="./assets/logo.png">
+ +

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your App.vue file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <script> element that import and register the component:

+ +

Delete these lines now:

+ +
import HelloWorld from './components/HelloWorld.vue'
+ +
components: {
+  HelloWorld
+}
+ +

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

+ +

Let’s add a new <h1> inside <div id="app">. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:

+ +
<template>
+  <div id="app">
+    <h1>To-Do List</h1>
+  </div>
+</template>
+ +

App.vue will now show our heading, as you'd expect.

+ +

Summary

+ +

Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.

+ +

With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.

+ +

In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html deleted file mode 100644 index 607b876a2e..0000000000 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Iniciando com Vue -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_iniciando -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

Agora vamos apresentar o Vue, o nosso terceiro frameworks. Neste artigo, examinaremos um pouco do histórico do Vue, aprenderemos como instalá-lo e criar um novo projeto, estudaremos a estrutura de alto nível de todo o projeto e um componente individual, veremos como executar o projeto localmente e o deixaremos preparado para começar a construir o nosso exemplo.

- - - - - - - - - - - - -
Pré-requisitos: -

Conhecimento com as liguagens HTML, CSS, e JavaScript, conhecimento do terminal/command line.

- -

Os componentes do Vue são escritos como uma combinação de objetos JavaScript que gerenciam os dados do aplicativo e uma sintaxe de modelo baseada em HTML que é mapeada para a estrutura DOM subjacente. Para a instalação e para usar alguns dos recursos mais avançados do Vue (como simples Componentes de arquivo ou funções de renderização), você precisará de um terminal com node + npm instalados.

-
Objetivo:Para configurar um ambiente de desenvolvimento local do Vue, crie um aplicativo inicial e entenda o básico de como ele funciona.
- -

Um Vue mais claro

- -

O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o JQuery.

- -

Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.

- -

Além de permitir a integração progressiva do Vue em seus aplicativos, o Vue também fornece uma abordagem progressiva para escrever marcações. Como a maioria dos frameworks, o Vue permite criar blocos reutilizáveis de marcação por meio de componentes. Na maioria das vezes, os componentes do Vue são gravados usando uma sintaxe de modelo HTML especial. Quando você precisar de mais controle do que a sintaxe HTML permite, poderá escrever funções JSX ou JavaScript simples para definir seus componentes.

- -

À medida que você trabalha neste tutorial, convém manter o guia do Vue e a documentação da API abertos em outras guias, para poder consultar um item se quiser obter mais informações sobre qualquer subtópico.
- Para uma boa comparação (mas potencialmente tendenciosa) entre o Vue e muitos outros frameworks, consulte Vue Docs: Comparação com outros frameworks.

- -

Installation

- -

To use Vue in an existing site, you can drop one of the following <script> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.

- - - -

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

- -
    -
  1. Node.js 8.11+ installed.
    2. -
  2. npm or yarn.
    3. -
- -
-

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

-
- -

To install the CLI, run the following command in your terminal:

- -
npm install --global @vue/cli
- -

Or if you'd prefer to use yarn:

- -
yarn global add @vue/cli
- -

Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.

- -

We’ll look at using this below.

- -

Initializing a new project

- -

To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:

- -
    -
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. -
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. -
  3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
    4. -
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. -
  5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit Enter to continue.
    6. -
  6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's package.json file. Select "In dedicated config files" and push Enter.
    7. -
  7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.
    8. -
- -

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

- -

If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

- -
-

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

-
- -

Project structure

- -

If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:

- - - -
-

Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a views directory).

-
- -

.vue files (single file components)

- -

Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.

- -

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.

- -

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

- -

Let's explore this now.

- -

App.vue

- -

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

- -

<template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

- -
-

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

-
- -

<script> contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

- -

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.

- -
import HelloWorld from './components/HelloWorld.vue';
-
-export default {
-  name: 'app',
-  components: {
-    //You can register components locally here.
-    HelloWorld
-  }
-};
- -
-

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

-
- -

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.

- -
-

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

-
- -

Running the app locally

- -

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a serve command to the project’s package.json file as an npm script, so you can easily run it.

- -

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

- -
INFO  Starting development server...
-98% after emitting CopyPlugin
-
- DONE  Compiled successfully in 18121ms
-
-  App running at:
-  - Local:   <http://localhost:8080/>
-  - Network: <http://192.168.1.9:8080/>
-
-  Note that the development build is not optimized.
-  To create a production build, run npm run build.
- -

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

- -

default vue app render, with vue logo, welcome message, and some documentation links

- -

Making a couple of changes

- -

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

- -
<img alt="Vue logo" src="./assets/logo.png">
- -

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

- -

First of all delete this line:

- -
<HelloWorld msg="Welcome to Your Vue.js App"/>
- -

If you save your App.vue file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <script> element that import and register the component:

- -

Delete these lines now:

- -
import HelloWorld from './components/HelloWorld.vue'
- -
components: {
-  HelloWorld
-}
- -

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

- -

Let’s add a new <h1> inside <div id="app">. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:

- -
<template>
-  <div id="app">
-    <h1>To-Do List</h1>
-  </div>
-</template>
- -

App.vue will now show our heading, as you'd expect.

- -

Summary

- -

Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.

- -

With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.

- -

In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/pt-br/learn/tools_and_testing/index.html b/files/pt-br/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..5f1a76dbf7 --- /dev/null +++ b/files/pt-br/learn/tools_and_testing/index.html @@ -0,0 +1,45 @@ +--- +title: Ferramentas e teste +slug: Aprender/Ferramentas_e_teste +tags: + - Acessibilidade + - Aprendizagem + - Automação + - CSS + - Código + - Ferramentas + - HTML + - Iniciante + - JavaScript + - Navegadores + - Testes + - Testes do usuário + - Tópico +translation_of: Learn/Tools_and_testing +--- +
{{LearnSidebar}}
+ +

Assim que você se sentir mais confortável programando nas tecnologias web básicas (como HTML, CSS e JavaScript), e pegar mais experiência, ler mais recursos, e souber mais dicas e truques, você começará a se deparar com todos os tipos de ferramentas, de CSS e JavaScript precompilados, a automação e testes de aplicações, além de outros assuntos mais avançados. Quando seus projetos começam a crescer e a ficarem mais complexos, você irá querer começar a aproveitar mais dessas ferramentas, e a elaborar planos de testes mais confiáveis para seu código. Esta parte do aprendizado está focada em te dar o que você precisa para iniciar e tomar decisões com melhores informações.

+ +

A indústria de internet é um excitante lugar de trabalho, mas não é por ter menos problemas. Muito pelo contrário. As tecnologias básicas que usamos para construir sites estão razoavelmente estáveis agora, mas novas funcionalidades estão sendo introduzidas o tempo todo, assim como novas ferramentas — que facilitam o trabalho, e ainda são construídas usando essas mesmas tecnologias — estão constantemente aparecendo. Além disso, nós ainda precisamos ter sempre em mente que essas tecnologias devem funcionar em todos os navegadores, e ter certeza que nosso código segue as melhores práticas que permitem nossos projetos funcionarem em todos os tipos de navegadores e dispositivos que nossos usuários estão usando para navegar na internet, e ainda serem usados por pessoas com deficiência.

+ +

Saber quais ferramentas você deve utilizar pode ser um processo bem difícil, então escrevemos esses artigos para te manter informado de quais tipos de ferramentas estão disponíveis, e o que elas podem fazer pra você, e como usar as preferidas do mercado.

+ +
+

Nota: pelo fato de novas ferramentas e tecnologias aparecerem e saírem de moda o tempo todo, nós, deliberadamente, escrevemos este material para ser o mais neutro possível — queremos focar, antes de mais nada, nos tipos de tarefas gerais que essas ferramentas podem ajudar você a terminar, e endereçar ferramentas específicas o menos possível. Obviamente precisamos mostrar o uso das ferramentas para demonstrar técnicas específicas, mas que fique claro que com isso não estamos necessariamente, recomendando as ferramentas usadas nas demonstrações como as melhores, ou como único jeito, de se fazer as coisas — na maioria dos casos existem outras formas de se fazer, mas queremos dar a você a forma mais clara que funciona.

+
+ +

Caminho de aprendizado

+ +

Você realmente deve aprender os conceitos básicos de HTML, CSS e JavaScript antes de utilizar as ferramentas descritas aqui. Isto é, você precisará conhecer os principios fundamentais dessas linguagens antes de começar a debugar problemas em códigos mais complexos da internet, ou usar alguma biblioteca JavaScript, ou escrever testes e rodá-los no seu código com executores de testes, etc.

+ +

Você realmente precisa de uma base forte de conhecimento nessas tecnologias antes de ir mais além.

+ +

Módulos

+ +
+
Ferramentas de Desenvolvimento Web do Mundo Real (TBD)
+
Neste módulo, exploramos os diferentes tipos de ferramentas de desenvolvimento web disponíveis. Isso inclui revisar os tipos de tarefas mais comuns que será pedido a você para resolver, como elas se complementam no trabalho, e as melhores ferramentas disponíveis atualmente para endereçar essas tarefas.
+
Testes de navegadores
+
Este módulo olha especificamente para a área de testes de projetos web sobre diferentes navegadores web. Neste módulo, procuramos identificar seu público alvo (por exemplo, quais usuários, navegadores e dispositivos você mais precisa se preocupar?), como elaborar os testes, os principais problemas que você vai enfrentar com tipos de código diferentes e como consertar ou mitigá-los, e como usar a automação para acelerar os testes.
+
diff --git "a/files/pt-br/localiza\303\247\303\243o/index.html" "b/files/pt-br/localiza\303\247\303\243o/index.html" deleted file mode 100644 index 42a6f72865..0000000000 --- "a/files/pt-br/localiza\303\247\303\243o/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Localização -slug: Localização -translation_of: Glossary/Localization ---- -

Localização (L10n) é o processo de tradução de interfaces de software a partir de uma língua para outra e adaptá-lo para atender a uma cultura estrangeira. Esses recursos são para qualquer pessoa com interesse nos aspectos técnicos envolvidos na localização. Eles são para os desenvolvedores e todos os colaboradores.

- - - - - - - -
-

Documentação

-
-
- Localização Guia Rápido
-
- First read for volunteers wanting to start localizing.
-
- XUL Tutorial:Localization
-
- XUL Tutorial section on localizing XUL applications.
-
- Writing localizable code
-
- Best practices and guidelines for programmers to play nicely with localization.
-
- Localizing Help files
-
- How to separate content from HTML to make these files more easy to localize.
-
- Custom dialog size
-
- How to adjust window sizes to fit specific localizations.
-
- Localizing extension descriptions
-
- To localize the description of an extension (the string that shows up under extension's name in the Extensions window), you need to use a special preference key to override the description specified in your install.rdf file. This article contains instructions on how to modify this preference key.
-
- Frequently Asked Localization Questions
-
- Frequently asked questions about localization.
-
-

View All...

- 		-

Comunidade

-
    -
  • View Mozilla forums...
    • -
-

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

- - - -
-

 

diff --git a/files/pt-br/mask/index.html b/files/pt-br/mask/index.html deleted file mode 100644 index 4b7f7f52d5..0000000000 --- a/files/pt-br/mask/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: mask -slug: mask -tags: - - CSS - - Compatibilidade Mobile - - Internet - - Layout - - Referencia - - SVG - - Web - - máscaras -translation_of: Web/CSS/mask ---- -
{{CSSRef}}
- -

Resumo

- -

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

- -

{{cssinfo}}

- -

Sintaxe

- -
/* Palavra-Chave */
-mask: none;
-
-/* Valor das Imagens */
-mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
-mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
-
-/* Valores Combinados */
-mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
-mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
-mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
-
-/* Valores Globais */
-mask: inherit;
-mask: initial;
-mask: unset;
-
- -

Valores

- -

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

- -
{{csssyntax}}
- -

Exemplos

- -
.target { mask: url(#c1); }
-
-.anothertarget { mask: url(resources.svg#c1); }
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Estende-se a sua utilização para elementos HTML.
- Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Definição inicial.
- -

Compatibilidade dos Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico (para o SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}} [*]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Aplica-se a elementos HTML{{CompatNo}}{{CompatGeckoDesktop("1.9.1")}} [*]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.

- -

Veja também

- - diff --git a/files/pt-br/mdn/at_ten/index.html b/files/pt-br/mdn/at_ten/index.html new file mode 100644 index 0000000000..4955a114d4 --- /dev/null +++ b/files/pt-br/mdn/at_ten/index.html @@ -0,0 +1,40 @@ +--- +title: 10 anos de MDN +slug: dez_anos_de_MDN +tags: + - História + - MDN +translation_of: MDN_at_ten +--- +
Celebrando 10 anos documentando sua Web.
+ +
+
+

A história do MDN

+ +

No início de 2005, um pequeno time de sonhadores se propôs a criar um novo e livre recurso online contruído pela comunidade para todos os desenvolvedores Web. Sua brilhante mas inconvêncional ideia se tornou o Mozilla Developer Network— recurso essencial para todas as tecnologias Web livres. Dez anos depois, nossa comunidade global está maior do que nunca, e juntos nós ainda estamos criando documentações, amostras de código e recursos de aprendizagem para todas as tecnologias Web livres, incluindo CSS, HTML, JavaScript e tudo mais que faz a Web livre tão poderosa quanto é.

+ +

Aprenda mais about the history

+ + +

Contribuindo com o MDN

+ +

Por dez anos a comunidade do MDN tem documentado a Web livre. Desde corrigir pequenos erros a escrever uma API completamente nova todo mundo tem alguma coisa a oferecer, e nenhuma contribuição é menor ou maior que a outra. Nós temos mais de 90.000 páginas de conteúdo que tem sido escritas ou traduzidas por membros de nossa fantástica comunidade de Mozillians. Você pode se tornar um de nós.

+ +

Aprenda mais about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. 10 anos de MDN
    2. +
  2. A história do MDN
    3. +
  3. Contribuindo com o MDN
    4. +
+
diff --git a/files/pt-br/mdn/comunidade/index.html b/files/pt-br/mdn/comunidade/index.html deleted file mode 100644 index 5157192748..0000000000 --- a/files/pt-br/mdn/comunidade/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Participe da comunidade MDN -slug: MDN/Comunidade -tags: - - Comunidade - - Guia(2) - - Iniciando -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
-

A Documentação Web da MDN é mais que uma wiki: É uma comunidade de desenvolvedores trabalhando juntos para fazer do MDN um excelente material para desenvolvedores que usam as tecnologias abertas da Web.

-
- -

Adoraríamos se você contribuísse com o MDN, mas adoraríamos ainda mais se participasse da comunidade MDN. Veja como se conectar, em três passos fáceis:

- -
    -
  1. Crie uma conta no MDN.
    2. -
  2. Participe das conversas.
    3. -
  3. Siga o que está acontecendo.
    4. -
- -

Como a comunidade funciona

- -

A seguir, mais artigos que descrevem a comunidade MDN.

- -
-
-
-
Cargos da comunidade
-
Existem vários cargos dentro da comunidade MDN com responsabilidades específicas.
-
Sprints de documentação
-
Este é um guia para organizar uma sprint de documentação. Ele contém recomendações e dicas de pessoas que já organizaram sprints de documentação, para te ajudar a organizar uma também.
-
Siga o que está acontecendo
-
A MDN chega até você através da comunidade da Rede de Desenvolvedores da Mozilla. Aqui estão algumas formas das quais nós compartilhamos informações sobre o que fazemos.
-
- -
-
-
-
diff --git a/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html b/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html deleted file mode 100644 index 38d851532d..0000000000 --- a/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Trabalhando em comunidade -slug: MDN/Comunidade/Trabalhando_em_comunidade -translation_of: MDN/Community/Working_in_community ---- -
{{MDNSidebar}}
- -

Uma importante parte de contribuir com a documentação da MDN em qualquer escala significativa é saber como trabalhar como parte da comunidade MDN. Esse artigo oferece dicas sobre como você pode tirar o melhor proveito das suas interações com outros escritores e outros times de desenvolvimento.

- -

Dicas gerais de etiqueta

- -

Aqui estão algumas dicas gerais de conduta quando trabalhando na comunidade Mozilla.

- - - -

Tenha sensatez

- -

Sempre seja sensato e respeitoso quando se comunicar com os outros.

- -

Gentilmente aponte os erros

- -

Se seu propósito em contatar alguém é para pedi-los para fazer alguma coisa diferentemente, ou apontar enganos que eles estão cometendo (especialmente se eles repetidamente estão fazendo isto), inicie sua mensagem com um comentário positivo. Isto suaviza o impacto, por assim dizer, e demonstra que você está tentando ser prestativo, ao invés de definir você como o cara mau.

- -

Por exemplo, se um novo contribuidor tiver criado muitos páginas sem tags, e você gostaria de pontuar esse problema, sua mensagem para eles podem ser desta forma (o que você precisa mudar para cada caso está sublinhado):

- -
-

Oi, MrBigglesworth, eu tenho que notificar suas contribuições para a documentação da Wormhole API e isto é fantástico ter sua ajuda! Eu particularmente gosto do modo que você equilibra seu nível de detalhes com legibilidade. Dito isto, contudo, você poderia fazer estes artigos sempre melhores e mais pertinentes se adicionar as corretas tags para as páginas enquanto você elabora.

- -

Veja o MDN guia de etiquetas (https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente) para detalhes.

- -

Obrigado novamente, e aguardo suas futuras contribuições!

-
- -

Compartilhe conhecimento

- -

Assim que você participa do projeto MDN, é útil saber o que está acontecendo, e interagir com outros membros de sua comunidade. Para conversar com outros em nossa comunidade, você pode seguir e compartilhar ideias, status atualizado, e mais. Nós também temos ferramentas e informações que podem ajudar você a saber o que está sendo feito, e por quem.

- -

Canais de comunicação

- -

Há muitos caminhos que você pode engajar como membro da comunidade (como desenvolvedor ou como escritor), cada um tem algumas regras particulares de etiqueta.

- -

Bugzilla

- -

Quando escrever documentação para cobrir mudanças implementadas como um resultado de um bug no Bugzilla, você frequentemente interagirá com pessoas envolvidas naquele projeto. Seja claro para continuar o guia de etiqueta Bugzilla em mente em todas às vezes!

- -

E-mail

- -

Algumas vezes, uma troca de e-mail privado entre você e uma ou mais pessoas, é o caminho para seguir, se você possuir os endereços de e-mails deles.

- -
-

Nota: Como regra geral, se alguém postou o endereço de e-mail pessoal em documentos sobre a tecnologia que você está documentando, ou deu a você o endereço de e-mail pessoal, ou geralmente tem um endereço de e-mail bem conhecido, então o e-mail torna-se uma abordagem aceitável como "primeiro contato". Se você precisa "escavar" mais sobre o assunto, provavelmente você deve tentar obter aguma permissão no Matrix ou em uma lista de discussão primeiro, a menos que você tenha esgotado todas as outras tentativas de entrar em contato.

-
- -

Ferramenta de status de conteúdo

- -

Nós temos muitas ferramentas úteis que fornecem informações sobre o status do conteúdo da documentação.

- -
-
Painel de Controle (Dashboard ) para revisão
-
O painel de controle para revisão providencia uma ferramenta fantástica para revisar mudanças feitas para o conteúdo do MDN. Você pode ver as histórias recentes, ou escolher um período de tempo para vê-las, e filtrar resultados com base em características como localidade, nome de contribuidores, e tópicos. Uma vez que você está olhando para um conjunto de revisões, você pode ver as mudanças feitas em cada revisão, abrir rapidamente a página, ver um histórico completo ou até reverter as alterações (se você tiver esses privilégios).
-
Visão geral do status da documentação
-
Nossa visão geral do status da documentação página providencia uma lista de todas as áreas do MDN que você tem configurado pela trilha de status, com informações sobre como muitas páginas são necessárias diferentes tipos de trabalho feito. Clique através de um particular tópico de área para ver detalhadas listas de conteúdo que necessitam trabalhar, tais como páginas que não tem tags, ou são tags com indicadores que certos tipos de trabalhos necessários para ser feito. Você pode mesmo ver listas de páginas que não tem sido atualizado em um longo tempo e pode se desatualizado, tão bem quanto uma lista de bugs que tem sido sinalizado como impactante na documentação daquela área.
-
Documentação dos planos de projetos
-
Nós temos um número de projetos escritos que estão no estágio de planejamento, ou são largos e em progresso, para o qual nós temos escrito documento de planejamento para ajudar-nos a guardar a trilha daquilo que nós precisamos fazer.
-
MDN Trello board
-
The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read this page.
-
- -

A comunidade de desenvolvimento

- -

Possivelmente o mais importante relacionamento para desenvolver e manter, como um membro da comunidade de escrita do MDN, são aqueles que você desenvolve e sustenta com os desenvolvedores. Eles criam o software que nós estamos desenvolvendo, mas eles são também os mais usuais recursos de informações que nós temos. É crucial que nós mantenhamos bons relacionamentos com os desenvolvedores, pois são como você, vão responder suas questões rapidamente, precisamente, e completamente!

- -

Em adição, você representa a comunidade de escrita MDN.

- -

Por favor ajude a garantir que nós mantenhamos nosso excelente relacionamento de trabalho com a equipe dev para fazer toda a interação entre eles e a equipe de escrita seja ótima.

- -

Em uma nota de relato, um grande caminho para encontrar a pessoa certa para falar olhe nas listas dos responsáveis dos módulos.

- -

A comunidade de escrita

- -

A comunidade de escrita é muito grande. Enquanto o número de frequentes extremos, ou contribuidores de grande escala é relativamente pequeno, Há muitas dezenas ou centenas de pessoas que contribuem de vez em quando. Felizmente, estas são grandes pessoas maravilhosas com um genuíno amor da web, Mozilla, e/ou documentação, e interagem com eles e quase sempre muito bonito.

- -

Veja o artigo una a comunidade para mais informações sobre a comunidade MDN.

- -

Veja também

- - diff --git a/files/pt-br/mdn/comunidade/whats_happening/index.html b/files/pt-br/mdn/comunidade/whats_happening/index.html deleted file mode 100644 index 93783e777f..0000000000 --- a/files/pt-br/mdn/comunidade/whats_happening/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Siga o que está acontecendo -slug: MDN/Comunidade/Whats_happening -translation_of: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}

MDN is brought to you by Mozilla's Developer Engagement community. Here are some ways to that we share information about what we're doing.

- -

Blogs

- -
-
Mozilla Hacks
-
News about and in-depth coverage of Web and Mozilla technologies and features.
-
Engaging Developers
-
Promoting activity and discussion amongst the community involved in Developer Relations at Mozilla.
-
- -

Streams of ephemera

- - - -

Status boards and dashboards

- -

The MDN documentation team maintains a Trello board on which our projects are tracked. This board is read-only but will let you see what's being worked on and what we hope to do soon, and may help you figure out where you can help.

- -

In addtion, take a look at the Documentation status pages to see what's going on across the full breadth of MDN content. You'll be able to see what articles need to be written or updated, what topics need the most help, and much, much more.

- -

MDN community meetings

- -

Community meetings occur every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the #mdn IRC channel. See the MDN community meetings wiki page for agendas and notes from past meetings.

- -

The MDN Events calendar contains MDN community meetings, doc sprints, and other MDN-related events.

diff --git a/files/pt-br/mdn/contribute/collaboration_tactics/index.html b/files/pt-br/mdn/contribute/collaboration_tactics/index.html deleted file mode 100644 index 22b22715be..0000000000 --- a/files/pt-br/mdn/contribute/collaboration_tactics/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Táticas de colaboração intra equipe para documentação -slug: MDN/Contribute/Collaboration_tactics -tags: - - Documentação - - Guia(2) - - Guía - - MDN - - Projeto MDC -translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics ---- -
{{MDNSidebar}}
- -

Uma coisa que aprendemos na MDN é que quando equipes de desenvolvimento e documentação de um dado projeto, API ou tecnologia trabalham próximas uma da outra—e juntas— a documentação ganha uma qualidade inacreditável. Este guia sugere algumas táticas para que equipes de desenvolvimento e documentação trabalhem de mãos dadas.

- -
-

Nota: Este artigo é um trabalho em progresso, um documento aberto. Caso você conheça outras maneiras de integrar equipes de desenvolvimento e documentação, convidamos você à dividi-las conosco aqui!

-
- -

Integrando-se

- -

Idealmente, quando o desenvolvimento de uma nova tecnologia ou projeto são concebidos, a equipe de desenvolvimento avisa a equipe de documentação que algo novo está à caminho e precisará ser documentado. Algumas vezes não é isso que acontece, e a equipe MDN monitora a Bugzilla observando todo trabalho que precisará ser documentado, porém em um mundo perfeito, nós receberemos um aviso prévio de maneira mais direta.

- -

A melhor maneira de notificar a equipe MDN sobre um novo projeto o qual precisamos ficar cientes é preenchendo uma requisição de documentação de defeito. Fornecer uma lista de contatos em conjunto com as respectivas dúvidas é uma ótima maneira de ajudar! Incluir links para os defeitos relacionados ao projeto também é uma grande ajuda.

- -

Compartilhando informação

- -

Existem diversas maneiras úteis e diferentes de compartilhar informação. Apresentamos algumas sugestões a seguir.

- -

Defeitos

- -

Certificar-se de que a equipe de documentação está ciente dos defeitos que refletem na documentação é de grande ajuda. O uso adequado das palavras-chaves de documentação e desenvolvimento e das tags de comentários leva tempo. Consulte Atualizando documentação para mais informações.

- -

Reuniões

- -

Equipes de desenvolvimento realizam reuniões frequentemente. Sempre que possível e necessário(e muitas vezes é bastante necessário), a equipe MDN tenta enviar alguém para assistir estas reuniões. Esta é uma boa maneira de saber o que esta acontecendo, como os horários estão dispostos, e assim por diante.

- -

Além disso, os profisionais que trabalham em grandes áreas de documentação, tais como documentação de APIs Web, muitas vezes realizam reuniões para acompanhar a evolução da documentação. Estes profissionais adoram ter um desenvolvedor à disposição para participar de tais reuniões; acaba sendo incrivelmente útil para todos os envolvidos.

- -

Estas reuniões geralmente são curtas e possuem uma agenda similar a esta:

- -
    -
  1. Atualizações sobre o andamento das atividades de documentação.
    2. -
  2. Perguntas/atualizações da equipe de desenvolvimento para a equipe de documentação: pode incluir perguntas sobre a evolução de documentos específicos, informações sobre conteúdo específico que é urgentemente necessário, notas sobre problemas com conteúdo já existente, e assim por diante.
    3. -
  3. Perguntas/atualizações da equipe de documentação para a equipe de desenvolvimento: esta é uma oportunidade para a equipe de documentação perguntar sobre possíveis bugs, se alguém pode se disponibilizar para revisar algum documento específico, se há um engenheiro em específico que esteja disponível para responder perguntas sobre uma determinada API, esse tipo de coisa.
    4. -
- -

Reuniões de documentação de APIs Web  têm sido realizadas por meses em Vidyo, com grande sucesso. Cada semana, a equipe de desenvolvimento da API Web têm pelo menos um membro (e muitas vezes dois) para a reunião, e temos sido extremamente produtivos, realizando as reuiniões em 15 minutos ou menos.

- -

Semanas de trabalho

- -

Convide os responsáveis pela documentação para acompanhar a equipe de desenvolvimento em uma semana de trabalho ou reunião. Isto tem muitas vantagens, incluindo:

- - - -

Se você não sabe se existe um membro para documentação atribuído ao tópico da sua área acompanhando sua semana de trabalho, não hesite em enviar um e-mail para o líder da equipe de documentação, Eric Shepherd, e ele buscará saber se alguém poderá auxiliar. Ele buscará alguém lá (ou melhor, buscará um membro exlusivo para documentação no seu projeto)! Tenha em mente, porém, que a equipe de documentação é pequena, então encontrar alguém para acompanhar uma semana de trabalho em um curto prazo é uma tarefa complicada.

- -

Páginas de estado de documentação

- -

Grandes projetos de documentação na MDN agora utilizam páginas de estados a fim de acompanhar o que falta ser feito, e o que já foi feito, para conseguir realizar o trabalho. Tais páginas fornecem uma lista de tarefas a serem realizadas, bem como o estado de cada tarefa.

diff --git a/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html b/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html deleted file mode 100644 index 85f02f9231..0000000000 --- a/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Criando e editando páginas -slug: MDN/Contribute/criando_e_editando_paginas -tags: - - Colaborando - - Colaborar - - Contribuindo - - Criando - - Editando - - MDN - - nova pagina -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -
{{MDNSidebar}}
- -

As duas tarefas mais básicas sobre MDN que quase todo contribuinte MDN irá eventualmente executar são para editar uma página já existente ou criar uma nova. Este artigo aborda os conceitos básicos de como fazer cada uma delas.

- -

Editando uma página existente

- -

É fácil editar:

- - - -

Ver mudanças

- -

Para ver como suas mudanças ficaram:

- - - -

Tenha cuidado! Pré-visualizar uma página não salva as alterações, sendo assim, se lembre de não fechar a página que você está editando sem salvar o conteúdo.

- -

Revisão de comentário

- -

Depois que você pré-visualizou suas mudanças, você deve querer salvar sua revisão. Antes de salvar, procure pela caixa de comentários de revisão abaixo da sessão de título da página e deixe um comentário para informar a outros voluntários o que você mudou e o motivo. Por exemplo, você pode ter adicionado uma nova sessão, mudado algumas palavras para fazer a terminologia mais consistente, reescrito um parágrafo para esclarecer o idioma, ou removido informação porque é redundante.

- -

Tags

- -

Você pode adicionar ou remover tags que descrevam o conteúdo da página. Veja como adicionar tags às páginas corretamente para mais informações em que as tags se aplicam.

- -

Precisa de revisão?

- -

Se você quiser que um contribuidor experiente revise suas edições, você pode requisitar uma revisão técnica (para códigos, APIs, ou tecnologias), uma revisão editorial (textual, de gramática ou conteúdo), ou uma revisão de template (para código KumaScript) se certificando que a caixa está marcada, antes que você salve.

- -

Anexar arquivos

- -

Se você quiser anexar um arquivo a uma página para adicionar uma ilustração ou tornar o conteúdo mais claro, o anexo pode ir no final da página.

- -

Salve, descarte ou continue editando

- -

Quando você termina uma edição com seu preview, você pode salvar seu trabalho e comentários clicando no botão verde "Salvar alterações" à direita do título da página. Se você mudar de ideia, pode descartar suas edições clicando no botão vermelho "Descartar alterações", também à direita do título da página.

- -

Pressionar Enter no comentário da revisão é equivalente a clicar em "Salvar e continuar editando".

- -

Criando uma nova página

- -

Se você não sabe onde colocar seu artigo, não se preocupe sobre isso! Coloque-o em qualquer local e nós vamos encontrá-lo e movê-lo para onde ele pertence, ou mesclá-lo em conteúdo existente se for mais apropriado. Você também não precisa se preocupar sobre deixar tudo perfeito. Nós temos gnomos ajudantes felizes que vão ajudá-lo deixar seu conteúdo lindo.

- -

Há algumas maneiras de criar uma nova página:

- - - - - -

Como na maioria das wikis, na MDN é possível criar links para uma página que ainda não existe. Por exemplo, um autor pode criar uma lista de todos os membros de uma API, antes de criar as páginas para esses membros. Na MDN, links para página inexistentes geralmente são exibidos em vermelho.

- -

Para criar um link para uma "página inexistente":

- -
    -
  1. Certifique-se que você está logado na MDN. (Se você não estiver, vai receber um erro 404).
    2. -
  2. Clique no link "página inexistente". O MDN Editor UI abrirá, pronto para você criar a página inexistente.
    3. -
  3. Escreva o conteúdo da página e salve-a.
    4. -
- - - -

Para criar uma nova página sem linkar de outra página, informe o nome único de uma página na barra de endereços do seu navegador. Por exemplo, se você inserir:

- -
https://developer.mozilla.org/en-US/docs/FooBar
- -

O MDN cria uma nova página com o título "FooBar" e abre o editor para você inserir o conteúdo nessa página. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.

- -

Subpágina de uma página existente

- -

Para criar uma subpágina que você quer que seja filha de uma página existente:

- -
    -
  1. Na página "pai", clique no menu Avançado (o ícone de engrenagem na barra de ferramentas) e clique em Nova subpágina.
    2. -
  2. Digite um título para o documento no campo Título.
    3. -
  3. Mude o Slug se necessário (por exemplo, se o título for muito longo e você quiser um título menor). Esse campo é gerado automaticamente pelo editor, substituindo underlines por espaços no título. Nesse caso, você pode mudar apenas a última parte da URL do documento.
    4. -
- -

Clone de uma página existente

- -

Se houver uma página existente cujo formato você quer usar numa página nova, você pode clonar essa página e mudar seu conteúdo

- -
    -
  1. Na página original, clique no menu Avançado (o ícone de engrenagem na barra de ferramentas) e clique em Clonar essa página. O editor vai abrir para que você mude seu conteúdo.
    2. -
  2. Mude o Título da página conforme apropriado. O campo Slug é atualizado automaticamente quando você muda o campo Título.
    3. -
  3. Se necessário, mude o caminho do campo Slug para colocar o documento em uma parte diferente da hierarquia dele.
    4. -
  4. No campo TOC, selecione os níveis de cabeçalho que você quer que sejam automaticamente exibidos na tabela de conteúdo da página, ou "Sem tabela de conteúdos" se a página não precisar de uma.
    5. -
  5. Escreva o conteúdo da página e salve suas alterações. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.
    6. -
- - - -

Esse método é um pouco híbrido. Você pode criar um link em outra página, e clicar no link que você inseriu, para criar a nova página.

- -
    -
  1. Digite o nome da página nova em qualquer lugar (que faça sentido) no texto de uma página existente.
    2. -
  2. Selecione o nome e clique no ícone de link () na barra de ferramentas do editor. A caixa de diálogo para "Atualizar Link" vai abrir com o texto selecionado no campo "Linkar para".
    3. -
  3. "/pt-BR/docs/" é inserido por padrão no começo do campo URL. Insira o nome da página depois de "/pt-BR/docs/". (O nome da página não tem de ser o mesmo texto do link).
    4. -
  4. Clique em OK para criar e inserir o link.
    5. -
- -

Se a página já não existir, o link é mostrado em vermelho. Se a página já existir, o link é mostrado em azul. Se você quiser criar uma nova página mas o título da página que você quer já estiver sendo usado, verifique primeiro se não faz mais sentido ajudar a editar o conteúdo existente. Senão, pense num título diferente para sua nova página e crie um link para ela. Veja o guia para nomear páginas.

- -

Para adicionar conteúdo para sua nova página, clique no link vermelho que você acabou de criar (depois de salvar e fechar o editor). A nova página abre no modo de edição, assim você pode começar a editar o conteúdo. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.

- -

Atualizando o conteúdo da página

- -

O suporte do MDN para macros KumaScript e transclusão de conteúdo de uma página para outra pode algumas vezes ser dificultada pela necessidade de fazer um cache das páginas geradas para melhorar a performance. Páginas são feitas do seu código-fonte, e a saída é cacheada para requisições futuras. A partir de lá, quaisquer macros (templates) ou transclusões (utilizando a macro Page) na página não vão refletir mudanças feitar para o macro, a saída do macro, ou o conteúdo do material transcluso.

- - - -

Veja também

- - diff --git a/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html b/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html deleted file mode 100644 index 541d31ff6e..0000000000 --- a/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Como adicionar etiquetas às páginas corretamente -slug: MDN/Contribute/guia/Como-marcar-as-paginas-corretamente -tags: - - Contribua - - Etiquetas - - Filtro - - Glossário - - Guia(2) - - Howto - - Iniciante - - Introdução - - MDN Meta - - Tags - - Tutorial -translation_of: MDN/Contribute/Howto/Tag ---- -
{{MDNSidebar}}
{{IncludeSubnav("/pt-BR/docs/MDN")}}
- -

 As etiquetas dos artigos são uma forma importante de ajudar visitantes a encontrar o conteúdo procurado. Há muitas etiquetas usadas para ajudar a organizar as informações na MDN. Esta página vai lhe ensinar a melhor maneira de rotular as páginas, a fim de fazer com que as informações sejam organizadas, classificadas e localizadas mais facilmente. Cada página pode ser marcada por etiquetas que ajudam a classificar seu conteúdo.

- -

 Você pode encontrar uma boa ajuda quanto às etiquetas em páginas na seção 'etiquetando', em nosso guia de edição.

- -

Observe que o uso adequado de etiquetas é importante; nós estamos cada vez mais usando automação para gerar listas de conteúdo, páginas de destino e ligação cruzada de artigos. Falhar em marcar artigos corretamente (como indicado abaixo) pode impedir que os mesmos sejam listados precisamente.

- -

Métodos de marcações usadas na MDN

- -

Há muitas maneiras das etiquetas serem usadas na MDN:

- -
-
Categorização
-
Qual o tipo desse documento? É uma referência? Um tutorial? Uma página de destino? As etiquetas podem ser usadas em filtros de busca, então elas são realmente importantes!
-
Identificação de tópico
-
Que tópico esse artigo envolve? É sobre uma API? O DOM? Gráficos? Estas também são importantes, pois elas podem ser usadas em filtros de buscas.
-
Estado da tecnologia
-
Qual é o estado dessa tecnologia? Isto não é padrão? Obsoleto ou moderno? Experimental?
-
Nível de habilidade
-
Para tutoriais e guias, quão avançado é o material do artigo?
-
Metadados do documento
-
Os escritores da MDN usam rótulos que informam quais páginas precisam de melhorias e de quais tipos.
-
- -

Guia de tipos de marcação

- -

Aqui está um guia rápido sobre os tipos de etiquetas e os possíveis valores para elas.

- -

Categoria do Documento

- -

Quando você rotula um artigo com uma destas categorias, você ajuda ferramentas automáticas a gerarem mais precisamente as páginas de entrada, tabela de conteúdos e assim por diante. Nosso novo sitema de pesquisa também vai usar esses termos para que nossos visitantes possam localizar referências e guias mais fácilmente.

- -

Nós usamos os seguintes nomes de categorias como termos de etiquetamento padrão:

- -
-
{{Tag("Intro")}}
-
O artigo fornece um material introdutório sobre algum tópico. Idealmente, cada área de tecnologia deveria ter apenas uma "introdução".
-
{{Tag("Featured")}}
-
O artigo é crucial e será exibido com relevância nas páginas de entrada. Use esta etiqueta moderadamente (nunca mais do que três páginas em cada área da documentação).
-
{{Tag("Reference")}}
-
O artigo contém material de referência sobre uma API, elementos, atributos, propriedades, ou coisas semelhantes.
-
{{Tag("Landing")}}
-
Indica que esta é uma página de entrada.
-
{{Tag("Guide")}}
-
O artigo é um guia ou um tutorial.
-
{{Tag("Example")}}
-
O artigo é uma página de amostra de código, ou tem exemplos de códigos (isto é, pedaços de códigos úteis, não uma linha de "exemplo de sintaxe") .
-
- -

Tópico

- -

Ao identificar o assunto tratado por um artigo você ajuda a gerar melhores resultados de pesquisa, assim como páginas de entrada e outros auxílios de navegação.

- -

Apesar de ser permitida certa flexibilidade, ao passo que novos assuntos são identificados, preferimos que estas etiquetas tenham os mesmos nomes das APIs, ou tecnologias, demonstradas na página. Alguns exemplos:

- - - -

No geral, se uma interface que possui várias páginas relacionadas a ela, como Node (que possui várias páginas sobre seus muitos métodos e propriedades), seu nome é uma boa etiqueta para identificar um tópico, assim como o nome de uma tecnologia abragente, ou seu tipo. Uma página sobre WebGL pode ser marcada com as tags Gráficos/Graphics e WebGL, por exemplo, e uma página sobre elementos {{HTMLElement("canvas")}} pode ser marcada com as etiquetas HTML, Elementos/Element, Tela/Canvas, e Gráficos/Graphics.

- -

Estado da tecnologia

- -

Para ajudar a entender se uma tecnologia é viável ou não, nós usamos as etiquetas que descrevem em que ponto estão as suas especificações. Fazer isso não detalha tanto quanto explicar, de fato, qual é a especificação e onde, nesse processo, a tecnologia está (para isto usamos uma tabela de "Especificações"), mas ajuda os leitores a julgar, rapidamente, se usar a tecnologia descrita no artigo é, ou não, uma boa ideia.

- -

Alguns valores possíveis para estas etiquetas:

- -
-
{{Tag("Read-only")}}
-
Aplique esta etiqueta para páginas que descrevem atributos ou propriedades que são "somente leitura".
-
- -
-
{{Tag("Non-standard")}}
-
Indica que a tecnologia ou API não pertence a qualquer padrão, mas é considerada estável no(s) navegador(es) que a tem implementada. Se você não usar esta etiqueta os leitores vão presumir que o artigo é padronizado. A tabela de compatibilidade da página deve esclarecer quais navegadores suportam essa tecnologia ou API.
-
{{Tag("Deprecated")}}
-
A tecnologia ou API abrigada na página foi marcada como obsoleta na especificação e é esperado que seja, eventualmente, removida mas está, em geral, ainda presente nas versões mais recentes de navegadores.
-
{{Tag("Obsolete")}}
-
Foi decidido que a tecnologia ou API está ultrapassada e, assim, foi removida (ou está em processo de remoção) de todas as versões mais recentes de navegadores.
-
{{Tag("Experimental")}}
-
A tecnologia ou API não é padronizada, ainda é experimental e pode, ou não, vir a ser parte da especificação. Também está sujeita a alterações no mecanismo do navegador (tipicamente, apenas uma) que a implementa.
-
{{Tag("Needs Privileges")}}
-
A API requer acesso privilegiado ao aparelho no qual o código está rodando.
-
{{Tag("Certified Only")}}
-
A API funciona, apenas, em código certificado.
-
- -

Estas etiquetas não são desculpa para não inserir uma tabela de compatibilidade em seu artigo!

- -

Nível de habilidade

- -

A etiqueta de nível de habilidade é usada, apenas, em guias e tutoriais (ou seja, páginas marcadas como Guias) a fim de auxiliar quem os procura a escolher  tutoriais baseados na familiaridade com a tecnologia. Existem trés valores para esta etiqueta:

- -
-
{{Tag("Beginner")}}
-
Artigos escritos com a intenção de introduzir uma nova tecnologia, para iniciantes.
-
{{Tag("Intermediate")}}
-
Artigos para quem já tem experiência com a tecnologia, mas ainda não a domina completamente.
-
{{Tag("Advanced")}}
-
Artigos que levam ao limite as capacidades de quem lê e da tecnologia.
-
- -

Metadados do documento

- -

Os escritores da MDN usam etiquetas para identificar artigos que precisam de determinados tipos de trabalho. Segue uma lista das que mais usamos:

- -
-
{{Tag("junk")}}
-
Este artigo precisa ser deletado.
-
{{Tag("NeedsContent")}}
-
Este artigo é um esboço, ou a informação está, de alguma forma, incompleta. Esta etiqueta significa que alguém precisa revisar o conteúdo e adicionar detalhes e/ou terminar a escrita do artigo.
-
{{Tag("NeedsExample")}}
-
O artigo precisa de um ou mais exemplos para ilustrar melhor seu objetivo, de acordo com o sistema de exemplos dinâmicos.
-
{{Tag("NeedsLiveSamples")}}
-
Este arigo necessita que um, ou mais, de seus exemplos sejam modificados para incluir o uso do sistema de exemplos dinâmicos.
-
{{Tag("NeedsUpdate")}}
-
O artigo está desatualizado.
-
{{Tag("l10n:exclude")}}
-
Não vale a pena traduzir este artigo e ele não aparecerá nas páginas sobre as situações das traduções.
-
{{Tag("l10n:priority")}}
-
Este artigo é importante e deve ser visto como prioridade para os tradutores da MDN. É mostrado em uma tabela de maior importância nas páginas sobre as situações das traduções.
-
- -

Mapa Literário Web

- -

O projeto WebMaker, através do Mapa Literário para a Web, definiu as habilidades necessárias para aperfeiçoar a leitura, a escrita e a participação na Web. Nós usamos essas habilidades literárias em forma de etiquetas, na MDN, para ajudar nossos utilizadores a encontrar as melhores respostas às suas necessidades:

- -
-
{{Tag("Navigation")}}
-
Este artigo inclui informação sobre como navegar pela web.
-
{{Tag("WebMechanics")}}
-
Este artigo tem informação de como a web é organizada e como ela funciona.
-
{{Tag("Search")}}
-
Este artigo explica como localizar informação, pessoas e recursos na web.
-
{{Tag("Credibility")}}
-
A instrução neste artigo ajuda os leitores a entender como avaliar, criticamente, a informação encontrada na web.
-
{{Tag("Security")}}
-
Este artigo provê informação de como manter sistemas, identidades e conteúdo seguros.
-
{{Tag("Composing")}}
-
Este artigo explica como criar e selecionar conteúdo para a web.
-
{{Tag("Remixing")}}
-
Este artigo ensina como modificar recursos já existentes na web para criar algo novo.
-
{{Tag("Design")}}
-
Documentação sobre como aprimorar a estética visual e a experiência dos utilizadores.
-
{{Tag("Accessibility")}}
-
Documentos que descrevem como desenvolver conteúdo com acessibilidade, o que significa permitir que o máximo possível de pessoas possa acessá-lo, ainda que as suas habilidades sejam limitadas de alguma forma.
-
{{Tag("CodingScripting")}}
-
Como programar e/ou criar experiências interativas na web.
-
{{Tag("infrastructure")}}
-
Este documento explica as partes técnicas da internete.
-
{{Tag("Sharing")}}
-
O conteúdo deste artigo fala sobre as várias maneiras de criar recursos com outras pessoas.
-
{{Tag("Collaborating")}}
-
Este artigo provê informação de como trabalhar em conjunto com outras pessoas.
-
{{Tag("Community")}}
-
Este artigo detalha como se envolver com as comunidades da Web e entender como elas funcionam.
-
{{Tag("Privacy")}}
-
Este material ajuda a examinar as consequências de compatilhar dados online.
-
{{Tag("OpenPractices")}}
-
Este artigo demonstra como manter a Web acessível a todas as pessoas.
-
- -

Colocando tudo junto

- -

Para cada página você aplica vários tipos de etiquetas, por exemplo:

- -
-
Um tutorial sobre WebGL para iniciantes
-
WebGL, Gráficos, Graphics, Guia, Guide, Iniciante, Beginner
-
Referência para elementos {{HTMLElement("canvas")}}
-
Canvas, Tela, HTML, Element, Elementos, Graphics Reference, Referencial Gráfico
-
Uma página de entrada para as ferramentas de desenvolvedores voltados ao Firefox OS
-
Tools, Ferramentas, Firefox OS, Landing, Destino
-
- -

Etiquetas e filtros de busca

- -

Filtros de busca não vão funcionar apropriadamente, a não ser que marquemos as páginas da MDN corretamente. Aqui está uma tabela dos filtros de pesquisa e sua busca correspondente.

- -
-

Observação: Se várias etiquetas estiverem listadas abaixo de "Nome da etiqueta", isso significa que, pelo menos, uma delas precisa estar presente para o artigo estar propriamente marcado.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Grupo do filtroNome do filtro de pesquisaNome da etiqueta
TópicoOpen Web Apps{{Tag("Apps")}}
 HTML{{Tag("HTML")}}
 CSS{{Tag("CSS")}}
 JavaScript{{Tag("JavaScript")}}
 APIs e DOM{{Tag("API")}}
 Telas{{Tag("Canvas")}}
 SVG{{Tag("SVG")}}
 MathML{{Tag("MathML")}}
 WebGL{{Tag("WebGL")}}
 XUL{{Tag("XUL")}}
 Marketplace{{Tag("Marketplace")}}
 Firefox{{Tag("Firefox")}}
 Firefox para Android{{Tag("Firefox Mobile")}}
 Firefox para Computadores{{Tag("Firefox Desktop")}}
 Firefox OS{{Tag("Firefox OS")}}
 Dispositivos Móveis{{Tag("Mobile")}}
 Desenvolvimento Web{{Tag("Web Development")}}
 Complementos & Extensões{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
 Jogos{{Tag("Games")}}
Nível de habilidadeSou Especialista{{Tag("Advanced")}}
 Nível Intermediário{{Tag("Intermediate")}}
 Estou Começando{{Tag("Beginner")}}
Tipo de documentoDocumentosEsta vai restringir a busca ao teor dos documentos, deixando de fora Hacks e outros conteúdos MDN.
 DemosIsto vai incluir as demonstrações (Demo Studio) nos resultados da busca.
 Ferramentas{{Tag("Tools")}}
 Exemplos de Códigos{{Tag("Example")}}
 Guia & Tutorial{{Tag("Guide")}}
 Perfis de desenvolvedoresEsta inclui os perfis de desenvolvedores da comunidade MDN nos resultados da busca.
 Recursos ExternosIsto é alguma coisa que a equipe de desenvolvimento vai ter que solucionar.
- -

Problemas de etiquetas que você pode consertar

- -

Há vários tipos de problemas de rotulagem que você pode ajudar a resolver:

- -
-
Sem etiquetas
-
Geralmente os artigos devem ter, no minimo, as etiquetas de "categória" e "tópico". Comumente outras etiquetas podem ser adicionadas mas, se você ajudar a garantir que o requesito minimo delas esteja presente, você já terá uma documentação maravilhosa!
-
Etiquetas que não seguem nossos padrões
-
Por favor, conserte qualquer documento cujas etiquetas não sigam as normas estabelecidas nesta página. Leve em consideração que, devido a um erro no Kuma, algumas etiquetas traduzidas (como Référence) podem aparecer em algumas páginas em inglês. Há uma chance bem grande destas etiquetas voltarem após serem deletadas, então, não se acanhe em consertá-las, até o erro ser corrigiido.
-
Etiquetas incorretas
-
Se você estiver lendo um artigo sobre HTML e este estiver marcado com "JavaScript", provavelmente há algo errado! Da mesma forma, se um artigo discutir os detalhes internos da Mozilla mas exibir uma etiqueta "Web", provavelmente existe algo errado aí, também. Remova essas tetiquetas e adicione as corretas, se elas ainda não estiverem lá. Por favor, também corrija etiquetas escritas incorretamente (p.ex. "javascript"  não está de todo errada, uma vez que etiquetas não consideram maiúsculas, ou minúsculas, mas vamos ter capricho!: )
-
Carência de Etiquetas
-
Se um artigo tem algumas, mas não todas as etiquetas de que precisa, sinta-se à vontade para adicionar mais. Por exemplo: se uma página de referência de JavaScript estiver (corretamente) marcada com "JavaScript" e nada mais além disso, agradecemos se você inserir a etiqueta "Referência/Reference" lá, também!
-
Etiquetas indesejáveis (spam)
-
Esta besta asquerosa é o mais revoltante dos problemas de etiquetas: Algum verme da Web depositou suas excreções nas etiquetass de uma página (como "Programa Grátis!" ou "Ei, eu estava navegando pela sua página e queria perguntar se você me ajudaria a resolver esse problema que estou tendo com o Flash travando o tempo todo"). Temos que remover estas "etiquetas" assim que possível! Elas são horrendas, difíceis de manejar se esperarmos demais, e atrapalham muito a {{Glossary("SEO")}}.
-
- -

Se você vir um (ou mais) destes problemas, por favor, registre-se, ou entre na MDN e clique no botão "EDITAR", no canto superior direito da página. Quando o editor carregar, role até o pé da página e você verá as etiquetas. Para mais detalhes da interface de marcação, leia a seção "As caixas de etiquetas" do Guia do editor da MDN.

diff --git a/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html b/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html deleted file mode 100644 index 7bd11477fe..0000000000 --- a/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Como converter exemplos de codigos para funcionar "ao vivo" -slug: MDN/Contribute/guia/Converter_exemplos_codigo_para_ao_vivo -tags: - - Começando - - Como - - Contribuindo - - Documentação -translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live ---- -
{{MDNSidebar}}

A MDN agora possui um sistema de "exemplos ao vivo", onde a amostra de código e exibida em uma página que é diretamente utilizado para exibir a saída dessa amostra. No entanto, muitos artigos existentes possuem exemplos de código que ainda não utilizam este sistema, e precisam ser convertidos.

- - - - - - - - - - - - - - - - -
Onde isso precisa ser feito?Artigos tagueados com NeedsLiveSample
O que você precisa saber para fazer a tarefa? -
    -
  • Conhecimento de HTML, CSS e/ou JavaScript, dependendo da amostra de código.
    • -
  • Capacidade de usar macros KumaScript dentro dos artigos da MDN.
    • -
-
Quais são os passos para fazer a tarefa? -

Para uma descrição completa do sistema de exemplos ao vivo, incluindo como criar exemplos ao vivo ,veja Using the live sample system.

- -
    -
  1. Escolha um artigo da lista lista de artigos que estao tagueados com NeedsLiveSample, em que o exemplo de codigo seja uma feature que seja familiar.
    2. -
  2. Converta o codigo de exemplo para "ao vivo".
    3. -
  3. Apague qualquer codigo ou imagem usada previamente para exibir uma saida de exemplo.
    4. -
-
- -

 

diff --git a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html deleted file mode 100644 index 13d6745c3f..0000000000 --- a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: distant example -slug: >- - MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web/distant_example -translation_of: >- - MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example ---- -
{{MDNSidebar}}
-

O exemplo

- -

HTML

- -
<div class="square">
-  #<input class="color">
-</div>
- -

CSS

- -
body {
-  padding: 10px;
-  margin : 0;
-}
-
-.square {
-  width  : 80px;
-  height : 80px;
-  padding: 10px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-.color {
-  width: 60px;
-  text-transform: uppercase;
-}
-
- -

JS

- -
function setColor(color) {
-  document.querySelector('.square').style.backgroundColor = '#' + color;
-  document.querySelector('.color').value = color;
-}
-
-function getRandomColor() {
-  var color = Math.floor(Math.random() * 16777215);
-  return color.toString(16);
-}
-
-function getInputColor() {
-  var value = document.querySelector('.color').value;
-  var color = Number('0x' + color);
-  if (color === +color) {
-    return color.toString(16);
-  }
-  return value;
-}
-
-document.addEventListener('click', function () {
-  setColor(getRandomColor());
-});
-
-document.addEventListener('keyup', function () {
-  setColor(getInputColor());
-});
-
-
- -

Resultado ao vivo

- -

{{EmbedLiveSample('The_example', 120, 120)}}

diff --git a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html deleted file mode 100644 index 948da8d3f6..0000000000 --- a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Como criar um exercício de aprendizado interativo -slug: MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web -tags: - - Guía -translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web ---- -
{{MDNSidebar}}
- -

Ao aprender a web, é importante confiar no conteúdo da aprendizagem ativa. Esse conteúdo é feito para ajudar a aprender algo pró-ativamente. Pode ser exercícios, exemplos de hackeáveis ​​em tempo real, tarefas a realizar, análises, etc. Em suma, qualquer coisa que desejar, ajuda alguém a entender ativamente algo.

- -

Não existe uma maneira direta para criar esse conteúdo. Por exemplo, existem muitas ferramentas de terceiros que podem ajudar-lo a criar exemplos em tempo real (ver: JSFiddle , CodePen , Dabblet , etc.) que você pode vincular a partir de artigos MDN. Se Você Quiser CRIAR Exercícios Mais AVANÇADOS e compreensíveis, rápido Você PODE USAR fácilmente o dedal  DO PROJETO WebMaker.

- -

Atualmente, o MDN não é uma ferramenta fácil para autorizar esse conteúdo ativo. No entanto, você é um codificador, pode usar os recursos MDN atuais para criar o conteúdo de aprendizagem ativo personalizado. Leia mais para ver como fazer isso.

- -

MDN amostras ao vivo

- -

O MDN possui um recurso muito legal chamado live samples. É um mecanismo que transforma qualquer código HTML, CSS e JavaScript dentro de uma página MDN em seu equivalente executado. Antes de usá-lo, você deve ler Usando o sistema de amostra ao vivo,qual é a nossa documentação completa para construí-los. Embora sejam fáceis de fazer, há peculiaridades e truques que você aprenderá ao longo do caminho.

- -

O que é interessante é que é realmente fácil ajustar esse recurso para usá-lo para incorporar qualquer tipo de ferramenta ou utilitário que você deseja em uma página MDN.

- -

Código oculto

- -

A primeira maneira de usar um exemplo de código para criar conteúdo de aprendizagem ativo é editar a página onde deseja adicionar seu conteúdo. Use o recurso Live Sample para criar seu conteúdo conforme desejar. Não se preocupe com a complexidade do código que você poderia escrever; apenas crie o que você precisa. Uma vez que o seu conteúdo esteja pronto, basta mudar para a visualização do código do editor e cercar seu código com um simples {{HTMLElement('div')}} elemento com a classeescondida. Ao fazê-lo, seu código não será exibido, mas sua amostra ao vivo permanece acessível e exibível.

- -

Vamos ver um exemplo simples:

- -
-

Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal

- - -{{EmbedLiveSample('hidden_code_example', 120, 120)}}
- -

Se você olhar para o código HTML dessa página com o editor MDN, você verá o código HTML seguinte:

- -
<div class="moreinfo">
-<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>
-
-<div class="hidden">
-<h4 id="hidden_code_example">hidden code example</h4>
-
-<h5 id="HTML">HTML</h5>
-
-<pre class="brush: html">
-&lt;div class="square"&gt;
-  #&lt;input class="color"&gt;
-&lt;/div&gt;</pre>
-
-<h5 id="CSS">CSS</h5>
-
-<pre class="brush: css">
-body {
-  padding: 10px;
-  margin : 0;
-}
-
-.square {
-  width  : 80px;
-  height : 80px;
-  padding: 10px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-.color {
-  width: 60px;
-  text-transform: uppercase;
-}
-</pre>
-
-<h5 id="JS">JS</h5>
-
-<pre class="brush: js">
-function setColor(color) {
-  document.querySelector('.square').style.backgroundColor = '#' + color;
-  document.querySelector('.color').value = color;
-}
-
-function getRandomColor() {
-  var color = Math.floor(Math.random() * 16777215);
-  return color.toString(16);
-}
-
-function getInputColor() {
-  var value = document.querySelector('.color').value;
-  var color = Number('0x' + color);
-  if (color === +color) {
-    return color.toString(16);
-  }
-  return value;
-}
-
-document.addEventListener('click', function () {
-  setColor(getRandomColor());
-});
-
-document.addEventListener('keyup', function () {
-  setColor(getInputColor());
-});
-</pre>
-</div>
-
-\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
-</div>
- -

Você pode ver um exemplo mais avançado de tal ajuste sobre a página API do Canvas.

- -

Código de fora da página

- -

O exemplo anterior está certo se você deseja incorporar conteúdo básico de aprendizagem ativa. No entanto, se você quiser lidar com um código complexo, pode tornar-se um pouco estranho para lidar com esse wrapper de classe oculto.

- -

Então, outra opção e escreva o código do seu conteúdo de aprendizagem em uma página MDN e, em seguida, incorpora-lo em outra página. Para fazer isso, podemos usar o {{TemplateLink ("EmbedDistLiveSample")}} macro em vez de {{TemplateLink ("EmbedLiveSample")}} macro.

- -

Vamos ver como esse exemplo quando configurado como se estivesse sendo incorporado de uma origem remota:

- -
-

Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal

- -

{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}

-
- -

Desta vez, se você olhar para o HTML da página usando o editor MDN , você não está a ver o código oculto. Se você quiser ver o código, vá para uma página que o hospeda.

- -

Você pode ver um exemplo mais avançado do uso em nosso tutorial HTML Form , que usa essa técnica para permitir uma experiência com formulários.

diff --git a/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html b/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html deleted file mode 100644 index 369f018ce5..0000000000 --- a/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Como criar uma conta na MDN -slug: MDN/Contribute/guia/Create_an_MDN_account -tags: - - Conta - - Guia(2) - - Início(2) - - Novato - - como fazer -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

Para fazer quaisquer alterações sobre o conteúdo do MDN (tanto editando uma página como contribuindo com uma demonstração), você precisará de um perfil MDN. Não se preocupe, você não precisa de um perfil se tudo o que você pretende é ler e pesquisar no MDN! Esse guia simples vai ajudá-lo a configurar seu perfil MDN.

- -
Por que o MDN precisa do meu endereço de email?
-
-Seu endereço de email é usado para recuperação da conta, e se necessário por administradores do MDN para contatá-lo sobre sua conta ou sua atividade no site.
-
-Além disso, você pode opcionalmente inscrever-se para receber notificações (como quando uma página específica é modificada) e mensagens (por exemplo, se você optar por se juntar ao nosso time de testes beta, você poderá receber email sobre novas funcionalidades que precisam ser testadas).
-
-Seu endereço de email nunca é mostrado no MDN e será usado apenas de acordo com nossa política de privacidade.
- -

Assim que você tiver decidido que quer contribuir para o MDN, aqui está tudo que você deve fazer para configurar o seu perfil:

- -
    -
  1. No topo de qualquer página no MDN você vai encontrar um botão chamado "Entrar". Passe o seu mouse sobre ele(ou toque nele caso você esteja em um dispositivo móvel) para mostrar uma lista de serviços de autenticação que disponibilizamos para se inscrever no MDN.
    2. -
  2. Selecione um serviço com o qual você irá se inscrever. Atualmente, somente a inscrição com o GitHub está disponível. Note que, se você selecionar o GitHub, um vínculo com a sua conta do GitHub será incluída em seu perfil público na página pessoal do MDN.
    3. -
  3. Siga os passos do serviço para conectar sua conta ao MDN.
    4. -
  4. Uma vez que o serviço de autenticação retorná-lo ao MDN, será solicitado a você que entre com seu nome de usuário e endereço de email. Seu nome de usuário será mostrado publicamente para creditá-lo sobre trabalhos que você concluiu. Não use o seu endereço de email como seu nome de usuário.
    5. -
  5. Clique no botão "Criar meu perfil MDN".
    6. -
  6. Se o endereço de email que você especificou no passo 4 não é o mesmo que você usa no serviço de autenticação, você precisará checar seu email e clicar no link do email de confirmação que foi enviado para você.
    7. -
- -

É isso! Você adquiriu uma conta MDN, e você pode imediatamente editar ou marcar páginas e postar demonstrações!

- -

Você pode clicar no seu nome no topo de qualquer página MDN para ver o seu perfil público. A partir de lá, você pode clicar o botão de "Editar" para fazer modificações ou adições no seu perfil, assim você pode compartilhar mais sobre seus interesses, adicionar links para sua conta do Twitter ou blog, e assim por diante.

- -
-

Observação: Novos nomes de usuário não podem conter espaços ou o caractere "@". Tenha em mente que o seu nome de usuário será mostrado publicamente para identificar o trabalho que você fez!

-
- -

 

diff --git a/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html b/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html deleted file mode 100644 index 45d49fbc55..0000000000 --- a/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Como fazer uma revisão técnica -slug: MDN/Contribute/guia/Do_a_technical_review -tags: - - Documentação - - Guía - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}

Uma Revisão técnica consiste em revisar a precisão técnica e a integridade de um artigo e corrigi-lo, se necessário. Se um escritor de um artigo procura alguém para verificar o conteúdo técnico do artigo, então ele marca a opção "Análise técnica" durante a edição. Muitas vezes, o escritor contata um engenheiro específico para realizar a revisão técnica, mas qualquer pessoa com experiência técnica no tópico pode fazer um.

- -

Este artigo descreve como realizar uma revisão técnica, ajudando assim a garantir que o conteúdo do MDN seja exato.

- -
-
Como é essa tarefa?
-
Revisar e corrigir artigos com precisão técnica e completude.
-
Onde deve ser feita?
-
Em artigos específicos aonde estão marcados como uma revisão técnica.
-
O que você precisa saber para fazer a tarefa?
-
-
    -
  • Conhecimento avançado (especialista) sobre o tópico do artigo que você está revisando. Se a leitura do artigo não lhe ensinou nada de novo, considere-se um especialista.
    • -
  • Como editar um artigo wiki no MDN
    • -
-
-
Quais são os passos para fazê-lo?
-
-
    -
  1. Escolha um artigo para revisar: -
      -
    1. Vá até a lista de páginas que necessitam de revisão técnica. Lá estará listado todas as páginas as quais uma revisão técnica foi solicitada.
      2. -
    2. Escolha uma página cujo tópico você conheça muito.
      3. -
    3. Clique no link do artigo para carregar a página.
      4. -
    -
    2. -
  2. Leia o artigo, prestando atenção aos detalhes técnicos: o artigo está correto? Falta alguma coisa? Não hesite em mudar para uma página diferente se o primeiro que você escolher não se adequar a você.
    3. -
  3. Se não houver erros, você não precisa editar o artigo para marcá-lo como revisado. Procure a caixa "revisão rápida" na barra lateral esquerda da página. Esta caixa amarela lista todas as revisões pendentes e permite que você desmarque a revisão já realizada. Em caso de uma revisão técnica solicita será apresentado desse modo:
    -
    4. -
  4. Desmarque a opção Técnico e clique em salvar.
    5. -
  5. Se você encontrar erros que precisam ser corrigidos, você também pode solicitar uma nova revisão apartir do editor. Aqui estão os passos: -
      -
    1. Para editar a página clique no botão editar no canto superior da página; desse modo você estará acessando o editor do MDN.
      2. -
    2. Corrija qualquer informação técnica que não esteja correta e/ou adicione qualquer informação importante que esteja faltando.
      3. -
    3. Digite um Comentário da revisão na parte inferior do artigo. Esta é uma breve mensagem que descreve o que você fez, como "Revisão técnica concluída". Se você corrigiu as informações, inclua isso em seu comentário, por exemplo, "Análise técnica e descrições de parâmetros fixos". Isso ajuda outros contribuidores e editores de sites a saber o que você mudou e por quê. Você também pode mencionar se houve partes específicas que você não se sentiu qualificado para revisar.
      4. -
    4. Clique no botão PUBLICAR.
      5. -
    -
    6. -
- Parabéns! Você terminou sua primeira revisão técnica. Obrigado pela ajuda!
-
diff --git a/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html b/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html deleted file mode 100644 index 687072f228..0000000000 --- a/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Como fazer uma revisão editorial -slug: MDN/Contribute/guia/Do_an_editorial_review -tags: - - Documentação - - Guia(2) - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -

A revisão editorial consiste em corrigir erros gramaticais e no modo de se expressar em um artigo. Nem todos contribuidores são experientes em linguagens, mas, independentemente dos seus conhecimentos, terão contribuído com artigos extremamente úteis, que precisam da aplicação de técnicas de revisão; Isso é feito em uma revisão editorial.

- -

Esse artigo descreve como fazer uma revisão editorial, assim ajudando para assegurar que o conteúdo do MDN é preciso.

- -
-
Qual é a tarefa?
-
Edição e revisão de artigos que estiverem marcados como "precisando de revisão editorial."
-
Onde é que isso precisa ser feito?
-
Em artigos específicos que são marcados como "precisando de revisão editorial."
-
O que é preciso conhecer para fazer essa tarefa?
-
Você precisa ter um bom dominio do idioma Ingles e habilidades de ortografia e gramática. Uma revisão editorial consiste em garantir que a gramática, ortografia e redação estejão corretas e fazendo sentido; E que o guia de estilo de escrita MDN seja seguido.
-
Quais são os passos a seguir?
-
-
    -
  1. Escolha um artigo para revisão: -
      -
    1. Vá para a lista de artigos que precisam de revisão editorial.  Essa lista contém todas as páginas que precisam de revisão editorial.
      2. -
    2. Escolha uma página que tenha título em português que não comece com Template:(Template: Páginas que contém macro-códigos MDN)
      3. -
    3. Clique no link do artigo para carregar a página.
      4. -
    -
    2. -
  2. Quando a página estiver carregada, clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN. Não hesite em trocar para uma página diferente se você não entendeu bem a página atual.
    3. -
  3. Se não houver erros, você não precisa editar o artigo para marca-lo como revisado. Olhe para uma caixa de "revisão rápida" a esquerda da barra de navegação:
    4. -
- -

               Selecione a caixa Editorial , e clique em Review Completed.

- -

4. Se você precisa consertar erros que precisam correção:

- -
    -
  1. Clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN.
    2. -
  2. Corrija todas palavras e a gramática ou erros de uso.
    3. -
  3. Digite um Comentário de Revisão na parte de baixo do artigo, algo como 'Editorial revisado, foram corrigidos alguns erros de gramática e ortografia'.
    4. -
  4. Tire a seleção da caixa Editorial abaixo do Revisão necessária?
    5. -
  5. Clique no botão Salvar alterações.
    6. -
- -
-

Por razões de perfomance, sua edição pode não aparecer logo na página.

-
-
-
diff --git a/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html b/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html deleted file mode 100644 index 7754f741b6..0000000000 --- a/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Como escrever um artigo para ajudar as pessoas aprender sobre a Web -slug: MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web -tags: - - Guía - - MDN Meta - - aprendizado - - como fazer -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -
{{MDNSidebar}}
- -

MDN's Área de aprendizado é a nossa casa para artigos que introduzem conceitos Web para novos desenvolvedores. Uma vez que seu conteúdo é voltado para iniciantes, este é um ótimo lugar para compartilhar seu conhecimento e ajudar visitantes a conhecer a Web. É importante ter certeza que novos desenvolvedores podem seguir o conteúdo, então nós damos atenção especial para isto.

- -

Este artigo explica como escrever para a  Área de aprendizado.

- -

Como escrever um artigo na Área de aprendizado

- -

Para começar a contribuir com seu conhecimento, simplesmente clique no botão verde e grande, então siga os cinco passos abaixo. Se você está procurando por ideias, por favor dê uma olhada no nosso quadro de time Trello!

- -

Escreva um artigo de aprendizado

- -

Este artigo pode não acabar exatamente no lugar certo, mas pelo menos no MDN. Se você deseja falar com alguém sobre mover ele para o lugar certo, por favor  Contate-nos.

- -

Passo 1: Escreva uma linha-dupla

- -

A primeira frase do seu artigo precisa resumir sobre qual conteúdo você irá falar e a segunda deve ser um pouco mais específica sobre os itens que você vai inserir no seu artigo. Por exemplo:

- -
-

Enquanto que os arquivos {{glossary("HTML")}} contém conteúdo estruturado, {{Glossary("CSS")}}, outra grande tecnologia Web, faz o conteúdo aparecer do jeito que você quer. Neste artigo nós vamos cobrir como esta tecnologia funciona, e como escrever seu próprio exemplo básico.

-
- -

Note como o exemplo explica brevemente que CSS é uma importante tecnologia Web usada para estilizar páginas. Isto é suficiente para o leitor ter uma boa ideia sobre o quê o artigo fala.

- -

Porque os artigos da Área de Aprendizado primeiramente foca em iniciantes, cada artigo deve cobrir um tópico direto, então não sobrecarregará o leitor com muita informação nova. Se você não resumir o artigo em uma sentença, você pode estar tentando fazer muito em somente um artigo!

- -

Passo 2: Adicionar uma top box

- -

Então adicione uma top box para ajudar os leitores com dicas sobre onde eles estão no processo de aprendizagem.  Aqui é um exemplo de top box do "Entendendo URLs e suas estruturas". Você pode usar este artigo como um modelo quando estiver escrevendo o seu próprio.

- - - - - - - - - - - - -
Pré-requisitos:Você primeiro precisa saber Como a Internet funciona, O que é um servidor Web, and Os conceitos por trás dos links na web.
Objetivo:Você vai aprender o que é uma URL e como ela funciona na Web.
- -
-
Pré-requisitos
-
O que o leitor, principalmente, precisa saber para seguir este artigo? Quando possível, faça um link de cada pré-requisito para outro artigo da Área de Aprendizado cobrindo o conceito (a menos que este seja um artigo básico que não precisa de nenhum conhecimento anterior).
-
Objetivos
-
Esta seção explica brevemente o que o leitor vai aprender no curso da leitura. Este é um pouco diferente da linha-um; a linha-um resume o tópico do artigo, enquando a seção objetivos especificamente descreve o que o leitor pode esperar ao terminar de ler todo o artigo.
-
 
-
- -
-

Nota: Para criar esta tabela você pode copiar e colar a tabela do exemplo acima, ou usar a ferramenta do editor do MDN Tabela. Se você escolher usar a ferramenta Tabela, você precisa especificamente adicionar uma classe CSS learn-box adicional a classe padrão standard-table. Para fazer isto, quando você criar ou editar as propriedades da tabela, vá no painel "Avançado" e no campo Classes mudar para "standard-table learn-box".

-
- -

Passo 3: Escreva uma descrição completa

- -

Próximo: escreva uma longa descrição que forneça uma visão geral do artigo, destacando os conceitos principais. Não esqueça de explicar por quê o leitor deve pegar seu tempo para aprender este tópico e ler seu artigo!

- -

Passo 4: Vá fundo

- -

Quando você tiver terminado com tudo isso, você pode finalmente ir fundo no tema. Você pode estruturar esta parde do seu artigo como você quiser (Por quanto sinta-se livre para consultar nosso guia de estilo). Esta é sua chance de brilhar! Entre nos detalhes explicando o tema que você está escrevendo. Forneça links de referência para a documentação completa, explique como a tecnologia funciona em detalhe, forneça detalhes da sintaxe e usabilidade, e mais. É com você!

- -

Como um guia, aqui são algumas dicas de escrita para iniciantes:

- - - -

Dê uma olhada nas primeiras seções do nosso artigo Funções - blocos reutilizáveis de código para uma boa seção descritiva.

- -

Passo 5: Forneça material de "aprendizado ativo"

- -

Para ilustrar o artigo e ajudar o leitor a entender melhor o que ele está aprendendo, esteja certo de fornecer exercícios, tutoriais e tarefas para completar. Tendo eles praticando, e ativamente usando e experimentando os conceitos que seu artigo explica, você pode ajudar a fixar a informação no cérebro do leitor.

- -

Você pode escolher incluir os exemplos diretamente nas páginas como  exemplos ao vivo, ou fazer links para eles se eles não funciona como exemplos ao vivo. Se você está interessado em ajudar a criar estes materiais de valores, por favor leia o artigo Criar um exercício interativo para ajudar o Aprendendo a Web.

- -

Se você não pode fornecer links para materiais de aprendizado ativo (você não conhece nenhum ou não tem tempo para criar), você deveria adicionar uma tag {{Tag("NeedsActiveLearning")}} para o artigo. Assim outros contribuintes podem encontrar artigos que precisam de materiais de aprendizado ativo e talvez ajudar você com isto.

- -

Dê uma olhada no Aprendizado ativo: selecionando diferentes elementos para um exemplo de exercício de aprendizado interativo, ou Aprendizado ativo: Jogando com escopo para um estilo diferente de exercício que permite fazer download de um template no dispositivo do leitor e modificá-lo seguindo os passos fornecidos.

- -

Passo 6: Tenha o artigo revisto e colocado no menu de navegação da Área de aprendizado

- -

Depois de ter escrito seu artigo, deixe-nos saber para podermos dar uma olhada, fazer uma revisão e sugerir melhorias. Novamente, veja nossa seção Contato, é a melhor maneira de manter contato.

- -

Outra parte na finalização do seu artigo é colocar ele na área principal no menu de navegação da Área de Aprendizado. Este menu é gerado pelo LearnSidebar macro, o qual você precisa de privilégios especiais para editar, então, novamente, converse com alguém do nosso time sobre adicionar isto.

- -

Você deveria pelo menos adicionar isso na sua página - isto é feito adicionando a chamada do macro \{{LearnSidebar}} dentro de um parágrafo no topo da sua página

- - - -

Artigos sugeridos

- -

Então você quer contribuir, mas você não tem certeza sobre o que escrever?

- -

O time da Área de aprendizado mantém um quadro Trello com ideias de artigos para escrever. Sinta-se livre para pegar um e começar a trabalhar!

- -

 

- -

 

diff --git a/files/pt-br/mdn/contribute/guia/index.html b/files/pt-br/mdn/contribute/guia/index.html deleted file mode 100644 index 7a8e36996a..0000000000 --- a/files/pt-br/mdn/contribute/guia/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Guia de contribuição -slug: MDN/Contribute/guia -translation_of: MDN/Contribute/Howto ---- -
{{MDNSidebar}}

Os seguintes artigos fornecem orientações passo-a-passo para realização de tarefas específicas no MDN.

- -

{{LandingPageListSubpages}}

diff --git a/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html b/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html deleted file mode 100644 index 91ac82e8ea..0000000000 --- a/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Como definir o resumo de uma página -slug: MDN/Contribute/guia/Set_the_summary_for_a_page -tags: - - Como - - Guia(2) - - MDN Meta -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}

Você pode definir o sumário de uma página no MDN, para ser usado de várias maneiras, incluindo em resultados de pesquisa, em outras páginas MDN como tópico de página de regiões, e em dicas. E o texto deve fazer sentido tanto ao contexto da página, como quando mostrado em outro contexto, sem o restante do conteúdo da página.

- -

Um sumário pode ser bem definido com a página. Caso não seja bem definido, normalmente a primeira frase é usada, e nem sempre esta é a melhor maneira de se apresentar o conteúdo da página.

- - - - - - - - - - - - - - - - - - - - -
Qual é a tarefa?Marcando o texto dentro de uma página que deve ser usado como seu resumo em outros contextos; esta tarefa pode incluir, se necessário escrever um texto adequado.
Onde isto deve ser feito?Em páginas que não possuem um resumo ou têm um resumo menos do que ótimo.
O que você deve saber para fazer a tarefa?Capacidade de usar o editor MDN; boas habilidades de escrita em inglês; familiaridade suficiente com o tema da página para escrever um bom resumo.
Quais são os passos a fazer? -
    -
  1. Escolha uma página para fazer o resumo: -
      -
    1. Na página MDN documentation status, clique sob o link Sections para um tema que você conhece um pouco sobre (por exemplo, HTML):
      -
      2. -
    2. Na página de status da documentação do tópico, clique no cabeçalho de páginas na tabela de 
      3. -
    3. Resumo. Isso leva você a um índice de todas as páginas em que seção do tópico; Ele mostra a página 
      4. -
    4. de links na coluna da esquerda e as tags e resumos na coluna à direita:
      5. -
      6. -
    6. Escolha uma página que está faltando um resumo, ou que tem um resumo fraco:
      -
      7. -
    7. Clique no link para ir para essa página.
      8. -
    -
    2. -
  2. Clique em Editar para abrir a página no editor MDN.
    3. -
  3. Procure uma frase ou duas, que funcionam como um resumo fora de contexto. Se necessário, edite o conteúdo existente para criar ou modificar frases para ser um bom resumo.
    4. -
  4. Selecionar o texto a ser usado como um resumo.
    5. -
  5. Nos estilos de elementos gráficos da barra de ferramentas do editor, selecione Resumo SEO. (No código fonte da página, isso cria uma {{HTMLElement("span")}} elemento com class = "seoSummary " em torno do texto selecionado.)
    -
    6. -
  6. Salve suas alterações com um comentário de revisão em como "Definir a página Resumo."
    7. -
-
- -

 

- -

 

- -

 

diff --git a/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html b/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html deleted file mode 100644 index 7c6f94ac07..0000000000 --- a/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Como marcar páginas de JavaScript -slug: MDN/Contribute/guia/Tag_JavaScript_pages -tags: - - Como - - Guia(2) - - JavaScript - - MDN Meta -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

O tagueamento consiste na adição de meta-informações para as páginas de modo que o conteúdo relacionado possa ser agrupado, como por exemplo em uma ferramenta de pesquisa.

- - - - - - - - - - - - - - - - -
E onde isso precisa ser feito?Dentro de páginas especificas relacionadas com Javascript e sem marcação.
O que é preciso saber para fazer a tarefa ? -
    -
  • O basico de javascript como saber o que é um metodo ou uma propriedade.
    • -
-
Quais são os passos para fazê-lo? -
    -
  1. Escolha uma das paginas na lista 'linkada' acima.
    2. -
  2. Click no link do artigo e carregue a página.
    3. -
  3. Uma vez que a página foi carregada, clique no botão Editar no topo, isso deve lhe posicionar no editor MDN.
    4. -
  4. Pelo menos uma tag Javascript deve ser adicionada. Aqui estão algumas outras tags possíveis para adicionar: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TagA página que está em uso.
    Methodmétodo
    PropertyPropriedade
    prototypeprotótipo
    Object type namemétodo de um objeto; por exemplo String.fromCharCode deve ser a sequência da tag String
    ECMAScript6 and Experimentalrecursos adicionados na nova versão do ECMAScript
    Deprecatedrecursos obsoletos (cujo o uso é desencorajado, mas ainda suportada)
    Obsoleterecursos obsoletos (que não são mais suportados em browsers modernos)
    othersver as normas de tagueamento MDN para aplicar outras tags possíveis.
    -
    5. -
  5. Salve com um comentário.
    6. -
  6. E está pronto!
    7. -
-
diff --git a/files/pt-br/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/pt-br/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..7bd11477fe --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,43 @@ +--- +title: Como converter exemplos de codigos para funcionar "ao vivo" +slug: MDN/Contribute/guia/Converter_exemplos_codigo_para_ao_vivo +tags: + - Começando + - Como + - Contribuindo + - Documentação +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

A MDN agora possui um sistema de "exemplos ao vivo", onde a amostra de código e exibida em uma página que é diretamente utilizado para exibir a saída dessa amostra. No entanto, muitos artigos existentes possuem exemplos de código que ainda não utilizam este sistema, e precisam ser convertidos.

+ + + + + + + + + + + + + + + + +
Onde isso precisa ser feito?Artigos tagueados com NeedsLiveSample
O que você precisa saber para fazer a tarefa? +
    +
  • Conhecimento de HTML, CSS e/ou JavaScript, dependendo da amostra de código.
    • +
  • Capacidade de usar macros KumaScript dentro dos artigos da MDN.
    • +
+
Quais são os passos para fazer a tarefa? +

Para uma descrição completa do sistema de exemplos ao vivo, incluindo como criar exemplos ao vivo ,veja Using the live sample system.

+ +
    +
  1. Escolha um artigo da lista lista de artigos que estao tagueados com NeedsLiveSample, em que o exemplo de codigo seja uma feature que seja familiar.
    2. +
  2. Converta o codigo de exemplo para "ao vivo".
    3. +
  3. Apague qualquer codigo ou imagem usada previamente para exibir uma saida de exemplo.
    4. +
+
+ +

 

diff --git a/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html b/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html new file mode 100644 index 0000000000..13d6745c3f --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html @@ -0,0 +1,72 @@ +--- +title: distant example +slug: >- + MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web/distant_example +translation_of: >- + MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example +--- +
{{MDNSidebar}}
+

O exemplo

+ +

HTML

+ +
<div class="square">
+  #<input class="color">
+</div>
+ +

CSS

+ +
body {
+  padding: 10px;
+  margin : 0;
+}
+
+.square {
+  width  : 80px;
+  height : 80px;
+  padding: 10px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+.color {
+  width: 60px;
+  text-transform: uppercase;
+}
+
+ +

JS

+ +
function setColor(color) {
+  document.querySelector('.square').style.backgroundColor = '#' + color;
+  document.querySelector('.color').value = color;
+}
+
+function getRandomColor() {
+  var color = Math.floor(Math.random() * 16777215);
+  return color.toString(16);
+}
+
+function getInputColor() {
+  var value = document.querySelector('.color').value;
+  var color = Number('0x' + color);
+  if (color === +color) {
+    return color.toString(16);
+  }
+  return value;
+}
+
+document.addEventListener('click', function () {
+  setColor(getRandomColor());
+});
+
+document.addEventListener('keyup', function () {
+  setColor(getInputColor());
+});
+
+
+ +

Resultado ao vivo

+ +

{{EmbedLiveSample('The_example', 120, 120)}}

diff --git a/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html new file mode 100644 index 0000000000..948da8d3f6 --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -0,0 +1,185 @@ +--- +title: Como criar um exercício de aprendizado interativo +slug: MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web +tags: + - Guía +translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +--- +
{{MDNSidebar}}
+ +

Ao aprender a web, é importante confiar no conteúdo da aprendizagem ativa. Esse conteúdo é feito para ajudar a aprender algo pró-ativamente. Pode ser exercícios, exemplos de hackeáveis ​​em tempo real, tarefas a realizar, análises, etc. Em suma, qualquer coisa que desejar, ajuda alguém a entender ativamente algo.

+ +

Não existe uma maneira direta para criar esse conteúdo. Por exemplo, existem muitas ferramentas de terceiros que podem ajudar-lo a criar exemplos em tempo real (ver: JSFiddle , CodePen , Dabblet , etc.) que você pode vincular a partir de artigos MDN. Se Você Quiser CRIAR Exercícios Mais AVANÇADOS e compreensíveis, rápido Você PODE USAR fácilmente o dedal  DO PROJETO WebMaker.

+ +

Atualmente, o MDN não é uma ferramenta fácil para autorizar esse conteúdo ativo. No entanto, você é um codificador, pode usar os recursos MDN atuais para criar o conteúdo de aprendizagem ativo personalizado. Leia mais para ver como fazer isso.

+ +

MDN amostras ao vivo

+ +

O MDN possui um recurso muito legal chamado live samples. É um mecanismo que transforma qualquer código HTML, CSS e JavaScript dentro de uma página MDN em seu equivalente executado. Antes de usá-lo, você deve ler Usando o sistema de amostra ao vivo,qual é a nossa documentação completa para construí-los. Embora sejam fáceis de fazer, há peculiaridades e truques que você aprenderá ao longo do caminho.

+ +

O que é interessante é que é realmente fácil ajustar esse recurso para usá-lo para incorporar qualquer tipo de ferramenta ou utilitário que você deseja em uma página MDN.

+ +

Código oculto

+ +

A primeira maneira de usar um exemplo de código para criar conteúdo de aprendizagem ativo é editar a página onde deseja adicionar seu conteúdo. Use o recurso Live Sample para criar seu conteúdo conforme desejar. Não se preocupe com a complexidade do código que você poderia escrever; apenas crie o que você precisa. Uma vez que o seu conteúdo esteja pronto, basta mudar para a visualização do código do editor e cercar seu código com um simples {{HTMLElement('div')}} elemento com a classeescondida. Ao fazê-lo, seu código não será exibido, mas sua amostra ao vivo permanece acessível e exibível.

+ +

Vamos ver um exemplo simples:

+ +
+

Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal

+ + +{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+ +

Se você olhar para o código HTML dessa página com o editor MDN, você verá o código HTML seguinte:

+ +
<div class="moreinfo">
+<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>
+
+<div class="hidden">
+<h4 id="hidden_code_example">hidden code example</h4>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">
+&lt;div class="square"&gt;
+  #&lt;input class="color"&gt;
+&lt;/div&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">
+body {
+  padding: 10px;
+  margin : 0;
+}
+
+.square {
+  width  : 80px;
+  height : 80px;
+  padding: 10px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+.color {
+  width: 60px;
+  text-transform: uppercase;
+}
+</pre>
+
+<h5 id="JS">JS</h5>
+
+<pre class="brush: js">
+function setColor(color) {
+  document.querySelector('.square').style.backgroundColor = '#' + color;
+  document.querySelector('.color').value = color;
+}
+
+function getRandomColor() {
+  var color = Math.floor(Math.random() * 16777215);
+  return color.toString(16);
+}
+
+function getInputColor() {
+  var value = document.querySelector('.color').value;
+  var color = Number('0x' + color);
+  if (color === +color) {
+    return color.toString(16);
+  }
+  return value;
+}
+
+document.addEventListener('click', function () {
+  setColor(getRandomColor());
+});
+
+document.addEventListener('keyup', function () {
+  setColor(getInputColor());
+});
+</pre>
+</div>
+
+\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+</div>
+ +

Você pode ver um exemplo mais avançado de tal ajuste sobre a página API do Canvas.

+ +

Código de fora da página

+ +

O exemplo anterior está certo se você deseja incorporar conteúdo básico de aprendizagem ativa. No entanto, se você quiser lidar com um código complexo, pode tornar-se um pouco estranho para lidar com esse wrapper de classe oculto.

+ +

Então, outra opção e escreva o código do seu conteúdo de aprendizagem em uma página MDN e, em seguida, incorpora-lo em outra página. Para fazer isso, podemos usar o {{TemplateLink ("EmbedDistLiveSample")}} macro em vez de {{TemplateLink ("EmbedLiveSample")}} macro.

+ +

Vamos ver como esse exemplo quando configurado como se estivesse sendo incorporado de uma origem remota:

+ +
+

Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal

+ +

{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}

+
+ +

Desta vez, se você olhar para o HTML da página usando o editor MDN , você não está a ver o código oculto. Se você quiser ver o código, vá para uma página que o hospeda.

+ +

Você pode ver um exemplo mais avançado do uso em nosso tutorial HTML Form , que usa essa técnica para permitir uma experiência com formulários.

diff --git a/files/pt-br/mdn/contribute/howto/create_and_edit_pages/index.html b/files/pt-br/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..85f02f9231 --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/create_and_edit_pages/index.html @@ -0,0 +1,147 @@ +--- +title: Criando e editando páginas +slug: MDN/Contribute/criando_e_editando_paginas +tags: + - Colaborando + - Colaborar + - Contribuindo + - Criando + - Editando + - MDN + - nova pagina +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}
+ +

As duas tarefas mais básicas sobre MDN que quase todo contribuinte MDN irá eventualmente executar são para editar uma página já existente ou criar uma nova. Este artigo aborda os conceitos básicos de como fazer cada uma delas.

+ +

Editando uma página existente

+ +

É fácil editar:

+ + + +

Ver mudanças

+ +

Para ver como suas mudanças ficaram:

+ + + +

Tenha cuidado! Pré-visualizar uma página não salva as alterações, sendo assim, se lembre de não fechar a página que você está editando sem salvar o conteúdo.

+ +

Revisão de comentário

+ +

Depois que você pré-visualizou suas mudanças, você deve querer salvar sua revisão. Antes de salvar, procure pela caixa de comentários de revisão abaixo da sessão de título da página e deixe um comentário para informar a outros voluntários o que você mudou e o motivo. Por exemplo, você pode ter adicionado uma nova sessão, mudado algumas palavras para fazer a terminologia mais consistente, reescrito um parágrafo para esclarecer o idioma, ou removido informação porque é redundante.

+ +

Tags

+ +

Você pode adicionar ou remover tags que descrevam o conteúdo da página. Veja como adicionar tags às páginas corretamente para mais informações em que as tags se aplicam.

+ +

Precisa de revisão?

+ +

Se você quiser que um contribuidor experiente revise suas edições, você pode requisitar uma revisão técnica (para códigos, APIs, ou tecnologias), uma revisão editorial (textual, de gramática ou conteúdo), ou uma revisão de template (para código KumaScript) se certificando que a caixa está marcada, antes que você salve.

+ +

Anexar arquivos

+ +

Se você quiser anexar um arquivo a uma página para adicionar uma ilustração ou tornar o conteúdo mais claro, o anexo pode ir no final da página.

+ +

Salve, descarte ou continue editando

+ +

Quando você termina uma edição com seu preview, você pode salvar seu trabalho e comentários clicando no botão verde "Salvar alterações" à direita do título da página. Se você mudar de ideia, pode descartar suas edições clicando no botão vermelho "Descartar alterações", também à direita do título da página.

+ +

Pressionar Enter no comentário da revisão é equivalente a clicar em "Salvar e continuar editando".

+ +

Criando uma nova página

+ +

Se você não sabe onde colocar seu artigo, não se preocupe sobre isso! Coloque-o em qualquer local e nós vamos encontrá-lo e movê-lo para onde ele pertence, ou mesclá-lo em conteúdo existente se for mais apropriado. Você também não precisa se preocupar sobre deixar tudo perfeito. Nós temos gnomos ajudantes felizes que vão ajudá-lo deixar seu conteúdo lindo.

+ +

Há algumas maneiras de criar uma nova página:

+ + + + + +

Como na maioria das wikis, na MDN é possível criar links para uma página que ainda não existe. Por exemplo, um autor pode criar uma lista de todos os membros de uma API, antes de criar as páginas para esses membros. Na MDN, links para página inexistentes geralmente são exibidos em vermelho.

+ +

Para criar um link para uma "página inexistente":

+ +
    +
  1. Certifique-se que você está logado na MDN. (Se você não estiver, vai receber um erro 404).
    2. +
  2. Clique no link "página inexistente". O MDN Editor UI abrirá, pronto para você criar a página inexistente.
    3. +
  3. Escreva o conteúdo da página e salve-a.
    4. +
+ + + +

Para criar uma nova página sem linkar de outra página, informe o nome único de uma página na barra de endereços do seu navegador. Por exemplo, se você inserir:

+ +
https://developer.mozilla.org/en-US/docs/FooBar
+ +

O MDN cria uma nova página com o título "FooBar" e abre o editor para você inserir o conteúdo nessa página. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.

+ +

Subpágina de uma página existente

+ +

Para criar uma subpágina que você quer que seja filha de uma página existente:

+ +
    +
  1. Na página "pai", clique no menu Avançado (o ícone de engrenagem na barra de ferramentas) e clique em Nova subpágina.
    2. +
  2. Digite um título para o documento no campo Título.
    3. +
  3. Mude o Slug se necessário (por exemplo, se o título for muito longo e você quiser um título menor). Esse campo é gerado automaticamente pelo editor, substituindo underlines por espaços no título. Nesse caso, você pode mudar apenas a última parte da URL do documento.
    4. +
+ +

Clone de uma página existente

+ +

Se houver uma página existente cujo formato você quer usar numa página nova, você pode clonar essa página e mudar seu conteúdo

+ +
    +
  1. Na página original, clique no menu Avançado (o ícone de engrenagem na barra de ferramentas) e clique em Clonar essa página. O editor vai abrir para que você mude seu conteúdo.
    2. +
  2. Mude o Título da página conforme apropriado. O campo Slug é atualizado automaticamente quando você muda o campo Título.
    3. +
  3. Se necessário, mude o caminho do campo Slug para colocar o documento em uma parte diferente da hierarquia dele.
    4. +
  4. No campo TOC, selecione os níveis de cabeçalho que você quer que sejam automaticamente exibidos na tabela de conteúdo da página, ou "Sem tabela de conteúdos" se a página não precisar de uma.
    5. +
  5. Escreva o conteúdo da página e salve suas alterações. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.
    6. +
+ + + +

Esse método é um pouco híbrido. Você pode criar um link em outra página, e clicar no link que você inseriu, para criar a nova página.

+ +
    +
  1. Digite o nome da página nova em qualquer lugar (que faça sentido) no texto de uma página existente.
    2. +
  2. Selecione o nome e clique no ícone de link () na barra de ferramentas do editor. A caixa de diálogo para "Atualizar Link" vai abrir com o texto selecionado no campo "Linkar para".
    3. +
  3. "/pt-BR/docs/" é inserido por padrão no começo do campo URL. Insira o nome da página depois de "/pt-BR/docs/". (O nome da página não tem de ser o mesmo texto do link).
    4. +
  4. Clique em OK para criar e inserir o link.
    5. +
+ +

Se a página já não existir, o link é mostrado em vermelho. Se a página já existir, o link é mostrado em azul. Se você quiser criar uma nova página mas o título da página que você quer já estiver sendo usado, verifique primeiro se não faz mais sentido ajudar a editar o conteúdo existente. Senão, pense num título diferente para sua nova página e crie um link para ela. Veja o guia para nomear páginas.

+ +

Para adicionar conteúdo para sua nova página, clique no link vermelho que você acabou de criar (depois de salvar e fechar o editor). A nova página abre no modo de edição, assim você pode começar a editar o conteúdo. Veja a sessão "Editando uma página existente" nesse artigo para ver como usar o editor.

+ +

Atualizando o conteúdo da página

+ +

O suporte do MDN para macros KumaScript e transclusão de conteúdo de uma página para outra pode algumas vezes ser dificultada pela necessidade de fazer um cache das páginas geradas para melhorar a performance. Páginas são feitas do seu código-fonte, e a saída é cacheada para requisições futuras. A partir de lá, quaisquer macros (templates) ou transclusões (utilizando a macro Page) na página não vão refletir mudanças feitar para o macro, a saída do macro, ou o conteúdo do material transcluso.

+ + + +

Veja também

+ + diff --git a/files/pt-br/mdn/contribute/howto/index.html b/files/pt-br/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..7a8e36996a --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/index.html @@ -0,0 +1,8 @@ +--- +title: Guia de contribuição +slug: MDN/Contribute/guia +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}

Os seguintes artigos fornecem orientações passo-a-passo para realização de tarefas específicas no MDN.

+ +

{{LandingPageListSubpages}}

diff --git a/files/pt-br/mdn/contribute/howto/tag/index.html b/files/pt-br/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..541d31ff6e --- /dev/null +++ b/files/pt-br/mdn/contribute/howto/tag/index.html @@ -0,0 +1,394 @@ +--- +title: Como adicionar etiquetas às páginas corretamente +slug: MDN/Contribute/guia/Como-marcar-as-paginas-corretamente +tags: + - Contribua + - Etiquetas + - Filtro + - Glossário + - Guia(2) + - Howto + - Iniciante + - Introdução + - MDN Meta + - Tags + - Tutorial +translation_of: MDN/Contribute/Howto/Tag +--- +
{{MDNSidebar}}
{{IncludeSubnav("/pt-BR/docs/MDN")}}
+ +

 As etiquetas dos artigos são uma forma importante de ajudar visitantes a encontrar o conteúdo procurado. Há muitas etiquetas usadas para ajudar a organizar as informações na MDN. Esta página vai lhe ensinar a melhor maneira de rotular as páginas, a fim de fazer com que as informações sejam organizadas, classificadas e localizadas mais facilmente. Cada página pode ser marcada por etiquetas que ajudam a classificar seu conteúdo.

+ +

 Você pode encontrar uma boa ajuda quanto às etiquetas em páginas na seção 'etiquetando', em nosso guia de edição.

+ +

Observe que o uso adequado de etiquetas é importante; nós estamos cada vez mais usando automação para gerar listas de conteúdo, páginas de destino e ligação cruzada de artigos. Falhar em marcar artigos corretamente (como indicado abaixo) pode impedir que os mesmos sejam listados precisamente.

+ +

Métodos de marcações usadas na MDN

+ +

Há muitas maneiras das etiquetas serem usadas na MDN:

+ +
+
Categorização
+
Qual o tipo desse documento? É uma referência? Um tutorial? Uma página de destino? As etiquetas podem ser usadas em filtros de busca, então elas são realmente importantes!
+
Identificação de tópico
+
Que tópico esse artigo envolve? É sobre uma API? O DOM? Gráficos? Estas também são importantes, pois elas podem ser usadas em filtros de buscas.
+
Estado da tecnologia
+
Qual é o estado dessa tecnologia? Isto não é padrão? Obsoleto ou moderno? Experimental?
+
Nível de habilidade
+
Para tutoriais e guias, quão avançado é o material do artigo?
+
Metadados do documento
+
Os escritores da MDN usam rótulos que informam quais páginas precisam de melhorias e de quais tipos.
+
+ +

Guia de tipos de marcação

+ +

Aqui está um guia rápido sobre os tipos de etiquetas e os possíveis valores para elas.

+ +

Categoria do Documento

+ +

Quando você rotula um artigo com uma destas categorias, você ajuda ferramentas automáticas a gerarem mais precisamente as páginas de entrada, tabela de conteúdos e assim por diante. Nosso novo sitema de pesquisa também vai usar esses termos para que nossos visitantes possam localizar referências e guias mais fácilmente.

+ +

Nós usamos os seguintes nomes de categorias como termos de etiquetamento padrão:

+ +
+
{{Tag("Intro")}}
+
O artigo fornece um material introdutório sobre algum tópico. Idealmente, cada área de tecnologia deveria ter apenas uma "introdução".
+
{{Tag("Featured")}}
+
O artigo é crucial e será exibido com relevância nas páginas de entrada. Use esta etiqueta moderadamente (nunca mais do que três páginas em cada área da documentação).
+
{{Tag("Reference")}}
+
O artigo contém material de referência sobre uma API, elementos, atributos, propriedades, ou coisas semelhantes.
+
{{Tag("Landing")}}
+
Indica que esta é uma página de entrada.
+
{{Tag("Guide")}}
+
O artigo é um guia ou um tutorial.
+
{{Tag("Example")}}
+
O artigo é uma página de amostra de código, ou tem exemplos de códigos (isto é, pedaços de códigos úteis, não uma linha de "exemplo de sintaxe") .
+
+ +

Tópico

+ +

Ao identificar o assunto tratado por um artigo você ajuda a gerar melhores resultados de pesquisa, assim como páginas de entrada e outros auxílios de navegação.

+ +

Apesar de ser permitida certa flexibilidade, ao passo que novos assuntos são identificados, preferimos que estas etiquetas tenham os mesmos nomes das APIs, ou tecnologias, demonstradas na página. Alguns exemplos:

+ + + +

No geral, se uma interface que possui várias páginas relacionadas a ela, como Node (que possui várias páginas sobre seus muitos métodos e propriedades), seu nome é uma boa etiqueta para identificar um tópico, assim como o nome de uma tecnologia abragente, ou seu tipo. Uma página sobre WebGL pode ser marcada com as tags Gráficos/Graphics e WebGL, por exemplo, e uma página sobre elementos {{HTMLElement("canvas")}} pode ser marcada com as etiquetas HTML, Elementos/Element, Tela/Canvas, e Gráficos/Graphics.

+ +

Estado da tecnologia

+ +

Para ajudar a entender se uma tecnologia é viável ou não, nós usamos as etiquetas que descrevem em que ponto estão as suas especificações. Fazer isso não detalha tanto quanto explicar, de fato, qual é a especificação e onde, nesse processo, a tecnologia está (para isto usamos uma tabela de "Especificações"), mas ajuda os leitores a julgar, rapidamente, se usar a tecnologia descrita no artigo é, ou não, uma boa ideia.

+ +

Alguns valores possíveis para estas etiquetas:

+ +
+
{{Tag("Read-only")}}
+
Aplique esta etiqueta para páginas que descrevem atributos ou propriedades que são "somente leitura".
+
+ +
+
{{Tag("Non-standard")}}
+
Indica que a tecnologia ou API não pertence a qualquer padrão, mas é considerada estável no(s) navegador(es) que a tem implementada. Se você não usar esta etiqueta os leitores vão presumir que o artigo é padronizado. A tabela de compatibilidade da página deve esclarecer quais navegadores suportam essa tecnologia ou API.
+
{{Tag("Deprecated")}}
+
A tecnologia ou API abrigada na página foi marcada como obsoleta na especificação e é esperado que seja, eventualmente, removida mas está, em geral, ainda presente nas versões mais recentes de navegadores.
+
{{Tag("Obsolete")}}
+
Foi decidido que a tecnologia ou API está ultrapassada e, assim, foi removida (ou está em processo de remoção) de todas as versões mais recentes de navegadores.
+
{{Tag("Experimental")}}
+
A tecnologia ou API não é padronizada, ainda é experimental e pode, ou não, vir a ser parte da especificação. Também está sujeita a alterações no mecanismo do navegador (tipicamente, apenas uma) que a implementa.
+
{{Tag("Needs Privileges")}}
+
A API requer acesso privilegiado ao aparelho no qual o código está rodando.
+
{{Tag("Certified Only")}}
+
A API funciona, apenas, em código certificado.
+
+ +

Estas etiquetas não são desculpa para não inserir uma tabela de compatibilidade em seu artigo!

+ +

Nível de habilidade

+ +

A etiqueta de nível de habilidade é usada, apenas, em guias e tutoriais (ou seja, páginas marcadas como Guias) a fim de auxiliar quem os procura a escolher  tutoriais baseados na familiaridade com a tecnologia. Existem trés valores para esta etiqueta:

+ +
+
{{Tag("Beginner")}}
+
Artigos escritos com a intenção de introduzir uma nova tecnologia, para iniciantes.
+
{{Tag("Intermediate")}}
+
Artigos para quem já tem experiência com a tecnologia, mas ainda não a domina completamente.
+
{{Tag("Advanced")}}
+
Artigos que levam ao limite as capacidades de quem lê e da tecnologia.
+
+ +

Metadados do documento

+ +

Os escritores da MDN usam etiquetas para identificar artigos que precisam de determinados tipos de trabalho. Segue uma lista das que mais usamos:

+ +
+
{{Tag("junk")}}
+
Este artigo precisa ser deletado.
+
{{Tag("NeedsContent")}}
+
Este artigo é um esboço, ou a informação está, de alguma forma, incompleta. Esta etiqueta significa que alguém precisa revisar o conteúdo e adicionar detalhes e/ou terminar a escrita do artigo.
+
{{Tag("NeedsExample")}}
+
O artigo precisa de um ou mais exemplos para ilustrar melhor seu objetivo, de acordo com o sistema de exemplos dinâmicos.
+
{{Tag("NeedsLiveSamples")}}
+
Este arigo necessita que um, ou mais, de seus exemplos sejam modificados para incluir o uso do sistema de exemplos dinâmicos.
+
{{Tag("NeedsUpdate")}}
+
O artigo está desatualizado.
+
{{Tag("l10n:exclude")}}
+
Não vale a pena traduzir este artigo e ele não aparecerá nas páginas sobre as situações das traduções.
+
{{Tag("l10n:priority")}}
+
Este artigo é importante e deve ser visto como prioridade para os tradutores da MDN. É mostrado em uma tabela de maior importância nas páginas sobre as situações das traduções.
+
+ +

Mapa Literário Web

+ +

O projeto WebMaker, através do Mapa Literário para a Web, definiu as habilidades necessárias para aperfeiçoar a leitura, a escrita e a participação na Web. Nós usamos essas habilidades literárias em forma de etiquetas, na MDN, para ajudar nossos utilizadores a encontrar as melhores respostas às suas necessidades:

+ +
+
{{Tag("Navigation")}}
+
Este artigo inclui informação sobre como navegar pela web.
+
{{Tag("WebMechanics")}}
+
Este artigo tem informação de como a web é organizada e como ela funciona.
+
{{Tag("Search")}}
+
Este artigo explica como localizar informação, pessoas e recursos na web.
+
{{Tag("Credibility")}}
+
A instrução neste artigo ajuda os leitores a entender como avaliar, criticamente, a informação encontrada na web.
+
{{Tag("Security")}}
+
Este artigo provê informação de como manter sistemas, identidades e conteúdo seguros.
+
{{Tag("Composing")}}
+
Este artigo explica como criar e selecionar conteúdo para a web.
+
{{Tag("Remixing")}}
+
Este artigo ensina como modificar recursos já existentes na web para criar algo novo.
+
{{Tag("Design")}}
+
Documentação sobre como aprimorar a estética visual e a experiência dos utilizadores.
+
{{Tag("Accessibility")}}
+
Documentos que descrevem como desenvolver conteúdo com acessibilidade, o que significa permitir que o máximo possível de pessoas possa acessá-lo, ainda que as suas habilidades sejam limitadas de alguma forma.
+
{{Tag("CodingScripting")}}
+
Como programar e/ou criar experiências interativas na web.
+
{{Tag("infrastructure")}}
+
Este documento explica as partes técnicas da internete.
+
{{Tag("Sharing")}}
+
O conteúdo deste artigo fala sobre as várias maneiras de criar recursos com outras pessoas.
+
{{Tag("Collaborating")}}
+
Este artigo provê informação de como trabalhar em conjunto com outras pessoas.
+
{{Tag("Community")}}
+
Este artigo detalha como se envolver com as comunidades da Web e entender como elas funcionam.
+
{{Tag("Privacy")}}
+
Este material ajuda a examinar as consequências de compatilhar dados online.
+
{{Tag("OpenPractices")}}
+
Este artigo demonstra como manter a Web acessível a todas as pessoas.
+
+ +

Colocando tudo junto

+ +

Para cada página você aplica vários tipos de etiquetas, por exemplo:

+ +
+
Um tutorial sobre WebGL para iniciantes
+
WebGL, Gráficos, Graphics, Guia, Guide, Iniciante, Beginner
+
Referência para elementos {{HTMLElement("canvas")}}
+
Canvas, Tela, HTML, Element, Elementos, Graphics Reference, Referencial Gráfico
+
Uma página de entrada para as ferramentas de desenvolvedores voltados ao Firefox OS
+
Tools, Ferramentas, Firefox OS, Landing, Destino
+
+ +

Etiquetas e filtros de busca

+ +

Filtros de busca não vão funcionar apropriadamente, a não ser que marquemos as páginas da MDN corretamente. Aqui está uma tabela dos filtros de pesquisa e sua busca correspondente.

+ +
+

Observação: Se várias etiquetas estiverem listadas abaixo de "Nome da etiqueta", isso significa que, pelo menos, uma delas precisa estar presente para o artigo estar propriamente marcado.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Grupo do filtroNome do filtro de pesquisaNome da etiqueta
TópicoOpen Web Apps{{Tag("Apps")}}
 HTML{{Tag("HTML")}}
 CSS{{Tag("CSS")}}
 JavaScript{{Tag("JavaScript")}}
 APIs e DOM{{Tag("API")}}
 Telas{{Tag("Canvas")}}
 SVG{{Tag("SVG")}}
 MathML{{Tag("MathML")}}
 WebGL{{Tag("WebGL")}}
 XUL{{Tag("XUL")}}
 Marketplace{{Tag("Marketplace")}}
 Firefox{{Tag("Firefox")}}
 Firefox para Android{{Tag("Firefox Mobile")}}
 Firefox para Computadores{{Tag("Firefox Desktop")}}
 Firefox OS{{Tag("Firefox OS")}}
 Dispositivos Móveis{{Tag("Mobile")}}
 Desenvolvimento Web{{Tag("Web Development")}}
 Complementos & Extensões{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
 Jogos{{Tag("Games")}}
Nível de habilidadeSou Especialista{{Tag("Advanced")}}
 Nível Intermediário{{Tag("Intermediate")}}
 Estou Começando{{Tag("Beginner")}}
Tipo de documentoDocumentosEsta vai restringir a busca ao teor dos documentos, deixando de fora Hacks e outros conteúdos MDN.
 DemosIsto vai incluir as demonstrações (Demo Studio) nos resultados da busca.
 Ferramentas{{Tag("Tools")}}
 Exemplos de Códigos{{Tag("Example")}}
 Guia & Tutorial{{Tag("Guide")}}
 Perfis de desenvolvedoresEsta inclui os perfis de desenvolvedores da comunidade MDN nos resultados da busca.
 Recursos ExternosIsto é alguma coisa que a equipe de desenvolvimento vai ter que solucionar.
+ +

Problemas de etiquetas que você pode consertar

+ +

Há vários tipos de problemas de rotulagem que você pode ajudar a resolver:

+ +
+
Sem etiquetas
+
Geralmente os artigos devem ter, no minimo, as etiquetas de "categória" e "tópico". Comumente outras etiquetas podem ser adicionadas mas, se você ajudar a garantir que o requesito minimo delas esteja presente, você já terá uma documentação maravilhosa!
+
Etiquetas que não seguem nossos padrões
+
Por favor, conserte qualquer documento cujas etiquetas não sigam as normas estabelecidas nesta página. Leve em consideração que, devido a um erro no Kuma, algumas etiquetas traduzidas (como Référence) podem aparecer em algumas páginas em inglês. Há uma chance bem grande destas etiquetas voltarem após serem deletadas, então, não se acanhe em consertá-las, até o erro ser corrigiido.
+
Etiquetas incorretas
+
Se você estiver lendo um artigo sobre HTML e este estiver marcado com "JavaScript", provavelmente há algo errado! Da mesma forma, se um artigo discutir os detalhes internos da Mozilla mas exibir uma etiqueta "Web", provavelmente existe algo errado aí, também. Remova essas tetiquetas e adicione as corretas, se elas ainda não estiverem lá. Por favor, também corrija etiquetas escritas incorretamente (p.ex. "javascript"  não está de todo errada, uma vez que etiquetas não consideram maiúsculas, ou minúsculas, mas vamos ter capricho!: )
+
Carência de Etiquetas
+
Se um artigo tem algumas, mas não todas as etiquetas de que precisa, sinta-se à vontade para adicionar mais. Por exemplo: se uma página de referência de JavaScript estiver (corretamente) marcada com "JavaScript" e nada mais além disso, agradecemos se você inserir a etiqueta "Referência/Reference" lá, também!
+
Etiquetas indesejáveis (spam)
+
Esta besta asquerosa é o mais revoltante dos problemas de etiquetas: Algum verme da Web depositou suas excreções nas etiquetass de uma página (como "Programa Grátis!" ou "Ei, eu estava navegando pela sua página e queria perguntar se você me ajudaria a resolver esse problema que estou tendo com o Flash travando o tempo todo"). Temos que remover estas "etiquetas" assim que possível! Elas são horrendas, difíceis de manejar se esperarmos demais, e atrapalham muito a {{Glossary("SEO")}}.
+
+ +

Se você vir um (ou mais) destes problemas, por favor, registre-se, ou entre na MDN e clique no botão "EDITAR", no canto superior direito da página. Quando o editor carregar, role até o pé da página e você verá as etiquetas. Para mais detalhes da interface de marcação, leia a seção "As caixas de etiquetas" do Guia do editor da MDN.

diff --git a/files/pt-br/mdn/contribute/processes/index.html b/files/pt-br/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..bfac34ce26 --- /dev/null +++ b/files/pt-br/mdn/contribute/processes/index.html @@ -0,0 +1,6 @@ +--- +title: Processos de documentação +slug: MDN/Contribute/Processos +translation_of: MDN/Contribute/Processes +--- +
{{MDNSidebar}}

O projeto de documentação do MDN é enorme; há um grande número de tecnologias para cobrir e nós temos centenas de colaboradores em todo o mundo. Para ajudar a trazer ordem ao caos, temos processos padrões a seguir quando se trabalha em tarefas específicas relacionadas com a documentação. Aqui você vai encontrar os guias para esses processos.

diff --git a/files/pt-br/mdn/contribute/processos/index.html b/files/pt-br/mdn/contribute/processos/index.html deleted file mode 100644 index bfac34ce26..0000000000 --- a/files/pt-br/mdn/contribute/processos/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Processos de documentação -slug: MDN/Contribute/Processos -translation_of: MDN/Contribute/Processes ---- -
{{MDNSidebar}}

O projeto de documentação do MDN é enorme; há um grande número de tecnologias para cobrir e nós temos centenas de colaboradores em todo o mundo. Para ajudar a trazer ordem ao caos, temos processos padrões a seguir quando se trabalha em tarefas específicas relacionadas com a documentação. Aqui você vai encontrar os guias para esses processos.

diff --git a/files/pt-br/mdn/editor/basics/index.html b/files/pt-br/mdn/editor/basics/index.html deleted file mode 100644 index 5f06217a31..0000000000 --- a/files/pt-br/mdn/editor/basics/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Elementos de Interface do Editor -slug: MDN/Editor/Basics -translation_of: MDN/Editor/Basics ---- -
{{MDNSidebar}}
- -

O editor WYSIWYG embutido no MDN foi projetado para fazer com que seja o mais fácil possível criar, editar, e aprimorar artigos e praticamente qualquer outra página do site. A janela do editor, como mostrada abaixo, consiste em oito áreas principais. Este guia oferece informações sobre cada seção para que você saiba como utilizar inteiramente nosso ambiente de edição.

- -
-

Estamos constantemente trabalhando em melhorias para o MDN, então haverá momentos em que este documento ou as capturas de tela abaixo estejam um pouco desatualizados. Portanto, iremos atualizar este documento periodicamente, evitando que se torne inutilizável.

-
- -

Screenshot of the editor UI (August 2017) with each section labeled

- -

A interface do editor contém as seguintes seções, como mostrado acima. Clique abaixo para ler sobre cada seção do editor respectivamente.

- - - -

Caixa de ediçao

- -

A caixa de edição é, evidementente, onde você irá realmente produzir o seu texto.

- -

Clicando com o botão direito na caixa de edição, exibe-se opções apropriadas adicionais dependendo de onde você clicar: clicar com o botão direito do mouse em uma tabela irá mostrar opções relacionadas à tabela e clicar com o botão direito em uma lista, irá apresentar opções sobre àquela lista, por exemplo. Por padrão o editor utiliza seu próprio menu quando você clica com o botão direito no editor. Para acessar o menu padrão do seu navegador (como acessar a lista de correções do corretor ortográfico do Firefox), mantenha pressionada a tecla Shift ou a tecla Control (tecla Command no Mac OS X) enquanto estiver clicando.

- -

Quando estiver trabalhando na caixa de edição, você pode usar essas teclas de atalho.

- -

Comentários de revisão

- -

Depois de fazer suas alterações, é extremamente recomendável que você adicione um comentário para sua revisão. Ele ficará disponível no histórico de revisão da página, assim como no Painel de controle. Isto irá ajudar a explicar ou justificar suas alterações para os outros que revisarão o seu trabalho depois. Para adicionar um comentário de revisão, escrevá-o na caixa de comentário antes de clicar em um dos dois botões de Publicar na parte superior e inferior da página.

- -

Existem algumas razões pelas quais isto é útil:

- - - -

Review requests

- -

The MDN community uses reviews to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

- -

To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

- -

While selecting a review checkbox adds the article to the lists of those needing technical review or needing editorial review, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a subject-matter expert in the relevant technical area. For editorial reviews, you can post in the MDN discussion forum to request that someone review your changes.

- -

Be sure to click one of the Publish buttons after making your selections, to commit your review request.

- -

See also

- - - - diff --git a/files/pt-br/mdn/editor/index.html b/files/pt-br/mdn/editor/index.html deleted file mode 100644 index 289d09b69f..0000000000 --- a/files/pt-br/mdn/editor/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Guia do editor MDN -slug: MDN/Editor -translation_of: MDN/Editor ---- -
{{MDNSidebar}}

O editor WYSIWYG (what-you-see-is-what-you-get) oferecido pela Mozilla Developer Network wiki torna fácil a contribuição de conteúdo novo. O guia de editor MDN fornece algumas informações sobre como usar o editor, assim como algumas informações sobre recursos úteis que podem melhorar sua produtividade. Por favor, certifique-se de ler (e está de acordo com) o Mozilla Terms antes de editar ou criar novas páginas.

- -

O Guia de estilo MDN oferece informação sobre como formatar e estilizar o conteúdo em si, incluindo as nossas regras de gramática e ortografia preferenciais.

-

{{LandingPageListSubpages}}

-

{{EditorGuideQuicklinks}}

diff --git a/files/pt-br/mdn/guidelines/style_guide/index.html b/files/pt-br/mdn/guidelines/style_guide/index.html deleted file mode 100644 index 3776744cbd..0000000000 --- a/files/pt-br/mdn/guidelines/style_guide/index.html +++ /dev/null @@ -1,571 +0,0 @@ ---- -title: Guia de estilo de escrita -slug: MDN/Guidelines/Style_guide -translation_of: MDN/Guidelines/Writing_style_guide ---- -
{{MDNSidebar}}
- -

Em um esforço para apresentar a documentação de maneira organizada, padronizada e fácil de ler a guia de estilo MDN Web Docs descreve como o texto deve ser organizado, escrito, formatado, e assim por diante. Estas sao orientações mais do que regras estritas. Nos estamos mais interessados em conteúdo do que em formatação, então não se sinta obrigado a aprender a guia de estilo antes de contribuir. Não fique chateado/a ou surpreso/a caso algum/a voluntário/a trabalhador/a edite o seu trabalho de acordo com esta guia.

- -

Se você esta procurando por coisas específicas sobre como determinado tipo de página deve ser estruturado, veja a página sobre guia de layout MDN.

- -

Os aspetos relacionado a linguagem desta guia aplicam-se principalmente a documentação em Inglês. Outras idiomas devem ter (e são bem-vindos a criar) seu próprio guia de estilo. Estes devem ser publicados como sub-páginas da página do time de localização.

- -

Para os estilos padrão que se aplicam ao conteúdo escrito por outros sites que não sejam a MDN, referir-se a guia de estilo Única Mozilla.

- -

Básico

- -

O melhor lugar para começar em qualquer publicação extensa sobre guia de estilo é com padrões de texto muito simples para ajudar a manter a consistência da documentação. As seguintes seções esboçam alguns destes padrões básicos para ajudar você.

- -

Título das Páginas

- -

Títulos de páginas são usados em resultados de pesquisa e também usados para estruturar a hierarquia da página na lista de breadcrumb(literalmente migalhas de pão) na parte superior da página. O título da página (que é exibido na parte superior da página e nos resultados de pesquisa) pode ser diferente da página "slug", que é a parte do URL da página que segue "<local>/docs/".

- -

Maisuculização de títulos e cabeçalhos

- -

Títulos de páginas e seções de cabeçalho devem usar letras maiúsculas no estilo da frase (Maiúsculas so na primeira palavra e nomes próprios) em vez de letras maiúsculas no estilo de título:

- - - -

Nós temos muitas páginas antigas que foram escritas antes que essa regra de estilo fosse estabelecida. Sinta-se livre para atualizá-las se achar necessário. Estamos atualizando-as gradualmente.

- -

Escolhendo títulos e slugs

- -

Slugs de página devem ser mantidas curtas; quando criar um novo nível de hierarquia, o componente do novo nível no slug, geralmente, deve ser só uma ou duas palavras.

- -

Títulos de páginas, por outro lado, podem ser grandes o quanto quiser, sendo razoável, e devem ser descritivos.

- -

Criando novas subárvores

- -

Quando você precisar adicionar vários artigos sobre um tópico ou um assunto do tópico, você normalmente fará isso criando uma página de destino e adicionando subpáginas para cada um dos artigos individuais. A página de destino deve abrir com um ou dois parágrafos descrevendo o tópico ou a técnologia e, em seguida, fornecer uma lista de subpáginas com descrições de cada página. Você pode automatizar a inserção de páginas na lista usando algumas macros que criamos.

- -

Por exemplo, considere a guia JavaScript, que é estruturada da seguinte forma:

- - - -

Tente evitar colocar seu artigo no topo da hierarquia, o que torna lento o site e menos eficiente a pesquisa e a navegação.

- -

Orientações gerais do conteúdo do artigo

- -

Quando estiver escrevendo qualquer documento é importante conhecer o quanto falar. Se ficar divagando muito o artigo fica tedioso de ler e ninguém ira usa-lo. Escolher a quantidade certa a falar sobre o assunto é muito importante por diversas razões. Entre essas razões: assegurar que o leitor encontre a informação que eles precisam, prover suficiente material de qualidade para os engines de pesquisa poderem analizar e classificar o artigo de maneira adequada. Iremos discutir ao respeito disso aqui. Para aprender um pouco mais sobre como fazer as páginas são classificadas pelos engines de pesquisa, vejam o artigo Como escrever SEO para MDN.

- - - -

Seções, parágrafos e novas linhas

- -

Use os níveis de cabeçalho em ordem decrescente na hierarquia: {{HTMLElement("h2")}} depois {{HTMLElement("h3")}} depois {{HTMLElement("h4")}}, sem pular níveis. {{HTMLElement("h2")}} é o maior nível permitido, pois {{HTMLElement("h1")}} está reservado para o título da página. Se perceber que precisará de mais de 3 ou 4 níveis de cabeçalho, considere fragmentar seu artigo em artigos menores, ou colocando uma landing page, linkando estes com o {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, e {{TemplateLink("PreviousNext")}} macros.

- -

O Enter (ou Return) do seu teclado inicia um novo parágrafo. Para inserir uma nova linha sem espaço, faça Shift + Enter.

- -

Algumas regras

- - - -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
Note: The "Note" style is used to call out important notes, like this one.
- -
Warning: Similarly, the "Warning" style creates warning boxes like this.
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

- -

Code sample style and formatting

- -

Tabs and line breaks

- -

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

- -
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
-       || class.YET_ANOTHER_CONDITION ) {
-  /* something */
-}
-
-var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
-                           .createInstance(Components.interfaces.nsIToolkitProfileService);
-
- -

Inline code formatting

- -

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

- -
-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

- -
x = 42;
- -

Styling HTML element references

- -

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

- -
-
Element names
-
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
-
Attribute names
-
Use bold face.
-
Attribute definitions
-
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
-
Attribute values
-
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
-
Labeling attributes
-
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
-
- -

Latin abbreviations

- -

In notes and parentheses

- - - -

In running text

- - - -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- - - -

Expansion

- -

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

- - - -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- - - -

Capitalization

- -

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

- -

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."

- -

Contractions

- -

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- - - -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- - - -

Gender-neutral language

- -

It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.
-
- Let's take the following example:

- -
-

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

-
- -
-

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

-
- -

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

- -
-

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

-
- -
-

Note: MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

-
- -

You can use both genders:

- -
-

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

-
- -

making the users plural:

- -
-

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

-
- -

The best solution, of course, is to rewrite and eliminate the pronouns completely:

- -
-

A confirmation dialog appears, requesting the user's permission for web cam access.

-
- -
-

A confirmation dialog box appears, which asks the user for permission to use the web cam.

-
- -

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.

- -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- - - -

Alternately, you can use the YYYY/MM/DD format.

- - - -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- - - -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- - - -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- - - -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- - - -
-

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Spelling

- -

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

- - - -

Terminology

- -

Obsolete vs. deprecated

- -

It's important to be clear on the difference between the terms obsolete and deprecated.

- -
-
Obsolete:
-
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
-
Deprecated:
-
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
-
- -

HTML elements

- -

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

- - - -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- - - -

Voice

- -

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

- -

Wiki markup and usage

- - - -

To automatically create a link to a Bugzilla bug, use this template:

- -
\{{Bug(322603)}}
-
- -

This results in:

- -

{{Bug(322603)}}

- -

For WebKit bugs, you can use this template:

- -
\{{Webkitbug("322603")}}
-
- -

This results in:

- -

{{Webkitbug("322603")}}

- -

Page tags

- -

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

- -

To remove a tag, simply click the little "X" icon in the tag.

- -

Tagging pages that need work

- -

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

- - - -

SEO summary

- -

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

- -

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".
-
Tools
-
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

<<<finish this once we finalize the landing page standards>>>

- -

Using, inserting images

- -

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

- -
    -
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. -
  2. Create an image in the WYSIWYG editor
    3. -
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. -
  4. Press OK.
    5. -
- -

Other References

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

- -

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

- -

MDN-specific

- - - -

Language, grammar, spelling

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

- - diff --git a/files/pt-br/mdn/guidelines/writing_style_guide/index.html b/files/pt-br/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..3776744cbd --- /dev/null +++ b/files/pt-br/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,571 @@ +--- +title: Guia de estilo de escrita +slug: MDN/Guidelines/Style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +

Em um esforço para apresentar a documentação de maneira organizada, padronizada e fácil de ler a guia de estilo MDN Web Docs descreve como o texto deve ser organizado, escrito, formatado, e assim por diante. Estas sao orientações mais do que regras estritas. Nos estamos mais interessados em conteúdo do que em formatação, então não se sinta obrigado a aprender a guia de estilo antes de contribuir. Não fique chateado/a ou surpreso/a caso algum/a voluntário/a trabalhador/a edite o seu trabalho de acordo com esta guia.

+ +

Se você esta procurando por coisas específicas sobre como determinado tipo de página deve ser estruturado, veja a página sobre guia de layout MDN.

+ +

Os aspetos relacionado a linguagem desta guia aplicam-se principalmente a documentação em Inglês. Outras idiomas devem ter (e são bem-vindos a criar) seu próprio guia de estilo. Estes devem ser publicados como sub-páginas da página do time de localização.

+ +

Para os estilos padrão que se aplicam ao conteúdo escrito por outros sites que não sejam a MDN, referir-se a guia de estilo Única Mozilla.

+ +

Básico

+ +

O melhor lugar para começar em qualquer publicação extensa sobre guia de estilo é com padrões de texto muito simples para ajudar a manter a consistência da documentação. As seguintes seções esboçam alguns destes padrões básicos para ajudar você.

+ +

Título das Páginas

+ +

Títulos de páginas são usados em resultados de pesquisa e também usados para estruturar a hierarquia da página na lista de breadcrumb(literalmente migalhas de pão) na parte superior da página. O título da página (que é exibido na parte superior da página e nos resultados de pesquisa) pode ser diferente da página "slug", que é a parte do URL da página que segue "<local>/docs/".

+ +

Maisuculização de títulos e cabeçalhos

+ +

Títulos de páginas e seções de cabeçalho devem usar letras maiúsculas no estilo da frase (Maiúsculas so na primeira palavra e nomes próprios) em vez de letras maiúsculas no estilo de título:

+ + + +

Nós temos muitas páginas antigas que foram escritas antes que essa regra de estilo fosse estabelecida. Sinta-se livre para atualizá-las se achar necessário. Estamos atualizando-as gradualmente.

+ +

Escolhendo títulos e slugs

+ +

Slugs de página devem ser mantidas curtas; quando criar um novo nível de hierarquia, o componente do novo nível no slug, geralmente, deve ser só uma ou duas palavras.

+ +

Títulos de páginas, por outro lado, podem ser grandes o quanto quiser, sendo razoável, e devem ser descritivos.

+ +

Criando novas subárvores

+ +

Quando você precisar adicionar vários artigos sobre um tópico ou um assunto do tópico, você normalmente fará isso criando uma página de destino e adicionando subpáginas para cada um dos artigos individuais. A página de destino deve abrir com um ou dois parágrafos descrevendo o tópico ou a técnologia e, em seguida, fornecer uma lista de subpáginas com descrições de cada página. Você pode automatizar a inserção de páginas na lista usando algumas macros que criamos.

+ +

Por exemplo, considere a guia JavaScript, que é estruturada da seguinte forma:

+ + + +

Tente evitar colocar seu artigo no topo da hierarquia, o que torna lento o site e menos eficiente a pesquisa e a navegação.

+ +

Orientações gerais do conteúdo do artigo

+ +

Quando estiver escrevendo qualquer documento é importante conhecer o quanto falar. Se ficar divagando muito o artigo fica tedioso de ler e ninguém ira usa-lo. Escolher a quantidade certa a falar sobre o assunto é muito importante por diversas razões. Entre essas razões: assegurar que o leitor encontre a informação que eles precisam, prover suficiente material de qualidade para os engines de pesquisa poderem analizar e classificar o artigo de maneira adequada. Iremos discutir ao respeito disso aqui. Para aprender um pouco mais sobre como fazer as páginas são classificadas pelos engines de pesquisa, vejam o artigo Como escrever SEO para MDN.

+ + + +

Seções, parágrafos e novas linhas

+ +

Use os níveis de cabeçalho em ordem decrescente na hierarquia: {{HTMLElement("h2")}} depois {{HTMLElement("h3")}} depois {{HTMLElement("h4")}}, sem pular níveis. {{HTMLElement("h2")}} é o maior nível permitido, pois {{HTMLElement("h1")}} está reservado para o título da página. Se perceber que precisará de mais de 3 ou 4 níveis de cabeçalho, considere fragmentar seu artigo em artigos menores, ou colocando uma landing page, linkando estes com o {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, e {{TemplateLink("PreviousNext")}} macros.

+ +

O Enter (ou Return) do seu teclado inicia um novo parágrafo. Para inserir uma nova linha sem espaço, faça Shift + Enter.

+ +

Algumas regras

+ + + +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
Note: The "Note" style is used to call out important notes, like this one.
+ +
Warning: Similarly, the "Warning" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

+ +

Code sample style and formatting

+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

+ +
+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

+ +
x = 42;
+ +

Styling HTML element references

+ +

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
+
Attribute names
+
Use bold face.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
+
Labeling attributes
+
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

+ +

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."

+ +

Contractions

+ +

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

+
+ +

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

+
+ +
+

Note: MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to rewrite and eliminate the pronouns completely:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Spelling

+ +

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

+ + + +

Terminology

+ +

Obsolete vs. deprecated

+ +

It's important to be clear on the difference between the terms obsolete and deprecated.

+ +
+
Obsolete:
+
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
+
Deprecated:
+
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
+
+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

To automatically create a link to a Bugzilla bug, use this template:

+ +
\{{Bug(322603)}}
+
+ +

This results in:

+ +

{{Bug(322603)}}

+ +

For WebKit bugs, you can use this template:

+ +
\{{Webkitbug("322603")}}
+
+ +

This results in:

+ +

{{Webkitbug("322603")}}

+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, simply click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ + + +

SEO summary

+ +

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

+ +

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

<<<finish this once we finalize the landing page standards>>>

+ +

Using, inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. +
  2. Create an image in the WYSIWYG editor
    3. +
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. +
  4. Press OK.
    5. +
+ +

Other References

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/pt-br/mdn/kuma/index.html b/files/pt-br/mdn/kuma/index.html deleted file mode 100644 index 6fd43defb2..0000000000 --- a/files/pt-br/mdn/kuma/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'Kuma: MDN''s wiki platform' -slug: MDN/Kuma -tags: - - projeto kuma -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -

Kuma é a plataforma wiki que  auxilia o Mozilla Developer Network. É uma plataforma open source escrita em Python utilizando o framework Django.

- -
-
-

Documentação do Kuma

- -
-
A API Kuma
-
Kuma provê de uma simples API que lhe permite acessar informações através das páginas,  e até enviar novas páginas de conteúdo.
-
Introdução ao KumaScript:
-
...o modelo de linguagem Kuma.
-
Usando KumaScript e modelos
-
Um guia de como usar modelos KumaScript em um artigo de conteúdo.
-
Referência do KumaScript
-
Uma referência para o KumaScript.
-
O Kuma PUT API
-
O PUT API experimental torna possível a criação e atualização de artigos no MDN remotamente. Também é possível, por instância, escrever scripts que automaticamente geram e enviam artigos baseados na IDL ou nos conteúdos dos arquivos de cabeçalho.
-
Contribuindo para o Kuma
-
Um guia de como fazer um fork do Kuma e contribuir para o projeto.
-
- -

Classificação de arquivos mais antigos:

- - - -

Ver tudo...

-
- -
-

Ferramentas e tarefas

- -
-
Gráficos do Servidor
-
Alguns dos nossos gráficos New Relic
-
Bugs
-
Uma lista dos bugs do Kuma. Sinta-se livre para olha-los e encontrar algo que você gostaria de corrigir. Esse link requer que você logue no Bugzilla.
-
Ferrmentas e Links
-
Esta página tem uma lista detalhada de várias ferramentas utéis e páginas de documentção. Encontre páginas que nossos desenvolvedores usam todos os dias!
-
Informar um bug
-
Se você teve algum problema com o Kuma,  ou possui uma ideia para o torna-lo melhor, você pode arquivar um bug!
-
Log de mudanças
-
Uma lista das últimas mundaças enviadas; um ótimo lugar para visualizar o que aconteceu recentemente.
-
O que é implantado?
-
Um quadro de status que mostra o que foi implantado ao server de produção.
-
Roteiro de Engenhria
-
Quadro do Trello usado para gerenciamento do trabalho regular  no projeto do Kuma.
-
-
-
diff --git a/files/pt-br/mdn/paineis/index.html b/files/pt-br/mdn/paineis/index.html deleted file mode 100644 index 0aab5076a9..0000000000 --- a/files/pt-br/mdn/paineis/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Painéis -slug: MDN/Paineis -tags: - - MDN Meta - - Rascunho - - Visão Geral - - painéis -translation_of: MDN/Dashboards ---- -
{{MDNSidebar}}{{Draft}}
- -

Aqui estão alguns painéis que exibem algumas métricas.

- -

Saiba mais sobre nossos Editores

- -

{{SubpagesWithSummaries}}

diff --git a/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html b/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html deleted file mode 100644 index 56053d6468..0000000000 --- a/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Solucionando problemas de erros de KumaScript -slug: MDN/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript -tags: - - Erros - - Ferramentas - - Guía - - KumaScript - - MDN Meta -translation_of: MDN/Tools/KumaScript/Troubleshooting ---- -
{{MDNSidebar}}
-

Erros de KumaScript aparecendo numa página podem ser muito desagradáveis aos leitores, mostrando grandes e medonhas caixas vermelhas, mas felizmente qualquer pessoa com uma conta MDN pode editar um documento e consertar tais tipos de erros. Quando uma página possui algum erro, ela é adicionada na lista de documentos com erros. Editores do site passam por essa lista regularmente para achar e consertar erros. Este artigo detalha os quatro tipos de erros de KumaScript, e alguns passos que você pode fazer para consertá-los.

-
- -

Erro tipo DocumentParsingError

- -

DocumentParsingError erros aparecem quando o KumaScript tem problemas para entender alguma coisa no próprio documento. A causa mais comum é um erro de sintaxe em alguma macro.

- -

Verifique:

- -
-
Uso de chaves sem a intenção de chamar uma macro.
-
Se você pretende escrever  \{ num documento sem usar macro, você pode escapar as chaves com uma barra invertida \ da seguinte forma: \\{
-
Uso de caractére especial nos parâmetros de uma macro.
-
Se você pretende usar aspas duplas " ou barra invertida \ dentro de algum parâmetro para uma macro, eles podem ser escapados através de uma barra invertida \ da seguinte forma: \\ or \"
-
Falta de vírgula para separar parâmetros de macro.
-
Parâmetros de macro precisam ser separados por uma vírgula (,) exceto no último parâmetro (ou se for único); por exemplo \{\{anch("top", "Back to top")}}.
-
Tags HTML aparecendo dentro de uma chamada de macro
-
Se você aplicar estilos a uma macro, geralmente não irá funcionar, pois uma tag </code> pode aparecer dentro do código fonte da macro, causado erros de sintaxe na macro. Verifique a visão de código-fonte para ver o código que foi gerado, e remova qualquer estilo desnecessário.
-
- - - -

Erro tipo TemplateLoadingError

- -

TemplateLoadingError erros aparecendo quando um KumaScript tem problemas de encontrar qual macro incluir numa página.

- -

Verifique:

- -
-
Nomes com erro ortográfico ou macros renomeadas.
-
Você pode ver a lista de macros conhecidas no Repositório do Github.
-
- -
-

Dica: Você pode tornar mais rápido e fácil avançar para uma macro específica adicionando uma busca por palavras-chave no Firefox. Veja {{SectionOnPage("/en-US/docs/MDN/Contribute/Tools/KumaScript", "Using search keywords to open template pages")}} para um guia passo-a-passo de criar uma busca para isso.

-
- -

Erro tipo TemplateExecutionError

- -

TemplateExecutionError erros aparecem quando KumaScript encontra erros na macro. Esses erros só podem ser consertados por usuários administradores e precisam ser reportados como bugs.

- -

Antes de reportar um erro, verifique se ele ainda não foi consertado. Você pode fazer isso forçando o KumaScript a te dar uma cópia fresca da página segurando Shift  enquanto atualiza a página (Shift + Ctrl + R no Windows/Linux, Shift + Cmd + R no Mac).

- -

Se os erros persistirem, reporte um bug, incluindo a URL da página e o texto do erro.

- -

Erro tipo Error & Unknown

- -

Este é um tipo de erro que aparece quando o erro não pertence aos outros tipos de erros.

- -

Verifique se existe alguma solução de contorno ou correção para o problema e reporte bugs persistentes como descrito em TemplateExecutionError.

diff --git a/files/pt-br/mdn/tools/kumascript/troubleshooting/index.html b/files/pt-br/mdn/tools/kumascript/troubleshooting/index.html new file mode 100644 index 0000000000..56053d6468 --- /dev/null +++ b/files/pt-br/mdn/tools/kumascript/troubleshooting/index.html @@ -0,0 +1,63 @@ +--- +title: Solucionando problemas de erros de KumaScript +slug: MDN/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript +tags: + - Erros + - Ferramentas + - Guía + - KumaScript + - MDN Meta +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +
{{MDNSidebar}}
+

Erros de KumaScript aparecendo numa página podem ser muito desagradáveis aos leitores, mostrando grandes e medonhas caixas vermelhas, mas felizmente qualquer pessoa com uma conta MDN pode editar um documento e consertar tais tipos de erros. Quando uma página possui algum erro, ela é adicionada na lista de documentos com erros. Editores do site passam por essa lista regularmente para achar e consertar erros. Este artigo detalha os quatro tipos de erros de KumaScript, e alguns passos que você pode fazer para consertá-los.

+
+ +

Erro tipo DocumentParsingError

+ +

DocumentParsingError erros aparecem quando o KumaScript tem problemas para entender alguma coisa no próprio documento. A causa mais comum é um erro de sintaxe em alguma macro.

+ +

Verifique:

+ +
+
Uso de chaves sem a intenção de chamar uma macro.
+
Se você pretende escrever  \{ num documento sem usar macro, você pode escapar as chaves com uma barra invertida \ da seguinte forma: \\{
+
Uso de caractére especial nos parâmetros de uma macro.
+
Se você pretende usar aspas duplas " ou barra invertida \ dentro de algum parâmetro para uma macro, eles podem ser escapados através de uma barra invertida \ da seguinte forma: \\ or \"
+
Falta de vírgula para separar parâmetros de macro.
+
Parâmetros de macro precisam ser separados por uma vírgula (,) exceto no último parâmetro (ou se for único); por exemplo \{\{anch("top", "Back to top")}}.
+
Tags HTML aparecendo dentro de uma chamada de macro
+
Se você aplicar estilos a uma macro, geralmente não irá funcionar, pois uma tag </code> pode aparecer dentro do código fonte da macro, causado erros de sintaxe na macro. Verifique a visão de código-fonte para ver o código que foi gerado, e remova qualquer estilo desnecessário.
+
+ + + +

Erro tipo TemplateLoadingError

+ +

TemplateLoadingError erros aparecendo quando um KumaScript tem problemas de encontrar qual macro incluir numa página.

+ +

Verifique:

+ +
+
Nomes com erro ortográfico ou macros renomeadas.
+
Você pode ver a lista de macros conhecidas no Repositório do Github.
+
+ +
+

Dica: Você pode tornar mais rápido e fácil avançar para uma macro específica adicionando uma busca por palavras-chave no Firefox. Veja {{SectionOnPage("/en-US/docs/MDN/Contribute/Tools/KumaScript", "Using search keywords to open template pages")}} para um guia passo-a-passo de criar uma busca para isso.

+
+ +

Erro tipo TemplateExecutionError

+ +

TemplateExecutionError erros aparecem quando KumaScript encontra erros na macro. Esses erros só podem ser consertados por usuários administradores e precisam ser reportados como bugs.

+ +

Antes de reportar um erro, verifique se ele ainda não foi consertado. Você pode fazer isso forçando o KumaScript a te dar uma cópia fresca da página segurando Shift  enquanto atualiza a página (Shift + Ctrl + R no Windows/Linux, Shift + Cmd + R no Mac).

+ +

Se os erros persistirem, reporte um bug, incluindo a URL da página e o texto do erro.

+ +

Erro tipo Error & Unknown

+ +

Este é um tipo de erro que aparece quando o erro não pertence aos outros tipos de erros.

+ +

Verifique se existe alguma solução de contorno ou correção para o problema e reporte bugs persistentes como descrito em TemplateExecutionError.

diff --git a/files/pt-br/mdn/tools/page_regeneration/index.html b/files/pt-br/mdn/tools/page_regeneration/index.html deleted file mode 100644 index 16808c9615..0000000000 --- a/files/pt-br/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Page regeneration -slug: MDN/Tools/Page_regeneration -tags: - - Ferramentas - - Guia(2) - - MDN Meta - - Page-level -translation_of: MDN/Tools/Page_regeneration ---- -
{{MDNSidebar}}

O site da MDN cacheia as páginas para melhorar a performance. Como resultado, as mudanças que você salva nas páginas podem não aparecer imediatamente. Muitas vezes, mas nem sempre, o banner aparece na página indicando que uma atualização para aquela página está em progresso. Você pode fazer uma "atualização forçada" no seu navegador para recarregar a página do servidor, mas isso pode não ter efeito se a atualização no servidor não estiver completa.

- -

Algumas páginas (especialmente landing pages) utilizam macros para gerar e atualizar o conteúdo automaticamente. Para landing pages, fazer isso assegura que novos artigos vão automaticamente ser listados na página, sem que um editor tenha que adicioná-los manualmente. Isso é bem conveniente para contribuidores de longas datas e evita que o trabalho dos novatos seja perdido aleatoriamente devido eles não saberem como o inserir o link hierarquicamente para seus artigos.

- -

Isso também pode ser feito quando a transclusão de conteúdo de uma pátina para outras páginas (usando por exemplo, o macro {{TemplateLink("Page")}}).

- -

Devido ao cache da MDN ter renderizado o conteúdo para melhorar a performance, mudanças feitas no material fonte (como a saída dos macros ou páginas transcluídas) não são automaticamente refletidas na páginas. Se você espera mudanças frequentes feitas nesses materiais fonte, você pode considerar habilitar a regeneração automática de páginas.

- -

Para habilitar a regeneração automática de páginas:

- -
    -
  1. Clique no botão Editar na página para entrar no modo de edição.
    2. -
  2. Abaixo do título da página, clique em Editar o título e propriedades localizado perto do título da página. Os metadados da página aparecerão.
    3. -
  3. Selecione um valor para Tempo máximo de regeneração. Esse valor determina o intervalo de tempo que as páginas serão refeitas, incluindo a reexecução de seus macros. Tipicamente, nós utilizamos de 4 a 8 horas. Para uma tecnologia em que a documentação está mudando rapidamente, você pode mudar para um número menor.
    4. -
  4. Salve suas mudanças para a página. É uma boa prática fazer a revisão dos comentários para descrever o que você fez, tipo: "Mudei o tempo máximo de renderização para 4 horas".
    5. -
- -

Essa página vai ser regerada automaticamente no tempo que você especificou.

- -
-

A opção "Editar títilo e propriedades da página" não está disponível enquanto você cria uma nova página. Você terá que salvar as alterações e reabrir a página para vê-la.

-
diff --git a/files/pt-br/mdn/yari/index.html b/files/pt-br/mdn/yari/index.html new file mode 100644 index 0000000000..6fd43defb2 --- /dev/null +++ b/files/pt-br/mdn/yari/index.html @@ -0,0 +1,61 @@ +--- +title: 'Kuma: MDN''s wiki platform' +slug: MDN/Kuma +tags: + - projeto kuma +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +

Kuma é a plataforma wiki que  auxilia o Mozilla Developer Network. É uma plataforma open source escrita em Python utilizando o framework Django.

+ +
+
+

Documentação do Kuma

+ +
+
A API Kuma
+
Kuma provê de uma simples API que lhe permite acessar informações através das páginas,  e até enviar novas páginas de conteúdo.
+
Introdução ao KumaScript:
+
...o modelo de linguagem Kuma.
+
Usando KumaScript e modelos
+
Um guia de como usar modelos KumaScript em um artigo de conteúdo.
+
Referência do KumaScript
+
Uma referência para o KumaScript.
+
O Kuma PUT API
+
O PUT API experimental torna possível a criação e atualização de artigos no MDN remotamente. Também é possível, por instância, escrever scripts que automaticamente geram e enviam artigos baseados na IDL ou nos conteúdos dos arquivos de cabeçalho.
+
Contribuindo para o Kuma
+
Um guia de como fazer um fork do Kuma e contribuir para o projeto.
+
+ +

Classificação de arquivos mais antigos:

+ + + +

Ver tudo...

+
+ +
+

Ferramentas e tarefas

+ +
+
Gráficos do Servidor
+
Alguns dos nossos gráficos New Relic
+
Bugs
+
Uma lista dos bugs do Kuma. Sinta-se livre para olha-los e encontrar algo que você gostaria de corrigir. Esse link requer que você logue no Bugzilla.
+
Ferrmentas e Links
+
Esta página tem uma lista detalhada de várias ferramentas utéis e páginas de documentção. Encontre páginas que nossos desenvolvedores usam todos os dias!
+
Informar um bug
+
Se você teve algum problema com o Kuma,  ou possui uma ideia para o torna-lo melhor, você pode arquivar um bug!
+
Log de mudanças
+
Uma lista das últimas mundaças enviadas; um ótimo lugar para visualizar o que aconteceu recentemente.
+
O que é implantado?
+
Um quadro de status que mostra o que foi implantado ao server de produção.
+
Roteiro de Engenhria
+
Quadro do Trello usado para gerenciamento do trabalho regular  no projeto do Kuma.
+
+
+
diff --git a/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html deleted file mode 100644 index 231797ec59..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Anatomia de uma WebExtension -slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_WebExtension -tags: - - Extensões - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension ---- -

Uma extensão consiste de uma coleção de arquivos, empacotados para distribuição e instalação. Nesse artigo vamos falar rapidamente sobre os arquivos que podem estar presentes em uma extensão.

- -

Toda extensão contém um arquivo chamado "manifest.json". Ele pode conter ponteiros para quatro outros tipos de arquivos:

- - - -

- -

manifest.json

- -

Esse é o único arquivo que está presente em toda WebExtension. Ele contém metadados básicos sobre a extensão, tais como o nome, a versão e as permissões que ela necessita. Também provê ponteiros para outros arquivos na extensão.

- -

Para mais detalhes sobre o arquivo "manifest.json", acesse a página de referência.

- -

Background pages

- -

Muitas vezes as WebExtensions precisam manter um estado ou performance operativa de longa duração, independentemente do ciclo de vida das páginas ou janelas do navegador. As background pages e os scripts servem pra isso.

- -

Background scripts são carregados assim que a extensão tem sua carga concluída, e permanecem carregados até que ela seja desativada ou desinstalada. No script você pode fazer uso de qualquer uma das WbExtensions APIs.

- -

Os background scripts não possuem acesso direto às páginas web. No entanto, eles podem carregar scripts de conteúdo na página, e podem se comunicar com os scripts de conteúdo usando uma API de envio de mensagens.

- -

Você pode incluir uma background page usando a chave background no "manifest.json". Você não precisa informar a sua própria background page. Se você incluir uma página de background, um arquivo vazio será criado.

- -
// manifest.json
-
-"background": {
-  "scripts": ["background-script.js"]
-}
- -

No entanto, você pode escolher informar a página de background como um arquivo HTML a parte:

- -
// manifest.json
-
-"background": {
-  "page": "background-page.html"
-}
- -

Scripts de conteúdo

- -

Use os scripts de conteúdo para acessar e manipular páginas web. Scripts de conteúdo são carregados dentro das páginas web e executados em um contexto particular nessa página.

- -

Eles podem ver e manipular páginas DOM,

- -

Scripts de conteúdo podem ver e manipular o DOM das páginas, da mesma forma como os scripts normais carregados pela página.

- -

Ao contrário dos scripts normais, os scripts de conteúdo podem:

- - - -

Scripts de conteúdo não podem acessar diretamente os scripts normais da página, mas podem trocar mensagens com eles através do uso da API window.postMessage.

- -

Normalmente, quando falamos de scripts de conteúdo, estamos nos referindo a JavaScript, mas é possível injetar CSS em paginas web que utilizam o mesmo mecanismo.

- -

Você pode injetar scripts de conteúdo em páginas web de duas formas: anexando os scripts para todas as páginas correspondentes a um padrão de URL, ou através de programação a partir de um script de background.

- -

Para injetar scripts em páginas com base na URL, use a chave content_scripts no "manifest.json", informando um ou mais scripts e um array com os padrões:

- -
// manifest.json
-
-"content_scripts": [
-  {
-    "matches": ["*://*.mozilla.org/*"],
-    "js": ["my-script.js"]
-  }
-]
- -

Se a URL da página corresponder aos padrões passados na chave matches, os scripts passados na chave js serão carregados.

- -

Para injetar os scripts na página via programação (por exemplo, quando o usuário clicar em um botão) use a API tabs:

- -
// background.js
-
-chrome.tabs.executeScript({
-  file: "my-script.js"
-});
- -

Aprenda mais sobre scripts de conteúdo lendo sua documentação.

- -

Ações de navegador

- -

Uma "ação de navegador" é um botão que você pode adicionar na barra de ferramentas do Firefox. O botão tem um ícone. Você pode informar múltiplos ícones em diferentes tamanhos:  fazendo isso, o navegador irá selecionar o ícone mais adequado para a densidade de pixels da tela.

- -

Opcionalmente, você pode definir um popup para o botão usando HTML, CSS e JavaScript.

- -

Se você não definir um popup, quando o usuário clicar no botão um evento será disparado, que pode ser ouvido nos scripts de background.

- -

Se você define um popup, o evento não é disparado: ao invés disso, o popup será mostrado para que o usuário possa interagir. Os scripts executados em popup são capazes de utilizar WebExtension APIs.

- -

Para aprender mais sobre ações de navegador, consulte a página da API.

- -

Recursos acessíveis na web

- -

Recursos acessíveis na web são recursos como imagens, HTML, CSS, JavaScript, que podem ser incluídos na extensão e quer tornar acessível aos scripts de conteúdo e aos scripts da página. Eles podem ser referenciados a partir de scripts de página e de conteúdo, usando um URI scheme especial.

- -

Por exemplo, se um script de conteúdo quer inserir algumas imagens em páginas da web, você pode incluí-los na extensão e torná-los acessíveis na web. Em seguida o script de conteúdo pode criar e acrescentar tags img que fazem referência às imagens através do atributo src.

- -

Para entender mais, veja a documentação sobre chaves no manifest.json em recursos acessíveis na web.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..231797ec59 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,115 @@ +--- +title: Anatomia de uma WebExtension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_WebExtension +tags: + - Extensões + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +

Uma extensão consiste de uma coleção de arquivos, empacotados para distribuição e instalação. Nesse artigo vamos falar rapidamente sobre os arquivos que podem estar presentes em uma extensão.

+ +

Toda extensão contém um arquivo chamado "manifest.json". Ele pode conter ponteiros para quatro outros tipos de arquivos:

+ + + +

+ +

manifest.json

+ +

Esse é o único arquivo que está presente em toda WebExtension. Ele contém metadados básicos sobre a extensão, tais como o nome, a versão e as permissões que ela necessita. Também provê ponteiros para outros arquivos na extensão.

+ +

Para mais detalhes sobre o arquivo "manifest.json", acesse a página de referência.

+ +

Background pages

+ +

Muitas vezes as WebExtensions precisam manter um estado ou performance operativa de longa duração, independentemente do ciclo de vida das páginas ou janelas do navegador. As background pages e os scripts servem pra isso.

+ +

Background scripts são carregados assim que a extensão tem sua carga concluída, e permanecem carregados até que ela seja desativada ou desinstalada. No script você pode fazer uso de qualquer uma das WbExtensions APIs.

+ +

Os background scripts não possuem acesso direto às páginas web. No entanto, eles podem carregar scripts de conteúdo na página, e podem se comunicar com os scripts de conteúdo usando uma API de envio de mensagens.

+ +

Você pode incluir uma background page usando a chave background no "manifest.json". Você não precisa informar a sua própria background page. Se você incluir uma página de background, um arquivo vazio será criado.

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

No entanto, você pode escolher informar a página de background como um arquivo HTML a parte:

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

Scripts de conteúdo

+ +

Use os scripts de conteúdo para acessar e manipular páginas web. Scripts de conteúdo são carregados dentro das páginas web e executados em um contexto particular nessa página.

+ +

Eles podem ver e manipular páginas DOM,

+ +

Scripts de conteúdo podem ver e manipular o DOM das páginas, da mesma forma como os scripts normais carregados pela página.

+ +

Ao contrário dos scripts normais, os scripts de conteúdo podem:

+ + + +

Scripts de conteúdo não podem acessar diretamente os scripts normais da página, mas podem trocar mensagens com eles através do uso da API window.postMessage.

+ +

Normalmente, quando falamos de scripts de conteúdo, estamos nos referindo a JavaScript, mas é possível injetar CSS em paginas web que utilizam o mesmo mecanismo.

+ +

Você pode injetar scripts de conteúdo em páginas web de duas formas: anexando os scripts para todas as páginas correspondentes a um padrão de URL, ou através de programação a partir de um script de background.

+ +

Para injetar scripts em páginas com base na URL, use a chave content_scripts no "manifest.json", informando um ou mais scripts e um array com os padrões:

+ +
// manifest.json
+
+"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["my-script.js"]
+  }
+]
+ +

Se a URL da página corresponder aos padrões passados na chave matches, os scripts passados na chave js serão carregados.

+ +

Para injetar os scripts na página via programação (por exemplo, quando o usuário clicar em um botão) use a API tabs:

+ +
// background.js
+
+chrome.tabs.executeScript({
+  file: "my-script.js"
+});
+ +

Aprenda mais sobre scripts de conteúdo lendo sua documentação.

+ +

Ações de navegador

+ +

Uma "ação de navegador" é um botão que você pode adicionar na barra de ferramentas do Firefox. O botão tem um ícone. Você pode informar múltiplos ícones em diferentes tamanhos:  fazendo isso, o navegador irá selecionar o ícone mais adequado para a densidade de pixels da tela.

+ +

Opcionalmente, você pode definir um popup para o botão usando HTML, CSS e JavaScript.

+ +

Se você não definir um popup, quando o usuário clicar no botão um evento será disparado, que pode ser ouvido nos scripts de background.

+ +

Se você define um popup, o evento não é disparado: ao invés disso, o popup será mostrado para que o usuário possa interagir. Os scripts executados em popup são capazes de utilizar WebExtension APIs.

+ +

Para aprender mais sobre ações de navegador, consulte a página da API.

+ +

Recursos acessíveis na web

+ +

Recursos acessíveis na web são recursos como imagens, HTML, CSS, JavaScript, que podem ser incluídos na extensão e quer tornar acessível aos scripts de conteúdo e aos scripts da página. Eles podem ser referenciados a partir de scripts de página e de conteúdo, usando um URI scheme especial.

+ +

Por exemplo, se um script de conteúdo quer inserir algumas imagens em páginas da web, você pode incluí-los na extensão e torná-los acessíveis na web. Em seguida o script de conteúdo pode criar e acrescentar tags img que fazem referência às imagens através do atributo src.

+ +

Para entender mais, veja a documentação sobre chaves no manifest.json em recursos acessíveis na web.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html deleted file mode 100644 index 4eb0dc1b8d..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: tema -slug: Mozilla/Add-ons/WebExtensions/API/tema -tags: - - Aplicativo - - Extensões - - Navegador - - Tema - - Temas - - add-on - - extensão -translation_of: Mozilla/Add-ons/WebExtensions/API/theme ---- -
{{AddonSidebar}}
- -

Permite que extensões do navegador alterem seu tema.

- -

Para usar esta API, uma extensão deve solicitar a permission (permissão) de "tema" em seu arquivo manifest.json.

- -
-

Nota: Quando configuramos um arquivo de plano de fundo, devemos declarar a permission (permissão) de "tema" e, assim sendo, nós não poderemos usar a função theme  (de tema), se esta for incompatível.

-
- -

Tipo

- -
-
{{WebExtAPIRef("theme.Theme")}}
-
Representa o conteúdo de um tema.
-
- -

Funções

- -
-
{{WebExtAPIRef("theme.getCurrent()")}}
-
Obtém o tema atual do navegador.
-
{{WebExtAPIRef("theme.update()")}}
-
Atualiza o tema do navegador.
-
{{WebExtAPIRef("theme.reset()")}}
-
Remove quaisquer atualizações de temas feitas em uma chamada para {{WebExtAPIRef("theme.update()")}}.
-
- -

Evento

- -
-
{{WebExtAPIRef("theme.onUpdated")}}
-
Disparada quando o navegador tiver sido alterado.
-
- -

Compatibilidade

- - - -

{{Compat("webextensions.api.theme")}}

- -

{{WebExtExamples("h2")}}

diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html new file mode 100644 index 0000000000..4eb0dc1b8d --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html @@ -0,0 +1,55 @@ +--- +title: tema +slug: Mozilla/Add-ons/WebExtensions/API/tema +tags: + - Aplicativo + - Extensões + - Navegador + - Tema + - Temas + - add-on + - extensão +translation_of: Mozilla/Add-ons/WebExtensions/API/theme +--- +
{{AddonSidebar}}
+ +

Permite que extensões do navegador alterem seu tema.

+ +

Para usar esta API, uma extensão deve solicitar a permission (permissão) de "tema" em seu arquivo manifest.json.

+ +
+

Nota: Quando configuramos um arquivo de plano de fundo, devemos declarar a permission (permissão) de "tema" e, assim sendo, nós não poderemos usar a função theme  (de tema), se esta for incompatível.

+
+ +

Tipo

+ +
+
{{WebExtAPIRef("theme.Theme")}}
+
Representa o conteúdo de um tema.
+
+ +

Funções

+ +
+
{{WebExtAPIRef("theme.getCurrent()")}}
+
Obtém o tema atual do navegador.
+
{{WebExtAPIRef("theme.update()")}}
+
Atualiza o tema do navegador.
+
{{WebExtAPIRef("theme.reset()")}}
+
Remove quaisquer atualizações de temas feitas em uma chamada para {{WebExtAPIRef("theme.update()")}}.
+
+ +

Evento

+ +
+
{{WebExtAPIRef("theme.onUpdated")}}
+
Disparada quando o navegador tiver sido alterado.
+
+ +

Compatibilidade

+ + + +

{{Compat("webextensions.api.theme")}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html b/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html deleted file mode 100644 index 16e718fc9c..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Empacotando e Instalando -slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -

Packaging your extension

- -
-

Nós estamos trabalhando em uma GUI  para empacotar e carregar extensões. Veja Bug 1185460 para mais informações. Enquanto isso, siga as etapas abaixo.

-
- -

Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".

- -

Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.

- -

Windows

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Enviar para → Pasta Compactada.
    4. -
  4. Renomeie o arquivo de "something.zip" para "something.xpi".
    5. -
- -

- -

Mac OS X

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Compress n Items.
    4. -
  4. Renomeie o arquivo de Archive.zip para something.xpi.
    5. -
- -

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-extension/
    2. -
  2. zip -r ../my-extension.xpi *
    3. -
- -

Installing your extension

- -
    -
  1. Digite no caminho de URL about:addons
    2. -
  2. Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."
    3. -
  3. Clique instalar no dialog que irá aparecer
    4. -
- -

Instalando suas extensões no Firefox OS

- -

You can install your extension from WebIDE running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.

- -

When the manifest.json validation status is valid you will be able to Install and Run your extension on the attached Firefox OS device running a nightly build of Firefox OS.

- -

The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.

- -

Soluções de problemas

- -

There are a few common problems that you might run into:

- -

"Este add-on não poderá ser instalado porque não pode ser verificado."

- - - -

"Este add-on não pode ser instalado porque pode está corrompido."

- - - -

Nada aconteceu

- - - -

Observe o console

- -

Some additional error information relating to how your extension was extracted and loaded might be available in the Browser Console.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html new file mode 100644 index 0000000000..41312323b4 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html @@ -0,0 +1,184 @@ +--- +title: permissões +slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissões +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TipoArray
ObrigatórioNão
Examplo + 
+"permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]
+
+ +

Use a chave permissions para solicitar privilégios especiais para sua extensão. Esta chave é um array de strings, onde cada string é uma solicitação para uma permissão.

+ +

Se você solicitar permissões usando esta chave, o navegador poderá informar ao usuário que a extensão a ser instalada está solicitando certos privilégios, e perguntar se aceita ou não conceder esses privilégios. O navegador também poderá permitir que o usuário inspecione os privilégios de uma extensão depois que essa for instalada.

+ +

A chave pode conter três tipos de permissões:

+ + + +

Permissões de servidor (host)

+ +

Permissões de servidor são espscificadas como match patterns. Cada pattern identifica um grupo de URLs para os quais a extensão solicita privilégios adicionais. Por exemplo, uma permissão de servidor poderia ser "*://developer.mozilla.org/*".

+ +

Os privilégios adicionais incluem:

+ + + +

No Firefox, da versão 56 em diante, extensões recebem automaticamente permissões de servidor para sua própria origem, que é na forma:

+ +
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

onde 60a20a9b-1ad4-af49-9b6c-c64c98c37920 é o ID interno da extensão. A extensão pode obter essa URL programaticamente chamando extension.getURL():

+ +
browser.extension.getURL("");
+// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

Permissões de API

+ +

Permissões de API são especificadas como palavras-chave. Cada palavra-chave nomeia uma API WebExtension que a extensão gostaria de usar.

+ +

As seguintes palavras-chave estão atualmente disponíveis:

+ + + +

Na maioria dos casos, a permissão apenas concede acesso à API, com as seguintes exceções:

+ + + +

Permissão activeTab (aba ativa)

+ +

Esta permissão é especificada como "activeTab". Se uma extensão tem a permissão activeTab, quando o usuário interage com a extensão, a extensão recebe privilégios adicionais somente para a aba ativa.

+ +

"Interação do usuário" inclui:

+ + + +

Os privilégios adicionais são:

+ + + +

A intenção desta permissão é permitir que extensões executem um caso de uso comum, sem ter que lhes dar permissões poderosas demais. Muitas extensões querem "fazer alguma coisa com a página atual quando o usuário pede". Por exemplo, considere uma extensão que queira executar um script na página atual quando o usuário clicar em uma ação do navegador. Se a permissão  activeTab não existisse, a extensão precisaria pedir a permissão de servidor <all_urls>. Mas isso daria à extensão mais poder que o necessário: ela poderia executar scripts em qualquer aba e quando quisesse, em vez de apenas na aba atual e somente em resposta a uma ação do usuário.

+ +

Note que você só pode ter acesso à aba ou dado que estava ali, quando a interação do usuário ocorreu (por exemplo, um clique do mouse). Quando a aba ativa muda para outra página, por exemplo devido a concluir o carregamento ou algum outro evento, a permissão não lhe concede mais acesso à aba.

+ +

Normalmente, a aba a qual foi concedido activeTab é somente a aba ativa atual, exceto em um caso. A API menus permite a uma extensão criar um item de menu que é exibido se o usuário abrir o menu de contexto sobre uma aba (ou seja, no elemento na lista de abas que permite ao usuário mudar de uma aba para outra). Se o usuário clicar em um item desses, a permissão activeTab é concedida para a aba em que o usuário clicou, mesmo que essa não seja a aba ativa no momento (de acordo com Firefox 63, {{bug(1446956)}}).

+ +

Acesso à área de transferência

+ +

Existem duas permissões que permitem à extensão interagir com a área de transferência:

+ + + +

Consulte Interação com a área de transferência para saber todos os detalhes sobre isso.

+ +

Armazenamento ilimitado

+ +

A permissão unlimitedStorage:

+ + + +

Examplos

+ +
 "permissions": ["*://developer.mozilla.org/*"]
+ +

Solicita acesso privilegiado a páginas sob developer.mozilla.org.

+ +
  "permissions": ["tabs"]
+ +

Solicita acesso a partes privilegiadas da API tabs.

+ +
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
+ +

Solicita ambas as permissões anteriores.

+ +

Compatibilidade com navegadores

+ + + +

{{Compat("webextensions.manifest.permissions")}}

diff --git "a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" "b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" deleted file mode 100644 index 41312323b4..0000000000 --- "a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: permissões -slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissões -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TipoArray
ObrigatórioNão
Examplo - 
-"permissions": [
-  "*://developer.mozilla.org/*",
-  "webRequest"
-]
-
- -

Use a chave permissions para solicitar privilégios especiais para sua extensão. Esta chave é um array de strings, onde cada string é uma solicitação para uma permissão.

- -

Se você solicitar permissões usando esta chave, o navegador poderá informar ao usuário que a extensão a ser instalada está solicitando certos privilégios, e perguntar se aceita ou não conceder esses privilégios. O navegador também poderá permitir que o usuário inspecione os privilégios de uma extensão depois que essa for instalada.

- -

A chave pode conter três tipos de permissões:

- - - -

Permissões de servidor (host)

- -

Permissões de servidor são espscificadas como match patterns. Cada pattern identifica um grupo de URLs para os quais a extensão solicita privilégios adicionais. Por exemplo, uma permissão de servidor poderia ser "*://developer.mozilla.org/*".

- -

Os privilégios adicionais incluem:

- - - -

No Firefox, da versão 56 em diante, extensões recebem automaticamente permissões de servidor para sua própria origem, que é na forma:

- -
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
- -

onde 60a20a9b-1ad4-af49-9b6c-c64c98c37920 é o ID interno da extensão. A extensão pode obter essa URL programaticamente chamando extension.getURL():

- -
browser.extension.getURL("");
-// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
- -

Permissões de API

- -

Permissões de API são especificadas como palavras-chave. Cada palavra-chave nomeia uma API WebExtension que a extensão gostaria de usar.

- -

As seguintes palavras-chave estão atualmente disponíveis:

- - - -

Na maioria dos casos, a permissão apenas concede acesso à API, com as seguintes exceções:

- - - -

Permissão activeTab (aba ativa)

- -

Esta permissão é especificada como "activeTab". Se uma extensão tem a permissão activeTab, quando o usuário interage com a extensão, a extensão recebe privilégios adicionais somente para a aba ativa.

- -

"Interação do usuário" inclui:

- - - -

Os privilégios adicionais são:

- - - -

A intenção desta permissão é permitir que extensões executem um caso de uso comum, sem ter que lhes dar permissões poderosas demais. Muitas extensões querem "fazer alguma coisa com a página atual quando o usuário pede". Por exemplo, considere uma extensão que queira executar um script na página atual quando o usuário clicar em uma ação do navegador. Se a permissão  activeTab não existisse, a extensão precisaria pedir a permissão de servidor <all_urls>. Mas isso daria à extensão mais poder que o necessário: ela poderia executar scripts em qualquer aba e quando quisesse, em vez de apenas na aba atual e somente em resposta a uma ação do usuário.

- -

Note que você só pode ter acesso à aba ou dado que estava ali, quando a interação do usuário ocorreu (por exemplo, um clique do mouse). Quando a aba ativa muda para outra página, por exemplo devido a concluir o carregamento ou algum outro evento, a permissão não lhe concede mais acesso à aba.

- -

Normalmente, a aba a qual foi concedido activeTab é somente a aba ativa atual, exceto em um caso. A API menus permite a uma extensão criar um item de menu que é exibido se o usuário abrir o menu de contexto sobre uma aba (ou seja, no elemento na lista de abas que permite ao usuário mudar de uma aba para outra). Se o usuário clicar em um item desses, a permissão activeTab é concedida para a aba em que o usuário clicou, mesmo que essa não seja a aba ativa no momento (de acordo com Firefox 63, {{bug(1446956)}}).

- -

Acesso à área de transferência

- -

Existem duas permissões que permitem à extensão interagir com a área de transferência:

- - - -

Consulte Interação com a área de transferência para saber todos os detalhes sobre isso.

- -

Armazenamento ilimitado

- -

A permissão unlimitedStorage:

- - - -

Examplos

- -
 "permissions": ["*://developer.mozilla.org/*"]
- -

Solicita acesso privilegiado a páginas sob developer.mozilla.org.

- -
  "permissions": ["tabs"]
- -

Solicita acesso a partes privilegiadas da API tabs.

- -
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
- -

Solicita ambas as permissões anteriores.

- -

Compatibilidade com navegadores

- - - -

{{Compat("webextensions.manifest.permissions")}}

diff --git a/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html b/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html deleted file mode 100644 index 7050516e82..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: O que vem a seguir ? -slug: Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ -translation_of: Mozilla/Add-ons/WebExtensions/What_next_ ---- -
{{AddonSidebar}}
- -

Você está pronto para começar a tornar a tua ideia de extensão de navegador uma realidade. Antes de iniciar essa jornada, vale a pena estar ciente de algumas coisas que te ajudarão a torná-la tranquila.

- -

Teu ambiente de desenvolvimento

- -

Você não precisa de ferramentas de desenvolvimento especiais para criar extensões de navegador: é inteiramente possível criar ótimas extensões de navegador sem mais que um editor de textos. Porém, talvez você tenha desenvolvido para a web e tenha um conjunto de ferramentas e um ambiente que quer usar. Se for assim, você precisa estar ciente de algumas coisas.

- -

Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para o processo de revisão AMO. Além disso, as ferramentas que você utiliza, — para minificação,  obfuscação e contrução — devem ser open source ( ou oferecer uso gratuito sem limites ) e disponíveis para execução no computador do revisor (Windows, Mac ou Linux). Infelizmente, nossos revisores não podem trabalhar com ferramentas comerciais ou baseadas em web.

- -

Aprenda mais acerca de ferramentas de construção

- -

Third-party libraries

- -

Third-party libraries are a great way to add complex features or functionality to your browser extensions quickly. When you submit an extension to the AMO review process, the process will also consider any third-party libraries used. To streamline the review, make sure you always download third-party libraries from their official website or repository, and if the library is minified provide a link to the source code. Please note that third-party libraries cannot be modified in any way.

- -

Learn more about submitting source code

- -

The Firefox Add-on Distribution Agreement

- -

Browser extensions need to be signed to install into the release or beta versions of Firefox. Signing takes place in addons.mozilla.org (AMO) and is subject to the terms and conditions of the Firefox Add-on Distribution Agreement. The goal of the agreement is to ensure Firefox users get access to well supported, quality add-ons that enhance the Firefox experience.

- -

Read the agreement

- -

Learn more about signing

- -

The review process

- -

When a browser extension is submitted for signing, it's subject to automated review. It may also be subject to a manual review, when the automated review determines that a manual review is needed. Your browser extension won't be signed until it’s passed the automated review and may have its signing revoked if it fails to pass the manual review. The review process follows a strict set of guidelines, so it’s easy to check and avoid any likely review problems.

- -

Check out the review policy and guidelines

- - - -

If you choose to list your browser extension on AMO, your extension could be featured on the AMO website, in the Firefox browser’s add-on manager, or elsewhere on a Mozilla website. We've compiled a list of guidelines about how extensions are selected for featuring, by following these guidelines you give your extension the best chance of being featured.

- -

Learn more about getting your add-ons featured

- -

Continue your learning experience

- -

Now you know what lies ahead, it's time to dive into more details about browser extension development. In the sections that follow, you’ll discover:

- - diff --git a/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html b/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html deleted file mode 100644 index 1e49d92e3c..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Passo-a-Passo -slug: Mozilla/Add-ons/WebExtensions/Passo-a-Passo -tags: - - Extensões Web - - extensões firefox - - passo-a-passo -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension ---- -

Neste artigo iremos criar uma Extensão para Firefox do início ao fim.

- -

A extensão adicionará um novo botão na barra de ferramentas do Firefox. Quando clicar no botão se exibirá um popup habilitando a escolha de um animal. Uma vez que o usuário escolher um animal, a página atual do navegador será substituida por uma imagem do animal escolhido.

- -

Para implementar esse extensão, será necessário:

- - - -

Você pode visualizar toda a estrutura da extensão da seguinte forma:

- -

- -

É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:

- - - -

Você pode encontrar o código completo da extensão no GitHub.

- -

Para criar essa extensão você precisará do Firefox 45 ou mais recente.

- -

Escrevendo a WebExtension

- -

Crie um novo diretório e navegue até ele:

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "applications": {
-    "gecko": {
-      "id": "beastify@mozilla.org"
-    }
-  },
-
-  "permissions": [
-    "http://*/*",
-    "https://*/*"
-  ],
-
-  "browser_action": {
-    "default_icon": "button/beasts.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
-
- - - -

Perceba que todos os caminhos são relativos ao manifest.json.

- -

O Botão na barra de ferramentas

- -

O botão na barra de ferramentas precisa de um icone,  e nosso manifest.json informa que nós teriamos um icone em "button/beasts.png".

- -

Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos exemplo, que é retirado do  Aha-Soft’s Free Retina iconset e usado sob os termos de sua licença.

- -

Se você não fornecer um popup, então um evento de click é lançado para sua extensão quando o usuário clicar no botão. Se você fornecer um popup, o evento de click não envia, mas ao invés disso, o popup é aberto. Nós queremos abrir um popup, então vamos criá-lo na próxima etapa.

- -

O popup

- -

A função do popup é ativar a escolha do usuário para um dos três animais.

- -

Crie um novo diretório chamado "popup" na raiz do projeto. Aqui é onde nós criar os códigos para o popup. O popup irá ser constituido em três arquivos :

- - - -

choose_beast.html

- -

O arquivo HTML criado é este:

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-  <body>
-    <div class="beast">Frog</div>
-    <div class="beast">Turtle</div>
-    <div class="beast">Snake</div>
-
-    <script src="choose_beast.js"></script>
-  </body>
-
-</html>
- -

Nós temos um elemento para cada escolha de animal. Perceba que nós incluimos os arquivo CSS e JS nesse arquivo, igual a uma página web.

- -

choose_beast.css

- -

O CSS ajusta o tamanho do popup, garantindo que as três escolhas irão preencher o espaço, e daremos a eles algum estilo básico:

- -
html, body {
-  height: 100px;
-  width: 100px;
-  margin: 0;
-}
-
-.beast {
-  height: 30%;
-  width: 90%;
-  margin: 3% auto;
-  padding-top: 6%;
-  text-align: center;
-  font-size: 1.5em;
-  background-color: #E5F2F2;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
- -

choose_beast.js

- -

No JavaScript para o popup, nós iremos "escutar" o evento de click . Se o clique foi em uma das três escolhas de animais, nós iremos injetar um content script na aba ativa. Um vez que o content script é carregado , nós enviaremos uma mensagem com o animal escolhido:

- -
document.addEventListener("click", function(e) {
-  if (!e.target.classList.contains("beast")) {
-    return;
-  }
-
-  var chosenBeast = e.target.textContent;
-
-  chrome.tabs.executeScript(null, {
-    file: "/content_scripts/beastify.js"
-  });
-
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {beast: chosenBeast});
-  });
-
-});
-
- -

É usado três funções da API WebExtension:

- - - -

O content script

- -

Crie a novo diretório na pasta root do projeto chamado "content_scripts" e crie um novo arquivo com o nome "beastify.js", com o seguinte conteúdo:

- -
// Assign beastify() as a listener for messages from the extension.
-chrome.runtime.onMessage.addListener(beastify);
-
-function beastify(request, sender, sendResponse) {
-  removeEverything();
-  insertBeast(beastNameToURL(request.beast));
-  chrome.runtime.onMessage.removeListener(beastify);
-}
-
-function removeEverything() {
-  while (document.body.firstChild) {
-    document.body.firstChild.remove();
-  }
-}
-
-function insertBeast(beastURL) {
-  var beastImage = document.createElement("img");
-  beastImage.setAttribute("src", beastURL);
-  beastImage.setAttribute("style", "width: 100vw");
-  beastImage.setAttribute("style", "height: 100vh");
-  document.body.appendChild(beastImage);
-}
-
-function beastNameToURL(beastName) {
-  switch (beastName) {
-    case "Frog":
-      return chrome.extension.getURL("beasts/frog.jpg");
-    case "Snake":
-      return chrome.extension.getURL("beasts/snake.jpg");
-    case "Turtle":
-      return chrome.extension.getURL("beasts/turtle.jpg");
-  }
-}
-
-
- -

O content script  adiciona um listener da mensagem para a extensão (especificamente , para "choose_beast.js"). No listener:

- - - -

Os animais

- -

Finalmente, nós precisamos incluir as imagens dos animais.

- -

Crie um novo diretório chamado "beasts", e adicione as três imagens nos diretório, com os nomes apropriados. Você pode obter as imagens aqui no GitHub, ou aqui:

- -

- -

Empacotando e instalando

- -

Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    button/
-        beasts.png
-
-    content_scripts/
-        beastify.js
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".

- -

Um truque é que o arquivo ZIP  deve ser um dos arquivos de extensão . Portanto, para criar um XPI a partir dos arquivos beastify , navegue até o diretório " beastify " em um shell de comando e digite:

- -
   # in beastify/
-   zip -r ../beastify.xpi *
- - - -

Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI

- -

Para instalar o XPI, você apenas irá abrir o Firefox:

- - - -

Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.

- -

Você poderá ver o icone aparecer na barra de ferramentas. Abra uma nova página web, então click no icone, selecione um animal e veja a imagem que você escolheu na página.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html b/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html deleted file mode 100644 index 4e7e854644..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Pré-requisitos -slug: Mozilla/Add-ons/WebExtensions/pre-requisitos -translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites ---- -

Para desenvolver utilizando as APIs de uma WebExtension, você precisa de uma configuração mínima.

- - - -
 
- -
 
- -
 
diff --git a/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html b/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..4e7e854644 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,23 @@ +--- +title: Pré-requisitos +slug: Mozilla/Add-ons/WebExtensions/pre-requisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

Para desenvolver utilizando as APIs de uma WebExtension, você precisa de uma configuração mínima.

+ + + +
 
+ +
 
+ +
 
diff --git a/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html deleted file mode 100644 index 9d3045e28a..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Sua primeira extensão -slug: Mozilla/Add-ons/WebExtensions/sua_primeira_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox. A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios.

- -

O código fonte para este exemplo está no GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Para começar, você precisará do Firefox versão 45 ou posterior.

- -

Construindo a Extensão

- -

Crie uma nova pasta dando o nome de "borderify" e navegue para dentro dela.

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e coloque o seguinte conteúdo no arquivo:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Adiciona uma borda vermelha a todas as páginas da Web correspondentes a mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

A chave mais interessante aqui é content_scripts, que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico. Nesse caso, pedimos ao Firefox para carregar um script chamado "borderify.js" em todas as páginas HTTP ou HTTPS oriundas de "mozilla.org" ou em qualquer um de seus subdomínios.

- - - -
-

Em algumas situações, você precisa especificar uma ID para sua extensão. Se você precisar especificar um ID de extensão, inclua a chave applications no manifest.json e configure sua propriedade id:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

A extensão deve ter um ícone. Ele será mostrado ao lado da listagem de extensões no Gerenciador de Extensões. Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".

- -

Crie o diretório "icons" diretamente sob o diretório "borderify". Salve um ícone chamado "border-48.png". Você pode usar o icone do nosso exemplo, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença Creative Commons Attribution-ShareAlike.

- -

Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e também deve criar um ícone de 96x96 pixels também .PNG, para telas de alta resolução, e se você fizer isso será especificado como a propriedade 96 do objeto icons em manifest.json:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Como alternativa, você pode criar um ícone em formato SVG  e ele será dimensionado corretamente.

- - - -

borderify.js

- -

Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte conteúdo:

- -
document.body.style.border = "5px solid red";
- -

Este script será carregado nas páginas que correspondem ao padrão especificado na chave content_scripts do manifest.json. O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.

- - - -

Testando

- -

Primeiro, verifique se você está com os arquivos corretos nos lugares certos:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Instalando

- -

Acesse a área de Debugging do Firefox digitando diretamente na barra de endereço: "about: debugging", em seguida clique em "Load Temporary Add-on" e selecione o "borderify.js".

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.
-
- Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta web-ext.

- -

Testando

- -

Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Não tente acessar addons.mozilla.org! Os scripts de conteúdo são bloqueados nesse domínio.

-
- -

Experimente um pouco. Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página. Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging. Você poderá ver as mudanças imediatamente:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Empacotando e publicando

- -

Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura. Para saber mais sobre isso, consulte "Publicando sua Extensão".

- -

Próximos passos

- -

Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:

- - diff --git a/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..cf8e2d7198 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,58 @@ +--- +title: Itens do menu de contexto +slug: Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +
{{AddonSidebar}}
+ +
+

Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.Este é o menu de contexto disponível quando um usuário clica com o botão direito numa página web. As guias também podem ter menus de contexto, disponível através da API browser.menus.

+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

Você usaria essa opção para expor recursos relevantes para contextos específicos de navegadores ou páginas da web. Por exemplo, você poderia mostrar recursos para abrir um editor gráfico quando o usuário clica em uma imagem ou pode oferecer um recurso para salvar o conteúdo da página quando uma parte da página é selecionada. Você pode adicionar itens planos de menu, caixas de seleção, grupos de botões de rádio, e separadores para os menus. Quando um item de menu de contexto for adicionado usando {{WebExtAPIRef("contextMenus.create")}}, é mostrado em todas as guias do navegador, mas você pode escondê-lo usando {{WebExtAPIRef("contextMenus.remove")}}.

+ +

A lista inteira dos contextos suportados está disponível em {{WebExtAPIRef("menus.ContextType")}} e inclui contextos de fora de uma página web, como itens de favoritos na interface do navegador. Por exemplo, a extensão "Open bookmark in Container Tab" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:

+ +

+ +

Especificando itens do menu de contexto

+ +

Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão contextMenus em seu manifest.json para poder tomar vantagem desta API.

+ +
"permissions": ["contextMenus"]
+ +

Você pode então adicionar (e atualizar ou apagar) os itens do menu de contexto em seu script de "background" (segundo plano) da sua extensão. Para criar um item de menu, você especifica um id, seu título, e os menus de contexto em que ele deve aparecer:

+ +
browser.contextMenus.create({
+  id: "log-selection",
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+ +

Sua extensão então escuta os cliques nos itens do menu. As informações passadas sobre o item clicado, o contexto em que o clique ocorreu e os detalhes da guia em que o clique ocorreu podem ser usadas para chamar a funcionalidade de extensão apropriada.

+ +
browser.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    ...
+  }
+})
+ +

Ícones

+ +

Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja Iconography na documentação Photon Design System.

+ +

Exemplos

+ +

O repositório webextensions-examples no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:

+ + +
diff --git a/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html b/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html deleted file mode 100644 index cf8e2d7198..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Itens do menu de contexto -slug: Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items ---- -
{{AddonSidebar}}
- -
-

Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.Este é o menu de contexto disponível quando um usuário clica com o botão direito numa página web. As guias também podem ter menus de contexto, disponível através da API browser.menus.

- -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

Você usaria essa opção para expor recursos relevantes para contextos específicos de navegadores ou páginas da web. Por exemplo, você poderia mostrar recursos para abrir um editor gráfico quando o usuário clica em uma imagem ou pode oferecer um recurso para salvar o conteúdo da página quando uma parte da página é selecionada. Você pode adicionar itens planos de menu, caixas de seleção, grupos de botões de rádio, e separadores para os menus. Quando um item de menu de contexto for adicionado usando {{WebExtAPIRef("contextMenus.create")}}, é mostrado em todas as guias do navegador, mas você pode escondê-lo usando {{WebExtAPIRef("contextMenus.remove")}}.

- -

A lista inteira dos contextos suportados está disponível em {{WebExtAPIRef("menus.ContextType")}} e inclui contextos de fora de uma página web, como itens de favoritos na interface do navegador. Por exemplo, a extensão "Open bookmark in Container Tab" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:

- -

- -

Especificando itens do menu de contexto

- -

Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão contextMenus em seu manifest.json para poder tomar vantagem desta API.

- -
"permissions": ["contextMenus"]
- -

Você pode então adicionar (e atualizar ou apagar) os itens do menu de contexto em seu script de "background" (segundo plano) da sua extensão. Para criar um item de menu, você especifica um id, seu título, e os menus de contexto em que ele deve aparecer:

- -
browser.contextMenus.create({
-  id: "log-selection",
-  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
-  contexts: ["selection"]
-}, onCreated);
- -

Sua extensão então escuta os cliques nos itens do menu. As informações passadas sobre o item clicado, o contexto em que o clique ocorreu e os detalhes da guia em que o clique ocorreu podem ser usadas para chamar a funcionalidade de extensão apropriada.

- -
browser.contextMenus.onClicked.addListener(function(info, tab) {
-  switch (info.menuItemId) {
-    case "log-selection":
-      console.log(info.selectionText);
-      break;
-    ...
-  }
-})
- -

Ícones

- -

Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja Iconography na documentação Photon Design System.

- -

Exemplos

- -

O repositório webextensions-examples no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:

- - -
diff --git a/files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html b/files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..7050516e82 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,56 @@ +--- +title: O que vem a seguir ? +slug: Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

Você está pronto para começar a tornar a tua ideia de extensão de navegador uma realidade. Antes de iniciar essa jornada, vale a pena estar ciente de algumas coisas que te ajudarão a torná-la tranquila.

+ +

Teu ambiente de desenvolvimento

+ +

Você não precisa de ferramentas de desenvolvimento especiais para criar extensões de navegador: é inteiramente possível criar ótimas extensões de navegador sem mais que um editor de textos. Porém, talvez você tenha desenvolvido para a web e tenha um conjunto de ferramentas e um ambiente que quer usar. Se for assim, você precisa estar ciente de algumas coisas.

+ +

Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para o processo de revisão AMO. Além disso, as ferramentas que você utiliza, — para minificação,  obfuscação e contrução — devem ser open source ( ou oferecer uso gratuito sem limites ) e disponíveis para execução no computador do revisor (Windows, Mac ou Linux). Infelizmente, nossos revisores não podem trabalhar com ferramentas comerciais ou baseadas em web.

+ +

Aprenda mais acerca de ferramentas de construção

+ +

Third-party libraries

+ +

Third-party libraries are a great way to add complex features or functionality to your browser extensions quickly. When you submit an extension to the AMO review process, the process will also consider any third-party libraries used. To streamline the review, make sure you always download third-party libraries from their official website or repository, and if the library is minified provide a link to the source code. Please note that third-party libraries cannot be modified in any way.

+ +

Learn more about submitting source code

+ +

The Firefox Add-on Distribution Agreement

+ +

Browser extensions need to be signed to install into the release or beta versions of Firefox. Signing takes place in addons.mozilla.org (AMO) and is subject to the terms and conditions of the Firefox Add-on Distribution Agreement. The goal of the agreement is to ensure Firefox users get access to well supported, quality add-ons that enhance the Firefox experience.

+ +

Read the agreement

+ +

Learn more about signing

+ +

The review process

+ +

When a browser extension is submitted for signing, it's subject to automated review. It may also be subject to a manual review, when the automated review determines that a manual review is needed. Your browser extension won't be signed until it’s passed the automated review and may have its signing revoked if it fails to pass the manual review. The review process follows a strict set of guidelines, so it’s easy to check and avoid any likely review problems.

+ +

Check out the review policy and guidelines

+ + + +

If you choose to list your browser extension on AMO, your extension could be featured on the AMO website, in the Firefox browser’s add-on manager, or elsewhere on a Mozilla website. We've compiled a list of guidelines about how extensions are selected for featuring, by following these guidelines you give your extension the best chance of being featured.

+ +

Learn more about getting your add-ons featured

+ +

Continue your learning experience

+ +

Now you know what lies ahead, it's time to dive into more details about browser extension development. In the sections that follow, you’ll discover:

+ + diff --git a/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..9d3045e28a --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,150 @@ +--- +title: Sua primeira extensão +slug: Mozilla/Add-ons/WebExtensions/sua_primeira_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox. A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios.

+ +

O código fonte para este exemplo está no GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Para começar, você precisará do Firefox versão 45 ou posterior.

+ +

Construindo a Extensão

+ +

Crie uma nova pasta dando o nome de "borderify" e navegue para dentro dela.

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e coloque o seguinte conteúdo no arquivo:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adiciona uma borda vermelha a todas as páginas da Web correspondentes a mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

A chave mais interessante aqui é content_scripts, que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico. Nesse caso, pedimos ao Firefox para carregar um script chamado "borderify.js" em todas as páginas HTTP ou HTTPS oriundas de "mozilla.org" ou em qualquer um de seus subdomínios.

+ + + +
+

Em algumas situações, você precisa especificar uma ID para sua extensão. Se você precisar especificar um ID de extensão, inclua a chave applications no manifest.json e configure sua propriedade id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

A extensão deve ter um ícone. Ele será mostrado ao lado da listagem de extensões no Gerenciador de Extensões. Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".

+ +

Crie o diretório "icons" diretamente sob o diretório "borderify". Salve um ícone chamado "border-48.png". Você pode usar o icone do nosso exemplo, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença Creative Commons Attribution-ShareAlike.

+ +

Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e também deve criar um ícone de 96x96 pixels também .PNG, para telas de alta resolução, e se você fizer isso será especificado como a propriedade 96 do objeto icons em manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Como alternativa, você pode criar um ícone em formato SVG  e ele será dimensionado corretamente.

+ + + +

borderify.js

+ +

Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte conteúdo:

+ +
document.body.style.border = "5px solid red";
+ +

Este script será carregado nas páginas que correspondem ao padrão especificado na chave content_scripts do manifest.json. O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.

+ + + +

Testando

+ +

Primeiro, verifique se você está com os arquivos corretos nos lugares certos:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalando

+ +

Acesse a área de Debugging do Firefox digitando diretamente na barra de endereço: "about: debugging", em seguida clique em "Load Temporary Add-on" e selecione o "borderify.js".

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.
+
+ Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta web-ext.

+ +

Testando

+ +

Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Não tente acessar addons.mozilla.org! Os scripts de conteúdo são bloqueados nesse domínio.

+
+ +

Experimente um pouco. Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página. Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging. Você poderá ver as mudanças imediatamente:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Empacotando e publicando

+ +

Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura. Para saber mais sobre isso, consulte "Publicando sua Extensão".

+ +

Próximos passos

+ +

Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:

+ + diff --git a/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..1e49d92e3c --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,306 @@ +--- +title: Passo-a-Passo +slug: Mozilla/Add-ons/WebExtensions/Passo-a-Passo +tags: + - Extensões Web + - extensões firefox + - passo-a-passo +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +

Neste artigo iremos criar uma Extensão para Firefox do início ao fim.

+ +

A extensão adicionará um novo botão na barra de ferramentas do Firefox. Quando clicar no botão se exibirá um popup habilitando a escolha de um animal. Uma vez que o usuário escolher um animal, a página atual do navegador será substituida por uma imagem do animal escolhido.

+ +

Para implementar esse extensão, será necessário:

+ + + +

Você pode visualizar toda a estrutura da extensão da seguinte forma:

+ +

+ +

É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:

+ + + +

Você pode encontrar o código completo da extensão no GitHub.

+ +

Para criar essa extensão você precisará do Firefox 45 ou mais recente.

+ +

Escrevendo a WebExtension

+ +

Crie um novo diretório e navegue até ele:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "applications": {
+    "gecko": {
+      "id": "beastify@mozilla.org"
+    }
+  },
+
+  "permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+
+  "browser_action": {
+    "default_icon": "button/beasts.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+
+ + + +

Perceba que todos os caminhos são relativos ao manifest.json.

+ +

O Botão na barra de ferramentas

+ +

O botão na barra de ferramentas precisa de um icone,  e nosso manifest.json informa que nós teriamos um icone em "button/beasts.png".

+ +

Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos exemplo, que é retirado do  Aha-Soft’s Free Retina iconset e usado sob os termos de sua licença.

+ +

Se você não fornecer um popup, então um evento de click é lançado para sua extensão quando o usuário clicar no botão. Se você fornecer um popup, o evento de click não envia, mas ao invés disso, o popup é aberto. Nós queremos abrir um popup, então vamos criá-lo na próxima etapa.

+ +

O popup

+ +

A função do popup é ativar a escolha do usuário para um dos três animais.

+ +

Crie um novo diretório chamado "popup" na raiz do projeto. Aqui é onde nós criar os códigos para o popup. O popup irá ser constituido em três arquivos :

+ + + +

choose_beast.html

+ +

O arquivo HTML criado é este:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+  <body>
+    <div class="beast">Frog</div>
+    <div class="beast">Turtle</div>
+    <div class="beast">Snake</div>
+
+    <script src="choose_beast.js"></script>
+  </body>
+
+</html>
+ +

Nós temos um elemento para cada escolha de animal. Perceba que nós incluimos os arquivo CSS e JS nesse arquivo, igual a uma página web.

+ +

choose_beast.css

+ +

O CSS ajusta o tamanho do popup, garantindo que as três escolhas irão preencher o espaço, e daremos a eles algum estilo básico:

+ +
html, body {
+  height: 100px;
+  width: 100px;
+  margin: 0;
+}
+
+.beast {
+  height: 30%;
+  width: 90%;
+  margin: 3% auto;
+  padding-top: 6%;
+  text-align: center;
+  font-size: 1.5em;
+  background-color: #E5F2F2;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+ +

choose_beast.js

+ +

No JavaScript para o popup, nós iremos "escutar" o evento de click . Se o clique foi em uma das três escolhas de animais, nós iremos injetar um content script na aba ativa. Um vez que o content script é carregado , nós enviaremos uma mensagem com o animal escolhido:

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("beast")) {
+    return;
+  }
+
+  var chosenBeast = e.target.textContent;
+
+  chrome.tabs.executeScript(null, {
+    file: "/content_scripts/beastify.js"
+  });
+
+  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+    chrome.tabs.sendMessage(tabs[0].id, {beast: chosenBeast});
+  });
+
+});
+
+ +

É usado três funções da API WebExtension:

+ + + +

O content script

+ +

Crie a novo diretório na pasta root do projeto chamado "content_scripts" e crie um novo arquivo com o nome "beastify.js", com o seguinte conteúdo:

+ +
// Assign beastify() as a listener for messages from the extension.
+chrome.runtime.onMessage.addListener(beastify);
+
+function beastify(request, sender, sendResponse) {
+  removeEverything();
+  insertBeast(beastNameToURL(request.beast));
+  chrome.runtime.onMessage.removeListener(beastify);
+}
+
+function removeEverything() {
+  while (document.body.firstChild) {
+    document.body.firstChild.remove();
+  }
+}
+
+function insertBeast(beastURL) {
+  var beastImage = document.createElement("img");
+  beastImage.setAttribute("src", beastURL);
+  beastImage.setAttribute("style", "width: 100vw");
+  beastImage.setAttribute("style", "height: 100vh");
+  document.body.appendChild(beastImage);
+}
+
+function beastNameToURL(beastName) {
+  switch (beastName) {
+    case "Frog":
+      return chrome.extension.getURL("beasts/frog.jpg");
+    case "Snake":
+      return chrome.extension.getURL("beasts/snake.jpg");
+    case "Turtle":
+      return chrome.extension.getURL("beasts/turtle.jpg");
+  }
+}
+
+
+ +

O content script  adiciona um listener da mensagem para a extensão (especificamente , para "choose_beast.js"). No listener:

+ + + +

Os animais

+ +

Finalmente, nós precisamos incluir as imagens dos animais.

+ +

Crie um novo diretório chamado "beasts", e adicione as três imagens nos diretório, com os nomes apropriados. Você pode obter as imagens aqui no GitHub, ou aqui:

+ +

+ +

Empacotando e instalando

+ +

Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    button/
+        beasts.png
+
+    content_scripts/
+        beastify.js
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".

+ +

Um truque é que o arquivo ZIP  deve ser um dos arquivos de extensão . Portanto, para criar um XPI a partir dos arquivos beastify , navegue até o diretório " beastify " em um shell de comando e digite:

+ +
   # in beastify/
+   zip -r ../beastify.xpi *
+ + + +

Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI

+ +

Para instalar o XPI, você apenas irá abrir o Firefox:

+ + + +

Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.

+ +

Você poderá ver o icone aparecer na barra de ferramentas. Abra uma nova página web, então click no icone, selecione um animal e veja a imagem que você escolheu na página.

diff --git a/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html b/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html deleted file mode 100644 index 7d56685269..0000000000 --- a/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Trabalhando com o código-fonte Mozilla -slug: Mozilla/Developer_guide/Codigo_Fonte -translation_of: Mozilla/Developer_guide/Source_Code ---- -

Os artigos abaixo vão ajuda-lo a obter o código-fonte Mozilla, aprender a navegar pelo código e como ter as suas modificações aceitas para inclusão no repositório principal.

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

Tópicos da documentação

-
-
-
- Obtendo o código do repositório Mercurial
-
- Se você planeja contribuir com o projeto Mozilla, a melhor forma de obter o código-fonte é fazendo checkout do repositório versionado. Aprenda aqui como fazê-lo.
-
- Baixando o código usando HTTP ou FTP
-
- Se você quer obter o código de uma versão específica ou de um produto Mozilla em particular, você pode optar por baixar um pacote de código-fonte.
-
- Vendo e buscando pelo código-fonte Mozilla online
-
- Aprenda a usar a MXR, a ferramenta Mozilla de busca e navegação para acessar o código-fonte. Esta não é uma boa forma de baixar o código, mas é uma ótima maneira de fazer buscas nele.
-
- Navegando no código-fonte Mozilla
-
- Aprenda a respeito das várias pastas na árvore de código-fonte da Mozilla e como encontrar o que você está procurando.
-
- Bugs para novatos
-
- Se você é novo no projeto e quer algo para trabalhar, olhe aqui.
-
- 		-
-
- Guia de estilo do código Mozilla
-
- O guia de estilo do código provê informações sobre como você deve formatar o seu código-fonte para garantir que você não sofra bullying dos revisadores.
-
- Guia de desenvolvimento de interfaces
-
- Diretrizes e documentação sobre como criar e atualizar interfaces XPCOM.
-
- Servidores de teste
-
- Os produtos Mozilla são compilados em pelo menos três plataformas. Se você não tem acesso a todas elas, você pode usar os servidores de teste para testar seus patches e ter certeza que eles passam nos testes.
-
- Criando um patch
-
- Após fazer mudanças no código Mozilla, o próximo passo (depois de ter certeza que ele funciona) é criar um patch e envia-lo para revisão. Esse artigo precisa ser completamente atualizado para o Mercurial.
-
- Obtendo acesso para fazer commit no código-fonte
-
- Sentindo-se preparado para untar-se aos poucos e orgulhosos committers? Descubra como obter acesso para gravação no código Mozilla.
-
- Obtendo o código Mozilla antigo usando CVS
-
- Versões antigas do código-fonte Mozilla, assim como as versões atuais do NSS e NSPR, são mantidas num repositório CVS. Aprenda sobre isso nesse artigo.
-
-
-

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code" } ) }}

diff --git a/files/pt-br/mozilla/developer_guide/source_code/index.html b/files/pt-br/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..7d56685269 --- /dev/null +++ b/files/pt-br/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,70 @@ +--- +title: Trabalhando com o código-fonte Mozilla +slug: Mozilla/Developer_guide/Codigo_Fonte +translation_of: Mozilla/Developer_guide/Source_Code +--- +

Os artigos abaixo vão ajuda-lo a obter o código-fonte Mozilla, aprender a navegar pelo código e como ter as suas modificações aceitas para inclusão no repositório principal.

+ + + + + + + + + + +
+

Tópicos da documentação

+
+
+
+ Obtendo o código do repositório Mercurial
+
+ Se você planeja contribuir com o projeto Mozilla, a melhor forma de obter o código-fonte é fazendo checkout do repositório versionado. Aprenda aqui como fazê-lo.
+
+ Baixando o código usando HTTP ou FTP
+
+ Se você quer obter o código de uma versão específica ou de um produto Mozilla em particular, você pode optar por baixar um pacote de código-fonte.
+
+ Vendo e buscando pelo código-fonte Mozilla online
+
+ Aprenda a usar a MXR, a ferramenta Mozilla de busca e navegação para acessar o código-fonte. Esta não é uma boa forma de baixar o código, mas é uma ótima maneira de fazer buscas nele.
+
+ Navegando no código-fonte Mozilla
+
+ Aprenda a respeito das várias pastas na árvore de código-fonte da Mozilla e como encontrar o que você está procurando.
+
+ Bugs para novatos
+
+ Se você é novo no projeto e quer algo para trabalhar, olhe aqui.
+
+ 		+
+
+ Guia de estilo do código Mozilla
+
+ O guia de estilo do código provê informações sobre como você deve formatar o seu código-fonte para garantir que você não sofra bullying dos revisadores.
+
+ Guia de desenvolvimento de interfaces
+
+ Diretrizes e documentação sobre como criar e atualizar interfaces XPCOM.
+
+ Servidores de teste
+
+ Os produtos Mozilla são compilados em pelo menos três plataformas. Se você não tem acesso a todas elas, você pode usar os servidores de teste para testar seus patches e ter certeza que eles passam nos testes.
+
+ Criando um patch
+
+ Após fazer mudanças no código Mozilla, o próximo passo (depois de ter certeza que ele funciona) é criar um patch e envia-lo para revisão. Esse artigo precisa ser completamente atualizado para o Mercurial.
+
+ Obtendo acesso para fazer commit no código-fonte
+
+ Sentindo-se preparado para untar-se aos poucos e orgulhosos committers? Descubra como obter acesso para gravação no código Mozilla.
+
+ Obtendo o código Mozilla antigo usando CVS
+
+ Versões antigas do código-fonte Mozilla, assim como as versões atuais do NSS e NSPR, são mantidas num repositório CVS. Aprenda sobre isso nesse artigo.
+
+
+

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code" } ) }}

diff --git a/files/pt-br/mozilla/firefox/experimental_features/index.html b/files/pt-br/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..12a4aa7c23 --- /dev/null +++ b/files/pt-br/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,469 @@ +--- +title: Novas funcionalidades no Firefox +slug: Mozilla/Firefox/Novas_funcionalidades +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}

Em ordem para testar as novas funcionalidades, a Mozilla publica uma versão de testes do navegador Firefox, Firefox Nightly, diariamente. Funcionalidades experimentais, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

+ +

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition.

+ +

CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Grid Layout4040DisabledDisabledlayout.css.grid.enabled
SubgridsDisabledDisabledDisabledDisabledlayout.css.grid-template-subgrid-value.enabled
Logical values for clear and float CSS properties
+ The values {{cssxref("clear")}}: inline-start and clear: inline-end as well as {{cssxref("float")}}: inline-start and float: inline-end are making easier to create layouts that are agnostic to the text directionality.		4545DisabledDisabledlayout.css.float-logical-values.enabled
Display stray control characters in CSS as hex boxes
+ This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.		4343DisabledDisabledlayout.css.control-characters.enabled
The transform-box property
+ Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.		4141DisabledDisabledsvg.transform-box.enabled
Basic shapes in clip-path
+ Adds the functions circle(), ellipse(), and polygon() to the set of possible values for {{cssxref("clip-path")}}.		Enabled
+ (available since 47, enabled by default since 53)		Enabled
+ (available since 47, enabled by default since 53)		Disabled
+ (available since 47)		Disabled
+ (available since 47)		layout.css.clip-path-shapes.enabled
The font-display descriptor for @font-face
+ To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		layout.css.font-display.enabled
Longhand properties of CSS Masks
+ The longhand properties of CSS Masks are only available behind a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).		---------------
The touch-action CSS property
+ The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification, and lets the CSS specify how and in what way the user is able to manipulate an object by touch.		50---------layout.css.touch_action.enabled
+ +

JavaScript

+ +

See also ECMAScript Next support for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Exponentiation operator42Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}None
Additions to the ArrayBuffer object
+ Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new ArrayBuffer whose contents have been taken from the oldBuffer's data (spec).		36DisabledDisabledDisabledNone
TypedObject objects (spec)EnabledDisabledDisabledDisabledNone
SIMD (specification and polyfill)EnabledDisabledDisabledDisabledNone
Shared Memory objects
+ {{jsxref("SharedArrayBuffer")}}
+ {{jsxref("Atomics")}}		Enabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		javascript.options.shared_memory
+ +

APIs

+ +

Canvas & WebGL

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebGL 2
+ The {{domxref("WebGL2RenderingContext")}} interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.		46
+ (implemented with disabled pref before 46)		Enabled in 51Enabled in 51Enabled in 51webgl.enable-webgl2
WEBGL_debug_renderer_info extension
+ The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.		4242DisabledDisabledwebgl.enable-debug-renderer-info
OffscreenCanvas
+ The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.		Disabled
+ (available since 44)		Disabled
+ (available since 44)		Disabled
+ (available since 44)		Disabled
+ (available since 44)		gfx.offscreencanvas.enabled
Hit regions
+ Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.		Disabled
+ (available since 30)		Disabled
+ (available since 30)		Disabled
+ (available since 30)		Disabled
+ (available since 30)		canvas.hitregions.enabled
+ +

 DOM

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebVR API
+ The WebVR API allows to control and use virtual reality devices.		46
+ A major update of the interface happened in version 51.		46
+ A major update of the interface happened in version 51.		DisabledDisableddom.vr.enabled
FlyWeb
+ FlyWeb is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.		51DisabledDisabledDisableddom.flyweb.enabled
HTMLMediaElement.seekToNextFrame()
+ Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.		49
+ (Fundamental update in version 50)		49
+ (Fundamental update in version 50)		DisabledDisabledmedia.seekToNextFrame.enabled
GeometryUtils.getBoxQuads() ({{bug(917755)}})3131DisabledDisabledlayout.css.getBoxQuads.enabled
GeometryUtils.convertPointFromNode(),
+ GeometryUtils.RectFromNode(), and
+ GeometryUtils.convertQuadFromNode()
+ ({{bug(918189)}})		3131DisabledDisabledlayout.css.convertFromNode.enabled
Node.rootNode
+ The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.
+ This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.		4848DisabledDisableddom.node.rootNode.enabled
Performance Observer API
+ The {{domxref("PerformanceObserver")}} interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.		49DisabledDisabledDisableddom.enable_performance_observer
WebVTT Regions API
+ WebVTT regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.
+ This interface is considered to be in flux and isn't therefore activated in any version by default.		Disabled
+ (Experimental implementation since version 30)		DisabledDisabledDisabledmedia.webvtt.regions.enabled
Support for audio and video tracks
+ Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.
+ Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.		Disabled
+ (Experimental implementation since version 33)		DisabledDisabledDisabledmedia.track.enabled
Better value for Event.timestamp
+ The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.		32 (Windows)
+ 43 (Linux)		32 (Windows)
+ 43 (Linux)		DisabledDisabledmedia.track.enabled
Pointer Events50DisabledDisabledDisableddom.w3c_pointer_events.enabled
MediaDevices.ondevicechange and the devicechange event
+ The {{domxref("MediaDevices.ondevicechange")}} event handler and corresponding {{event("devicechange")}} event make it possible to detect and react when audio and video devices are attached to or removed from the computer.		 +

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		media.ondevicechange.enabled
+ +

Developer Tools

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Debugger rewrite in HTML52525252devtools.debugger.new-debugger-frontend
Console rewrite in HTML52DisabledDisabledDisableddevtools.webconsole.new-frontend-enabled
Responsive Design Mode rewrite in HTML
+ A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.		52525252devtools.responsive.html.enabled
Experimental Performance tool options
+ Enables options in the UI for JIT optimizations, memory, etc.		41DisabledDisabledDisableddevtools.performance.ui.experimental
+ +

See also

+ + diff --git a/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html b/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html deleted file mode 100644 index 12a4aa7c23..0000000000 --- a/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Novas funcionalidades no Firefox -slug: Mozilla/Firefox/Novas_funcionalidades -translation_of: Mozilla/Firefox/Experimental_features ---- -
{{FirefoxSidebar}}

Em ordem para testar as novas funcionalidades, a Mozilla publica uma versão de testes do navegador Firefox, Firefox Nightly, diariamente. Funcionalidades experimentais, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

- -

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition.

- -

CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Grid Layout4040DisabledDisabledlayout.css.grid.enabled
SubgridsDisabledDisabledDisabledDisabledlayout.css.grid-template-subgrid-value.enabled
Logical values for clear and float CSS properties
- The values {{cssxref("clear")}}: inline-start and clear: inline-end as well as {{cssxref("float")}}: inline-start and float: inline-end are making easier to create layouts that are agnostic to the text directionality.		4545DisabledDisabledlayout.css.float-logical-values.enabled
Display stray control characters in CSS as hex boxes
- This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.		4343DisabledDisabledlayout.css.control-characters.enabled
The transform-box property
- Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.		4141DisabledDisabledsvg.transform-box.enabled
Basic shapes in clip-path
- Adds the functions circle(), ellipse(), and polygon() to the set of possible values for {{cssxref("clip-path")}}.		Enabled
- (available since 47, enabled by default since 53)		Enabled
- (available since 47, enabled by default since 53)		Disabled
- (available since 47)		Disabled
- (available since 47)		layout.css.clip-path-shapes.enabled
The font-display descriptor for @font-face
- To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		layout.css.font-display.enabled
Longhand properties of CSS Masks
- The longhand properties of CSS Masks are only available behind a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).		---------------
The touch-action CSS property
- The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification, and lets the CSS specify how and in what way the user is able to manipulate an object by touch.		50---------layout.css.touch_action.enabled
- -

JavaScript

- -

See also ECMAScript Next support for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Exponentiation operator42Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}None
Additions to the ArrayBuffer object
- Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new ArrayBuffer whose contents have been taken from the oldBuffer's data (spec).		36DisabledDisabledDisabledNone
TypedObject objects (spec)EnabledDisabledDisabledDisabledNone
SIMD (specification and polyfill)EnabledDisabledDisabledDisabledNone
Shared Memory objects
- {{jsxref("SharedArrayBuffer")}}
- {{jsxref("Atomics")}}		Enabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		javascript.options.shared_memory
- -

APIs

- -

Canvas & WebGL

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebGL 2
- The {{domxref("WebGL2RenderingContext")}} interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.		46
- (implemented with disabled pref before 46)		Enabled in 51Enabled in 51Enabled in 51webgl.enable-webgl2
WEBGL_debug_renderer_info extension
- The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.		4242DisabledDisabledwebgl.enable-debug-renderer-info
OffscreenCanvas
- The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.		Disabled
- (available since 44)		Disabled
- (available since 44)		Disabled
- (available since 44)		Disabled
- (available since 44)		gfx.offscreencanvas.enabled
Hit regions
- Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.		Disabled
- (available since 30)		Disabled
- (available since 30)		Disabled
- (available since 30)		Disabled
- (available since 30)		canvas.hitregions.enabled
- -

 DOM

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebVR API
- The WebVR API allows to control and use virtual reality devices.		46
- A major update of the interface happened in version 51.		46
- A major update of the interface happened in version 51.		DisabledDisableddom.vr.enabled
FlyWeb
- FlyWeb is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.		51DisabledDisabledDisableddom.flyweb.enabled
HTMLMediaElement.seekToNextFrame()
- Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.		49
- (Fundamental update in version 50)		49
- (Fundamental update in version 50)		DisabledDisabledmedia.seekToNextFrame.enabled
GeometryUtils.getBoxQuads() ({{bug(917755)}})3131DisabledDisabledlayout.css.getBoxQuads.enabled
GeometryUtils.convertPointFromNode(),
- GeometryUtils.RectFromNode(), and
- GeometryUtils.convertQuadFromNode()
- ({{bug(918189)}})		3131DisabledDisabledlayout.css.convertFromNode.enabled
Node.rootNode
- The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.
- This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.		4848DisabledDisableddom.node.rootNode.enabled
Performance Observer API
- The {{domxref("PerformanceObserver")}} interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.		49DisabledDisabledDisableddom.enable_performance_observer
WebVTT Regions API
- WebVTT regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.
- This interface is considered to be in flux and isn't therefore activated in any version by default.		Disabled
- (Experimental implementation since version 30)		DisabledDisabledDisabledmedia.webvtt.regions.enabled
Support for audio and video tracks
- Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.
- Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.		Disabled
- (Experimental implementation since version 33)		DisabledDisabledDisabledmedia.track.enabled
Better value for Event.timestamp
- The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.		32 (Windows)
- 43 (Linux)		32 (Windows)
- 43 (Linux)		DisabledDisabledmedia.track.enabled
Pointer Events50DisabledDisabledDisableddom.w3c_pointer_events.enabled
MediaDevices.ondevicechange and the devicechange event
- The {{domxref("MediaDevices.ondevicechange")}} event handler and corresponding {{event("devicechange")}} event make it possible to detect and react when audio and video devices are attached to or removed from the computer.		 -

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		media.ondevicechange.enabled
- -

Developer Tools

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Debugger rewrite in HTML52525252devtools.debugger.new-debugger-frontend
Console rewrite in HTML52DisabledDisabledDisableddevtools.webconsole.new-frontend-enabled
Responsive Design Mode rewrite in HTML
- A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.		52525252devtools.responsive.html.enabled
Experimental Performance tool options
- Enables options in the UI for JIT optimizations, memory, etc.		41DisabledDisabledDisableddevtools.performance.ui.experimental
- -

See also

- - diff --git a/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..1a22edfb92 --- /dev/null +++ b/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,45 @@ +--- +title: Zoom de página inteira +slug: Mozilla/Firefox/Releases/3/Zoom_de_página_inteira +tags: + - Extensões + - Firefox 3 + - XUL +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +
{{FirefoxSidebar}}
+ +

{{ Gecko_minversion_header("1.9") }}

+ +

Zoom de página inteira (ou apenas fullzoom) é um novo recurso do Firefox 3.

+ +

Exemplo (XUL:browser)

+ +

O exemplo a seguir demonstra o uso da janela atual do navegador. Esse é o uso típico de uma extensão do Firefox.

+ +
var zoom = ZoomManager.getZoomForBrowser(gBrowser.selectedBrowser);
+ZoomManager.enlarge();
+ZoomManager.setZoomForBrowser(gBrowser.selectedBrowser, ZoomManager.MIN);
+
+ +

Exemplo (XUL:iframe)

+ +

Nota: Isso provavelmente está desatualizado.

+ +

Você pode usar o recurso fullZoom para um XUL:iframe também. No entanto, como um iframe não tem uma propriedade  markupDocumentViewer, precisamos obtê-la primeiro:

+ +
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+ +

References

+ + diff --git "a/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" "b/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" deleted file mode 100644 index 1a22edfb92..0000000000 --- "a/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Zoom de página inteira -slug: Mozilla/Firefox/Releases/3/Zoom_de_página_inteira -tags: - - Extensões - - Firefox 3 - - XUL -translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom ---- -
{{FirefoxSidebar}}
- -

{{ Gecko_minversion_header("1.9") }}

- -

Zoom de página inteira (ou apenas fullzoom) é um novo recurso do Firefox 3.

- -

Exemplo (XUL:browser)

- -

O exemplo a seguir demonstra o uso da janela atual do navegador. Esse é o uso típico de uma extensão do Firefox.

- -
var zoom = ZoomManager.getZoomForBrowser(gBrowser.selectedBrowser);
-ZoomManager.enlarge();
-ZoomManager.setZoomForBrowser(gBrowser.selectedBrowser, ZoomManager.MIN);
-
- -

Exemplo (XUL:iframe)

- -

Nota: Isso provavelmente está desatualizado.

- -

Você pode usar o recurso fullZoom para um XUL:iframe também. No entanto, como um iframe não tem uma propriedade  markupDocumentViewer, precisamos obtê-la primeiro:

- -
var zoom = 1.5;
-var iframe = document.getElementById("authorFrame");
-var contViewer = iframe.docShell.contentViewer;
-var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
-docViewer.fullZoom = zoom;
-
- -

References

- - diff --git "a/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" "b/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" new file mode 100644 index 0000000000..db1791d5e7 --- /dev/null +++ "b/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" @@ -0,0 +1,21 @@ +--- +title: Tratando Formulários com PHP +slug: Glossario/Tratando_Formulários_com_PHP +tags: + - Método POST + - PHP +translation_of: Glossary/Tratando_Formulários_com_PHP +--- +

Uma das características mais fortes do PHP é o jeito como ele trata formulários HTML. O conceito básico que é importante entender é que qualquer elemento de formulário irá automaticamente ficar disponível para seus scripts PHP. Por favor leia a seção Variáveis externas do PHP para mais informações e exemplos de como usar formulários com PHP. Aqui vai um exemplo de formulário HTML:

+ +

Enviando Dados com método POST

+ +

 

+ +
<form action="arquivo.php" method="post">
+ <p>Nome: <input type="text" name="nnome" /></p>
+ <p>idade: <input type="text" name="idade" /></p>
+ <p><input type="submit" /></p>
+</form>
+ +

 

diff --git a/files/pt-br/orphaned/hello_world_rust/index.html b/files/pt-br/orphaned/hello_world_rust/index.html new file mode 100644 index 0000000000..f472f6a3e9 --- /dev/null +++ b/files/pt-br/orphaned/hello_world_rust/index.html @@ -0,0 +1,191 @@ +--- +title: Hello World Rust +slug: Hello_World_Rust +tags: + - Performance + - baixo-nível + - brazil + - compilada + - compile + - hello world + - low-level + - programar + - programming + - pt-br + - rust + - rustontherocks + - servo +--- +

Hello, World!

+ +

 

+ +

 

+ +

Que tal  escrevermos um clássico programa em Rust?

+ +

 

+ +

Uma coisa legal sobre começar com programas simples é o fato de que você percebe que o seu compilador não está somente instalado como também está funcionando propriamente.

+ +

 

+ +

A primeira coisa que nós precisamos fazer é criar um local para que possamos organizar nossos códigos. Eu gosto de criar uma pasta projetos dentro da minha pasta home. Lembrando que o Rust não se importa com o local onde o seu código se encontra.

+ +

 

+ +

Isso nos leva a uma outro detalhe: eu estou  assumindo que você já tem uma certa familiaridade com a linha de comando. Se você preferir utilizar uma IDE ao invés da linha de comando, você talvez queira dar uma olhada no SolidOak(https://github.com/oakes/SolidOak ), ou qualquer plugin disponível para a sua IDE preferida. Existem por aí um bom número de extensões com qualidade variável em desenvolvimento por parte da comunidade. A equipe Rust também desenvolve plugins para vários editores(https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md ).

+ +

 

+ +

Dito isso, vamos criar um deretório dentro da nossa pasta projetos.

+ +

 

+ +

$ mkdir ~/projects

+ +

$ cd ~/projects

+ +

$ mkdir hello_world

+ +

$ cd hello_world

+ +

 

+ +

Caso você esteja no Windows e não esteja utilizando PowerShell, talvez o ~ não funcione. Consulte a documentação do seu shell para mais detalhes.

+ +

 

+ +

Vamos criar um arquivo para o nosso código. Nós chamamos nosso arquivo de main.rs. Arquivos Rust são sempre terminados com a extensão .rs. Caso você esteja utilizando mais de uma palavra no nome de seu arquivo, é preferível que você utilize o underscore/underline: hello_world.rs ao invés de concatenar tudo como: helloword.rs. No mundo rust isso é chamado de snake_case.

+ +

 

+ +

Agora que você já tem o seu arquivo abra-o e digite o seguinte código:

+ +

 

+ +

fn main() {

+ +

println!("Hello, world!");

+ +

}

+ +

 

+ +

Salve o arquivo e digite o seguinte no seu terminal:

+ +

 

+ +

$ rustc main.rs

+ +

$ ./main # ou main.exe no Windows

+ +

Hello, world!

+ +

 

+ +

Sucesso!

+ +

 

+ +

Agora, como diria Jack: "Vamos por partes...".

+ +

 

+ +

fn main() {

+ +

 

+ +

}

+ +

 

+ +

Estas linhas definem uma função em Rust. A função main é de fato especial: ela é o começo de todo programa feito em Rust. Essas primeiras linhas dizem “Eu estou declarando uma função chamada main que não possui nenhum argumento e não retorna valor nenhum.” Caso tivesse argumentos eles estariam dentro dos parênteses (( )), e como não estamos retornando nada nós podemos omitir o tipo de retorno inteiramente. Falaremos mais sobre isso em tutoriais futuros.

+ +

 

+ +

Você também deve notar que a função é envolta por chaves ({ }). Rust exige chaves em volta do escopo das funções. Também é considerado uma boa prática abrir chaves na mesma linha onde foi declarada a função.

+ +

 

+ +

Próxima linha:

+ +

 

+ +

println!("Hello, world!");

+ +

 

+ +

Esta linha faz todo o trabalho do nosso pequeno programa. Existem inúmeros detalhes importantes nela. Lembre-se de configurar o seu editor para que utilize quatro espaços para fazer a identação. É disponibilizado várias configurações para alguns editores (https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md).

+ +

 

+ +

O segundo ponto é a parte do println!( ).

+ +

Este trecho de código chama uma macro(http://doc.rust-lang.org/book/macros.html) Rust, que é a forma como Rust realiza a metaprogramação. Se ao invés de uma macro fosse uma função, teríamos algo como: println( ). Para o nosso propósito aqui, nós não precisamos nos preocupar com essa diferença. Apenas saiba que algumas vezes você irá ver ' ! ', o que indica uma chamada de macro e não uma chamada de função normal. Rust implementa println!( ) como uma macro e não como uma simples função por alguns bons motivos, contudo, como dito, não se faz necessário explicar agora.

+ +

Uma última ressalva:se você já usou macros em outras linguagens como C/C++, você verá que as macros do Rust são bastante diferentes. Não fique assustado com as macros. Nós vamos entendendo melhor ao longo dos próximos tutoriais.

+ +

 

+ +

Próximo, "Hello, world!" é uma 'string'. Strings são geralmente bastante complicadas em uma 'system language', e ainda mais, temos uma string estáticamente alocada. Caso você queira ler mais sobre alocação, confira este link: http://doc.rust-lang.org/book/the-stack-and-the-heap.html, mas por hora não se faz necessário.

+ +

Voltando, nós passamos a nossa string como um argumento para a macro println!, que por sua vez imprime na tela a nossa 'string'. Fácil!

+ +

 

+ +

Finalmente, a nossa linha de código termina com um ponto e vírgula ( ; ). Rust é uma linguagem orientada à expressões, o que significa que a maior parte da linguagem são expressões e não apenas declarações. O ; é usado para indicar que uma expressão terminou e que a próxima está prestes a começar. A grande maioria das linhas de código em Rust acabarão com ;.

+ +

 

+ +

Por fim, compilar e executar.

+ +

Para compilar usamos o nosso compilador rustc e em seguida passamos o nome do nosso arquivo:

+ +

 

+ +

$ rustc main.rs

+ +

 

+ +

Caso você tenha experiência com C/C++ verá que existe semelhança com o gcc e clang. Após o comando, Rust gerará um binário executável. Podemos vê-lo utilizando o comando ls:

+ +

 

+ +

$ ls

+ +

mainmain.rs

+ +

 

+ +

No Windows:

+ +

$ dir

+ +

main.exemain.rs

+ +

 

+ +

Agora temos dois arquivos, o nosso código com a extensão .rs e o executável(main.exe para Windows ou main para os demais).

+ +

 

+ +

$ ./main # or main.exe on Windows

+ +

 

+ +

O comando acima exibe a nossa string hello, world! no terminal.

+ +

 

+ +

Caso você venha de alguma linguagem dinâmica como Ruby, Python ou Javascript épossível que você nunca tenha feito esses dois passos anteriores em separado. Rust é uma linguagem “anteriormente compilada”, o que significa que você pode compilar um programa e compartilhar com alguém que não tenha Rust instalado e essa pessoa irá conseguir executar numa boa. Agora, se você compartilhar um arquivo .rb ou .py ou .js a pessoa com quem você compartilhou precisará ter Ruby/Python/Javascript instalado, em contra-partida com estas linguagens você compila e roda em um único comando. Tudo é uma questão de escolha quando se trata de padrões de linguagem e Rust fez as dele.

+ +

 

+ +

Parabéns! Você oficialmente escreveu seu primeiro programa em Rust. Isso lhe torna um programador Rust! Bem-vindo!!!

+ +

 

+ +

 

+ +

 

diff --git a/files/pt-br/orphaned/instalando_rust/index.html b/files/pt-br/orphaned/instalando_rust/index.html new file mode 100644 index 0000000000..883144991d --- /dev/null +++ b/files/pt-br/orphaned/instalando_rust/index.html @@ -0,0 +1,132 @@ +--- +title: Instalando Rust +slug: Instalando_Rust +tags: + - Linux + - Tutorial + - Windows + - baixo nivel + - brasil + - brazil + - hello world + - install + - low-level + - programming + - rust + - rustontherocks + - system language +--- +

Instalando o Rust

+ +

 

+ +

O primeiro passo é instalar. Existem várias maneiras de se instalar o Rust, porém a maneiras mais fácil é através do script 'rustup'. Se o seu sistema é Gnu/Linux ou Mac, eis o que você precisa fazer:

+ +

 

+ +
+

$ curl -sf -L https://static.rust-lang.org/rustup.sh | sh

+
+ +

 

+ +

Se você está preocupado com a potencial brecha de segurança de usar curl | sh , por favor continue lendo e veja a nossa alternativa abaixo. Sinta-se à vontade para fazer o processo em dois passos:

+ +

 

+ +
+

$ curl -f -L https://static.rust-lang.org/rustup.sh -O

+ +

$ sh rustup.sh

+
+ +

 

+ +
+

Se você utiliza Windows, por favor baixe o instalador correto para a sua máquina:

+ +

 

+ +

32bits https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi

+ +

 

+ +

64bits https://static.rust-lang.org/dist/rust-1.0.0-beta-x86_64-pc-windows-gnu.msi

+
+ +

Ah, antes que eu esqueça!

+ +

 

+ +

Plataformas oficialmente suportadas:

+ +

 

+ +
+

      Windows (7, 8, Server 2008 R2)

+ +

Gnu/Linux(2.6.18 ou posterior, várias distribuições), x86 e x86-64

+ +

OSX 10.7(Lion) ou posterior, x86 e x86-64

+
+ +
+
+ +

Rust foi bastante testado nestas plataformas e em algumas outras, como android. Mas estas são as mais amigáveis para se trabalhar, uma vez que foram as mais testadas.

+ +

 

+ +

Finalmente, um comentário sobre Windows. Rust considerou Windows como uma plataforma de primeira classe na fase de lançamento. Contudo, se formos honestos precisamos dizer que a experiência no Windows não é tão boa quanto no Gnu/Linux e OS X. Estamos trabalhando para melhorar isso! Se alguma coisa não funcionar, é um 'bug'. Por favor avise-nos caso isso venha a acontecer. Cada 'commit' é testado no Windows assim como em qualquer outra plataforma.

+ +

 

+ +

Se você tem Rust instalado, você pode abrir um terminal e digitar o seguinte:

+ +

 

+ +
+

$ rustc –version

+
+ +

 

+ +

Você deverá ver como saída o número da versão do Rust que está instalada, o 'commit hash', a data do 'commit' e a data que foi compilado.

+ +

 

+ +
+

rustc 1.0.0-beta (9854143cb 2015-04-02) (built 2015-04-02)

+
+ +

 

+ +

Caso você veja uma saída parecida com essa, parabéns Rust foi instalado com sucesso!

+ +

 

+ +
+

O instalador oficial também instala uma cópia da documentação para que você possa lê-la offline. Em sistemas UNIX, /usr/local/share/doc/rust é o local onde ela se encontra. No windows a documentação encontra-se na pasta share/doc dentro do local onde o Rust foi instalado.

+ +

 

+
+ +

Caso você não tenha obtido uma saída como a saida mostrada aqui, existem inúmeros lugares que você poderá pedir ajuda. O mais indicado é o canal do Rust no IRC (#rust) no servidor da mozilla (irc.mozilla.org). Você poderá acessar diretamente clicando neste link: https://client02.chat.mibbit.com/server=irc.mozilla.org&channel=%23rust .

+ +

 

+ +
+

Outro importantes links...

+ +

 

+ +

fórum dos usuários https://users.rust-lang.org/

+ +

RoR Project http://rustontherocks.org

+ +

Stack Overflow http://stackoverflow.com/questions/tagged/rust

+ +

 

+ +

 

+
diff --git a/files/pt-br/orphaned/learn/how_to_contribute/index.html b/files/pt-br/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..8b9cdfb15b --- /dev/null +++ b/files/pt-br/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,90 @@ +--- +title: Como contribuir para a área de aprendizagem da MDN +slug: Aprender/Como_contribuir +tags: + - Documentação + - Guia(2) + - Iniciante + - MDN Meta + - aprendizado + - contribuir + - prioridde + - pt-br +translation_of: Learn/How_to_contribute +--- +

Se você está aqui pela primeira vez ou após uma pesquisa mais aprofundada, é porque provavelmente você está interessado em contribuir para a área de aprendizado da MDN. Isto é uma excelente notícia!

+ +

Nesta página, você irá encontrar tudo o que você precisa para começar a ajudar a melhorar o conteúdo de aprendizado da MDN. Existem muitas coisas que você pode fazer, dependendo de quanto tempo você tem disponível ou se você éum iniciante, um desenvolvedor web, ou um professor.

+ +
+

Nota: se você já é um contribuinte do MDN, não hesite em checar novamente a pagina com o status da documentação para acompanhar o trabalho que tem sido feito e ver quais prioridades estão sendo escritas.

+
+ +
+

Nota: Os contribuintes estão utilizando um painel na Trello para organizar as suas tarefas. Se você quiser utilizar esta ferramenta, apena se registre na Trello e procure por Jeremie lhe dar acesso de escrita ao painel.

+
+ +

Encontre tarefas específicas

+ +

Uma forma comum que as pessoas usam para contribuir para a Área de aprendizado é lendo os artigos, corrigindo erros de digitação e sugerindo melhorias. Adição de exemplos no nosso repositório do github também é bem vindo e entre em contato conosco se você quiser pedir o que mais precisar.

+ +

Contribuir é um ótimo modo de se divertir enquanto aprende novas coisas. Se você se sentir perdido ou tiver dúvidas, não hesite em chegar até nós no "Fórum de conversa e aprendizado" ou no canal IRC (Veja o final da página para mais detalhes). Chris Mills é o "topic driver" da Área de aprendizado - você também poderia tentar contatá-lo diretamente.

+ +

As sessões a seguir oferecem algumas ideias gerais de tipos de tarefas que você pode fazer.

+ +

Eu sou um iniciante

+ +

Isto é incrível!  Iniciantes são muito importantes e valiosos para criar e dar feedback sobre o material de aprendizado. Você possui uma perspectiva única destes artigos já que você faz parte do público alvo, o que pode torna-lo um membro valioso da nossa equipe. De fato, se você está utilizando um dos nossos artigos para aprender algo e você ficar preso, ou de alguma forma achar o artigo confuso, você pode consertar isso ou nos contar sobre o problema para nós nos certificarmos que isso será corrigido.

+ +

Contribuir também é uma ótima maneira de se divertir enquanto aprende coisas novas se você se sentir perdido ou tiver perguntas, não hesite em nos contatar na nossa lista de e-mail ou no nosso canal IRC (obtenha detalhes na parte inferior desta página).

+ +

Aqui temos algumas sugestões de como você pode contribuir:

+ +
+
Adicionar tags para os nossos artigos (5 min)
+
Adicionar tags para o conteúdo do MDN é uma das maneiras mais fáceis de contribuir para a MDN. Uma de nossas diversas características é utilizar tags para ajudar no contexto da informação, é muito valioso contribuir com as tags. Para começar, dê uma olhada nesta lista de entradas do glosário e artigos de aprendizagem sem nenhuma tag.
+
Escrever e revisar entradas no glossário (15 min)
+
Como um iniciante, precisamos dos seus olhos ainda frescos olhando para o nosso conteúdo. Se você achar a entrada no glossário difícil de compreender, isto significa que está entrada precisa ser melhorada. Sinta-se livre para fazer qualquer mudança que você ache necessária. Se você acredita não ter a habilidade necessária para editar a entrada por você mesmo, nos comunique através da nossa lista de e-mail.
+
Escrever uma nova entrada no glossário (1 horas)
+
Esta é a maneira mais efetiva de aprender algo novo. Pegue um conceito sobre o qual você deseja aprender, e conforme você aprende sobre ele, escreva uma entrada no glossário. Explicar algo para os outros é uma ótima maneira de consolidar o conhecimento no seu cérebro, e ajudar para que as coisas possam fazer mais sentido para você, tudo enquanto ajuda outras pessoas. Todo mundo ganha!.
+
Ler e revisar um artigo de aprendizagem (2 horas)
+
É muito parecido com revisar entradas no glossário (veja acima); apenas leva mais tempo, geralmente estes artigos são um pouco maiores.
+
+ +

Eu sou um desenvolvedor web

+ +

Fantástico! Suas habilidades técnicas são tudo o que nós precisamos para certeza que fornecemos um conteúdo preciso para os iniciantes. Como esta parte específica do MDN é dedicada à aprendizagem da Web, certifique-se que as suas explicações são as mais simples possíveis, simples, porém úteis. É mais importante ser compreensível do que ser excessivamente precisa.

+ +
+
Escrever e revisar entradas no glossário (15 min)
+
Como um desenvolvedor web, nós precisamos de você tenha certeza que o nosso conteúdo é tecnicamente preciso, sem ser muito tedioso. Sinta-se livre para fazer qualquer mudança que você achar necessário. Se você quiser discutir o conteúdo antes da edição, nos contate na nossa lista de e-mail ou canal IRC.
+
Escrever uma nova entrada no glossário (1 hora)
+
Esclarecer termos técnicos é uma boa forma de aprender e ser ao mesmo tempo tecnicamente preciso e simples. Os iniciantes vão agradecer por isso. Nós temos muitos termos indefinidos que precisam da sua atenção. Pegue um e você já estará pronto para começar.
+
Escrever e revisar artigos de prendizagem (2 hora)
+
Esta é a mesma coisa que revisar uma entrada do glossário (ver acima); ela só leva um pouco mais de tempo pois estes artigos são um pouco maiores.
+
Escrever um novo artigo de aprendizagem (4 horas)
+
A MDN está em falta de alguns artigos simples sobre o uso de tecnologias web (HTML, CSS, JavaScript, etc). Temos também alguns conteúdos antigos na MDN que merecem ser revisados e reformulados. Leve as suas habilidades ao limite para tornar as tecnologias da Web utilizáveis mesmo para os iniciantes.
+
Criar exercícios, exemplos de código e ferramentas de aprendizagem interativas (? horas)
+
Todos os nossos artigos de aprendizagem exigem que chamamos de "aprendizagem ativa", porque as pessoas aprendem melhor fazendo algo por si mesmas. Tais materiais são exercícios ou conteúdos interativos que ajudam o usuário a aplicar e manipular os conceitos descritos em um artigo. Há muitas formas possíveis de tornar os conteúdos de aprendizagem interativos, desde a criação de amostras de código com JSFiddle, ou similar, liberte a sua criatividade para a construção de conteúdo interativo com Thimble.
+
+ +

Eu sou um professor

+ +

A MDN tem uma longa história de excelência técnica, mas falta profundidade de compreensão da melhor maneira de ensinar conceitos para os recém-chegados. E é aqui que precisamos de você, como um professor ou educador. Você pode nos ajudar a garantir que os nossos materiais possuam uma boa didática, e que sejam práticos para os nossos leitores.

+ +
+
Ler e revisar uma entrada no glossário (15 min)
+
Confira uma entrada de glossário e sinta-se livre para fazer qualquer alteração que você ache necessária. Se você quiser discutir sobre o conteúdo antes da edição, entre em contato conosco na nossa lista de e-mail ou canal IRC.
+
Escrever uma nova entrada no glossário  (1 hora)
+
Definições claras, simples de termos e conceitos básicos no glossário são fundamentais para atender às necessidades dos iniciantes. Sua experiência como educador pode ajudar a criar excelentes entradas de glossário; temos muitos termos indefinidos que precisam da sua atenção. Escolha um e vá a diante.
+
Adicionar ilustrações/ou esquemas para os artigos (1 hora)
+
Como você deve saber, as ilustrações são uma parte valiosa de qualquer conteúdo de aprendizagem. Isso é algo que muitas vezes não temos na MDN e suas habilidades podem fazer a diferença nessa área. Confira os artigos que necessitam conteúdo ilustrativo e pegue um que você queira criar gráficos.
+
Ler e revisar um artigo de aprendizagem (2 horas)
+
Isto é semelhante a revisar entradas de glossário (veja acima), mas exige mais tempo porque os artigos são um pouco maiores.
+
Escrever um novo artigo de aprendizagem (4 horas)
+
Precisamos de artigos simples e diretos sobre o ecossistema da Web e outros temas funcionais em torno deste tema. Uma vez que estes artigos de aprendizagem precisam ser educativos ao invés de tentar literalmente cobrir tudo que há para saber, sua experiência em saber o que cobrir será um grande trunfo.
+
Criar exercícios, questionários e ferramentas interativas de aprendizado (? horas)
+
Todos os nossos artigos de aprendizagem exigem "aprendizagem ativa". Tais materiais são exercícios ou conteúdo interativo que ajudam ao usuário aprender a usar e expandir os conceitos descritos em um artigo. Há muitas coisas que você pode fazer aqui, você pode ciar questionários para a construção de conteúdo interativo com o Thimble. Solte a sua criatividade!
+
Criar planos de aprendizagem (? horas)
+
A fim de fornecer tutoriais compreensíveis, precisamos moldar o nosso conteúdo em planos de aprendizagem. Esta é uma maneira de reunir o conteúdo existente e descobrir o que está faltando para criar um bom artigo de aprendizagem.
+
diff --git a/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html b/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..7508276c28 --- /dev/null +++ b/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,112 @@ +--- +title: Formulários em HTML +slug: HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +

{{ gecko_minversion_header("2") }}

+ +

Elementos e atributos de formulários em HTML5 proporcionam um grau de marcação semântica maior que HTML4 e remove grande parte da tediosa necessidade de se mexer com scripts e estilos que era necessária em HTML4. As características dos formulários em HTML5 proporcionam uma melhor experiência para usuários por tornarem formulários mais consistentes entre diferentes sites e dar um feedback imediato ao usuário sobre a entrada de dados. Eles também oferecem essa experiência para usuários que possuem scripts desabilitados em seus navegadores.

+ +

Este tópico descreve itens novos ou modificados que são suportados por Gecko/Firefox, versão 4 ou mais recente.

+ +

O elemento <input>

+ +

O elemento {{ HTMLElement("input") }} tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.

+ + + +

O elemento {{ HTMLElement("input") }} também tem novos atributos:

+ + + +

O elemento <form>

+ +

O elemento {{ HTMLElement("form") }} possui um novo atributo:

+ + + +

O elemento <datalist>

+ +

O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} to suggest when filling an {{ HTMLElement("input") }} field.

+ +

Você pode usar o atributo {{ htmlattrxref("list", "input") }} em um elemento {{ HTMLElement("input") }} para ligar um específico campo de entrada com um específico elemento {{ HTMLElement("datalist") }}.

+ +

O elemento <output>

+ +

O elemento {{ HTMLElement("output") }} representa o resultado de um cálculo.

+ +

Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento {{ HTMLElement("output") }} e outros elementos no documento que afetam o resultado do cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo {{ htmlattrxref("for", "output") }} é uma lista de IDs separados por espaço de outros elementos.

+ +

{{ non-standard_inline() }} Gecko 2.0 (mas não necessariamente outras engines de navegador) suportasupports defining custom validity constraints e mensagens de erro de elementos {{ HTMLElement("output") }} , e portanto aplica as pseudo-classes CSS {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, e {{ Cssxref(":-moz-ui-valid") }} a eles. Isso pode ser útil em situações quando o resultado calculadoThis can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").

+ +

O atributo placeholder

+ +

O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos {{ HTMLElement("input") }} e {{ HTMLElement("textarea") }} fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do placeholder não pode conter caracteres de quebra de linha.

+ +

O atributo autofocus

+ +

O atributo {{ htmlattrxref("autofocus", "input") }} permite você especificar um campo de formulário que será focado automaticamente quando a página carregar. No documento, apenas um campo pode ter o atributo autofocus, que é um booleano. Este atributo pode ser aplicado aos seguintes elementos: {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }}. A única exceção é que o atributo autofocus não pode ser aplicado a um elemento {{ HTMLElement("input") }} caso  seu atributo {{ htmlattrxref("type", "input") }} seja hidden.

+ +

The label.control DOM property

+ +

The HTMLLabelElement DOM interface provides an extra property, in addition to the properties that correspond to the HTML {{ HTMLElement("label") }} element attributes. The control property returns the labeled control, that is, the control that the label is for, which is determined by the {{ htmlattrxref("for", "label") }} attribute (if it is defined) or by the first descendant control element.

+ +

Constraint Validation

+ +

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.

+ +

If the title attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the title is set to the empty string, no tooltip is displayed. If the title attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the setCustomValidity() method) is displayed instead.

+ +
Note: Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.
+ +

HTML Syntax for Constraint Validation

+ +

The following items in HTML5 syntax can be used to specify constraints on form data.

+ + + +

In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

+ +

Constraint Validation API

+ +

The following DOM properties and methods related to constraint validation are available to client-side scripts:

+ + + +

{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5", "ko": "ko/HTML/HTML에서_폼"}) }}

+ +

{{ HTML5ArticleTOC() }}

diff --git a/files/pt-br/orphaned/mdn/community/index.html b/files/pt-br/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..5157192748 --- /dev/null +++ b/files/pt-br/orphaned/mdn/community/index.html @@ -0,0 +1,42 @@ +--- +title: Participe da comunidade MDN +slug: MDN/Comunidade +tags: + - Comunidade + - Guia(2) + - Iniciando +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
+

A Documentação Web da MDN é mais que uma wiki: É uma comunidade de desenvolvedores trabalhando juntos para fazer do MDN um excelente material para desenvolvedores que usam as tecnologias abertas da Web.

+
+ +

Adoraríamos se você contribuísse com o MDN, mas adoraríamos ainda mais se participasse da comunidade MDN. Veja como se conectar, em três passos fáceis:

+ +
    +
  1. Crie uma conta no MDN.
    2. +
  2. Participe das conversas.
    3. +
  3. Siga o que está acontecendo.
    4. +
+ +

Como a comunidade funciona

+ +

A seguir, mais artigos que descrevem a comunidade MDN.

+ +
+
+
+
Cargos da comunidade
+
Existem vários cargos dentro da comunidade MDN com responsabilidades específicas.
+
Sprints de documentação
+
Este é um guia para organizar uma sprint de documentação. Ele contém recomendações e dicas de pessoas que já organizaram sprints de documentação, para te ajudar a organizar uma também.
+
Siga o que está acontecendo
+
A MDN chega até você através da comunidade da Rede de Desenvolvedores da Mozilla. Aqui estão algumas formas das quais nós compartilhamos informações sobre o que fazemos.
+
+ +
+
+
+
diff --git a/files/pt-br/orphaned/mdn/community/whats_happening/index.html b/files/pt-br/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..93783e777f --- /dev/null +++ b/files/pt-br/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,37 @@ +--- +title: Siga o que está acontecendo +slug: MDN/Comunidade/Whats_happening +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}

MDN is brought to you by Mozilla's Developer Engagement community. Here are some ways to that we share information about what we're doing.

+ +

Blogs

+ +
+
Mozilla Hacks
+
News about and in-depth coverage of Web and Mozilla technologies and features.
+
Engaging Developers
+
Promoting activity and discussion amongst the community involved in Developer Relations at Mozilla.
+
+ +

Streams of ephemera

+ + + +

Status boards and dashboards

+ +

The MDN documentation team maintains a Trello board on which our projects are tracked. This board is read-only but will let you see what's being worked on and what we hope to do soon, and may help you figure out where you can help.

+ +

In addtion, take a look at the Documentation status pages to see what's going on across the full breadth of MDN content. You'll be able to see what articles need to be written or updated, what topics need the most help, and much, much more.

+ +

MDN community meetings

+ +

Community meetings occur every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the #mdn IRC channel. See the MDN community meetings wiki page for agendas and notes from past meetings.

+ +

The MDN Events calendar contains MDN community meetings, doc sprints, and other MDN-related events.

diff --git a/files/pt-br/orphaned/mdn/community/working_in_community/index.html b/files/pt-br/orphaned/mdn/community/working_in_community/index.html new file mode 100644 index 0000000000..38d851532d --- /dev/null +++ b/files/pt-br/orphaned/mdn/community/working_in_community/index.html @@ -0,0 +1,100 @@ +--- +title: Trabalhando em comunidade +slug: MDN/Comunidade/Trabalhando_em_comunidade +translation_of: MDN/Community/Working_in_community +--- +
{{MDNSidebar}}
+ +

Uma importante parte de contribuir com a documentação da MDN em qualquer escala significativa é saber como trabalhar como parte da comunidade MDN. Esse artigo oferece dicas sobre como você pode tirar o melhor proveito das suas interações com outros escritores e outros times de desenvolvimento.

+ +

Dicas gerais de etiqueta

+ +

Aqui estão algumas dicas gerais de conduta quando trabalhando na comunidade Mozilla.

+ + + +

Tenha sensatez

+ +

Sempre seja sensato e respeitoso quando se comunicar com os outros.

+ +

Gentilmente aponte os erros

+ +

Se seu propósito em contatar alguém é para pedi-los para fazer alguma coisa diferentemente, ou apontar enganos que eles estão cometendo (especialmente se eles repetidamente estão fazendo isto), inicie sua mensagem com um comentário positivo. Isto suaviza o impacto, por assim dizer, e demonstra que você está tentando ser prestativo, ao invés de definir você como o cara mau.

+ +

Por exemplo, se um novo contribuidor tiver criado muitos páginas sem tags, e você gostaria de pontuar esse problema, sua mensagem para eles podem ser desta forma (o que você precisa mudar para cada caso está sublinhado):

+ +
+

Oi, MrBigglesworth, eu tenho que notificar suas contribuições para a documentação da Wormhole API e isto é fantástico ter sua ajuda! Eu particularmente gosto do modo que você equilibra seu nível de detalhes com legibilidade. Dito isto, contudo, você poderia fazer estes artigos sempre melhores e mais pertinentes se adicionar as corretas tags para as páginas enquanto você elabora.

+ +

Veja o MDN guia de etiquetas (https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente) para detalhes.

+ +

Obrigado novamente, e aguardo suas futuras contribuições!

+
+ +

Compartilhe conhecimento

+ +

Assim que você participa do projeto MDN, é útil saber o que está acontecendo, e interagir com outros membros de sua comunidade. Para conversar com outros em nossa comunidade, você pode seguir e compartilhar ideias, status atualizado, e mais. Nós também temos ferramentas e informações que podem ajudar você a saber o que está sendo feito, e por quem.

+ +

Canais de comunicação

+ +

Há muitos caminhos que você pode engajar como membro da comunidade (como desenvolvedor ou como escritor), cada um tem algumas regras particulares de etiqueta.

+ +

Bugzilla

+ +

Quando escrever documentação para cobrir mudanças implementadas como um resultado de um bug no Bugzilla, você frequentemente interagirá com pessoas envolvidas naquele projeto. Seja claro para continuar o guia de etiqueta Bugzilla em mente em todas às vezes!

+ +

E-mail

+ +

Algumas vezes, uma troca de e-mail privado entre você e uma ou mais pessoas, é o caminho para seguir, se você possuir os endereços de e-mails deles.

+ +
+

Nota: Como regra geral, se alguém postou o endereço de e-mail pessoal em documentos sobre a tecnologia que você está documentando, ou deu a você o endereço de e-mail pessoal, ou geralmente tem um endereço de e-mail bem conhecido, então o e-mail torna-se uma abordagem aceitável como "primeiro contato". Se você precisa "escavar" mais sobre o assunto, provavelmente você deve tentar obter aguma permissão no Matrix ou em uma lista de discussão primeiro, a menos que você tenha esgotado todas as outras tentativas de entrar em contato.

+
+ +

Ferramenta de status de conteúdo

+ +

Nós temos muitas ferramentas úteis que fornecem informações sobre o status do conteúdo da documentação.

+ +
+
Painel de Controle (Dashboard ) para revisão
+
O painel de controle para revisão providencia uma ferramenta fantástica para revisar mudanças feitas para o conteúdo do MDN. Você pode ver as histórias recentes, ou escolher um período de tempo para vê-las, e filtrar resultados com base em características como localidade, nome de contribuidores, e tópicos. Uma vez que você está olhando para um conjunto de revisões, você pode ver as mudanças feitas em cada revisão, abrir rapidamente a página, ver um histórico completo ou até reverter as alterações (se você tiver esses privilégios).
+
Visão geral do status da documentação
+
Nossa visão geral do status da documentação página providencia uma lista de todas as áreas do MDN que você tem configurado pela trilha de status, com informações sobre como muitas páginas são necessárias diferentes tipos de trabalho feito. Clique através de um particular tópico de área para ver detalhadas listas de conteúdo que necessitam trabalhar, tais como páginas que não tem tags, ou são tags com indicadores que certos tipos de trabalhos necessários para ser feito. Você pode mesmo ver listas de páginas que não tem sido atualizado em um longo tempo e pode se desatualizado, tão bem quanto uma lista de bugs que tem sido sinalizado como impactante na documentação daquela área.
+
Documentação dos planos de projetos
+
Nós temos um número de projetos escritos que estão no estágio de planejamento, ou são largos e em progresso, para o qual nós temos escrito documento de planejamento para ajudar-nos a guardar a trilha daquilo que nós precisamos fazer.
+
MDN Trello board
+
The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read this page.
+
+ +

A comunidade de desenvolvimento

+ +

Possivelmente o mais importante relacionamento para desenvolver e manter, como um membro da comunidade de escrita do MDN, são aqueles que você desenvolve e sustenta com os desenvolvedores. Eles criam o software que nós estamos desenvolvendo, mas eles são também os mais usuais recursos de informações que nós temos. É crucial que nós mantenhamos bons relacionamentos com os desenvolvedores, pois são como você, vão responder suas questões rapidamente, precisamente, e completamente!

+ +

Em adição, você representa a comunidade de escrita MDN.

+ +

Por favor ajude a garantir que nós mantenhamos nosso excelente relacionamento de trabalho com a equipe dev para fazer toda a interação entre eles e a equipe de escrita seja ótima.

+ +

Em uma nota de relato, um grande caminho para encontrar a pessoa certa para falar olhe nas listas dos responsáveis dos módulos.

+ +

A comunidade de escrita

+ +

A comunidade de escrita é muito grande. Enquanto o número de frequentes extremos, ou contribuidores de grande escala é relativamente pequeno, Há muitas dezenas ou centenas de pessoas que contribuem de vez em quando. Felizmente, estas são grandes pessoas maravilhosas com um genuíno amor da web, Mozilla, e/ou documentação, e interagem com eles e quase sempre muito bonito.

+ +

Veja o artigo una a comunidade para mais informações sobre a comunidade MDN.

+ +

Veja também

+ + diff --git a/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..369f018ce5 --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,43 @@ +--- +title: Como criar uma conta na MDN +slug: MDN/Contribute/guia/Create_an_MDN_account +tags: + - Conta + - Guia(2) + - Início(2) + - Novato + - como fazer +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Para fazer quaisquer alterações sobre o conteúdo do MDN (tanto editando uma página como contribuindo com uma demonstração), você precisará de um perfil MDN. Não se preocupe, você não precisa de um perfil se tudo o que você pretende é ler e pesquisar no MDN! Esse guia simples vai ajudá-lo a configurar seu perfil MDN.

+ +
Por que o MDN precisa do meu endereço de email?
+
+Seu endereço de email é usado para recuperação da conta, e se necessário por administradores do MDN para contatá-lo sobre sua conta ou sua atividade no site.
+
+Além disso, você pode opcionalmente inscrever-se para receber notificações (como quando uma página específica é modificada) e mensagens (por exemplo, se você optar por se juntar ao nosso time de testes beta, você poderá receber email sobre novas funcionalidades que precisam ser testadas).
+
+Seu endereço de email nunca é mostrado no MDN e será usado apenas de acordo com nossa política de privacidade.
+ +

Assim que você tiver decidido que quer contribuir para o MDN, aqui está tudo que você deve fazer para configurar o seu perfil:

+ +
    +
  1. No topo de qualquer página no MDN você vai encontrar um botão chamado "Entrar". Passe o seu mouse sobre ele(ou toque nele caso você esteja em um dispositivo móvel) para mostrar uma lista de serviços de autenticação que disponibilizamos para se inscrever no MDN.
    2. +
  2. Selecione um serviço com o qual você irá se inscrever. Atualmente, somente a inscrição com o GitHub está disponível. Note que, se você selecionar o GitHub, um vínculo com a sua conta do GitHub será incluída em seu perfil público na página pessoal do MDN.
    3. +
  3. Siga os passos do serviço para conectar sua conta ao MDN.
    4. +
  4. Uma vez que o serviço de autenticação retorná-lo ao MDN, será solicitado a você que entre com seu nome de usuário e endereço de email. Seu nome de usuário será mostrado publicamente para creditá-lo sobre trabalhos que você concluiu. Não use o seu endereço de email como seu nome de usuário.
    5. +
  5. Clique no botão "Criar meu perfil MDN".
    6. +
  6. Se o endereço de email que você especificou no passo 4 não é o mesmo que você usa no serviço de autenticação, você precisará checar seu email e clicar no link do email de confirmação que foi enviado para você.
    7. +
+ +

É isso! Você adquiriu uma conta MDN, e você pode imediatamente editar ou marcar páginas e postar demonstrações!

+ +

Você pode clicar no seu nome no topo de qualquer página MDN para ver o seu perfil público. A partir de lá, você pode clicar o botão de "Editar" para fazer modificações ou adições no seu perfil, assim você pode compartilhar mais sobre seus interesses, adicionar links para sua conta do Twitter ou blog, e assim por diante.

+ +
+

Observação: Novos nomes de usuário não podem conter espaços ou o caractere "@". Tenha em mente que o seu nome de usuário será mostrado publicamente para identificar o trabalho que você fez!

+
+ +

 

diff --git a/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..45d49fbc55 --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,52 @@ +--- +title: Como fazer uma revisão técnica +slug: MDN/Contribute/guia/Do_a_technical_review +tags: + - Documentação + - Guía + - MDN Meta + - Revisão + - como fazer +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

Uma Revisão técnica consiste em revisar a precisão técnica e a integridade de um artigo e corrigi-lo, se necessário. Se um escritor de um artigo procura alguém para verificar o conteúdo técnico do artigo, então ele marca a opção "Análise técnica" durante a edição. Muitas vezes, o escritor contata um engenheiro específico para realizar a revisão técnica, mas qualquer pessoa com experiência técnica no tópico pode fazer um.

+ +

Este artigo descreve como realizar uma revisão técnica, ajudando assim a garantir que o conteúdo do MDN seja exato.

+ +
+
Como é essa tarefa?
+
Revisar e corrigir artigos com precisão técnica e completude.
+
Onde deve ser feita?
+
Em artigos específicos aonde estão marcados como uma revisão técnica.
+
O que você precisa saber para fazer a tarefa?
+
+
    +
  • Conhecimento avançado (especialista) sobre o tópico do artigo que você está revisando. Se a leitura do artigo não lhe ensinou nada de novo, considere-se um especialista.
    • +
  • Como editar um artigo wiki no MDN
    • +
+
+
Quais são os passos para fazê-lo?
+
+
    +
  1. Escolha um artigo para revisar: +
      +
    1. Vá até a lista de páginas que necessitam de revisão técnica. Lá estará listado todas as páginas as quais uma revisão técnica foi solicitada.
      2. +
    2. Escolha uma página cujo tópico você conheça muito.
      3. +
    3. Clique no link do artigo para carregar a página.
      4. +
    +
    2. +
  2. Leia o artigo, prestando atenção aos detalhes técnicos: o artigo está correto? Falta alguma coisa? Não hesite em mudar para uma página diferente se o primeiro que você escolher não se adequar a você.
    3. +
  3. Se não houver erros, você não precisa editar o artigo para marcá-lo como revisado. Procure a caixa "revisão rápida" na barra lateral esquerda da página. Esta caixa amarela lista todas as revisões pendentes e permite que você desmarque a revisão já realizada. Em caso de uma revisão técnica solicita será apresentado desse modo:
    +
    4. +
  4. Desmarque a opção Técnico e clique em salvar.
    5. +
  5. Se você encontrar erros que precisam ser corrigidos, você também pode solicitar uma nova revisão apartir do editor. Aqui estão os passos: +
      +
    1. Para editar a página clique no botão editar no canto superior da página; desse modo você estará acessando o editor do MDN.
      2. +
    2. Corrija qualquer informação técnica que não esteja correta e/ou adicione qualquer informação importante que esteja faltando.
      3. +
    3. Digite um Comentário da revisão na parte inferior do artigo. Esta é uma breve mensagem que descreve o que você fez, como "Revisão técnica concluída". Se você corrigiu as informações, inclua isso em seu comentário, por exemplo, "Análise técnica e descrições de parâmetros fixos". Isso ajuda outros contribuidores e editores de sites a saber o que você mudou e por quê. Você também pode mencionar se houve partes específicas que você não se sentiu qualificado para revisar.
      4. +
    4. Clique no botão PUBLICAR.
      5. +
    +
    6. +
+ Parabéns! Você terminou sua primeira revisão técnica. Obrigado pela ajuda!
+
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..687072f228 --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,55 @@ +--- +title: Como fazer uma revisão editorial +slug: MDN/Contribute/guia/Do_an_editorial_review +tags: + - Documentação + - Guia(2) + - MDN Meta + - Revisão + - como fazer +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +

A revisão editorial consiste em corrigir erros gramaticais e no modo de se expressar em um artigo. Nem todos contribuidores são experientes em linguagens, mas, independentemente dos seus conhecimentos, terão contribuído com artigos extremamente úteis, que precisam da aplicação de técnicas de revisão; Isso é feito em uma revisão editorial.

+ +

Esse artigo descreve como fazer uma revisão editorial, assim ajudando para assegurar que o conteúdo do MDN é preciso.

+ +
+
Qual é a tarefa?
+
Edição e revisão de artigos que estiverem marcados como "precisando de revisão editorial."
+
Onde é que isso precisa ser feito?
+
Em artigos específicos que são marcados como "precisando de revisão editorial."
+
O que é preciso conhecer para fazer essa tarefa?
+
Você precisa ter um bom dominio do idioma Ingles e habilidades de ortografia e gramática. Uma revisão editorial consiste em garantir que a gramática, ortografia e redação estejão corretas e fazendo sentido; E que o guia de estilo de escrita MDN seja seguido.
+
Quais são os passos a seguir?
+
+
    +
  1. Escolha um artigo para revisão: +
      +
    1. Vá para a lista de artigos que precisam de revisão editorial.  Essa lista contém todas as páginas que precisam de revisão editorial.
      2. +
    2. Escolha uma página que tenha título em português que não comece com Template:(Template: Páginas que contém macro-códigos MDN)
      3. +
    3. Clique no link do artigo para carregar a página.
      4. +
    +
    2. +
  2. Quando a página estiver carregada, clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN. Não hesite em trocar para uma página diferente se você não entendeu bem a página atual.
    3. +
  3. Se não houver erros, você não precisa editar o artigo para marca-lo como revisado. Olhe para uma caixa de "revisão rápida" a esquerda da barra de navegação:
    4. +
+ +

               Selecione a caixa Editorial , e clique em Review Completed.

+ +

4. Se você precisa consertar erros que precisam correção:

+ +
    +
  1. Clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN.
    2. +
  2. Corrija todas palavras e a gramática ou erros de uso.
    3. +
  3. Digite um Comentário de Revisão na parte de baixo do artigo, algo como 'Editorial revisado, foram corrigidos alguns erros de gramática e ortografia'.
    4. +
  4. Tire a seleção da caixa Editorial abaixo do Revisão necessária?
    5. +
  5. Clique no botão Salvar alterações.
    6. +
+ +
+

Por razões de perfomance, sua edição pode não aparecer logo na página.

+
+
+
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..91ac82e8ea --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,61 @@ +--- +title: Como definir o resumo de uma página +slug: MDN/Contribute/guia/Set_the_summary_for_a_page +tags: + - Como + - Guia(2) + - MDN Meta +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Você pode definir o sumário de uma página no MDN, para ser usado de várias maneiras, incluindo em resultados de pesquisa, em outras páginas MDN como tópico de página de regiões, e em dicas. E o texto deve fazer sentido tanto ao contexto da página, como quando mostrado em outro contexto, sem o restante do conteúdo da página.

+ +

Um sumário pode ser bem definido com a página. Caso não seja bem definido, normalmente a primeira frase é usada, e nem sempre esta é a melhor maneira de se apresentar o conteúdo da página.

+ + + + + + + + + + + + + + + + + + + + +
Qual é a tarefa?Marcando o texto dentro de uma página que deve ser usado como seu resumo em outros contextos; esta tarefa pode incluir, se necessário escrever um texto adequado.
Onde isto deve ser feito?Em páginas que não possuem um resumo ou têm um resumo menos do que ótimo.
O que você deve saber para fazer a tarefa?Capacidade de usar o editor MDN; boas habilidades de escrita em inglês; familiaridade suficiente com o tema da página para escrever um bom resumo.
Quais são os passos a fazer? +
    +
  1. Escolha uma página para fazer o resumo: +
      +
    1. Na página MDN documentation status, clique sob o link Sections para um tema que você conhece um pouco sobre (por exemplo, HTML):
      +
      2. +
    2. Na página de status da documentação do tópico, clique no cabeçalho de páginas na tabela de 
      3. +
    3. Resumo. Isso leva você a um índice de todas as páginas em que seção do tópico; Ele mostra a página 
      4. +
    4. de links na coluna da esquerda e as tags e resumos na coluna à direita:
      5. +
      6. +
    6. Escolha uma página que está faltando um resumo, ou que tem um resumo fraco:
      +
      7. +
    7. Clique no link para ir para essa página.
      8. +
    +
    2. +
  2. Clique em Editar para abrir a página no editor MDN.
    3. +
  3. Procure uma frase ou duas, que funcionam como um resumo fora de contexto. Se necessário, edite o conteúdo existente para criar ou modificar frases para ser um bom resumo.
    4. +
  4. Selecionar o texto a ser usado como um resumo.
    5. +
  5. Nos estilos de elementos gráficos da barra de ferramentas do editor, selecione Resumo SEO. (No código fonte da página, isso cria uma {{HTMLElement("span")}} elemento com class = "seoSummary " em torno do texto selecionado.)
    +
    6. +
  6. Salve suas alterações com um comentário de revisão em como "Definir a página Resumo."
    7. +
+
+ +

 

+ +

 

+ +

 

diff --git a/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..7c6f94ac07 --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,84 @@ +--- +title: Como marcar páginas de JavaScript +slug: MDN/Contribute/guia/Tag_JavaScript_pages +tags: + - Como + - Guia(2) + - JavaScript + - MDN Meta +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}

O tagueamento consiste na adição de meta-informações para as páginas de modo que o conteúdo relacionado possa ser agrupado, como por exemplo em uma ferramenta de pesquisa.

+ + + + + + + + + + + + + + + + +
E onde isso precisa ser feito?Dentro de páginas especificas relacionadas com Javascript e sem marcação.
O que é preciso saber para fazer a tarefa ? +
    +
  • O basico de javascript como saber o que é um metodo ou uma propriedade.
    • +
+
Quais são os passos para fazê-lo? +
    +
  1. Escolha uma das paginas na lista 'linkada' acima.
    2. +
  2. Click no link do artigo e carregue a página.
    3. +
  3. Uma vez que a página foi carregada, clique no botão Editar no topo, isso deve lhe posicionar no editor MDN.
    4. +
  4. Pelo menos uma tag Javascript deve ser adicionada. Aqui estão algumas outras tags possíveis para adicionar: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TagA página que está em uso.
    Methodmétodo
    PropertyPropriedade
    prototypeprotótipo
    Object type namemétodo de um objeto; por exemplo String.fromCharCode deve ser a sequência da tag String
    ECMAScript6 and Experimentalrecursos adicionados na nova versão do ECMAScript
    Deprecatedrecursos obsoletos (cujo o uso é desencorajado, mas ainda suportada)
    Obsoleterecursos obsoletos (que não são mais suportados em browsers modernos)
    othersver as normas de tagueamento MDN para aplicar outras tags possíveis.
    +
    5. +
  5. Salve com um comentário.
    6. +
  6. E está pronto!
    7. +
+
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..7754f741b6 --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,114 @@ +--- +title: Como escrever um artigo para ajudar as pessoas aprender sobre a Web +slug: MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web +tags: + - Guía + - MDN Meta + - aprendizado + - como fazer +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +
{{MDNSidebar}}
+ +

MDN's Área de aprendizado é a nossa casa para artigos que introduzem conceitos Web para novos desenvolvedores. Uma vez que seu conteúdo é voltado para iniciantes, este é um ótimo lugar para compartilhar seu conhecimento e ajudar visitantes a conhecer a Web. É importante ter certeza que novos desenvolvedores podem seguir o conteúdo, então nós damos atenção especial para isto.

+ +

Este artigo explica como escrever para a  Área de aprendizado.

+ +

Como escrever um artigo na Área de aprendizado

+ +

Para começar a contribuir com seu conhecimento, simplesmente clique no botão verde e grande, então siga os cinco passos abaixo. Se você está procurando por ideias, por favor dê uma olhada no nosso quadro de time Trello!

+ +

Escreva um artigo de aprendizado

+ +

Este artigo pode não acabar exatamente no lugar certo, mas pelo menos no MDN. Se você deseja falar com alguém sobre mover ele para o lugar certo, por favor  Contate-nos.

+ +

Passo 1: Escreva uma linha-dupla

+ +

A primeira frase do seu artigo precisa resumir sobre qual conteúdo você irá falar e a segunda deve ser um pouco mais específica sobre os itens que você vai inserir no seu artigo. Por exemplo:

+ +
+

Enquanto que os arquivos {{glossary("HTML")}} contém conteúdo estruturado, {{Glossary("CSS")}}, outra grande tecnologia Web, faz o conteúdo aparecer do jeito que você quer. Neste artigo nós vamos cobrir como esta tecnologia funciona, e como escrever seu próprio exemplo básico.

+
+ +

Note como o exemplo explica brevemente que CSS é uma importante tecnologia Web usada para estilizar páginas. Isto é suficiente para o leitor ter uma boa ideia sobre o quê o artigo fala.

+ +

Porque os artigos da Área de Aprendizado primeiramente foca em iniciantes, cada artigo deve cobrir um tópico direto, então não sobrecarregará o leitor com muita informação nova. Se você não resumir o artigo em uma sentença, você pode estar tentando fazer muito em somente um artigo!

+ +

Passo 2: Adicionar uma top box

+ +

Então adicione uma top box para ajudar os leitores com dicas sobre onde eles estão no processo de aprendizagem.  Aqui é um exemplo de top box do "Entendendo URLs e suas estruturas". Você pode usar este artigo como um modelo quando estiver escrevendo o seu próprio.

+ + + + + + + + + + + + +
Pré-requisitos:Você primeiro precisa saber Como a Internet funciona, O que é um servidor Web, and Os conceitos por trás dos links na web.
Objetivo:Você vai aprender o que é uma URL e como ela funciona na Web.
+ +
+
Pré-requisitos
+
O que o leitor, principalmente, precisa saber para seguir este artigo? Quando possível, faça um link de cada pré-requisito para outro artigo da Área de Aprendizado cobrindo o conceito (a menos que este seja um artigo básico que não precisa de nenhum conhecimento anterior).
+
Objetivos
+
Esta seção explica brevemente o que o leitor vai aprender no curso da leitura. Este é um pouco diferente da linha-um; a linha-um resume o tópico do artigo, enquando a seção objetivos especificamente descreve o que o leitor pode esperar ao terminar de ler todo o artigo.
+
 
+
+ +
+

Nota: Para criar esta tabela você pode copiar e colar a tabela do exemplo acima, ou usar a ferramenta do editor do MDN Tabela. Se você escolher usar a ferramenta Tabela, você precisa especificamente adicionar uma classe CSS learn-box adicional a classe padrão standard-table. Para fazer isto, quando você criar ou editar as propriedades da tabela, vá no painel "Avançado" e no campo Classes mudar para "standard-table learn-box".

+
+ +

Passo 3: Escreva uma descrição completa

+ +

Próximo: escreva uma longa descrição que forneça uma visão geral do artigo, destacando os conceitos principais. Não esqueça de explicar por quê o leitor deve pegar seu tempo para aprender este tópico e ler seu artigo!

+ +

Passo 4: Vá fundo

+ +

Quando você tiver terminado com tudo isso, você pode finalmente ir fundo no tema. Você pode estruturar esta parde do seu artigo como você quiser (Por quanto sinta-se livre para consultar nosso guia de estilo). Esta é sua chance de brilhar! Entre nos detalhes explicando o tema que você está escrevendo. Forneça links de referência para a documentação completa, explique como a tecnologia funciona em detalhe, forneça detalhes da sintaxe e usabilidade, e mais. É com você!

+ +

Como um guia, aqui são algumas dicas de escrita para iniciantes:

+ + + +

Dê uma olhada nas primeiras seções do nosso artigo Funções - blocos reutilizáveis de código para uma boa seção descritiva.

+ +

Passo 5: Forneça material de "aprendizado ativo"

+ +

Para ilustrar o artigo e ajudar o leitor a entender melhor o que ele está aprendendo, esteja certo de fornecer exercícios, tutoriais e tarefas para completar. Tendo eles praticando, e ativamente usando e experimentando os conceitos que seu artigo explica, você pode ajudar a fixar a informação no cérebro do leitor.

+ +

Você pode escolher incluir os exemplos diretamente nas páginas como  exemplos ao vivo, ou fazer links para eles se eles não funciona como exemplos ao vivo. Se você está interessado em ajudar a criar estes materiais de valores, por favor leia o artigo Criar um exercício interativo para ajudar o Aprendendo a Web.

+ +

Se você não pode fornecer links para materiais de aprendizado ativo (você não conhece nenhum ou não tem tempo para criar), você deveria adicionar uma tag {{Tag("NeedsActiveLearning")}} para o artigo. Assim outros contribuintes podem encontrar artigos que precisam de materiais de aprendizado ativo e talvez ajudar você com isto.

+ +

Dê uma olhada no Aprendizado ativo: selecionando diferentes elementos para um exemplo de exercício de aprendizado interativo, ou Aprendizado ativo: Jogando com escopo para um estilo diferente de exercício que permite fazer download de um template no dispositivo do leitor e modificá-lo seguindo os passos fornecidos.

+ +

Passo 6: Tenha o artigo revisto e colocado no menu de navegação da Área de aprendizado

+ +

Depois de ter escrito seu artigo, deixe-nos saber para podermos dar uma olhada, fazer uma revisão e sugerir melhorias. Novamente, veja nossa seção Contato, é a melhor maneira de manter contato.

+ +

Outra parte na finalização do seu artigo é colocar ele na área principal no menu de navegação da Área de Aprendizado. Este menu é gerado pelo LearnSidebar macro, o qual você precisa de privilégios especiais para editar, então, novamente, converse com alguém do nosso time sobre adicionar isto.

+ +

Você deveria pelo menos adicionar isso na sua página - isto é feito adicionando a chamada do macro \{{LearnSidebar}} dentro de um parágrafo no topo da sua página

+ + + +

Artigos sugeridos

+ +

Então você quer contribuir, mas você não tem certeza sobre o que escrever?

+ +

O time da Área de aprendizado mantém um quadro Trello com ideias de artigos para escrever. Sinta-se livre para pegar um e começar a trabalhar!

+ +

 

+ +

 

diff --git a/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html b/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html new file mode 100644 index 0000000000..22b22715be --- /dev/null +++ b/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html @@ -0,0 +1,65 @@ +--- +title: Táticas de colaboração intra equipe para documentação +slug: MDN/Contribute/Collaboration_tactics +tags: + - Documentação + - Guia(2) + - Guía + - MDN + - Projeto MDC +translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics +--- +
{{MDNSidebar}}
+ +

Uma coisa que aprendemos na MDN é que quando equipes de desenvolvimento e documentação de um dado projeto, API ou tecnologia trabalham próximas uma da outra—e juntas— a documentação ganha uma qualidade inacreditável. Este guia sugere algumas táticas para que equipes de desenvolvimento e documentação trabalhem de mãos dadas.

+ +
+

Nota: Este artigo é um trabalho em progresso, um documento aberto. Caso você conheça outras maneiras de integrar equipes de desenvolvimento e documentação, convidamos você à dividi-las conosco aqui!

+
+ +

Integrando-se

+ +

Idealmente, quando o desenvolvimento de uma nova tecnologia ou projeto são concebidos, a equipe de desenvolvimento avisa a equipe de documentação que algo novo está à caminho e precisará ser documentado. Algumas vezes não é isso que acontece, e a equipe MDN monitora a Bugzilla observando todo trabalho que precisará ser documentado, porém em um mundo perfeito, nós receberemos um aviso prévio de maneira mais direta.

+ +

A melhor maneira de notificar a equipe MDN sobre um novo projeto o qual precisamos ficar cientes é preenchendo uma requisição de documentação de defeito. Fornecer uma lista de contatos em conjunto com as respectivas dúvidas é uma ótima maneira de ajudar! Incluir links para os defeitos relacionados ao projeto também é uma grande ajuda.

+ +

Compartilhando informação

+ +

Existem diversas maneiras úteis e diferentes de compartilhar informação. Apresentamos algumas sugestões a seguir.

+ +

Defeitos

+ +

Certificar-se de que a equipe de documentação está ciente dos defeitos que refletem na documentação é de grande ajuda. O uso adequado das palavras-chaves de documentação e desenvolvimento e das tags de comentários leva tempo. Consulte Atualizando documentação para mais informações.

+ +

Reuniões

+ +

Equipes de desenvolvimento realizam reuniões frequentemente. Sempre que possível e necessário(e muitas vezes é bastante necessário), a equipe MDN tenta enviar alguém para assistir estas reuniões. Esta é uma boa maneira de saber o que esta acontecendo, como os horários estão dispostos, e assim por diante.

+ +

Além disso, os profisionais que trabalham em grandes áreas de documentação, tais como documentação de APIs Web, muitas vezes realizam reuniões para acompanhar a evolução da documentação. Estes profissionais adoram ter um desenvolvedor à disposição para participar de tais reuniões; acaba sendo incrivelmente útil para todos os envolvidos.

+ +

Estas reuniões geralmente são curtas e possuem uma agenda similar a esta:

+ +
    +
  1. Atualizações sobre o andamento das atividades de documentação.
    2. +
  2. Perguntas/atualizações da equipe de desenvolvimento para a equipe de documentação: pode incluir perguntas sobre a evolução de documentos específicos, informações sobre conteúdo específico que é urgentemente necessário, notas sobre problemas com conteúdo já existente, e assim por diante.
    3. +
  3. Perguntas/atualizações da equipe de documentação para a equipe de desenvolvimento: esta é uma oportunidade para a equipe de documentação perguntar sobre possíveis bugs, se alguém pode se disponibilizar para revisar algum documento específico, se há um engenheiro em específico que esteja disponível para responder perguntas sobre uma determinada API, esse tipo de coisa.
    4. +
+ +

Reuniões de documentação de APIs Web  têm sido realizadas por meses em Vidyo, com grande sucesso. Cada semana, a equipe de desenvolvimento da API Web têm pelo menos um membro (e muitas vezes dois) para a reunião, e temos sido extremamente produtivos, realizando as reuiniões em 15 minutos ou menos.

+ +

Semanas de trabalho

+ +

Convide os responsáveis pela documentação para acompanhar a equipe de desenvolvimento em uma semana de trabalho ou reunião. Isto tem muitas vantagens, incluindo:

+ + + +

Se você não sabe se existe um membro para documentação atribuído ao tópico da sua área acompanhando sua semana de trabalho, não hesite em enviar um e-mail para o líder da equipe de documentação, Eric Shepherd, e ele buscará saber se alguém poderá auxiliar. Ele buscará alguém lá (ou melhor, buscará um membro exlusivo para documentação no seu projeto)! Tenha em mente, porém, que a equipe de documentação é pequena, então encontrar alguém para acompanhar uma semana de trabalho em um curto prazo é uma tarefa complicada.

+ +

Páginas de estado de documentação

+ +

Grandes projetos de documentação na MDN agora utilizam páginas de estados a fim de acompanhar o que falta ser feito, e o que já foi feito, para conseguir realizar o trabalho. Tais páginas fornecem uma lista de tarefas a serem realizadas, bem como o estado de cada tarefa.

diff --git a/files/pt-br/orphaned/mdn/dashboards/index.html b/files/pt-br/orphaned/mdn/dashboards/index.html new file mode 100644 index 0000000000..0aab5076a9 --- /dev/null +++ b/files/pt-br/orphaned/mdn/dashboards/index.html @@ -0,0 +1,17 @@ +--- +title: Painéis +slug: MDN/Paineis +tags: + - MDN Meta + - Rascunho + - Visão Geral + - painéis +translation_of: MDN/Dashboards +--- +
{{MDNSidebar}}{{Draft}}
+ +

Aqui estão alguns painéis que exibem algumas métricas.

+ +

Saiba mais sobre nossos Editores

+ +

{{SubpagesWithSummaries}}

diff --git a/files/pt-br/orphaned/mdn/editor/basics/index.html b/files/pt-br/orphaned/mdn/editor/basics/index.html new file mode 100644 index 0000000000..5f06217a31 --- /dev/null +++ b/files/pt-br/orphaned/mdn/editor/basics/index.html @@ -0,0 +1,65 @@ +--- +title: Elementos de Interface do Editor +slug: MDN/Editor/Basics +translation_of: MDN/Editor/Basics +--- +
{{MDNSidebar}}
+ +

O editor WYSIWYG embutido no MDN foi projetado para fazer com que seja o mais fácil possível criar, editar, e aprimorar artigos e praticamente qualquer outra página do site. A janela do editor, como mostrada abaixo, consiste em oito áreas principais. Este guia oferece informações sobre cada seção para que você saiba como utilizar inteiramente nosso ambiente de edição.

+ +
+

Estamos constantemente trabalhando em melhorias para o MDN, então haverá momentos em que este documento ou as capturas de tela abaixo estejam um pouco desatualizados. Portanto, iremos atualizar este documento periodicamente, evitando que se torne inutilizável.

+
+ +

Screenshot of the editor UI (August 2017) with each section labeled

+ +

A interface do editor contém as seguintes seções, como mostrado acima. Clique abaixo para ler sobre cada seção do editor respectivamente.

+ + + +

Caixa de ediçao

+ +

A caixa de edição é, evidementente, onde você irá realmente produzir o seu texto.

+ +

Clicando com o botão direito na caixa de edição, exibe-se opções apropriadas adicionais dependendo de onde você clicar: clicar com o botão direito do mouse em uma tabela irá mostrar opções relacionadas à tabela e clicar com o botão direito em uma lista, irá apresentar opções sobre àquela lista, por exemplo. Por padrão o editor utiliza seu próprio menu quando você clica com o botão direito no editor. Para acessar o menu padrão do seu navegador (como acessar a lista de correções do corretor ortográfico do Firefox), mantenha pressionada a tecla Shift ou a tecla Control (tecla Command no Mac OS X) enquanto estiver clicando.

+ +

Quando estiver trabalhando na caixa de edição, você pode usar essas teclas de atalho.

+ +

Comentários de revisão

+ +

Depois de fazer suas alterações, é extremamente recomendável que você adicione um comentário para sua revisão. Ele ficará disponível no histórico de revisão da página, assim como no Painel de controle. Isto irá ajudar a explicar ou justificar suas alterações para os outros que revisarão o seu trabalho depois. Para adicionar um comentário de revisão, escrevá-o na caixa de comentário antes de clicar em um dos dois botões de Publicar na parte superior e inferior da página.

+ +

Existem algumas razões pelas quais isto é útil:

+ + + +

Review requests

+ +

The MDN community uses reviews to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

+ +

To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

+ +

While selecting a review checkbox adds the article to the lists of those needing technical review or needing editorial review, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a subject-matter expert in the relevant technical area. For editorial reviews, you can post in the MDN discussion forum to request that someone review your changes.

+ +

Be sure to click one of the Publish buttons after making your selections, to commit your review request.

+ +

See also

+ + + + diff --git a/files/pt-br/orphaned/mdn/editor/index.html b/files/pt-br/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..289d09b69f --- /dev/null +++ b/files/pt-br/orphaned/mdn/editor/index.html @@ -0,0 +1,10 @@ +--- +title: Guia do editor MDN +slug: MDN/Editor +translation_of: MDN/Editor +--- +
{{MDNSidebar}}

O editor WYSIWYG (what-you-see-is-what-you-get) oferecido pela Mozilla Developer Network wiki torna fácil a contribuição de conteúdo novo. O guia de editor MDN fornece algumas informações sobre como usar o editor, assim como algumas informações sobre recursos úteis que podem melhorar sua produtividade. Por favor, certifique-se de ler (e está de acordo com) o Mozilla Terms antes de editar ou criar novas páginas.

+ +

O Guia de estilo MDN oferece informação sobre como formatar e estilizar o conteúdo em si, incluindo as nossas regras de gramática e ortografia preferenciais.

+

{{LandingPageListSubpages}}

+

{{EditorGuideQuicklinks}}

diff --git a/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html b/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html new file mode 100644 index 0000000000..16808c9615 --- /dev/null +++ b/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html @@ -0,0 +1,32 @@ +--- +title: Page regeneration +slug: MDN/Tools/Page_regeneration +tags: + - Ferramentas + - Guia(2) + - MDN Meta + - Page-level +translation_of: MDN/Tools/Page_regeneration +--- +
{{MDNSidebar}}

O site da MDN cacheia as páginas para melhorar a performance. Como resultado, as mudanças que você salva nas páginas podem não aparecer imediatamente. Muitas vezes, mas nem sempre, o banner aparece na página indicando que uma atualização para aquela página está em progresso. Você pode fazer uma "atualização forçada" no seu navegador para recarregar a página do servidor, mas isso pode não ter efeito se a atualização no servidor não estiver completa.

+ +

Algumas páginas (especialmente landing pages) utilizam macros para gerar e atualizar o conteúdo automaticamente. Para landing pages, fazer isso assegura que novos artigos vão automaticamente ser listados na página, sem que um editor tenha que adicioná-los manualmente. Isso é bem conveniente para contribuidores de longas datas e evita que o trabalho dos novatos seja perdido aleatoriamente devido eles não saberem como o inserir o link hierarquicamente para seus artigos.

+ +

Isso também pode ser feito quando a transclusão de conteúdo de uma pátina para outras páginas (usando por exemplo, o macro {{TemplateLink("Page")}}).

+ +

Devido ao cache da MDN ter renderizado o conteúdo para melhorar a performance, mudanças feitas no material fonte (como a saída dos macros ou páginas transcluídas) não são automaticamente refletidas na páginas. Se você espera mudanças frequentes feitas nesses materiais fonte, você pode considerar habilitar a regeneração automática de páginas.

+ +

Para habilitar a regeneração automática de páginas:

+ +
    +
  1. Clique no botão Editar na página para entrar no modo de edição.
    2. +
  2. Abaixo do título da página, clique em Editar o título e propriedades localizado perto do título da página. Os metadados da página aparecerão.
    3. +
  3. Selecione um valor para Tempo máximo de regeneração. Esse valor determina o intervalo de tempo que as páginas serão refeitas, incluindo a reexecução de seus macros. Tipicamente, nós utilizamos de 4 a 8 horas. Para uma tecnologia em que a documentação está mudando rapidamente, você pode mudar para um número menor.
    4. +
  4. Salve suas mudanças para a página. É uma boa prática fazer a revisão dos comentários para descrever o que você fez, tipo: "Mudei o tempo máximo de renderização para 4 horas".
    5. +
+ +

Essa página vai ser regerada automaticamente no tempo que você especificou.

+ +
+

A opção "Editar títilo e propriedades da página" não está disponível enquanto você cria uma nova página. Você terá que salvar as alterações e reabrir a página para vê-la.

+
diff --git a/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html new file mode 100644 index 0000000000..16e718fc9c --- /dev/null +++ b/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,95 @@ +--- +title: Empacotando e Instalando +slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +--- +

Packaging your extension

+ +
+

Nós estamos trabalhando em uma GUI  para empacotar e carregar extensões. Veja Bug 1185460 para mais informações. Enquanto isso, siga as etapas abaixo.

+
+ +

Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".

+ +

Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.

+ +

Windows

+ +
    +
  1. Abra a pasta com seus arquivos da extensão.
    2. +
  2. Selecione todos os arquivos.
    3. +
  3. Clique com o direito e escolha Enviar para → Pasta Compactada.
    4. +
  4. Renomeie o arquivo de "something.zip" para "something.xpi".
    5. +
+ +

+ +

Mac OS X

+ +
    +
  1. Abra a pasta com seus arquivos da extensão.
    2. +
  2. Selecione todos os arquivos.
    3. +
  3. Clique com o direito e escolha Compress n Items.
    4. +
  4. Renomeie o arquivo de Archive.zip para something.xpi.
    5. +
+ +

+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-extension/
    2. +
  2. zip -r ../my-extension.xpi *
    3. +
+ +

Installing your extension

+ +
    +
  1. Digite no caminho de URL about:addons
    2. +
  2. Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."
    3. +
  3. Clique instalar no dialog que irá aparecer
    4. +
+ +

Instalando suas extensões no Firefox OS

+ +

You can install your extension from WebIDE running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.

+ +

When the manifest.json validation status is valid you will be able to Install and Run your extension on the attached Firefox OS device running a nightly build of Firefox OS.

+ +

The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.

+ +

Soluções de problemas

+ +

There are a few common problems that you might run into:

+ +

"Este add-on não poderá ser instalado porque não pode ser verificado."

+ + + +

"Este add-on não pode ser instalado porque pode está corrompido."

+ + + +

Nada aconteceu

+ + + +

Observe o console

+ +

Some additional error information relating to how your extension was extracted and loaded might be available in the Browser Console.

diff --git a/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html b/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..6e70f0a1f6 --- /dev/null +++ b/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,81 @@ +--- +title: DOM Inspector (Em Pt-Br) +slug: Tools/Add-ons/DOM_Inspector_Pt-Br +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - DOM_PT-BR + - Extensions + - Ferramentas + - Inspector + - Theme + - Tools + - Web + - Web Developer + - XUL + - 'XUL:Tools' + - dev + - xu +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

O DOM Inspector (também conhecido como DOMi) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (Document Object Model) de documentos - usando páginas da web ou windows XUL . A hierarquia do DOM pode ser navegada usando dois paíneis (two-paned) janela que permite uma variedade de pontos de vista diferentes sobre o documento e todos os nós dentro.

+ +
+

Esta ferramenta é um add-on para XUL-based em aplicações como o Firefox e o Thunderbird. Se você está procurando o DOM inspector ele está incorporado no Firefox, consulte a documetação para o Page Inspector. 

+
+ +

Documentação

+ +
+
Introdução ao DOM Inspector
+
+
+
Aqui um tutorial que irá ajudá-lo a começar com o DOM Inspector.
+
+
+
+ +
+
DOM Inspector FAQ
+
Perguntas e Respostas comuns sobre o DOM Inspector.
+
+ +
+
Página DOM Inspector no MozillaZine
+
Mais informaçãoe sobre o DOM Inspector.
+
Como criar um DOM Inspector
+
Postagens sobre como criar o DOM Inspector do início
+
+ +

Obter DOM Inspector

+ +
+
Firefox & Thunderbird
+
Você pode Baixar e Instalar o DOM Inspector para o AMO web site. (Usuarios de navegador Thunderbird AMO em Firefox deve salvar o link de instalação, ou visitar a página do DOM Inspector para Thunderbird.).
+
+ +
+
Thunderbird 2
+
DOM Inspector para Thunderbird 2 está disponível para Thunderbird Add-ons. Ou, construa você mesmo no Thunderbird com as seguintes opções:
+
+ +
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite e SeaMonkey
+
Select Tools > Web Development > DOM Inspector.
+
Você pode instalar o painel lateral através de:
+
Edit > Preferences > Advanced > DOM Inspector
+
Então basta abrir o painel inspector e visitar um Web Site..
+
+ +

Relatar um bug no DOM Inspector

+ +

Use um nome conveniente "DOM Inspector" componente no Bugzilla.

+ +

Para descobrir o DOM Inspector code e onde vive, consulte o DOM Inspector lista de módulos (DOM Inspector module listing).

+ +

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/pt-br/orphaned/tools/add-ons/index.html b/files/pt-br/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..97b6d72ed1 --- /dev/null +++ b/files/pt-br/orphaned/tools/add-ons/index.html @@ -0,0 +1,21 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - Add-ons + - Monitor de WebSocket + - Mozilla + - dev +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}

Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).

+ +
+
Monitor de WebSocket
+
+
+
Examine os dados trocados em uma conexão de WebSockets.
+
+
+
 
+
diff --git a/files/pt-br/orphaned/tools/css_coverage/index.html b/files/pt-br/orphaned/tools/css_coverage/index.html new file mode 100644 index 0000000000..31d1c8be34 --- /dev/null +++ b/files/pt-br/orphaned/tools/css_coverage/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Coverage +slug: Tools/CSS_Coverage +tags: + - CSS + - cobertura CSS +translation_of: Tools/CSS_Coverage +--- +
{{ToolsSidebar}}
+

Este componente é experimental e não está ainda avaliado no Firefox

+
+ +

CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.

+ +

Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.

+ +

O caminho que eles usam no geral é:

+ + + +

Um outro comando ("csscoverage oneshot") permite você efetivamente rodar ("csscoverage start; csscoverage stop").

+ +

O que "uso" significa?

+ +

TL;DR:

+ +

CSS cobertura checa se o tag#id.class seletor no exemplo abaixo existe em um conjunto de páginas web.

+ +
@media thing {
+  tag#id.class:hover {
+    foo: bar;
+  }
+}
+ +

Porque?

+ +

Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?

+ +
<style>
+  span:hover {
+    color: purple;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Tecnicamente span:hover não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e span:hover claramente tem relevância para a página..

+ +

Similarmente, suponha que o seu CSS tenha o seguinte:

+ +
<style>
+  @media tv {
+    span {
+      color: purple;
+    }
+  }
+</style>
+
+<span>Test</span>
+
+ +

Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? 

+ +

Mas 'use' não é somente sobre relevância 

+ +

É a seguinte regra relevante:

+ +
<style>
+  span { }
+</style>
+
+<span>Test</span>
+
+ +

Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido

+ +

No entanto acontece o seguinte:

+ +
<style>
+  span {
+    -o-text-curl: minor;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.

+ +

Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.

+ +
<style>
+  div { color: red; }
+  span { color: blue; }
+</style>
+
+<div><span>Test</span></div>
+
+ +

Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:

+ +
<style>
+  div { color: red; border: none; }
+  span { color: blue; }
+</style>
+
+ +

Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.

+ +

Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar  checando antes de você remover as regras do arquivo CSS.

+ +

Ressalvas

+ +

Tenha consciência destas coisas:

+ + + +

Erros

+ +

Nós estamos trabalhando em um número de imortantes bugs ( erros ):

+ + diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..a4e9aa924c --- /dev/null +++ b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,19 @@ +--- +title: Desabilitar breakpoints +slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +tags: + - breakpoint + - breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +
{{ToolsSidebar}}

Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no Source list pane:

+ +

+ +

Alternativamente, ativar o menu de contexto enquanto o ponteiro do mouse estiver sobre a entrada do breakpoint no source list pane, e selecione "Desabilitar breakpoint".

+ +

Você pode também remover um brekpoint somente apertando na seta que o representa.

+ +

Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:

+ +

diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..7d06312bdc --- /dev/null +++ b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,58 @@ +--- +title: Debugger (before Firefox 52) +slug: Tools/Debugger_(before_Firefox_52) +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

This page describes the JavaScript Debugger as it appears before Firefox 52.

+ +

See what it looks like from Firefox 52 onwards.

+
+ +

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

+ +

You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See remote debugging to learn how to connect the debugger to a remote target.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

User Interface Tour

+ +

To find your way around the debugger, here's a quick tour of the UI.

+ +
+

How to

+ +

To find out what you can do with the debugger, see the following how-to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html b/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html new file mode 100644 index 0000000000..65fe989377 --- /dev/null +++ b/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html @@ -0,0 +1,11 @@ +--- +title: Problemas com JAWS no Firefox +slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox +tags: + - Acessibilidade + - Obsolento +translation_of: Web/Accessibility/JAWS_Issues_with_Firefox +--- +

Problemas JAWS Firefox conhecidos

+ +

Esse artigo não é mais relevante. Por favor, veja o FAQ no site de suporte Mozilla.

diff --git "a/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" "b/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" new file mode 100644 index 0000000000..a05abeae88 --- /dev/null +++ "b/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" @@ -0,0 +1,55 @@ +--- +title: Entendendo o uso do método appendChild em javascript +slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript +--- +
{{ApiRef("DOM")}}
+ +

Resumo

+ +

Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.

+ +

Sintaxe

+ +
var filho = elemento.appendChild(filho);
+ + + +

Descrição

+ +

O método appendChild devolve uma referência ao nó adicionado.

+ +

Exemplo

+ +
// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Notas

+ +

Se filho é uma referência a um nó existente no documento, appendChild vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).

+ +

Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, só então, ser adicionado na nova posição.

+ +

Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método cloneNode não serão mantidas sincronizadas automaticamente)

+ +

Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.

+ +

appendChild() é um dos métodos fundamentais da programação para a web usando o DOM. O método appendChild() insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.

+ +

Especificação

+ + + +

Ver também

+ + diff --git "a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" "b/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" new file mode 100644 index 0000000000..c2f5f9f4ce --- /dev/null +++ "b/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" @@ -0,0 +1,20 @@ +--- +title: Usando CSS media queries (consultas de mídia em CSS) +slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) +tags: + - CSS + - Guía + - Iniciante + - media query +--- +

Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.

+ +

Sintaxe

+ +

Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.

+ +

Fonte:

+ +

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

+ +

 

diff --git a/files/pt-br/orphaned/web/html/element/command/index.html b/files/pt-br/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..99a42fb9db --- /dev/null +++ b/files/pt-br/orphaned/web/html/element/command/index.html @@ -0,0 +1,129 @@ +--- +title: command +slug: Web/HTML/Element/command +translation_of: Web/HTML/Element/command +--- +

Sumário

+ +

O elemento command representa um comando que o usuário pode chamar.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorias de conteúdoFlow content, phrasing content
Elementos permitidosNenhum, é um elemento vazio.
Omissão de tagDeve ter uma tag inicial, mas não deve ter uma tag final.
Elementos pais permitidosQualquer elemento que aceite phrasing content.
Documento normativoHTML5, section 4.11.3
+ +

Atributos

+ +

Como todos ou outros elementos HTML, esse elemento suporta os global attributes.

+ +
+
{{ htmlattrdef("checked") }}
+
Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo type seja checkbox ou radio.
+
{{ htmlattrdef("disabled") }}
+
Indica que o elemento não está disponível.
+
{{ htmlattrdef("icon") }}
+
Atribui uma figura para representar o comando.
+
{{ htmlattrdef("label") }}
+
O nome do comando, como será mostrado para o usuário.
+
{{ htmlattrdef("radiogroup") }}
+
Esse atributo dá o nome de um grupo de comandos, com type sendo radio, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo type seja radio.
+
{{ htmlattrdef("type") }}
+
Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: +
    +
  • +

    command ou vazio que é o estado padrão e indica que é um comando normal.

    +
    • +
  • +

    checkbox indica que o comando pode ser alternado utilizando uma caixa de seleção.

    +
    • +
  • +

    radio indica que o comando pode ser alternado utilizando uma radiobutton.

    +
    • +
+
+
+ +

Interface do DOM

+ +

Esse elemetno implementa a interface HTMLCommandElement.

+ +

Exemplos

+ +
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
+
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

 

+ +

{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}

diff --git a/files/pt-br/orphaned/web/html/favicon/index.html b/files/pt-br/orphaned/web/html/favicon/index.html new file mode 100644 index 0000000000..6b3bef6490 --- /dev/null +++ b/files/pt-br/orphaned/web/html/favicon/index.html @@ -0,0 +1,32 @@ +--- +title: favicon +slug: Web/HTML/favicon +--- +

 

+ +

 

+ +

Comentário da revisão

+ +
+

 

+ +

Diga-nos porque fez adições e alterações. É opcional, mas irá fazer com que o histórico da página seja mais fácil de entender.

+
+ +
+

É necessário revisão?

+ + +
+ +
+

 

+
+ +

Tags

+ +

 

diff --git "a/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" "b/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" new file mode 100644 index 0000000000..cb626865f8 --- /dev/null +++ "b/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" @@ -0,0 +1,149 @@ +--- +title: Coleções chaveadas +slug: Web/JavaScript/Guide/Coleções_chaveadas +tags: + - Coleções + - Guía + - JavaScript + - Mapas +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}
+ +

This chapter introduces collections of data which are ordered by a key; Map and Set objects contain elements which are iterable in the order of insertion.

+ +

Maps

+ +

Map object

+ +

ECMAScript 6 introduces a new data structure to map values to values. A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order

+ +

The following code shows some basic operations with a Map. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of [key, value] for each iteration.

+ +
var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow");
+sayings.set("elephant", "toot");
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+ +

Object and Map compared

+ +

Traditionally, {{jsxref("Object", "objects", "", 1)}} have been used to map strings to values. Objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Map objects, however, have a few more advantages that make them better maps.

+ + + +

These two tips can help you to decide whether to use a Map or an Object:

+ + + +

WeakMap object

+ +

The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the keys are objects only and the values can be arbitrary values. The object references in the keys are held weakly meaning that they are target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.

+ +

One difference to Map objects is that WeakMap keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.

+ +

For more information and example code, see also "Why WeakMap?" on the {{jsxref("WeakMap")}} reference page.

+ +

One use case of WeakMap objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald blog post "Hiding Implementation Details with ECMAScript 6 WeakMaps". The private data and methods belong inside the object and are stored in the privates WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because privates is not exported from the module

+ +
const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Private data goes here
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // Do stuff with private data in `me`...
+};
+
+module.exports = Public;
+
+ +

Sets

+ +

Set object

+ +

{{jsxref("Set")}} objects are collections of values. You can iterate its elements in insertion order. A value in a Set may only occur once; it is unique in the Set's collection.

+ +

The following code shows some basic operations with a Set. See also the {{jsxref("Set")}} reference page for more examples and the complete API.

+ +
var mySet = new Set();
+mySet.add(1);
+mySet.add("some text");
+mySet.add("foo");
+
+mySet.has(1); // true
+mySet.delete("foo");
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+
+ +

Converting between Array and Set

+ +

You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the spread operator. Also, the Set constructor accepts an Array to convert in the other direction. Note again that Set objects store unique values, so any duplicate elements from an Array are deleted when converting.

+ +
Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1,2,3,4]);
+
+ +

Array and Set compared

+ +

Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new Set object, however, has some advantages:

+ + + +

WeakSet object

+ +

{{jsxref("WeakSet")}} objects are collections of objects. An object in the WeakSet may only occur once; it is unique in the WeakSet's collection and objects are not enumerable.

+ +

The main differences to the {{jsxref("Set")}} object are:

+ + + +

The use cases of WeakSet objects are limited. They will not leak memory so it can be safe to use DOM elements as a key and mark them for tracking purposes, for example.

+ +

Key and value equality of Map and Set

+ +

Both, the key equality of Map objects and the value equality of Set objects, are based on the "same-value-zero algorithm":

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}

diff --git a/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html b/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html new file mode 100644 index 0000000000..953a9543de --- /dev/null +++ b/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html @@ -0,0 +1,583 @@ +--- +title: Sintaxe e tipos +slug: Web/JavaScript/Guide/Sintaxe_e_tipos +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.

+ +

Sintaxe básica

+ +

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

+ +

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode.

+ +

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declarações")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.

+ +

Comentários

+ +

A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:

+ +
// comentário de uma linha
+
+/* isto é um comentário longo
+   de múltiplas linhas.
+ */
+
+/* Você não pode, porém, /* aninhar comentários */ SyntaxError */
+ +

Declarações

+ +

Existem três tipos de declarações em JavaScript.

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declara uma variável, opcionalmente, inicializando-a com um valor.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Declara uma constante apenas de leitura.
+
+ +

Variáveis

+ +

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.

+ +

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).

+ +

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

+ +

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

+ +

Declarando variáveis

+ +

Você pode declarar uma variável de três formas:

+ + + +

Classificando variáveis

+ +

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.

+ +

Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:

+ +
var a;
+console.log("O valor de a é " + a); // saída "O valor de a é undefined"
+console.log("O valor de b é " + b); // throws ReferenceError exception
+
+ +

Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).

+ +
var input;
+if(input === undefined){
+  facaIsto();
+} else {
+  facaAquilo();
+}
+
+ +

O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:

+ +
var myArray = [];
+if (!myArray[0]) myFunction();
+
+ +

O valor undefined converte-se para NaN quando usado no contexto numérico.

+ +
var a;
+a + 2;  // Avaliado como NaN
+
+ +

Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:

+ +
var n = null;
+console.log(n * 32); // a saída para o console será 0.
+
+ +

Escopo de variável

+ +

Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local,  pois ela está disponível somente dentro dessa função.

+ +

JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if. 

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y não está definido
+
+ +

Hoisting

+ +

Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.

+ +
/**
+ * Exemplo 1
+ */
+console.log(x === undefined); // exibe "true"
+var x = 3;
+
+/**
+ * Exemplo 2
+ */
+// returnará um valor undefined
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+
+ +

Os exemplos acima serão interpretados como:

+ +
/**
+ * Exemplo 1
+ */
+var x;
+console.log(x === undefined); // exibe "true"
+x = 3;
+
+/**
+ * Exemplo 2
+ */
+var myvar = "um valor";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "valor local";
+})();
+
+ +

Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.

+ +

Variáveis Globais

+ +

Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel. 

+ +

Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.

+ +

Constantes

+ +

Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, underline ou cifrão e pode conter caracteres alfabético, numérico ou underline.

+ +
const prefix = '212';
+
+ +

Uma constante não pode alterar seu valor por meio de uma atribuição ou ao ser declarada novamente enquanto o script é executado. Deve ser inicializada com um valor.

+ +

As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, o identificado é adotado para representar uma variável.

+ +

Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: 

+ +
// Isto irá causar um  erro
+function f() {};
+const f = 5;
+
+// Isto também irá causar um erro.
+function f() {
+  const g = 5;
+  var g;
+
+  //declarações
+}
+
+ +

Estrutura de dados e tipos

+ +

Tipos de dados

+ +

O mais recente padrão ECMAScript define sete tipos de dados:

+ + + +

Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  {{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funçõess")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.

+ +

Conversão de tipos de dados

+ +

JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:

+ +
var answer = 42;
+
+ +

E depois, você pode atribuir uma string para a mesma variável, por exemplo:

+ +
answer = "Obrigado pelos peixes...";
+
+ +

Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.

+ +

Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:

+ +
x = "A resposta é " + 42 // "A resposta é 42"
+y = 42 + " é a resposta" // "42 é a resposta"
+
+ +

Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

Convertendo strings para números

+ +

No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.

+ + + +

parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.

+ +

Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
+ +

Literais

+ +

Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:

+ + + +

Array literal

+ +

Um literal de array é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.

+ +

O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +
+

Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.

+
+ +

Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.

+ +

Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e Coleções indexadas para detalhes sobre array de objetos.

+ +

Vírgulas extras em array literal

+ +

Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:

+ +
var fish = ["Lion", , "Angel"];
+
+ +

Esse array tem dois elementos com valores e um elemento vazio (fish[0] é "Lion", fish[1] é undefined, e fish[2] é "Angel" ).

+ +

Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.

+ +
+

Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.

+
+ +
var myList = ['home', , 'school', ];
+
+ +

No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.

+ +
var myList = ['home', , 'school', , ];
+
+ +

Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.

+ +

Literais Boolean

+ +

O tipo Boolean tem dois valores literal: true e false.

+ +

Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.

+ +

Inteiros

+ +

Inteiros podem sem expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

+ + + +

Alguns exemplos de inteiros literal são:

+ +
0, 117 and -345 (decimal, base 10)
+015, 0001 and -077 (octal, base 8)
+0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
+0b11, 0b0011 and -0b11 (binário, base 2)
+
+ +

Para maiores informações, veja Literais numérico na referência Léxica.

+ +

Literais de ponto flutuante

+ +

Um literal de ponto flutuante pode ter as seguintes partes:

+ + + +

O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").

+ +

Mais sucintamente, a sintaxe é:

+ +
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
+
+ +

Por exemplo:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

Objeto literal

+ +

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.

+ +

Segue um exemplo de um objeto literal. O primeiro elemento do objeto car define uma propriedade, myCar, e atribui para ele uma nova string, "Saturn"; o segundo elemento, a propriedade getCar, é imediatamente atribuído o resultado de chamar uma função (carTypes("Honda")); o terceiro elemento, a propriedade especial, usa uma variável existente (sales).

+ +
var sales = "Toyota";
+
+function carTypes(name) {
+  if (name == "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+
+ +

Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.

+ +
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array ("[]").

+ +
var unusualPropertyNames = {
+  "": "Uma string vazia",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
+console.log(unusualPropertyNames[""]);  // Um string vazia
+console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
+console.log(unusualPropertyNames["!"]); // Bang!
+ +

Observe:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a não está definido
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

String Literal

+ +

Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.

+ +
"foo"
+'bar'
+"1234"
+"um linha \n outra linha"
+"John's cat"
+
+ +

Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:

+ +
console.log("John's cat".length)
+// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
+// Nesse caso, 10 caracteres.
+
+ +

Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.

+ +

Uso de caracteres especiais em string

+ +

Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.

+ +
"uma linha \n outra linha"
+
+ +

A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabela: Caracteres especiais no JavaScript
CaracterDescrição
\0Byte nulo
\bBackspace
\fAlimentador de formulário
\nNova linha
\rRetorno do carro
\tTabulação
\vTabulação vertical
\'Apóstrofo ou aspas simples
\"Aspas dupla
\\Caractere de barra invertida
\XXX +

Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.

+
\xXX +

Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.

+
\uXXXX +

Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode.

+
+ +

Caracteres de escape

+ +

Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.

+ +

Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como escaping das aspas. Por exemplo:

+ +
var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
+console.log(quote);
+
+ +

O resultado disso seria:

+ +
Ele lê "The Cremation of Sam McGee" de R.W. Service.
+
+ +

Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:

+ +
var home = "c:\\temp";
+
+ +

Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.

+ +
var str = "esta string \
+está quebrada \
+em várias\
+linhas."
+console.log(str);   // esta string está quebrada em várias linhas.
+
+ +

Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:

+ +
var poem =
+"Rosas são vermelhas,\n\
+Violetas são azul.\n\
+Eu sou esquizofrênico,\n\
+e é isso que sou."
+
+ +

Mais informação

+ +

Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:

+ + + +

No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..e863d9cc69 --- /dev/null +++ b/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

Descrição

+ +

Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de Array.prototype. Como em todos os construtores, você pode mudar o  protótipo desse construtor para modificar todas as instâncias de {{jsxref("Global_Objects/Array", "Array")}}.

+ +

Contudo, a adição de métodos não-padronizados ao objeto array pode causar problemas futuros, seja com seu próprio código, ou na adição de novas funcionalidades ao JavaScript.

+ +

Um fato pouco conhecido: O próprio Array.prototype é um {{jsxref("Global_Objects/Array", "Array")}}

+ +
Array.isArray(Array.prototype); // true
+
+ +

Propriedades

+ +
+
Array.prototype.constructor
+
Especifica a função que cria um objeto do protótipo.
+  
+
{{jsxref("Array.prototype.length")}}
+
Reflete o número de elementos em um array.
+
+ +

Métodos

+ +

Métodos modificadores

+ +

Esses métodos modificam o array:

+ +
+
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
+
Copia uma sequência de elementos do array dentro do array.
+
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
+
Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.
+
{{jsxref("Array.prototype.pop()")}}
+
Remove e retorna o último elemento de um array.
+
{{jsxref("Array.prototype.push()")}}
+
Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.
+
{{jsxref("Array.prototype.reverse()")}}
+
Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.
+
{{jsxref("Array.prototype.shift()")}}
+
Remove o primeiro elemento de um array e o retorna.
+
{{jsxref("Array.prototype.sort()")}}
+
Ordena os elementos do array em questão e retorna o array.
+
{{jsxref("Array.prototype.splice()")}}
+
Adiciona e/ou remove elementos de um array.
+
{{jsxref("Array.prototype.unshift()")}}
+
Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.
+
+ +

Métodos de acesso

+ +

Esses métodos não modificam o array, mas sim retornam alguma representação dele.

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.
+
{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}
+
Verifica se o array possui cer, retornandotrue ou false apropriadamente.
+
{{jsxref("Array.prototype.join()")}}
+
Retorna uma string com todos os elementos do array
+
{{jsxref("Array.prototype.slice()")}}
+
Retorna um novo array com uma parte do array sobre o qual o método foi chamado
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna um array literal representando o array especificado; você pode usar esse valor para criar um novo array. Esse método sobrescreve o método {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Array.prototype.toString()")}}
+
Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
Retonar uma string adequada ao idioma do usuário representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Array.prototype.indexOf()")}}
+
Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array
+
+ +

Métodos de iteração

+ +

Vários métodos tomam como funções de argumento para serem chamados de volta ao processar o array. Quando esses métodos são chamados, o `length` do array é amostrado e qualquer elemento adicionado além deste comprimento (length)  de dentro da função (callback) não é visitado. Outras alterações para o array (Definindo o valor de ou apagando um elemento) pode afetar os resultados da operação se o método visita o elemento alterado posteriormente. Enquanto o comportamento específico destes métodos nestes casos é bem definido, não se deve confiar nisso para não confundir os outros que possoam ler seu código. Em vez disso, deve-se copiar para um novo array para modificá-lo.

+ +
+
{{jsxref("Array.prototype.forEach()")}}
+
Chama a função para cada elemento no array.
+
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
+
Retorna um novo objeto Array Iterator que contem o par chave/valor para cada índice no array.
+
{{jsxref("Array.prototype.every()")}}
+
Retorna true se todos elementos no array satisfizer a função de teste fornecida.
+
{{jsxref("Array.prototype.some()")}}
+
Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.
+
{{jsxref("Array.prototype.filter()")}}
+
Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.
+
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
+
Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou  `undefined` se não for encontrado.
+
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
+
Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.
+
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
+
Retorna um novo Array Iterator que contem a chave para cada índice no array.
+
{{jsxref("Array.prototype.map()")}}
+
Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.
+
{{jsxref("Array.prototype.reduce()")}}
+
Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.
+
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
+
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
+
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
+
+ +

Métodos genéricos

+ +

Vários métodos do objeto Array em Javascript foram feitos para serem aplicados genericamentes em todos os objetos que "pareçam" Arrays. Isso é, eles podem ser usados em qualquer objeto que possuam uma propriedade length (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato array[5]). Alguns métodos, como {{jsxref("Array.join", "join")}}, apenas lêem e as propriedades numéricas do objeto sobre o qual eles sãochamados. Outros, como {{jsxref("Array.reverse", "reverse")}}, exigem que as propriedades numéricas e length sejam mutáveis; sendo assim, esses métodos não podem ser chamados em objetos como {{jsxref("Global_Objects/String", "String")}}, que não permitem que nenhuma das duas propriedades sejam modificadas.

+ +

Especifiações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
ECMAScript 1st Edition.PadrãoDefinição inicial
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilidade com Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html new file mode 100644 index 0000000000..ff8de05541 --- /dev/null +++ b/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html @@ -0,0 +1,61 @@ +--- +title: BigInt.prototype +slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +tags: + - BigInt + - JavaScript + - Propriedade + - Prototipo + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +--- +
{{JSRef}}
+ +

A propriedade BigInt.prototype representa o protótipo para o  construtor {{JSxRef("BigInt")}} .

+ +

{{JS_Property_Attributes(0, 0, 0)}}

+ +

Descrição

+ +

Todas instância de {{JSxRef("BigInt")}} herdam de BigInt.prototype. O objeto protótipo do construtor {{JSxRef("BigInt")}} pode ser modificado para afetar todas instâncias de {{JSxRef( "BigInt")}} .

+ +

Propriedades

+ +
+
BigInt.prototype.constructor
+
Retorna a função que cria instâncias deste objeto. Por padrão é o objeto
+ {{JSxRef("BigInt")}}.
+
+ +

Métodos

+ +
+
{{JSxRef("BigInt.prototype.toLocaleString()")}}
+
Retorna uma string com uma representação sensível ao idioma para este número. Sobrescreve o método {{JSxRef("Object.prototype.toLocaleString()")}}
+  
+
{{JSxRef("BigInt.prototype.toString()")}}
+
Retorna uma string respresentando o objeto específicado em um base específica. Sobrescreve o método {{JSxRef("Object.prototype.toString()")}} .
+
{{JSxRef("BigInt.prototype.valueOf()")}}
+
Retorna o valor primitivo de um objeto específicado. Sobrescreve o método {{JSxRef("Object.prototype.valueOf()")}}.
+
+ +

Especificações

+ + + + + + + + + + + + +
EspecificaçõesEstado
{{SpecName('ESDraft', '#sec-bigint.prototype', 'BigInt.prototype')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade

+ + + +

{{Compat("javascript.builtins.BigInt.prototype")}}

diff --git a/files/pt-br/orphaned/web/security/information_security_basics/index.html b/files/pt-br/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..9508b0afdb --- /dev/null +++ b/files/pt-br/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,32 @@ +--- +title: Básico de Segurança da Informação +slug: Web/Security/Básico_de_Segurança_da_Informação +tags: + - Iniciante + - Segurança +translation_of: Web/Security/Information_Security_Basics +--- +

Entender o básico de segurança da informação pode ajudar você a evitar que seu software ou website estejam inseguros e vulneráveis a fraquezas que podem ser exploradas para ganhos financeiros ou outros motivos maliciosos. Estes artigos podem ajudar você a aprender o que você precisa. Com essa informação, você estará ciente do papel e importância da segurança no ciclo de desenvolvimento de software, além da distribuição do seu conteúdo.

+ +

Confidencialidade, Integridade e Disponibilidade

+ +
+
Descreve os objetivos de segurança primários, que são absolutamente fundamentais para o entendimento de segurança
+
Vulnerabilidades
+
Define as principais categorias de vulnerabilidades e discute a presença de vulnerabilidades em todo software
+
Ameaças
+
Introduz brevemente os principais conceitos de ameaças
+
Controles de Segurança
+
Define as principais categorias de controle de segurança e discute suas potenciais desvantagens
+
Segurança TCP/IP
+
Uma visão geral do modelo TCP/IP, com um foco em considerações de segurança para SSL
+
+ +

Veja também

+ + diff --git a/files/pt-br/projeto_colon_como_ajudar_com_mdn/index.html b/files/pt-br/projeto_colon_como_ajudar_com_mdn/index.html deleted file mode 100644 index 26ae1e7a9a..0000000000 --- a/files/pt-br/projeto_colon_como_ajudar_com_mdn/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Como ajudar a MDN -slug: 'Projeto:Como_ajudar_com_MDN' -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks ---- -
{{MDNSidebar}}
- -

Somos uma comunidade aberta de desenvolvedores criando recursos para uma web ainda melhor, independente do nosso navegador, programas ou marca. Qualquer um pode contribuir e cada pessoa que participa nos faz mais forte. Juntos, podemos continuar a impulsionar a inovação na web para servir o bem maior. Tudo começa aqui, com você.

- -

Junte-se a Comunidade

- -

Se quiser conselhos, ajuda, ou apenas nos conhecer, por favor, junte-se a nós nos seguintes canais:

- -

Canais no IRC – para conversar com colaboradores MDN:

- - - -

A reunião da comunidade MDN acontece a cada duas quartas-feiras às 10:00 da manhã, horário do pacífico (18:00 UTC inverno; 17:00 UTC verão) no canal  #devmo no irc.mozilla.org.

- -

Para entrar no IRC, siga essas instruções da wiki: https://wiki.mozilla.org/IRC#Getting_Started

- -

Listas de Email – comunicações menos frequentes para toda a comunidade MDN:

- - - -

Acesse o MDN

- -

Para adicionar, editar, ou traduzir um documento, você precisará entrar no site da MDN:

- -

https://developer.org

- -

Uma vez no site, você terá que criar uma conta na MDN. A Mozilla Developer Network usa o Persona (também conhecido como BrowserID) para gerenciar contas. O Persona é uma opção segura e fácil que protege a privacidade do usuário.

- -

Criando sua conta

- -
    -
  1. Clique no botão Entrar na parte superior da página. Uma janela abrirá com o login do Persona.
    - Screenshot of MDN site header, including Sign In button
    2. -
  2. Coloque o seu endereço de e-mail e clique em próximo.
    - Screenshot of the Persona window for a new user
    3. -
- -

O que acontece depois dependerá se você já usou este endereço de e-mail com o Persona antes.

- -
    -
  1. Se você ainda não tiver o e-mail no Persona, uma janela abrirá solicitando que você escolha uma senha. Digite a senha duas vezes e clique em verificar.
    2. -
  2. Screenshot of the Persona window for setting a password -
      -
    1. Faça a verificação do seu e-mail, acessando sua conta. Você receberá um e-mail do BrowserID@browserid.org (verifique sua caixa de SPAM se necessário).
      2. -
    2. Ao abrir o e-mail clique no link de registro.
      3. -
    3. Digite a senha para este endereço de e-mail (duas vezes), e clique em Concluir. Na guia MDN ou na janela (onde originalmente você clicou para entrar), o MDN mostrará uma página de criação de conta.
      4. -
    4. Digite um nome de usuário para associar à sua conta e clique em criar novo perfil. Observe que o nome de usuário não pode conter espaços.
      5. -
    -
    3. -
  3. Se você já usou o Persona antes, digite sua senha existente para este endereço de e-mail e clique em verificar.
    4. -
- -

Parabéns, agora você tem uma conta na MDN e poderá criar, editar e traduzir o conteúdo da documentação.

- -

Editando um conteúdo na MDN

- -

Comece editando uma página

- -
    -
  1. Verifique se você está logado na MDN (veja a seção acima para instruções)
    2. -
  2. Mude a página para o modo de edição. O conteúdo da página aparecerá dentro de um editor.
    - Screenshot of History, Watch, and Edit buttons in MDN
    - Screenshot of MDN editor
    3. -
- -

Salve o seu trabalho

- -

O editor do MDN oferece várias maneiras para você verificar e salvar seu trabalho.
- Screenshot of MDN's file management buttons, including "Save and Keep Editing", "Save Changes", "Preview Changes" and "Discard Changes"

- -
    -
  1. Save changes: Salva as alterações e sai do modo de edição, voltando à página para modo de leitura. Este é o mesmo que o botão Salvar e Sair na barra de ferramentas do editor.
    2. -
  2. Save and keep editing: Salva as alterações, mantendo-se no modo de edição. Este é o mesmo que o botão de Salvar e Continuar Editando na barra de ferramentas do editor.
    3. -
  3. Preview changes: Aplica as alterações em outra aba do navegador. Esta aba executa todos os modelos que são referenciados na página, para que você possa ver como os modelos aparecerão para os leitores.
    4. -
  4. Discard changes: Joga fora suas alterações desde a última gravação, e retorna a página para modo de leitura.
    5. -
- -

Modifique a informação da página

- -

Enquanto uma página está em modo de edição, você pode modificar alguns metadados da mesma. Clique no botão "i" para abrir os campos de informações das páginas.

- - - -

Quaisquer alterações a estes campos são salvos quando você salva a página como um todo.

- -

Formatação do Texto

- -

O editor oferece várias ferramentas, que poderão ajuda-lo a formatar o texto. Algumas delas são comuns em muitos editores e não precisam de explicação.

- - - -

Traduzindo uma página

- -
    -
  1. No menu Languages​​, clique em Add Translation.
    - Screenshot of MDN's languages menu, with "Add translation" selected
    2. -
  2. A página do idioma selecionado aparecerá.
    - Screenshot of MDN's list of languages available for translation
    3. -
  3. Clique no idioma que deseja traduzir. Deverá abrir o Translating Article, com o texto no idioma original apresentado no lado esquerdo.
    - Screenshot of MDN's translation user interface
    4. -
  4. Traduza o título e o conteúdo da página para a língua selecionada. Para isso, clique no botão "i" para aparecer as informações que você pode editar.
    5. -
  5. Clique em salvar mudanças quando tiver terminado.
    6. -
- -

Nota: Os elementos da interface do usuário "Translating Article" são inicialmente mostrados em Inglês.

- -

Editando uma página traduzida

- -

Em uma página traduzida, clique no botão Editar (que pode estar na sua língua nativa). A "Visão do Artigo Traduzido" se abrirá.
- Screenshot of MDN's translation user interface

diff --git a/files/pt-br/sections_and_outlines_of_an_html5_document/index.html b/files/pt-br/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 09ec86b3a2..0000000000 --- a/files/pt-br/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: Seções e estrutura de um documento HTML5 -slug: Sections_and_Outlines_of_an_HTML5_document -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

-
- -

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

- -

Estrutura de um documento em HTML4

- -

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

- -

Então a seguinte marcação:

- -
<div class="section" id="elefantes-da-floresta" >
-<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
-...esta seção continua...
-<div class="subsection" id="floresta-habitat">
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-</div>
-</div>
-
- -

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

- -
1. Elefantes da floresta
-   1.1 Habitat
-
- -

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

- -
<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
-...esta seção continua...
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-<h2>Dieta</h2>
-<h1>Esquilo da mongólia</h1>
-
- -

leva à:

- -
1. Elefantes da floresta
-   1.1 Habitat
-   1.2 Dieta
-2. Esquilo da mongólia
-
- -

Problemas resolvidos pelo HTML5

- -

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

- -
    -
  1. O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. 
    2. -
  2. Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
    3. -
  3. No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. -
  4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.
    5. -
- -

- -

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

- -

The HTML5 Outline Algorithm

- -

Definindo seções em HTML5

- -

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. 

- -
Nota: Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja Definindo cabeçalhos com HTML5.
- -

Exemplo:

- -
<section>
-  <h1>Elefantes da floresta</h1>
-  <section>
-    <h1>Introdução</h1>
-    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
-  </section>
-  <aside>
-    <p>Bloco publicitário</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 O Exemplo de empresa</p>
-</footer>
-
- -

Esse snippet HTML define duas seções de nível superior:

- -
 <section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h1> Introdução </h1>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
-  </section>
-  <section>
-    <h1> Habitat </h1>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
-  </section>
-  <aside>
-    <p> bloco de publicidade</p>
-  </aside>
-</section>
-<footer>
-  <p> (c) 2010 A empresa exemplo</p>
-</footer>
- -

A primeira seção possui três subseções:

- -
<section>
-   <h1>Forest elephants</h1>
-   <section>
-     <h1>Introduction</h1>
-     <p>In this section, we discuss the lesser known forest elephants.
-   </section>
-   <section>
-     <h1>Habitat</h1>
-     <P>Forest elephants do not live in trees but among them.
-   </section>
-   <aside>
-     <p>advertising block
-   </aside>
- </section>
- <footer>
-   <p>(c) 2010 The Example company
- </footer>
- -

Isso leva à seguinte estrutura:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-   1.3 Section (aside)
-
- -

Definindo cabeçalho com HTML5

- -

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

- -

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-     ...this section continues...
-  <section>
-     <h2>Habitat</h2>
-     <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
-
- -

leva ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat
-2. Gerbos da Mongólia
- -

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

- -

Seção implícita

- -

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

- -

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h3 class = "subseção implícita"> Habitat </h3>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
-      ... esta subseção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat (definido implicitamente pelo elemento h3)
-
- -

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
-  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
-    ... esta seção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
-
- -

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

- -
<body>
-  <h1> Mamíferos </h1>
-  <h2> Baleias </h2>
-  <p> Nesta seção, discutimos as baleias nadadoras.
-    ... esta seção continua ...</p>
-  <section>
-    <h3> Elefantes da floresta </h3>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-      ... esta seção continua ...</p>
-    <h3> Gerbos da Mongólia </h3>
-      <p> Hordas de gerbos se espalharam muito além da Mongólia.
-        ... esta subseção continua ...</p>
-    <h2> Répteis </h2>
-      <p>Répteis são animais com sangue frio.
-        ... esta subseção continua ...</p>
-  </section>
-</body>
-
- -

levando ao seguinte esboço:

- -
1. Mamíferos
-   1.1 Baleias (definidos implicitamente pelo elemento h2)
-   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
-   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
-   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
-
-
- -

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

- -

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

- -

Sobrepondo seções implícitas

- -

 Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

- - - -

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

- -
<section>
-  <hgroup>
-    <h1>Justine</h1>
-    <h2>Les Malheurs de la vertu</h2>
-  </hgroup>
-</section>
-
- -

leads to the following outline:

- -
1. Justine
-
- -

Caminhos de seção

- -

 Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

- -

Exemplo:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h2> Introdução </h2>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
-  </section>
-  <section>
-    <h2> Habitat </h2>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
-      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
-    <blockquote>
-      <h1> Bornéu</h1>
-      <p> O elemento florestal vive em Bornéu ...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Este exemplo resulta no seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Introdução
-   1.2 Habitat
-
- -

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

- -

Seções de fora da estrutura

- -

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

- -
    -
  1. O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
    2. -
  2. O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
    3. -
  3. O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
    4. -
  4. O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.
    5. -
- -

Endereços e horário de publicação nos elementos de seção

- -

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

- -

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Usando elementos HTML5 em navegadores não-HTML5

- -

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

- -

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
-
- -

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

- -
<noscript>
-  <strong> Aviso! </strong>
-  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
-  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
-</noscript>
-
- -

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Aviso !</strong>
-     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
-     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
-  </noscript>
-<![endif]--> 
-
- -

Conclusão

- -

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

- -

{{ HTML5ArticleTOC() }}

- -
-

{{ languages( {"es": "/es/Secciones_y_esquema_de_un_documento_HTML_5", "ja": "ja/Sections_and_Outlines_of_an_HTML5_document"}) }}

-
diff --git a/files/pt-br/the_xslt_javascript_interface_in_gecko/advanced_example/index.html b/files/pt-br/the_xslt_javascript_interface_in_gecko/advanced_example/index.html deleted file mode 100644 index 132fba5881..0000000000 --- a/files/pt-br/the_xslt_javascript_interface_in_gecko/advanced_example/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Exemplo Avançado -slug: The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example ---- -

Exemplo Avançado

- -

O exemplo avançado apresentará vários tipos de divs baseado em seu conteúdo. O exemplo permite tipificar o conteúdo muitas vezes, alternando entre tipos ascendente ou descendente. O JavaScript apenas carrega o arquivo .xsl a primeira vez, e prepara a variável xslloaded verdadeira (true) assim que o arquivo tiver terminado de carregar. Usando o método getParameter no obejto XSLTProcessor, o código pode decidir pelo tipo ascendente ou descendente. Se o parâmetro estiver vazio o padrão é ascendente (primeira vezes que o tipo aparece, como não há valor para isto no aarquivo XSLT). O valor do tipo é colocado usando setParameter.

- -

The XSLT file has a parameter called myOrder that JavaScript sets to change the sorting method. The xsl:sort element's order attribute can access the value of the parameter using $myOrder. However, the value needs to be an XPATH expression and not a string, so {$myOrder} is used. Using {} evaluates the content as an XPath expression.

- -

Once the transformation is complete, the result is appened to the document, as shown in this example.

- -

Figure 7 : Sorting based on div contentview example

- -
// XHTML Fragment:
-
-<div id="example">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-  <div>6</div>
-  <div>7</div>
-  <div>8</div>
-  <div>9</div>
-  <div>10</div>
-</div>
-
-// JavaScript
-
-var xslRef;
-var xslloaded = false;
-var xsltProcessor = new XSLTProcessor();
-var myDOM;
-
-var xmlRef = document.implementation.createDocument("", "", null);
-
-function sort() {
-  if (!xslloaded){
-    p = new XMLHttpRequest();
-    p.open("GET", "example2.xsl", false);
-    p.send(null);
-
-    xslRef = p.responseXML;
-    xsltProcessor.importStylesheet(xslRef);
-    xslloaded = true;
-  }
-
-  // create a new XML document in memory
-  xmlRef = document.implementation.createDocument("", "", null);
-
-  // we want to move a part of the DOM from an HTML document to an XML document.
-  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
-  var myNode = document.getElementById("example");
-  var clonedNode = xmlRef.importNode(myNode, true);
-
-  // after cloning, we append
-  xmlRef.appendChild(clonedNode);
-
-  // set the sorting parameter in the XSL file
-  var sortVal = xsltProcessor.getParameter(null, "myOrder");
-
-  if (sortVal == "" || sortVal == "descending")
-    xsltProcessor.setParameter(null, "myOrder", "ascending");
-  else
-    xsltProcessor.setParameter(null, "myOrder", "descending");
-
-  // initiate the transformation
-  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
-
-  // clear the contents
-  document.getElementById("example").innerHTML = "";
-
-  myDOM = fragment;
-  // add the new content from the transformation
-  document.getElementById("example").appendChild(fragment)
-}
-
-// XSL Stylesheet:
-
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <xsl:output method="html" indent="yes" />
-
-  <xsl:param name="myOrder" />
-
-  <xsl:template match="/">
-
-    <xsl:apply-templates select="/div//div">
-      <xsl:sort select="." data-type="number" order="{$myOrder}" />
-    </xsl:apply-templates>
-  </xsl:template>
-
-  <xsl:template match="div">
-    <xsl:copy-of select="." />
-  </xsl:template>
-</xsl:stylesheet>
-
diff --git a/files/pt-br/the_xslt_javascript_interface_in_gecko/index.html b/files/pt-br/the_xslt_javascript_interface_in_gecko/index.html deleted file mode 100644 index 7bcbbc6cd0..0000000000 --- a/files/pt-br/the_xslt_javascript_interface_in_gecko/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: The XSLT/JavaScript Interface in Gecko -slug: The_XSLT_JavaScript_Interface_in_Gecko -tags: - - DOM - - NeedsTranslation - - TopicStub - - XSLT -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko ---- -
    -
  1. Introduction
    2. -
  2. JavaScript/XSLT Bindings
    3. -
  3. Basic Example
    4. -
  4. Setting Parameters
    5. -
  5. Advanced Example
    6. -
  6. Interface List
    7. -
  7. Resources
    8. -
- -

See also

- diff --git a/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html b/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html deleted file mode 100644 index 6e70f0a1f6..0000000000 --- a/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: DOM Inspector (Em Pt-Br) -slug: Tools/Add-ons/DOM_Inspector_Pt-Br -tags: - - DOM - - 'DOM:Tools' - - DOM_Inspector - - DOM_PT-BR - - Extensions - - Ferramentas - - Inspector - - Theme - - Tools - - Web - - Web Developer - - XUL - - 'XUL:Tools' - - dev - - xu -translation_of: Tools/Add-ons/DOM_Inspector ---- -
{{ToolsSidebar}}

O DOM Inspector (também conhecido como DOMi) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (Document Object Model) de documentos - usando páginas da web ou windows XUL . A hierarquia do DOM pode ser navegada usando dois paíneis (two-paned) janela que permite uma variedade de pontos de vista diferentes sobre o documento e todos os nós dentro.

- -
-

Esta ferramenta é um add-on para XUL-based em aplicações como o Firefox e o Thunderbird. Se você está procurando o DOM inspector ele está incorporado no Firefox, consulte a documetação para o Page Inspector. 

-
- -

Documentação

- -
-
Introdução ao DOM Inspector
-
-
-
Aqui um tutorial que irá ajudá-lo a começar com o DOM Inspector.
-
-
-
- -
-
DOM Inspector FAQ
-
Perguntas e Respostas comuns sobre o DOM Inspector.
-
- -
-
Página DOM Inspector no MozillaZine
-
Mais informaçãoe sobre o DOM Inspector.
-
Como criar um DOM Inspector
-
Postagens sobre como criar o DOM Inspector do início
-
- -

Obter DOM Inspector

- -
-
Firefox & Thunderbird
-
Você pode Baixar e Instalar o DOM Inspector para o AMO web site. (Usuarios de navegador Thunderbird AMO em Firefox deve salvar o link de instalação, ou visitar a página do DOM Inspector para Thunderbird.).
-
- -
-
Thunderbird 2
-
DOM Inspector para Thunderbird 2 está disponível para Thunderbird Add-ons. Ou, construa você mesmo no Thunderbird com as seguintes opções:
-
- -
ac_add_options --enable-extensions="default inspector"
-ac_add_options --enable-inspector-apis
-
- -
-
Mozilla Suite e SeaMonkey
-
Select Tools > Web Development > DOM Inspector.
-
Você pode instalar o painel lateral através de:
-
Edit > Preferences > Advanced > DOM Inspector
-
Então basta abrir o painel inspector e visitar um Web Site..
-
- -

Relatar um bug no DOM Inspector

- -

Use um nome conveniente "DOM Inspector" componente no Bugzilla.

- -

Para descobrir o DOM Inspector code e onde vive, consulte o DOM Inspector lista de módulos (DOM Inspector module listing).

- -

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/pt-br/tools/add-ons/index.html b/files/pt-br/tools/add-ons/index.html deleted file mode 100644 index 97b6d72ed1..0000000000 --- a/files/pt-br/tools/add-ons/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Add-ons -slug: Tools/Add-ons -tags: - - Add-ons - - Monitor de WebSocket - - Mozilla - - dev -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}

Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).

- -
-
Monitor de WebSocket
-
-
-
Examine os dados trocados em uma conexão de WebSockets.
-
-
-
 
-
diff --git "a/files/pt-br/tools/atua\303\247\303\243o/index.html" "b/files/pt-br/tools/atua\303\247\303\243o/index.html" deleted file mode 100644 index 880187e7e2..0000000000 --- "a/files/pt-br/tools/atua\303\247\303\243o/index.html" +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Performance -slug: Tools/atuação -translation_of: Tools/Performance ---- -
{{ToolsSidebar}}
-

Esta ferramenta é nova no Firefox 34.

- -

As colunas no perfil de amostragem foram expandidos e renomeado no Firefox 35: esta página descreve os novos nomes das colunas.

-
- -

A ferramenta de desempenho é o substituto para o perfil de amostragem JavaScript. Ele inclui uma versão atualizada do perfil de amostragem, mas acrescenta um cronograma taxa de quadros para ajudar a avaliar a capacidade de resposta. Temos a intenção de adicionar mais recursos em versões futuras.

- -

Abrindo a ferramenta de desempenho

- -

Você pode iniciar a ferramenta de desempenho, selecionando "Performance", no menu "Web Developer". Você encontrará o menu "Web Developer" sob o menu "Ferramentas" no Linux e OS X, e diretamente sob o menu "Firefox" no Windows. Alternativamente, Shift + F5 irá abrir a ferramenta.

- -

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

A criação de perfis

-
-
- -

Para começar a gravar um novo perfil, clique no ícone do cronômetro. Clique novamente para terminar a gravação. O perfil será imediatamente aberto. Você pode salvar o perfil como um arquivo JSON e importação salva perfis. A barra lateral à esquerda permite que você alterne entre vários perfis abertos.

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

Análise de perfis

-
-
- -
-
-
-
Um perfil é algo como isto:
-
-
-
- -

- -

Ele consiste em quatro seções principais camadas horizontalmente:

- -
    -
  1. -
    -
    -
    um conjunto de migalhas de pão que você pode usar para zoom in e out
    -
    -
    - - -
    -
    -
    -
     
    -
    -
    - -
    um cronograma taxa de quadros
    -
    -
    2. -
  2. -
    -
    -
    um cronograma para a execução de código plataforma
    -
    -
    - a saída detalhada do perfil de amostragem JavaScript
    3. -
    4. -
- -
-
-
-
 
-
-
- -
 
-
- -
-
-
 
- -

O cronograma taxa de quadros

-
-
- -
-
-
-
 
-
-
- -
O cronograma taxa de quadros dá-lhe uma visão geral de capacidade de resposta do navegador no período coberto pelo perfil.
-
- -

Um quadro encapsula o trabalho do navegador precisa fazer a fim de pintar em resposta a algum evento. Por exemplo, se movendo o mouse sobre algum elemento página desencadeia alguns JavaScript que muda a aparência do elemento, e que desencadeia um refluxo e um repaint, depois de todo esse trabalho precisa ser concluída nesse quadro. Se demorar muito tempo para o navegador para processar o quadro, em seguida, o navegador irá aparecer sem resposta (janky).

- -
-
-
-
-
-
-
A ferramenta de desempenho leva um timestamp quando o navegador termina um quadro, e usa isso para manter o controle da taxa de quadros:
-
-
-
-
-
-
- -

- -
-
-
-
O eixo x é o tempo durante o período de perfil, e há três anotações: a taxa de quadro de destino (sempre 60 quadros por segundo), a média de frames, ea menor taxa de quadros.
-
-
-
- -
-
-
-
 
-
-
- -
-
-
-
-
 
-
-
- -

Execução de código Platform

-
-
-
- -
-
-
-
Isto dá-lhe uma visão geral de execução de código no período coberto pelo perfil. Tal como acontece com o cronograma taxa de quadros, o eixo x representa o tempo durante o período de perfis, e as amostras são colocadas para fora como barras verticais na ordem em que foram tiradas, esquerda para a direita:
-
-
-
- -

A altura de cada barra representa a profundidade da pilha de chamadas neste ponto.

- -

A ferramenta de desempenho examina a pilha de chamadas e descobre os tipos de coisas o código JavaScript está fazendo, e divide o bar em cores de acordo:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NetworkEnvio e processamento de pedidos e respostas de rede
JITCompilação de código JavaScript
GCGarbage collection
Inputs & eventsEventos como de mouse ou eventos de DOM
StylesAnálise de CSS
GraphicsInclue manipulção de reflows e repaints assim como WebGL
StorageNa maioria das vezes é o IndexedDB
GeckoTudo o que não se encaixa em nenhuma das outras categorias
- -

Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:

- -

- -

Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.

- -
-

Note que essa visão mostra tudo o que a plataforma está fazendo, não apenas o seu próprio código.

-
- -

Perfil de amostragem JavaScript

- -

O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, o número de amostras colhidas que executavam uma determinada função corresponde à quantidade de tempo que o navegador está gastando para executá-la, assim é possível identificar gargalos em seu código.
-
- Por exemplo, considere um programa como este:

- -
function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                // -> A (from the top level)
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;                 // -> B (from doSomething())
-}
-
-function logTheValue(x) {
-                            // -> C (from doSomething())
-                            // -> D (from doSomething())
-                            // -> E (from the top level)
- console.log(x);
-}
-
-doSomething();
-
-logTheValue(6);
- -

Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.

- -

Four are taken from inside doSomething(). Of those, A is directly inside doSomething(). B is inside getTheValue(), and C and D are inside logTheValue(). Finally, the program makes a call to logTheValue() from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:

- -
Sample A: doSomething()
-Sample B: doSomething() > getTheValue()
-Sample C: doSomething() > logTheValue()
-Sample D: doSomething() > logTheValue()
-Sample E: logTheValue()
- -

This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that logTheValue() is the bottleneck in our code.

- -

Profile structure

- -

The sampling profiler's details pane looks something like this:It presents the samples collected as a table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Samples -

The number of samples that were taken in which the corresponding "Function" appeared in the call stack. For example, given the profiling example above, the corresponding "Samples" and "Functions" columns would look like:

- - 
-4  doSomething()
-2  > logTheValue()
-1  > getTheValue()
-1  logTheValue()
- -

Note that logTheValue() appears twice, because it's called from two different places.

-
FunctionThis includes the function name, source file, line number and domain that served the file. Clicking on the file name takes you to that file in the Debugger.
Total CostA direct translation of the "Samples" column into a percentage.
Self Cost -

The "Samples" column includes not only samples that were taken while the JavaScript engine was executing this function, but also samples taken while executing functions called by this function.

- -

For example, in the example above we record 4 samples for doSomething(), but 3 of those samples were taken while the JavaScript engine was executing functions called by doSomething().

- -

"Self Cost" is the number of samples taken while the JavaScript engine was actually executing this function, translated into a percentage. In the example above, the "Self Cost" for doSomething() is 20% (1 sample out of 5 in total was taken while actually executing the function).

-
Total Time -

A statistical estimate of the amount of time spent inside the function, given the number of samples that were taken in it.

- -

This value is derived from "Samples" but is not a direct translation, because we don't always take samples at exactly the right time, so we attempt to correct for this irregularity.

-
Self Time -

A statistical estimate of the amount of time spent executing the function, exclusive of any functions called by this function.

- -

Just as "Total Time" is not a direct translation of  "Samples", so "Self Time" is not a direct translation of "Self Cost".

-
- -

For a deeper look into the way the sampling profiler presents data, see this walkthrough of a profile.

- -

Inverting the call tree

- -
-

New in Firefox 36

-
- -

By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:

- -
4  doSomething()
-2  > logTheValue()
-1  > getTheValue()
-1  logTheValue()
- -

This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.

- -

From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:

- - - -

This is usually a more effective way to highlight where your code is spending its time.

- -

Zooming in

- -

Clicking on a row highlights all the samples in the timeline view in which this function appears:If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:
-

- -

Note that this also zooms in on the section of the profile in which these samples were taken.

- -

Zooming in

- -

If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:

- - - -

Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:

- -

You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar:

- -

- -

 

- -

 

diff --git a/files/pt-br/tools/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html deleted file mode 100644 index 31d1c8be34..0000000000 --- a/files/pt-br/tools/css_coverage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: CSS Coverage -slug: Tools/CSS_Coverage -tags: - - CSS - - cobertura CSS -translation_of: Tools/CSS_Coverage ---- -
{{ToolsSidebar}}
-

Este componente é experimental e não está ainda avaliado no Firefox

-
- -

CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.

- -

Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.

- -

O caminho que eles usam no geral é:

- - - -

Um outro comando ("csscoverage oneshot") permite você efetivamente rodar ("csscoverage start; csscoverage stop").

- -

O que "uso" significa?

- -

TL;DR:

- -

CSS cobertura checa se o tag#id.class seletor no exemplo abaixo existe em um conjunto de páginas web.

- -
@media thing {
-  tag#id.class:hover {
-    foo: bar;
-  }
-}
- -

Porque?

- -

Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?

- -
<style>
-  span:hover {
-    color: purple;
-  }
-</style>
-
-<span>Test</span>
-
- -

Tecnicamente span:hover não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e span:hover claramente tem relevância para a página..

- -

Similarmente, suponha que o seu CSS tenha o seguinte:

- -
<style>
-  @media tv {
-    span {
-      color: purple;
-    }
-  }
-</style>
-
-<span>Test</span>
-
- -

Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? 

- -

Mas 'use' não é somente sobre relevância 

- -

É a seguinte regra relevante:

- -
<style>
-  span { }
-</style>
-
-<span>Test</span>
-
- -

Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido

- -

No entanto acontece o seguinte:

- -
<style>
-  span {
-    -o-text-curl: minor;
-  }
-</style>
-
-<span>Test</span>
-
- -

Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.

- -

Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.

- -
<style>
-  div { color: red; }
-  span { color: blue; }
-</style>
-
-<div><span>Test</span></div>
-
- -

Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:

- -
<style>
-  div { color: red; border: none; }
-  span { color: blue; }
-</style>
-
- -

Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.

- -

Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar  checando antes de você remover as regras do arquivo CSS.

- -

Ressalvas

- -

Tenha consciência destas coisas:

- - - -

Erros

- -

Nós estamos trabalhando em um número de imortantes bugs ( erros ):

- - diff --git a/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 232074130f..0000000000 --- a/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'Examine, modify, and watch variables' -slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' -tags: - - expressão de observação - - variáveis watch - - watch expression - - watch variables -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

Este componente não está ainda suportado no novo debugger. Se você precisar disto, você pode, por agora, voltar para o velho debugger para visitá-lo no about:config e configula-lo no "devtool.debugger.new-debugger-frontend" preferência para falso.

- -

Ver os documentos para o debugger, por favor visite Debugger(antes Firefox 52).

-
- -

Examine variáveis

- -

Quando o código pára em um breakpoint, você pode examinar seu estado no painél de variáveis do debugger.

- -

- -

Variáveis são agrupadas por escopo: No escopo da função você verá os argumentos built-in e suas variáveis tão bem como variáveis locais definido pela função como user e greeting similarmente, no escopo global você verá variáveis globais que você tem definido, como greetme, tão bem como globais built-in como localStorage and console.

- -

Cada objeto pode ser expandido, usando uma disclosure triangle, para mostrar seus componentes.

- -

Apontando seu cursor para um nome de variável exibido numa tooltip que previdencia informaçãoes adicionais sobre as variáveis. Veja Object.defineProperty() para detalhes no quê essas descrições de propriedades significam.

- -

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

- -

Você pode filtrar as variáveis que são exibidas, tanto por usar o "*" modificador no filtro de script, ou por digitar dentro de uma caixa filtro de variáveis, se você habilitou isto nas configurações do debugger.

- -

{{EmbedYouTube("dxCvnixpM_Q")}}

- -

Se uma variável existe no fonte mas tem sido otimizado pelo motor javascript, então isto será mostrado na Visão variável, mas é dado o valor (optimized away), e não é editável. No screenshot abaixo a variável upvar tem sido otimizado:

- -

- -

Modificando variáveis

- -

Quando o código pára num breakpoint, você pode modificar variáveis variáveis no painel de variáveis do debugger. Só clicar na variável atual e você permitirá digitar lá:

- -

{{EmbedYouTube("FKG-jkvSpq8")}}

- -

Observe uma expressão

- -

 

- -

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

- -

Oberve expressões são expressões que são avaliadas cada vez que a execução pausar. Então você pode examinar os resultados destas expressões. Esses são os resultados que eles deixam nas variáveis inspect  em seu código que você sabe que está lá mas não estão necessariamente pronto no código para inspeção. Para adicionar uma expressão de observação, clique na caixa que diz "Add watch expression" e colocar uma javascript expressão que que tem como saída você gostaria de monitorar como você lê através do código.

- -

Então comece a rodar seu código. Então watch expression faz nada até você iniciar a ler através do seu código, então nada acontece até você alcançar um breakpoint. Neste ponto, uma caixa mostra suas watch expressions ativas e os valores atuais aparecem:

- -

{{EmbedYouTube("CwGU-5wKRw0")}}

- -

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

- -

Você pode ler através do seu código, observar o valor da expressão como muda; cada vez que isto faz, a caixa piscará brevemente em amarelo. Você pode remover uma watch expression por clicar o ícone "x" no próximo, e, claro você pode ter mais do que uma watch expression por vez.

diff --git a/files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html b/files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..232074130f --- /dev/null +++ b/files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,60 @@ +--- +title: 'Examine, modify, and watch variables' +slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +tags: + - expressão de observação + - variáveis watch + - watch expression + - watch variables +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +
{{ToolsSidebar}}
+

Este componente não está ainda suportado no novo debugger. Se você precisar disto, você pode, por agora, voltar para o velho debugger para visitá-lo no about:config e configula-lo no "devtool.debugger.new-debugger-frontend" preferência para falso.

+ +

Ver os documentos para o debugger, por favor visite Debugger(antes Firefox 52).

+
+ +

Examine variáveis

+ +

Quando o código pára em um breakpoint, você pode examinar seu estado no painél de variáveis do debugger.

+ +

+ +

Variáveis são agrupadas por escopo: No escopo da função você verá os argumentos built-in e suas variáveis tão bem como variáveis locais definido pela função como user e greeting similarmente, no escopo global você verá variáveis globais que você tem definido, como greetme, tão bem como globais built-in como localStorage and console.

+ +

Cada objeto pode ser expandido, usando uma disclosure triangle, para mostrar seus componentes.

+ +

Apontando seu cursor para um nome de variável exibido numa tooltip que previdencia informaçãoes adicionais sobre as variáveis. Veja Object.defineProperty() para detalhes no quê essas descrições de propriedades significam.

+ +

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

+ +

Você pode filtrar as variáveis que são exibidas, tanto por usar o "*" modificador no filtro de script, ou por digitar dentro de uma caixa filtro de variáveis, se você habilitou isto nas configurações do debugger.

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

Se uma variável existe no fonte mas tem sido otimizado pelo motor javascript, então isto será mostrado na Visão variável, mas é dado o valor (optimized away), e não é editável. No screenshot abaixo a variável upvar tem sido otimizado:

+ +

+ +

Modificando variáveis

+ +

Quando o código pára num breakpoint, você pode modificar variáveis variáveis no painel de variáveis do debugger. Só clicar na variável atual e você permitirá digitar lá:

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

Observe uma expressão

+ +

 

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Oberve expressões são expressões que são avaliadas cada vez que a execução pausar. Então você pode examinar os resultados destas expressões. Esses são os resultados que eles deixam nas variáveis inspect  em seu código que você sabe que está lá mas não estão necessariamente pronto no código para inspeção. Para adicionar uma expressão de observação, clique na caixa que diz "Add watch expression" e colocar uma javascript expressão que que tem como saída você gostaria de monitorar como você lê através do código.

+ +

Então comece a rodar seu código. Então watch expression faz nada até você iniciar a ler através do seu código, então nada acontece até você alcançar um breakpoint. Neste ponto, uma caixa mostra suas watch expressions ativas e os valores atuais aparecem:

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Você pode ler através do seu código, observar o valor da expressão como muda; cada vez que isto faz, a caixa piscará brevemente em amarelo. Você pode remover uma watch expression por clicar o ícone "x" no próximo, e, claro você pode ter mais do que uma watch expression por vez.

diff --git a/files/pt-br/tools/debugger/index.html b/files/pt-br/tools/debugger/index.html new file mode 100644 index 0000000000..225f4cb20a --- /dev/null +++ b/files/pt-br/tools/debugger/index.html @@ -0,0 +1,448 @@ +--- +title: Depurador +slug: Tools/Depurador +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +

O Depurador Javascript permite percorrer o código JavaScript e examinar ou modificar seu estado para ajudar a localizar bugs.

+ +

Você pode usá-lo para depurar código executando localmente no Firefox ou executando remotamente, por exemplo em um dispositivo Firefox OS ou Firefox para android. Este guia assume que você está depurando localmente, mas é na maioria das vezes aplicável para depuração remota também. Veja o guia para depuração remota (inglês) para as diferenças.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +

Para Abrir o Depurador selecione "Depurador" no submenu do Menu do Firefox (ou menu de Ferramentas , se você exibir a barra de menu ou estiver no Mac OS X), ou pressionando Control+Shift +S (Command -Option- S se estiver no Mac OS X) .

+ +

A Toolbox aparece na parte inferior da janela do navegador, com o depurador ativado. Aqui está o que aparece quando você abrí-lo primeiro:

+ +

E aqui está o que aparece no meio de uma sessão de depuração:

+ +

Neste guia, vamos primeiro ter um rápido passeio de interface do usuário do depurador, em seguida, iremos descrever como executar algumas tarefas comuns de depuração.

+ +

A Interface do Usuário para Depurador

+ +

A  UI (Interface de Usuário) do depurador é dividida em seis seções principais, que abrangerá uma de cada vez:

+ + + +

+ +

Painel de códigos fontes

+ +

O painel de lista de origem, lista todos os arquivos de origem JS carregados na página, e permite que você selecione um para depuração. A partir do Firefox 29, a origem do painel de lista, compartilha sua tela de imóveis com a pilha de chamadas do painel, e você pode usar as guias na parte superior do painel para alternar entre elas.

+ +

Arquivos de origem são agrupados sob diferentes rubricas de acordo com onde eles são carregados. Você pode selecionar qualquer um desses arquivos e eles serão carregados para o painel de código.
+ Quaisquer pontos de interrupção que você definiu em um arquivo de origem estão listados no painel da lista de origem sob o nome de arquivo. A caixa de seleção ao lado de cada ponto de interrupção permite você ativá-lo / desativá-lo. Clicando com o botão direito na entrada do ponto de interrupção na lista, mostra um menu de contexto permitindo:

+ + + +

Os três ícones no inferior do painel de código fonte permitem habilitar a caixa-preta, impressão agradável de arquivos JS minificados e alternar todos os pontos de interrupção entre ativos e inativos.

+ + + +

Caixa-Preta (Black Boxing)

+ +

O olho no canto inferior esquerdo do painel é um botão que habilita a caixa-preta à fonte atualmente selecionada. Black boxing é útil para fontes as quais está usando, mas não debugando, como bibliotecas como jQuery. Se uma fonte esté em black box, é assumido que não há interesse em debugar: qualquer breakpoint dentro da fonte será desabilitado, e o debugger pulará quando estiver  fazendo o passo-a-passo do código.

+ +

Nas versões do  Firefox antes do 27, o ícone do olho aparece próximo ao nome do arquivo fonte quando passar o mouse sobre ele.

+ +

Impressão agradável (Pretty Print)

+ +

O par de chaves {} habilita a função pretty-print tornando o código desminificado, permitindo uma melhor leitura.

+ +

Alternar entre todos os pontos de interrupção (Toggle all breakpoints)

+ +
+

O botão Toggle all breakpoints  é novo no Firefox 29.

+
+ +

O botão vai desabilitar todos os breakpoints, ou reabilitá-los, numa única ação. Isso torna fácil mudar entre rodar um programa e fazer o passo-a-passo por ele.

+ +

Painel pilha de chamada

+ +
+

The call stack pane is new in Firefox 29.

+
+ +

Na outra aba do lado esquerdo do painel de depuração é exibida na vertical a  pilha de chamadas:

+ +

Cada linha representa um nível na pilha de chamada com a chamada atual no topo do painel. As linhas mostram o nome das funções que estão sendo executadas atualmente e um link para o arquivo fonte e o número da linha.

+ +

Painel de arquivos

+ +

Esse painel exibe os arquivos JS que foram carregados atualmente. Os pontos de interrupção(breakpoints) são sinalizados através de um círculo azul próximo ao numero da linha. Enquanto os pontos de interrupção que você atingiu têm uma flecha verde dentro do círculo:

+ +

No painel de arquivo, no menu de contexto habilita você:

+ + + + + +
+

O surgimento de Popup de uma variável é novo no Firefox 28.

+
+ +

Se você passar o mouse em cima de uma variável, no painel de variáveis, aparece um popup mostrando a você o valor da variável atual:

+ +

Isso permite que você veja rapidamente uma variável sem sem ter que abrir e pesquisar o Painel de Variáveis

+ +

Barra de Ferramentas

+ +

A barra de ferramentas é composta por quatro seções:

+ + + +

Os quatro botões à esquerda executam as seguintes funções:

+ + + +

The call stack visualisation shows the call stack at the point execution is paused.

+ +

Script filter

+ +

The script filter enables you to search in all three of the debugger's panes. By prefixing the filter expression with one of several special characters, the filter provides various different functions.

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrefixFunction
NoneFilter the scripts shown in the source list pane.
!Search for the string across all files.
@Search for function definitions, across all files, containing the string.
#Search for the string in the file currently open in the source pane.
:Go to the line given in the file currently open in the source pane.
*Filter the variables shown in the variables pane.
+ +

These options are shown in a pop-up when you click in the filter, and they're also accessible from the context menu in the source pane. Prefixes can be combined to form more powerful queries, like "file.js:12", which will open file.js and highlight line 12, or "mod#onLoad", which will find the string onLoad in all files containing mod in their name. Hitting the Enter key after searching will cycle between the matches found.

+ +

Debugger settings

+ +

At the right-hand end of the toolbar are two more buttons. The first of these shows and hides the variables and events panes, and the second enables you to toggle various debugger settings:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto Prettify Minified Sources +

With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.

+ +
+

This option is new in Firefox 29.

+
+
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught ExceptionsIf this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught. This is usually the behavior you want (you don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly).
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesEnabling this option adds a "Filter variables" search box to the variables panel, so that you can filter the displayed list of variables.
Show Variables Filter BoxDo not display non-enumerable JavaScript properties
Show Original SourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.
+ +
+
+ +

Variables pane

+ +

The variables pane is where you can examine, and modify, the internal state of the script as it's executing:

+ +

The variables pane shares its screen real estate with the events pane, and you can use the tabs at the top of the pane to switch between them.

+ +

Examining variables

+ +

Variables are grouped by scope: in Function scope you'll see the built-in arguments and this variables as well as local variables defined by the function like user and greeting. Similarly, in Global scope you'll see global variables you've defined, like greetme, as well as built-in globals like localStorage and console.

+ +

Each object can be expanded using a disclosure triangle to show its members.

+ +

Pointing your cursor at a variable's name displays a tooltip that provides additional information about the variable; for example, pointing at the greeting object displays "configurable enumerable writable". See Object.defineProperty() for details on what these property descriptors mean.

+ +

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

+ +

Modifying variables

+ +

You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on "Hi, Dr. Nick!" next to greeting, you can edit the value.

+ +

Watch expressions

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Highlight and inspect DOM nodes

+ +
+

This feature is new in Firefox 29.

+
+ +

If you hover over a DOM node in the Variables pane, it will be highlighted in the page:

+ +

Also, a target icon will appear next to the variableIf you click on this target, the Inspector will open with this DOM element selected.

+ +

Events pane

+ +
+

The events pane is new in Firefox 27.

+
+ +

The events pane lists all DOM events that currently have listeners bound from your code:

+ +

It shares its screen real estate with the variables pane, and you can use the tabs at the top of the pane to switch between them.

+ +

It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:

+ +
[event name] on [event target] in [source file]
+ +

If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.

+ +

How do I...?

+ +

Open the debugger

+ +

To open the debugger, select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or press Control-Shift-S (Command-Option-S on the Mac).

+ +

Find a source file

+ +

When the debugger's open, all the JavaScript source files are listed in the source list pane. You can browse the list to find the one you want, or search for a particular file using the script filter.

+ +

Find inside a file

+ +

To find a function, search for a string, or jump to a line in a file open in the source pane, you can use one of the special modifiers in the script filter.

+ +

Set a breakpoint

+ +

To set a breakpoint in a file open in the source pane:

+ + + +

Each breakpoint is shown in two places in the debugger:

+ + + +

The screenshot below shows breakpoints at lines 3 and 10 of the file:

+ +

+ +

Set a conditional breakpoint

+ +

To set a conditional breakpoint, activate the context menu while on the line you want to break at, and select "Add conditional breakpoint". Then enter the conditional expression in the popup that appears:

+ +

To edit the condition, or to add a condition to a normal breakpoint, activate the context menu and select "Configure conditional breakpoint":

+ +

+ +

Disable a breakpoint

+ +

To disable a breakpoint:

+ + + +

Disable/enable all breakpoints

+ +
+

This feature is new in Firefox 29.

+
+ +

To switch all breakpoints on or off, use the "Toggle all breakpoints" button in the Source list pane.

+ +

Break on a DOM event

+ +
+

This feature is new in Firefox 27.

+
+ +

If you're listening to a particular DOM event, you can tell the debugger to break when the event is triggered without having to track down the listener and set a breakpont manually.

+ +

First, open the events pane: click the button in the toolbar that opens the shared variables/events pane, then click the tab labeled "Events". The events pane will list all events for which you have assigned a listener:

+ +

Then check the box next to the event you want to break at.

+ +

When the event is triggered the code will break at the start of your listener.

+ +

Step through my code

+ +

When your code stops at a breakpoint, you can step through it using the four buttons on the left of the toolbar:

+ +

In order, the buttons are:

+ + + +

Use a source map

+ +

JavaScript sources are often combined and minified to make delivering them from the server more efficient. Increasingly, too, JavaScript running in a page is machine-generated, as when compiled from a language like CoffeeScript. By using source maps, the debugger can map the code being executed to the original source files, making debugging much, much easier.

+ +

To tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:

+ +

Of course, for this to work, you will need to have supplied a source map for the JavaScript running in the page. Do this by appending a comment directive to your source file:

+ +

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

+ +

Examine variables

+ +

When the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger:

+ +

Variables in global scope and in function, block, "with" scopes, etc. are listed separately, and you can expand objects to see their properties. You can also filter the variables shown using the "*" prefix in the script filter:

+ +

+ +

Modify variables

+ +

When the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. Just click on the variable's current value and you'll be able to type there:

+ +

+ +

Watch an expression

+ +

You can watch the value of a JavaScript expression using the "Add watch expression" function in the variables pane.

+ +

Debug mobile devices

+ +

To learn how to debug mobile devices, see the guide to remote debugging.

+ +

Black box a source

+ +

In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.

+ +

In versions of Firefox before Firefox 27, you can black box a source by clicking the eyeball icon next to the source in the source list pane:

+ +

+ +

From Firefox 27 onwards, enable or disable black boxing for a source by selecting the source in the source list pane and clicking the eyeball icon at the bottom left:

+ +

You can black box several sources at once by opening the developer toolbar and using the dbg blackbox command:

+ +

+ +

When a source is black boxed:

+ + + +

Pretty-print a minified file

+ +
+

Pretty-printing is new in Firefox 28.

+
+ +

To pretty-print a file that has been minified, open the minified file and click the icon that contains a pair of braces:

+ +

The file will now appear in a more readable format:

+ +

From Firefox 29 onwards, you can instruct the debugger to detect minified sources and pretty-print them for you automatically, by selecting "Auto Prettify Minified Sources" in the Debugger settings.

+ +

Access debugging in add-ons

+ +

The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):

+ + + +

Relevant files:

+ + + +

Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug 653545.)

+ +

Keyboard shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "debugger") }}

+ +

Global shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/pt-br/tools/debugger/set_a_logpoint/index.html b/files/pt-br/tools/debugger/set_a_logpoint/index.html new file mode 100644 index 0000000000..0a9b75f07d --- /dev/null +++ b/files/pt-br/tools/debugger/set_a_logpoint/index.html @@ -0,0 +1,53 @@ +--- +title: Set a logpoint +slug: Tools/Depurador/Set_a_logpoint +translation_of: Tools/Debugger/Set_a_logpoint +--- +

{{ToolsSidebar}}

+ +

As vezes você quer ver um valor em seu código mas sem pausar a execução dele. Ao enves de encher seu código com vários console.log, você pode usar o novo tipo de breakpoint adicionado ao Firefox 67, o logpoint. Logpoints mostram uma mensagem no console sem a necessidade de pausar a execução do código.

+ +

O logpoint é especialmente util em casos onde parar a execução também quebrará a execução da reprodução de testes, como quando se está debugando uma janela popup, ou executando uma focus-related logic.

+ +

Para criar um logpoint:

+ +
    +
  1. Clique com o direitro em uma linha no painel de Debug e selecione Add log do context menu.
    2. +
+ +

+ +
    +
  1. Crie uma expresão inline. O resultado irá ser apresentado no console, toda vez que encontrar os logpoints. Você pode usar qualquer variável ou funcção disponível no escopo atual.
    2. +
+ +

+ +

Trabalhando com logpoints

+ +

Quando você set um logpoint, o indicador é roxo, ao enves de azul de um incondicional breakpoint ou laranja de um condicional breakpoint.

+ +

Você pode ver a lista de logpoits no painel lateral de Breakpoints.

+ +

+ +

Quando seu código encontra um logpoint, a mensagem que você definiu ira ser apresentada no console. Vou pode fazer isso facilmento vendo a mensagem abrindo um console dividido sob o debug. (Ou pressione s Esc ou selecione o menu elipsis (...) e clique em Show Split Console.)

+ +

+ +

Quando devo usar logpoints?

+ + + +

Veja também

+ + diff --git a/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index a4e9aa924c..0000000000 --- a/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Desabilitar breakpoints -slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -tags: - - breakpoint - - breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -
{{ToolsSidebar}}

Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no Source list pane:

- -

- -

Alternativamente, ativar o menu de contexto enquanto o ponteiro do mouse estiver sobre a entrada do breakpoint no source list pane, e selecione "Desabilitar breakpoint".

- -

Você pode também remover um brekpoint somente apertando na seta que o representa.

- -

Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:

- -

diff --git a/files/pt-br/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/index.html deleted file mode 100644 index 7d06312bdc..0000000000 --- a/files/pt-br/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Debugger (before Firefox 52) -slug: Tools/Debugger_(before_Firefox_52) -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

This page describes the JavaScript Debugger as it appears before Firefox 52.

- -

See what it looks like from Firefox 52 onwards.

-
- -

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

- -

You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See remote debugging to learn how to connect the debugger to a remote target.

- -

{{EmbedYouTube("sK8KU8oiF8s")}}

- -
-

User Interface Tour

- -

To find your way around the debugger, here's a quick tour of the UI.

- -
-

How to

- -

To find out what you can do with the debugger, see the following how-to guides:

- -
- -
- -
-

Reference

- -
- -
diff --git a/files/pt-br/tools/depurador/index.html b/files/pt-br/tools/depurador/index.html deleted file mode 100644 index 225f4cb20a..0000000000 --- a/files/pt-br/tools/depurador/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: Depurador -slug: Tools/Depurador -translation_of: Tools/Debugger ---- -
{{ToolsSidebar}}
- -

O Depurador Javascript permite percorrer o código JavaScript e examinar ou modificar seu estado para ajudar a localizar bugs.

- -

Você pode usá-lo para depurar código executando localmente no Firefox ou executando remotamente, por exemplo em um dispositivo Firefox OS ou Firefox para android. Este guia assume que você está depurando localmente, mas é na maioria das vezes aplicável para depuração remota também. Veja o guia para depuração remota (inglês) para as diferenças.

- -

{{EmbedYouTube("sK8KU8oiF8s")}}

- -

Para Abrir o Depurador selecione "Depurador" no submenu do Menu do Firefox (ou menu de Ferramentas , se você exibir a barra de menu ou estiver no Mac OS X), ou pressionando Control+Shift +S (Command -Option- S se estiver no Mac OS X) .

- -

A Toolbox aparece na parte inferior da janela do navegador, com o depurador ativado. Aqui está o que aparece quando você abrí-lo primeiro:

- -

E aqui está o que aparece no meio de uma sessão de depuração:

- -

Neste guia, vamos primeiro ter um rápido passeio de interface do usuário do depurador, em seguida, iremos descrever como executar algumas tarefas comuns de depuração.

- -

A Interface do Usuário para Depurador

- -

A  UI (Interface de Usuário) do depurador é dividida em seis seções principais, que abrangerá uma de cada vez:

- - - -

- -

Painel de códigos fontes

- -

O painel de lista de origem, lista todos os arquivos de origem JS carregados na página, e permite que você selecione um para depuração. A partir do Firefox 29, a origem do painel de lista, compartilha sua tela de imóveis com a pilha de chamadas do painel, e você pode usar as guias na parte superior do painel para alternar entre elas.

- -

Arquivos de origem são agrupados sob diferentes rubricas de acordo com onde eles são carregados. Você pode selecionar qualquer um desses arquivos e eles serão carregados para o painel de código.
- Quaisquer pontos de interrupção que você definiu em um arquivo de origem estão listados no painel da lista de origem sob o nome de arquivo. A caixa de seleção ao lado de cada ponto de interrupção permite você ativá-lo / desativá-lo. Clicando com o botão direito na entrada do ponto de interrupção na lista, mostra um menu de contexto permitindo:

- - - -

Os três ícones no inferior do painel de código fonte permitem habilitar a caixa-preta, impressão agradável de arquivos JS minificados e alternar todos os pontos de interrupção entre ativos e inativos.

- - - -

Caixa-Preta (Black Boxing)

- -

O olho no canto inferior esquerdo do painel é um botão que habilita a caixa-preta à fonte atualmente selecionada. Black boxing é útil para fontes as quais está usando, mas não debugando, como bibliotecas como jQuery. Se uma fonte esté em black box, é assumido que não há interesse em debugar: qualquer breakpoint dentro da fonte será desabilitado, e o debugger pulará quando estiver  fazendo o passo-a-passo do código.

- -

Nas versões do  Firefox antes do 27, o ícone do olho aparece próximo ao nome do arquivo fonte quando passar o mouse sobre ele.

- -

Impressão agradável (Pretty Print)

- -

O par de chaves {} habilita a função pretty-print tornando o código desminificado, permitindo uma melhor leitura.

- -

Alternar entre todos os pontos de interrupção (Toggle all breakpoints)

- -
-

O botão Toggle all breakpoints  é novo no Firefox 29.

-
- -

O botão vai desabilitar todos os breakpoints, ou reabilitá-los, numa única ação. Isso torna fácil mudar entre rodar um programa e fazer o passo-a-passo por ele.

- -

Painel pilha de chamada

- -
-

The call stack pane is new in Firefox 29.

-
- -

Na outra aba do lado esquerdo do painel de depuração é exibida na vertical a  pilha de chamadas:

- -

Cada linha representa um nível na pilha de chamada com a chamada atual no topo do painel. As linhas mostram o nome das funções que estão sendo executadas atualmente e um link para o arquivo fonte e o número da linha.

- -

Painel de arquivos

- -

Esse painel exibe os arquivos JS que foram carregados atualmente. Os pontos de interrupção(breakpoints) são sinalizados através de um círculo azul próximo ao numero da linha. Enquanto os pontos de interrupção que você atingiu têm uma flecha verde dentro do círculo:

- -

No painel de arquivo, no menu de contexto habilita você:

- - - - - -
-

O surgimento de Popup de uma variável é novo no Firefox 28.

-
- -

Se você passar o mouse em cima de uma variável, no painel de variáveis, aparece um popup mostrando a você o valor da variável atual:

- -

Isso permite que você veja rapidamente uma variável sem sem ter que abrir e pesquisar o Painel de Variáveis

- -

Barra de Ferramentas

- -

A barra de ferramentas é composta por quatro seções:

- - - -

Os quatro botões à esquerda executam as seguintes funções:

- - - -

The call stack visualisation shows the call stack at the point execution is paused.

- -

Script filter

- -

The script filter enables you to search in all three of the debugger's panes. By prefixing the filter expression with one of several special characters, the filter provides various different functions.

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrefixFunction
NoneFilter the scripts shown in the source list pane.
!Search for the string across all files.
@Search for function definitions, across all files, containing the string.
#Search for the string in the file currently open in the source pane.
:Go to the line given in the file currently open in the source pane.
*Filter the variables shown in the variables pane.
- -

These options are shown in a pop-up when you click in the filter, and they're also accessible from the context menu in the source pane. Prefixes can be combined to form more powerful queries, like "file.js:12", which will open file.js and highlight line 12, or "mod#onLoad", which will find the string onLoad in all files containing mod in their name. Hitting the Enter key after searching will cycle between the matches found.

- -

Debugger settings

- -

At the right-hand end of the toolbar are two more buttons. The first of these shows and hides the variables and events panes, and the second enables you to toggle various debugger settings:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Auto Prettify Minified Sources -

With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.

- -
-

This option is new in Firefox 29.

-
-
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught ExceptionsIf this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught. This is usually the behavior you want (you don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly).
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesEnabling this option adds a "Filter variables" search box to the variables panel, so that you can filter the displayed list of variables.
Show Variables Filter BoxDo not display non-enumerable JavaScript properties
Show Original SourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.
- -
-
- -

Variables pane

- -

The variables pane is where you can examine, and modify, the internal state of the script as it's executing:

- -

The variables pane shares its screen real estate with the events pane, and you can use the tabs at the top of the pane to switch between them.

- -

Examining variables

- -

Variables are grouped by scope: in Function scope you'll see the built-in arguments and this variables as well as local variables defined by the function like user and greeting. Similarly, in Global scope you'll see global variables you've defined, like greetme, as well as built-in globals like localStorage and console.

- -

Each object can be expanded using a disclosure triangle to show its members.

- -

Pointing your cursor at a variable's name displays a tooltip that provides additional information about the variable; for example, pointing at the greeting object displays "configurable enumerable writable". See Object.defineProperty() for details on what these property descriptors mean.

- -

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

- -

Modifying variables

- -

You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on "Hi, Dr. Nick!" next to greeting, you can edit the value.

- -

Watch expressions

- -

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

- -

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:

- -

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

- -

Highlight and inspect DOM nodes

- -
-

This feature is new in Firefox 29.

-
- -

If you hover over a DOM node in the Variables pane, it will be highlighted in the page:

- -

Also, a target icon will appear next to the variableIf you click on this target, the Inspector will open with this DOM element selected.

- -

Events pane

- -
-

The events pane is new in Firefox 27.

-
- -

The events pane lists all DOM events that currently have listeners bound from your code:

- -

It shares its screen real estate with the variables pane, and you can use the tabs at the top of the pane to switch between them.

- -

It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:

- -
[event name] on [event target] in [source file]
- -

If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.

- -

How do I...?

- -

Open the debugger

- -

To open the debugger, select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or press Control-Shift-S (Command-Option-S on the Mac).

- -

Find a source file

- -

When the debugger's open, all the JavaScript source files are listed in the source list pane. You can browse the list to find the one you want, or search for a particular file using the script filter.

- -

Find inside a file

- -

To find a function, search for a string, or jump to a line in a file open in the source pane, you can use one of the special modifiers in the script filter.

- -

Set a breakpoint

- -

To set a breakpoint in a file open in the source pane:

- - - -

Each breakpoint is shown in two places in the debugger:

- - - -

The screenshot below shows breakpoints at lines 3 and 10 of the file:

- -

- -

Set a conditional breakpoint

- -

To set a conditional breakpoint, activate the context menu while on the line you want to break at, and select "Add conditional breakpoint". Then enter the conditional expression in the popup that appears:

- -

To edit the condition, or to add a condition to a normal breakpoint, activate the context menu and select "Configure conditional breakpoint":

- -

- -

Disable a breakpoint

- -

To disable a breakpoint:

- - - -

Disable/enable all breakpoints

- -
-

This feature is new in Firefox 29.

-
- -

To switch all breakpoints on or off, use the "Toggle all breakpoints" button in the Source list pane.

- -

Break on a DOM event

- -
-

This feature is new in Firefox 27.

-
- -

If you're listening to a particular DOM event, you can tell the debugger to break when the event is triggered without having to track down the listener and set a breakpont manually.

- -

First, open the events pane: click the button in the toolbar that opens the shared variables/events pane, then click the tab labeled "Events". The events pane will list all events for which you have assigned a listener:

- -

Then check the box next to the event you want to break at.

- -

When the event is triggered the code will break at the start of your listener.

- -

Step through my code

- -

When your code stops at a breakpoint, you can step through it using the four buttons on the left of the toolbar:

- -

In order, the buttons are:

- - - -

Use a source map

- -

JavaScript sources are often combined and minified to make delivering them from the server more efficient. Increasingly, too, JavaScript running in a page is machine-generated, as when compiled from a language like CoffeeScript. By using source maps, the debugger can map the code being executed to the original source files, making debugging much, much easier.

- -

To tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:

- -

Of course, for this to work, you will need to have supplied a source map for the JavaScript running in the page. Do this by appending a comment directive to your source file:

- -

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

- -

Examine variables

- -

When the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger:

- -

Variables in global scope and in function, block, "with" scopes, etc. are listed separately, and you can expand objects to see their properties. You can also filter the variables shown using the "*" prefix in the script filter:

- -

- -

Modify variables

- -

When the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. Just click on the variable's current value and you'll be able to type there:

- -

- -

Watch an expression

- -

You can watch the value of a JavaScript expression using the "Add watch expression" function in the variables pane.

- -

Debug mobile devices

- -

To learn how to debug mobile devices, see the guide to remote debugging.

- -

Black box a source

- -

In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.

- -

In versions of Firefox before Firefox 27, you can black box a source by clicking the eyeball icon next to the source in the source list pane:

- -

- -

From Firefox 27 onwards, enable or disable black boxing for a source by selecting the source in the source list pane and clicking the eyeball icon at the bottom left:

- -

You can black box several sources at once by opening the developer toolbar and using the dbg blackbox command:

- -

- -

When a source is black boxed:

- - - -

Pretty-print a minified file

- -
-

Pretty-printing is new in Firefox 28.

-
- -

To pretty-print a file that has been minified, open the minified file and click the icon that contains a pair of braces:

- -

The file will now appear in a more readable format:

- -

From Firefox 29 onwards, you can instruct the debugger to detect minified sources and pretty-print them for you automatically, by selecting "Auto Prettify Minified Sources" in the Debugger settings.

- -

Access debugging in add-ons

- -

The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):

- - - -

Relevant files:

- - - -

Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug 653545.)

- -

Keyboard shortcuts

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "debugger") }}

- -

Global shortcuts

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/pt-br/tools/depurador/set_a_logpoint/index.html b/files/pt-br/tools/depurador/set_a_logpoint/index.html deleted file mode 100644 index 0a9b75f07d..0000000000 --- a/files/pt-br/tools/depurador/set_a_logpoint/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Set a logpoint -slug: Tools/Depurador/Set_a_logpoint -translation_of: Tools/Debugger/Set_a_logpoint ---- -

{{ToolsSidebar}}

- -

As vezes você quer ver um valor em seu código mas sem pausar a execução dele. Ao enves de encher seu código com vários console.log, você pode usar o novo tipo de breakpoint adicionado ao Firefox 67, o logpoint. Logpoints mostram uma mensagem no console sem a necessidade de pausar a execução do código.

- -

O logpoint é especialmente util em casos onde parar a execução também quebrará a execução da reprodução de testes, como quando se está debugando uma janela popup, ou executando uma focus-related logic.

- -

Para criar um logpoint:

- -
    -
  1. Clique com o direitro em uma linha no painel de Debug e selecione Add log do context menu.
    2. -
- -

- -
    -
  1. Crie uma expresão inline. O resultado irá ser apresentado no console, toda vez que encontrar os logpoints. Você pode usar qualquer variável ou funcção disponível no escopo atual.
    2. -
- -

- -

Trabalhando com logpoints

- -

Quando você set um logpoint, o indicador é roxo, ao enves de azul de um incondicional breakpoint ou laranja de um condicional breakpoint.

- -

Você pode ver a lista de logpoits no painel lateral de Breakpoints.

- -

- -

Quando seu código encontra um logpoint, a mensagem que você definiu ira ser apresentada no console. Vou pode fazer isso facilmento vendo a mensagem abrindo um console dividido sob o debug. (Ou pressione s Esc ou selecione o menu elipsis (...) e clique em Show Split Console.)

- -

- -

Quando devo usar logpoints?

- - - -

Veja também

- - diff --git "a/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" "b/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" deleted file mode 100644 index 6359eededd..0000000000 --- "a/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Depuração Remota -slug: Tools/Depuração_Remota -translation_of: Tools/Remote_Debugging ---- -
{{ToolsSidebar}}

Você pode usar as ferramentas de desenvolvedor do Firefox, no seu desktop, para depurar remotamente o código em execução: em um processo diferente no mesmo dispositivo, ou em um dispositivo completamente diferente. Para fazer isso, use o Firefox para atribuir a Caixa de Ferramentas ao processo remoto, e, então, a Caixa de Ferramentas será iniciada em sua própria janela. Neste momento terão as seguintes ferramentas de suporte à depuração remota:

- - - -

Firefox para Android

- -

Depurando Android remotamente descreve como conectar ao Firefox desktop um dispositivo Android pelo USB.

- -

Firefox para Metro

- -

Depurando Metro remotamente descreve como usar Firefox desktop para depurar código em execução no Windows 8 (Estilo Metro).

- -

Firefox OS

- -

Usando App Manager inclui instruções para conectar as ferramentas de desenvolvimento do Firefox ao simulador Firefox OS ou a um dispositivo Firefox OS.

- -

Thunderbird

- -

Depurando remotamente Thunderbird explica como uma combinação de Firefox e Thunderbird pode ser usada para depurar código em execução no Thunderbird.

diff --git a/files/pt-br/tools/editor_de_estilos/index.html b/files/pt-br/tools/editor_de_estilos/index.html deleted file mode 100644 index 903428edc7..0000000000 --- a/files/pt-br/tools/editor_de_estilos/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Editor de Estilos -slug: Tools/Editor_de_Estilos -translation_of: Tools/Style_Editor ---- -
{{ToolsSidebar}}

O Editor de Estilos permite que você:

- - - -

{{EmbedYouTube("7839qc55r7o")}}

- -

Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A Caixa de Ferramentas aparecerá na parte de baixo da janela do navegador, com o Editor de Estilos ativado:

- -

- -

Na esquerda (ou no topo, se sua janela estiver muito estreita) há uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) está a fonte para a folha de estilo que você selecionou no painel de folhas de estilo.

- -

O painel de folha de estilos

- -

O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estão sendo usadas no documento atual. Você pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. Você pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botão Salvar que está no canto inferior direito de cada lista de folha de estilos.

- -

O painel editor

- -

Na direita fica o painel editor. Aqui é onde o código da folha de estilo seleciona fica disponível para você ler e editar. Quaisquer alterações que você faz são aplicadas na página em tempo real. Isso faz com que fique realmente fácil experimentar, revisar e testar mudanças na aparença de sua página. Uma vez que você estiver satisfeito com suas mudanças, você pode salver uma cópia localmente clicando no botão Salvar que fica no painel de folha de estilos.

- -

O editor provê números de linha e marcação de sintaxe para ajudar a ficar fácil ler seu CSS. Veja Utilizando o Editor de Fonte para documentação do editor em si, incluindo atalhos de teclado úteis.

- -

O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fácil trabalhar em páginas que foram otimizadas.

- -

Autocompletar

- -
-

Autocompletar é novo no Firefox 29.

-
- -

Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerá uma lista de sugestões.

- -

Você pode desligar isso em  Configurações do Editor de Estilos.

- -

Criando e importando folhas de estilos

- -

Você pode cirar uma nova folha de estilos clicando no botão Novo na barra de ferramentas. Então você pode começar a inserir CSS em um novo editor e ver como os novos estilos são aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.

- -

Você pode carregar um estilo do disco e aplicá-lo na página clicando no botão Importar.

- -

Suporte ao mapa de fonte

- -
-

Suporte ao mapa da fonte de CSS é uma funcionalidade nova no Firefox 29.

-
- -

{{EmbedYouTube("zu2eZbYtEUQ")}}

- -

Desenvolvedores web frequentemente criam arquivos CSS usando pré-processadores como Sass, Less, ou Stylus. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se você fizer isso,  ser capaz de ver e editar CSS gerado não é útil, porque o código que você mantém é a sintaxe do pré-processador, não o CSS gerado. Então você precisaria editar o CSS gerado e então manualmente descobrir como reaplicar na fonte original.

- -

Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agté sua fonte original, então mostrá-la e permitir que você edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.

- -

Isso significa que se você usa, por exemplo, Sass, então o editor irá mostrá-lo e permitir que você edite arquivos Sass, ao invés do CSS gerado por ele:

- -

Para isso funcionar, você deve:

- - - -

Vendo as fontes originais

- -

Agora, se você marcar "Mostrar fontes originais"  nas Configurações do Editor de Estilos, os links próximos as regras de CSS em ver Regras irão levar as fontes originais no Editor de Estilos.

- -

Editando fontes originais

- -

Você pode também editar fontes originais no Editor de Estilos e ver os resultas aplicados na página imediatamente. Para isso funcionar há dois passos extra:

- -

Primeiro, configure seu pré-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass você pode fazer isso simplesmente passando a opção --watch:

- -
sass index.scss:index.css --sourcemap --watch
- -

Em seguida, salve a fonte original no Editor de Estilos clicando no botão Salvar, perto do arquivo para então salvar o arquivo original.

- -

Agora quando você faz mudanças no arquivo fonte no Editor de Estilos é gerado um novo CSS você pode ver as mudanças em tempo real.

- -

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/pt-br/tools/firefox_os_1.1_simulator/index.html b/files/pt-br/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..8b710a1cea --- /dev/null +++ b/files/pt-br/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,359 @@ +--- +title: Simulador Firefox OS 1.1 +slug: Tools/Simulador_Firefox_OS_1.1 +tags: + - Ferramentas + - Firefox OS + - Guia(2) + - Guía +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
{{ToolsSidebar}}
+
+
+

Esta página descreve o "velho" Firefox OS Simulator. Você deve apenas usar se você desenvolve apps para Firefox 1.1, e que só pode ser instalado no Firefox 24 ou Firefox 25.

+ +

Se você desenvolve apps para Firefox OS 1.2 ou superior, invés disso você precisa usar o App Manager.

+ +

Se você precisar de ajuda, tente perguntar na lista ou em dev-developer-tools mailing list ou em #devtools on irc.mozilla.org.

+
+ +

Resumo

+ +

O complemento Firefox OS Simulator é uma ferramenta que permite você testar e depurar seu aplicativo Firefox OS no seu desktop. O ciclo de codificar-testar-depurar é muito mais rápido com o simulador do que com um dispositivo real, e claro, você não precisa de um dispositivo real para usar.

+ +

Essencialmente, o complemento Simulador consiste em:

+ +
    +
  • o Simulador: inclui o Firefox OS desktop client, que é uma versão das camadas superiores do Firefox OS que funciona em seu desktop. O Simulador também inclui alguns recursos adicionais de emulação que não estão nas compilações padrões do Firefox OS para desktop.
    • +
  • o Painel de Instrumentos: uma ferramenta embarcado pelo Firefox que permite iniciar e parar o Simulador e instalar, desinstalar, e depurar aplicativos rodando nele. O Painel de Instrumentos também lhe ajuda a subir(?) aplicativos para um dispositivo real, e checar os manifests do aplicativo para problemas comuns.
    • +
+ +

O screenshot abaixo mostra uma sessão de depuração usando o Simulador.

+ +

The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

+ +

+ +

This guide covers the following topics:

+ + + +
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+ +

Installing the Simulator add-on

+ +

The Simulator is packaged and distributed as a Firefox add-on. To install it:

+ +
    +
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
    2. +
  2. Click "Add to Firefox".
    3. +
  3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
    4. +
+ +

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
+
+ Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.

+ +

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

+ +


+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

+ +

Adding, removing and refreshing apps

+ +

Adding apps

+ +

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+ +

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

+ +

Managing apps

+ +

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +
    +
  • its name, taken from the manifest
    • +
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
    • +
  • a link to its manifest file
    • +
  • the result of manifest validation
    • +
+ +

It also gives us four commands:

+ +
    +
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.
    • +
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
    • +
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
    • +
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
    • +
+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+ +

Manifest validation

+ +

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +
    +
  • manifest errors: problems that will prevent your app from installing or running
    • +
  • manifest warnings: problems that may prevent your app from working properly
    • +
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
    • +
+ +

It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.

+ +

Manifest errors

+ +

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +
    +
  • the manifest does not include the mandatory "name" field
    • +
  • the manifest is not valid JSON
    • +
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
    • +
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
    • +
+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+ +

Manifest warnings

+ +

The Dashboard will report the following manifest issues as warnings:

+ +
    +
  • missing icons
    • +
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
    • +
  • the type field is unrecognized
    • +
  • the manifest requests a permission that is unrecognized
    • +
  • the manifest requests a permission which will be denied
    • +
  • the manifest requests a permission for which access could not be determined
    • +
+ +

Simulator-specific warnings

+ +

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +
    +
  • the type field is "certified", but the Simulator does not yet fully support certified apps
    • +
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
    • +
+ +

Running the Simulator

+ +

There are two different ways the Simulator may be started:

+ +
    +
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
    • +
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
    • +
+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+ +

+ +

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+ +

+ +

Simulator toolbar

+ +

In the bottom toolbar, from left to right, there are the Home button, the Screen Rotation button, and the Geolocation button.

+ +
    +
  • The Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).
    • +
  • The Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
    • +
  • The Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the Geolocation API.
    • +
+ +

+ +

Simulator menubar

+ +

In the top menubar, you can access some useful commands to make development more efficient:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
    • +
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
    • +
+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
    +
  • make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)
    • +
  • type the keyboard shortcut to refresh the app running in the Simulator
    • +
+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+ +

Attaching developer tools

+ +

You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler, and the Network Monitor, but we're working on adding support for more developer tools.

+ +
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+ +

To attach developer tools to the Simulator, click the "Connect" button for an app:

+ +

+ +

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+ +

+ +

Web Console

+ +

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+ +

Debugger

+ +

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+ +

Style Editor

+ +

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+ +

Profiler

+ +

Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+ +

Network Monitor

+ +

Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+ +

Receipts

+ +

If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+ +

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+ +

+ +

Push to device

+ +

If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.

+ +

Connecting a device

+ +

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+ +

Pushing apps to the device

+ +

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +
+

Manual Steps:

+ +
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.

    +
    • +
  • +

    If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.

    +
    • +
+
+ +

Firefox OS Device Connection Confirmation

+ +

On every device reboot, the first "Push" request needs to be confirmed on the device:

+ +

+ +

Troubleshooting on Linux

+ +

If you are unable to connect your device after creating udev rules, please see this bug.

+ +

Limitations of the Simulator

+ +

Note that the Firefox OS Simulator isn't a perfect simulation.

+ +

Hardware limitations

+ +

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+ +

Audio/video codecs

+ +

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+ +

Unsupported APIs

+ +

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ + + +

Getting help

+ +

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+ +

How to enable verbose logging

+ +

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+
+
+ +
+

 

+
+ +

 

diff --git a/files/pt-br/tools/inspetor_de_armazenamento/index.html b/files/pt-br/tools/inspetor_de_armazenamento/index.html deleted file mode 100644 index 82215530a4..0000000000 --- a/files/pt-br/tools/inspetor_de_armazenamento/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Inspetor de Armazenamento -slug: Tools/Inspetor_de_Armazenamento -tags: - - Armazenamento - - Armazenamento Local - - Ferramentas - - Guía - - Sidebar - - ferramentas do desenvolvedor - - inspetor de armazenamento - - seção -translation_of: Tools/Storage_Inspector ---- -
{{ToolsSidebar}}
- -
-

O Inspetor de Armazenamento é novo no Firefox 34.

- -

Inspetor de Armazenamento vem desabilitado por padrão. Habilite-o nas Configurações de Ferramentas do Desenvolvedor.

-
- -

O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:

- - - -

Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma visão read-only do armazenamento. Mas estamos trabalhando para permitir a você editar o conteúdo do armazenamento em futuros lançamentos.

- -

Abrindo o Inspetor de Armazenamento

- -

Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.

- -

A  Caixa de Ferramentas vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.

- -

- -

Interface de Usuário do Inspetor de Armazenamento

- -

A UI do Inspetor de Armazenamento é dividida em três componentes principais:

- - - -

- -

Árvore de armazenamento

- -

A árvore de armazenamento lista todos os tipos de armazenamentos que o Inspetor de Armazenamento pode inspecionar. Para cada tipo, ele possui uma lista de todas as possíveis origens disponíveis. Uma origem é um domínio ou um hostname para diferentes tipos de armazenamento. Para cookies, o protocolo não diferencia a origem. Para indexedDB ou armazenamento local uma origem é uma combinação de protocolo + hostname. Por exemplo, "http://mozilla.org" e "https://mozilla.org" são duas origens diferentes então itens de armazenamento local não podem ser compartilhados entre eles.

- -

- -

Enquanto cookies, armazenamento local e itens de armazenamento de sessão são diretamente associados a uma origem, para indexedDB a hierarquia tem mais níveis. Todos os itens de indexedDB são associados com um objeto de armazenamento que é então associado a um banco de dados, e finalmente um banco de dados é associado a uma origem.

- -

Você pode clicar em cada item da árvore para expandir ou contrair seus filhos. A árvore funciona em tempo real, então se um novo objeto for adicionado (adicionando um iframe, por exemplo), ele vai ser adicionado para cada tipo de armazenamento automaticamente. Clicar nos itens da árvore vai mudar os dados de na tabela à direita. Por exemplo, clicar em uma origem que é uma filha do tipo armazemento de Cookies  mostrará todos os cookies pertencentes àquele domínio.

- -

Widget tabela

- -

O widget tabela é um local onde todos os itens correspondentes ao item da árvore selecionada (seja uma origem, ou banco de dados) são listados. Dependendo do tipo de armazenamento  e do item da árvore, o número de colunas pode variar.

- -

Todas as colunas no Widget Tabela são redimencionáveis e podem ser ocultados via menu de contexto no cabeçalho da tabela até que apenas duas colunas estejam visíveis.

- -

- -

Cookies

- -

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

- - - -

Local storage / Session storage

- -

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

- -

IndexedDB origin

- -

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

- - - -

IndexedDB Database

- -

When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:

- - - -

- -

IndexedDB object store

- -

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

- - - -

Quando você seleciona qualquer linha na tabela de ferramentas de armazenamento, a sidebar é mostrada com detalhes sobre a linha selecionada. Se um cookie é selecionado, a sidebar listará todos os detalhes sobre o cookie selecionado.

- -

A sidebar pode analisar o valor do cookie, um ítem do armazenamento local ou um ítem do IndexedDB e covertê-lo em um objeto significante ao invés de apenas uma string. Por exemplo, um JSON convertido como '{"foo": "bar"}' é mostrado como a origem JSON {foo: "bar"}, o valor da chave separado como 1~2~3~4 é mostrado como um array [1, 2, 3, 4]. Abaixo há algumas telas mostrando exemplos de diferentes tipos de valores analisados:

- -

- -

Um JSON convertido em string sendo mostrado como o JSON original na seção parsed value da sidebar

- -

- -

Uma string contendo um par chave-valor sendo mostrada como JSON na seção parsed value da sidebar

- -

- -

Uma string contendo chave e valor separados sendo mostrada como um Array na seção parsed value da sidebar

diff --git a/files/pt-br/tools/measure_a_portion_of_the_page/index.html b/files/pt-br/tools/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..005813bc8f --- /dev/null +++ b/files/pt-br/tools/measure_a_portion_of_the_page/index.html @@ -0,0 +1,38 @@ +--- +title: Medir uma porção da página +slug: Tools/Medir_uma_porcao_da_pagina +tags: + - DevTools + - Exibir coordenadas + - Ferramentas de estilo + - Medir com o mouse + - ferramentas do desenvolvedor + - régua +translation_of: Tools/Measure_a_portion_of_the_page +--- +
{{ToolsSidebar}}
+ +

Novidade do Firefox 59.

+ +

Desde o Firefox 59, você pode medir uma área específica da página web ao utilizar a ferramenta de medida de porção da página.

+ +

Esta ferramenta está oculta por padrão. Para habilitar o seu botão faça:

+ + + +

Você verá o botão da ferramenta de medida de porção da página na parte superior direita da tela DevTools, no mesmo local dos botões de opções e configurações do mesmo.

+ +

+ +

Quando você quiser utilizar a ferramenta, clique em seu botão. A partir de agora, quando você passar o mouse sobre a página web, você verá que o cursor do mouse será em formato de cruz e a sua coordenada atual será exibida ao lado do cursor.

+ +

+ +

Quando você manter pressionado o botão esquerdo do mouse e arrastá-lo, será desenhado um retângulo, com as suas dimensões  X,Y e diagonal sendo exibidas. A unidade de medida se dá em pixels.

+ +

Quando você soltar o botão do muose, o retângulo permanecerá exibido em tela até que você clique novamente dentro da página web, isso permite que durante esse meio tempo, você possa efetuar screenshots da tela, tomar os dados exibidos para anotações externas, etc.

+ +

diff --git a/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html deleted file mode 100644 index 005813bc8f..0000000000 --- a/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Medir uma porção da página -slug: Tools/Medir_uma_porcao_da_pagina -tags: - - DevTools - - Exibir coordenadas - - Ferramentas de estilo - - Medir com o mouse - - ferramentas do desenvolvedor - - régua -translation_of: Tools/Measure_a_portion_of_the_page ---- -
{{ToolsSidebar}}
- -

Novidade do Firefox 59.

- -

Desde o Firefox 59, você pode medir uma área específica da página web ao utilizar a ferramenta de medida de porção da página.

- -

Esta ferramenta está oculta por padrão. Para habilitar o seu botão faça:

- - - -

Você verá o botão da ferramenta de medida de porção da página na parte superior direita da tela DevTools, no mesmo local dos botões de opções e configurações do mesmo.

- -

- -

Quando você quiser utilizar a ferramenta, clique em seu botão. A partir de agora, quando você passar o mouse sobre a página web, você verá que o cursor do mouse será em formato de cruz e a sua coordenada atual será exibida ao lado do cursor.

- -

- -

Quando você manter pressionado o botão esquerdo do mouse e arrastá-lo, será desenhado um retângulo, com as suas dimensões  X,Y e diagonal sendo exibidas. A unidade de medida se dá em pixels.

- -

Quando você soltar o botão do muose, o retângulo permanecerá exibido em tela até que você clique novamente dentro da página web, isso permite que durante esse meio tempo, você possa efetuar screenshots da tela, tomar os dados exibidos para anotações externas, etc.

- -

diff --git a/files/pt-br/tools/modo_design_adaptavel/index.html b/files/pt-br/tools/modo_design_adaptavel/index.html deleted file mode 100644 index a5b6935fd3..0000000000 --- a/files/pt-br/tools/modo_design_adaptavel/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Modo Design Adaptável -slug: Tools/Modo_Design_Adaptavel -tags: - - Desenvolvimento Web - - Design - - Design Adaptável - - Design Responsivo - - Ferramentas - - Ferramentas de Desenvolvimento - - Firefox - - Guia(2) - - Guide - - Guía - - 'I10n:priority' - - Responsive Design - - Tools -translation_of: Tools/Responsive_Design_Mode ---- -
{{ToolsSidebar}}
- -
-
Designs Responsivos se adaptam a diferentes tamanhos de tela para fornecer uma apresentação que seja adequada para diferentes tipos de dispositivos, como telefones celulares ou tablets. O Modo de Design Adaptável tornar mais fácil de ver como seu site ou aplicativo web vai olhar para diferentes tamanhos de tela.
-
- -

{{EmbedYouTube("LBcE72sG2s8")}}

- -
-
A imagem abaixo mostra uma página na versão móvel da Wikipedia visto com uma área de 320 por 480 de conteúdo.
-
- -

- -

O Modo de Design Adaptável é conveniente porque você pode rapidamente e precisamente alterar o tamanho da área de conteúdo.
-
- Claro, você pode simplesmente redimensionar a janela do navegador: mas diminuir a janela do navegador torna menor todas as suas outras abas menores também, e pode fazer a interface do navegador ficar muito mais difícil de usar.
-
- Enquanto o Modo de Design Adaptável estiver ativado, você pode continuar a navegação, como faria normalmente na área de conteúdo redimensionada.

- -

Ativando e Desativando

- -

Existem três maneiras de ativar o Modo de Design Adaptável:

- - - -

e três maneiras de retirar o Modo Design Adaptável:

- - - -

Redimensionamento

- -

Você pode redimensionar a área de contéudo de duas maneiras:

- - - -

Se você redimensionar usando clique-e-arraste você pode manter pressionada a tecla Control (Cmd no Max OS X) para abrandar a velocidade com que a área é redimensionado. Isto faz com que seja mais fácil para ajustar o tamanho precisamente.

- -
-

Controles do Modo Design Adaptável

- -

Na parte superior da janela em que o Modo Design Adaptável exibe a página, existem cinco controles:

- - - - - - - - - - - - - - - - - - - - - - - - -
Close (Fechar)Fechar Modo Design Adaptável e retornar à navegação normal
-

Select size (Selecionar o tamanho)

- 		-
-
Escolher entre uma série de largura predefinida x combinações de altura, ou definir o seu próprio.
- - -
Firefox 33 em diante, os números exibidos aqui são editáveis diretamente, assim você pode facilmente definir dimensões personalizadas.
-
-
Portrait/Landscape (Retrato/Paisagem) -
-
Alterne a tela entre visualização retrato e paisagem.
-
-
-

Simulate touch events (Simular eventos de toque)

- 		-
-
Ativar/desativar simulação de eventos de toque: enquanto a simulação de eventos de toque está habilitada, eventos de mouse são traduzidos em eventos de toque.
-
-
-

Take screenshot (Captura de Tela)

- 		Tira uma captura de tela da área de conteúdo. -
Capturas de Tela são salvas para o local de download padrão do Firefox.
-
-
diff --git a/files/pt-br/tools/notas_de_lancamento/index.html b/files/pt-br/tools/notas_de_lancamento/index.html deleted file mode 100644 index c74b2f5b90..0000000000 --- a/files/pt-br/tools/notas_de_lancamento/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: Notas de lançamento -slug: Tools/Notas_de_lancamento -tags: - - Notas de lançamento -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes ---- -
{{ToolsSidebar}}

Firefox 53

- - - -

Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53.

- -

Firefox 52

- - - -

All devtools bugs fixed between Firefox 51 and Firefox 52.

- -

Firefox 51

- - - -

All devtools bugs fixed between Firefox 50 and Firefox 51.

- -

Firefox 50

- - - -

All devtools bugs fixed between Firefox 49 and Firefox 50.

- -

Firefox 49

- - - -

All devtools bugs fixed between Firefox 48 and Firefox 49.

- -

Firefox 48

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 47 and Firefox 48.

- -

Firefox 47

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 46 and Firefox 47.

- -

Firefox 46

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 45 and Firefox 46.

- -

Firefox 45

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 44 and Firefox 45.

- -

Firefox 44

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 43 and Firefox 44.

- -

Firefox 43

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 42 and Firefox 43.

- -

Firefox 42

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 41 and Firefox 42.

- -

Firefox 41

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 40 and Firefox 41. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

- -

Firefox 40

- -

Highlights:

- - - -

More:

- - - -

Everything: all devtools bugs fixed between Firefox 39 and Firefox 40.

- -

Firefox 39

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 38 and Firefox 39.

- -

Firefox 38

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 37 and Firefox 38.

- -

Firefox 37

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 36 and Firefox 37.

- -

Firefox 36

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 35 and Firefox 36.

- -

Firefox 35

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 34 and Firefox 35.

- -

Firefox 34

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 33 and Firefox 34.

- -

Firefox 33

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 32 and Firefox 33.

- -

Firefox 32

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 31 and Firefox 32.

- -

Firefox 31

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 30 and Firefox 31.

- -

Firefox 30

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 29 and Firefox 30.

- -

Firefox 29

- -

Firefox 29 Hacks post. Highlights:

- - - -

Firefox 28

- -

Firefox 28 Hacks post. Highlights:

- - - -

Firefox 27

- -

Firefox 27 Hacks post. Highlights:

- - diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html deleted file mode 100644 index b1c8414a5b..0000000000 --- a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Examinando Eventos de Escuta -slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta -translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners ---- -
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

- -

- -

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

- -

Cada linha contém:

- - diff --git a/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..b1c8414a5b --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,26 @@ +--- +title: Examinando Eventos de Escuta +slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

+ +

+ +

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

+ +

Cada linha contém:

+ + diff --git "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" deleted file mode 100644 index 8d2d788d50..0000000000 --- "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Trabalho Com Animações -slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes -translation_of: Tools/Page_Inspector/How_to/Work_with_animations ---- -
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

- - - -

Animation inspector

- -
-

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

-
- -

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

- -

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

- -

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

- -

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

- -

These animations are made using the Web Animations API.

- -

Let's use the animation inspector to see what's going on in this example.

- -
    -
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. -
  2. Make sure the selected element is the <div class="channel">
    3. -
  3. Switch over to the "Animations" tab
    4. -
  4. Play the animation
    5. -
- -

{{EmbedYouTube("OYkFARSgQB8")}}

- -

Let's take a closer look at the contents of the animation inspector here:

- -

- -

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

- -

Animation bars

- -

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

- - - -

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

- -

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

- -

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

- -

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

- - - -

- -

Information about the animated element

- -

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

- -

{{EmbedYouTube("AvICwiWpYiE")}}

- -

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

- -

Animation details

- -

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

- -

- -

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

- -

- -

This is essentially a visual representation of the animation's keyframes:

- -
var iconKeyframeSet = [
-  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
-  {                          filter: 'grayscale(100%)', offset: 0.333 },
-  { transform: 'scale(1.5)',                            offset: 0.666 },
-  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
-];
- -

Application to the example

- -

Applying all this to our example, we can see that:

- - - -

Further information about animation compositing

- -

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

- - - -

- -

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

- - - -

- -

Animation playback

- -

At the top of the animation inspector:

- - - -

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

- -

{{EmbedYouTube("Xo6rUf0kGyM")}}

- -

Edit @keyframes

- -

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

- -

{{EmbedYouTube("mDHtLK88ZW4")}}

- -

Edit timing functions

- -

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

- -

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

- -

{{EmbedYouTube("GW5-R2ewaqA")}}

- -

This feature uses open source code from Lea Verou’s cubic-bezier.com.

- -

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

- -

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html b/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..8d2d788d50 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,175 @@ +--- +title: Trabalho Com Animações +slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

+ + + +

Animation inspector

+ +
+

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

+
+ +

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

Let's use the animation inspector to see what's going on in this example.

+ +
    +
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. +
  2. Make sure the selected element is the <div class="channel">
    3. +
  3. Switch over to the "Animations" tab
    4. +
  4. Play the animation
    5. +
+ +

{{EmbedYouTube("OYkFARSgQB8")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ + + +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

{{EmbedYouTube("AvICwiWpYiE")}}

+ +

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ + + +

Further information about animation compositing

+ +

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ + + +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

+ + + +

+ +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

+ +

{{EmbedYouTube("Xo6rUf0kGyM")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/pt-br/tools/performance/index.html b/files/pt-br/tools/performance/index.html new file mode 100644 index 0000000000..880187e7e2 --- /dev/null +++ b/files/pt-br/tools/performance/index.html @@ -0,0 +1,380 @@ +--- +title: Performance +slug: Tools/atuação +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+

Esta ferramenta é nova no Firefox 34.

+ +

As colunas no perfil de amostragem foram expandidos e renomeado no Firefox 35: esta página descreve os novos nomes das colunas.

+
+ +

A ferramenta de desempenho é o substituto para o perfil de amostragem JavaScript. Ele inclui uma versão atualizada do perfil de amostragem, mas acrescenta um cronograma taxa de quadros para ajudar a avaliar a capacidade de resposta. Temos a intenção de adicionar mais recursos em versões futuras.

+ +

Abrindo a ferramenta de desempenho

+ +

Você pode iniciar a ferramenta de desempenho, selecionando "Performance", no menu "Web Developer". Você encontrará o menu "Web Developer" sob o menu "Ferramentas" no Linux e OS X, e diretamente sob o menu "Firefox" no Windows. Alternativamente, Shift + F5 irá abrir a ferramenta.

+ +

+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

A criação de perfis

+
+
+ +

Para começar a gravar um novo perfil, clique no ícone do cronômetro. Clique novamente para terminar a gravação. O perfil será imediatamente aberto. Você pode salvar o perfil como um arquivo JSON e importação salva perfis. A barra lateral à esquerda permite que você alterne entre vários perfis abertos.

+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

Análise de perfis

+
+
+ +
+
+
+
Um perfil é algo como isto:
+
+
+
+ +

+ +

Ele consiste em quatro seções principais camadas horizontalmente:

+ +
    +
  1. +
    +
    +
    um conjunto de migalhas de pão que você pode usar para zoom in e out
    +
    +
    + + +
    +
    +
    +
     
    +
    +
    + +
    um cronograma taxa de quadros
    +
    +
    2. +
  2. +
    +
    +
    um cronograma para a execução de código plataforma
    +
    +
    + a saída detalhada do perfil de amostragem JavaScript
    3. +
    4. +
+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

O cronograma taxa de quadros

+
+
+ +
+
+
+
 
+
+
+ +
O cronograma taxa de quadros dá-lhe uma visão geral de capacidade de resposta do navegador no período coberto pelo perfil.
+
+ +

Um quadro encapsula o trabalho do navegador precisa fazer a fim de pintar em resposta a algum evento. Por exemplo, se movendo o mouse sobre algum elemento página desencadeia alguns JavaScript que muda a aparência do elemento, e que desencadeia um refluxo e um repaint, depois de todo esse trabalho precisa ser concluída nesse quadro. Se demorar muito tempo para o navegador para processar o quadro, em seguida, o navegador irá aparecer sem resposta (janky).

+ +
+
+
+
+
+
+
A ferramenta de desempenho leva um timestamp quando o navegador termina um quadro, e usa isso para manter o controle da taxa de quadros:
+
+
+
+
+
+
+ +

+ +
+
+
+
O eixo x é o tempo durante o período de perfil, e há três anotações: a taxa de quadro de destino (sempre 60 quadros por segundo), a média de frames, ea menor taxa de quadros.
+
+
+
+ +
+
+
+
 
+
+
+ +
+
+
+
+
 
+
+
+ +

Execução de código Platform

+
+
+
+ +
+
+
+
Isto dá-lhe uma visão geral de execução de código no período coberto pelo perfil. Tal como acontece com o cronograma taxa de quadros, o eixo x representa o tempo durante o período de perfis, e as amostras são colocadas para fora como barras verticais na ordem em que foram tiradas, esquerda para a direita:
+
+
+
+ +

A altura de cada barra representa a profundidade da pilha de chamadas neste ponto.

+ +

A ferramenta de desempenho examina a pilha de chamadas e descobre os tipos de coisas o código JavaScript está fazendo, e divide o bar em cores de acordo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NetworkEnvio e processamento de pedidos e respostas de rede
JITCompilação de código JavaScript
GCGarbage collection
Inputs & eventsEventos como de mouse ou eventos de DOM
StylesAnálise de CSS
GraphicsInclue manipulção de reflows e repaints assim como WebGL
StorageNa maioria das vezes é o IndexedDB
GeckoTudo o que não se encaixa em nenhuma das outras categorias
+ +

Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:

+ +

+ +

Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.

+ +
+

Note que essa visão mostra tudo o que a plataforma está fazendo, não apenas o seu próprio código.

+
+ +

Perfil de amostragem JavaScript

+ +

O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, o número de amostras colhidas que executavam uma determinada função corresponde à quantidade de tempo que o navegador está gastando para executá-la, assim é possível identificar gargalos em seu código.
+
+ Por exemplo, considere um programa como este:

+ +
function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                // -> A (from the top level)
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;                 // -> B (from doSomething())
+}
+
+function logTheValue(x) {
+                            // -> C (from doSomething())
+                            // -> D (from doSomething())
+                            // -> E (from the top level)
+ console.log(x);
+}
+
+doSomething();
+
+logTheValue(6);
+ +

Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.

+ +

Four are taken from inside doSomething(). Of those, A is directly inside doSomething(). B is inside getTheValue(), and C and D are inside logTheValue(). Finally, the program makes a call to logTheValue() from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:

+ +
Sample A: doSomething()
+Sample B: doSomething() > getTheValue()
+Sample C: doSomething() > logTheValue()
+Sample D: doSomething() > logTheValue()
+Sample E: logTheValue()
+ +

This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that logTheValue() is the bottleneck in our code.

+ +

Profile structure

+ +

The sampling profiler's details pane looks something like this:It presents the samples collected as a table.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Samples +

The number of samples that were taken in which the corresponding "Function" appeared in the call stack. For example, given the profiling example above, the corresponding "Samples" and "Functions" columns would look like:

+ + 
+4  doSomething()
+2  > logTheValue()
+1  > getTheValue()
+1  logTheValue()
+ +

Note that logTheValue() appears twice, because it's called from two different places.

+
FunctionThis includes the function name, source file, line number and domain that served the file. Clicking on the file name takes you to that file in the Debugger.
Total CostA direct translation of the "Samples" column into a percentage.
Self Cost +

The "Samples" column includes not only samples that were taken while the JavaScript engine was executing this function, but also samples taken while executing functions called by this function.

+ +

For example, in the example above we record 4 samples for doSomething(), but 3 of those samples were taken while the JavaScript engine was executing functions called by doSomething().

+ +

"Self Cost" is the number of samples taken while the JavaScript engine was actually executing this function, translated into a percentage. In the example above, the "Self Cost" for doSomething() is 20% (1 sample out of 5 in total was taken while actually executing the function).

+
Total Time +

A statistical estimate of the amount of time spent inside the function, given the number of samples that were taken in it.

+ +

This value is derived from "Samples" but is not a direct translation, because we don't always take samples at exactly the right time, so we attempt to correct for this irregularity.

+
Self Time +

A statistical estimate of the amount of time spent executing the function, exclusive of any functions called by this function.

+ +

Just as "Total Time" is not a direct translation of  "Samples", so "Self Time" is not a direct translation of "Self Cost".

+
+ +

For a deeper look into the way the sampling profiler presents data, see this walkthrough of a profile.

+ +

Inverting the call tree

+ +
+

New in Firefox 36

+
+ +

By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:

+ +
4  doSomething()
+2  > logTheValue()
+1  > getTheValue()
+1  logTheValue()
+ +

This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.

+ +

From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:

+ + + +

This is usually a more effective way to highlight where your code is spending its time.

+ +

Zooming in

+ +

Clicking on a row highlights all the samples in the timeline view in which this function appears:If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:
+

+ +

Note that this also zooms in on the section of the profile in which these samples were taken.

+ +

Zooming in

+ +

If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:

+ + + +

Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:

+ +

You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar:

+ +

+ +

 

+ +

 

diff --git a/files/pt-br/tools/remote_debugging/index.html b/files/pt-br/tools/remote_debugging/index.html new file mode 100644 index 0000000000..6359eededd --- /dev/null +++ b/files/pt-br/tools/remote_debugging/index.html @@ -0,0 +1,31 @@ +--- +title: Depuração Remota +slug: Tools/Depuração_Remota +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

Você pode usar as ferramentas de desenvolvedor do Firefox, no seu desktop, para depurar remotamente o código em execução: em um processo diferente no mesmo dispositivo, ou em um dispositivo completamente diferente. Para fazer isso, use o Firefox para atribuir a Caixa de Ferramentas ao processo remoto, e, então, a Caixa de Ferramentas será iniciada em sua própria janela. Neste momento terão as seguintes ferramentas de suporte à depuração remota:

+ + + +

Firefox para Android

+ +

Depurando Android remotamente descreve como conectar ao Firefox desktop um dispositivo Android pelo USB.

+ +

Firefox para Metro

+ +

Depurando Metro remotamente descreve como usar Firefox desktop para depurar código em execução no Windows 8 (Estilo Metro).

+ +

Firefox OS

+ +

Usando App Manager inclui instruções para conectar as ferramentas de desenvolvimento do Firefox ao simulador Firefox OS ou a um dispositivo Firefox OS.

+ +

Thunderbird

+ +

Depurando remotamente Thunderbird explica como uma combinação de Firefox e Thunderbird pode ser usada para depurar código em execução no Thunderbird.

diff --git a/files/pt-br/tools/responsive_design_mode/index.html b/files/pt-br/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..a5b6935fd3 --- /dev/null +++ b/files/pt-br/tools/responsive_design_mode/index.html @@ -0,0 +1,121 @@ +--- +title: Modo Design Adaptável +slug: Tools/Modo_Design_Adaptavel +tags: + - Desenvolvimento Web + - Design + - Design Adaptável + - Design Responsivo + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox + - Guia(2) + - Guide + - Guía + - 'I10n:priority' + - Responsive Design + - Tools +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +
+
Designs Responsivos se adaptam a diferentes tamanhos de tela para fornecer uma apresentação que seja adequada para diferentes tipos de dispositivos, como telefones celulares ou tablets. O Modo de Design Adaptável tornar mais fácil de ver como seu site ou aplicativo web vai olhar para diferentes tamanhos de tela.
+
+ +

{{EmbedYouTube("LBcE72sG2s8")}}

+ +
+
A imagem abaixo mostra uma página na versão móvel da Wikipedia visto com uma área de 320 por 480 de conteúdo.
+
+ +

+ +

O Modo de Design Adaptável é conveniente porque você pode rapidamente e precisamente alterar o tamanho da área de conteúdo.
+
+ Claro, você pode simplesmente redimensionar a janela do navegador: mas diminuir a janela do navegador torna menor todas as suas outras abas menores também, e pode fazer a interface do navegador ficar muito mais difícil de usar.
+
+ Enquanto o Modo de Design Adaptável estiver ativado, você pode continuar a navegação, como faria normalmente na área de conteúdo redimensionada.

+ +

Ativando e Desativando

+ +

Existem três maneiras de ativar o Modo de Design Adaptável:

+ + + +

e três maneiras de retirar o Modo Design Adaptável:

+ + + +

Redimensionamento

+ +

Você pode redimensionar a área de contéudo de duas maneiras:

+ + + +

Se você redimensionar usando clique-e-arraste você pode manter pressionada a tecla Control (Cmd no Max OS X) para abrandar a velocidade com que a área é redimensionado. Isto faz com que seja mais fácil para ajustar o tamanho precisamente.

+ +
+

Controles do Modo Design Adaptável

+ +

Na parte superior da janela em que o Modo Design Adaptável exibe a página, existem cinco controles:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Close (Fechar)Fechar Modo Design Adaptável e retornar à navegação normal
+

Select size (Selecionar o tamanho)

+ 		+
+
Escolher entre uma série de largura predefinida x combinações de altura, ou definir o seu próprio.
+ + +
Firefox 33 em diante, os números exibidos aqui são editáveis diretamente, assim você pode facilmente definir dimensões personalizadas.
+
+
Portrait/Landscape (Retrato/Paisagem) +
+
Alterne a tela entre visualização retrato e paisagem.
+
+
+

Simulate touch events (Simular eventos de toque)

+ 		+
+
Ativar/desativar simulação de eventos de toque: enquanto a simulação de eventos de toque está habilitada, eventos de mouse são traduzidos em eventos de toque.
+
+
+

Take screenshot (Captura de Tela)

+ 		Tira uma captura de tela da área de conteúdo. +
Capturas de Tela são salvas para o local de download padrão do Firefox.
+
+
diff --git a/files/pt-br/tools/simulador_firefox_os_1.1/index.html b/files/pt-br/tools/simulador_firefox_os_1.1/index.html deleted file mode 100644 index 8b710a1cea..0000000000 --- a/files/pt-br/tools/simulador_firefox_os_1.1/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Simulador Firefox OS 1.1 -slug: Tools/Simulador_Firefox_OS_1.1 -tags: - - Ferramentas - - Firefox OS - - Guia(2) - - Guía -translation_of: Tools/Firefox_OS_1.1_Simulator ---- -
{{ToolsSidebar}}
-
-
-

Esta página descreve o "velho" Firefox OS Simulator. Você deve apenas usar se você desenvolve apps para Firefox 1.1, e que só pode ser instalado no Firefox 24 ou Firefox 25.

- -

Se você desenvolve apps para Firefox OS 1.2 ou superior, invés disso você precisa usar o App Manager.

- -

Se você precisar de ajuda, tente perguntar na lista ou em dev-developer-tools mailing list ou em #devtools on irc.mozilla.org.

-
- -

Resumo

- -

O complemento Firefox OS Simulator é uma ferramenta que permite você testar e depurar seu aplicativo Firefox OS no seu desktop. O ciclo de codificar-testar-depurar é muito mais rápido com o simulador do que com um dispositivo real, e claro, você não precisa de um dispositivo real para usar.

- -

Essencialmente, o complemento Simulador consiste em:

- -
    -
  • o Simulador: inclui o Firefox OS desktop client, que é uma versão das camadas superiores do Firefox OS que funciona em seu desktop. O Simulador também inclui alguns recursos adicionais de emulação que não estão nas compilações padrões do Firefox OS para desktop.
    • -
  • o Painel de Instrumentos: uma ferramenta embarcado pelo Firefox que permite iniciar e parar o Simulador e instalar, desinstalar, e depurar aplicativos rodando nele. O Painel de Instrumentos também lhe ajuda a subir(?) aplicativos para um dispositivo real, e checar os manifests do aplicativo para problemas comuns.
    • -
- -

O screenshot abaixo mostra uma sessão de depuração usando o Simulador.

- -

The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

- -

- -

This guide covers the following topics:

- - - -
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
- -

Installing the Simulator add-on

- -

The Simulator is packaged and distributed as a Firefox add-on. To install it:

- -
    -
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
    2. -
  2. Click "Add to Firefox".
    3. -
  3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
    4. -
- -

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
-
- Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.

- -

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

- -


- The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

- -

Adding, removing and refreshing apps

- -

Adding apps

- -

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
-
- To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.
-
- When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

- -

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

- -

Managing apps

- -

Once you have added an app, it will appear in the Manager's list of installed apps:
-
- Each entry gives us the following information about the app:

- -
    -
  • its name, taken from the manifest
    • -
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
    • -
  • a link to its manifest file
    • -
  • the result of manifest validation
    • -
- -

It also gives us four commands:

- -
    -
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.
    • -
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
    • -
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
    • -
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
    • -
- -
-

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

-
- -

Manifest validation

- -

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

- -
    -
  • manifest errors: problems that will prevent your app from installing or running
    • -
  • manifest warnings: problems that may prevent your app from working properly
    • -
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
    • -
- -

It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.

- -

Manifest errors

- -

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

- -
    -
  • the manifest does not include the mandatory "name" field
    • -
  • the manifest is not valid JSON
    • -
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
    • -
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
    • -
- -

Here's the result of trying to add a manifest file with a missing "name":
-

- -

Manifest warnings

- -

The Dashboard will report the following manifest issues as warnings:

- -
    -
  • missing icons
    • -
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
    • -
  • the type field is unrecognized
    • -
  • the manifest requests a permission that is unrecognized
    • -
  • the manifest requests a permission which will be denied
    • -
  • the manifest requests a permission for which access could not be determined
    • -
- -

Simulator-specific warnings

- -

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

- -
    -
  • the type field is "certified", but the Simulator does not yet fully support certified apps
    • -
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
    • -
- -

Running the Simulator

- -

There are two different ways the Simulator may be started:

- -
    -
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
    • -
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
    • -
- -

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
-
- The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

- -

- -

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

- -

- -

Simulator toolbar

- -

In the bottom toolbar, from left to right, there are the Home button, the Screen Rotation button, and the Geolocation button.

- -
    -
  • The Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).
    • -
  • The Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
    • -
  • The Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the Geolocation API.
    • -
- -

- -

Simulator menubar

- -

In the top menubar, you can access some useful commands to make development more efficient:

- -

- -
    -
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
    • -
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
    • -
- -

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

- -
    -
  • make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)
    • -
  • type the keyboard shortcut to refresh the app running in the Simulator
    • -
- -
-

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

- -
    -
  • -

    localStorage / sessionStorage

    -
    • -
  • -

    cookies

    -
    • -
  • -

    indexedDB

    -
    • -
  • -

    appCache

    -
    • -
-
- -

Attaching developer tools

- -

You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler, and the Network Monitor, but we're working on adding support for more developer tools.

- -
-

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

-
- -

To attach developer tools to the Simulator, click the "Connect" button for an app:

- -

- -

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

- -

- -

Web Console

- -

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

- -

Debugger

- -

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

- -

Style Editor

- -

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

- -

Profiler

- -

Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

- -

Network Monitor

- -

Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

- -

Receipts

- -

If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

- -

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

- -

- -

Push to device

- -

If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.

- -

Connecting a device

- -

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

- -

Pushing apps to the device

- -

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

- -

- -

Click "Push", and the app will be installed on the Firefox OS device.

- -
-

Manual Steps:

- -
    -
  • -

    Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.

    -
    • -
  • -

    If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.

    -
    • -
-
- -

Firefox OS Device Connection Confirmation

- -

On every device reboot, the first "Push" request needs to be confirmed on the device:

- -

- -

Troubleshooting on Linux

- -

If you are unable to connect your device after creating udev rules, please see this bug.

- -

Limitations of the Simulator

- -

Note that the Firefox OS Simulator isn't a perfect simulation.

- -

Hardware limitations

- -

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

- -

Audio/video codecs

- -

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

- -
    -
  • MP3
    • -
  • AAC
    • -
  • H.264 (MP4)
    • -
  • WebM
    • -
- -

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

- -

Unsupported APIs

- -

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

- - - -

Getting help

- -

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

- -

How to enable verbose logging

- -

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

-
-
- -
-

 

-
- -

 

diff --git a/files/pt-br/tools/storage_inspector/index.html b/files/pt-br/tools/storage_inspector/index.html new file mode 100644 index 0000000000..82215530a4 --- /dev/null +++ b/files/pt-br/tools/storage_inspector/index.html @@ -0,0 +1,137 @@ +--- +title: Inspetor de Armazenamento +slug: Tools/Inspetor_de_Armazenamento +tags: + - Armazenamento + - Armazenamento Local + - Ferramentas + - Guía + - Sidebar + - ferramentas do desenvolvedor + - inspetor de armazenamento + - seção +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +
+

O Inspetor de Armazenamento é novo no Firefox 34.

+ +

Inspetor de Armazenamento vem desabilitado por padrão. Habilite-o nas Configurações de Ferramentas do Desenvolvedor.

+
+ +

O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:

+ + + +

Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma visão read-only do armazenamento. Mas estamos trabalhando para permitir a você editar o conteúdo do armazenamento em futuros lançamentos.

+ +

Abrindo o Inspetor de Armazenamento

+ +

Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.

+ +

A  Caixa de Ferramentas vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.

+ +

+ +

Interface de Usuário do Inspetor de Armazenamento

+ +

A UI do Inspetor de Armazenamento é dividida em três componentes principais:

+ + + +

+ +

Árvore de armazenamento

+ +

A árvore de armazenamento lista todos os tipos de armazenamentos que o Inspetor de Armazenamento pode inspecionar. Para cada tipo, ele possui uma lista de todas as possíveis origens disponíveis. Uma origem é um domínio ou um hostname para diferentes tipos de armazenamento. Para cookies, o protocolo não diferencia a origem. Para indexedDB ou armazenamento local uma origem é uma combinação de protocolo + hostname. Por exemplo, "http://mozilla.org" e "https://mozilla.org" são duas origens diferentes então itens de armazenamento local não podem ser compartilhados entre eles.

+ +

+ +

Enquanto cookies, armazenamento local e itens de armazenamento de sessão são diretamente associados a uma origem, para indexedDB a hierarquia tem mais níveis. Todos os itens de indexedDB são associados com um objeto de armazenamento que é então associado a um banco de dados, e finalmente um banco de dados é associado a uma origem.

+ +

Você pode clicar em cada item da árvore para expandir ou contrair seus filhos. A árvore funciona em tempo real, então se um novo objeto for adicionado (adicionando um iframe, por exemplo), ele vai ser adicionado para cada tipo de armazenamento automaticamente. Clicar nos itens da árvore vai mudar os dados de na tabela à direita. Por exemplo, clicar em uma origem que é uma filha do tipo armazemento de Cookies  mostrará todos os cookies pertencentes àquele domínio.

+ +

Widget tabela

+ +

O widget tabela é um local onde todos os itens correspondentes ao item da árvore selecionada (seja uma origem, ou banco de dados) são listados. Dependendo do tipo de armazenamento  e do item da árvore, o número de colunas pode variar.

+ +

Todas as colunas no Widget Tabela são redimencionáveis e podem ser ocultados via menu de contexto no cabeçalho da tabela até que apenas duas colunas estejam visíveis.

+ +

+ +

Cookies

+ +

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

+ + + +

Local storage / Session storage

+ +

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

+ +

IndexedDB origin

+ +

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

+ + + +

IndexedDB Database

+ +

When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:

+ + + +

+ +

IndexedDB object store

+ +

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

+ + + +

Quando você seleciona qualquer linha na tabela de ferramentas de armazenamento, a sidebar é mostrada com detalhes sobre a linha selecionada. Se um cookie é selecionado, a sidebar listará todos os detalhes sobre o cookie selecionado.

+ +

A sidebar pode analisar o valor do cookie, um ítem do armazenamento local ou um ítem do IndexedDB e covertê-lo em um objeto significante ao invés de apenas uma string. Por exemplo, um JSON convertido como '{"foo": "bar"}' é mostrado como a origem JSON {foo: "bar"}, o valor da chave separado como 1~2~3~4 é mostrado como um array [1, 2, 3, 4]. Abaixo há algumas telas mostrando exemplos de diferentes tipos de valores analisados:

+ +

+ +

Um JSON convertido em string sendo mostrado como o JSON original na seção parsed value da sidebar

+ +

+ +

Uma string contendo um par chave-valor sendo mostrada como JSON na seção parsed value da sidebar

+ +

+ +

Uma string contendo chave e valor separados sendo mostrada como um Array na seção parsed value da sidebar

diff --git a/files/pt-br/tools/style_editor/index.html b/files/pt-br/tools/style_editor/index.html new file mode 100644 index 0000000000..903428edc7 --- /dev/null +++ b/files/pt-br/tools/style_editor/index.html @@ -0,0 +1,88 @@ +--- +title: Editor de Estilos +slug: Tools/Editor_de_Estilos +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}

O Editor de Estilos permite que você:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A Caixa de Ferramentas aparecerá na parte de baixo da janela do navegador, com o Editor de Estilos ativado:

+ +

+ +

Na esquerda (ou no topo, se sua janela estiver muito estreita) há uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) está a fonte para a folha de estilo que você selecionou no painel de folhas de estilo.

+ +

O painel de folha de estilos

+ +

O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estão sendo usadas no documento atual. Você pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. Você pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botão Salvar que está no canto inferior direito de cada lista de folha de estilos.

+ +

O painel editor

+ +

Na direita fica o painel editor. Aqui é onde o código da folha de estilo seleciona fica disponível para você ler e editar. Quaisquer alterações que você faz são aplicadas na página em tempo real. Isso faz com que fique realmente fácil experimentar, revisar e testar mudanças na aparença de sua página. Uma vez que você estiver satisfeito com suas mudanças, você pode salver uma cópia localmente clicando no botão Salvar que fica no painel de folha de estilos.

+ +

O editor provê números de linha e marcação de sintaxe para ajudar a ficar fácil ler seu CSS. Veja Utilizando o Editor de Fonte para documentação do editor em si, incluindo atalhos de teclado úteis.

+ +

O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fácil trabalhar em páginas que foram otimizadas.

+ +

Autocompletar

+ +
+

Autocompletar é novo no Firefox 29.

+
+ +

Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerá uma lista de sugestões.

+ +

Você pode desligar isso em  Configurações do Editor de Estilos.

+ +

Criando e importando folhas de estilos

+ +

Você pode cirar uma nova folha de estilos clicando no botão Novo na barra de ferramentas. Então você pode começar a inserir CSS em um novo editor e ver como os novos estilos são aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.

+ +

Você pode carregar um estilo do disco e aplicá-lo na página clicando no botão Importar.

+ +

Suporte ao mapa de fonte

+ +
+

Suporte ao mapa da fonte de CSS é uma funcionalidade nova no Firefox 29.

+
+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Desenvolvedores web frequentemente criam arquivos CSS usando pré-processadores como Sass, Less, ou Stylus. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se você fizer isso,  ser capaz de ver e editar CSS gerado não é útil, porque o código que você mantém é a sintaxe do pré-processador, não o CSS gerado. Então você precisaria editar o CSS gerado e então manualmente descobrir como reaplicar na fonte original.

+ +

Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agté sua fonte original, então mostrá-la e permitir que você edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.

+ +

Isso significa que se você usa, por exemplo, Sass, então o editor irá mostrá-lo e permitir que você edite arquivos Sass, ao invés do CSS gerado por ele:

+ +

Para isso funcionar, você deve:

+ + + +

Vendo as fontes originais

+ +

Agora, se você marcar "Mostrar fontes originais"  nas Configurações do Editor de Estilos, os links próximos as regras de CSS em ver Regras irão levar as fontes originais no Editor de Estilos.

+ +

Editando fontes originais

+ +

Você pode também editar fontes originais no Editor de Estilos e ver os resultas aplicados na página imediatamente. Para isso funcionar há dois passos extra:

+ +

Primeiro, configure seu pré-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass você pode fazer isso simplesmente passando a opção --watch:

+ +
sass index.scss:index.css --sourcemap --watch
+ +

Em seguida, salve a fonte original no Editor de Estilos clicando no botão Salvar, perto do arquivo para então salvar o arquivo original.

+ +

Agora quando você faz mudanças no arquivo fonte no Editor de Estilos é gerado um novo CSS você pode ver as mudanças em tempo real.

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/pt-br/tools/web_console/opening_the_web_console/index.html b/files/pt-br/tools/web_console/opening_the_web_console/index.html deleted file mode 100644 index ae0c05f78e..0000000000 --- a/files/pt-br/tools/web_console/opening_the_web_console/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Abrindo o Web Console -slug: Tools/Web_Console/Opening_the_Web_Console -tags: - - Ferramentas - - Navegador - - console - - web console -translation_of: Tools/Web_Console/UI_Tour ---- -
{{ToolsSidebar}}
- -

Para abrir o Web Console:

- - - -

As Ferramentas vão aparecer na parte inferior da janela do navegador, com o Web Console ativado (é chamado apenas de "Console" nas Ferramentas):

- -

- -

A interface do console da Web é dividida em três seções horizontais, detalhadas nas seções abaixo.

- -

Barra de ferramentas

- -

A barra de ferramentas na parte superior contém vários recursos:

- -

Lata de lixo: Clique neste ícone para limpar o conteúdo do console.
- Funil: Clique neste ícone para filtrar as mensagens exibidas no console.
- Categorias de filtro: você pode clicar em uma categoria de filtro (como Erros, Avisos, CSS ou XHR) para exibir apenas esses tipos de mensagens.
- Configurações (menu "engrenagem"): novo no Firefox 71, você pode clicar no ícone de engrenagem para acessar o novo menu de configurações, onde é possível ativar e desativar os seguintes recursos:
- Persistir logs: quando ativado, o console não limpa na recarga da página ou no carregamento da nova página.
- Mostrar carimbos de data / hora: quando ativado, os carimbos de hora são mostrados no lado esquerdo de cada linha da mensagem para dizer quando as mensagens foram registradas.
- Agrupar mensagens semelhantes: quando ativado, tipos semelhantes de mensagens são agrupados.

- - - -

Painel de exibição de mensagens

- -

É aqui que as mensagens aparecem, tanto as geradas pelo código na página quanto as geradas pelos comandos inseridos na linha de comandos.

- -

Consulte Mensagens do console para obter mais detalhes sobre o que as mensagens podem conter.

- -

        

- - - - - -

Linha de comando

- -


- A linha de comando começa com colchetes de ângulo duplo (>>). Use-o para inserir expressões JavaScript.

- -

No Firefox 71 em diante, existe um novo ícone de "painel de divisão" no lado direito da linha de comando - clicar nele abrirá o novo modo de várias linhas do console.

diff --git a/files/pt-br/tools/web_console/ui_tour/index.html b/files/pt-br/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..ae0c05f78e --- /dev/null +++ b/files/pt-br/tools/web_console/ui_tour/index.html @@ -0,0 +1,63 @@ +--- +title: Abrindo o Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +tags: + - Ferramentas + - Navegador + - console + - web console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Para abrir o Web Console:

+ + + +

As Ferramentas vão aparecer na parte inferior da janela do navegador, com o Web Console ativado (é chamado apenas de "Console" nas Ferramentas):

+ +

+ +

A interface do console da Web é dividida em três seções horizontais, detalhadas nas seções abaixo.

+ +

Barra de ferramentas

+ +

A barra de ferramentas na parte superior contém vários recursos:

+ +

Lata de lixo: Clique neste ícone para limpar o conteúdo do console.
+ Funil: Clique neste ícone para filtrar as mensagens exibidas no console.
+ Categorias de filtro: você pode clicar em uma categoria de filtro (como Erros, Avisos, CSS ou XHR) para exibir apenas esses tipos de mensagens.
+ Configurações (menu "engrenagem"): novo no Firefox 71, você pode clicar no ícone de engrenagem para acessar o novo menu de configurações, onde é possível ativar e desativar os seguintes recursos:
+ Persistir logs: quando ativado, o console não limpa na recarga da página ou no carregamento da nova página.
+ Mostrar carimbos de data / hora: quando ativado, os carimbos de hora são mostrados no lado esquerdo de cada linha da mensagem para dizer quando as mensagens foram registradas.
+ Agrupar mensagens semelhantes: quando ativado, tipos semelhantes de mensagens são agrupados.

+ + + +

Painel de exibição de mensagens

+ +

É aqui que as mensagens aparecem, tanto as geradas pelo código na página quanto as geradas pelos comandos inseridos na linha de comandos.

+ +

Consulte Mensagens do console para obter mais detalhes sobre o que as mensagens podem conter.

+ +

        

+ + + + + +

Linha de comando

+ +


+ A linha de comando começa com colchetes de ângulo duplo (>>). Use-o para inserir expressões JavaScript.

+ +

No Firefox 71 em diante, existe um novo ícone de "painel de divisão" no lado direito da linha de comando - clicar nele abrirá o novo modo de várias linhas do console.

diff --git a/files/pt-br/using_geolocation/index.html b/files/pt-br/using_geolocation/index.html deleted file mode 100644 index b6799afa16..0000000000 --- a/files/pt-br/using_geolocation/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Usando geolocation -slug: Using_geolocation -tags: - - Geolocation API - - Guia(2) -translation_of: Web/API/Geolocation_API ---- -

A API geolocation permite que o usuário forneça sua localização a aplicativos web se ele desejar. Por questões de privacidade, o usuário é perguntado se permite fornecer informações de localização.

- -

O objeto geolocation

- -

O aplicativo de geolocalização é utilizado através de um objeto filho chamado geolocation localizado dentro do objeto navigator.  Se o objeto existe, os serviços de geolocalização estarão disponíveis. Você pode adicionalmente testar a presença da geolocalização:

- -
if ("geolocation" in navigator) {
-  /* geolocation is available */
-} else {
-  alert("I'm sorry, but geolocation services are not supported by your browser.");
-}
-
- -

{{ gecko_minversion_header("1.9.2") }}

- -

Ao iniciar no Gecko 1.9.2 (Firefox 3.6), add-ons podem obter o objeto de geolocalização obtendo a referência para o serviço de geolocaliazação como se ve a seguir:

- -
var geolocation = Components.classes["@mozilla.org/geolocation;1"]
-                            .getService(Components.interfaces.nsIDOMGeoGeolocation);
-
- -

Obtendo a posição atual

- -

Para obter a localização atual do usuário, você pode utiliza o método getCurrentPosition().  Isto inicia uma requisição assíncrona para identificar a posição do usuário, e consulta o hardware de localização para conseguir informações atualizadas. Quando a posição é determinada, uma rotina específica de retorno é executada. Você pode opcionalmente gerar uma segunda rotina de retorno se um erro ocorrer.  Um terceiro, e opcional, parâmetro é a interface "opções" onde você pode configurar o tempo máximo da posição recebida e o tempo a se esperar por uma solicitação.

- -

Use getCurrentPosition() se você deseja uma única posição rapidamente, independente da precisão.  Dispositivos com GPS, por exemplo, podem levar um minuto ou mais para conseguir a localização, e portanto dados menos precisos (localização do IP location ou rede wifi) podem retornar do método getCurrentPosition().

- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

O exemplo acima irá fazer a função the do_something() executar quando a localização for obtida.

- -

Verificando a posição atual

- -
Se os dados de posição mudam (sejam pelo movimento do dispositivo ou se uma informação mais precisa for recebida), se pode configurar um retorno que é feito com esta informação de posição atual. Isto é feito usando a função watchPosition(), a qual tem os mesmos parâmetros de entrada da função getCurrentPosition(). Seu retorno é chamada múltiplas vezes, permitindo que o navegador ou atualize sua posição enquanto você se move, ou forneça uma localização mais precisa enquanto diferentes técnicas são usadas para localizar sua posição. O erro do retorno, o qual é opcional assim como no getCurrentPosition(), é chamado uma única vez, se nenhum resultado válido retornar.
- -

O watchPosition() pode ser usado sem que não haja a chamada inicial de getCurrentPosition().

- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-);
- -

O método watchPosition() retorna um número de ID que pode ser usado para identificar a posição solicitada; você pode usar esse valor em conjunto com o método clearWatch(), parando a localização do usuário.

- -
navigator.geolocation.clearWatch(watchID);
-
-
- -

watchPosition()retorna um callback sucesso e erro (como getCurrentPosition) e um objeto positionObjects, que pode ter três propriedades:

- - - -

Segue uma chamada para watchPosition:

- -
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});
- -

Exemplo de watchPosition em uso: thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition
- 

- -

Imprimindo uma posição

- -

A localização do usuário é impressa usando o objeto Position, que tem os seguintes campos:

- -
-
timestamp
-
Momento em que a leitura foi feita, como DOMTimeStamp.
-
coords
-
Objecto nsIDOMGeoPositionCoords indicando a localização.
-
address {{ gecko_minversion_inline("1.9.2") }} {{obsolete_inline("14.0")}}
-
{{ interface("nsIDOMGeoPositionAddress") }} objeto especificando o endereço correspondente, se disponível.
-
- -


- Manipulação de erros

- -

Retornando o callback de erro, se fornecido, chamar getCurrentPosition() e watchPosition(), tem a seguinte assinatura:

- -
function errorCallback(PositionError error);
-
- -

O PositionError tem a seguinte estrutura de campos:

- -
-
code
-
Um código de erro numérico dos seguintes procedimentos:
-
UNKNOWN_ERROR (valor numérico 0)
-
O processo de aquisição de localização falhou devido a um erro de qualquer outro código nesta interface.
-
PERMISSION_DENIED (valor numérico 1)
-
O processo de aquisição da localização falhou porque a origem aplicativo não tem permissão para usar a API de Geolocalização.
-
POSITION_UNAVAILABLE (valor numérico 2)
-
A posição do dispositivo não pôde ser determinada. Um ou mais provedores de localização utilizados no processo de aquisição local gerou um erro interno que falou o processo completamente.
-
TIMEOUT (numeric value 3)
-
O comprimento máximo de tempo especificado.
-
message
-
Uma mensagem de erro legível para uso em registros e depuração, mas não para exibir para o usuário.
-
- -

Compatibilidade do navegador

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorSuporte BásicoGeolocation Level 2
Internet ExplorerIE9 RC---
Firefox (Gecko)3.5 (1.9.1)---
Opera10.60---
Safari | Chrome | WebKit5 | 5 | 533---
- -

Solicitando permissão

- -

Qualquer add-on hospedado em addons.mozilla.org, que faz uso de dados de geolocalização, deve solicitar antes uma permissão. A função a seguir vai solicitar a permissão de um modo semelhante ao prompt. A resposta do usuário será salva no parâmetro pref. A função fornecida no parâmetro de callback será chamado com um valor booleano que indica a resposta do usuário. Se for true, o add-on poderá retornar dados de geolocalização.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Share Location",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Always Share",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Never Share",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on wants to know your location.",
-       function callback(allowed) { alert(allowed); });
-
- -

Veja também

- - - -
{{ HTML5ArticleTOC() }}
diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..df43b575a6 --- /dev/null +++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,234 @@ +--- +title: Visão geral da acessibilidade nas aplicações web e widgets +slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Acessibilidade + - Aplicativos Web + - CSS + - DHTML + - Guía + - HTML+ARIA + - Navegação+Teclado + - WAI-ARA + - Widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos widgets e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.

+ +

O problema

+ +

A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de widgets que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (built-in tags) que descrevam estes tipos de widgets semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como <div> e <span>. Embora isto resulte em um widget que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto ARIA entra.

+ +

Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.

+ +
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

As definições para WAI-ARIA Accessible Rich Internet Applications (Aplicações Ricas para uma Internete Acessível), da W3C -  Web Accessibility Initiative (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus widgets de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela web, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos widgets conhecidas.

+ +

A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os widgets que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses widgets - se podem ser arrastados (draggable), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.

+ +

Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na web.

+ +

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

+ +
<!-- Now *these* are Tabs! -->
+<!-- We've added role attributes to describe the tab list and each tab. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
+  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para widget, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.

+ +

Mudanças na apresentação

+ +

Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.

+ +

Mudanças de estado

+ +

O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um widget. Os exemplos abrangem (mas não são apenas estes, com certeza( :

+ + + +

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

+ +

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).

+ +

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.

+ +

Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.

+ +

Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.

+ +

Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

+ +

Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Alterações visuais

+ +

Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).

+ +

O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.

+ +

Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.

+ +

Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is optional</div>
+</div>
+
+ +

A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.

+ +

Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+
+ +

O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.

+ +

Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Mudança de Atributo (Role)

+ +
Em construção
+ +

O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à {{ HTMLElement("ul") }} deve ser dada uma role de menubar e cada {{ HTMLElement("li") }} deve ter uma role de menuitem.

+ +

O papel (role) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (role) nova.

+ +

Por exemplo, considere um widget de edição "inline": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

+ +

Não faça isso. Em substituição, implemente o modo "visualizar" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma role de button e o modo « edit » utilizando um elemento texto {{ HTMLElement("input") }}.

+ +

Mudanças assíncronas de conteúdo

+ +
Em construção. Veja, também, Regiões Dinâmicas
+ + + +

Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam widgets personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação web, ou de um widget, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por widgets similares, de ambiente, tirando plena vantagem das teclas Tab, Entra, Barra de Espaço e Setas.

+ +

Tradicionalmente, a navegação pelo teclado na web tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a web, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.

+ +

Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação web:

+ + + +

Assim, para o exemplo de widget de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "Tab" e "Shift+Tab" ( a <ol> na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos <li> ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "Entra", ou a "barra de espaço". Um  tutorial abrangente, para a criação de widgets, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript Keyboard-navigable JavaScript widgets (JavaScript para widgets navegáveis pelo teclado).

+ +

Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) DHTML style guide (guia de estilos da HTML Dinâmica) está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de widget suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito, ARIA Best Practices, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de widgets.

+ +

Veja, também

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html new file mode 100644 index 0000000000..73b9605ef1 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html @@ -0,0 +1,35 @@ +--- +title: Guia para implementar o leitor de tela ARIA +slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +--- +

Regiões Ativas

+ +

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

+ +

Interpretando a marcação de região ativa WAI-ARIA

+ +
    +
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. +
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. +
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. +
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. +
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. +
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. +
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. +
+ +

Ideias para Configurações e Heurística

+ +
    +
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. +
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. +
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. +
+ +

Detalhes para Processamento via APIs Platform Acessibility

+ +

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html deleted file mode 100644 index cd7cb90bb9..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Usando o atributo aria-labelledby -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby -tags: - - ARIA - - Acessibilidade - - PrecisaDeConteúdo -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute ---- -

Descrição

- -

Essa técnica demonstra como usar o atributo aria-labelledby.

- -

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

- -

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

- -

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

- -

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

- -

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

- -

Value

- -

Uma lista de IDs do elemento separada por espaços

- -

Possíveis efeitos em user agents e tecnologias assistivas 

- -

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

- -
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
- -

Exemplos

- -

Exemplo 1: Múltiplas Labels

- -

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

- -
<div id="billing">Endereço de Cobrança</div>
-
-<div>
-    <div id="name">Nome</div>
-    <input type="text" aria-labelledby="name billing"/>
-</div>
-<div>
-    <div id="address">Endereço</div>
-    <input type="text" aria-labelledby="address billing"/>
-</div>
-
- -

Exemplo 2: Associando Cabeçalhos com Regiões

- -

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

- -
<div role="main" aria-labelledby="foo">
-   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
-   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
-</div>
-
- -

Exemplo 3: Radio Groups

- -

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

- -
<div id="radio_label">Meu radio label</div>
-<ul role="radiogroup" aria-labelledby="radio_label">
-    <li role="radio">Item #1</li>
-    <li role="radio">Item #2</li>
-    <li role="radio">Item #3</li>
-</ul>
-
- -

Exemplo 4: Dialog Label

- -

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

- -
<div role="dialog" aria-labelledby="dialogheader">
-    <h2 id="dialogheader">Escolha um Arquivo</h2>
-    ... Conteúdo do Dialog
-</div>
-
- -

Exemplo 5: Definição Inline

- -

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

- -
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
-ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
-</p>
-
- -

Exemplo 6: Definições de Listas

- -

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

- -
<dl>
-    <dt id="anathema">anátema</dt>
-    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
-                                                     e acompanhada por excomunhão</dd>
-    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
-
-    <dt id="homily">homilia</dt>
-    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
-    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
-
-</dl>
-
- -

Exemplo 7: Menus

- -

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

- -
<div role="menubar">
-    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
-    <div role="menu" aria-labelledby="fileMenu">
-        <div role="menuitem">Abrir</div>
-        <div role="menuitem">Salvar</div>
-        <div role="menuitem">Salvar como ...</div>
-        ...
-    </div>
-    ...
-</div>
-
- -

Exemplos Funcionais:

- - - -

Notas 

- -

O mapeamento mais comum de uma - API de acessibilidade -  para um rótulo é a propriedade acessível name

- -

Usado pelas regras ARIA

- -

todos os elementos de markup base

- -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informação de suporte para combinações de produto UA e AT

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html deleted file mode 100644 index e93611b182..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Usando o atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -
-
-

Descrição

- -

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

- -

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

- -

Valor

- -

true ou false (Padrão: false)

- -

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

- -

Os leitores de tela devem anunciar o campo como obrigatório.

- -

Observe que esse atributo não alterará automaticamente a apresentação do campo.

- -
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Um simples formulário

- -

 

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Exemplos de trabalho:

- -

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

- -

Notas 

- -

Usado em ARIA roles

- -
    -
  • Combobox
    • -
  • Gridcell
    • -
  • Listbox
    • -
  • Radiogroup
    • -
  • Spinbutton
    • -
  • Textbox
    • -
  • Tree
    • -
- -

Técnicas relacionadas com ARIA

- - - -

Compatibilidade

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos adicionais

- - -
-
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html deleted file mode 100644 index 18532f5f25..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Usando o slider role -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role ---- -

Descrição

- -

Essa técnica demosntrará como usar o slider role. 

- -

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

- -

Keyboard And Focus

- -

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

- - - - - - - - - - - - - - - - - - - - - - -
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
- -

Possible effects on user agents and assistive technology 

- -

 

- -
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
- -

Examplos

- -

Examplo 1: Escala numérica simples

- -

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

- -
<label for="fader">Volume</label>
-<input type="range"
-  id="fader"
-  min="1"
-  max="100"
-  value="50"
-  step="1"
-  aria-valuemin="1"
-  aria-valuemax="100"
-  aria-valuenow="50"
-  oninput="outputUpdate(value)">
-<output for="fader" id="volume">50</output>
-
- -

The following code snippet allows you to return the output as it is updated by user input:

- -
function outputUpdate(vol) {
-  document.querySelector('#volume').value = vol;
-}
-
- -

Examplo 2: Valores de texto

- -

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

- -
<label for="day-handle">Days</label>
-<div class="day-slider">
-  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
-     aria-valuemin="1"
-     aria-valuemax="7"
-     aria-valuenow="2"
-     aria-valuetext="Monday">
- </div>
-</div>
-
- -

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

- -
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-var updateSlider = function (newValue) {
-    var handle = document.getElementById("day-handle");
-    handle.setAttribute("aria-valuenow", newValue.toString());
-    handle.setAttribute("aria-valuetext", dayNames[newValue]);
-};
-
- -

Working Examples:

- - - -

Notas 

- -

Atributos ARIA usados

- - - - - -

Compatibility

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..25d3222fcd --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,145 @@ +--- +title: Utilizando a função "alerta" +slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role +tags: + - ARIA + - Accessibility + - Acessibilidade + - Alertas + - Avançado + - CSS + - Caixas de aviso + - Configuração role + - Guía + - HTML+ARIA + - NeedsContent + - PrecisaDeConteúdo + - WAI-ARIA + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descrição

+ +
+

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

+
+ +

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

+ + + +

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

+ +

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

+ +

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

+ + + +

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

+ + + +
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Adicionando o atributo (role) no código HTML:

+ +

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
+ +

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

+ +

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+
+ +

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
+
+ +

Exemplo 3: Adicionando a função de alerta a um elemento existente:

+ +

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemplo 4: Construindo um elemento com uma função de alerta visível:

+ +

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

+ +

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
+document.getElementById("expirationWarning").className = "";
+ +

Exemplos de Trabalhos:

+ + + +

Notas:

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

+ +

Recursos Adicionais

+ + + +

 

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..cd7cb90bb9 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,158 @@ +--- +title: Usando o atributo aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby +tags: + - ARIA + - Acessibilidade + - PrecisaDeConteúdo +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Descrição

+ +

Essa técnica demonstra como usar o atributo aria-labelledby.

+ +

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

+ +

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

+ +

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

+ +

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

+ +

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

+ +

Value

+ +

Uma lista de IDs do elemento separada por espaços

+ +

Possíveis efeitos em user agents e tecnologias assistivas 

+ +

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

+ +
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
+ +

Exemplos

+ +

Exemplo 1: Múltiplas Labels

+ +

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

+ +
<div id="billing">Endereço de Cobrança</div>
+
+<div>
+    <div id="name">Nome</div>
+    <input type="text" aria-labelledby="name billing"/>
+</div>
+<div>
+    <div id="address">Endereço</div>
+    <input type="text" aria-labelledby="address billing"/>
+</div>
+
+ +

Exemplo 2: Associando Cabeçalhos com Regiões

+ +

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

+ +
<div role="main" aria-labelledby="foo">
+   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
+   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
+</div>
+
+ +

Exemplo 3: Radio Groups

+ +

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

+ +
<div id="radio_label">Meu radio label</div>
+<ul role="radiogroup" aria-labelledby="radio_label">
+    <li role="radio">Item #1</li>
+    <li role="radio">Item #2</li>
+    <li role="radio">Item #3</li>
+</ul>
+
+ +

Exemplo 4: Dialog Label

+ +

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

+ +
<div role="dialog" aria-labelledby="dialogheader">
+    <h2 id="dialogheader">Escolha um Arquivo</h2>
+    ... Conteúdo do Dialog
+</div>
+
+ +

Exemplo 5: Definição Inline

+ +

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

+ +
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
+ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
+</p>
+
+ +

Exemplo 6: Definições de Listas

+ +

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

+ +
<dl>
+    <dt id="anathema">anátema</dt>
+    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
+                                                     e acompanhada por excomunhão</dd>
+    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
+
+    <dt id="homily">homilia</dt>
+    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
+    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
+
+</dl>
+
+ +

Exemplo 7: Menus

+ +

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

+ +
<div role="menubar">
+    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
+    <div role="menu" aria-labelledby="fileMenu">
+        <div role="menuitem">Abrir</div>
+        <div role="menuitem">Salvar</div>
+        <div role="menuitem">Salvar como ...</div>
+        ...
+    </div>
+    ...
+</div>
+
+ +

Exemplos Funcionais:

+ + + +

Notas 

+ +

O mapeamento mais comum de uma + API de acessibilidade +  para um rótulo é a propriedade acessível name

+ +

Usado pelas regras ARIA

+ +

todos os elementos de markup base

+ +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informação de suporte para combinações de produto UA e AT

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..e93611b182 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,83 @@ +--- +title: Usando o atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +
+
+

Descrição

+ +

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

+ +

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

+ +

Valor

+ +

true ou false (Padrão: false)

+ +

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

+ +

Os leitores de tela devem anunciar o campo como obrigatório.

+ +

Observe que esse atributo não alterará automaticamente a apresentação do campo.

+ +
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Um simples formulário

+ +

 

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Exemplos de trabalho:

+ +

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

+ +

Notas 

+ +

Usado em ARIA roles

+ +
    +
  • Combobox
    • +
  • Gridcell
    • +
  • Listbox
    • +
  • Radiogroup
    • +
  • Spinbutton
    • +
  • Textbox
    • +
  • Tree
    • +
+ +

Técnicas relacionadas com ARIA

+ + + +

Compatibilidade

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos adicionais

+ + +
+
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..18532f5f25 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,125 @@ +--- +title: Usando o slider role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +

Descrição

+ +

Essa técnica demosntrará como usar o slider role. 

+ +

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

+ +

Keyboard And Focus

+ +

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

+ + + + + + + + + + + + + + + + + + + + + + +
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
+ +

Possible effects on user agents and assistive technology 

+ +

 

+ +
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
+ +

Examplos

+ +

Examplo 1: Escala numérica simples

+ +

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

+ +
<label for="fader">Volume</label>
+<input type="range"
+  id="fader"
+  min="1"
+  max="100"
+  value="50"
+  step="1"
+  aria-valuemin="1"
+  aria-valuemax="100"
+  aria-valuenow="50"
+  oninput="outputUpdate(value)">
+<output for="fader" id="volume">50</output>
+
+ +

The following code snippet allows you to return the output as it is updated by user input:

+ +
function outputUpdate(vol) {
+  document.querySelector('#volume').value = vol;
+}
+
+ +

Examplo 2: Valores de texto

+ +

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

+ +
<label for="day-handle">Days</label>
+<div class="day-slider">
+  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
+     aria-valuemin="1"
+     aria-valuemax="7"
+     aria-valuenow="2"
+     aria-valuetext="Monday">
+ </div>
+</div>
+
+ +

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

+ +
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle.setAttribute("aria-valuenow", newValue.toString());
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+
+ +

Working Examples:

+ + + +

Notas 

+ +

Atributos ARIA usados

+ + + + + +

Compatibility

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html deleted file mode 100644 index 25d3222fcd..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Utilizando a função "alerta" -slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role -tags: - - ARIA - - Accessibility - - Acessibilidade - - Alertas - - Avançado - - CSS - - Caixas de aviso - - Configuração role - - Guía - - HTML+ARIA - - NeedsContent - - PrecisaDeConteúdo - - WAI-ARIA - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

Descrição

- -
-

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

-
- -

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

- - - -

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

- -

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

- -

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

- - - -

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

- - - -
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Adicionando o atributo (role) no código HTML:

- -

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
- -

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

- -

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlertText);
-
- -

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
-
- -

Exemplo 3: Adicionando a função de alerta a um elemento existente:

- -

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemplo 4: Construindo um elemento com uma função de alerta visível:

- -

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

- -

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
-document.getElementById("expirationWarning").className = "";
- -

Exemplos de Trabalhos:

- - - -

Notas:

- - - -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

- -

Recursos Adicionais

- - - -

 

diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..722c60d420 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,118 @@ +--- +title: Dicas básicas de form +slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +
+

Form labels

+
+ +

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

+ +

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

+ +

Exempl0 1. Form simples com labels

+ +
<form>
+  <ul>
+    <li>
+      <input id="wine-1" type="checkbox" value="riesling"/>
+      <label for="wine-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="wine-2" type="checkbox" value="weissbergunder"/>
+      <label for="wine-2">Weissbergunder</label>
+    </li>
+    <li>
+      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
+      <label for="wine-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
+      <label for="wine-4">Berg Rottland Riesling</label>
+    </li>
+  </ul>
+</form>
+
+ +

Rotulando com ARIA

+ +

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

+ +

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

+ +

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

+ +
<h3 id="rg1_label">Lunch Options</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Descrevendo com ARIA

+ +

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

+ +

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

+ +

Exemplo 3. Um botão descrito por um elemento separado.

+ +
<button aria-describedby="descriptionRevert">Revert</button>
+<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
+ +

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

+ +

Campos inválidos e obrigatórios

+ +

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

+ + + +

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

+ +

Exemplo 4a. Um form com campos obrigatórios.

+ +
<form>
+  <div>
+    <label for="name">* Name:</label>
+    <input type="text" value="name" id="name" aria-required="true"/>
+  </div>
+  <div>
+    <label for="phone">Phone:</label>
+    <input type="text" value="phone" id="phone" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

Exemplo 4b. Parte de um script que valida a entrada no form.

+ +
var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};
+ +

Fornecendo Mensagens de Erro Úteis

+ +

Leia como usar alertas ARIA para melhorar forms.

+ +
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
+ +

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" "b/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" deleted file mode 100644 index 722c60d420..0000000000 --- "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Dicas básicas de form -slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -
-

Form labels

-
- -

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

- -

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

- -

Exempl0 1. Form simples com labels

- -
<form>
-  <ul>
-    <li>
-      <input id="wine-1" type="checkbox" value="riesling"/>
-      <label for="wine-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="wine-2" type="checkbox" value="weissbergunder"/>
-      <label for="wine-2">Weissbergunder</label>
-    </li>
-    <li>
-      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
-      <label for="wine-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
-      <label for="wine-4">Berg Rottland Riesling</label>
-    </li>
-  </ul>
-</form>
-
- -

Rotulando com ARIA

- -

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

- -

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

- -

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

- -
<h3 id="rg1_label">Lunch Options</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Descrevendo com ARIA

- -

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

- -

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

- -

Exemplo 3. Um botão descrito por um elemento separado.

- -
<button aria-describedby="descriptionRevert">Revert</button>
-<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
- -

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

- -

Campos inválidos e obrigatórios

- -

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

- - - -

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

- -

Exemplo 4a. Um form com campos obrigatórios.

- -
<form>
-  <div>
-    <label for="name">* Name:</label>
-    <input type="text" value="name" id="name" aria-required="true"/>
-  </div>
-  <div>
-    <label for="phone">Phone:</label>
-    <input type="text" value="phone" id="phone" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

Exemplo 4b. Parte de um script que valida a entrada no form.

- -
var validate = function () {
-  var emailElement = document.getElementById(emailFieldId);
-  var valid = emailValid(formData.email); // returns true if valid, false otherwise
-
-  emailElement.setAttribute("aria-invalid", !valid);
-  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
-};
- -

Fornecendo Mensagens de Erro Úteis

- -

Leia como usar alertas ARIA para melhorar forms.

- -
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
- -

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html b/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html deleted file mode 100644 index 73b9605ef1..0000000000 --- a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Guia para implementar o leitor de tela ARIA -slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide ---- -

Regiões Ativas

- -

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

- -

Interpretando a marcação de região ativa WAI-ARIA

- -
    -
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. -
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. -
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. -
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. -
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. -
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. -
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. -
- -

Ideias para Configurações e Heurística

- -
    -
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. -
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. -
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. -
- -

Detalhes para Processamento via APIs Platform Acessibility

- -

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/widgets/overview/index.html b/files/pt-br/web/accessibility/aria/widgets/overview/index.html new file mode 100644 index 0000000000..6e8cb06ae2 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/widgets/overview/index.html @@ -0,0 +1,72 @@ +--- +title: Visão geral +slug: Web/Accessibility/ARIA/widgets/Visão_geral +tags: + - Acessibilidade + - JavaScript + - Landing + - PrecisaAtualizar +translation_of: Web/Accessibility/ARIA/widgets/overview +--- +
Aviso: precisa de atualização
+ +

Introdução 

+ +

Alguns exemplos funcionais e boas práticas na construção de widgets acessíveis aplicando JavaScript.

+ +

Recursos Gerais

+ + + +

Caixa de seleção

+ + + + + + + +

Deslizantes

+ + + +

Abas

+ + + +

Combo-box

+ + + + + + + +

Validação de Formulários

+ + + +

Tabelas

+ + diff --git "a/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" "b/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" deleted file mode 100644 index 6e8cb06ae2..0000000000 --- "a/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Visão geral -slug: Web/Accessibility/ARIA/widgets/Visão_geral -tags: - - Acessibilidade - - JavaScript - - Landing - - PrecisaAtualizar -translation_of: Web/Accessibility/ARIA/widgets/overview ---- -
Aviso: precisa de atualização
- -

Introdução 

- -

Alguns exemplos funcionais e boas práticas na construção de widgets acessíveis aplicando JavaScript.

- -

Recursos Gerais

- - - -

Caixa de seleção

- - - - - - - -

Deslizantes

- - - -

Abas

- - - -

Combo-box

- - - - - - - -

Validação de Formulários

- - - -

Tabelas

- - diff --git a/files/pt-br/web/accessibility/index.html b/files/pt-br/web/accessibility/index.html new file mode 100644 index 0000000000..b494b06163 --- /dev/null +++ b/files/pt-br/web/accessibility/index.html @@ -0,0 +1,52 @@ +--- +title: Acessibilidade +slug: Web/Acessibilidade +tags: + - ARIA + - Acessibilidade + - Avançado + - Desenvolvimento Web + - TA - Tecnologias Assistivas +translation_of: Web/Accessibility +--- +

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

+ +

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

+ +

"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

+ +
+
+

Documentação

+ +
+
Desenvolvimento Web
+
Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.
+
ARIA
+
Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.
+
Desenvolvimento de tecnologias assistivas (TA)
+
Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.
+
Acessibilidade em dispositivos móveis
+
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.
+
+ +

Ver todos os artigos sobre Acessibilidade...

+
+ +
+

Ferramentas para desenvolvedores web

+ + + + + +

Outras páginas úteis

+ + +
+
diff --git a/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..29d407c175 --- /dev/null +++ b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,100 @@ +--- +title: Acessibilidade para plataforma móvel +slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel +tags: + - Acessibilidade + - Firefox OS + - Guías + - Móveis +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +
+

Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.

+
+ +

Cor

+ + + +
+

   Jon Snook escreveu um útil Colour Contrast Checker  que é usado para checar o contraste de cores entre o background e o foreground. De maneira alternativa o Tanaguru Contrast-Finder faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.

+
+ +

Visibilidade

+ + + +

Foco

+ + + +

Textos Equivalentes

+ + + +

Manipulação de Estado

+ + + +

Orientações gerais

+ + + +
+

Tanaguru's automated accessibility testing service fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto tanaguru.org.

+
+ +
+

A versão original desse documento foi escrita por Yura Zenevich.

+
+ +

 

diff --git a/files/pt-br/web/accessibility/understanding_wcag/index.html b/files/pt-br/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..392c1008b7 --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,57 @@ +--- +title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web +slug: Web/Acessibilidade/Entendendo_WCAG +tags: + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).

+ +

O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.

+ +

Os quatro princípios

+ +

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

+ +

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

+ +

O que é o WCAG 2.1?

+ +

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

+ +

WCAG 2.1 includes:

+ + + + + +

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

+ +

O que é acessibilidade? e particulamente o Guia de Acessibilidade e a seção de regras fornecem mais informações relacionadas.

diff --git a/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..905c6d062f --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Keyboard +slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
+ +

Focusable elements should have interactive semantics

+ +

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

+ +
+

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

+
+ +

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

+ +

See also

+ + + +

Avoid using tabindex attribute greater than zero

+ +

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

+ +

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

+ +

See also

+ + + +

Clickable elements must be focusable and should have interactive semantics

+ +

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

+ +

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

+ +

See also

+ + + +

Interactive elements must be able to be activated using a keyboard

+ +

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

+ +

See also

+ + + +

Interactive elements must be focusable

+ +

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

+ +

See also

+ + + +

Focusable element must have focus styling

+ +

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

+ +

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

See also

+ + diff --git a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html b/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html deleted file mode 100644 index 29d407c175..0000000000 --- a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Acessibilidade para plataforma móvel -slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel -tags: - - Acessibilidade - - Firefox OS - - Guías - - Móveis -translation_of: Web/Accessibility/Mobile_accessibility_checklist ---- -
-

Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.

-
- -

Cor

- - - -
-

   Jon Snook escreveu um útil Colour Contrast Checker  que é usado para checar o contraste de cores entre o background e o foreground. De maneira alternativa o Tanaguru Contrast-Finder faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.

-
- -

Visibilidade

- - - -

Foco

- - - -

Textos Equivalentes

- - - -

Manipulação de Estado

- - - -

Orientações gerais

- - - -
-

Tanaguru's automated accessibility testing service fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto tanaguru.org.

-
- -
-

A versão original desse documento foi escrita por Yura Zenevich.

-
- -

 

diff --git a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index df43b575a6..0000000000 --- a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Visão geral da acessibilidade nas aplicações web e widgets -slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets -tags: - - ARIA - - Accessibility - - Acessibilidade - - Aplicativos Web - - CSS - - DHTML - - Guía - - HTML+ARIA - - Navegação+Teclado - - WAI-ARA - - Widgets -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets ---- -

A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos widgets e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.

- -

O problema

- -

A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de widgets que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (built-in tags) que descrevam estes tipos de widgets semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como <div> e <span>. Embora isto resulte em um widget que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto ARIA entra.

- -

Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.

- -
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
-</div>
- -

Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.
- Screenshot of the tabs widget

- -

ARIA

- -

As definições para WAI-ARIA Accessible Rich Internet Applications (Aplicações Ricas para uma Internete Acessível), da W3C -  Web Accessibility Initiative (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus widgets de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela web, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos widgets conhecidas.

- -

A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os widgets que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses widgets - se podem ser arrastados (draggable), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.

- -

Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na web.

- -

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

- -
<!-- Now *these* are Tabs! -->
-<!-- We've added role attributes to describe the tab list and each tab. -->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
-  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
-</div>
-
- -

O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para widget, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.

- -

Mudanças na apresentação

- -

Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.

- -

Mudanças de estado

- -

O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um widget. Os exemplos abrangem (mas não são apenas estes, com certeza( :

- - - -

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

- -

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).

- -

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.

- -

Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.

- -

Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).

- -
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
-  <li id="sans-serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="true">Sans-serif</li>
-  <li id="serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="false">Serif</li>
-  ...
-
- -

A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.

- -

Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).

- -
li[aria-checked="true"] {
-  font-weight: bold;
-  background-image: url('images/dot.png');
-  background-repeat: no-repeat;
-  background-position: 5px 10px;
-}
-
- -

O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

- -

Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).

- -
var processMenuChoice = function(item) {
-  // 'check' the selected item
-  item.setAttribute('aria-checked', 'true');
-  // 'un-check' the other menu items
-  var sib = item.parentNode.firstChild;
-  for (; sib; sib = sib.nextSibling ) {
-    if ( sib.nodeType === 1 && sib !== item ) {
-      sib.setAttribute('aria-checked', 'false');
-    }
-  }
-};
-
- -

Alterações visuais

- -

Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).

- -

O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.

- -

Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.

- -

Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).

- -
<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
-           aria-labelledby="tp1-label"
-           aria-describedby="tp1"
-           aria-required="false" />
-    <div id="tp1" class="tooltip"
-         role="tooltip"
-         aria-hidden="true">Your first name is optional</div>
-</div>
-
- -

A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.

- -

Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).

- -
div.tooltip[aria-hidden="true"] {
-  display: none;
-  }
-
- -

O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.

- -

Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).

- -
var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
- -

Mudança de Atributo (Role)

- -
Em construção
- -

O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à {{ HTMLElement("ul") }} deve ser dada uma role de menubar e cada {{ HTMLElement("li") }} deve ter uma role de menuitem.

- -

O papel (role) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (role) nova.

- -

Por exemplo, considere um widget de edição "inline": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

- -

Não faça isso. Em substituição, implemente o modo "visualizar" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma role de button e o modo « edit » utilizando um elemento texto {{ HTMLElement("input") }}.

- -

Mudanças assíncronas de conteúdo

- -
Em construção. Veja, também, Regiões Dinâmicas
- - - -

Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam widgets personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação web, ou de um widget, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por widgets similares, de ambiente, tirando plena vantagem das teclas Tab, Entra, Barra de Espaço e Setas.

- -

Tradicionalmente, a navegação pelo teclado na web tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a web, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.

- -

Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação web:

- - - -

Assim, para o exemplo de widget de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "Tab" e "Shift+Tab" ( a <ol> na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos <li> ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "Entra", ou a "barra de espaço". Um  tutorial abrangente, para a criação de widgets, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript Keyboard-navigable JavaScript widgets (JavaScript para widgets navegáveis pelo teclado).

- -

Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) DHTML style guide (guia de estilos da HTML Dinâmica) está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de widget suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito, ARIA Best Practices, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de widgets.

- -

Veja, também

- - diff --git a/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html b/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html deleted file mode 100644 index 51a4ad7843..0000000000 --- a/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Desenvolvimento Web -slug: Web/Acessibilidade/Desenvolvimento_Web -tags: - - ARIA - - Accessibility - - Acessibilidade - - DHTML - - Desenvolvimento Web - - WebMechanics - - Widgets acessíveis - - XUL -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development ---- -

Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades web e XUL

- - - - - - - - -
-

Acessibilidade na Rede Mundial

- -
-
ARIA para desenvolvedores
-
O conjunto ARIA possibilita a acessibilidade em conteúdo dinâmico HTML. São exemplos de uso de ARIA os conteúdos de regiões dinâmicas e widgets com JavaScript.
-
JavaScript para widgets navegáveis pelo teclado
-
Até agora, programadores web construiam seus modelos de widgets baseados em <div> e <span>, por faltarem as técnicas adequadas. A acessibilidade através do teclado é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.
-
- -

Acessibilidade XUL

- -
-
 
-
Construindo componentes personalizados e acessíveis com XUL
-
A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.
-
Acessibilidade XUL - diretrizes de autoria
-
Quando a autoria está de acordo com estas diretrizes, a XUL é capaz de gerar interfaces acessíveis. Codificadores, revisores, construtores e engenheiros de produção (QA) devem se familiarizar com elas.
-
- 		-

Recursos Externos

- -
-
Mergulhe na Acessibilidade
-
Este livro responde a duas questões e a primeira, é: "Por que eu devo tornar meu sítio mais acessível?". A segunda, é: "Como eu posso fazer meu sítio mais acessível?"
-
Construindo páginas acessíveis
-
Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.
-
-
- -

 

diff --git a/files/pt-br/web/acessibilidade/entendendo_wcag/index.html b/files/pt-br/web/acessibilidade/entendendo_wcag/index.html deleted file mode 100644 index 392c1008b7..0000000000 --- a/files/pt-br/web/acessibilidade/entendendo_wcag/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web -slug: Web/Acessibilidade/Entendendo_WCAG -tags: - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -

Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).

- -

O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.

- -

Os quatro princípios

- -

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

- -

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

- - - -

Should I use WCAG 2.0 or 2.1?

- -

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

- -

O que é o WCAG 2.1?

- -

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

- -

WCAG 2.1 includes:

- - - - - -

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

- -

O que é acessibilidade? e particulamente o Guia de Acessibilidade e a seção de regras fornecem mais informações relacionadas.

diff --git a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html b/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html deleted file mode 100644 index 905c6d062f..0000000000 --- a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Keyboard -slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
- -

Focusable elements should have interactive semantics

- -

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

- -
-

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

-
- -

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

- -

See also

- - - -

Avoid using tabindex attribute greater than zero

- -

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

- -

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

- -

See also

- - - -

Clickable elements must be focusable and should have interactive semantics

- -

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

- -

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

- -

See also

- - - -

Interactive elements must be able to be activated using a keyboard

- -

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

- -

See also

- - - -

Interactive elements must be focusable

- -

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

- -

See also

- - - -

Focusable element must have focus styling

- -

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

- -

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

See also

- - diff --git a/files/pt-br/web/acessibilidade/index.html b/files/pt-br/web/acessibilidade/index.html deleted file mode 100644 index b494b06163..0000000000 --- a/files/pt-br/web/acessibilidade/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Acessibilidade -slug: Web/Acessibilidade -tags: - - ARIA - - Acessibilidade - - Avançado - - Desenvolvimento Web - - TA - Tecnologias Assistivas -translation_of: Web/Accessibility ---- -

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

- -

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

- -

"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

- -
-
-

Documentação

- -
-
Desenvolvimento Web
-
Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.
-
ARIA
-
Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.
-
Desenvolvimento de tecnologias assistivas (TA)
-
Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.
-
Acessibilidade em dispositivos móveis
-
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.
-
- -

Ver todos os artigos sobre Acessibilidade...

-
- -
-

Ferramentas para desenvolvedores web

- - - - - -

Outras páginas úteis

- - -
-
diff --git a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html b/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html deleted file mode 100644 index 65fe989377..0000000000 --- a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Problemas com JAWS no Firefox -slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox -tags: - - Acessibilidade - - Obsolento -translation_of: Web/Accessibility/JAWS_Issues_with_Firefox ---- -

Problemas JAWS Firefox conhecidos

- -

Esse artigo não é mais relevante. Por favor, veja o FAQ no site de suporte Mozilla.

diff --git a/files/pt-br/web/api/api_de_desempenho/index.html b/files/pt-br/web/api/api_de_desempenho/index.html deleted file mode 100644 index 1b6997e293..0000000000 --- a/files/pt-br/web/api/api_de_desempenho/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: API de Desempenho -slug: Web/API/API_de_Desempenho -translation_of: Web/API/Performance_API ---- -
{{DefaultAPISidebar("High Resolution Time")}}
- -

The High Resolution Time standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).

- -

Since a platform's system clock is subject to various skews (such as NTP adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. As such, the Performance API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.

- -

DOMHighResTimeStamp

- -

The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a double and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.

- -

The unit of DOMHighResTimeStamp is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.

- -

Methods

- -

The {{domxref("Performance")}} interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.

- -

The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.

- -

Properties

- -

The {{domxref("Performance")}} interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.

- -

The {{domxref("Performance.navigation","navigation")}} property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.

- -

Interfaces

- -
-
{{domxref('Performance')}}
-
Provides methods and properties containing timing-related performance information for the given page.
-
{{domxref('PerformanceEntry')}}
-
Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.
-
{{domxref('PerformanceFrameTiming')}}
-
Provides methods and properties containing frame timing data about the browser's event loop.
-
{{domxref('PerformanceMark')}}
-
An abstract interface for performance entries with an entry type of "mark". Entries of this type are created by calling performance.mark() to add a named DOMHighResTimeStamp (the mark) to the browser's performance timeline.
-
{{domxref('PerformanceMeasure')}}
-
An abstract interface for performance entries with an entry type of "measure". Entries of this type are created by calling performance.measure() to add a namedDOMHighResTimeStamp (the measure) between two marks to the browser's performance timeline.
-
{{domxref('PerformanceNavigationTiming')}}
-
Provides methods and properties to store and retrieve high resolution timestamps or metrics regarding the browser's document navigation events.
-
{{domxref('PerformanceObserver')}}
-
Provides methods and properties used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
-
{{domxref('PerformanceResourceTiming')}}
-
Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Initial definition.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Adds performance attribute on Window and WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Add timeOrigin property to Performance interface.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Adds PerformanceFrameTiming interface.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Adds the PerformanceTiming and PerformanceNavigation interfaces. Adds timing and navigation properties to the Performance interface.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Adds the PerformanceNavigationTiming interface. Obsolete's the the PerformanceTiming interface, the PerformanceNavigation interface, as well as the timing and navigation properties to the Performance interface.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Adds the PerformanceEntry interface, the PerformanceEntryList type, as well as the getEntries(), getEntriesByType(), and getEntriesByName() methods on the Performance interface.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Adds serializer to the PerformanceEntry interface as well as adding the PerformanceObserver interface and callback
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Adds the PerformanceResourceTiming interface. Adds the clearResourceTimings() method, the setResourceTimingBufferSize() method, and the onresourcetimingbufferfull event handler to the Performance interface. Also adds the Timing-Allow-Origin response header.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Adds the nextHopProtocol, workerStart, transferSize, encodedBodySize, and decodedBodySize properties to the PerformanceResourceTiming interface.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Adds mark(), clearMarks(), measure() and clearMeasures() methods to the Performance interface. Adds the PerformanceMark and PeformanceMeasure interfaces.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
- -

Implementation status

- -

As shown in the {{domxref("Performance")}} interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers.

- -

To test your browser's support for the {{domxref("Performance")}} interface, run the perf-api-support application.

- -

See Also

- - diff --git a/files/pt-br/web/api/api_push/best_practices/index.html b/files/pt-br/web/api/api_push/best_practices/index.html deleted file mode 100644 index 9b0fafd2b7..0000000000 --- a/files/pt-br/web/api/api_push/best_practices/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Melhores práticas -slug: Web/API/API_Push/Best_Practices -tags: - - Apps - - Iniciante - - Melhores Práticas - - Notificações - - Push API - - Usabilidade -translation_of: Web/API/Push_API/Best_Practices ---- -

{{draft}}

- -

Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.

- -
-

“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.

-
- -

Visão Geral do web push notifications

- -

Notificações Web Push (criadas usando uma combinação das APIs de Notificações, Push e Service Worker) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "web push notifications", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos

- -

O Lado obscuro

- -

Essa novidade oferece uma oportunidade nova e inexplorada para sites empresariais chegarem aos seus consumidores finais. Seu usuário trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou oferecendo frete grátis, o qual ele não vai poder ignorar

- -

Mas sério, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?

- -
-

“O envio de notificações push não corre o risco de acabar na pasta de spam. Nem pode ser bloqueado por bloqueadores de anúncios. Ele aparece na sua área de trabalho, mesmo quando o site está fechado. No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução.” — um site de marketing anonimo

-
- -

Bons usos das notificações

- -

Mas há também um lado bom no que se diz respeito as notificações por push. Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema. Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.

- -

Neste documento, falaremos sobre o uso correto das notificações por push da web. Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.

- -

O que se espera alcançar com as notificações push?

- -

Como tudo, com grande poder vem uma grande responsabilidade. Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.

- -

Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:

- - - -

Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.

- -

Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo. Suas notificações devem ser acolhedoras, não hostis.

- -

Gerando confiança

- -

Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final. Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo. Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.

- -

Mitigações dos navegadores

- -

Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema. Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando[1] fazer—que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups. Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.

- -

[1] No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência dom.webnotifications.requireuserinteraction.

- -

Veja também

- - diff --git a/files/pt-br/web/api/api_push/index.html b/files/pt-br/web/api/api_push/index.html deleted file mode 100644 index 563b711cd8..0000000000 --- a/files/pt-br/web/api/api_push/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: API Push -slug: Web/API/API_Push -tags: - - API - - Experimental - - Notificações - - Push - - Referencia - - Service Workers -translation_of: Web/API/Push_API ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

A API Push torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.

- -
-

Nota: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja Simple Push.

-
- -

Conceitos e uso de Push

- -

Para uma aplicação receber mensagens push, ela precisa ter um service worker ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.

- -

O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.

- -

O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

- -

Cada assinatura é única para um service worker.  O endpoint para a assinatura é uma capability URL única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.

- -

A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite.  O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.

- -
-

Nota: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.

-
- -
-

Nota: Chrome atualmente requer que você crie um projeto no Google Cloud Messaging para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um app manifest com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.

-
- -

Interfaces

- -
-
{{domxref("PushEvent")}}
-
Representa uma ação push enviada para o global scope de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.
-
{{domxref("PushMessageData")}}
-
Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.
-
{{domxref("PushSubscription")}}
-
Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.
-
- -

Service worker additions

- -

As seguintes informações adicionais para a Service Worker API foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
Um manipulador de eventos disparado sempre que um evento  {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
Um manipulador de eventos disparado sempre que um evento  {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName("Push API")}}{{Spec2("Push API")}}Definição Inicial
- -

Compatibilidade em Browsers

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.

- -

[2] Ainda não implementado. Veja Microsoft Edge status information.

- -

Veja também

- - diff --git a/files/pt-br/web/api/api_web_audio/index.html b/files/pt-br/web/api/api_web_audio/index.html deleted file mode 100644 index 8f582eb524..0000000000 --- a/files/pt-br/web/api/api_web_audio/index.html +++ /dev/null @@ -1,480 +0,0 @@ ---- -title: API Web Áudio -slug: Web/API/API_Web_Audio -tags: - - Web Audio API - - api de áudio - - áudio api - - áudio web -translation_of: Web/API/Web_Audio_API ---- -
-

A API de áudio da web disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects (como panning) e muito mais.

-
- -

Web audio: conceitos e uso

- -

A API de Web audio envolve manipulação de operações com áudio dentro de um contexto de áudio, e foi desenvolvida para permitir o roteamento modular. Operações básicas de áudio são feitas com audio nodes (nós de áudio), que são ligados para formar gráficos de roteamento de áudio. Várias fontes - com diferentes tipos de layout de canal - são suportados mesmo em um único contexto. Este design modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

- -

Audio nodes são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais nodes e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:

- -
    -
  1. Crie um contexto de áudio
    2. -
  2. Dentro do contexto, crie fontes de áudio — como <audio>, oscilador, stream
    3. -
  3. Crie efeitos de áudio, como reverb, biquad filter, panner, compressor
    4. -
  4. Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema
    5. -
  5. Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.
    6. -
- -

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

- -

O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.

- -

A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de source-listener, a API permite controlar os painéis de modelo para serem usados e tratados com atenuação de distância induzida ou doppler shift induzido por uma fonte em movimento (ou um ouvinte em movimento).

- -
-

Nota: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo Basic concepts behind Web Audio API.

-
- -

Web Audio: Interfaces da API

- -

A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.

- -

Definições gerais de grafos de áudio (audio graph)

- -

Definições gerais que moldam os grafos de áudio no uso da API de Web Audio.

- -
-
{{domxref("AudioContext")}}
-
A interface AudioContext representa um grafo de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dosnós que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um AudioContext antes de fazer qualquer outra coisa.
-
{{domxref("AudioNode")}}
-
A interface AudioNode representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).
-
{{domxref("AudioParam")}}
-
A interface AudioParam representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.
-
{{event("ended_(Web_Audio)", "ended")}} (event)
-
O evento ended é disparado quando a reprodução parou porque o fim da mídia foi atingido.
-
- -

Definindo fontes de áudio

- -

Interfaces que definem fontes de áudio para uso na API de Web Audio.

- -
-
{{domxref("OscillatorNode")}}
-
A interface OscillatorNode representa uma onda senoidal. Esta interface é um módulo de processamento de áudio que gera uma onda senoidal com determinada frequência.
-
{{domxref("AudioBuffer")}}
-
A interface AudioBuffer representa uma pequena porção de áudio armazenada na memória, criada a partir de um arquivo de áudio usando o método {{ domxref("AudioContext.decodeAudioData()") }}, ou criado com os dados brutos usando o método {{ domxref("AudioContext.createBuffer()") }}. Uma vez decodificado neste formato o áudio pode ser colocada em um {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioBufferSourceNode")}}
-
A interface AudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um {{domxref ("AudioBuffer")}}. É um {{domxref ("AudioNode")}} que atua como uma fonte de áudio.
-
{{domxref("MediaElementAudioSourceNode")}}
-
A interface MediaElementAudioSourceNode  representa uma fonte de audio consiste de um HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }} elemento. É uma {{domxref("AudioNode")}} que atua como uma fonte de áudio.
-
{{domxref("MediaStreamAudioSourceNode")}}
-
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.
-
- -

Definindo filtros de efeitos de áudio

- -

Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.

- -
-
{{domxref("BiquadFilterNode")}}
-
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
-
{{domxref("ConvolverNode")}}
-
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.
-
{{domxref("DelayNode")}}
-
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
-
{{domxref("DynamicsCompressorNode")}}
-
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
-
{{domxref("GainNode")}}
-
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
-
{{domxref("WaveShaperNode")}}
-
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
-
{{domxref("PeriodicWave")}}
-
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
-
- -

Definindo destinos de áudio

- -

Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.

- -
-
{{domxref("AudioDestinationNode")}}
-
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
-
{{domxref("MediaStreamAudioDestinationNode")}}
-
The MediaElementAudioSourceNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
-
- -

Análise dos dados e visualização

- -

Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o AnalyserNode é o que você necessita.

- -
-
{{domxref("AnalyserNode")}}
-
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
-
- -

Dividindo e mesclando canais de áudio

- -

Para dividir e mesclar canais de áudio, você utilizará essas interfaces.

- -
-
{{domxref("ChannelSplitterNode")}}
-
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
-
{{domxref("ChannelMergerNode")}}
-
The ChannelMergerNode interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.
-
- -

Audio spatialization

- -

These interfaces allow you to add audio spatialization panning effects to your audio sources.

- -
-
{{domxref("AudioListener")}}
-
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
-
{{domxref("PannerNode")}}
-
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
-
- -

Processamento de áudio por JavaScript

- -

Se você quiser usar um script externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.

- -
-
{{domxref("ScriptProcessorNode")}}
-
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
-
{{event("audioprocess")}} (event)
-
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
-
{{domxref("AudioProcessingEvent")}}
-
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
-
- -

Áudio offline

- -

Manipular áudio offline é possível com estas interfaces.

- -
-
{{domxref("OfflineAudioContext")}}
-
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
-
{{event("complete")}} (event)
-
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
-
{{domxref("OfflineAudioCompletionEvent")}}
-
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
-
- -

Interfaces obsoletas

- -

As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.

- -
-
{{domxref("JavaScriptNode")}}
-
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
-
{{domxref("WaveTableNode")}}
-
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
-
- -

Exemplo

- -

Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo Voice-change-o-matic (também verificar o código-fonte completo no Github) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!

- -

As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
-// Webkit/blink browsers need prefix, Safari won't work without window.
-
-var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
-var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
-var mute = document.querySelector('.mute'); // mute button
-var drawVisual; // requestAnimationFrame
-
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-
-function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
-  var k = typeof amount === 'number' ? amount : 50,
-    n_samples = 44100,
-    curve = new Float32Array(n_samples),
-    deg = Math.PI / 180,
-    i = 0,
-    x;
-  for ( ; i < n_samples; ++i ) {
-    x = i * 2 / n_samples - 1;
-    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
-  }
-  return curve;
-};
-
-navigator.getUserMedia (
-  // constraints - only audio needed for this app
-  {
-    audio: true
-  },
-
-  // Success callback
-  function(stream) {
-    source = audioCtx.createMediaStreamSource(stream);
-    source.connect(analyser);
-    analyser.connect(distortion);
-    distortion.connect(biquadFilter);
-    biquadFilter.connect(gainNode);
-    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
-
-    visualize(stream);
-    voiceChange();
-
-  },
-
-  // Error callback
-  function(err) {
-    console.log('The following gUM error occured: ' + err);
-  }
-);
-
-function visualize(stream) {
-  WIDTH = canvas.width;
-  HEIGHT = canvas.height;
-
-  var visualSetting = visualSelect.value;
-  console.log(visualSetting);
-
-  if(visualSetting == "sinewave") {
-    analyser.fftSize = 2048;
-    var bufferLength = analyser.frequencyBinCount; // half the FFT value
-    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
-
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-
-    function draw() {
-
-      drawVisual = requestAnimationFrame(draw);
-
-      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
-
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
-      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-      canvasCtx.beginPath();
-
-      var sliceWidth = WIDTH * 1.0 / bufferLength;
-      var x = 0;
-
-      for(var i = 0; i < bufferLength; i++) {
-
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
-
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
-
-    draw();
-
-  } else if(visualSetting == "off") {
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-    canvasCtx.fillStyle = "red";
-    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-  }
-
-}
-
-function voiceChange() {
-  distortion.curve = new Float32Array;
-  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
-
-  var voiceSetting = voiceSelect.value;
-  console.log(voiceSetting);
-
-  if(voiceSetting == "distortion") {
-    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
-  } else if(voiceSetting == "biquad") {
-    biquadFilter.type = "lowshelf";
-    biquadFilter.frequency.value = 1000;
-    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
-  } else if(voiceSetting == "off") {
-    console.log("Voice settings turned off"); // do nothing, as off option was chosen
-  }
-
-}
-
-// event listeners to change visualize and voice settings
-
-visualSelect.onchange = function() {
-  window.cancelAnimationFrame(drawVisual);
-  visualize(stream);
-}
-
-voiceSelect.onchange = function() {
-  voiceChange();
-}
-
-mute.onclick = voiceMute;
-
-function voiceMute() { // toggle to mute and unmute sound
-  if(mute.id == "") {
-    gainNode.gain.value = 0; // gain set to 0 to mute sound
-    mute.id = "activated";
-    mute.innerHTML = "Unmute";
-  } else {
-    gainNode.gain.value = 1; // gain set to 1 to unmute sound
-    mute.id = "";
-    mute.innerHTML = "Mute";
-  }
-}
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
- -

Compatibilidade de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
- 22 (unprefixed)		6 {{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
-
- -

 

- -

Veja também

- - - - diff --git a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html b/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html deleted file mode 100644 index b0fdf2a0c4..0000000000 --- a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html +++ /dev/null @@ -1,579 +0,0 @@ ---- -title: 'Tutorial e exemplo: Teclado de Sintetizador Simples' -slug: Web/API/API_Web_Audio/Sintetizador_simples -tags: - - Audio - - Exemplo - - Guía - - Media - - Oscilador - - Piano - - Sintetizador - - Tutorial - - Web Audio API -translation_of: Web/API/Web_Audio_API/Simple_synth ---- -
{{DefaultAPISidebar("Web Audio API")}}
- -

Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, e {{domxref("GainNode")}}.

- -

Já que {{domxref("OscillatorNode")}} é baseado no {{domxref("AudioScheduledSourceNode")}}, isso até certo ponto também é um exemplo pra isto.

- -

O Teclado Visual

- -

HTML

- -

Existem três componentes primários para o display do nosso teclado virtual. O primeito do qual é o teclado musical em si. Nós extraimos em um par de elementos {{HTMLElement("div")}} aninhados para permitir a rolagem horizontal caso as teclas não encaixem na tela.

- -

O Teclado

- -

Primeiro, criamos o espaço no qual construiremos o teclado. Estaremos construindo o teclado programaticamente, considerando que ao fazer desse jeito teremos a flexibilidade de configurar cada tecla conforme determinamos as informações apropriadas para tecla correspondente. No nosso caso, pegamos a frequência de cada tecla através de uma tabela, mas poderia ser calculado de forma algoritmica também.

- -
<div class="container">
-  <div class="keyboard"></div>
-</div>
-
- -

O {{HTMLElement("div")}} nomeado de "container" é a barra de rolagem que permite o teclado ser rolado horizontalmente se for largo demais para o espaço disponivel. As teclas em si serão inseridas no bloco de classe "keyboard".

- -

A barra de opções

- -

Abaixo do teclado, colocaremos alguns controles para configurar o camada. Por enquanto, teremos dois controles: Um para controlar o volume e outro para selecionar a forma de onda periodica usada ao gerar as notas.

- -
O controle de volume
- -

Primeiro criamos o <div> para conter a barra de opções, para ser personalizado conforme preciso. Então estabelecemos uma caixa que será apresentada no lado esquerdo da barra e colocar um rotulo e um elemento {{HTMLElement("input")}} do tipo "range". O elemento range será tipicamente apresentado como o controle da barra de rolagem ; configuramos ele para permitir qualquer valor entre 0.0 e 1.0 em cada posição.

- -
<div class="settingsBar">
-  <div class="left">
-    <span>Volume: </span>
-    <input type="range" min="0.0" max="1.0" step="0.01"
-        value="0.5" list="volumes" name="volume">
-    <datalist id="volumes">
-      <option value="0.0" label="Mute">
-      <option value="1.0" label="100%">
-    </datalist>
-  </div>
-
- -

Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de "volume". isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").

- -
A seleção de forma de onda
- -

E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTMLElement("select")}} nomeado de "waveform" cujas opções correspondem as formas de onda disponiveis.

- -
  <div class="right">
-    <span>Current waveform: </span>
-    <select name="waveform">
-      <option value="sine">Sine</option>
-      <option value="square" selected>Square</option>
-      <option value="sawtooth">Sawtooth</option>
-      <option value="triangle">Triangle</option>
-      <option value="custom">Custom</option>
-    </select>
-  </div>
-</div>
- - - -

JavaScript

- -

O código em JavaScript começa inicializando algumas váriaveis.

- -
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
-let oscList = [];
-let masterGainNode = null;
-
- -
    -
  1. audioContext é colocado para referenciar o objeto global {{domxref("AudioContext")}} (ou webkitAudioContext se  necessário).
    2. -
  2. oscillators está colocado para conter uma lista de todos os osciladores atualmente tocando. Ele começa nulo, afinal não há nenhum oscilador tocando ainda.
    3. -
  3. masterGainNode é colocado como nulo; durante o processo de setup, ele será configurado para contar um {{domxref("GainNode")}} no quall todos os osciladores irão se conectar para permitir o volume geral a ser controlado por apenas uma barra de rolagem.
    4. -
- -
let keyboard = document.querySelector(".keyboard");
-let wavePicker = document.querySelector("select[name='waveform']");
-let volumeControl = document.querySelector("input[name='volume']");
-
- -

Referencias aos elementos que precisaremos acessar são obtidas através dp:

- - - -
let noteFreq = null;
-let customWaveform = null;
-let sineTerms = null;
-let cosineTerms = null;
-
- -

Enfim, variaveis globais que serão usadas quando as formas de onda são criadas:

- - - -

Criando a tabela de notas

- -

A função createNoteTable() constrói a matriz noteFreq para conter uma matriz de objetos representando cada oitava. Cada oitava, possui uma propriedade para cada nota nessa oitava; O nome dessa propriedade é o nome da nota (utilizando da notação em inglês, como "C" para representar "dó"), e o valor é a frequência, em Hertz, daquela nota.

- -
function createNoteTable() {
-  let noteFreq = [];
-  for (let i=0; i< 9; i++) {
-    noteFreq[i] = [];
-  }
-
-  noteFreq[0]["A"] = 27.500000000000000;
-  noteFreq[0]["A#"] = 29.135235094880619;
-  noteFreq[0]["B"] = 30.867706328507756;
-
-  noteFreq[1]["C"] = 32.703195662574829;
-  noteFreq[1]["C#"] = 34.647828872109012;
-  noteFreq[1]["D"] = 36.708095989675945;
-  noteFreq[1]["D#"] = 38.890872965260113;
-  noteFreq[1]["E"] = 41.203444614108741;
-  noteFreq[1]["F"] = 43.653528929125485;
-  noteFreq[1]["F#"] = 46.249302838954299;
-  noteFreq[1]["G"] = 48.999429497718661;
-  noteFreq[1]["G#"] = 51.913087197493142;
-  noteFreq[1]["A"] = 55.000000000000000;
-  noteFreq[1]["A#"] = 58.270470189761239;
-  noteFreq[1]["B"] = 61.735412657015513;
-
- -

... várias oitavas não mostradas para manter breve ...

- - - -
  noteFreq[7]["C"] = 2093.004522404789077;
-  noteFreq[7]["C#"] = 2217.461047814976769;
-  noteFreq[7]["D"] = 2349.318143339260482;
-  noteFreq[7]["D#"] = 2489.015869776647285;
-  noteFreq[7]["E"] = 2637.020455302959437;
-  noteFreq[7]["F"] = 2793.825851464031075;
-  noteFreq[7]["F#"] = 2959.955381693075191;
-  noteFreq[7]["G"] = 3135.963487853994352;
-  noteFreq[7]["G#"] = 3322.437580639561108;
-  noteFreq[7]["A"] = 3520.000000000000000;
-  noteFreq[7]["A#"] = 3729.310092144719331;
-  noteFreq[7]["B"] = 3951.066410048992894;
-
-  noteFreq[8]["C"] = 4186.009044809578154;
-  return noteFreq;
-}
-
- -

O resultado é uma matriz, noteFreq, com um objeto para cada oitava. Cada objeto de oitava tem propriedades nomeadas nela onde a propriedade é o nome da nota com a notação em inglês (Como "C" para representar "dó") e o valor da propriedade é a frequência da nota em Hertz.. o objeto resultando se parece com isso:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OctaveNotes
0"A" ⇒ 27.5"A#" ⇒ 29.14"B" ⇒ 30.87
1"C" ⇒ 32.70"C#" ⇒ 34.65"D" ⇒ 36.71"D#" ⇒ 38.89"E" ⇒ 41.20"F" ⇒ 43.65"F#" ⇒ 46.25"G" ⇒ 49"G#" ⇒ 51.9"A" ⇒ 55"A#" ⇒ 58.27"B" ⇒ 61.74
2. . .
- -

Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em uma oitava particular relativamente fácil. Se queremos a frequência pra nota G# na primeira oitava, nós simplesmente usamos  noteFreq[1]["G#"] e conseguimos o valor 51.9 como resultado.

- -
-

Os valores na tabela de exemplo acima foram arredondados para duas casas decimais.

-
- - - -

Construindo o teclado

- -

A função setup() é responsavel por construir o teclado e preparar a aplicação para tocar a música.

- -
function setup() {
-  noteFreq = createNoteTable();
-
-  volumeControl.addEventListener("change", changeVolume, false);
-
-  masterGainNode = audioContext.createGain();
-  masterGainNode.connect(audioContext.destination);
-  masterGainNode.gain.value = volumeControl.value;
-
-  // Create the keys; skip any that are sharp or flat; for
-  // our purposes we don't need them. Each octave is inserted
-  // into a <div> of class "octave".
-
-  noteFreq.forEach(function(keys, idx) {
-    let keyList = Object.entries(keys);
-    let octaveElem = document.createElement("div");
-    octaveElem.className = "octave";
-
-    keyList.forEach(function(key) {
-      if (key[0].length == 1) {
-        octaveElem.appendChild(createKey(key[0], idx, key[1]));
-      }
-    });
-
-    keyboard.appendChild(octaveElem);
-  });
-
-  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
-
-  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
-  cosineTerms = new Float32Array(sineTerms.length);
-  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
-
-  for (i=0; i<9; i++) {
-      oscList[i] = {};
-  }
-}
-
-setup();
- -
    -
  1. A tabela que mapeia o nome e oitavas das notas para suas respectivas frequências é criado ao chamar createNoteTable().
    2. -
  2. Um manipulador de eventos é estabelecido ao chamar nosso velho amigo {{domxref("EventTarget.addEventListener", "addEventListener()")}} para cuidar dos eventos do {{event("change")}} no controle de ganho geral. Isso vai simplesmente atualizar o módulo de ganho de volume para o novo valor.
    3. -
  3. Em seguida, nós replicamos cada oitava na tabela de frequências das notas. Para cada oitava, usamos {{jsxref("Object.entries()")}} para conseguir uma lista de notas daquela oitava.
    4. -
  4. Criar um {{HTMLElement("div")}} para contar as notas daquela oitava (para ter um pouco de espaço entre as oitavas), e mudar o nome de classe para "octave".
    5. -
  5. Para cada tecla na oitava, checamos para ver se o nome daquela nota há mais de um caractere. Nós pulamos essas, pois estamos deixando notas sustenidas de fora deste exemplo. Do contrário, chamamos createKey(), especificando uma string, oitava, e frequência. O elemento retornado é anexado na elemento da oitava criada no passo 4.
    6. -
  6. Quando o elemento da oitava é construido, é então anexada ao teclado.
    7. -
  7. Uma vez que o teclado foi construido, nós rolamos para nota "B" na quinta oitava; isso tem o efeito de garantir que o C médio é visivel junto das notas ao redor.
    8. -
  8. Então uma forma de onda customizada é construida usando {{domxref("AudioContext.createPeriodicWave()")}}. Essa forma de onda será usada toda vez que o usuário selecionar "Custom" da seleção de formas de onda.
    9. -
  9. Enfim, a lista de osciladores é iniciada para garantir que está pronta para receber informação identificando quais osciladores estão associados com que teclas.
    10. -
- -

Criando uma tecla

- -

A função createKey()  é chamada toda vez que queremos que uma tecla seja apresentada no nosso teclado virtual. Ela cria elementos da tecla e seu rótulo, adiciona informação dos atributos ao elemento para uso posterior, e coloca modificadores de eventos para os eventos que nos importam.

- -
function createKey(note, octave, freq) {
-  let keyElement = document.createElement("div");
-  let labelElement = document.createElement("div");
-
-  keyElement.className = "key";
-  keyElement.dataset["octave"] = octave;
-  keyElement.dataset["note"] = note;
-  keyElement.dataset["frequency"] = freq;
-
-  labelElement.innerHTML = note + "<sub>" + octave + "</sub>";
-  keyElement.appendChild(labelElement);
-
-  keyElement.addEventListener("mousedown", notePressed, false);
-  keyElement.addEventListener("mouseup", noteReleased, false);
-  keyElement.addEventListener("mouseover", notePressed, false);
-  keyElement.addEventListener("mouseleave", noteReleased, false);
-
-  return keyElement;
-}
-
- -

Após criar  os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}}  que contém a string da oitava da nota (attribute data-octave), representando a nota a ser tocada (attribute data-note), e frequência (attribute data-frequency) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos.

- -

Fazendo música

- -

Tocando um tom

- -

O trabalho da função playTone() é tocar um tom em uma dada frequência. Isso será usado pelo modificador para eventos acionados nas teclas do teclado, para que toquem as notas apropriadas.

- -
function playTone(freq) {
-  let osc = audioContext.createOscillator();
-  osc.connect(masterGainNode);
-
-  let type = wavePicker.options[wavePicker.selectedIndex].value;
-
-  if (type == "custom") {
-    osc.setPeriodicWave(customWaveform);
-  } else {
-    osc.type = type;
-  }
-
-  osc.frequency.value = freq;
-  osc.start();
-
-  return osc;
-}
-
- -

O playTone() começa criando um novo {{domxref("OscillatorNode")}} ao chamar o método {{domxref("AudioContext.createOscillator()")}}. Então conectamos ele para o módulo de ganha geral ao chamar o novo método de osciladores {{domxref("OscillatorNode.connect()")}} method;, Que determina ao oscilador onde ele irá mandar seu output. Ao fazer isso, mudar o valor do ganho do módulo de ganho geral irá mudar o volume de todos os toms gerados.

- -

Então conseguimos o tipo de forma de onda para usar ao checar o valor do controle de seleção de formas de onda na barra de opções. Se o usuário estiver colocado como "custom", chamamos {{domxref("OscillatorNode.setPeriodicWave()")}} para configurar os osciladores para usar nossa forma de onda customizada. Fazer isso automáticamente coloca o {{domxref("OscillatorNode.type", "type")}} do oscilador como custom. Se qualquer outro tipo de forma de onda é selecionado na seleção de formas de ondas, nós simplesmente colocamos os tipos de osciladores no valor da seleção, esse valor será um entre sine, square, triangle, e sawtooth.

- -

A frequência do oscilador é colocada no valor especificado no paramêtro freq ao colocar o valor dos objetos {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} . Então, enfim, o oscilador é iniciado e começa a produzir sons ao chamar o método {{domxref("AudioScheduledSourceNode.start()")}} .

- -

Tocando um tom

- -

Quando o evento {{event("mousedown")}} ou {{domxref("mouseover")}} ocorre em uma tecla, queremos que toque a nota correspondente. A função notePressed() é usada como o modificador de eventos para esses eventos.

- -
function notePressed(event) {
-  if (event.buttons & 1) {
-    let dataset = event.target.dataset;
-
-    if (!dataset["pressed"]) {
-      let octave = +dataset["octave"];
-      oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
-      dataset["pressed"] = "yes";
-    }
-  }
-}
-
- -

Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento.

- -

Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo data-pressed ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos playTone() para começar a tocar a nota, passando no valor dos elementos do atributo data-frequency. O valor retornado do oscilador é guardado no oscList para refêrencia futura, e data-pressed é colocado como yes para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado.

- -

Parando um tom

- -

A função noteReleased() é o modificador de eventos chamado quando o usuário solta o botão do mouse ou move o mouse para fora da tecla que ele está tocando.

- -
function noteReleased(event) {
-  let dataset = event.target.dataset;
-
-  if (dataset && dataset["pressed"]) {
-    let octave = +dataset["octave"];
-    oscList[octave][dataset["note"]].stop();
-    delete oscList[octave][dataset["note"]];
-    delete dataset["pressed"];
-  }
-}
-
- -

noteReleased() usa os atributos customizados data-octave and data-note  para procurar os osciladores das teclas, e então chama o método de oscilador {{domxref("AudioScheduledSourceNode.stop", "stop()")}} para parar de tocar a nota. Finalmente, a entrada oscList para nota é limpa e o atributo data-pressed é removido do elemento da tecla (como identificado pelo {{domxref("event.target")}}), para indicar que a nota não está tocando no momento.

- -

Mudando o volume geral

- -

A barra de rolagem do volume na barra de opções dá uma simples interface para mudar o valor do ganho no módulo de ganho geral, então mudando o volume de todas as notas sendo tocadas. O metódo changeVolume() é o modificador do evento {{event("change")}} na barra de rolagem.

- -
function changeVolume(event) {
-  masterGainNode.gain.value = volumeControl.value
-}
-
- -

Isso simplesmente coloca o valor do módulo de ganho geral gain {{domxref("AudioParam")}} para o novo valor na barra de rolagem.

- -

Resultado

- -

Coloque tudo junto, o resultado é um simples e funcional teclado virtual que funciona com o clique:

- -

{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}

- -

Veja também

- - diff --git a/files/pt-br/web/api/audiocontext/currenttime/index.html b/files/pt-br/web/api/audiocontext/currenttime/index.html deleted file mode 100644 index 71f3c9c894..0000000000 --- a/files/pt-br/web/api/audiocontext/currenttime/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime -tags: - - API - - AudioContext - - Propriedade - - Referencia - - Web Audio API - - currentTime -translation_of: Web/API/BaseAudioContext/currentTime ---- -

{{ APIRef("Web Audio API") }}

- -
-

The currentTime read-only property of the {{ domxref("AudioContext") }} interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. It starts at 0.

-
- -

Syntax

- -
var audioCtx = new AudioContext();
-console.log(audioCtx.currentTime);
-
- -

Exemplo:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// Older webkit/blink browsers require a prefix
-
-...
-
-console.log(audioCtx.currentTime);
-
- -

Especificações:

- - - - - - - - - - - - - - -
Especificações:StatusComentario
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
- -

Compatibilidade:

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
- -

 

-
- -

Veja também:

- - diff --git a/files/pt-br/web/api/baseaudiocontext/currenttime/index.html b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html new file mode 100644 index 0000000000..71f3c9c894 --- /dev/null +++ b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html @@ -0,0 +1,114 @@ +--- +title: AudioContext.currentTime +slug: Web/API/AudioContext/currentTime +tags: + - API + - AudioContext + - Propriedade + - Referencia + - Web Audio API + - currentTime +translation_of: Web/API/BaseAudioContext/currentTime +--- +

{{ APIRef("Web Audio API") }}

+ +
+

The currentTime read-only property of the {{ domxref("AudioContext") }} interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. It starts at 0.

+
+ +

Syntax

+ +
var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+
+ +

Exemplo:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+
+ +

Especificações:

+ + + + + + + + + + + + + + +
Especificações:StatusComentario
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidade:

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+ +

 

+
+ +

Veja também:

+ + diff --git a/files/pt-br/web/api/battery_status_api/index.html b/files/pt-br/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..603750f72c --- /dev/null +++ b/files/pt-br/web/api/battery_status_api/index.html @@ -0,0 +1,58 @@ +--- +title: Battery Status API +slug: WebAPI/Battery_Status +tags: + - API + - Apps + - Batería + - Firefox OS + - Guia(2) + - Guía + - Mobile + - Obsoleto +translation_of: Web/API/Battery_Status_API +--- +
{{obsolete_header}}
+ +
{{DefaultAPISidebar("Battery API")}}
+ +

A API Battery Status, mais conhecida como Battery API, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.

+ +

A API Battery Status API estende {{domxref("Window.navigator")}} com uma propriedade {{domxref("Navigator.battery")}} que é um objeto {{domxref("BatteryManager")}},  e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.

+ +

Exemplo

+ +

Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos {{event("chargingchange")}} e {{event("levelchange")}}, respectivamente.

+ +
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Status da bateria: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("A bateria está carregando");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+ +

Veja também o exemplo na especificação.

+ +

Especificações

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

+ +

Compatibilidade entre navegadores

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html new file mode 100644 index 0000000000..4f5c402588 --- /dev/null +++ b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html @@ -0,0 +1,35 @@ +--- +title: BatteryManager.ondischargingtimechange +slug: Web/API/BatteryManager/ondischargintimechange +tags: + - API + - Battery API + - Event Handler + - Propriedade + - Referencia +translation_of: Web/API/BatteryManager/ondischargingtimechange +--- +

{{APIRef("Battery API")}}

+ +

Especifica um event listener para receber eventos {{event("dischargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.dischargingTime","dischargingTime")}} (tempo de descarregamento) da bateria é atualizada.

+ +

Sintaxe

+ +
navigator.battery.ondischargingtimechange = funcRef
+ +

Onde funcRef é uma função para ser chamada quando o evento {{event("dischargingtimechange")}} ocorre.

+ +

Especificações

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

+ +

Compatibilidade entre navegadores

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html deleted file mode 100644 index 4f5c402588..0000000000 --- a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: BatteryManager.ondischargingtimechange -slug: Web/API/BatteryManager/ondischargintimechange -tags: - - API - - Battery API - - Event Handler - - Propriedade - - Referencia -translation_of: Web/API/BatteryManager/ondischargingtimechange ---- -

{{APIRef("Battery API")}}

- -

Especifica um event listener para receber eventos {{event("dischargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.dischargingTime","dischargingTime")}} (tempo de descarregamento) da bateria é atualizada.

- -

Sintaxe

- -
navigator.battery.ondischargingtimechange = funcRef
- -

Onde funcRef é uma função para ser chamada quando o evento {{event("dischargingtimechange")}} ocorre.

- -

Especificações

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

- -

Compatibilidade entre navegadores

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..ca188eb6f9 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,76 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +
+

Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando ray-casting.

+
+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Abrir em uma nova janela

+ +

Porquê?

+ +

Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava lendo sobre ele não estava apenas próximo de ser suportado pelo Firefox, mas que já estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.

+ +

A visão geral do canvas e o tutorial que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.

+ +

 

+ +

Como?

+ +

A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.

+ +

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
+
+ O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

+ +

 

+ +

Resultados

+ +

 

+ +


+ A tela no Safari 2.0.1 apresentou surpreendentemente bem. Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.
+
+ Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

+ +

 

+ +

O ray-caster

+ +

 

+ +


+ As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).
+
+ Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

 

+ +

 

+ +

 

+ +

 

+ +

See also

+ + diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +

{{CanvasSidebar}}

+ +

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

+ +

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

+ +

Exemplo básico

+ +

Este exemplo simples desenha um retângulo verde para um canvas.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

+ +

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

+ +

Referência

+ + + +
+

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

+
+ +

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

+ +

Guias e Tutoriais

+ +
+
+
Tutorial Canvas
+
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
+
Mergulhando no Canvas HTML5
+
Uma introdução prática e extensa à API Canvas e WebGL.
+
Guia Canvas
+
Uma referência acessível para a API Canvas.
+
Demonstração: Um ray-caster básico 
+
Uma demonstração de animação ray-tracing usando canvas.
+
Manipulando vídeos usando canvas
+
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
+
+ +

Bibliotecas

+ +

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

+ + + +
+

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

+
+ +

Especificações

+ +
+ + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
+
+ +

Compatibilidade de navegador

+ +

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

+ +

Ver também

+ + diff --git a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..23f072420e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,386 @@ +--- +title: Advanced animations +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Animation + - Animations + - Canvas + - animated + - efeitos em animações +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

No último capítulo nós fizemos algumas animações básicas  e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.

+
+ +

Desenhe uma bola

+ +

Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

 Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de 

+ +

{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.

+ +

Adicionando velocidade

+ +

Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Limites

+ +

Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primeira demonstração

+ +

Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Aceleração

+ +

Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efeito de arrastar

+ +

Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Adicione um controle de mouse

+ +

 

+ +

Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover, por exemplo. O clique por exemplo. O evento clique que libera a bola e deixa seu limite de novo.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Mova a bola usando seu mouse e libere - o com um clique.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Sair

+ +

Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.

+ +

Veja também:

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..f711570b9f --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,725 @@ +--- +title: Aplicando estilos e cores +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

No capítulo sobre desenhando formas com canvas, usamos apenas os estilos padrões de preenchimento e linha. Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes. Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.

+
+ +

Cores

+ +

Até agora só vimos métodos do contexto de desenho. Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar: fillStyle e strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Define o estilo usado ao preencher (fill) formas.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Define o estilo para os contornos (strokes) das formas.
+
+ +

color é uma string que representa um CSS {{cssxref("<color>")}}, um objeto gradiente, ou um objeto padrão. Examinaremos sobre objetos de gradiente e padrão mais tarde. Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto (valor de cor no CSS é #000000).

+ +
+

Nota: Quando você definir as propriedades strokeStyle e/ou fillStyle , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade fillStyle ou strokeStyle.

+
+ +

As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("<color>")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+
+ +

Um fillStyle exemplo

+ +

Neste exemplo, nós vamos mais uma vez utilizar dois for loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis i and j para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                       Math.floor(255 - 42.5 * j) + ',0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}
+ + + +

O resultado se parece com isto:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Um strokeStyle exemplo

+ +

Este exemplo é similar com o anterior, porém utiliza a propriedade strokeStyle para alterar a cor de contorno das formas. Nós usamos o método arc()  para desenhar círculos ao invés de quadrados.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

O resultado se parece com isto:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +
Transparência
+ Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.
+ +
+
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
+
+

Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.
+ A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.

+ +

Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.

+
+
+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

+ +

Um exemplo globalAlpha

+ +

Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Um exemplo usando o rgba()

+ +

Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

Existem várias propriedades que permitem estilizar linhas.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Define a largura das linhas desenhadas no futuro.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Define a aparência dos fins das linhas.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Define a aparência dos "cantos" onde as linhas se encontram.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Define o padrão de traço da linha atual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Especifica onde iniciar uma matriz de traços em uma linha.
+
+ +

Você entenderá melhor o que eles fazem observando os exemplos abaixo.

+ +

Um exemplo lineWidth

+ +

A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.

+ +

  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.

+ +

No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.
+

+ +

Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.

+ +

Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.
+  

+ +
+

Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).

+ +

Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.

+
+ +

Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .

+ +

Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.

+ +

Exemplo lineCap.

+ +

A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.

+ +
+
butt
+
As extremidades das linhas são quadradas nos pontos finais.
+
round
+
As extremidades das linhas são arredondadas.
+ arredondadas.
+
square
+
As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.
+
+ +

Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.

+ +

A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Um exemplo de lineJoin

+ +

A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .

+ +

Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.

+ +
+
round
+
Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.
+
bevel
+
Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.
+
miter
+
Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.
+
+ +

O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i < lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

Uma demonstração da propriedade miterLimit

+ +

Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.

+ +

A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.

+ +

Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:

+ + + +

Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.

+ +

Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++){
+    var dy = i % 2 == 0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Usando linhas tracejadas

+ +

O método setLineDash e a propriedade lineDashOffset especificam o padrão de traço para as linhas. O método setLineDash aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade lineDashOffset define a distância até onde se deve iniciar a linha.

+ +

Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer animações básicas.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..125e0874a7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,331 @@ +--- +title: Basic animations +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +

Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.

+ +

Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.

+ +

Passos para animação básica

+ +

Estes são os passos que você precisa para desenhar um frame:

+ +
    +
  1. Limpe o canvas
    + A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().
    2. +
  2. Salve o estado da tela
    + Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.
    3. +
  3. Desenhe formas animadas
    + A etapa em que você faz a renderização real do quadro.
    4. +
  4. Restaure o estado do canvas
    + Se você salvou o estado, restaure-o antes de desenhar um novo quadro.
    5. +
+ +

Controlando uma animação

+ +

Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.

+ +

Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.

+ +

Atualizações agendadas

+ +

Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.

+ +
+

Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.

+
+ +
+
setInterval(função,atraso)
+
Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.
+
setTimeout(função,atraso)
+
Executa a função especificada pela função em milissegundos de atraso.
+
+ +

Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.

+ +

Atualizar na interação do usuário

+ +

O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. 

+ +

Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:

+ +
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
+ +

ou

+ +
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
+ +

Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.

+ +

Um sistema solar animado

+ +

Esse exemplo anima um pequeno modelo do nosso sistema solar.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Um relógio animado

+ +

Esse exemplos desenha um relógio animado, mostrando sua hora atual.

+ +
function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Um panorama  em loop

+ +

Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is > Canvas Size
+    else {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+
+ +

Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. 

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

Live sample

+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

Outros exemplos

+ +
+
Gartic
+
Jogo de desenho para multiplayers.
+
Canvascape
+
Um jogo de aventura 3D (tiro em primeira pessoa).
+
A basic ray-caster
+
Um bom exemplo de como fazer animações usando os controles do teclado.
+
canvas adventure
+
Outro bom exemplo que usa controles de teclado.
+
An interactive Blob
+
Divirta-se com Blob.
+
Flying through a starfield
+
Voe através de estrelas, círculos ou quadrados.
+
iGrapher
+
Um exemplo que ilustra os dados do mercado de ações.
+
+ +

Veja também

+ + + +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..767a5ff97c --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,153 @@ +--- +title: Utilização básica do Canvas +slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica +tags: + - Canvas + - HTML + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
Vamos começar este tutorial olhando para o elemento {{HTMLElement("canvas")}} {{Glossary("HTML")}} em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.
+ +

O elemento <canvas>

+ +

Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

Se parece muito com o elemento <img> com a diferença de não possuir os atributos src e alt. O elemento <canvas> tem apenas dois atributos - width e height. Ambos são opcionais e podem ser aplicados utilizando as propriedades DOM respectivas. Se não forem especificados, o canvas será iniciado com 300 pixels de largura por 150 pixels de altura. O elemento pode ser redimensionado por CSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.

+ +
+

Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS.

+
+ +

O atributo id não é específico do elemento <canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o class por exemplo). É sempre uma boa ideia inserir um id pois fica muito mais fácil de capturar o elemento no seu script.

+ +

O elemento <canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.

+ +
+

Conteúdo alternativo

+ +

Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.

+ +

Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam o <canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.

+ +

Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:

+ +
<canvas id="stockGraph" width="150" height="150">
+  preço das ações: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Tag </canvas> é necessária

+ +

Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento (</canvas>) é necessária.

+ +
+

Nota: Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.

+
+ +

Se o conteúdo alternativo não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.

+ +

O contexto de renderização

+ +

{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, WebGL usa um contexto 3D ("experimental-WebGL") baseado em OpenGL ES.

+ +

Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um script precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método getContext().

+ +
+

Verificação de suporte

+ +

O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um script simplesmente testando a presença do método getContext():

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // codigo de desenho aqui
+} else {
+  // codigo para quando o canvas nao for suportado aqui
+}
+
+
+
+ +

Um modelo de estrutura

+ +

Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:

+ +
+

Nota: não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.

+
+ +
<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

O script inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento onload do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.

+ +

{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}

+ +

Um simples exemplo

+ +

Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.

+ +
<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+ +

Este exemplo parece assim:

+ +

{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..87de5aa19d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,294 @@ +--- +title: Exemplo de Composição +slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo +tags: + - Canvas + - Example + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Esse exemplo demonstra várias operações de composição. A saída se parece assim:

+ +

{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

+ +

Exemplo de composição

+ +

Este código configura os valores globais usados pelo restante do programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
+            'Destination-over','Destination-in','Destination-out','Destination-atop',
+            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
+            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
+            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
+          ].reverse();
+var gcoText = [
+'Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.',
+'A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ',
+'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
+'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
+'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
+'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
+'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
+'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
+'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
+'Somente a nova forma é mostrada.',
+'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
+'Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ',
+'Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)',
+'Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.',
+'Mantêm os pixels mais escuro de ambas camadas.',
+'Mantêm os pixels mais claro de ambas camadas.',
+'Divide a camada inferior pela camada superior invertida.',
+'Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.',
+'Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.',
+'Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.',
+'Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.',
+'Como diferença, mas com menor contraste.',
+'Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.',
+'Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.',
+'Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.',
+'Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+ +

Programa principal

+ +

Quando a página é carregada, esse código é executado para configurar e executar o exemplo:

+ +
window.onload = function() {
+    // lum em sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensiona canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix();
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

E esse código, runComposite (), manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funções Utilitárias

+ +

O programa depende de várias funções utilitárias.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue (tom)
+//              S: Saturation (Saturação)
+//              V: Value (Valor)
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..6d9ff5c33d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,112 @@ +--- +title: Compositing and clipping +slug: Web/Guide/HTML/Canvas_tutorial/Compositing +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

Em todo os nossos exemplos prévios, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.

+ +

Nós podemos, no entanto, mudar este comportamento por configurar a propriedade globalCompositeOperation. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.

+
+ +

globalCompositeOperation

+ +

Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.
+
+ +

Veja os seguintes exemplos de composição para o código dos seguintes exemplos.

+ +

{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

+ +

Caminhos de recorte (Clipping path)

+ +

Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.

+ +

Se nós compararmos caminho de recorte para a propriedade globalCompositeOperation nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.

+ +

No capítulo sobre formas de desenho (drawing shapes) eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Volta o caminho atualmente sendo construído no caminho de recorte atual.
+
+ +

Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.

+ +

Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.

+ +

Um exemplo do recorte

+ +

Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.

+ +

Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.

+ +

Um exemplo de recorte:

+ +

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..f54fca780e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,581 @@ +--- +title: Desenhando formas com canvas +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes +tags: + - Canvas + - Gráficos(2) + - HTML + - HTML Canvas + - HTML5 + - Intermediário + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Agora que criamos nosso ambiente em canvas, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (shapes) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.

+
+ +

A grade

+ +

Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou espaço de coordenadas. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.

+ +

Desenhando retângulos

+ +

Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (paths), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.

+ +

Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Desenha um retângulo preenchido.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Desenha a borda do retângulo.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Limpa um retângulo específico, tornando-o totalmente transparente.
+
+ +

Cada umas das funções recebem os mesmos parâmetros. x e y determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O width (largura) e o height (altura) definem o tamanho do retângulo.

+ +

Abaixo esta listado a função draw() da página anterior, porém utilizando as três funções.

+ +

Exemplo de forma retangular

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

O resultado desse exemplo é mostrado abaixo.

+ +

{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

A função fillRect() desenha um grande quadrado preto de 100 pixels. A função clearRect() por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função strokeRect() é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.

+ +

Posteriormente veremos duas alternativas à função clearRect(), nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.

+ +

Ao contrário das funções de paths que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.

+ +

Desenhando caminhos/regiões (paths)

+ +

Para criar uma camada usando caminhos (regiões ou paths) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.
+
+ +
+
Métodos de Caminhos (Path)
+
Métodos para manipuliar diferentes paths para objetos.
+
+ +
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Desenha uma borda na camada.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Desenha uma forma sólida através de preenchimento.
+
+ +

O primeiro passo para criar um caminho é chamar o beginPath(). Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (shape). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.

+ +
Nota: Quando o caminho atual está vazio, assim como imediatamente depois de chamar beginPath(), ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um moveTo(), independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.
+ +

A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.

+ +


+ O terceiro, e um passo opcional, é chamar closePath(). Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (shape) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.

+ +
Nota: Quando você chama fill(), todas as formas abertas são fechadas automaticamente, assim você não precisa chamar closePath(). Isso não acontece quando você chamar stroke().
+ +

Desenhando um triângulo

+ +

Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+
+ +

O resultado se parece com isso:

+ +

{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Desenhando

+ +

Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função moveTo(). Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Move a caneta (pen) para as coordenadas especificadas por x e y.
+
+ +

Quando o canvas é inicializado ou beginPath() é chamado, você normalmente vai querer usar a função moveTo() para colocar o ponto inicial em outro lugar. Poderíamos também usar moveTo() para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método moveTo() (as linhas vermelhas).

+ +

Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função draw() que vimos anteriormente.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
+    ctx.stroke();
+  }
+}
+
+ +

O resultado aparece como:

+ +

{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função moveTo().

+ +
+

Nota: Para aprender mais sobre a função arc(), veja sobre {{anch("Arcos")}}.

+
+ +

Linhas

+ +

Para desenhar linhas retas, use o método lineTo().

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Desenha uma linha do ponto atual a até a posição especificada por x e y.
+
+ +

Esse método recebe dois argumentos, x e y, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método moveTo().
+
+ O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Isso começa chamando o método beginPath() para iniciar um novo shape path. Em seguida, usamos o método moveTo() para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.

+ +

{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Você notará a diferença entre o triângulo preenchido (filled) e não prenchido (stroked). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o closePath() para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.

+ +

Arcos

+ +

Para desenhar arcos, nós usamos os métodos arc() ou arcTo().

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Desenha um arco centralizado na posição (x, y) com um raio r iniciando em startAngle e terminando em endAngle apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.
+
+ +

Vamos dar uma olhada mais detalhada sobre o método arc, que tem seis parâmetros: x e y são as coordenadas do centro do círculo em que o arco deve ser desenhado. radius é o raio. Os parâmetros startAngle e endAngle definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo x. O parâmetro anticlockwise é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.

+ +
+

Nota: Os ângulos na função arc são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: radians = (Math.PI/180)*degrees.

+
+ +

O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.

+ +

Os dois laços for são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando beginPath(). No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.

+ +

As coordenadas x e y devem ser suficientemente claras. O parâmetros radius e startAngle são fixos. O endAngle começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.

+ +

A manipulação do parâmetro clockwise faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução if faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.

+ +
+

Note: Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // coordenada x
+        var y              = 25+i*50;               // coordenada y
+        var radius         = 20;                    // Raio do Arco
+        var startAngle     = 0;                     // Ponto inicial no círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
+        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Curvas de Bézier Cúbicas e Quadráticas

+ +

O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por cp1x e cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por (cp1x, cp1y) e (cp2x, cp2y).
+
+ +

A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.

+ +

Os parâmetros x e y em ambos os métodos são as coordenadas do ponto final. cp1x e cp1y são as coordenadas do primeiro ponto de controle, e cp2x e cp2y são as coordenadas do segundo ponto de controle.

+ +

Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.

+ +

Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (shape) completa.

+ +

Curvas de Bézier Quadráticas

+ +

Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier quadráticas
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Curvas de Bézier Cúbicas

+ +

Este exemplo desenha um coração usando curvas de Bézier cúbicas.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier cúbicas
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Retângulos

+ +

Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método rect(), que adiciona uma forma retangular a um caminho (path) atualmente aberto.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
+

Desenha um retângulo cujo canto superior esquerdo é especificado por (x, y) com base em uma largura (width) e uma altura (height).

+
+
+ +

Quando este método é executado, o método moveTo() é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.

+ +

Combinando Elementos

+ +

Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (path) para cada forma (shape). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um shape. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// Uma função útil para desenhar um retângulo com cantos arredondados.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+ +

O resultado é:

+ +

{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade fillStyle no contexto de desenho e o uso de uma função auxiliar (neste caso roundedRect()). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.

+ +

Vamos dar uma nova olhada em fillStyle, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (paths) de cor preta (padrão) para branca.

+ +

Path2D

+ +

Como vimos no último exemplo, pode haver uma série de paths e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus paths rapidamente.
+ Vamos ver como podemos construir um objeto de Path2D:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
+

O construtor de Path2D() retorna um objeto Path2D instanciado recentemente, opcionalmente através de um outro objeto Path2D como argumento (cria uma cópia) ou, opcionalmente, com uma string que representam dados de paths em SVG.

+
+
+ +
new Path2D();     // objeto vazio de Path2D
+new Path2D(path); // cópia de outro objeto de Path2D
+new Path2D(d);    // objeto criado a partir de paths em SVG
+ +

Todos os métodos de caminho (path methods) como moveTo, rect, arc ou quadraticCurveTo, etc., que temos de saber acima, estão disponíveis em Path2D.

+ +

A API Path2D também adiciona uma maneira de combinar caminhos usando o método addPath. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Adiciona um path para o path atual através de uma matriz de transformação opcional.
+
+ +

Exemplo de Path2D

+ +

Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de Path2D, de modo que eles estão disponíveis para uso posterior. Com a nova API Path2D, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto Path2D em vez do path atual. Aqui, os métodos stroke e fill são usados, ​​com um argumento de path, para desenhar ambos os objetos na tela, por exemplo.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Usando paths em SVG

+ +

Outro recurso poderoso da nova API de Path2D é a utilização de dados de path em SVG para inicializar caminhos (paths) no canvas. Isso permite que você crie dados de paths que possam ser utilizados tanto no SVG como no canvas.

+ +

O caminho se moverá para o ponto (M10 10) e então se moverá horizontalmente 80 pontos para a direita (h 80), depois 80 pontos para baixo (v 80), então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (z). Você pode ver este exemplo na página do construtor do Path2D.

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..550719e627 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,169 @@ +--- +title: Drawing text +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text +tags: + - Canvas + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

Após entender como aplicar estilos e cores no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.

+
+ +

Desenhando texto

+ +

O context de renderização da canvas fornece dois métodos para renderização textual: 

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
+
+ +

Um exemplo com fillText

+ +

O texto a seguir é rederizado utilizando fillStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

Um exemplo com strokeText

+ +

 

+ +

O texto é preenchido usando o strokeStyle atual.

+ +

 

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

Estilo de Texto

+ +

Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
The current text style being used when drawing text. This string uses the same syntax as the CSS {{cssxref("font")}} property. The default font is 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
+
+ +

Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.

+ +

O diagrama seguinte do WHATWG demonstra as várias baselines suportadas pela propriedade do textBaselineThe top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

O exemplo de uma textBaseline

+ +

Edite o código abaixo e veja as atualizações em tempo real no canvas.

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Advanced text measurements

+ +

In the case you need to obtain more details about the text, the following method allows you to measure it.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
+
+ +

The following code snippet shows how you can measure a text and get its width.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Notas específicas - Gecko

+ +

No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..9cd393b652 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,49 @@ +--- +title: Conclusão +slug: Web/Guide/HTML/Canvas_tutorial/Conclusão +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

Parabéns! Você terminou o Canvas tutorial! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.

+
+ +

Mais exemplos e tutoriais

+ +

Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:

+ +
+
Codepen.io
+
Front End Developer Playground & Code Editor no navegador.
+
HTML5CanvasTutorials
+
Exemplos para a maioria das APIs canvas.
+
31 days of Canvas tutorials
+
Uma ótima fundação para codificação visual em JavaScript .
+
Game development
+
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.
+
+ +

Outras Web APIs

+ +

Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:

+ +
+
WebGL
+
API para renderização interativa de gráficos 3D.
+
SVG
+
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.
+
Web Audio
+
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.
+
+ +

Questions

+ +
+
Stackoverflow
+
Perguntas marcadas como "canvas".
+
Comentários sobre esse tutorial – A comunidade MDN de documentação
+
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..2f9dbab7df --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: Canvas tutorial +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +

 {{CanvasSidebar}}

+ +

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

+ +

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

+ +

Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <canvas>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.

+ +

Antes de começar

+ +

Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

+ +

Nesse tutorial

+ + + +

Veja também

+ + + +

Nota dos contribuidores

+ +

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

+ +
{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}
diff --git a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..d18afddefa --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,115 @@ +--- +title: Otimizando canvas +slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas +tags: + - Canvas + - Gráfico 2D + - Otimização +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.

+
+ +

Dicas de performance

+ +

O que segue é uma coleção de dicas para melhorar a performance.

+ +

Pre-render similar primitives or repeating objects on an off-screen canvas

+ +

If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.

+ +
myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+
+ +

Avoid floating-point coordinates and use integers instead

+ +

Sub-pixel rendering occurs when you render objects on a canvas without whole values.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.

+ +

Don’t scale images in drawImage

+ +

Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

+ +

Use multiple layered canvases for complex scenes

+ +

You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.

+ +

For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+</style>
+
+ +

CSS for large background images

+ +

If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.

+ +

Scaling canvas using CSS transforms

+ +

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Turn off transparency

+ +

If your game uses canvas and doesn’t need to be transparent, set the alpha option to false when creating a drawing context with HTMLCanvasElement.getContext(). This information can be used internally to optimize rendering.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

More tips

+ + + +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..0b0dcfe7e7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,333 @@ +--- +title: Using images +slug: Web/Guide/HTML/Canvas_tutorial/Using_images +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

Até agora nós criamos nossos próprios shapes e aplicamos estilos(applied styles) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!

+
+ +

A importação de imagens para o canvas é basicamente um processo de duas etapas:

+ +
    +
  1. Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.
    2. +
  2. Desenhar a imagem no canvas usando a função drawImage() .
    3. +
+ +

Vamos dar uma olhada em como fazer isso.

+ +

Getting images to draw

+ +

The canvas API is able to use any of the following data types as an image source:

+ +
+
{{domxref("HTMLImageElement")}}
+
These are images created using the Image() constructor, as well as any {{HTMLElement("img")}} element.
+
{{domxref("SVGImageElement")}}
+
These are images embedded using the {{SVGElement("image")}} element.
+
{{domxref("HTMLVideoElement")}}
+
Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.
+
{{domxref("HTMLCanvasElement")}}
+
You can use another {{HTMLElement("canvas")}} element as your image source.
+
+ +

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

+ +

There are several ways to get images for use on a canvas.

+ +

Using images from the same page

+ +

We can obtain a reference to images on the same page as the canvas by using one of:

+ + + +

Using images from other domains

+ +

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

+ +

Using other canvas elements

+ +

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

+ +

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

+ +

Creating an image from scratch

+ +

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

+ +
var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+
+ +

When this script gets executed, the image starts loading.

+ +

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

+ +
var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+
+ +

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

+ +

Embedding an image via data: URL

+ +

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

+ +
var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

+ +

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

+ +

Using frames from a video

+ +

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

+ +

Drawing images

+ +

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
+
+ +
+

SVG images must specify a width and height in the root <svg> element.

+
+ +

Example: A simple line graph

+ +

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

The resulting graph looks like this:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Scaling

+ +

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
+
+ +

Example: Tiling an image

+ +

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

+ +
+

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

The resulting canvas looks like this:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Slicing

+ +

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
+
+ +

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

+ +

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

+ +

Example: Framing an image

+ +

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

+ + + +

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

+ +

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

+ +

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

And here's some CSS to make things look nice:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Tying it all together is the JavaScript to draw our framed images:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

Controlling image scaling behavior

+ +

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/pt-br/web/api/crypto/getrandomvalues/index.html b/files/pt-br/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..7e54e933ed --- /dev/null +++ b/files/pt-br/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,116 @@ +--- +title: RandomSource.getRandomValues() +slug: Web/API/RandomSource/getRandomValues +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

O método RandomSource.getRandomValues() permite que você obtenha valores criptográficos randômicos. O array passado como parametro é preenchido com números randômicos (randômicos no sentido criptográfico).

+ +

Para garantir performance suficiente, as implementações não estão usando um gerador de número randômico de verdade, mas estão usando um gerador de número pseudo-randômico alimentado com um valor com {{Glossary("entropia")}} suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-randômico) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.

+ +

Sintaxe

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parâmetros

+ +
+
typedArray
+
É uma {{jsxref("TypedArray")}} de números inteiros, que pode ser {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, ou {{jsxref("Uint32Array")}}. Todos os elementos no array serão sobrescristos com números randômicos.
+
+ +

Exceções

+ + + +

Exemplo

+ +
/* assumindo que window.crypto.getRandomValues está disponível */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Seus números da sorte são:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definição inicial
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}21.011.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23.021.011.0{{ CompatNo() }}6
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/cryptokey/algorithm/index.html b/files/pt-br/web/api/cryptokey/algorithm/index.html deleted file mode 100644 index d80199a4ed..0000000000 --- a/files/pt-br/web/api/cryptokey/algorithm/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: CryptoKey.algorithm -slug: Web/API/CryptoKey/algorithm -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/algorithm ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade CryptoKey.algorithm de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.

- -

Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.

- -

Sintaxe

- -
result = key.algorithm
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário

- -

"Key" = "Chave"

diff --git a/files/pt-br/web/api/cryptokey/extractable/index.html b/files/pt-br/web/api/cryptokey/extractable/index.html deleted file mode 100644 index 4fe2885cbc..0000000000 --- a/files/pt-br/web/api/cryptokey/extractable/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: CryptoKey.extractable -slug: Web/API/CryptoKey/extractable -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/extractable ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade de apenas leitura CryptoKey.extractable que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.

- -

Sintaxe

- -
result = key.extractable
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário

- -

"Key" = "Chave"

diff --git a/files/pt-br/web/api/cryptokey/type/index.html b/files/pt-br/web/api/cryptokey/type/index.html deleted file mode 100644 index 666de87d23..0000000000 --- a/files/pt-br/web/api/cryptokey/type/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CryptoKey.type -slug: Web/API/CryptoKey/type -tags: - - API - - Apenas Leitura - - CryptoKey - - Propriedades - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/type ---- -

{{APIRef("Web Crypto API")}}

- -

O CryptoKey.type é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico ("secret") ou, para um algoritmo assimétrico, ("public" ou "private", dependendo do seu propósito).

- -

Sintaxe

- -
result = key.type
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário:

- -

"Key" = "Chave"

diff --git a/files/pt-br/web/api/cryptokey/usages/index.html b/files/pt-br/web/api/cryptokey/usages/index.html deleted file mode 100644 index c74a658a32..0000000000 --- a/files/pt-br/web/api/cryptokey/usages/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CryptoKey.usages -slug: Web/API/CryptoKey/usages -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/usages ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade de apenas leitura CryptoKey.usages é um conjunto enumerado que indica os propósitos da key.

- -

Possíveis valores são:

- - - -

Sintaxe

- -
result = key.usages
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário:

- -

"Key" = "Chave"

diff --git a/files/pt-br/web/api/deviceacceleration/index.html b/files/pt-br/web/api/deviceacceleration/index.html deleted file mode 100644 index e8e5432e4a..0000000000 --- a/files/pt-br/web/api/deviceacceleration/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: DeviceAcceleration -slug: Web/API/DeviceAcceleration -tags: - - API - - Experimental - - Interface -translation_of: Web/API/DeviceMotionEventAcceleration -translation_of_original: Web/API/DeviceAcceleration ---- -
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
- -

Um objeto DeviceAcceleration fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.

- -

Propriedades

- -
-
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo X. Somente leitura.
-
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo Y. Somente leitura.
-
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo Z.Somente leitura.
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Definição inicial
diff --git a/files/pt-br/web/api/devicemotioneventacceleration/index.html b/files/pt-br/web/api/devicemotioneventacceleration/index.html new file mode 100644 index 0000000000..e8e5432e4a --- /dev/null +++ b/files/pt-br/web/api/devicemotioneventacceleration/index.html @@ -0,0 +1,43 @@ +--- +title: DeviceAcceleration +slug: Web/API/DeviceAcceleration +tags: + - API + - Experimental + - Interface +translation_of: Web/API/DeviceMotionEventAcceleration +translation_of_original: Web/API/DeviceAcceleration +--- +
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
+ +

Um objeto DeviceAcceleration fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.

+ +

Propriedades

+ +
+
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo X. Somente leitura.
+
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo Y. Somente leitura.
+
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo Z.Somente leitura.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Definição inicial
diff --git a/files/pt-br/web/api/devicemotioneventrotationrate/index.html b/files/pt-br/web/api/devicemotioneventrotationrate/index.html new file mode 100644 index 0000000000..872b3c6f25 --- /dev/null +++ b/files/pt-br/web/api/devicemotioneventrotationrate/index.html @@ -0,0 +1,93 @@ +--- +title: DeviceRotationRate +slug: Web/API/DeviceRotationRate +translation_of: Web/API/DeviceMotionEventRotationRate +translation_of_original: Web/API/DeviceRotationRate +--- +

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

+ +

Um objeto DeviceRotationRate fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.

+ +

Properties

+ +
+
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo Z, em graus por segundo.
+
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo Y, em graus por segundo
+
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo X, em graus por segundo
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificacõesStatusComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Definição inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/pt-br/web/api/devicerotationrate/index.html b/files/pt-br/web/api/devicerotationrate/index.html deleted file mode 100644 index 872b3c6f25..0000000000 --- a/files/pt-br/web/api/devicerotationrate/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: DeviceRotationRate -slug: Web/API/DeviceRotationRate -translation_of: Web/API/DeviceMotionEventRotationRate -translation_of_original: Web/API/DeviceRotationRate ---- -

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

- -

Um objeto DeviceRotationRate fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.

- -

Properties

- -
-
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo Z, em graus por segundo.
-
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo Y, em graus por segundo
-
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo X, em graus por segundo
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificacõesStatusComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Definição inicial.
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/document/activeelement/index.html deleted file mode 100644 index ca10f98461..0000000000 --- a/files/pt-br/web/api/document/activeelement/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Document.activeElement -slug: Web/API/Document/activeElement -tags: - - API - - Document - - HTML DOM - - Property - - Reference -translation_of: Web/API/DocumentOrShadowRoot/activeElement -translation_of_original: Web/API/Document/activeElement ---- -

{{APIRef("DOM")}}

- -

Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.

- -

Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades selectionStart e selectionEnd. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo button, checkbox ou radio.

- -
Note: No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.
- -

Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla tab e ativar estes elementos com a tecla espaço (apertar um botão ou selecionar uma opção).

- -

Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.

- -

Quando não há nada selecionado, o activeElement da página é o {{ HTMLElement("body") }} ou null. 

- -
-

Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.

-
- -

Sintaxe

- -
var curElement = document.activeElement;
-
- -

Exemplo

- -
<!DOCTYPE HTML>
-<html>
-<head>
-    <script type="text/javascript" charset="utf-8">
-    function init() {
-
-        function onMouseUp(e) {
-            console.log(e);
-            var outputElement = document.getElementById('output-element');
-            var outputText = document.getElementById('output-text');
-            var selectedTextArea = document.activeElement;
-            var selection = selectedTextArea.value.substring(
-            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
-            outputElement.innerHTML = selectedTextArea.id;
-            outputText.innerHTML = selection;
-        }
-
-        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
-        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
-    }
-    </script>
-</head>
-<body onload="init()">
-<div>
-    Select some text from one of the Textareas below:
-</div>
-<form id="frm-example" action="#" accept-charset="utf-8">
-<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
-This is Textarea Example One:
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
-</textarea>
-<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
-This is Textarea Example Two:
-Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
-</textarea>
-</form>
-Active Element Id: <span id="output-element"></span><br/>
-Selected Text: <span id="output-text"></span>
-
-</body>
-</html>
-
- -

View on JSFiddle

- -

Notas

- -

Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)

- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidade nos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23.04 [1]9.64.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

[1]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. parent.document.activeElement) é lançado um erro

- -

Eventos relacionados

- - diff --git a/files/pt-br/web/api/document/elementfrompoint/index.html b/files/pt-br/web/api/document/elementfrompoint/index.html deleted file mode 100644 index c64d67dd08..0000000000 --- a/files/pt-br/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Document.elementFromPoint() -slug: Web/API/Document/elementFromPoint -tags: - - API - - CSSOM View - - Method - - NeedsMarkupWork - - NeedsMobileBrowserCompatibility - - Reference -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint ---- -
{{APIRef("DOM")}}
- -

O método elementFromPoint() da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.

- -

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

- -

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é null.

- -

Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.

- -

{{Note("Chamados por documentos XUL devem esperar até o evento onload ser acionado antes de chamar este método.")}}

- -

Sintaxe

- -
var element = document.elementFromPoint(x, y);
- -

Parâmetros

- -
-
x
-
Uma posição horizontal dentro do viewport atual.
-
y
-
Uma position vertical dentro do viewport atual.
-
- -

Valor retornado

- -

O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.

- -

Exemplo

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>exemplo de elementFromPoint</title>
-
-<script>
-function changeColor(newColor) {
-  elem = document.elementFromPoint(2, 2);
-  elem.style.color = newColor;
-}
-</script>
-</head>
-
-<body>
-<p id="para1">Algum texto aqui</p>
-<button onclick="changeColor('blue');">azul</button>
-<button onclick="changeColor('red');">vermelho</button>
-</body>
-</html>
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComment
{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}{{Spec2('CSSOM View')}}Definição Inicial.
- -

Compatibilidade entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support {{CompatChrome(4.0)}}35.510.50{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/pt-br/web/api/document/elementoregistrado/index.html b/files/pt-br/web/api/document/elementoregistrado/index.html deleted file mode 100644 index bff318b3a9..0000000000 --- a/files/pt-br/web/api/document/elementoregistrado/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Document.registerElement() -slug: Web/API/Document/ElementoRegistrado -tags: - - DOM - - Document.registerElement() - - ELEMENTO DOM - - Web Components - - registerElement -translation_of: Web/API/Document/registerElement ---- -

{{APIRef("DOM")}}

- -
-

Note:document.registerElement() está depreciado em favor do customElements.define().

-
- -

O método document.registerElement() registra um novo elemento personalizado no browser e returna um construtor para o novo elemento.

- -
-

Nota: Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja Habilitando componentes web no Firefox.

-
- -

Sintaxe

- -
var constructor = document.registerElement(tag-name, options);
- -

Parâmetros

- -
-
tag-name
-
O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.
-
Opções{{optional_inline}}
-
-

Um projeto com propriedades protótipo como base para o elememento personalizado, e extends, uma existente tag para estender. Ambos são opcionais.

-
-
- -

Exemplo

- -

Aqui é um exemplo muito simples:

- -
var Mytag = document.registerElement('my-tag');
-
- -

Agora as novas tags são registradas no browser.

- -

Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:

- -
document.body.appendChild(new Mytag());
- -

Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:

- -
var mytag = document.getElementsByTagName("my-tag")[0];
-mytag.textContent = "I am a my-tag element.";
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}} -

definição inicial

-
- -

Compatibilidade do Browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3531[1]{{CompatNo}}25{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.4.431[1]{{CompatNo}}25{{CompatNo}}
-
- -

[1] Esta API é implementada uma preferência

- -

Veja também

- - diff --git a/files/pt-br/web/api/document/getselection/index.html b/files/pt-br/web/api/document/getselection/index.html deleted file mode 100644 index 2f52375799..0000000000 --- a/files/pt-br/web/api/document/getselection/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

Esse método funciona de forma idêntica ao método {{domxref("Window.getSelection()")}};  Ele retorna um objeto {{domxref("Selection")}} representando o texto atualmente selecionado no documento.

diff --git a/files/pt-br/web/api/document/readystatechange_event/index.html b/files/pt-br/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..185350cb54 --- /dev/null +++ b/files/pt-br/web/api/document/readystatechange_event/index.html @@ -0,0 +1,83 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +translation_of: Web/API/Document/readystatechange_event +--- +

{{ApiRef}}

+ +

O evento readystatechange é ativado quando o atributo readyState de um documento é alterado.

+ +

Informações gerais

+ +
+
Especificação
+
HTML5
+
Interface
+
Event
+
Propaga
+
Não
+
Cancelável
+
Não
+
Alvo
+
Document
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Exemplo

+ +
// alternativa ao DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+
+ +

Compatibilidade entre Navegadores

+ +

Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento DOMContentLoaded (veja a seção cross-browser fallback).

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/document/registerelement/index.html b/files/pt-br/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..bff318b3a9 --- /dev/null +++ b/files/pt-br/web/api/document/registerelement/index.html @@ -0,0 +1,132 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/ElementoRegistrado +tags: + - DOM + - Document.registerElement() + - ELEMENTO DOM + - Web Components + - registerElement +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}

+ +
+

Note:document.registerElement() está depreciado em favor do customElements.define().

+
+ +

O método document.registerElement() registra um novo elemento personalizado no browser e returna um construtor para o novo elemento.

+ +
+

Nota: Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja Habilitando componentes web no Firefox.

+
+ +

Sintaxe

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parâmetros

+ +
+
tag-name
+
O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.
+
Opções{{optional_inline}}
+
+

Um projeto com propriedades protótipo como base para o elememento personalizado, e extends, uma existente tag para estender. Ambos são opcionais.

+
+
+ +

Exemplo

+ +

Aqui é um exemplo muito simples:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Agora as novas tags são registradas no browser.

+ +

Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:

+ +
document.body.appendChild(new Mytag());
+ +

Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}} +

definição inicial

+
+ +

Compatibilidade do Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Esta API é implementada uma preferência

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/document_object_model/events/index.html b/files/pt-br/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..4d04915450 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/events/index.html @@ -0,0 +1,82 @@ +--- +title: Events and the DOM +slug: DOM/Referencia_do_DOM/Events +translation_of: Web/API/Document_Object_Model/Events +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Introdução

+ +

Este capítulo descreve o Modelo de Eventos do DOM. A interface de Eventos é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e event listeners, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.

+ +

Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em DOM Level 3 Events draft.

+ +

Registrando event listeners

+ +

Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.

+ +

{{domxref("EventTarget.addEventListener")}}

+ +
// Assuming myButton is a button element
+myButton.addEventListener('click', greet, false)
+function greet(event){
+    // print and have a look at the event object
+    // always print arguments in case of overlooking any other arguments
+    console.log('greet:', arguments)
+    alert('hello world')
+}
+
+ +

Este é o método que você deve usar em páginas web modernas.

+ +
+

Nota: Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.

+
+ +

Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.

+ +

atributo HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

O código JavaScript no atributo é passado para o objeto Evento através do parâmetro event . O valor return é tratado de uma maneira especial, descrita na especificação HTML.

+ +
+

Cuidado: Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.

+
+ +

DOM element properties

+ +
// Supondo que myButton seja um elemento button
+myButton.onclick = function(event){alert('Hello world')}
+
+ +

A função pode ser definida para receber um parâmetro event . O valor return é tratado de maneira especial, descrita na especificação HTML.

+ +

O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.

+ +

Acessando interfaces doEvento

+ +

Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.

+ +

A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.

+ +
function print(evt) {
+  // the evt parameter is automatically assigned the event object
+  // take care of the differences between console.log & alert
+  console.log('print:', evt)
+  alert(evt)
+}
+// any function should have an appropriate name, that's what called semantic
+table_el.onclick = print
+
+ + + + diff --git a/files/pt-br/web/api/document_object_model/examples/index.html b/files/pt-br/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..87ec3601e2 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/examples/index.html @@ -0,0 +1,376 @@ +--- +title: Examples of web and XML development using the DOM +slug: DOM/Referencia_do_DOM/Examples +translation_of: Web/API/Document_Object_Model/Examples +--- +

Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.

+ +

Exemplo 1: altura e largura

+ +

O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>width/height example</title>
+<script>
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "<ul>";
+
+  for (var i = 0; i < arrImages.length; i++) {
+    strHtml += "<li>image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  }
+
+  strHtml += "<\/ul>";
+
+  objOutput.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="init();">
+
+<p>Image 1: no height, width, or style
+  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+
+<p>Image 2: height="50", width="500", but no style
+  <img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500">
+</p>
+
+<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;">
+</p>
+
+<div id="output"> </div>
+</body>
+</html>
+
+ +

Exemplo 2: Atributos de Imagem

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Modifying an image border</title>
+
+<script>
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test">
+</p>
+
+<form name="FormName">
+  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
+  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 3: Manipulando Estilos

+ +

Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Changing color and font-size example</title>
+
+<script>
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+
+<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+
+<form>
+  <p><input value="rec" type="button" onclick="changeText();" /></p>
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 4: Usando folhas de estilo

+ +

A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.

+ +
var ss = document.styleSheets;
+
+for(var i = 0; i < ss.length; i++) {
+  for(var j = 0; j < ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}
+ +

Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:

+ +
body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Este script produz o seguinte:

+ +
BODY
+P
+#LUMPY
+
+ +

 

+ +

Exemplo 5: Propagação de Eventos

+ +

Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.

+ +

No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Event Propagation</title>
+
+<style>
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+</style>
+
+<script>
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+  <tr id="tbl1">
+    <td id="c1">one</td>
+  </tr>
+  <tr>
+    <td id="c2">two</td>
+  </tr>
+</table>
+
+</body>
+</html>
+
+ +

Exemplo 6: getComputedStyle

+ +

Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na Lista de Propriedades do DOM CSS.

+ +

GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<title>getComputedStyle example</title>
+
+<script>
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+</script>
+
+<style>
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+</style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+  <p>
+    <button type="button" onclick="cStyles();">getComputedStyle</button>
+    height<input id="t1" type="text" value="1" />
+    max-width<input id="t2" type="text" value="2" />
+    bg-color<input id="t3" type="text" value="3" />
+  </p>
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 7: Exibindo Propriedades de Evento do Objeto

+ +

Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.

+ +

As propriedades dos objetos de evento diferem muito entre os navegadores, o WHATWG DOM Standard lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.

+ +

Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
+
+<style>
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+</style>
+
+<script>
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+</head>
+
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
+
+</html>
+
+ +

Exemplo 8: Usando a interface de tabela  do DOM

+ +

A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.

+ +

Para adicionar uma linha e algumas células a uma tabela existente:

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script>
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i < 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+</script>
+
+ +


+ Notas

+ + + + + + diff --git a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..e6dd923fb5 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,145 @@ +--- +title: How to create a DOM tree +slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

{{draft}}

+ +

Esta página descreve como usar DOM Core API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)

+ +

Criando uma árvore DOM dinamicamente

+ +

Considere o seguinte documento XML:

+ +
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+ +

A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:

+ +
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+ +

Veja também o capítulo DOM chapter of the XUL Tutorial.

+ +

Você pode automatizar a criação de uma árvore DOM usando um algoritmo reverso JXON em associação com a seguinte representação JSON:

+ +
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+ +

E daí?

+ +

As árvores DOM podem ser consultadas usando expressões XPath, convertidas em strings ou gravadas em arquivos locais ou remotos usando XMLSerializer (sem ter que primeiro converter para uma string), POSTed para um servidor web (via XMLHttpRequest), transformado usando XSLT, XLink, convertido para um objeto JavaScript através de um algoritmo JXON, etc.

+ +

Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.

+ +

Veja também

+ + + +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/pt-br/web/api/document_object_model/index.html b/files/pt-br/web/api/document_object_model/index.html new file mode 100644 index 0000000000..b0ae4420a6 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/index.html @@ -0,0 +1,379 @@ +--- +title: Modelo de Objeto de Documento (DOM) +slug: DOM/Referencia_do_DOM +translation_of: Web/API/Document_Object_Model +--- +

{{DefaultAPISidebar("DOM")}}

+ +

O Modelo de Objeto de Documento  (DOM) é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.

+ +

Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.

+ +

Uma introdução ao DOM está disponível.

+ +

DOM interfaces

+ +
+ +
+ +

Interfaces DOM obsoletas

+ +

O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:

+ +
+ +
+ +

Interfaces HTML

+ +

Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.

+ +

Um objeto HTMLDocument também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.

+ +

HTML elemento interfaces

+ +
+ +
+ +

Outras interfaces

+ +
+ +
+ +

Obsoleto HTML interfaces

+ +
+ +
+ +

SVG interfaces

+ +

SVG elemento  interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.

+ +
+

Nota: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/document_object_model/introduction/index.html b/files/pt-br/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..010a5ecd54 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/introduction/index.html @@ -0,0 +1,251 @@ +--- +title: Introdução ao DOM +slug: DOM/Referencia_do_DOM/Introdução +translation_of: Web/API/Document_Object_Model/Introduction +--- +

O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.

+ +

O que é o DOM?

+ +

O Document Object Model (DOM) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.

+ +

Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.

+ +

Os padrões W3C DOM e WHATWG DOM são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.

+ +

Por exemplo, o DOM padrão especifica que o método getElementsByTagName no código abaixo deve retornar uma lista de todos os elementos <p> no documento:

+ +
var paragraphs = document.getElementsByTagName("p");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de document que representa o próprio documento, o objeto de table que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}}  para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.

+ +

O DOM moderno é construído usando várias APIs que trabalham juntas. O DOM principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a HTML DOM API adiciona suporte para representar documentos HTML no DOM principal.

+ +

DOM e JavaScript

+ +

O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.

+ +

No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:

+ +

API (página HTML ou XML) = DOM + JS (linguagem de script)

+ +

O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:

+ +
# exemplo de DOM com Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # propriedade do objeto de documento DOM
+p_list = doc.getElementsByTagName("para")
+
+ +

Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte JavaScript technologies overview.

+ +

Acessando o DOM

+ +

Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.

+ +

Quando você cria um script - seja embutido em um elemento(tag) <script> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.

+ +

O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):

+ +
<body onload="window.alert('Welcome to my home page!');">
+
+ +

Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o H1 à árvore deste documento:

+ +
<html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Tipos de dados fundamentais

+ +

Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.

+ +
+

Nota: Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como elementos, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.

+
+ +

A tabela a seguir descreve brevemente esses tipos de dados.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipos de dados (Interface)Descrição
{{domxref("Document")}}Quando um membro retorna um objeto do tipo document (por exemplo, a propriedade ownerDocument de um elemento retorna o document ao qual ele pertence),esse objeto é o próprio objeto de  document raiz. O capítulo DOM document Reference descreve o objeto do document .
{{domxref("Node")}}Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.
{{domxref("Element")}} +

O tipo do element é baseado em node. Isso se refere a um elemento ou um nó do tipo element retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}}  retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o element que acabou de ser criado no DOM. Os objetos do element  implementam a interface DOM Element e também a mais básica interface Node, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).

+
{{domxref("NodeList")}}Uma nodeList é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa nodeList são acessados por índices em uma das duas formas: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Esses dois são equivalentes. No primeiro, item() é o método único no objeto da nodeList. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.
{{domxref("Attribute")}}Quando um attribute é retornado por um membro (por exemplo, pelo método createAttribute()), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.
{{domxref("NamedNodeMap")}} +

 é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

+ +

Um namedNodeMap é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O namedNodeMap possui um método item() para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

+
+ +

Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um attribute, por exemplo, e referir-se a um array de nós DOM como um nodeList. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.

+ +

DOM interfaces

+ +

Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML form pega a propriedade name da interface do HTMLFormElement mas a sua propriedade className vem da interface HTMLElement. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.

+ +

Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.

+ +

Interfaces e Objetos

+ +

Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como createCaption e insertRow. Mas como é também um elemento HTML, table implementa a interface Element descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface Node mais básica, de onde deriva Element.

+ +

Quando você pegar a referência para um objeto table, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.

+ +
var tabela = document.getElementById("table");
+var atributosTabela = tabela.attributes; // interface Node/Element
+for (var i = 0; i < atributosTabela.length; i++) {
+  // interface HTMLTableElement: atributo border
+  if (atributosTabela[i].nodeName.toLowerCase() == "border")
+    tabela.border = "1";
+}
+// interface HTMLTableElement: atributo summary
+table.summary = "nota: aumento de borda";
+
+ +

Interfaces Core no DOM

+ +

Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de DOM Examples ao fim desse livro.

+ +

Objetos Document e window são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto window representa algo como o browser, e o objeto document é a raiz de todo o documento em si. Element herda dessa interface Node genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto table na seção anterior.

+ +

A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.

+ + + +

Testando a DOM API

+ +

Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <script>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.

+ +

Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <script> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.

+ +

Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função test() como achar necessário, criar mais botões ou adicionar elementos se necessário.

+ +
<html>
+  <head>
+    <title>Testes DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>text</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">preto
+          <option value="darkblue">azul escuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">branco
+          <option value="lightgrey">cinza
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://algum.website.tld/pagina.html" id="amostra">
+        (link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+
+ +

Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.

+ +
+
Figura 0.1 Página de Teste DOM
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (bgColor), a cor dos hiperlinks (aLink), e a cor do texto (text). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git a/files/pt-br/web/api/document_object_model/whitespace/index.html b/files/pt-br/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..f4bebc3678 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,227 @@ +--- +title: Whitespace no DOM +slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM +tags: + - DOM + - Intermediário +translation_of: Web/API/Document_Object_Model/Whitespace +--- +

O problema

+ +

A presença de espaço branco no DOM pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui whitespace entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que white-space: pre irá funcionar em CSS). Isso significa que:

+ + + +

Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):

+ +
<!-- Meu documento -->
+<html>
+<head>
+  <title>Meu documento</title>
+</head>
+<body>
+  <h1>Cabeçalho</h1>
+  <p>
+    Parágrafo
+  </p>
+</body>
+</html>
+
+ +

+ +

Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o whitespace.

+ +

Facilitando as coisas

+ +

É possível formatar o código como mostrado abaixo para contornar o problema:

+ +
<!-- Impressão bonita convencional
+     com espaços brancos (whitespaces) entre as tags:
+ -->
+<div>
+ <ul>
+  <li>Posição 1</li>
+  <li>Posição 2</li>
+  <li>Posição 3</li>
+ </ul>
+</div>
+
+<!-- Impressão bonita ajustada ao problema:
+ -->
+<div
+ ><ul
+  ><li>Posição 1</li
+  ><li>Posição 2</li
+  ><li>Posição 3</li
+ ></ul
+></div>
+
+ +


+ O código Javascript abaixo define funções diversas que fazem a manipulação de whitespace no DOM mais fácil.

+ +
/**
+ * Em todo, o whitespace é definido como um dos caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Isto não usa o "\s" do Javascript porque inclui espaços
+ * que não quebram (e alguns outros caracteres).
+ */
+
+
+/**
+ * Determina se um conteúdo de texto do nó é inteiramente whitespace.
+ *
+ * @param nod  Um nó implementando a interface |CharacterData| (por exemplo:
+ *             |Text|, |Comment|, ou nó |CDATASection|
+ * @return     Verdadeiro se todo conteúdo de texto de |nod| é whitespace,
+ *             de outra forma é falso.
+ */
+function is_all_ws( nod )
+{
+  // Usa as características do ECMA-262 Edition 3 String e RegExp
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina se um nó deve ser ignorado pela função de iterador.
+ *
+ * @param nod  Um objeto implementando a interface DOM1 |Node|.
+ * @return     verdadeiro se o nó é:
+ *                1) Um nó |Text| que é todo whitespace
+ *                2) Um nó |Comment|
+ *             do contrário é falso.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Um nó de comentário
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // um nó de texto, todo whitespace
+}
+
+/**
+ * Versão de |previousSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |previousSibling| é uma propriedade
+ * de todos os nós do DOM que dá o nó irmão, o nó que é
+ * um filho do mesmo parente, que ocorre imediatamente antes do
+ * nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de |nextSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de  |lastChild| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |lastChild| é uma propriedade
+ * de todos os nós do DOM que dá o último dos nós contidos
+ * diretamente no nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O último filho do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |firstChild| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O primeiro nó do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |data| que não inclui whitespace no início
+ * e final e normaliza todos whitespaces para um espaço individual.  (Normalmente
+ * |data| é uma propriedade de nós de texto que dá o texto do nó.)
+ *
+ * @param txt  O nó de texto do qual data deve ser retornado
+ * @return     Uma string dando os conteúdos de um nó de texto com
+ *             whitespace colapsado.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa características do ECMA-262 Edition 3 String e RegExp
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Exemplo

+ +

O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja "Este é o terceiro parágrafo", e então muda o atributo da classe e os conteúdos daquele parágrafo.

+ +
var cur = first_child(document.getElementById("teste"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.")
+  {
+      cur.className = "mágica";
+      cur.firstChild.textContent = "Este é o parágrafo mágico";
+  }
+  cur = node_after(cur);
+}
+
diff --git a/files/pt-br/web/api/documentorshadowroot/activeelement/index.html b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html new file mode 100644 index 0000000000..ca10f98461 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html @@ -0,0 +1,165 @@ +--- +title: Document.activeElement +slug: Web/API/Document/activeElement +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +--- +

{{APIRef("DOM")}}

+ +

Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.

+ +

Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades selectionStart e selectionEnd. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo button, checkbox ou radio.

+ +
Note: No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.
+ +

Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla tab e ativar estes elementos com a tecla espaço (apertar um botão ou selecionar uma opção).

+ +

Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.

+ +

Quando não há nada selecionado, o activeElement da página é o {{ HTMLElement("body") }} ou null. 

+ +
+

Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.

+
+ +

Sintaxe

+ +
var curElement = document.activeElement;
+
+ +

Exemplo

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Select some text from one of the Textareas below:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+Active Element Id: <span id="output-element"></span><br/>
+Selected Text: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

View on JSFiddle

+ +

Notas

+ +

Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)

+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidade nos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23.04 [1]9.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. parent.document.activeElement) é lançado um erro

+ +

Eventos relacionados

+ + diff --git a/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..c64d67dd08 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,133 @@ +--- +title: Document.elementFromPoint() +slug: Web/API/Document/elementFromPoint +tags: + - API + - CSSOM View + - Method + - NeedsMarkupWork + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +--- +
{{APIRef("DOM")}}
+ +

O método elementFromPoint() da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.

+ +

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

+ +

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é null.

+ +

Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.

+ +

{{Note("Chamados por documentos XUL devem esperar até o evento onload ser acionado antes de chamar este método.")}}

+ +

Sintaxe

+ +
var element = document.elementFromPoint(x, y);
+ +

Parâmetros

+ +
+
x
+
Uma posição horizontal dentro do viewport atual.
+
y
+
Uma position vertical dentro do viewport atual.
+
+ +

Valor retornado

+ +

O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.

+ +

Exemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>exemplo de elementFromPoint</title>
+
+<script>
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Algum texto aqui</p>
+<button onclick="changeColor('blue');">azul</button>
+<button onclick="changeColor('red');">vermelho</button>
+</body>
+</html>
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComment
{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}{{Spec2('CSSOM View')}}Definição Inicial.
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support {{CompatChrome(4.0)}}35.510.50{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/pt-br/web/api/documentorshadowroot/getselection/index.html b/files/pt-br/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..2f52375799 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,9 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

Esse método funciona de forma idêntica ao método {{domxref("Window.getSelection()")}};  Ele retorna um objeto {{domxref("Selection")}} representando o texto atualmente selecionado no documento.

diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/element/accesskey/index.html deleted file mode 100644 index e0425e3645..0000000000 --- a/files/pt-br/web/api/element/accesskey/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -

A propriedade Element.accessKey define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

- -
-

Nota: A propriedade Element.accessKey é raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).

-
- -

 

- -

 

diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/element/addeventlistener/index.html deleted file mode 100644 index fea1e67e7b..0000000000 --- a/files/pt-br/web/api/element/addeventlistener/index.html +++ /dev/null @@ -1,322 +0,0 @@ ---- -title: Element.addEventListener() -slug: Web/API/Element/addEventListener -translation_of: Web/API/EventTarget/addEventListener ---- -

{{apiref("DOM Events")}}

- -

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

- -

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

- -

Sintaxe

- -
alvo.addEventListener(type,listener[, options]);
-alvo.addEventListener(type,listener[, useCapture, wantUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
- -
-
type
-
Uma linha de texto que representa o tipo de evento a ser esperado.
-
listener
-
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
-
useCapture {{ optional_inline() }}
-
Se true, useCapture indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à listener registrada antes de serem enviados à qualquer EventTarget abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, useCapture é false.
-
wantsUntrusted {{ Non-standard_inline() }}
-
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
-
- -
Nota: useCapture tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.
- - -

Exemplo

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>Exemplo de Evento DOM</title>
-
-<style>
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-</style>
-
-<script>
-// Função para mudar o conteúdo de t2
-function modifyText() {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = "three";
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", modifyText, false);
-}
-
-document.addEventListener("DOMContentLoaded", load, false);
-</script>
-
-</head>
-<body>
-
-<table id="t">
-   <tr><td id="t1">one</td></tr>
-   <tr><td id="t2">two</td></tr>
-</table>
-
-</body>
-</html>
-
- -

View on JSFiddle

- -

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

- -

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>Exemplo de Evento DOM</title>
-
-<style>
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-</style>
-
-<script>
-
-// Função para mudar o conteúdo de t2
-function modifyText(new_text) {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", function(){modifyText("four")}, false);
-}
-</script>
-
-</head>
-<body onload="load();">
-
-<table id="t">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
-</body>
-</html>
-
- -

Notas

- -

Por que usar addEventListener?

- -

addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

- - - -

Existe outra alternativa, uma maneira ultrapassada de registrar esperas de evento.

- -

Adicionando uma espera de evento durante um disparo de evento

- -

Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.

- -

Múltiplas esperas de evento idênticas

- -

Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método removeEventListener.

- -

O valor de this no manipulador

- -

É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.

- -

Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:

- -
<table id="t" onclick="modifyText();">
-  . . .
- -

O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).

- -
Nota: JavaScript 1.8.5 introduz o método Function.prototype.bind(), que permite especificar o valor que deve ser usado como this para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que this será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.
- -

Este é um exemplo com e sem bind:

- -
var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.onclick1 = function(evento) {
-    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
-  };
-  this.onclick2 = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
-  };
-  elemento.addEventListener('click', this.onclick1, false);
-  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
-}
-
- -

Outra solução é usar uma função especial chamada handleEvent para capturar quaisquer eventos:

- -
var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.handleEvent = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
-    switch(evento.type) {
-      case 'click':
-        // seu codigo aqui...
-        break;
-      case 'dblclick':
-        // seu codigo aqui...
-        break;
-    }
-  };
-  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
-  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
-}
-
- -

Internet Explorer antigos e attachEvent

- -

Em versões do Internet Explorer anteriores ao IE9, você precisa usar attachEvent em vez do padrão addEventListener. Para dar suporte ao IE, o exemplo acima pode ser modificado para:

- -
if (el.addEventListener) {
-  el.addEventListener('click', modifyText, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifyText);
-}
-
- -

Existe um porém com attachEvent: o valor de this será a referência ao objeto window em vez do elemento do qual foi disparado.

- -

Uma maneira ultrapassada de registrar esperas de evento

- -

addEventListener() foi introduzido com as especificações de Eventos DOM 2. Antes disso, esperas de evento eram registradas assim:

- -
// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
-el.onclick = modifyText;
-
-// Usando uma expressão de função
-element.onclick = function() {
-    // ... lógica da função ...
-};
-
- -

Esse método substitui as esperar de evento de click no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como blur (onblur), keypress (onkeypress), e assim por diante.

- -

Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do addEventListener() sejam necessários.

- -

Problemas de memória

- -
var i;
-var els = document.getElementsByTagName('*');
-
-// Caso 1
-for(i=0 ; i<els.length ; i++){
-  els[i].addEventListener("click", function(e){/*fazer algo*/}, false});
-}
-
-// Caso 2
-function processarEvento(e){
-  /*fazer algo*/
-}
-
-for(i=0 ; i<els.length ; i++){
-  els[i].addEventListener("click", processarEvento, false});
-}
-
-
- -

No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar element.removeEventListener porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer myElement.removeEventListener("click", processEvent, false).

- -

Compatiblidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture é opcional1.06.09.011.60{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
-
- -

Notas Gecko

- - - -

Notas Webkit

- - - -

Veja também

- - - -

Especificação

- - diff --git a/files/pt-br/web/api/element/blur_event/index.html b/files/pt-br/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..7eb9263be2 --- /dev/null +++ b/files/pt-br/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur (evento) +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +

O evento blur é acionado quando um elemento perde foco. A diferença principal entre este evento e focusout é que apenas o segundo 'borbulha'.

+ +

Informação geral

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Não
+
Cancelável
+
Não
+
Alvo
+
Elemento
+
Ação padrão
+
Nenhuma
+
+ +

{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o body do documento.{{NoteEnd}}

+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Delegação do evento

+ +

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento focusout nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do addEventListener para true:

+ +

Conteúdo HTML 

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

Conteúdo JavaScript

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Event_delegation')}}

+ +

Compatibilidade entre navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).

+ +

Eventos relacionados

+ + diff --git a/files/pt-br/web/api/element/focus_event/index.html b/files/pt-br/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..9f6dd7117d --- /dev/null +++ b/files/pt-br/web/api/element/focus_event/index.html @@ -0,0 +1,137 @@ +--- +title: focus +slug: Web/Events/focus +translation_of: Web/API/Element/focus_event +--- +

O evento focus é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento focusin, é que esse segundo "borbulha".

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{ domxref("FocusEvent") }}
+
Borbulha
+
Não
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +
Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Eventos Delegados

+ +

Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento  focusin que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento  addEventListener  como true:

+ +

{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

+ +

(Exemplo de codigo do evento blur (event))

+ +

Compatibilidade de Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

Eventos Relacionais

+ + diff --git a/files/pt-br/web/api/element/focusin_event/index.html b/files/pt-br/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..797424de54 --- /dev/null +++ b/files/pt-br/web/api/element/focusin_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusin +slug: Web/Events/focusin +translation_of: Web/API/Element/focusin_event +--- +

O evento focusin é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento  focus, é que apenas o focusin delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Sim
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilidade com Demais Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Eventos Relacionais

+ + diff --git a/files/pt-br/web/api/element/focusout_event/index.html b/files/pt-br/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..8f72b211b2 --- /dev/null +++ b/files/pt-br/web/api/element/focusout_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusout +slug: Web/Events/focusout +translation_of: Web/API/Element/focusout_event +--- +

O evento focusout é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento blur, é que esse ultimo não gera "borbulhas".

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Sim
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Eventos Relcionados

+ + diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html deleted file mode 100644 index 93f5faee9a..0000000000 --- a/files/pt-br/web/api/element/name/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -tags: - - API - - DOM - - Element - - NeedsBrowserCompatibility - - NeedsUpdate - - Property - - Reference - - Web -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -

{{ APIRef("DOM") }}

- -

Summary

- -

name recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.

- -
-

Nota: A propriedade name não existe para outros elementos; diferente de tagName e nodeName, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

-
- -

name pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um form ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.

- -

Sintaxe

- -
HTMLElement.name = string;
-var elName = HTMLElement.name;
-
-var fControl = HTMLFormElement.elementName;
-var controlCollection = HTMLFormElement.elements.elementName;
-
- -

Exemplo

- -
<form action="" name="formA">
-  <input type="text" value="foo">
-</form>
-
-<script type="text/javascript">
-
-  // Recebe uma referência ao primeiro elemento no formulário
-  var formElement = document.forms['formA'].elements[0];
-
-  // Fornece um name a ele
-  formElement.name = 'inputA';
-
-  // Exibe o valor do input
-  alert(document.forms['formA'].elements['inputA'].value);
-
-</script>
-
- -

Notas

- -

No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade name de objetos do DOM criados com {{ domxref("document.createElement()") }}.

- -

Especificação

- -

Especificação W3C DOM 2 HTML:

- - diff --git a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html deleted file mode 100644 index e9b2004719..0000000000 --- a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Comparativo entre Event Targets -slug: Web/API/Event/Comparativo_entre_Event_Targets -tags: - - DOM - - Event - - event target -translation_of: Web/API/Event/Comparison_of_Event_Targets ---- -
{{ ApiRef() }}
- -

Event targets

- -

É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.

- -

Há 5 tipos de targets a se considerar:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDefinido emObjetivo
event.targetDOM Event Interface -

O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:

- - 
-element.dispatchEvent(event)
-
-
event.currentTargetDOM Event InterfaceO EventTarget do qual o EventListeners está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.
event.relatedTargetDOM MouseEvent InterfaceIdentifica um alvo secundário para o evento.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e .explicitOriginalTarget mostrará o nó texto. Diferente de .originalTarget, .explicitOriginalTarget nunca irá conter um conteúdo anônimo.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes.
- -

Uso de explicitOriginalTarget e originalTarget

- -

TODO: Disponível apensas em navegadores Mozilla-based?

- -

TODO: Adequado apenas para desenvolvedores de extensões?

- -

Exemplos

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Comparison of Event Targets</title>
-    <style>
-        table {
-            border-collapse: collapse;
-            height: 150px;
-            width: 100%;
-        }
-        td {
-            border: 1px solid #ccc;
-            font-weight: bold;
-            padding: 5px;
-            min-height: 30px;
-        }
-        .standard {
-            background-color: #99ff99;
-        }
-        .non-standard {
-            background-color: #902D37;
-        }
-    </style>
-</head>
-<body>
-    <table>
-    <thead>
-        <tr>
-            <td class="standard">Original target dispatching the event <small>event.target</small></td>
-            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
-            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
-        </tr>
-    </thead>
-    <tr>
-        <td id="target"></td>
-        <td id="currentTarget"></td>
-        <td id="relatedTarget"></td>
-        <td id="explicitOriginalTarget"></td>
-        <td id="originalTarget"></td>
-    </tr>
-</table>
-<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
-<script>
-    function handleClicks(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('currentTarget').innerHTML = e.currentTarget;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
-        document.getElementById('originalTarget').innerHTML = e.originalTarget;
-    }
-
-    function handleMouseover(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-    }
-
-    document.addEventListener('click', handleClicks, false);
-    document.addEventListener('mouseover', handleMouseover, false);
-</script>
-</body>
-</html>
- -

Uso de target e relatedTarget

- -

A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.

- - - - - - - - - - - - - - - - - - - -
Tipo de Eventoevent.targetevent.relatedTarget
mouseoverO EventTarget do qual o dispositivo apontador entrou.O EventTarget do qual o dispositivo apontador saiu.
mouseoutO EventTarget do qual o dispositivo apontador saiu.O EventTarget do qual o dispositivo apontador entrou.
- -

TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.

- -

Exemplo

- -
<hbox id="outer">
-  <hbox id="inner"
-        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
-        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
-        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
-</hbox>
-
diff --git a/files/pt-br/web/api/event/comparison_of_event_targets/index.html b/files/pt-br/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..e9b2004719 --- /dev/null +++ b/files/pt-br/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,167 @@ +--- +title: Comparativo entre Event Targets +slug: Web/API/Event/Comparativo_entre_Event_Targets +tags: + - DOM + - Event + - event target +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +
{{ ApiRef() }}
+ +

Event targets

+ +

É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.

+ +

Há 5 tipos de targets a se considerar:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDefinido emObjetivo
event.targetDOM Event Interface +

O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceO EventTarget do qual o EventListeners está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.
event.relatedTargetDOM MouseEvent InterfaceIdentifica um alvo secundário para o evento.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e .explicitOriginalTarget mostrará o nó texto. Diferente de .originalTarget, .explicitOriginalTarget nunca irá conter um conteúdo anônimo.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes.
+ +

Uso de explicitOriginalTarget e originalTarget

+ +

TODO: Disponível apensas em navegadores Mozilla-based?

+ +

TODO: Adequado apenas para desenvolvedores de extensões?

+ +

Exemplos

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Uso de target e relatedTarget

+ +

A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.

+ + + + + + + + + + + + + + + + + + + +
Tipo de Eventoevent.targetevent.relatedTarget
mouseoverO EventTarget do qual o dispositivo apontador entrou.O EventTarget do qual o dispositivo apontador saiu.
mouseoutO EventTarget do qual o dispositivo apontador saiu.O EventTarget do qual o dispositivo apontador entrou.
+ +

TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.

+ +

Exemplo

+ +
<hbox id="outer">
+  <hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+</hbox>
+
diff --git a/files/pt-br/web/api/eventtarget/addeventlistener/index.html b/files/pt-br/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..fea1e67e7b --- /dev/null +++ b/files/pt-br/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,322 @@ +--- +title: Element.addEventListener() +slug: Web/API/Element/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +

{{apiref("DOM Events")}}

+ +

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

+ +

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

+ +

Sintaxe

+ +
alvo.addEventListener(type,listener[, options]);
+alvo.addEventListener(type,listener[, useCapture, wantUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
+ +
+
type
+
Uma linha de texto que representa o tipo de evento a ser esperado.
+
listener
+
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
+
useCapture {{ optional_inline() }}
+
Se true, useCapture indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à listener registrada antes de serem enviados à qualquer EventTarget abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, useCapture é false.
+
wantsUntrusted {{ Non-standard_inline() }}
+
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
+
+ +
Nota: useCapture tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.
+ + +

Exemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Exemplo de Evento DOM</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+// Função para mudar o conteúdo de t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+</script>
+
+</head>
+<body>
+
+<table id="t">
+   <tr><td id="t1">one</td></tr>
+   <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

View on JSFiddle

+ +

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

+ +

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Exemplo de Evento DOM</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+
+// Função para mudar o conteúdo de t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+</script>
+
+</head>
+<body onload="load();">
+
+<table id="t">
+  <tr><td id="t1">one</td></tr>
+  <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Notas

+ +

Por que usar addEventListener?

+ +

addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

+ + + +

Existe outra alternativa, uma maneira ultrapassada de registrar esperas de evento.

+ +

Adicionando uma espera de evento durante um disparo de evento

+ +

Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.

+ +

Múltiplas esperas de evento idênticas

+ +

Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método removeEventListener.

+ +

O valor de this no manipulador

+ +

É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.

+ +

Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:

+ +
<table id="t" onclick="modifyText();">
+  . . .
+ +

O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).

+ +
Nota: JavaScript 1.8.5 introduz o método Function.prototype.bind(), que permite especificar o valor que deve ser usado como this para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que this será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.
+ +

Este é um exemplo com e sem bind:

+ +
var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.onclick1 = function(evento) {
+    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
+  };
+  this.onclick2 = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
+  };
+  elemento.addEventListener('click', this.onclick1, false);
+  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
+}
+
+ +

Outra solução é usar uma função especial chamada handleEvent para capturar quaisquer eventos:

+ +
var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.handleEvent = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
+    switch(evento.type) {
+      case 'click':
+        // seu codigo aqui...
+        break;
+      case 'dblclick':
+        // seu codigo aqui...
+        break;
+    }
+  };
+  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
+  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
+}
+
+ +

Internet Explorer antigos e attachEvent

+ +

Em versões do Internet Explorer anteriores ao IE9, você precisa usar attachEvent em vez do padrão addEventListener. Para dar suporte ao IE, o exemplo acima pode ser modificado para:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

Existe um porém com attachEvent: o valor de this será a referência ao objeto window em vez do elemento do qual foi disparado.

+ +

Uma maneira ultrapassada de registrar esperas de evento

+ +

addEventListener() foi introduzido com as especificações de Eventos DOM 2. Antes disso, esperas de evento eram registradas assim:

+ +
// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
+el.onclick = modifyText;
+
+// Usando uma expressão de função
+element.onclick = function() {
+    // ... lógica da função ...
+};
+
+ +

Esse método substitui as esperar de evento de click no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como blur (onblur), keypress (onkeypress), e assim por diante.

+ +

Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do addEventListener() sejam necessários.

+ +

Problemas de memória

+ +
var i;
+var els = document.getElementsByTagName('*');
+
+// Caso 1
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", function(e){/*fazer algo*/}, false});
+}
+
+// Caso 2
+function processarEvento(e){
+  /*fazer algo*/
+}
+
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", processarEvento, false});
+}
+
+
+ +

No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar element.removeEventListener porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer myElement.removeEventListener("click", processEvent, false).

+ +

Compatiblidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture é opcional1.06.09.011.60{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
+
+ +

Notas Gecko

+ + + +

Notas Webkit

+ + + +

Veja também

+ + + +

Especificação

+ + diff --git a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html new file mode 100644 index 0000000000..c569966b5a --- /dev/null +++ b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html @@ -0,0 +1,35 @@ +--- +title: Uso de busca Cross-global +slug: Web/API/Fetch_API/Uso_de_busca_Cross-global +translation_of: Web/API/Fetch_API/Cross-global_fetch_usage +--- +

 

+ +

Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.

+ +

O "edge case"

+ +

Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:

+ + + +

O problema

+ +

No passado, resolveríamos o URL relativo contra o global atual, por exemplo:

+ +
let absolute = new URL(relative, window.location.href)
+ +

Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.

+ +

A solução

+ +

No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função fetch() que está sendo usada (veja {{bug (1432272)}}). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:

+ +
let absolute = new URL(relative, frame.contentWindow.location.href)
+ +

Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.

diff --git a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html b/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html deleted file mode 100644 index c569966b5a..0000000000 --- a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Uso de busca Cross-global -slug: Web/API/Fetch_API/Uso_de_busca_Cross-global -translation_of: Web/API/Fetch_API/Cross-global_fetch_usage ---- -

 

- -

Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.

- -

O "edge case"

- -

Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:

- - - -

O problema

- -

No passado, resolveríamos o URL relativo contra o global atual, por exemplo:

- -
let absolute = new URL(relative, window.location.href)
- -

Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.

- -

A solução

- -

No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função fetch() que está sendo usada (veja {{bug (1432272)}}). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:

- -
let absolute = new URL(relative, frame.contentWindow.location.href)
- -

Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.

diff --git a/files/pt-br/web/api/geolocation_api/index.html b/files/pt-br/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..b6799afa16 --- /dev/null +++ b/files/pt-br/web/api/geolocation_api/index.html @@ -0,0 +1,227 @@ +--- +title: Usando geolocation +slug: Using_geolocation +tags: + - Geolocation API + - Guia(2) +translation_of: Web/API/Geolocation_API +--- +

A API geolocation permite que o usuário forneça sua localização a aplicativos web se ele desejar. Por questões de privacidade, o usuário é perguntado se permite fornecer informações de localização.

+ +

O objeto geolocation

+ +

O aplicativo de geolocalização é utilizado através de um objeto filho chamado geolocation localizado dentro do objeto navigator.  Se o objeto existe, os serviços de geolocalização estarão disponíveis. Você pode adicionalmente testar a presença da geolocalização:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  alert("I'm sorry, but geolocation services are not supported by your browser.");
+}
+
+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Ao iniciar no Gecko 1.9.2 (Firefox 3.6), add-ons podem obter o objeto de geolocalização obtendo a referência para o serviço de geolocaliazação como se ve a seguir:

+ +
var geolocation = Components.classes["@mozilla.org/geolocation;1"]
+                            .getService(Components.interfaces.nsIDOMGeoGeolocation);
+
+ +

Obtendo a posição atual

+ +

Para obter a localização atual do usuário, você pode utiliza o método getCurrentPosition().  Isto inicia uma requisição assíncrona para identificar a posição do usuário, e consulta o hardware de localização para conseguir informações atualizadas. Quando a posição é determinada, uma rotina específica de retorno é executada. Você pode opcionalmente gerar uma segunda rotina de retorno se um erro ocorrer.  Um terceiro, e opcional, parâmetro é a interface "opções" onde você pode configurar o tempo máximo da posição recebida e o tempo a se esperar por uma solicitação.

+ +

Use getCurrentPosition() se você deseja uma única posição rapidamente, independente da precisão.  Dispositivos com GPS, por exemplo, podem levar um minuto ou mais para conseguir a localização, e portanto dados menos precisos (localização do IP location ou rede wifi) podem retornar do método getCurrentPosition().

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

O exemplo acima irá fazer a função the do_something() executar quando a localização for obtida.

+ +

Verificando a posição atual

+ +
Se os dados de posição mudam (sejam pelo movimento do dispositivo ou se uma informação mais precisa for recebida), se pode configurar um retorno que é feito com esta informação de posição atual. Isto é feito usando a função watchPosition(), a qual tem os mesmos parâmetros de entrada da função getCurrentPosition(). Seu retorno é chamada múltiplas vezes, permitindo que o navegador ou atualize sua posição enquanto você se move, ou forneça uma localização mais precisa enquanto diferentes técnicas são usadas para localizar sua posição. O erro do retorno, o qual é opcional assim como no getCurrentPosition(), é chamado uma única vez, se nenhum resultado válido retornar.
+ +

O watchPosition() pode ser usado sem que não haja a chamada inicial de getCurrentPosition().

+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+);
+ +

O método watchPosition() retorna um número de ID que pode ser usado para identificar a posição solicitada; você pode usar esse valor em conjunto com o método clearWatch(), parando a localização do usuário.

+ +
navigator.geolocation.clearWatch(watchID);
+
+
+ +

watchPosition()retorna um callback sucesso e erro (como getCurrentPosition) e um objeto positionObjects, que pode ter três propriedades:

+ + + +

Segue uma chamada para watchPosition:

+ +
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});
+ +

Exemplo de watchPosition em uso: thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition
+ 

+ +

Imprimindo uma posição

+ +

A localização do usuário é impressa usando o objeto Position, que tem os seguintes campos:

+ +
+
timestamp
+
Momento em que a leitura foi feita, como DOMTimeStamp.
+
coords
+
Objecto nsIDOMGeoPositionCoords indicando a localização.
+
address {{ gecko_minversion_inline("1.9.2") }} {{obsolete_inline("14.0")}}
+
{{ interface("nsIDOMGeoPositionAddress") }} objeto especificando o endereço correspondente, se disponível.
+
+ +


+ Manipulação de erros

+ +

Retornando o callback de erro, se fornecido, chamar getCurrentPosition() e watchPosition(), tem a seguinte assinatura:

+ +
function errorCallback(PositionError error);
+
+ +

O PositionError tem a seguinte estrutura de campos:

+ +
+
code
+
Um código de erro numérico dos seguintes procedimentos:
+
UNKNOWN_ERROR (valor numérico 0)
+
O processo de aquisição de localização falhou devido a um erro de qualquer outro código nesta interface.
+
PERMISSION_DENIED (valor numérico 1)
+
O processo de aquisição da localização falhou porque a origem aplicativo não tem permissão para usar a API de Geolocalização.
+
POSITION_UNAVAILABLE (valor numérico 2)
+
A posição do dispositivo não pôde ser determinada. Um ou mais provedores de localização utilizados no processo de aquisição local gerou um erro interno que falou o processo completamente.
+
TIMEOUT (numeric value 3)
+
O comprimento máximo de tempo especificado.
+
message
+
Uma mensagem de erro legível para uso em registros e depuração, mas não para exibir para o usuário.
+
+ +

Compatibilidade do navegador

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorSuporte BásicoGeolocation Level 2
Internet ExplorerIE9 RC---
Firefox (Gecko)3.5 (1.9.1)---
Opera10.60---
Safari | Chrome | WebKit5 | 5 | 533---
+ +

Solicitando permissão

+ +

Qualquer add-on hospedado em addons.mozilla.org, que faz uso de dados de geolocalização, deve solicitar antes uma permissão. A função a seguir vai solicitar a permissão de um modo semelhante ao prompt. A resposta do usuário será salva no parâmetro pref. A função fornecida no parâmetro de callback será chamado com um valor booleano que indica a resposta do usuário. Se for true, o add-on poderá retornar dados de geolocalização.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Veja também

+ + + +
{{ HTML5ArticleTOC() }}
diff --git a/files/pt-br/web/api/history_api/example/index.html b/files/pt-br/web/api/history_api/example/index.html new file mode 100644 index 0000000000..a4dfc4b68f --- /dev/null +++ b/files/pt-br/web/api/history_api/example/index.html @@ -0,0 +1,418 @@ +--- +title: Exemplo de navegação Ajax +slug: Web/API/History_API/Exemplo +tags: + - Exemplo navegação ajax +translation_of: Web/API/History_API/Example +--- +

Esse é um exemplo de um web site em AJAX web site composto por apenas três páginas (first_page.php, second_page.php e third_page.php). Para ver como funciona, crie os arquivos a seguir (ou git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

+ +
Nota: Para integrar completamente os elementos {{HTMLElement("form")}} com esse mecanismo, porfavor dê uma olhada no parágrafo Enviando formulários e enviando arquivos.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "Primeira página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>Esse é o conteúdo de <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Segunda página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>Esse é o conteúdo de <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Terceira página";
+    $page_content = "<p>Esse é o conteúdo de <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>Esse é o rodapé. Ele é compartilhado entre todas as páginas ajax.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">Primeiro exemplo</a>
+| <a class="ajax-nav" href="second_page.php">Segundo exemplo</a>
+| <a class="ajax-nav" href="third_page.php">Terceiro exemplo</a>
+| <a class="ajax-nav" href="unexisting.php">Página inexistente</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(antes de implementar em um ambiente de trabalho, porfavor leia a nota sobre a compatibilidade de declaração de const)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+ +
Nota: A atual implementação de const (declaração de constante) não é parte do ECMAScript 5. É suportada no Firefox e no Chrome (V8) e parcialmente suportada no Opera 9+ e no Safari. Ela  não é suportada nas versões do Internet Explorer 6 ao 9, ou na versão preview do Internet Explorer 10. const será definida no ECMAScript 6, mas com semânticas diferentes. Similarmente ao que acontece com variáveis definidas como let, constantes declaradas com const serão block-scoped, limitando seu escopo no bloco. Nós só usamos isso com propósito didático. Se você quer total compatibilidade com os navegadores, substitua todas as declarações const por declarações var.
+ +

Para mais informações, veja: Manipulando o histórico do navegador.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/history_api/exemplo/index.html b/files/pt-br/web/api/history_api/exemplo/index.html deleted file mode 100644 index a4dfc4b68f..0000000000 --- a/files/pt-br/web/api/history_api/exemplo/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Exemplo de navegação Ajax -slug: Web/API/History_API/Exemplo -tags: - - Exemplo navegação ajax -translation_of: Web/API/History_API/Example ---- -

Esse é um exemplo de um web site em AJAX web site composto por apenas três páginas (first_page.php, second_page.php e third_page.php). Para ver como funciona, crie os arquivos a seguir (ou git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

- -
Nota: Para integrar completamente os elementos {{HTMLElement("form")}} com esse mecanismo, porfavor dê uma olhada no parágrafo Enviando formulários e enviando arquivos.
- -

first_page.php:

- -
-
<?php
-    $page_title = "Primeira página";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>Esse é o conteúdo de <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

second_page.php:

- -
-
<?php
-    $page_title = "Segunda página";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>Esse é o conteúdo de <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

third_page.php:

- -
-
<?php
-    $page_title = "Terceira página";
-    $page_content = "<p>Esse é o conteúdo de <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

css/style.css:

- -
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
- -

include/after_content.php:

- -
<p>Esse é o rodapé. Ele é compartilhado entre todas as páginas ajax.</p>
-
- -

include/before_content.php:

- -
<p>
-[ <a class="ajax-nav" href="first_page.php">Primeiro exemplo</a>
-| <a class="ajax-nav" href="second_page.php">Segundo exemplo</a>
-| <a class="ajax-nav" href="third_page.php">Terceiro exemplo</a>
-| <a class="ajax-nav" href="unexisting.php">Página inexistente</a> ]
-</p>
-
-
- -

include/header.php:

- -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
- -

js/ajax_nav.js:

- -

(antes de implementar em um ambiente de trabalho, porfavor leia a nota sobre a compatibilidade de declaração de const)

- -
-
"use strict";
-
-const ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
- -
Nota: A atual implementação de const (declaração de constante) não é parte do ECMAScript 5. É suportada no Firefox e no Chrome (V8) e parcialmente suportada no Opera 9+ e no Safari. Ela  não é suportada nas versões do Internet Explorer 6 ao 9, ou na versão preview do Internet Explorer 10. const será definida no ECMAScript 6, mas com semânticas diferentes. Similarmente ao que acontece com variáveis definidas como let, constantes declaradas com const serão block-scoped, limitando seu escopo no bloco. Nós só usamos isso com propósito didático. Se você quer total compatibilidade com os navegadores, substitua todas as declarações const por declarações var.
- -

Para mais informações, veja: Manipulando o histórico do navegador.

- -

Veja também

- - diff --git a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html new file mode 100644 index 0000000000..13609ee260 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -0,0 +1,91 @@ +--- +title: Arrastar e soltar arquivos +slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do gerenciador de arquivos da plataforma subjacente e soltado s em uma página da Web.

+ +

Os principais passos para o drag and drop é definir a drop zone (ou seja  definir um elemento para a queda dos arquivos) e definir  event handlers para os eventos {{event("drop")}} e {{event("dragover")}} . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em MDN's drag-and-drop repository (pull requests e/ou issues são bem-vindas).

+ +

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).

+ +

Definindo a drop zone

+ +

O elemento de destino do evento {{event("drop")}} precisa de um event handler global  {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("div")}}

+ +
<div id="drop_zone" ondrop="dropHandler(event);">
+  <p>Drag one or more files to this Drop Zone ...</p>
+</div>
+ +

Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+  <p>Drag one or more files to this Drop Zone ...</p>
+</div>
+
+ +

Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:

+ +
#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+
+ +
+

Nota: Observe que os eventos dragstart e dragend não são acionados ao arrastar um arquivo para o navegador do OS.

+
+ +

Processo de drop

+ +

O evento {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","files")}} para acessar cada arquivo.

+ +

Este exemplo mostra como escrever o nome de cada arquivo arrastado,  no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o {{domxref("File","File API")}}.

+ +

Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.

+ +
function dropHandler(ev) {
+  console.log('File(s) dropped');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
+    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+      // Se os itens soltos não forem arquivos, rejeite-os
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Use a interface DataTransfer para acessar o (s) arquivo (s)
+    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+}
+ +

Impedir o evento de arrastar padrão do navegador

+ +

O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDefault","preventDefault()")}} para desativar o manipulador padrão de arrastar e soltar do navegador.

+ +
function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.html b/files/pt-br/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..10e5592b91 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,258 @@ +--- +title: Arrastar e soltar +slug: DragDrop/Drag_and_Drop +tags: + - Avançado + - Guia(2) + - HTML5 + - Visão Geral + - XUL + - arrastar e soltar + - eventos +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (draggable) com o mouse, arrastar elementos até um elemento soltável (droppable), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (draggable) seguem o ponteiro do mouse durante a operação de arrastar (drag).

+ +

Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).

+ +

NT: Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos drag e drop e seus variantes conforme texto original. Sendo portanto mantidos também os termos draggable e droppable.

+ +

Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.

+ +

Eventos Drag

+ +

O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os {{domxref("DragEvent","eventos drag")}} são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.

+ +

Todos os tipos de evento drag são associados a um manipulador global de eventos. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventOn Event HandlerDescription
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}Acionado quando um elemento ou seleção de texto está sendo arrastado.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja Terminando um evento Drag.)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja Determinando Drop Targets.)
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja Começando uma Operação Drag.)
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja Realizando um Drop.)
+ +

Note que eventos dragstart e dragend não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.

+ +

Interfaces

+ +

A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.

+ +

A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo copy ou move), os dados do do evento drag (um ou mais itens) e o tipo de cada item drag (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.

+ +

Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único drag item e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o tipo(kind) de data (seja ela string ou file) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.

+ +

O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.

+ +

A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.

+ +

Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.

+ +

Interfaces específicas para o Gecko

+ +

A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são cfunções convenientes para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja Dragging and Dropping Multiple Items. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as propriedades específicas para o Gecko e Métodos específicos para o Gecko.

+ +

O básico

+ +

Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.

+ +

Identificando o que é arrastável (draggable)

+ +

Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir

+ +
function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer)
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+<body>
+ <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
+</body>
+
+ +

Veja a referência do atributo draggable e o Guia de operações drag para mais informações.

+ +

Defina os dados do drag

+ +

A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo text/html.

+ +

Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que segura os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para gerenciar os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.

+ +
function dragstart_handler(ev) {
+  // Adiciona os dados do arraste (drag)
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "<p>Parágrafo de exemplo</p>");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+
+ +

Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja Tipos recomendados de Drag Types e para mais informações sobre os dados do arraste (drag data), veja Drag Data.

+ +

Defina uma imagem de arraste (drag image)

+ +

Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.

+ +
function dragstart_handler(ev) {
+  // Cria uma imagem e então a utiliza como a "drag image".
+  // NOTA: mude "example.gif" como uma imagem existente, caso contrário
+  // ela não será criada e a imagem padrão será utilizada como padrão.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+ +

Para aprender mais sobre arrastar imagens de retorno, veja Definindo a imagem de retorno do arraste (Drag).

+ +

Defina o efeito do arraste (Drag effect)

+ +

A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso hover) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.

+ +

Três efeitos podem ser definidos: 

+ +

copy indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do drop). 

+ +

move indica que os dados sendo arrastados irá ser movido.

+ +

link indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). 

+ +

Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.

+ +

O exemplo a seguir mostra como utilizar essa propriedade.

+ +
function dragstart_handler(ev) {
+  // Determina o efeito de arraste para copy
+  ev.dataTransfer.dropEffect = "copy";
+}
+
+ +

Veja Efeitos do Arraste (Drag Effects) para mais detalhes.

+ +

Defina uma zona de soltura (drop zone)

+ +

Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (drop zone) ou que seja soltável (droppable), o elemento precisa ter ambos os atributos  {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.

+ +
function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+<body>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
+</body>
+
+ +

Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).

+ +

Para mais informações, veja Especificando pontos de soltura (Drop Targets).

+ +

Manipulando o efeito de soltura (drop)

+ +

O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.

+ +

O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).

+ +
function dragstart_handler(ev) {
+ // Adiciona o id do elemento alvo para o objeto de transferência de dados
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+<body>
+ <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
+</body>
+
+ +

Para mais informações, veja Realizando uma soltura (Drop).

+ +

Fim da soltura (Drag end)

+ +

No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (source) - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.

+ +

Para mais informações sobre manipular o final de uma operação de arraste, veja Finalizando um arraste (Drag).

+ +

Interoperabilidade

+ +

Como podem ser visto no DataTransferItem interface's Browser Compatibility table, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}  que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.

+ +

Exemplos e demonstrações

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlcontentelement/select/index.html b/files/pt-br/web/api/htmlcontentelement/select/index.html new file mode 100644 index 0000000000..63fae05c69 --- /dev/null +++ b/files/pt-br/web/api/htmlcontentelement/select/index.html @@ -0,0 +1,98 @@ +--- +title: HTMLContentElement.select +slug: Web/API/HTMLContentElement/Seletor +tags: + - API + - HTMLContentElement + - HTMLContentElement.select + - Select +translation_of: Web/API/HTMLContentElement/select +--- +

{{ APIRef("Web Components") }}

+ +

A propriedade HTMLContentElement.select reflete o atributo selecionado. É um {{domxref("DOMString")}} contendo uma lista de spaço-separado de seletores CSS que seleciona o conteúdo para inserir em lugar do elemento <content>.

+ +

Sintaxe

+ +
object.select = "CSSselector CSSselector ...";
+
+ +

Exemplo

+ +
// Select <h1> elements and elements with class="error"
+myContentObject.select = "h1 .error";
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusCommentário
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilidade do browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ComponenteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Se Shadow DOM não estiver habilitado no Firefox, os elementos <content> se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi o primeiro implementado no Firefox 28 e está atrás de uma preferência, dom.webcomponents.enabled, ao qual é desabilitado por padrão.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlcontentelement/seletor/index.html b/files/pt-br/web/api/htmlcontentelement/seletor/index.html deleted file mode 100644 index 63fae05c69..0000000000 --- a/files/pt-br/web/api/htmlcontentelement/seletor/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: HTMLContentElement.select -slug: Web/API/HTMLContentElement/Seletor -tags: - - API - - HTMLContentElement - - HTMLContentElement.select - - Select -translation_of: Web/API/HTMLContentElement/select ---- -

{{ APIRef("Web Components") }}

- -

A propriedade HTMLContentElement.select reflete o atributo selecionado. É um {{domxref("DOMString")}} contendo uma lista de spaço-separado de seletores CSS que seleciona o conteúdo para inserir em lugar do elemento <content>.

- -

Sintaxe

- -
object.select = "CSSselector CSSselector ...";
-
- -

Exemplo

- -
// Select <h1> elements and elements with class="error"
-myContentObject.select = "h1 .error";
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçõesStatusCommentário
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
- -

Compatibilidade do browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
ComponenteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Se Shadow DOM não estiver habilitado no Firefox, os elementos <content> se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi o primeiro implementado no Firefox 28 e está atrás de uma preferência, dom.webcomponents.enabled, ao qual é desabilitado por padrão.

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/accesskey/index.html b/files/pt-br/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..e0425e3645 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,19 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

A propriedade Element.accessKey define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

+ +
+

Nota: A propriedade Element.accessKey é raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).

+
+ +

 

+ +

 

diff --git a/files/pt-br/web/api/htmlelement/blur/index.html b/files/pt-br/web/api/htmlelement/blur/index.html deleted file mode 100644 index 25a2273aec..0000000000 --- a/files/pt-br/web/api/htmlelement/blur/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: HTMLElement.blur() -slug: Web/API/HTMLElement/blur -tags: - - API - - DOM HTML - - Foco - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/blur ---- -
{{ APIRef("HTML DOM") }}
- -

O método HTMLElement.blur() remove o foco do teclado no elemento corrente.

- -

Sintaxe

- -
elemento.blur();
- -

Exemplos

- -

Removendo o foco de um input de texto

- -

HTML

- -
<input type="text" id="meuTexto" value="Texto Exemplo">
-<br><br>
-<button type="button" onclick="focusInput()">Clique para definir o foco</button>
-<button type="button" onclick="blurInput()">Clique para remover o foco</button>
- -

JavaScript

- -
function focusInput() {
-  document.getElementById('meuTexto').focus();
-}
-function blurInput() {
-  document.getElementById('meuTexto').blur();
-}
- -

Resultado

- -

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}} 
- -

Compatibilidade com navegadores

- - - -

{{Compat("api.HTMLElement.blur")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 2cb4ba63b0..0000000000 --- a/files/pt-br/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef }}

- -

A propriedade HTMLElement.dataset permite o acesso, em modo de leitura e escrita, a todos os atributos de dados personalizado (data-*) no elemento. Ele é um mapa de DOMString, com uma entrada para cada atributo de dados personalizado.

- -

O nome de um atributo de dados customizado inicia com data-. Ele deve conter somente letras, números e os seguintes caracteres: dash (-), dot (.), collon(:), underscore (_). Além disso, ele não deve conter letras ASCII captalizadas (A à Z).

- -

Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras

- - - -

A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:

- - - -

A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.

- -

Por exemplo, o atributo data-abc-def corresponde a chave abcDef.

- -

Sintaxe

- -
string = element.dataset.camelCasedName;
-element.dataset.camelCasedName = string;
- -

Exemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
-</div>
-
-var el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
-
-// 'someDataAttr' in el.dataset === false
-
-el.dataset.someDataAttr = 'mydata';
-// 'someDataAttr' in el.dataset === true
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspeficicaçãoStatusComentário
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Sem mudanças desde o último  snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.
- -

Compatibilidade com Browsers

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/focus/index.html b/files/pt-br/web/api/htmlelement/focus/index.html deleted file mode 100644 index 8f798b3d86..0000000000 --- a/files/pt-br/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

O método HTMLElement.focus()  seta o foco em um determinado elemento em especifico, caso esse elemento permita ter o foco neste elemento.

- -

Síntaxe

- -
element.focus()
- -

Especificação

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}} 
- -

Notas

- -

Caso você utilize o HTMLElement.focus() por meio da manipulação de um evento mousedown , você deve utilizar o evento event.preventDefault() a fim de o foco não sair do arquivo HTMLElement.

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/innertext/index.html b/files/pt-br/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..1ab5e81027 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/innertext/index.html @@ -0,0 +1,86 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Resumo

+ +

Node.innerText é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.

+ +

{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.

+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduzida, baseado no rascunho da especifição de innerText. Ver whatwg/html#465 e whatwg/compat#5 para histórico.
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico4{{ CompatGeckoDesktop(45) }}69.6 (provavelmente antes)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico2.3 (provavelmente antes){{ CompatGeckoMobile(45) }}10 (provavelmente antes)124.1 (provavelmente antes)
+
+ +

Ver também

+ + diff --git a/files/pt-br/web/api/htmlelement/input_event/index.html b/files/pt-br/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..dd69baf988 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/input_event/index.html @@ -0,0 +1,248 @@ +--- +title: input +slug: Web/Events/input +translation_of: Web/API/HTMLElement/input_event +--- +

O evento input do DOM é disparado sincronicamente quando o valor de um elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} é alterado. (Para elementos input com type=checkbox ou type=radio, o evento input não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no contenteditable editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha contenteditable como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do designMode editors.

+ +

Informações gerais

+ +
+
Specification
+
HTML5, DOM Level 3 Events
+
Interface
+
{{domxref("Event")}}, {{domxref("InputEvent")}}
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
The value or the content is modified.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9[2]{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatVersionUnknown}}15{{CompatVersionUnknown}}
on contenteditable element{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}[4] +

 

+ 		15{{CompatVersionUnknown}}
when designMode is "on"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}15{{CompatVersionUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("12")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
on contenteditable element{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
when designMode is "on"{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on Mac OS X.

+ +

[2] IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

+ +

[3] Prior to Opera 15, Opera did not fire an input event after dropping text in an input field.

+ +

[4] The event target is the innermost element at the caret position.

+ +

Veja também

+ + + +

Also the change event is related. change fires less often than input – it only fires when the changes are committed by the user.

diff --git a/files/pt-br/web/api/htmlmediaelement/abort_event/index.html b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..62243a2762 --- /dev/null +++ b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

O evento abort é disparado quando o carregamento de um recurso foi interrompido.

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("UIEvent")}} se gerado a partir da interface do usuário, caso contrário será {{domxref("Event")}}.
+
Bubbles
+
Não
+
Cancelável
+
Não
+
Alvo
+
{{domxref("Element")}}
+
Ação Padrão
+
Nenhuma
+
+ +

Propriedades

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (O mais elevado da árvore DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{domxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{domxref("Boolean")}}É possível cancelar o evento?
view {{readOnlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window do documento)
detail {{readOnlyInline}}long (float)0.
+
diff --git a/files/pt-br/web/api/htmlorforeignelement/blur/index.html b/files/pt-br/web/api/htmlorforeignelement/blur/index.html new file mode 100644 index 0000000000..25a2273aec --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/blur/index.html @@ -0,0 +1,89 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLElement/blur +tags: + - API + - DOM HTML + - Foco + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/blur +--- +
{{ APIRef("HTML DOM") }}
+ +

O método HTMLElement.blur() remove o foco do teclado no elemento corrente.

+ +

Sintaxe

+ +
elemento.blur();
+ +

Exemplos

+ +

Removendo o foco de um input de texto

+ +

HTML

+ +
<input type="text" id="meuTexto" value="Texto Exemplo">
+<br><br>
+<button type="button" onclick="focusInput()">Clique para definir o foco</button>
+<button type="button" onclick="blurInput()">Clique para remover o foco</button>
+ +

JavaScript

+ +
function focusInput() {
+  document.getElementById('meuTexto').focus();
+}
+function blurInput() {
+  document.getElementById('meuTexto').blur();
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}} 
+ +

Compatibilidade com navegadores

+ + + +

{{Compat("api.HTMLElement.blur")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlorforeignelement/dataset/index.html b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..2cb4ba63b0 --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +

{{ APIRef }}

+ +

A propriedade HTMLElement.dataset permite o acesso, em modo de leitura e escrita, a todos os atributos de dados personalizado (data-*) no elemento. Ele é um mapa de DOMString, com uma entrada para cada atributo de dados personalizado.

+ +

O nome de um atributo de dados customizado inicia com data-. Ele deve conter somente letras, números e os seguintes caracteres: dash (-), dot (.), collon(:), underscore (_). Além disso, ele não deve conter letras ASCII captalizadas (A à Z).

+ +

Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras

+ + + +

A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:

+ + + +

A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.

+ +

Por exemplo, o atributo data-abc-def corresponde a chave abcDef.

+ +

Sintaxe

+ +
string = element.dataset.camelCasedName;
+element.dataset.camelCasedName = string;
+ +

Exemplos

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
+</div>
+
+var el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspeficicaçãoStatusComentário
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Sem mudanças desde o último  snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.
+ +

Compatibilidade com Browsers

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlorforeignelement/focus/index.html b/files/pt-br/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..8f798b3d86 --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

O método HTMLElement.focus()  seta o foco em um determinado elemento em especifico, caso esse elemento permita ter o foco neste elemento.

+ +

Síntaxe

+ +
element.focus()
+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}} 
+ +

Notas

+ +

Caso você utilize o HTMLElement.focus() por meio da manipulação de um evento mousedown , você deve utilizar o evento event.preventDefault() a fim de o foco não sair do arquivo HTMLElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html deleted file mode 100644 index da14879b31..0000000000 --- a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html +++ /dev/null @@ -1,1281 +0,0 @@ ---- -title: Usando IndexedDB -slug: Web/API/IndexedDB_API/Usando_IndexedDB -tags: - - API IndexedDB Tutorial Avançado -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -
-

IndexedDB é uma forma de armazenar dados no navegador do usuário. Com ele você pode criar aplicações web com possibilidade de fazer query sem necessidade de conexão, suas aplicações podem funcionar tanto online quanto offline. 

-
- -

Sobre esse documento

- -

Esse tutorial utiliza a API assíncrona do IndexedDB. Se você não está familiarizado com IndexedDB, você pode ler Conceitos básicos sobre IndexedDB.

- -

Para a documentação de referência, veja o artigo sobre API IndexedDB, pois nele contém os tipos de objetos utilizados no IndexedDB,  como também métodos da API, tanto síncrona como assíncrona. 

- -

Padrão básico

- -

O IndexedDB encoraja o uso do seguinte padrão:

- -
    -
  1. Abrir um banco de dados.
    2. -
  2. Criar um ObjectStore ao atualizar o banco. 
    3. -
  3. Iniciar uma transação e e faz um request para fazer alguma operação no banco, como adicionar ou obter dados.
    4. -
  4. -
    Esperar a operação ser completada ouvindo algum evento DOM.
    -
    5. -
  5. -
    Fazer algo com o resultado da query (que pode ser obtida pelo objeto request).
    -
    6. -
- -

OK, então, agora com esses conceitos em mente, nós podemos fazer coisas mais concretas.

- -

Criando e estruturando o banco

- -

Pelo fato  da especificação ainda estar evoluindo, as implementações do IndexedDB tem prefixos de navegadores. Os navegadores podem ter implementações diferentes da API IndexedDB até a especificação ser consolidada. Mas uma vez que tudo chegar a um consenso, os navegadores tirarão seus prefixos. Atualmente, algumas implementações removeram o prefixo: Internet Explorer 10, Firefox 16, Chrome 24. Quando eles usam prefixo, navegadores baseados no Gecko usam o prefixo moz, enquanto os navegadores baseados no WebKit usam o prefixo webkit.

- -

Usando uma versão experimental do IndexedDB

- -

Se você quiser testar seu código em navegadores que usam prefixo, você pode usar o código abaixo:  

- -
// Na linha abaixo, você deve incluir os prefixos do navegador que você vai testar.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// Não use "var indexedDB = ..." se você não está numa function.
-// Posteriormente, você pode precisar de referências de algum objeto window.IDB*:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
-// (Mozilla nunca usou prefixo nesses objetos, então não precisamos window.mozIDB*)
- -

Tome cuidado, implementações prefixadas podem estar com bugs ou implementando especificações antigas. Portanto, não é recomendado usar em produção. É preferível não usar IndexedDB em navegadores antigos:

- -
if (!window.indexedDB) {
-    window.alert("Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.");
-}
-
- -

Abrindo um banco

- -

Começamos todo o processo assim:

- -
// Abrindo o banco de dados
-var request = window.indexedDB.open("DBteste", 3);
-
- -

Abrir um banco é como qualquer outra operação — Você tem que "requerer (request)".

- -

A requisição de abertura não abre o banco ou inicia a transação. A chamada da função open() retorna um objeto IDBOpenDBRequest com o resultado (success) ou um erro que você terá que tratar. Muitas outras funções assíncronas no IndexedDB fazem a mesma coisa - retornam um objeto IDBRequest com o resultado ou erro. O resultado para a função open é uma instância de IDBDatabase.

- -

O segundo parâmetro para o método open é a versão do banco. A versão do banco determina seu schema — os registros no banco e sua estrutura. Se o banco não existe ainda, ele é criado pela operação open, então o evento onupgradeneeded é chamado e você cria o schema do banco nesse evento. Se o banco existe mas você está fornecendo um novo número de versão, o evento onupgradeneeded é chamado imediatamente, permitindo você tratar a atualização do schema. Para mais informações sobre isso veja Updating the version of the database.

- -
-

O número de versão é um unsigned long long, o que significa que ele pode ver um inteiro muito grande. Isso também significa que você não pode usar float, pois ele será convertido em um inteiro pequeno e a transação pode não acontecer, ou o evento upgradeneeded pode não ser chamado. Então se você usar 2.4 como versão:

- -
var request = indexedDB.open("DBteste", 2.4); // não faça isso, pois a versão será convertida para 2.
-
- -

Gerenciando handlers

- -

A primeira coisa que você vai querer fazer em quase todos os requests é tratar os casos de success e error:

- -
request.onerror = function(event) {
-  // Fazer algo com request.errorCode!
-};
-request.onsuccess = function(event) {
-  // Fazer algo com request.result!
-};
- -

Qual das duas funções, onsuccess() ou onerror(),  será chamada? Se tudo correr bem, o evento de sucesso (que é um evento DOM event com propriedade type setada "success") é chamado com request como seu target. Uma vez chamado, a função onsuccess() no request é chamada com o evento de sucesso em seu contexto. Por outro lado, se acontecer algum problema, um evento de erro (que é um evento DOM com a propriedade type setada para "error") é chamado no request. Então a função onerror()  com o evento erro em seu contexto.

- -

A API IndexedDB é feita para minimizar a necessidade de manipular erros, então você não fará muitos eventos de erro (ao menos, se você usar a API!) No  caso de abrir um banco, portanto, existe algumas condições comuns para eventos de erro. O problema mais comum é o usuário não dar permissão para criar o banco. Um dos principais objetivos do IndexedDB é permitir muitos dados serem armazenados para uso offline. (Para aprender mais sobre o quanto cada navegador pode armazenar, veja Storage limits).  

- -

Obviamente, navegadores não querem armazenar dados que poluem seu computador, então o navegador mostra uma mensagem ao usuário na primeira vez que um aplicativo tenta abrir o IndexedDB. O usuário pode escolher permitir ou negar acesso. O IndexedDB também é desabilitado no modo privado dos navegadores (ctrl+shift+N no Chrome e ctrl+shift+P no Firefox). Isso acontece porque o intuito do modo privado é não deixar rastros na navegação.

- -

Agora, assumindo que o usuário aprovou seu request para criar o banco, e você recebeu success; Qual é o próximo passo? O request foi gerado com a chamada de indexedDB.open(), e request.result é uma instância de IDBDatabase, e você definitivamente vai querer armazenar isso para usar depois. Veja abaixo:

- -
var db;
-var request = indexedDB.open("DBteste");
-request.onerror = function(event) {
-  alert("Você não habilitou minha web app para usar IndexedDB?!");
-};
-request.onsuccess = function(event) {
-  db = request.result;
-};
-
- -

Tratando Erros

- -

Como mencionado acima, o evento de erro é chamado quando o request dá erro. Se você quer evitar manipuladores de erro a cada request, você pode adicionar um único manipulador de erro no objeto db, como abaixo:

- -
db.onerror = function(event) {
-  // Função genérica para tratar os erros de todos os requests desse banco!
-  alert("Database error: " + event.target.errorCode);
-};
-
- -

Um dos erros mais comuns ao abrir o banco é VER_ERR. Ele indica que a versão do banco existente é maior que a versão que você quer abrir.

- -

Criando ou atualizando a versão do banco

- -

Quando você cria um novo banco ou aumenta sua versão, o evento onupgradeneeded será chamado. No manipulador deste evento, você deve criar o objectStore necessário para a versão do banco:

- -
// Este evento é implementado somente em navegadores mais recentes
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // cria um objectStore para esse banco
-  var objectStore = db.createObjectStore("nome", { keyPath: "minhaChave" });
-};
- -

Neste caso, o banco já terá objectStores de suas versões anteriores, então você não terá que criar esses objectStores de novo. Você somente precisará criar um novo objectStore qualquer, ou deletar objectStores da versão anterior que não serão utilizados. Se você precisa mudar um objectStore existente (mudar o keyPath, por exemplo),  então você precisa deletar o objectStore antigo e criá-lo novamente com as novas opções. (Note que isso irá deletar a informação no objectStore! Se você precisa salvar a informação, você deve ler isso e salvá-lo em algum lugar antes de atualizar o banco.)

- -

Blink/Webkit suporta a versão atual da especificação, nas versões do Chrome 23+ e Opera 17+; IE10+ também suporta. Outros motores e versões antigas não implementam a versão atual da especificação e não suportam a assinatura indexedDB.open(name, version).onupgradeneeded ainda.  Para mais informação sobre como atualizar a versão do banco em Webkit/Blink, veja IDBDatabase reference article.

- -

Estruturando o banco

- -

Agora a estrutura do banco. IndexedDB usa "armazens de objetos" em vez de tabelas, e um único banco de dados pode conter qualquer número de "armazem de objetos". Sempre que um valor é armazenado num objectStore, ele é associado a uma chave. Existe várias maneiras diferentes de uma chave ser mostrada, dependendo do que o objectStore usa, um key path ou key generator.

- -

A tabela abaixo mostra as direfentes chaves suportadas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Key Path (keyPath)Key Generator (autoIncrement)Description
NãoNãoEste objectStore pode ter qualquer tipo de valor primitivo como número ou string. Você deve suprir uma chave separada sempre que adicionar um novo valor.
SimNãoEste objectStore pode simplesmente armazenar objetos JavaScript. O objeto deve ter uma propriedade com o mesmo nome do key path.
NãoSimEste objectStore pode possuir qualquer tipo de valor. A chave é gerada para você, automaticamente, ou você pode suprir uma chave separada, caso utilize uma chave específica.
SimSimEste objectStore suporta somente objetos JavaScript. Normalmente uma chave é gerada e o valor dela é armazenado no objeto em uma propriedade com o mesmo nome da key path. Portanto, se a propriedade já existe, o valor dela será usado como chave, em vez do valor gerado.
- -

Você também pode criar índices em qualquer objectStore. Um indice deixa você olhar os valores armazenados no objectStore usando o valor de uma propriedade do objectStore, em vez de sua chave.

- -

Adicionalmente, indices tem a habilidade de forçar restrições simples nos dados armazenados. Setando uma flag única quando criar o índice, reforça que dois objetos são armazenados contendo o mesmo valor para o key path do índice. Então, por exemplo, se você tem um objeto armazenado que tem um conjunto de pessoas, e você quer ter certeza que ninguém tera o mesmo e-mail, você pode usar um índice com flag única para forçar isso.

- -

Isso soa meio confuso, mas este exemplo pode iluminar o conceito. Primeiro, vamos definir alguns dados a serem usados no exemplo:

- -
// Isso é o que os dados de nossos clientes será.
-const DadosClientes = [
-  { ssn: "444-44-4444", nome: "Bill", idade: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", nome: "Donna", idade: 32, email: "donna@home.org" }
-];
-
- -

Agora  vamos ver  ccomo criar um IndexedDB para armazenar nossos dados:

- -
const dbName = "clientes";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Tratar erros.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Cria um objectStore para conter a informação sobre nossos clientes. Nós vamos
-  // usar "ssn" como key path porque sabemos que é único;
-  var objectStore = db.createObjectStore("clientes", { keyPath: "ssn" });
-
-  // Cria um índice para buscar clientes pelo nome. Podemos ter nomes
-  // duplicados, então não podemos usar como índice único.
-  objectStore.createIndex("nome", "nome", { unique: false });
-
-  // Cria um índice para buscar clientes por email. Queremos ter certeza
-  // que não teremos 2 clientes com o mesmo e-mail;
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Usando transação oncomplete para afirmar que a criação do objectStore
-  // é terminada antes de adicionar algum dado nele.
-  objectStore.transaction.oncomplete = function(event) {
-    // Armazenando valores no novo objectStore.
-    var clientesObjectStore = db.transaction("clientes", "readwrite").objectStore("clientes");
-    for (var i in DadosClientes) {
-      clientesObjectStore.add(DadosClientes[i]);
-    }
-  }
-};
-
- -

Como falamos antes, onupgradeneeded é o único lugar onde você pode alterar a estrutura do banco. Nele você pode criar e deletar objectStores e construir ou remover índices.

- -
Armazens de objetos são criados com uma única chamada de createObjectStore(). O método pega o nome do armazem e um objeto parâmetro. Mesmo que o objeto parâmetro seja opcional, ele é muito importante porque ele deixa você definir propriedades importantes e ajustar tipos de dados que você quer criar. No nosso caso, nós obtemos um objectStore chamado "clientes" e definimos um keyPath, que é a propriedade que faz um objeto individual ser único no banco. Essa propriedade, nesse exemplo, é "ssn", que simboliza o cpf (social security number), que é único. O "ssn" deve ser apresentado em cada objeto armazenado no objectStore. 
- -

Nós também criamos um índice chamado "nome" ligado à propriedade nome. Assim como o createObjectStore(), o createIndex() tem um parâmetro opcional options que cuida do tipo de índice que você quer criar. Adicionando objetos que não tem a propriedade nome terá sucesso, porém esses objetos não aparecerão no índice "nome".

- -

Nós podemos obter os objetos de clientes armazenados usando os ssn da objectStore diretamente, ou usando os nomes usados no índice. Para aprender como isso é feito, veja a seção usando um índice.

- -

Usando um key generator

- -

Setando uma flag autoIncrement ao criar o objectStore habilitará o key generator. Por padrão ele não é setado.

- -

Com o key generator, a chave será gerada automaticamente quando você adicionar algum valor no objectStore. O atual número do key generator é sempre setado 1 quando a primeira key generator do objectStore é criada. Basicamente a próxima chave recebe o incremento de 1. O número atual da key generator nunca decresce,  a não ser se alguma operação do banco for revertida, como numa transação abortada, por exemplo. No entanto, deletar um registro ou limpar todos os registros nunca afeta o key generator dos objectStores.

- -

Nós podemos criar outro objectStore com o key generator como abaixo:

- -
// Abrindo o indexedDB.
-var request = indexedDB.open(dbName, 3);
-
-request.onupgradeneeded = function (event) {
-
-    var db = event.target.result;
-
-    // Criando outro objeto chamado "names" com o autoIncrement setado.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
-
-    // Porque "names" tem o the key generator, a chave para o nome é gerada automaticamente.
-    // Os registros adicionados serão assim:
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    for (var i in DadosClientes) {
-        objStore.add(DadosClientes[i].nome);
-    }
-}
- -

Para mais detalhes veja "W3C Key Generators".

- -

Adicionando, obtendo e removendo dados

- -

Antes de fazer qualquer coisa em um novo banco, você precisa iniciar uma transação. Transações estão no objeto database, e você tem que especificar qual objectStore você quer na transaction. Uma vez que você está dentro da transação, você pode acessar os objectStores  com seus dados e fazer os requests. Depois, você precisa decidir se você vai fazer mudanças no banco ou se você simplesmente quer ler esses dados. Transações tem três modos disponíveis: readonly, readwrite, and versionchange.

- -

Para mudar o "schema" ou estrutura do banco — o que envolve criar ou deletar objectStores ou índices — a transação deve ser em modo versionchange. Esta transação é aberta chamando o método {{domxref("IDBFactory.open")}} especificando a  version. (Em navegadores com WebKit que não tem a ultima especificação implementada, o método {{domxref("IDBFactory.open")}} tem apenas um parâmetro, o nome do banco; então você deve chamar {{domxref("IDBVersionChangeRequest.setVersion")}} para estabelecer uma transação versionchange.)

- -

Para ler os registros de um objectStore existente, a transação pode ser tanto readonly quanto readwrite. Para fazer mudanças em um objectStore existente, a transação deve ser em modo readwrite. Você abre essas transações usando {{domxref("IDBDatabase.transaction")}}. O método aceita dois parâmetros: o storeNames (o escopo, definido como um array de objectStores que você quer acessar) e o modo (readonly or readwrite) da transação. O método retorna o objeto detransação contendo o método {{domxref("IDBIndex.objectStore")}}, que você pode usar para acessar seu objectStore. Por padrão, quando nenhum modo é especificado, a transação é aberta no modo readonly.

- -

Você pode deixar o acesso aos dados mais rápido usando o escopo correto e o modo correto de transação. Aqui vai algumas dicas:

- - - -

Adicionando dados no banco

- -

Se você acabou de criar o banco, então você provavelmente quer escrever algo nele. Veja abaixo:

- -
var transaction = db.transaction(["clientes"], "readwrite");
-// Nota: Implementações mais antigas usam uma versão IDBTransaction.READ_WRITE antiga em vez de "readwrite".
-// Então, para suportar versões antigas, escreva:
-// var transaction = db.transaction(["clientes"], IDBTransaction.READ_WRITE);
- -

A função transaction() tem dois argumentos (opcionais) e retorna um objeto de transação. O primeiro argumento é uma lista de objectStores que serão trabalhados na transação. Você pode passar um array vazio se você quer uma transação com todos os objectStores, mas não faça isso pois a especificação diz que um array vazio pode gerar um erro InvalidAccessError. Se você não especificar nada no segundo parâmetro, você tem uma transação read-only. Se você quer escrever no banco, use "readwrite".

- -

Agora que você tem uma transação, você precisa entender seu tempo de uso. Transações são amarradas a um evento. Se você faz uma transação fora de um evento, ela ficará inativa. A única maneira de manter uma transação ativa é fazer um request nela. Quando o request acabar você terá a oportunidade de extender a transação durante o callback. Se você tentar extender uma transação dentro de um evento, então ela tornará inativa. Se existir requests pendentes, a transação continua ativa. O tempo de vida de uma transação é realmente simples mas deve ser usada em um curto espaço de tempo. Outros exemplos poderão ajudá-lo. Se você começar a ver TRANSACTION_INACTIVE_ERR error então você está fazendo algo errado.

- -

Transações podem receber eventos DOM de três tipos diferentes: error, abort, e complete. Nós falamos sobre o error, ou seja, a transação recebe um error sempre que o request gerar erro. Um ponto mais sutil é que o comportamento padrão de um erro é abortar a transação na qual ele estava. A menos que você manipule o erro chamando preventDefault() e fazendo algo depois, a transaçaõ inteira será desfeita. Este design força você a pensar sobre manipulação de erros, mas você pode sempre adicionar um manipulador de todos os erros se a manipulação separada estiver complicada. Se você não tratar o erro ou chamar abort() na transação, então a transação é desfeita (roll back) e o evento abort é chamado. Por outro lado, depois de todo request completado, você tem um evento complete. Se você fazer várias operações no banco, então seguir as operações de transações pode ser um caminho a seguir.

- -

Agora que você tem uma transação, você precisará obter um objectStore dela. Transações somente deixam você obter um objectStore citado na transação. Então você pode adicionar os dados que precisa.

- -
// Faz algo após a inserção dos dados.
-transaction.oncomplete = function(event) {
-  alert("Pronto!");
-};
-
-transaction.onerror = function(event) {
-  // Não esquecer de tratar os erros!
-};
-
-var objectStore = transaction.objectStore("clientes");
-for (var i in DadosClientes) {
-  var request = objectStore.add(DadosClientes[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == DadosClientes[i].ssn;
-  };
-}
- -

O result de um request gerado de uma chamada de add() é a chave do valor  que foi adicionado. Então neste caso, ele deve ser igual ao valor do ssn do objeto que foi adicionado, desde que o objeto use o ssn como key path. Note que a função add() não deixa nenhum objeto ser adicionado com a mesma chave. Se você está tentando modificar um registro existente, você deve usar o put(), como explica a seção  {{ anch("Updating an entry in the database") }}.

- -

Removendo dados do banco

- -

Para remoção o código é parecido:

- -
var request = db.transaction(["clientes"], "readwrite")
-                .objectStore("clientes")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // Pronto!
-};
- -

Obtendo dados do banco

- -

Agora que o banco tem algumas informações nele, você pode obtê-las de diferentes maneiras. Primeiro, um get() simples. Você precisa informar a chave do valor a ser obtido:

- -
var transaction = db.transaction(["clientes"]);
-var objectStore = transaction.objectStore("clientes");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Tratar erro!
-};
-request.onsuccess = function(event) {
-  // Fazer algo com request.result!
-  alert("O nome do SSN 444-44-4444 é " + request.result.name);
-};
- -

Veja agora de maneira resumida:

- -
db.transaction("clientes").objectStore("clientes").get("444-44-4444").onsuccess = function(event) {
-  alert("O nome do SSN 444-44-4444 é " + request.result.name);
-};
- -

Viu como funciona? Desde que exista um objectStore, você pode evitar passar uma lista de objectStores que precisa na transação e passar apenas o nome como string. Você também pode ler do banco, apenas, então não precisará de uma transação "readwrite". Chamando transaction() com nenhum modo especificado, você terá uma transação "readonly". Outra consideração é que você não necessita salvar o request em uma variável. Desde que o evento DOM tenha o target que você precisará para obter a propriedade result.

- -
-

Note: Você pode deixar o acesso aos dados mais rápido limitando o escopo e o modo de transação. Veja algumas dicas:

- - -
- -

Atualizando um registro no banco

- -

Agora que obtemos algum dado, atualizá-ls é inserí-los novamente no IndexedDB é bem simples. Vamos atualizar o exemplo anterior:

- -
var objectStore = db.transaction(["clientes"], "readwrite").objectStore("clientes");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Tratar erro
-};
-request.onsuccess = function(event) {
-  // Obter os valores antigos
-  var data = request.result;
-
-  // atualizar algum dado
-  data.age = 42;
-
-  // Atulizar esse dado no banco
-  var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Tratar erro
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Sucesso na atualização \o/
-   };
-};
- -

Criamos uma objectStore e obtemos um cliente dele, identificado pelo ssn (444-44-4444). Nós atualizamos o objeto, passando-o como parâmetro de um método put de outro request (requestUpdate) sobrescrevendo o valor antigo.

- -
-

Note que neste caso nós temos que especificar a transação readwrite porque nós queremos escrever no banco, não somente ler os dados dele.

-
- -

Usando um cursor

- -

Ao usar o método get() você precisa saber a chave do objeto que deseja obter. Se você quer passear entre todos os valores do seu objectStore, então você pode usar um cursor. Veja:

- -
var objectStore = db.transaction("cliente").objectStore("cliente");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("O nome do SSN " + cursor.key + " é " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("Não existe mais registros!");
-  }
-};
- -

A função openCursor() tem vários argumentos. Primeiro, você pode limitar o número de itens obtidos usando uma chave que veremos logo abaixo. Segundo, você pode especificar a direção que deseja iterar. No exemplo acima, nós estamos iterando em todos os objetos em ordem ascendente. O callback de sucesso para cursor é um pouco especial. O objeto cursor já é o result do request (acima nós usamos event.target.result). Então a chave atual e o valor pode ser encontrado na propriedade key e value do objeto cursor. Se você quer manter adiante, então você usa o método continue(). Quando você chegar ao fim dos dados (ou se não existem registros encontrados no openCursor()) você ainda tem um callback de sucesso, mas a propriedade result fica undefined.

- -

Um padrão comum para cursores é obter todos os objetos em um objectStore e adicioná-los a um array como este:

- -
var clientes = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    clientes.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Todos os clientes: " + clientes);
-  }
-};
- -
-

Note: Mozilla também implementou o método getAll() para ser usado nesse caso (e getAllKeys(), que está atualmente dentro da preferência do dom.indexedDB.experimental em about:config). Estes métodos não são parte do padrão IndexedDB, então eles podem desaparecer no futuro. Nós adicionamos porque achamos útil. O código abaixo faz o mesmo que o código acima:

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Todos os clientes: " + event.target.result);
-};
- -

Existe um custo de performance associado com a propriedade value do cursor, porque o objeto é criado de forma lenta. Quando você usa getAll() por exemplo, Gecko deve criar todos os objetos de uma vez. Se você está somente interessado em cada chave, é muito melhor usar o cursor do que usar o getAll(). Se você está tentando obter um array de todos os objetos, então é melhor usar o getAll().

-
- -

Usando um índice

- -

Armazenar dados de um cliente usando o SSN como chave é lógico pois o SSN identifica o cliente de forma única. Se você precisa obter um cliente pelo seu nome, portanto, você precisará iterar todos os registros no banco e comparar os nomes até achar o que você procura. Buscar dessa maneira é algo lento, então criamos um índice.

- -
var index = objectStore.index("nome");
-index.get("John").onsuccess = function(event) {
-  alert("O SSN de John é " + event.target.result.ssn);
-};
- -

O cursor "nome" não é único, então pode existir mais de um registro com o nome igual a "John". Neste caso você sempre obtem o registro com a chave de menor valor.

- -

Se você precisa acessar todos os registros retornados, você pode usar um cursor. Você pode abrir dois tipos de cursores. Um cursor normal mapeia o índice ao objeto na objectStore. Uma cursor-chave mapeia o a propriedade índice à chave usada para armazenar o objeto. As diferenças são ilustradas abaixo:

- -
// Usando um cursor normal para obter todos os objetos
-index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key é um nome, como "Bill", e cursor.value é o objeto inteiro.
-    alert("Nome: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-// Usando um cursor-chave para obter todos os objetos
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key é o nome, como "Bill", e cursor.value é o SSN (chave).
-    // Não tem como obter o resto do objeto
-    alert("Nome: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Especificando o número e a direção dos cursores

- -

Se você gostaria de limitar o número de valores retornados pelo cursor, você pode usar um objeto IDBKeyRange e passar isso como o primeiro argumento ao openCursor() ou openKeyCursor(). Você pode fazer um key range que permite um único valor, ou valores acima ou abaixo do especificado. O limite pode ser fechado (o key range inclui os valores dados) ou aberto (o key range não inclue os valores dados). Veja como funciona:

- -
// Somente se for igual "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Combinações menores que "Bill", incluindo "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Combinações menores que "Bill", sem incluir "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Combinações maiores que Donna, não incluindo "Donna"
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-// Combinações entre "Bill" e "Donna", sem incluir "Donna"
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-// Para usar qualquer um desses key ranges, basta passar como primeiro parâmetro de openCursor()/openKeyCursor()
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faz algo com o que encontrar
-    cursor.continue();
-  }
-};
- -

As vezes você pode querer iterar em ordem decrescente, em vez de crescente, alterando o segundo parâmetro de openCursor():

- -
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Prev indica ordem decrescente
-    cursor.continue();
-  }
-};
- -

Se você apenas quer especificar a ordem sem key range, é só passar null no primeiro parâmetro:

- -
objectStore.openCursor(null, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faça algo com os resultados.
-    cursor.continue();
-  }
-};
- -

Uma vez que o índice "nome" não é único, pode existir várias entradas onde o nome é o mesmo. Isso não acontece com objectStores porque a chave deve ser sempre única. Se você deseja filtrar valores duplicados numa iteração do cursor, você pode passar nextunique (ou prevunique se quiser decrescer) como parâmetro de direção. Quando nextunique ou prevunique é usado, o registro com menor chave é retornado.

- -
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faça algo com os registros.
-    cursor.continue();
-  }
-};
- -

Veja "IDBCursor Constants" para parâmetros válidos.

- -

Mudança de versão quando a web app está aberta em outra aba.

- -

Quando sua web app muda a versão você precisa considerar o que vai acontecer se o usuário está na versão antiga em uma aba, e carrega a versão nova na outra. Quando você chamar o open() com a versão mais nova, um evento onblocked  é chamado até que a aba da versão antiga seja fechada ou recarregada. Veja abaixo:

- -
var openReq = mozIndexedDB.open("DBteste", 2);
-
-openReq.onblocked = function(event) {
-  // Se existe outra aba com a versão antiga
-  alert("Existe uma versão antiga da web app aberta em outra aba, feche-a por favor!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // Se estiver tudo fechado, então faça as devidas alterações
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Esteja certo de que adicionou um evento para notificar se a página muda a versão
-  // Nós devemos fechar o banco. Isso permite à outra página ser atualizada
-  // Se você não fizer isso a atualização não acontecerá até fechar as abas.
-  db.onversionchange = function(event) {
-    db.close();
-    alert("Uma nova versão desta web app está pronta. Atualiza, por favor!");
-  };
-
-  // Fazer algo com os bancos
-}
-
- -

Segurança

- -

IndexedDB usa o princípio de mesma origem, o que significa que o banco só será acessado pelo site que o criou.

- -

É importante notar que o IndexedDB não funciona para conteúdo carregado em um frame de outro site (seja {{ HTMLElement("frame") }} ou {{ HTMLElement("iframe") }}. Esta é uma política de segurança e privacidade análoga ao bloqueio de cookies de terceiros. Para mais detalhes, veja {{ bug(595307) }}.

- -

Alerta sobre fechar o navegador

- -

Quando o navegador é fechado, qualquer transação pendente no IndexedDB será abortada (silenciosamente) — ele não vai completar, nem chamar o evento de erro.  Uma vez que o usuário pode sair do navegador, em qualquer momento, isto significa que você não pode confiar em qualquer transação específica para completar ou para saber que ela não foi concluída. Existem várias implicações nesse comportamento.

- -

Primeiro, você deve ter o cuidado de sempre deixar seu banco de dados em um estado consistente, no final de cada transação. Por exemplo, suponha que você está usando IndexedDB para armazenar uma lista de itens que permitem ao usuário editar. Você salvar a lista após a edição, limpando o armazenamento de objetos e, em seguida, escrever a nova lista. Se você limpar o armazenamento de objetos em uma transação e escrever a nova lista em outra transação, há um perigo de que o navegador irá fechar após a limpeza de dados e antes da gravação, deixando-o com um banco de dados vazio. Para evitar isso, você deve combinar tanto a limpeza quanto a gravação em uma única transação.

- -

Em segundo lugar, você nunca deve amarrar as operações de banco de dados ao evento unload. Se o evento unload é acionado pelo fechamento do navegador, todas as transações criadas no unload nunca serão concluídas. Uma abordagem intuitiva para manter algumas informações em sessões do navegador é lê-la a partir do banco de dados quando o navegador (ou uma determinada página) é aberta, atualizá-la assim que o usuário interagir com o navegador, e depois salvá-lo para o banco de dados quando o navegador (ou página) será fechada. No entanto, isso não vai funcionar. As transações de banco de dados será criado no unload, mas como elas são assíncronas, serão abortadas antes que eles possam executar.

- -

De fato, não existe uma maneira de garantir que as transações no IndexedDBserão completadas, mesmo com o fechamento padrão do navegador. Ver {{ bug(870645) }}.

- -

Exemplo de IndexedDB

- -

HTML

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
-
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
-
- -

 

- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  // Used to keep track of which view is displayed to avoid uselessly reloading it
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      // Better use "this" than "req" to get the result to avoid problems with
-      // garbage collection.
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @param {string} store_name
-   * @param {string} mode either "readonly" or "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @param {IDBObjectStore=} store
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    // Resetting the iframe so that it doesn't display previous content
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Requests are executed in the order in which they were made against the
-    // transaction, and their results are returned in the same order.
-    // Thus the count text below will be displayed before the actual pub list
-    // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      // If the cursor is pointing at something, ask for the data
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        // Move on to the next object in store
-        cursor.continue();
-
-        // This counter serves only to create distinct ids
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // It is not possible to set a direct link to the
-      // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {string} url the URL of the image to download and store in the local
-   *   IndexedDB database. The resource behind this URL is subjected to the
-   *   "Same origin policy", thus for this method to work, the URL must come from
-   *   the same origin as the web site/app this code is deployed on.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    // Setting the wanted responseType to "blob"
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
-    // responseType is not handled.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @param {string} biblioid
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @param {number} key
-   * @param {IDBObjectStore=} store
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // the result of the Object Store Deletion Operation algorithm is
-    // undefined, so it's not possible to know if some records were actually
-    // deleted by looking at the request result.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Warning: The exact same key used for creation needs to be passed for
-      // the deletion. If the key was a Number for creation, then it needs to
-      // be a Number for deletion.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Keeping a reference on how to reset the file input in the UI once we
-      // have its value, but instead of doing that we rather use a "reset" type
-      // input in the HTML form.
-      //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
-
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Ver também

- -

Uma leitura adicional para você encontrar mais informações.

- -

Refências

- - - -

Guias e tutoriais

- - diff --git a/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..da14879b31 --- /dev/null +++ b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1281 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API IndexedDB Tutorial Avançado +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB é uma forma de armazenar dados no navegador do usuário. Com ele você pode criar aplicações web com possibilidade de fazer query sem necessidade de conexão, suas aplicações podem funcionar tanto online quanto offline. 

+
+ +

Sobre esse documento

+ +

Esse tutorial utiliza a API assíncrona do IndexedDB. Se você não está familiarizado com IndexedDB, você pode ler Conceitos básicos sobre IndexedDB.

+ +

Para a documentação de referência, veja o artigo sobre API IndexedDB, pois nele contém os tipos de objetos utilizados no IndexedDB,  como também métodos da API, tanto síncrona como assíncrona. 

+ +

Padrão básico

+ +

O IndexedDB encoraja o uso do seguinte padrão:

+ +
    +
  1. Abrir um banco de dados.
    2. +
  2. Criar um ObjectStore ao atualizar o banco. 
    3. +
  3. Iniciar uma transação e e faz um request para fazer alguma operação no banco, como adicionar ou obter dados.
    4. +
  4. +
    Esperar a operação ser completada ouvindo algum evento DOM.
    +
    5. +
  5. +
    Fazer algo com o resultado da query (que pode ser obtida pelo objeto request).
    +
    6. +
+ +

OK, então, agora com esses conceitos em mente, nós podemos fazer coisas mais concretas.

+ +

Criando e estruturando o banco

+ +

Pelo fato  da especificação ainda estar evoluindo, as implementações do IndexedDB tem prefixos de navegadores. Os navegadores podem ter implementações diferentes da API IndexedDB até a especificação ser consolidada. Mas uma vez que tudo chegar a um consenso, os navegadores tirarão seus prefixos. Atualmente, algumas implementações removeram o prefixo: Internet Explorer 10, Firefox 16, Chrome 24. Quando eles usam prefixo, navegadores baseados no Gecko usam o prefixo moz, enquanto os navegadores baseados no WebKit usam o prefixo webkit.

+ +

Usando uma versão experimental do IndexedDB

+ +

Se você quiser testar seu código em navegadores que usam prefixo, você pode usar o código abaixo:  

+ +
// Na linha abaixo, você deve incluir os prefixos do navegador que você vai testar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Não use "var indexedDB = ..." se você não está numa function.
+// Posteriormente, você pode precisar de referências de algum objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca usou prefixo nesses objetos, então não precisamos window.mozIDB*)
+ +

Tome cuidado, implementações prefixadas podem estar com bugs ou implementando especificações antigas. Portanto, não é recomendado usar em produção. É preferível não usar IndexedDB em navegadores antigos:

+ +
if (!window.indexedDB) {
+    window.alert("Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.");
+}
+
+ +

Abrindo um banco

+ +

Começamos todo o processo assim:

+ +
// Abrindo o banco de dados
+var request = window.indexedDB.open("DBteste", 3);
+
+ +

Abrir um banco é como qualquer outra operação — Você tem que "requerer (request)".

+ +

A requisição de abertura não abre o banco ou inicia a transação. A chamada da função open() retorna um objeto IDBOpenDBRequest com o resultado (success) ou um erro que você terá que tratar. Muitas outras funções assíncronas no IndexedDB fazem a mesma coisa - retornam um objeto IDBRequest com o resultado ou erro. O resultado para a função open é uma instância de IDBDatabase.

+ +

O segundo parâmetro para o método open é a versão do banco. A versão do banco determina seu schema — os registros no banco e sua estrutura. Se o banco não existe ainda, ele é criado pela operação open, então o evento onupgradeneeded é chamado e você cria o schema do banco nesse evento. Se o banco existe mas você está fornecendo um novo número de versão, o evento onupgradeneeded é chamado imediatamente, permitindo você tratar a atualização do schema. Para mais informações sobre isso veja Updating the version of the database.

+ +
+

O número de versão é um unsigned long long, o que significa que ele pode ver um inteiro muito grande. Isso também significa que você não pode usar float, pois ele será convertido em um inteiro pequeno e a transação pode não acontecer, ou o evento upgradeneeded pode não ser chamado. Então se você usar 2.4 como versão:

+ +
var request = indexedDB.open("DBteste", 2.4); // não faça isso, pois a versão será convertida para 2.
+
+ +

Gerenciando handlers

+ +

A primeira coisa que você vai querer fazer em quase todos os requests é tratar os casos de success e error:

+ +
request.onerror = function(event) {
+  // Fazer algo com request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+};
+ +

Qual das duas funções, onsuccess() ou onerror(),  será chamada? Se tudo correr bem, o evento de sucesso (que é um evento DOM event com propriedade type setada "success") é chamado com request como seu target. Uma vez chamado, a função onsuccess() no request é chamada com o evento de sucesso em seu contexto. Por outro lado, se acontecer algum problema, um evento de erro (que é um evento DOM com a propriedade type setada para "error") é chamado no request. Então a função onerror()  com o evento erro em seu contexto.

+ +

A API IndexedDB é feita para minimizar a necessidade de manipular erros, então você não fará muitos eventos de erro (ao menos, se você usar a API!) No  caso de abrir um banco, portanto, existe algumas condições comuns para eventos de erro. O problema mais comum é o usuário não dar permissão para criar o banco. Um dos principais objetivos do IndexedDB é permitir muitos dados serem armazenados para uso offline. (Para aprender mais sobre o quanto cada navegador pode armazenar, veja Storage limits).  

+ +

Obviamente, navegadores não querem armazenar dados que poluem seu computador, então o navegador mostra uma mensagem ao usuário na primeira vez que um aplicativo tenta abrir o IndexedDB. O usuário pode escolher permitir ou negar acesso. O IndexedDB também é desabilitado no modo privado dos navegadores (ctrl+shift+N no Chrome e ctrl+shift+P no Firefox). Isso acontece porque o intuito do modo privado é não deixar rastros na navegação.

+ +

Agora, assumindo que o usuário aprovou seu request para criar o banco, e você recebeu success; Qual é o próximo passo? O request foi gerado com a chamada de indexedDB.open(), e request.result é uma instância de IDBDatabase, e você definitivamente vai querer armazenar isso para usar depois. Veja abaixo:

+ +
var db;
+var request = indexedDB.open("DBteste");
+request.onerror = function(event) {
+  alert("Você não habilitou minha web app para usar IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Tratando Erros

+ +

Como mencionado acima, o evento de erro é chamado quando o request dá erro. Se você quer evitar manipuladores de erro a cada request, você pode adicionar um único manipulador de erro no objeto db, como abaixo:

+ +
db.onerror = function(event) {
+  // Função genérica para tratar os erros de todos os requests desse banco!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Um dos erros mais comuns ao abrir o banco é VER_ERR. Ele indica que a versão do banco existente é maior que a versão que você quer abrir.

+ +

Criando ou atualizando a versão do banco

+ +

Quando você cria um novo banco ou aumenta sua versão, o evento onupgradeneeded será chamado. No manipulador deste evento, você deve criar o objectStore necessário para a versão do banco:

+ +
// Este evento é implementado somente em navegadores mais recentes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // cria um objectStore para esse banco
+  var objectStore = db.createObjectStore("nome", { keyPath: "minhaChave" });
+};
+ +

Neste caso, o banco já terá objectStores de suas versões anteriores, então você não terá que criar esses objectStores de novo. Você somente precisará criar um novo objectStore qualquer, ou deletar objectStores da versão anterior que não serão utilizados. Se você precisa mudar um objectStore existente (mudar o keyPath, por exemplo),  então você precisa deletar o objectStore antigo e criá-lo novamente com as novas opções. (Note que isso irá deletar a informação no objectStore! Se você precisa salvar a informação, você deve ler isso e salvá-lo em algum lugar antes de atualizar o banco.)

+ +

Blink/Webkit suporta a versão atual da especificação, nas versões do Chrome 23+ e Opera 17+; IE10+ também suporta. Outros motores e versões antigas não implementam a versão atual da especificação e não suportam a assinatura indexedDB.open(name, version).onupgradeneeded ainda.  Para mais informação sobre como atualizar a versão do banco em Webkit/Blink, veja IDBDatabase reference article.

+ +

Estruturando o banco

+ +

Agora a estrutura do banco. IndexedDB usa "armazens de objetos" em vez de tabelas, e um único banco de dados pode conter qualquer número de "armazem de objetos". Sempre que um valor é armazenado num objectStore, ele é associado a uma chave. Existe várias maneiras diferentes de uma chave ser mostrada, dependendo do que o objectStore usa, um key path ou key generator.

+ +

A tabela abaixo mostra as direfentes chaves suportadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key Path (keyPath)Key Generator (autoIncrement)Description
NãoNãoEste objectStore pode ter qualquer tipo de valor primitivo como número ou string. Você deve suprir uma chave separada sempre que adicionar um novo valor.
SimNãoEste objectStore pode simplesmente armazenar objetos JavaScript. O objeto deve ter uma propriedade com o mesmo nome do key path.
NãoSimEste objectStore pode possuir qualquer tipo de valor. A chave é gerada para você, automaticamente, ou você pode suprir uma chave separada, caso utilize uma chave específica.
SimSimEste objectStore suporta somente objetos JavaScript. Normalmente uma chave é gerada e o valor dela é armazenado no objeto em uma propriedade com o mesmo nome da key path. Portanto, se a propriedade já existe, o valor dela será usado como chave, em vez do valor gerado.
+ +

Você também pode criar índices em qualquer objectStore. Um indice deixa você olhar os valores armazenados no objectStore usando o valor de uma propriedade do objectStore, em vez de sua chave.

+ +

Adicionalmente, indices tem a habilidade de forçar restrições simples nos dados armazenados. Setando uma flag única quando criar o índice, reforça que dois objetos são armazenados contendo o mesmo valor para o key path do índice. Então, por exemplo, se você tem um objeto armazenado que tem um conjunto de pessoas, e você quer ter certeza que ninguém tera o mesmo e-mail, você pode usar um índice com flag única para forçar isso.

+ +

Isso soa meio confuso, mas este exemplo pode iluminar o conceito. Primeiro, vamos definir alguns dados a serem usados no exemplo:

+ +
// Isso é o que os dados de nossos clientes será.
+const DadosClientes = [
+  { ssn: "444-44-4444", nome: "Bill", idade: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", nome: "Donna", idade: 32, email: "donna@home.org" }
+];
+
+ +

Agora  vamos ver  ccomo criar um IndexedDB para armazenar nossos dados:

+ +
const dbName = "clientes";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Tratar erros.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Cria um objectStore para conter a informação sobre nossos clientes. Nós vamos
+  // usar "ssn" como key path porque sabemos que é único;
+  var objectStore = db.createObjectStore("clientes", { keyPath: "ssn" });
+
+  // Cria um índice para buscar clientes pelo nome. Podemos ter nomes
+  // duplicados, então não podemos usar como índice único.
+  objectStore.createIndex("nome", "nome", { unique: false });
+
+  // Cria um índice para buscar clientes por email. Queremos ter certeza
+  // que não teremos 2 clientes com o mesmo e-mail;
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Usando transação oncomplete para afirmar que a criação do objectStore
+  // é terminada antes de adicionar algum dado nele.
+  objectStore.transaction.oncomplete = function(event) {
+    // Armazenando valores no novo objectStore.
+    var clientesObjectStore = db.transaction("clientes", "readwrite").objectStore("clientes");
+    for (var i in DadosClientes) {
+      clientesObjectStore.add(DadosClientes[i]);
+    }
+  }
+};
+
+ +

Como falamos antes, onupgradeneeded é o único lugar onde você pode alterar a estrutura do banco. Nele você pode criar e deletar objectStores e construir ou remover índices.

+ +
Armazens de objetos são criados com uma única chamada de createObjectStore(). O método pega o nome do armazem e um objeto parâmetro. Mesmo que o objeto parâmetro seja opcional, ele é muito importante porque ele deixa você definir propriedades importantes e ajustar tipos de dados que você quer criar. No nosso caso, nós obtemos um objectStore chamado "clientes" e definimos um keyPath, que é a propriedade que faz um objeto individual ser único no banco. Essa propriedade, nesse exemplo, é "ssn", que simboliza o cpf (social security number), que é único. O "ssn" deve ser apresentado em cada objeto armazenado no objectStore. 
+ +

Nós também criamos um índice chamado "nome" ligado à propriedade nome. Assim como o createObjectStore(), o createIndex() tem um parâmetro opcional options que cuida do tipo de índice que você quer criar. Adicionando objetos que não tem a propriedade nome terá sucesso, porém esses objetos não aparecerão no índice "nome".

+ +

Nós podemos obter os objetos de clientes armazenados usando os ssn da objectStore diretamente, ou usando os nomes usados no índice. Para aprender como isso é feito, veja a seção usando um índice.

+ +

Usando um key generator

+ +

Setando uma flag autoIncrement ao criar o objectStore habilitará o key generator. Por padrão ele não é setado.

+ +

Com o key generator, a chave será gerada automaticamente quando você adicionar algum valor no objectStore. O atual número do key generator é sempre setado 1 quando a primeira key generator do objectStore é criada. Basicamente a próxima chave recebe o incremento de 1. O número atual da key generator nunca decresce,  a não ser se alguma operação do banco for revertida, como numa transação abortada, por exemplo. No entanto, deletar um registro ou limpar todos os registros nunca afeta o key generator dos objectStores.

+ +

Nós podemos criar outro objectStore com o key generator como abaixo:

+ +
// Abrindo o indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Criando outro objeto chamado "names" com o autoIncrement setado.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Porque "names" tem o the key generator, a chave para o nome é gerada automaticamente.
+    // Os registros adicionados serão assim:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in DadosClientes) {
+        objStore.add(DadosClientes[i].nome);
+    }
+}
+ +

Para mais detalhes veja "W3C Key Generators".

+ +

Adicionando, obtendo e removendo dados

+ +

Antes de fazer qualquer coisa em um novo banco, você precisa iniciar uma transação. Transações estão no objeto database, e você tem que especificar qual objectStore você quer na transaction. Uma vez que você está dentro da transação, você pode acessar os objectStores  com seus dados e fazer os requests. Depois, você precisa decidir se você vai fazer mudanças no banco ou se você simplesmente quer ler esses dados. Transações tem três modos disponíveis: readonly, readwrite, and versionchange.

+ +

Para mudar o "schema" ou estrutura do banco — o que envolve criar ou deletar objectStores ou índices — a transação deve ser em modo versionchange. Esta transação é aberta chamando o método {{domxref("IDBFactory.open")}} especificando a  version. (Em navegadores com WebKit que não tem a ultima especificação implementada, o método {{domxref("IDBFactory.open")}} tem apenas um parâmetro, o nome do banco; então você deve chamar {{domxref("IDBVersionChangeRequest.setVersion")}} para estabelecer uma transação versionchange.)

+ +

Para ler os registros de um objectStore existente, a transação pode ser tanto readonly quanto readwrite. Para fazer mudanças em um objectStore existente, a transação deve ser em modo readwrite. Você abre essas transações usando {{domxref("IDBDatabase.transaction")}}. O método aceita dois parâmetros: o storeNames (o escopo, definido como um array de objectStores que você quer acessar) e o modo (readonly or readwrite) da transação. O método retorna o objeto detransação contendo o método {{domxref("IDBIndex.objectStore")}}, que você pode usar para acessar seu objectStore. Por padrão, quando nenhum modo é especificado, a transação é aberta no modo readonly.

+ +

Você pode deixar o acesso aos dados mais rápido usando o escopo correto e o modo correto de transação. Aqui vai algumas dicas:

+ + + +

Adicionando dados no banco

+ +

Se você acabou de criar o banco, então você provavelmente quer escrever algo nele. Veja abaixo:

+ +
var transaction = db.transaction(["clientes"], "readwrite");
+// Nota: Implementações mais antigas usam uma versão IDBTransaction.READ_WRITE antiga em vez de "readwrite".
+// Então, para suportar versões antigas, escreva:
+// var transaction = db.transaction(["clientes"], IDBTransaction.READ_WRITE);
+ +

A função transaction() tem dois argumentos (opcionais) e retorna um objeto de transação. O primeiro argumento é uma lista de objectStores que serão trabalhados na transação. Você pode passar um array vazio se você quer uma transação com todos os objectStores, mas não faça isso pois a especificação diz que um array vazio pode gerar um erro InvalidAccessError. Se você não especificar nada no segundo parâmetro, você tem uma transação read-only. Se você quer escrever no banco, use "readwrite".

+ +

Agora que você tem uma transação, você precisa entender seu tempo de uso. Transações são amarradas a um evento. Se você faz uma transação fora de um evento, ela ficará inativa. A única maneira de manter uma transação ativa é fazer um request nela. Quando o request acabar você terá a oportunidade de extender a transação durante o callback. Se você tentar extender uma transação dentro de um evento, então ela tornará inativa. Se existir requests pendentes, a transação continua ativa. O tempo de vida de uma transação é realmente simples mas deve ser usada em um curto espaço de tempo. Outros exemplos poderão ajudá-lo. Se você começar a ver TRANSACTION_INACTIVE_ERR error então você está fazendo algo errado.

+ +

Transações podem receber eventos DOM de três tipos diferentes: error, abort, e complete. Nós falamos sobre o error, ou seja, a transação recebe um error sempre que o request gerar erro. Um ponto mais sutil é que o comportamento padrão de um erro é abortar a transação na qual ele estava. A menos que você manipule o erro chamando preventDefault() e fazendo algo depois, a transaçaõ inteira será desfeita. Este design força você a pensar sobre manipulação de erros, mas você pode sempre adicionar um manipulador de todos os erros se a manipulação separada estiver complicada. Se você não tratar o erro ou chamar abort() na transação, então a transação é desfeita (roll back) e o evento abort é chamado. Por outro lado, depois de todo request completado, você tem um evento complete. Se você fazer várias operações no banco, então seguir as operações de transações pode ser um caminho a seguir.

+ +

Agora que você tem uma transação, você precisará obter um objectStore dela. Transações somente deixam você obter um objectStore citado na transação. Então você pode adicionar os dados que precisa.

+ +
// Faz algo após a inserção dos dados.
+transaction.oncomplete = function(event) {
+  alert("Pronto!");
+};
+
+transaction.onerror = function(event) {
+  // Não esquecer de tratar os erros!
+};
+
+var objectStore = transaction.objectStore("clientes");
+for (var i in DadosClientes) {
+  var request = objectStore.add(DadosClientes[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == DadosClientes[i].ssn;
+  };
+}
+ +

O result de um request gerado de uma chamada de add() é a chave do valor  que foi adicionado. Então neste caso, ele deve ser igual ao valor do ssn do objeto que foi adicionado, desde que o objeto use o ssn como key path. Note que a função add() não deixa nenhum objeto ser adicionado com a mesma chave. Se você está tentando modificar um registro existente, você deve usar o put(), como explica a seção  {{ anch("Updating an entry in the database") }}.

+ +

Removendo dados do banco

+ +

Para remoção o código é parecido:

+ +
var request = db.transaction(["clientes"], "readwrite")
+                .objectStore("clientes")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // Pronto!
+};
+ +

Obtendo dados do banco

+ +

Agora que o banco tem algumas informações nele, você pode obtê-las de diferentes maneiras. Primeiro, um get() simples. Você precisa informar a chave do valor a ser obtido:

+ +
var transaction = db.transaction(["clientes"]);
+var objectStore = transaction.objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};
+ +

Veja agora de maneira resumida:

+ +
db.transaction("clientes").objectStore("clientes").get("444-44-4444").onsuccess = function(event) {
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};
+ +

Viu como funciona? Desde que exista um objectStore, você pode evitar passar uma lista de objectStores que precisa na transação e passar apenas o nome como string. Você também pode ler do banco, apenas, então não precisará de uma transação "readwrite". Chamando transaction() com nenhum modo especificado, você terá uma transação "readonly". Outra consideração é que você não necessita salvar o request em uma variável. Desde que o evento DOM tenha o target que você precisará para obter a propriedade result.

+ +
+

Note: Você pode deixar o acesso aos dados mais rápido limitando o escopo e o modo de transação. Veja algumas dicas:

+ + +
+ +

Atualizando um registro no banco

+ +

Agora que obtemos algum dado, atualizá-ls é inserí-los novamente no IndexedDB é bem simples. Vamos atualizar o exemplo anterior:

+ +
var objectStore = db.transaction(["clientes"], "readwrite").objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro
+};
+request.onsuccess = function(event) {
+  // Obter os valores antigos
+  var data = request.result;
+
+  // atualizar algum dado
+  data.age = 42;
+
+  // Atulizar esse dado no banco
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Tratar erro
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Sucesso na atualização \o/
+   };
+};
+ +

Criamos uma objectStore e obtemos um cliente dele, identificado pelo ssn (444-44-4444). Nós atualizamos o objeto, passando-o como parâmetro de um método put de outro request (requestUpdate) sobrescrevendo o valor antigo.

+ +
+

Note que neste caso nós temos que especificar a transação readwrite porque nós queremos escrever no banco, não somente ler os dados dele.

+
+ +

Usando um cursor

+ +

Ao usar o método get() você precisa saber a chave do objeto que deseja obter. Se você quer passear entre todos os valores do seu objectStore, então você pode usar um cursor. Veja:

+ +
var objectStore = db.transaction("cliente").objectStore("cliente");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("O nome do SSN " + cursor.key + " é " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("Não existe mais registros!");
+  }
+};
+ +

A função openCursor() tem vários argumentos. Primeiro, você pode limitar o número de itens obtidos usando uma chave que veremos logo abaixo. Segundo, você pode especificar a direção que deseja iterar. No exemplo acima, nós estamos iterando em todos os objetos em ordem ascendente. O callback de sucesso para cursor é um pouco especial. O objeto cursor já é o result do request (acima nós usamos event.target.result). Então a chave atual e o valor pode ser encontrado na propriedade key e value do objeto cursor. Se você quer manter adiante, então você usa o método continue(). Quando você chegar ao fim dos dados (ou se não existem registros encontrados no openCursor()) você ainda tem um callback de sucesso, mas a propriedade result fica undefined.

+ +

Um padrão comum para cursores é obter todos os objetos em um objectStore e adicioná-los a um array como este:

+ +
var clientes = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    clientes.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Todos os clientes: " + clientes);
+  }
+};
+ +
+

Note: Mozilla também implementou o método getAll() para ser usado nesse caso (e getAllKeys(), que está atualmente dentro da preferência do dom.indexedDB.experimental em about:config). Estes métodos não são parte do padrão IndexedDB, então eles podem desaparecer no futuro. Nós adicionamos porque achamos útil. O código abaixo faz o mesmo que o código acima:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Todos os clientes: " + event.target.result);
+};
+ +

Existe um custo de performance associado com a propriedade value do cursor, porque o objeto é criado de forma lenta. Quando você usa getAll() por exemplo, Gecko deve criar todos os objetos de uma vez. Se você está somente interessado em cada chave, é muito melhor usar o cursor do que usar o getAll(). Se você está tentando obter um array de todos os objetos, então é melhor usar o getAll().

+
+ +

Usando um índice

+ +

Armazenar dados de um cliente usando o SSN como chave é lógico pois o SSN identifica o cliente de forma única. Se você precisa obter um cliente pelo seu nome, portanto, você precisará iterar todos os registros no banco e comparar os nomes até achar o que você procura. Buscar dessa maneira é algo lento, então criamos um índice.

+ +
var index = objectStore.index("nome");
+index.get("John").onsuccess = function(event) {
+  alert("O SSN de John é " + event.target.result.ssn);
+};
+ +

O cursor "nome" não é único, então pode existir mais de um registro com o nome igual a "John". Neste caso você sempre obtem o registro com a chave de menor valor.

+ +

Se você precisa acessar todos os registros retornados, você pode usar um cursor. Você pode abrir dois tipos de cursores. Um cursor normal mapeia o índice ao objeto na objectStore. Uma cursor-chave mapeia o a propriedade índice à chave usada para armazenar o objeto. As diferenças são ilustradas abaixo:

+ +
// Usando um cursor normal para obter todos os objetos
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é um nome, como "Bill", e cursor.value é o objeto inteiro.
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Usando um cursor-chave para obter todos os objetos
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é o nome, como "Bill", e cursor.value é o SSN (chave).
+    // Não tem como obter o resto do objeto
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificando o número e a direção dos cursores

+ +

Se você gostaria de limitar o número de valores retornados pelo cursor, você pode usar um objeto IDBKeyRange e passar isso como o primeiro argumento ao openCursor() ou openKeyCursor(). Você pode fazer um key range que permite um único valor, ou valores acima ou abaixo do especificado. O limite pode ser fechado (o key range inclui os valores dados) ou aberto (o key range não inclue os valores dados). Veja como funciona:

+ +
// Somente se for igual "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Combinações menores que "Bill", incluindo "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Combinações menores que "Bill", sem incluir "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Combinações maiores que Donna, não incluindo "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Combinações entre "Bill" e "Donna", sem incluir "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// Para usar qualquer um desses key ranges, basta passar como primeiro parâmetro de openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faz algo com o que encontrar
+    cursor.continue();
+  }
+};
+ +

As vezes você pode querer iterar em ordem decrescente, em vez de crescente, alterando o segundo parâmetro de openCursor():

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Prev indica ordem decrescente
+    cursor.continue();
+  }
+};
+ +

Se você apenas quer especificar a ordem sem key range, é só passar null no primeiro parâmetro:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os resultados.
+    cursor.continue();
+  }
+};
+ +

Uma vez que o índice "nome" não é único, pode existir várias entradas onde o nome é o mesmo. Isso não acontece com objectStores porque a chave deve ser sempre única. Se você deseja filtrar valores duplicados numa iteração do cursor, você pode passar nextunique (ou prevunique se quiser decrescer) como parâmetro de direção. Quando nextunique ou prevunique é usado, o registro com menor chave é retornado.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os registros.
+    cursor.continue();
+  }
+};
+ +

Veja "IDBCursor Constants" para parâmetros válidos.

+ +

Mudança de versão quando a web app está aberta em outra aba.

+ +

Quando sua web app muda a versão você precisa considerar o que vai acontecer se o usuário está na versão antiga em uma aba, e carrega a versão nova na outra. Quando você chamar o open() com a versão mais nova, um evento onblocked  é chamado até que a aba da versão antiga seja fechada ou recarregada. Veja abaixo:

+ +
var openReq = mozIndexedDB.open("DBteste", 2);
+
+openReq.onblocked = function(event) {
+  // Se existe outra aba com a versão antiga
+  alert("Existe uma versão antiga da web app aberta em outra aba, feche-a por favor!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // Se estiver tudo fechado, então faça as devidas alterações
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Esteja certo de que adicionou um evento para notificar se a página muda a versão
+  // Nós devemos fechar o banco. Isso permite à outra página ser atualizada
+  // Se você não fizer isso a atualização não acontecerá até fechar as abas.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("Uma nova versão desta web app está pronta. Atualiza, por favor!");
+  };
+
+  // Fazer algo com os bancos
+}
+
+ +

Segurança

+ +

IndexedDB usa o princípio de mesma origem, o que significa que o banco só será acessado pelo site que o criou.

+ +

É importante notar que o IndexedDB não funciona para conteúdo carregado em um frame de outro site (seja {{ HTMLElement("frame") }} ou {{ HTMLElement("iframe") }}. Esta é uma política de segurança e privacidade análoga ao bloqueio de cookies de terceiros. Para mais detalhes, veja {{ bug(595307) }}.

+ +

Alerta sobre fechar o navegador

+ +

Quando o navegador é fechado, qualquer transação pendente no IndexedDB será abortada (silenciosamente) — ele não vai completar, nem chamar o evento de erro.  Uma vez que o usuário pode sair do navegador, em qualquer momento, isto significa que você não pode confiar em qualquer transação específica para completar ou para saber que ela não foi concluída. Existem várias implicações nesse comportamento.

+ +

Primeiro, você deve ter o cuidado de sempre deixar seu banco de dados em um estado consistente, no final de cada transação. Por exemplo, suponha que você está usando IndexedDB para armazenar uma lista de itens que permitem ao usuário editar. Você salvar a lista após a edição, limpando o armazenamento de objetos e, em seguida, escrever a nova lista. Se você limpar o armazenamento de objetos em uma transação e escrever a nova lista em outra transação, há um perigo de que o navegador irá fechar após a limpeza de dados e antes da gravação, deixando-o com um banco de dados vazio. Para evitar isso, você deve combinar tanto a limpeza quanto a gravação em uma única transação.

+ +

Em segundo lugar, você nunca deve amarrar as operações de banco de dados ao evento unload. Se o evento unload é acionado pelo fechamento do navegador, todas as transações criadas no unload nunca serão concluídas. Uma abordagem intuitiva para manter algumas informações em sessões do navegador é lê-la a partir do banco de dados quando o navegador (ou uma determinada página) é aberta, atualizá-la assim que o usuário interagir com o navegador, e depois salvá-lo para o banco de dados quando o navegador (ou página) será fechada. No entanto, isso não vai funcionar. As transações de banco de dados será criado no unload, mas como elas são assíncronas, serão abortadas antes que eles possam executar.

+ +

De fato, não existe uma maneira de garantir que as transações no IndexedDBserão completadas, mesmo com o fechamento padrão do navegador. Ver {{ bug(870645) }}.

+ +

Exemplo de IndexedDB

+ +

HTML

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Ver também

+ +

Uma leitura adicional para você encontrar mais informações.

+ +

Refências

+ + + +

Guias e tutoriais

+ + diff --git a/files/pt-br/web/api/network_information_api/index.html b/files/pt-br/web/api/network_information_api/index.html new file mode 100644 index 0000000000..032fc54169 --- /dev/null +++ b/files/pt-br/web/api/network_information_api/index.html @@ -0,0 +1,56 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +translation_of: Web/API/Network_Information_API +--- +

{{ SeeCompatTable() }}

+ +

A API de Informações de Rede fornece informação sobre a conexão do sistema, assim como a banda atual do dispositivo do usuário ou qualquer conexão que seja medida. Essa pode também ser usada para selecionar conteúdo de alta ou baixa definição baseado na conexão do usuário. Toda a API consiste na adição da interface domxref("Connection") e uma única propriedade a interface {{domxref("Navigator")}}: {{domxref("Navigator.connection")}}.

+ +

Detectando mudanças de conexão

+ +

Este é um exemplo vê mudança na conexão do usuário. Essa é similar a como uma app pode alertar quando o usuário move de uma conexão de alto para baixo custo por exemplo, a fim de reduzir a demanda da banda para previnir que o usuário seja submetido a cargos substanciais.

+ +
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+ +

Compatibilidade com Navegadores

+ +

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

+ +

Veja também

+ + diff --git "a/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" "b/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" deleted file mode 100644 index a05abeae88..0000000000 --- "a/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Entendendo o uso do método appendChild em javascript -slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript ---- -
{{ApiRef("DOM")}}
- -

Resumo

- -

Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.

- -

Sintaxe

- -
var filho = elemento.appendChild(filho);
- - - -

Descrição

- -

O método appendChild devolve uma referência ao nó adicionado.

- -

Exemplo

- -
// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
-var p = document.createElement("p");
-document.body.appendChild(p);
- -

Notas

- -

Se filho é uma referência a um nó existente no documento, appendChild vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).

- -

Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, só então, ser adicionado na nova posição.

- -

Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método cloneNode não serão mantidas sincronizadas automaticamente)

- -

Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.

- -

appendChild() é um dos métodos fundamentais da programação para a web usando o DOM. O método appendChild() insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.

- -

Especificação

- - - -

Ver também

- - diff --git a/files/pt-br/web/api/node/innertext/index.html b/files/pt-br/web/api/node/innertext/index.html deleted file mode 100644 index 1ab5e81027..0000000000 --- a/files/pt-br/web/api/node/innertext/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("DOM")}}
- -

Resumo

- -

Node.innerText é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.

- -

{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.

- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduzida, baseado no rascunho da especifição de innerText. Ver whatwg/html#465 e whatwg/compat#5 para histórico.
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico4{{ CompatGeckoDesktop(45) }}69.6 (provavelmente antes)3
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico2.3 (provavelmente antes){{ CompatGeckoMobile(45) }}10 (provavelmente antes)124.1 (provavelmente antes)
-
- -

Ver também

- - diff --git a/files/pt-br/web/api/notificacoes/index.html b/files/pt-br/web/api/notificacoes/index.html deleted file mode 100644 index 9103aac190..0000000000 --- a/files/pt-br/web/api/notificacoes/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Notificações -slug: Web/API/notificacoes -tags: - - API - - Interface - - Notificações -translation_of: Web/API/Notification ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

A interface da API de Notificações é usada para configurar e exibir notificações  na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.

- - -

Construtor

- -
-
{{domxref("Notification.Notification", "Notification()")}}
-
Cria uma nova instancia do objeto {{domxref('Notification')}}.
-
- -

Propriedades

- -

Propriedades estáticas

- -

Estas propriedades estão disponíveis apenas no próprio objeto  Notification.

- -
-
{{domxref("Notification.permission")}} {{readonlyinline}}
-
-
-
-
- -
-
Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).
-
-
-
- -

Propriedades da instância

- -

Estas propriedades estão disponíveis apenas em instâncias do objeto Notification.

- -
-
{{domxref("Notification.title")}} {{readonlyinline}}
-
Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.
-
{{domxref("Notification.dir")}} {{readonlyinline}}
-
A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.lang")}} {{readonlyinline}}
-
-
-
O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.
-
-
-
{{domxref("Notification.body")}} {{readonlyinline}}
-
O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.tag")}} {{readonlyinline}}
-
O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.icon")}} {{readonlyinline}}
-
A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.data")}} {{readonlyinline}}
-
Retorna um clone estruturado de dados da notificação.
-
{{domxref("Notification.silent")}} {{readonlyinline}}
-
-
-
Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.
-
-
-
- -

Propriedades não suportadas

- -

As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.

- -
-
{{domxref("Notification.noscreen")}} {{readonlyinline}}
-
-
-
Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.
-
-
-
{{domxref("Notification.renotify")}} {{readonlyinline}}
-
-
-
Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.
-
-
-
{{domxref("Notification.sound")}} {{readonlyinline}}
-
Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.
-
{{domxref("Notification.sticky")}} {{readonlyinline}}
-
Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.
-
{{domxref("Notification.vibrate")}} {{readonlyinline}}
-
Especifica um padrão de vibração para dispositivos com hardware de vibração.
-
- -

Manipuladores de Eventos

- -
-
{{domxref("Notification.onclick")}}
-
O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.
-
{{domxref("Notification.onerror")}}
-
O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.
-
- -

Manipuladores Obsoletos

- -

Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.

- -
-
{{domxref("Notification.onclose")}}
-
Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.
-
{{domxref("Notification.onshow")}}
-
Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.
-
- -

Métodos

- -

Métodos Estáticos

- -

Estes métodos estão disponíveis apenas no próprio objeto Notification.

- -
-
{{domxref("Notification.requestPermission()")}}
-
-
-
Solicita a permissão do usuário para exibir notificações.
-
-
-
- -

Métodos de instância

- -

Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu prototype. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.

- -
-
{{domxref("Notification.close()")}}
-
Programaticamente fecha uma notificação.
-
- -

Exemplos

- -

Leve em conta este HTML básico:

- -
<button onclick="notifyMe()">Notifique me!</button>
- -

É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.

- -
function notifyMe() {
-  // Verifica se o browser suporta notificações
-  if (!("Notification" in window)) {
-    alert("Este browser não suporta notificações de Desktop");
-  }
-
-  // Let's check whether notification permissions have already been granted
-  else if (Notification.permission === "granted") {
-    // If it's okay let's create a notification
-    var notification = new Notification("Hi there!");
-  }
-
-  // Otherwise, we need to ask the user for permission
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // If the user accepts, let's create a notification
-      if (permission === "granted") {
-        var notification = new Notification("Hi there!");
-      }
-    });
-  }
-
-  // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them any more.
-}
- -

{{EmbedLiveSample('Exemplo', '100%', 30)}}

- -

Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso Emogotchi demo (veja o código fonte), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:

- -
Notification.requestPermission();
- -

Em seguida executar um simples spawnNotification() quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.

- -
function spawnNotification(corpo,icone,titulo) {
-  var opcoes = {
-      body: corpo,
-      icon: icone
-  }
-  var n = new Notification(titulo,opcoes);
-}
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilidade dos Navegadores

- - - -

{{Compat("api.Notification")}}

-

Veja também

- - diff --git a/files/pt-br/web/api/notification/index.html b/files/pt-br/web/api/notification/index.html new file mode 100644 index 0000000000..9103aac190 --- /dev/null +++ b/files/pt-br/web/api/notification/index.html @@ -0,0 +1,217 @@ +--- +title: Notificações +slug: Web/API/notificacoes +tags: + - API + - Interface + - Notificações +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

A interface da API de Notificações é usada para configurar e exibir notificações  na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.

+ + +

Construtor

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Cria uma nova instancia do objeto {{domxref('Notification')}}.
+
+ +

Propriedades

+ +

Propriedades estáticas

+ +

Estas propriedades estão disponíveis apenas no próprio objeto  Notification.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
+
+
+
+ +
+
Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).
+
+
+
+ +

Propriedades da instância

+ +

Estas propriedades estão disponíveis apenas em instâncias do objeto Notification.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
+
+
O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.
+
+
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Retorna um clone estruturado de dados da notificação.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
+
+
Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.
+
+
+
+ +

Propriedades não suportadas

+ +

As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
+
+
Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.
+
+
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
+
+
Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.
+
+
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Especifica um padrão de vibração para dispositivos com hardware de vibração.
+
+ +

Manipuladores de Eventos

+ +
+
{{domxref("Notification.onclick")}}
+
O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.
+
{{domxref("Notification.onerror")}}
+
O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.
+
+ +

Manipuladores Obsoletos

+ +

Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.

+ +
+
{{domxref("Notification.onclose")}}
+
Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.
+
{{domxref("Notification.onshow")}}
+
Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.
+
+ +

Métodos

+ +

Métodos Estáticos

+ +

Estes métodos estão disponíveis apenas no próprio objeto Notification.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
+
+
Solicita a permissão do usuário para exibir notificações.
+
+
+
+ +

Métodos de instância

+ +

Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu prototype. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Programaticamente fecha uma notificação.
+
+ +

Exemplos

+ +

Leve em conta este HTML básico:

+ +
<button onclick="notifyMe()">Notifique me!</button>
+ +

É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.

+ +
function notifyMe() {
+  // Verifica se o browser suporta notificações
+  if (!("Notification" in window)) {
+    alert("Este browser não suporta notificações de Desktop");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

{{EmbedLiveSample('Exemplo', '100%', 30)}}

+ +

Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso Emogotchi demo (veja o código fonte), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:

+ +
Notification.requestPermission();
+ +

Em seguida executar um simples spawnNotification() quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.

+ +
function spawnNotification(corpo,icone,titulo) {
+  var opcoes = {
+      body: corpo,
+      icon: icone
+  }
+  var n = new Notification(titulo,opcoes);
+}
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidade dos Navegadores

+ + + +

{{Compat("api.Notification")}}

+

Veja também

+ + diff --git a/files/pt-br/web/api/performance_api/index.html b/files/pt-br/web/api/performance_api/index.html new file mode 100644 index 0000000000..1b6997e293 --- /dev/null +++ b/files/pt-br/web/api/performance_api/index.html @@ -0,0 +1,138 @@ +--- +title: API de Desempenho +slug: Web/API/API_de_Desempenho +translation_of: Web/API/Performance_API +--- +
{{DefaultAPISidebar("High Resolution Time")}}
+ +

The High Resolution Time standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).

+ +

Since a platform's system clock is subject to various skews (such as NTP adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. As such, the Performance API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.

+ +

DOMHighResTimeStamp

+ +

The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a double and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.

+ +

The unit of DOMHighResTimeStamp is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.

+ +

Methods

+ +

The {{domxref("Performance")}} interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.

+ +

The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.

+ +

Properties

+ +

The {{domxref("Performance")}} interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.

+ +

The {{domxref("Performance.navigation","navigation")}} property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.

+ +

Interfaces

+ +
+
{{domxref('Performance')}}
+
Provides methods and properties containing timing-related performance information for the given page.
+
{{domxref('PerformanceEntry')}}
+
Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.
+
{{domxref('PerformanceFrameTiming')}}
+
Provides methods and properties containing frame timing data about the browser's event loop.
+
{{domxref('PerformanceMark')}}
+
An abstract interface for performance entries with an entry type of "mark". Entries of this type are created by calling performance.mark() to add a named DOMHighResTimeStamp (the mark) to the browser's performance timeline.
+
{{domxref('PerformanceMeasure')}}
+
An abstract interface for performance entries with an entry type of "measure". Entries of this type are created by calling performance.measure() to add a namedDOMHighResTimeStamp (the measure) between two marks to the browser's performance timeline.
+
{{domxref('PerformanceNavigationTiming')}}
+
Provides methods and properties to store and retrieve high resolution timestamps or metrics regarding the browser's document navigation events.
+
{{domxref('PerformanceObserver')}}
+
Provides methods and properties used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
+
{{domxref('PerformanceResourceTiming')}}
+
Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Initial definition.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Adds performance attribute on Window and WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Add timeOrigin property to Performance interface.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Adds PerformanceFrameTiming interface.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Adds the PerformanceTiming and PerformanceNavigation interfaces. Adds timing and navigation properties to the Performance interface.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Adds the PerformanceNavigationTiming interface. Obsolete's the the PerformanceTiming interface, the PerformanceNavigation interface, as well as the timing and navigation properties to the Performance interface.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Adds the PerformanceEntry interface, the PerformanceEntryList type, as well as the getEntries(), getEntriesByType(), and getEntriesByName() methods on the Performance interface.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Adds serializer to the PerformanceEntry interface as well as adding the PerformanceObserver interface and callback
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Adds the PerformanceResourceTiming interface. Adds the clearResourceTimings() method, the setResourceTimingBufferSize() method, and the onresourcetimingbufferfull event handler to the Performance interface. Also adds the Timing-Allow-Origin response header.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Adds the nextHopProtocol, workerStart, transferSize, encodedBodySize, and decodedBodySize properties to the PerformanceResourceTiming interface.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Adds mark(), clearMarks(), measure() and clearMeasures() methods to the Performance interface. Adds the PerformanceMark and PeformanceMeasure interfaces.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
+ +

Implementation status

+ +

As shown in the {{domxref("Performance")}} interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers.

+ +

To test your browser's support for the {{domxref("Performance")}} interface, run the perf-api-support application.

+ +

See Also

+ + diff --git a/files/pt-br/web/api/push_api/best_practices/index.html b/files/pt-br/web/api/push_api/best_practices/index.html new file mode 100644 index 0000000000..9b0fafd2b7 --- /dev/null +++ b/files/pt-br/web/api/push_api/best_practices/index.html @@ -0,0 +1,73 @@ +--- +title: Melhores práticas +slug: Web/API/API_Push/Best_Practices +tags: + - Apps + - Iniciante + - Melhores Práticas + - Notificações + - Push API + - Usabilidade +translation_of: Web/API/Push_API/Best_Practices +--- +

{{draft}}

+ +

Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.

+ +
+

“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.

+
+ +

Visão Geral do web push notifications

+ +

Notificações Web Push (criadas usando uma combinação das APIs de Notificações, Push e Service Worker) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "web push notifications", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos

+ +

O Lado obscuro

+ +

Essa novidade oferece uma oportunidade nova e inexplorada para sites empresariais chegarem aos seus consumidores finais. Seu usuário trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou oferecendo frete grátis, o qual ele não vai poder ignorar

+ +

Mas sério, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?

+ +
+

“O envio de notificações push não corre o risco de acabar na pasta de spam. Nem pode ser bloqueado por bloqueadores de anúncios. Ele aparece na sua área de trabalho, mesmo quando o site está fechado. No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução.” — um site de marketing anonimo

+
+ +

Bons usos das notificações

+ +

Mas há também um lado bom no que se diz respeito as notificações por push. Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema. Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.

+ +

Neste documento, falaremos sobre o uso correto das notificações por push da web. Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.

+ +

O que se espera alcançar com as notificações push?

+ +

Como tudo, com grande poder vem uma grande responsabilidade. Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.

+ +

Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:

+ + + +

Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.

+ +

Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo. Suas notificações devem ser acolhedoras, não hostis.

+ +

Gerando confiança

+ +

Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final. Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo. Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.

+ +

Mitigações dos navegadores

+ +

Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema. Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando[1] fazer—que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups. Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.

+ +

[1] No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência dom.webnotifications.requireuserinteraction.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/push_api/index.html b/files/pt-br/web/api/push_api/index.html new file mode 100644 index 0000000000..563b711cd8 --- /dev/null +++ b/files/pt-br/web/api/push_api/index.html @@ -0,0 +1,172 @@ +--- +title: API Push +slug: Web/API/API_Push +tags: + - API + - Experimental + - Notificações + - Push + - Referencia + - Service Workers +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

A API Push torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.

+ +
+

Nota: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja Simple Push.

+
+ +

Conceitos e uso de Push

+ +

Para uma aplicação receber mensagens push, ela precisa ter um service worker ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.

+ +

O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.

+ +

O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Cada assinatura é única para um service worker.  O endpoint para a assinatura é uma capability URL única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.

+ +

A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite.  O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.

+ +
+

Nota: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.

+
+ +
+

Nota: Chrome atualmente requer que você crie um projeto no Google Cloud Messaging para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um app manifest com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Representa uma ação push enviada para o global scope de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.
+
{{domxref("PushSubscription")}}
+
Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.
+
+ +

Service worker additions

+ +

As seguintes informações adicionais para a Service Worker API foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Um manipulador de eventos disparado sempre que um evento  {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Um manipulador de eventos disparado sempre que um evento  {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("Push API")}}{{Spec2("Push API")}}Definição Inicial
+ +

Compatibilidade em Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.

+ +

[2] Ainda não implementado. Veja Microsoft Edge status information.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/randomsource/getrandomvalues/index.html b/files/pt-br/web/api/randomsource/getrandomvalues/index.html deleted file mode 100644 index 7e54e933ed..0000000000 --- a/files/pt-br/web/api/randomsource/getrandomvalues/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: RandomSource.getRandomValues() -slug: Web/API/RandomSource/getRandomValues -translation_of: Web/API/Crypto/getRandomValues ---- -

{{APIRef("Web Crypto API")}}

- -

O método RandomSource.getRandomValues() permite que você obtenha valores criptográficos randômicos. O array passado como parametro é preenchido com números randômicos (randômicos no sentido criptográfico).

- -

Para garantir performance suficiente, as implementações não estão usando um gerador de número randômico de verdade, mas estão usando um gerador de número pseudo-randômico alimentado com um valor com {{Glossary("entropia")}} suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-randômico) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.

- -

Sintaxe

- -
cryptoObj.getRandomValues(typedArray);
- -

Parâmetros

- -
-
typedArray
-
É uma {{jsxref("TypedArray")}} de números inteiros, que pode ser {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, ou {{jsxref("Uint32Array")}}. Todos os elementos no array serão sobrescristos com números randômicos.
-
- -

Exceções

- - - -

Exemplo

- -
/* assumindo que window.crypto.getRandomValues está disponível */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Seus números da sorte são:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definição inicial
- - - -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}21.011.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23.021.011.0{{ CompatNo() }}6
-
- -

Veja também

- - diff --git a/files/pt-br/web/api/randomsource/index.html b/files/pt-br/web/api/randomsource/index.html deleted file mode 100644 index e0dbd0a970..0000000000 --- a/files/pt-br/web/api/randomsource/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - RandomSource - - Referencia - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -

{{APIRef("Web Crypto API")}}

- -

RandomSource representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.

- -

RandomSource não é uma interface e nenhum objeto deste tipo pode ser criado.

- -

Propriedades

- -

RandomSource não define ou herda nenhuma propriedade.

- -
-
- -

Métodos

- -
-
{{ domxref("RandomSource.getRandomValues()") }}
-
Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.
-
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
-
- -

[1] Apesar da RandomSource estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.

- -

Veja também

- - diff --git a/files/pt-br/web/api/selection/index.html b/files/pt-br/web/api/selection/index.html new file mode 100644 index 0000000000..9cac677942 --- /dev/null +++ b/files/pt-br/web/api/selection/index.html @@ -0,0 +1,206 @@ +--- +title: Seleção +slug: Web/API/Seleção +tags: + - API + - Experimental + - Interface + - Referencia + - Seleção +translation_of: Web/API/Selection +--- +
{{ ApiRef("DOM") }}{{SeeCompatTable}}
+ +

Um objeto Selection representa um intervalo do texto selecionado pelo usuário ou a posição atual do cursor. Para obter o objeto Selection para inspecionar ou modificar, use {{DOMxRef("Window.getSelection()")}}.

+ +

O usuário pode fazer a seleção da esquerda para a direita (na orientação do documento) ou da direita para a esquerta (orientação inversa do documento). O atributo anchor (âncora) é onde o usuário iniciou a seleção e o atributo focus (foco) é onde o usuário terminou a seleção. Se você fizer a seleção utilizando um mouse no desktop, o anchor é definido onde você pressionou o botão do mouse e o focus é definido onde você soltou o botão do mouse. Anchor e focus não devem ser confundidos com a posição inicial e final da seleção, pois o anchor pode ser definido antes do focus ou vice versa, dependendo da direção em que você fez sua seleção.

+ +

Propriedades

+ +
+
{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}
+
Retorna o {{DOMxRef("Node")}} onde a seleção começou.
+
{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}
+
Retorna um número representando o deslocamento do anchor dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o anchor (clique inicial da seleção). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o anchor.
+
{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}
+
Retorna o {{DOMxRef("Node")}} onde a seleção termina.
+
{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}
+
Retorna um número representando o deslocamento do focus dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o focus (posição onde o mouse foi solto). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o focus.
+
{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}
+
Retorna um valor booleano indicando se o início e o final da seleção são a mesma posição, ou seja, começou e terminou no mesmo lugar.
+
{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}
+
Retorna no número de intervalos da seleção.
+
{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}
+
Retorna um {{DOMxRef("DOMString")}} descrevento o tipo da seleção atual.
+
+ +

Métodos

+ +
+
{{DOMxRef("Selection.addRange()")}}
+
Um objeto {{DOMxRef("Range")}} que será adicionado na seleção.
+
{{DOMxRef("Selection.collapse()")}}
+
Colapsa a seleção atual em um único ponto.
+
{{DOMxRef("Selection.collapseToEnd()")}}
+
Colapsa a seleção para o final do último intervalo na seleção.
+
{{DOMxRef("Selection.collapseToStart()")}}
+
Colapsa a seleção para o início do primeiro intervalo na seleção.
+
{{DOMxRef("Selection.containsNode()")}}
+
Indica se um certo nó é parte da seleção.
+
{{DOMxRef("Selection.deleteFromDocument()")}}
+
Apaga o conteúdo da seleção do documento.
+
{{DOMxRef("Selection.empty()")}}
+
Remove todos os intervalos da seleção. Este é um apelido para removeAllRanges() — Veja {{DOMxRef("Selection.removeAllRanges()")}} para mais detalhes.
+
{{DOMxRef("Selection.extend()")}}
+
Move o focus (final da seleção) para um ponto específico.
+
{{DOMxRef("Selection.getRangeAt()")}}
+
Retorna um objeto {{DOMxRef("Range")}} represetando um dos intervalos atualmente selecionados.
+
{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}
+
Altera a seleção atual.
+
{{DOMxRef("Selection.removeRange()")}}
+
Remove um intervalo da seleção.
+
{{DOMxRef("Selection.removeAllRanges()")}}
+
Remove todos os intervalos da seleção.
+
{{DOMxRef("Selection.selectAllChildren()")}}
+
Adiciona todos os filhos do nó especificado para a seleção.
+
{{DOMxRef("Selection.setBaseAndExtent()")}}
+
Define que a seleção será um intervalo incluindo todos ou partes dos dois nós DOM especificados, e qualquer conteúdo entre esses nós.
+
{{DOMxRef("Selection.setPosition()")}}
+
Colapsa a seleção atual para um único ponto. Este é um apelido para collapse() — Veja {{DOMxRef("Selection.collapse()")}} para mais detalhes.
+
{{DOMxRef("Selection.toString()")}}
+
Retorna uma string atualmente representada pelo objeto selection, i.e. o texto atualmente selecionado.
+
+ +

Notas

+ +

Representação da seleção em formato de String

+ +

Chamando a função {{DOMxRef("Selection.toString()")}} retorna o texto selecionado, e.g.:

+ +
var selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Perceba que usando um objeto selection como argumento de window.alert executará o metodo toString automaticamente.

+ +

Multiplos intervalos em uma seleção

+ +

Um objeto selection representa os {{DOMxRef("range","intervalos")}} que o usuário selecionou.
+ Normalmente é apenas um intervalo, acessado da seguinte forma:

+ +
+
var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);
+
+ + + +

Como consta nas Especificações da API de seleção, a API foi inicialmente criada pela Netscape e usados multiplos intervalos, por instância, para permitir ao usuário selecionar uma coluna de uma {{HTMLElement("table")}}. Outros navegadores como Gecko não implementaram multiplos intervalos, e a especificação exige que a seleção sempre tenha um único intervalo.

+ +

Seleção e foco de input

+ +

Seleção e foco de input (indicado por {{DOMxRef("Document.activeElement")}}) tem uma relação complexa, que depende do navegador. Para um código compatível com vários navegadores, o melhor é manter os códigos separados.

+ +

O Safari e o Chrome (ao contrário do Firefox) historicamente foca no elemento contendo a seleção quando a seleção é modificada programaticamente, mas isto pode mudar no futuro (veja W3C bug 14383 e {{WebKitBug("38696")}}).

+ +

Comportamento da API de Seleção em termos de edição e alterações de foco do host

+ +

A API de Seleção tem um comportamento comum (i.e. compartilhado entre navegadores) que define como o comportamento do foco muda para elemento editável, após alguns desses métodos serem executados.

+ +

Os comportamentos são que um elemento editado recebe o foco se anteriormente a seleção estiver fora dele, então um método da API de seleção é executado e causa uma nova seleção que será feita em um único intervalo dentro do elemento sendo editado. O foco então é movido para o final do elemento.

+ +
+

Nota: Os métodos da API de seleção, move o foco apenas para o elemento sendo editado, não para outro elemento que pode receber o foco (e.g. {{HTMLElement("a")}}).

+
+ +

O comportamento acima é aplicado para as seleções feitas usando os seguintes métodos:

+ + + +

e quando o intervalo é modificado usando os seguintes métodos:

+ + + +

Glossário

+ +

Outras palavras chaves usadas nesta seção.

+ +
+
anchor
+
O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move.
+
Elemento editável
+
Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado.
+
foco de uma seleção
+
O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. Nota: Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}.
+
intervalo
+
Um intervalo é uma parte contínua do documento. Um intervalo pode conter nós inteiros ou partes de nós, como uma parte de um text node. Um usuário normalmente irá selecionar um único intervalo por vez, mas é possível que o usuário selecione multiplos intervalos (e.g. usando a tecla Control). Um intervalo pode ser obtido de uma seleção como um objeto {{DOMxRef("range")}}. Um objeto de intervalo pode ser criado no DOM e programaticamente adicionada ou removida de uma seleção.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API", "#selection-interface", "Seleção")}}{{Spec2("Selection API")}}A especificação da API de Seleção é baseada na especificação da API de edição HTML e focada na funcionalidade relacionada à seleção.
{{SpecName("HTML Editing", "#selection", "Seleção")}}{{Spec2("HTML Editing")}}Definição incial (antiga).
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("api.Selection")}}

+ +

Veja também

+ + + +

Notas da Gecko

+ + + +
+
diff --git "a/files/pt-br/web/api/sele\303\247\303\243o/index.html" "b/files/pt-br/web/api/sele\303\247\303\243o/index.html" deleted file mode 100644 index 9cac677942..0000000000 --- "a/files/pt-br/web/api/sele\303\247\303\243o/index.html" +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Seleção -slug: Web/API/Seleção -tags: - - API - - Experimental - - Interface - - Referencia - - Seleção -translation_of: Web/API/Selection ---- -
{{ ApiRef("DOM") }}{{SeeCompatTable}}
- -

Um objeto Selection representa um intervalo do texto selecionado pelo usuário ou a posição atual do cursor. Para obter o objeto Selection para inspecionar ou modificar, use {{DOMxRef("Window.getSelection()")}}.

- -

O usuário pode fazer a seleção da esquerda para a direita (na orientação do documento) ou da direita para a esquerta (orientação inversa do documento). O atributo anchor (âncora) é onde o usuário iniciou a seleção e o atributo focus (foco) é onde o usuário terminou a seleção. Se você fizer a seleção utilizando um mouse no desktop, o anchor é definido onde você pressionou o botão do mouse e o focus é definido onde você soltou o botão do mouse. Anchor e focus não devem ser confundidos com a posição inicial e final da seleção, pois o anchor pode ser definido antes do focus ou vice versa, dependendo da direção em que você fez sua seleção.

- -

Propriedades

- -
-
{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}
-
Retorna o {{DOMxRef("Node")}} onde a seleção começou.
-
{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}
-
Retorna um número representando o deslocamento do anchor dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o anchor (clique inicial da seleção). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o anchor.
-
{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}
-
Retorna o {{DOMxRef("Node")}} onde a seleção termina.
-
{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}
-
Retorna um número representando o deslocamento do focus dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o focus (posição onde o mouse foi solto). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o focus.
-
{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}
-
Retorna um valor booleano indicando se o início e o final da seleção são a mesma posição, ou seja, começou e terminou no mesmo lugar.
-
{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}
-
Retorna no número de intervalos da seleção.
-
{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}
-
Retorna um {{DOMxRef("DOMString")}} descrevento o tipo da seleção atual.
-
- -

Métodos

- -
-
{{DOMxRef("Selection.addRange()")}}
-
Um objeto {{DOMxRef("Range")}} que será adicionado na seleção.
-
{{DOMxRef("Selection.collapse()")}}
-
Colapsa a seleção atual em um único ponto.
-
{{DOMxRef("Selection.collapseToEnd()")}}
-
Colapsa a seleção para o final do último intervalo na seleção.
-
{{DOMxRef("Selection.collapseToStart()")}}
-
Colapsa a seleção para o início do primeiro intervalo na seleção.
-
{{DOMxRef("Selection.containsNode()")}}
-
Indica se um certo nó é parte da seleção.
-
{{DOMxRef("Selection.deleteFromDocument()")}}
-
Apaga o conteúdo da seleção do documento.
-
{{DOMxRef("Selection.empty()")}}
-
Remove todos os intervalos da seleção. Este é um apelido para removeAllRanges() — Veja {{DOMxRef("Selection.removeAllRanges()")}} para mais detalhes.
-
{{DOMxRef("Selection.extend()")}}
-
Move o focus (final da seleção) para um ponto específico.
-
{{DOMxRef("Selection.getRangeAt()")}}
-
Retorna um objeto {{DOMxRef("Range")}} represetando um dos intervalos atualmente selecionados.
-
{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}
-
Altera a seleção atual.
-
{{DOMxRef("Selection.removeRange()")}}
-
Remove um intervalo da seleção.
-
{{DOMxRef("Selection.removeAllRanges()")}}
-
Remove todos os intervalos da seleção.
-
{{DOMxRef("Selection.selectAllChildren()")}}
-
Adiciona todos os filhos do nó especificado para a seleção.
-
{{DOMxRef("Selection.setBaseAndExtent()")}}
-
Define que a seleção será um intervalo incluindo todos ou partes dos dois nós DOM especificados, e qualquer conteúdo entre esses nós.
-
{{DOMxRef("Selection.setPosition()")}}
-
Colapsa a seleção atual para um único ponto. Este é um apelido para collapse() — Veja {{DOMxRef("Selection.collapse()")}} para mais detalhes.
-
{{DOMxRef("Selection.toString()")}}
-
Retorna uma string atualmente representada pelo objeto selection, i.e. o texto atualmente selecionado.
-
- -

Notas

- -

Representação da seleção em formato de String

- -

Chamando a função {{DOMxRef("Selection.toString()")}} retorna o texto selecionado, e.g.:

- -
var selObj = window.getSelection();
-window.alert(selObj);
-
- -

Perceba que usando um objeto selection como argumento de window.alert executará o metodo toString automaticamente.

- -

Multiplos intervalos em uma seleção

- -

Um objeto selection representa os {{DOMxRef("range","intervalos")}} que o usuário selecionou.
- Normalmente é apenas um intervalo, acessado da seguinte forma:

- -
-
var selObj = window.getSelection();
-var range  = selObj.getRangeAt(0);
-
- - - -

Como consta nas Especificações da API de seleção, a API foi inicialmente criada pela Netscape e usados multiplos intervalos, por instância, para permitir ao usuário selecionar uma coluna de uma {{HTMLElement("table")}}. Outros navegadores como Gecko não implementaram multiplos intervalos, e a especificação exige que a seleção sempre tenha um único intervalo.

- -

Seleção e foco de input

- -

Seleção e foco de input (indicado por {{DOMxRef("Document.activeElement")}}) tem uma relação complexa, que depende do navegador. Para um código compatível com vários navegadores, o melhor é manter os códigos separados.

- -

O Safari e o Chrome (ao contrário do Firefox) historicamente foca no elemento contendo a seleção quando a seleção é modificada programaticamente, mas isto pode mudar no futuro (veja W3C bug 14383 e {{WebKitBug("38696")}}).

- -

Comportamento da API de Seleção em termos de edição e alterações de foco do host

- -

A API de Seleção tem um comportamento comum (i.e. compartilhado entre navegadores) que define como o comportamento do foco muda para elemento editável, após alguns desses métodos serem executados.

- -

Os comportamentos são que um elemento editado recebe o foco se anteriormente a seleção estiver fora dele, então um método da API de seleção é executado e causa uma nova seleção que será feita em um único intervalo dentro do elemento sendo editado. O foco então é movido para o final do elemento.

- -
-

Nota: Os métodos da API de seleção, move o foco apenas para o elemento sendo editado, não para outro elemento que pode receber o foco (e.g. {{HTMLElement("a")}}).

-
- -

O comportamento acima é aplicado para as seleções feitas usando os seguintes métodos:

- - - -

e quando o intervalo é modificado usando os seguintes métodos:

- - - -

Glossário

- -

Outras palavras chaves usadas nesta seção.

- -
-
anchor
-
O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move.
-
Elemento editável
-
Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado.
-
foco de uma seleção
-
O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. Nota: Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}.
-
intervalo
-
Um intervalo é uma parte contínua do documento. Um intervalo pode conter nós inteiros ou partes de nós, como uma parte de um text node. Um usuário normalmente irá selecionar um único intervalo por vez, mas é possível que o usuário selecione multiplos intervalos (e.g. usando a tecla Control). Um intervalo pode ser obtido de uma seleção como um objeto {{DOMxRef("range")}}. Um objeto de intervalo pode ser criado no DOM e programaticamente adicionada ou removida de uma seleção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Selection API", "#selection-interface", "Seleção")}}{{Spec2("Selection API")}}A especificação da API de Seleção é baseada na especificação da API de edição HTML e focada na funcionalidade relacionada à seleção.
{{SpecName("HTML Editing", "#selection", "Seleção")}}{{Spec2("HTML Editing")}}Definição incial (antiga).
- -

Compatibilidade de navegadores

- - - -

{{Compat("api.Selection")}}

- -

Veja também

- - - -

Notas da Gecko

- - - -
-
diff --git a/files/pt-br/web/api/svgaelement/svgalement.target/index.html b/files/pt-br/web/api/svgaelement/svgalement.target/index.html deleted file mode 100644 index e197ee81e5..0000000000 --- a/files/pt-br/web/api/svgaelement/svgalement.target/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: SVGAElement.target -slug: Web/API/SVGAElement/SVGAlement.target -tags: - - Imagem vetorial - - Vetores -translation_of: Web/API/SVGAElement/target -translation_of_original: Web/API/SVGAElement/SVGAlement.target ---- -

{{APIRef("SVGAElement")}}

- -

O SVGAElement.target propriedade somente ler de {{domxref("SVGAElement")}} retorna um objeto {{domxref("SVGAnimatedString")}} que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.

- -

Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).

- -

Sintaxe

- -
myLink.target = 'value';
- -

Valor

- -

Um {{domxref("SVGAnimatedString")}} indica o destino final do recurso que abre o documento assim que o link é acionado.

- -

Valores para {{domxref("target")}} você pode ver aqui.

- -

Exemplo

- -

O código é foi retirado de "SVGAElement example code"

- -
...
-var linkRef = document.querySelector('a');
-linkRef.target ='_blank';
-...
- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
- -

Compatibilidade com o navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Veja também

- - diff --git a/files/pt-br/web/api/svgaelement/target/index.html b/files/pt-br/web/api/svgaelement/target/index.html new file mode 100644 index 0000000000..e197ee81e5 --- /dev/null +++ b/files/pt-br/web/api/svgaelement/target/index.html @@ -0,0 +1,106 @@ +--- +title: SVGAElement.target +slug: Web/API/SVGAElement/SVGAlement.target +tags: + - Imagem vetorial + - Vetores +translation_of: Web/API/SVGAElement/target +translation_of_original: Web/API/SVGAElement/SVGAlement.target +--- +

{{APIRef("SVGAElement")}}

+ +

O SVGAElement.target propriedade somente ler de {{domxref("SVGAElement")}} retorna um objeto {{domxref("SVGAnimatedString")}} que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.

+ +

Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).

+ +

Sintaxe

+ +
myLink.target = 'value';
+ +

Valor

+ +

Um {{domxref("SVGAnimatedString")}} indica o destino final do recurso que abre o documento assim que o link é acionado.

+ +

Valores para {{domxref("target")}} você pode ver aqui.

+ +

Exemplo

+ +

O código é foi retirado de "SVGAElement example code"

+ +
...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...
+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
+ +

Compatibilidade com o navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/touch_events/index.html b/files/pt-br/web/api/touch_events/index.html new file mode 100644 index 0000000000..df21cdf335 --- /dev/null +++ b/files/pt-br/web/api/touch_events/index.html @@ -0,0 +1,353 @@ +--- +title: Eventos do Toque +slug: Web/Guide/Events/Touch_events +tags: + - Avançado + - DOM + - Evento + - Guía + - Mobile + - Visualização +translation_of: Web/API/Touch_events +--- +

Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.

+ +

Definições

+ +
+
Surface
+
A superfície sensível ao toque. Pode ser uma tela ou trackpad.
+
+ +
+
Touch point
+
Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Representa um evento quando ocorre o estado de toque na superfície.
+
{{ domxref("Touch") }}
+
Representa um único ponto de contato entre o usuário e a superfície sensível a toque.
+
{{ domxref("TouchList") }}
+
Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.
+
{{ domxref("DocumentTouch") }}
+
Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .
+
+ +

Exemplo

+ +

Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.

+ +
Nota: O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.
+ +

Crie um canvas

+ +
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+  Seu browser não tem suporte ao elemento canvas.
+</canvas>
+<br>
+<button onclick="startup()">Initialize</button>
+<br>
+Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+
+ +

Configurado os eventos

+ +

Quando uma página é carregada, a função startup() mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo onload (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleEnd, false);
+  el.addEventListener("touchmove", handleMove, false);
+  log("initialized.");
+}
+
+ +

Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem.

+ +

Rastreando novos toques

+ +

Vamos acompanhar os toques em seu progresso.

+ +
var ongoingTouches = new Array; 
+ +

Quando ocorre um evento touchstart, indicando que um novo toque na superfície tenha ocorrido, a função abaixo handleStart() é chamada. 

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    log("touchstart:"+i+"...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    log("touchstart:"+i+".");
+  }
+}
+
+ +

A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.

+ +

Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.

+ +

Desenhando movimento do toque

+ +

Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx >= 0) {
+      log("continuing touch "+idx);
+      ctx.beginPath();
+      log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      log(".");
+    } else {
+      log("can't figure out which touch to continue");
+    }
+  }
+}
+
+ +

Esta interação sobre os toques também muda, mas parece em cache as  informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.

+ +

Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.

+ +

Depois de desenhar a linha, nós chamamos Array.splice() para substituir as informações previas sobre o ponto de toque com a informação atual no array ongoingTouches.

+ +

Gerenciando o final do evento de toque 

+ +

Quando o usuário retira o dedo da superfície , um evento touchend é disparado.  Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento touchleave disparado. Nós tratamos da mesma forma em ambos os casos:  chamamos  a função handleEnd(). A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend/touchleave.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx >= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      log("can't figure out which touch to end");
+    }
+  }
+}
+
+ +

Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos Array.splice(), nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.

+ +

Tratando toques cancelados

+ +

Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função handleCancel().

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.

+ +

Funções de conveniência

+ +

Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro

+ +

Selecionando a cor para cada toque

+ +

A fim de fazer cada toque desenhar com uma cor diferente, a função  colorForTouch()  é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.

+ +
function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+
+ +

O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor  {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".

+ +

Copiando touch objects

+ +

Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.

+ +
function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}
+ +

Encontrando um toque ongoing

+ +

A função ongoingTouchIndexById() abaixo verifica através do array ongoingTouches para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i < ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // não econtrado
+}
+
+ +

Mostrando o que está acontecendo

+ +
function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}
+ +

If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.

+ +

jsFiddle example

+ +

Additional tips

+ +

This section provides additional tips on how to handle touch events in your web application.

+ +

Handling clicks

+ +

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (evt.type) {
+    case "touchstart":    type = "mousedown";    touch = evt.changedTouches[0];break;
+    case "touchmove":        type = "mousemove";    touch = evt.changedTouches[0];break;
+    case "touchend":        type = "mouseup";    touch = evt.changedTouches[0];break;
+  }
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Calling preventDefault() only on a second touch

+ +

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

+ +
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}
+ Disabled with 24 ({{ bug(888304) }})		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}(Yes){{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Gecko notes

+ +

The dom.w3c_touch_events.enabled tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.

+ +
+

Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.

+
+ +
+

Note: As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open about:config and set the dom.w3c_touch_events.enabled pref to 2. The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.

+
+ +
Note: Prior to {{Gecko("6.0") }}, Gecko offered a proprietary touch event API. That API is now deprecated; you should switch to this one.
diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html deleted file mode 100644 index 2743f68d65..0000000000 --- a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Usando a Web Animations API -slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API -tags: - - Alice - - Animação - - CSS - - Guía - - Iniciante - - JavaScript - - Timing - - Tutorial - - animar - - duration - - keyframes - - pausar - - pause - - play - - quadro-chave - - reverse - - web animations api -translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API ---- -

{{DefaultAPISidebar("Web Animations")}}

- -

A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.

- -

Conhecendo a Web Animations API

- -

A Web Animations API abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das Animações CSS e Transições CSS, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.

- -

Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!

- -

Suporte de Navegadores

- -

O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um polyfill prático que verifica o suporte e adiciona as funcionalidades onde for necessário.

- -

Escrevendo Animações CSS com a Web Animations API

- -

Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.

- -

A versão CSS

- -

Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o código completo no Codepen):

- -

Alice Tumbling down the rabbit's hole.

- -

Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:

- -
#alice {
-  animation: aliceTumbling infinite 3s linear;
-}
-
-@keyframes aliceTumbling {
-  0% {
-    color: #000;
-    transform: rotate(0) translate3D(-50%, -50%, 0);
-  }
-  30% {
-    color: #431236;
-  }
-  100% {
-    color: #000;
-    transform: rotate(360deg) translate3D(-50%, -50%, 0);
-  }
-}
- -

Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do @keyframes podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.

- -

Mudando para o JavaScript

- -

Agora vamos tentar criar a mesma animação usando a Web Animations API.

- -

Representando keyframes

- -

A primeira coisa que precisamos fazer é criar um Objeto Keyframe correspondente ao nosso bloco @keyframes do CSS:

- -
var aliceTumbling = [
-  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-  { color: '#431236', offset: 0.3},
-  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-];
- -

Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.

- -

Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como offset: 0.3.

- -

Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção NotSupportedErro em alguns browsers até eles serem atualizados.

- -

Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?

- -

Representando propriedades temporais

- -

Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:

- -
var aliceTiming = {
-  duration: 3000,
-  iterations: Infinity
-}
- -

Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:

- - - -
-

Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string "infinite", e sim a keyword JavaScript Infinity. E no lugar de timing-function, usamos easing. Não estamos citando um valor de easing aqui pois, diferente das Animações CSS onde o valor padrão do animation-timing-function é ease, na Web Animations API o padrão é linear — o que nós já queremos para a animação da Alice.

-
- -

Juntando as peças

- -

Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:

- -
document.getElementById("alice").animate(
-  aliceTumbling,
-  aliceTiming
-)
- -

E pronto: a animação começa a tocar (veja a versão final no Codepen).

- -

O método animate() pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:

- -
document.getElementById("alice").animate(
-  [
-    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-    { color: '#431236', offset: 0.3},
-    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-  ], {
-    duration: 3000,
-    iterations: Infinity
-  }
-);
- -

E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:

- -
document.getElementById("alice").animate(
-  [
-    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-    { color: '#431236', offset: 0.3},
-    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-  ], 3000);
- -

Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()

- -

Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o código completo no Codepen):

- -

Playing the growing and shrinking game with Alice.

- -

Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.

- -

Pausando e tocando animações

- -

Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.

- -
var nommingCake = document.getElementById('eat-me_sprite').animate(
-[
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(-80%)' }
-], {
-  fill: 'forwards',
-  easing: 'steps(4, end)',
-  duration: aliceChange.effect.timing.duration / 2
-});
- -

O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:

- -
nommingCake.pause();
- -

Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:

- -
nommingCake.play();
- -

Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:

- -
var growAlice = function() {
-
-  // Play Alice's animation.
-  aliceChange.play();
-
-  // Play the cake's animation.
-  nommingCake.play();
-
-}
- -

Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função growAlice para fazer todas as animações tocarem:

- -
cake.addEventListener("mousedown", growAlice, false);
-cake.addEventListener("touchstart", growAlice, false);
- -

Outros métodos úteis

- - - -

Vamos dar uma olhada primeiro no método playbackRate — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o playbackRate da animação de 1 para -1:

- -
var shrinkAlice = function() {
-  aliceChange.playbackRate = -1;
-  aliceChange.play();
-}
-
-bottle.addEventListener("mousedown", shrinkAlice, false);
-bottle.addEventListener("touchstart", shrinkAlice, false);
- -

Em Alice Através do Espelho, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o código completo no Codepen):

- -

Alice and the Red Queen race to get to the next square in this game.

- -

Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no playbackRate da animação dela. Usamos o updatePlaybackRate() no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:

- -
setInterval( function() {
-
-  // Make sure the playback rate never falls below .4
-  if (redQueen_alice.playbackRate > .4) {
-    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
-  }
-
-}, 3000);
- -

Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:

- -
var goFaster = function() {
-  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
-}
-
-document.addEventListener("click", goFaster);
-document.addEventListener("touchstart", goFaster);
- -

Os elementos do fundo também tem playbackRates que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?

- -

Extraindo informação das animações

- -

Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu playbackRate, como por exemplo:

- -
document.getAnimations().forEach(
-  function (animation) {
-    animation.updatePlaybackRate(animation.playbackRate * .5);
-  }
-);
- -

Com a Web Animations API, você só precisa mudar uma simples propriedade!

- -

Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:

- -
duration: aliceChange.effect.getComputedTiming().duration / 2
- -

Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:

- -
var aliceChange = document.getElementById('alice').animate(
-  [
-    { transform: 'translate(-50%, -50%) scale(.5)' },
-    { transform: 'translate(-50%, -50%) scale(2)' }
-  ], {
-    duration: 8000,
-    easing: 'ease-in-out',
-    fill: 'both'
-  });
- -

A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:

- -
aliceChange.pause();
- -

Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:

- -
aliceChange.currentTime = 4000;
- -

Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa currentTime dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:

- -
aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;
- -

O effect nos permite acessar os keyframes e propriedades temporais da animação — aliceChange.effect.getComputedTiming() aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!

- -

E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:

- -
var drinking = document.getElementById('liquid').animate(
-[
-  { height: '100%' },
-  { height: '0' }
-], {
-  fill: 'forwards',
-  duration: aliceChange.effect.getComputedTiming().duration / 2
-});
-drinking.pause();
- -

Agora todas as três animações estão ligadas por apenas um duration, que pode ser modificado facilmente em um só lugar do código.

- -

Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o currentTime da sua animação e dividir pelo activeDuration:

- -
var endGame = function() {
-
-  // get Alice's timeline's playhead location
-  var alicePlayhead = aliceChange.currentTime;
-  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
-
-  // stops Alice's and other animations
-  stopPlayingAlice();
-
-  // depending on which third it falls into
-  var aliceHeight = alicePlayhead / aliceTimeline;
-
-  if (aliceHeight <= .333){
-    // Alice got smaller!
-    ...
-
-  } else if (aliceHeight >= .666) {
-    // Alice got bigger!
-    ...
-
-  } else {
-    // Alice didn't change significantly
-    ...
-
-  }
-}
-
- -
-

Nota: getAnimations() e effect não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.

-
- -

Callbacks e promises

- -

Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:

- - - -

Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função endGame:

- -
// When the cake or bottle runs out...
-nommingCake.onfinish = endGame;
-drinking.onfinish = endGame;
-
-// ...or Alice reaches the end of her animation
-aliceChange.onfinish = endGame;
-
-
- -

Ainda melhor, a Web Animations API também fornece uma promise finished que será resolvida quando a animação é completada, e rejeitada se for cancelada.

- -

Conclusão

- -

Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!

- -

Veja também

- - diff --git a/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html new file mode 100644 index 0000000000..2743f68d65 --- /dev/null +++ b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -0,0 +1,358 @@ +--- +title: Usando a Web Animations API +slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API +tags: + - Alice + - Animação + - CSS + - Guía + - Iniciante + - JavaScript + - Timing + - Tutorial + - animar + - duration + - keyframes + - pausar + - pause + - play + - quadro-chave + - reverse + - web animations api +translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}

+ +

A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.

+ +

Conhecendo a Web Animations API

+ +

A Web Animations API abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das Animações CSS e Transições CSS, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.

+ +

Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!

+ +

Suporte de Navegadores

+ +

O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um polyfill prático que verifica o suporte e adiciona as funcionalidades onde for necessário.

+ +

Escrevendo Animações CSS com a Web Animations API

+ +

Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.

+ +

A versão CSS

+ +

Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o código completo no Codepen):

+ +

Alice Tumbling down the rabbit's hole.

+ +

Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:

+ +
#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}
+ +

Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do @keyframes podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.

+ +

Mudando para o JavaScript

+ +

Agora vamos tentar criar a mesma animação usando a Web Animations API.

+ +

Representando keyframes

+ +

A primeira coisa que precisamos fazer é criar um Objeto Keyframe correspondente ao nosso bloco @keyframes do CSS:

+ +
var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.3},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];
+ +

Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.

+ +

Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como offset: 0.3.

+ +

Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção NotSupportedErro em alguns browsers até eles serem atualizados.

+ +

Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?

+ +

Representando propriedades temporais

+ +

Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:

+ +
var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}
+ +

Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:

+ + + +
+

Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string "infinite", e sim a keyword JavaScript Infinity. E no lugar de timing-function, usamos easing. Não estamos citando um valor de easing aqui pois, diferente das Animações CSS onde o valor padrão do animation-timing-function é ease, na Web Animations API o padrão é linear — o que nós já queremos para a animação da Alice.

+
+ +

Juntando as peças

+ +

Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:

+ +
document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)
+ +

E pronto: a animação começa a tocar (veja a versão final no Codepen).

+ +

O método animate() pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);
+ +

E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);
+ +

Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()

+ +

Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o código completo no Codepen):

+ +

Playing the growing and shrinking game with Alice.

+ +

Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.

+ +

Pausando e tocando animações

+ +

Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.

+ +
var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+ +

O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:

+ +
nommingCake.pause();
+ +

Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:

+ +
nommingCake.play();
+ +

Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:

+ +
var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}
+ +

Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função growAlice para fazer todas as animações tocarem:

+ +
cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+ +

Outros métodos úteis

+ + + +

Vamos dar uma olhada primeiro no método playbackRate — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o playbackRate da animação de 1 para -1:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+ +

Em Alice Através do Espelho, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o código completo no Codepen):

+ +

Alice and the Red Queen race to get to the next square in this game.

+ +

Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no playbackRate da animação dela. Usamos o updatePlaybackRate() no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:

+ +
setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
+  }
+
+}, 3000);
+ +

Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:

+ +
var goFaster = function() {
+  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+ +

Os elementos do fundo também tem playbackRates que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?

+ +

Extraindo informação das animações

+ +

Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu playbackRate, como por exemplo:

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.updatePlaybackRate(animation.playbackRate * .5);
+  }
+);
+ +

Com a Web Animations API, você só precisa mudar uma simples propriedade!

+ +

Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:

+ +
duration: aliceChange.effect.getComputedTiming().duration / 2
+ +

Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:

+ +
var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });
+ +

A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:

+ +
aliceChange.pause();
+ +

Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:

+ +
aliceChange.currentTime = 4000;
+ +

Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa currentTime dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:

+ +
aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;
+ +

O effect nos permite acessar os keyframes e propriedades temporais da animação — aliceChange.effect.getComputedTiming() aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!

+ +

E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:

+ +
var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.getComputedTiming().duration / 2
+});
+drinking.pause();
+ +

Agora todas as três animações estão ligadas por apenas um duration, que pode ser modificado facilmente em um só lugar do código.

+ +

Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o currentTime da sua animação e dividir pelo activeDuration:

+ +
var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead / aliceTimeline;
+
+  if (aliceHeight <= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight >= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+
+ +
+

Nota: getAnimations() e effect não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.

+
+ +

Callbacks e promises

+ +

Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:

+ + + +

Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função endGame:

+ +
// When the cake or bottle runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+
+ +

Ainda melhor, a Web Animations API também fornece uma promise finished que será resolvida quando a animação é completada, e rejeitada se for cancelada.

+ +

Conclusão

+ +

Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/web_audio_api/index.html b/files/pt-br/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..8f582eb524 --- /dev/null +++ b/files/pt-br/web/api/web_audio_api/index.html @@ -0,0 +1,480 @@ +--- +title: API Web Áudio +slug: Web/API/API_Web_Audio +tags: + - Web Audio API + - api de áudio + - áudio api + - áudio web +translation_of: Web/API/Web_Audio_API +--- +
+

A API de áudio da web disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects (como panning) e muito mais.

+
+ +

Web audio: conceitos e uso

+ +

A API de Web audio envolve manipulação de operações com áudio dentro de um contexto de áudio, e foi desenvolvida para permitir o roteamento modular. Operações básicas de áudio são feitas com audio nodes (nós de áudio), que são ligados para formar gráficos de roteamento de áudio. Várias fontes - com diferentes tipos de layout de canal - são suportados mesmo em um único contexto. Este design modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

+ +

Audio nodes são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais nodes e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:

+ +
    +
  1. Crie um contexto de áudio
    2. +
  2. Dentro do contexto, crie fontes de áudio — como <audio>, oscilador, stream
    3. +
  3. Crie efeitos de áudio, como reverb, biquad filter, panner, compressor
    4. +
  4. Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema
    5. +
  5. Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.

+ +

A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de source-listener, a API permite controlar os painéis de modelo para serem usados e tratados com atenuação de distância induzida ou doppler shift induzido por uma fonte em movimento (ou um ouvinte em movimento).

+ +
+

Nota: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo Basic concepts behind Web Audio API.

+
+ +

Web Audio: Interfaces da API

+ +

A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.

+ +

Definições gerais de grafos de áudio (audio graph)

+ +

Definições gerais que moldam os grafos de áudio no uso da API de Web Audio.

+ +
+
{{domxref("AudioContext")}}
+
A interface AudioContext representa um grafo de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dosnós que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um AudioContext antes de fazer qualquer outra coisa.
+
{{domxref("AudioNode")}}
+
A interface AudioNode representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
A interface AudioParam representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.
+
{{event("ended_(Web_Audio)", "ended")}} (event)
+
O evento ended é disparado quando a reprodução parou porque o fim da mídia foi atingido.
+
+ +

Definindo fontes de áudio

+ +

Interfaces que definem fontes de áudio para uso na API de Web Audio.

+ +
+
{{domxref("OscillatorNode")}}
+
A interface OscillatorNode representa uma onda senoidal. Esta interface é um módulo de processamento de áudio que gera uma onda senoidal com determinada frequência.
+
{{domxref("AudioBuffer")}}
+
A interface AudioBuffer representa uma pequena porção de áudio armazenada na memória, criada a partir de um arquivo de áudio usando o método {{ domxref("AudioContext.decodeAudioData()") }}, ou criado com os dados brutos usando o método {{ domxref("AudioContext.createBuffer()") }}. Uma vez decodificado neste formato o áudio pode ser colocada em um {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
A interface AudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um {{domxref ("AudioBuffer")}}. É um {{domxref ("AudioNode")}} que atua como uma fonte de áudio.
+
{{domxref("MediaElementAudioSourceNode")}}
+
A interface MediaElementAudioSourceNode  representa uma fonte de audio consiste de um HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }} elemento. É uma {{domxref("AudioNode")}} que atua como uma fonte de áudio.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.
+
+ +

Definindo filtros de efeitos de áudio

+ +

Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.

+ +
+
{{domxref("BiquadFilterNode")}}
+
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
+
{{domxref("ConvolverNode")}}
+
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.
+
{{domxref("DelayNode")}}
+
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
+
{{domxref("DynamicsCompressorNode")}}
+
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
+
{{domxref("GainNode")}}
+
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
+
{{domxref("WaveShaperNode")}}
+
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
+
{{domxref("PeriodicWave")}}
+
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
+
+ +

Definindo destinos de áudio

+ +

Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.

+ +
+
{{domxref("AudioDestinationNode")}}
+
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
The MediaElementAudioSourceNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
+
+ +

Análise dos dados e visualização

+ +

Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o AnalyserNode é o que você necessita.

+ +
+
{{domxref("AnalyserNode")}}
+
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
+
+ +

Dividindo e mesclando canais de áudio

+ +

Para dividir e mesclar canais de áudio, você utilizará essas interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
+
{{domxref("ChannelMergerNode")}}
+
The ChannelMergerNode interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.
+
+ +

Audio spatialization

+ +

These interfaces allow you to add audio spatialization panning effects to your audio sources.

+ +
+
{{domxref("AudioListener")}}
+
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
+
{{domxref("PannerNode")}}
+
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
+
+ +

Processamento de áudio por JavaScript

+ +

Se você quiser usar um script externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.

+ +
+
{{domxref("ScriptProcessorNode")}}
+
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
+
{{event("audioprocess")}} (event)
+
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
+
{{domxref("AudioProcessingEvent")}}
+
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
+
+ +

Áudio offline

+ +

Manipular áudio offline é possível com estas interfaces.

+ +
+
{{domxref("OfflineAudioContext")}}
+
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
+
{{event("complete")}} (event)
+
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
+
+ +

Interfaces obsoletas

+ +

As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
+
+ +

Exemplo

+ +

Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo Voice-change-o-matic (também verificar o código-fonte completo no Github) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!

+ +

As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidade de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

 

+ +

Veja também

+ + + + diff --git a/files/pt-br/web/api/web_audio_api/simple_synth/index.html b/files/pt-br/web/api/web_audio_api/simple_synth/index.html new file mode 100644 index 0000000000..b0fdf2a0c4 --- /dev/null +++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.html @@ -0,0 +1,579 @@ +--- +title: 'Tutorial e exemplo: Teclado de Sintetizador Simples' +slug: Web/API/API_Web_Audio/Sintetizador_simples +tags: + - Audio + - Exemplo + - Guía + - Media + - Oscilador + - Piano + - Sintetizador + - Tutorial + - Web Audio API +translation_of: Web/API/Web_Audio_API/Simple_synth +--- +
{{DefaultAPISidebar("Web Audio API")}}
+ +

Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, e {{domxref("GainNode")}}.

+ +

Já que {{domxref("OscillatorNode")}} é baseado no {{domxref("AudioScheduledSourceNode")}}, isso até certo ponto também é um exemplo pra isto.

+ +

O Teclado Visual

+ +

HTML

+ +

Existem três componentes primários para o display do nosso teclado virtual. O primeito do qual é o teclado musical em si. Nós extraimos em um par de elementos {{HTMLElement("div")}} aninhados para permitir a rolagem horizontal caso as teclas não encaixem na tela.

+ +

O Teclado

+ +

Primeiro, criamos o espaço no qual construiremos o teclado. Estaremos construindo o teclado programaticamente, considerando que ao fazer desse jeito teremos a flexibilidade de configurar cada tecla conforme determinamos as informações apropriadas para tecla correspondente. No nosso caso, pegamos a frequência de cada tecla através de uma tabela, mas poderia ser calculado de forma algoritmica também.

+ +
<div class="container">
+  <div class="keyboard"></div>
+</div>
+
+ +

O {{HTMLElement("div")}} nomeado de "container" é a barra de rolagem que permite o teclado ser rolado horizontalmente se for largo demais para o espaço disponivel. As teclas em si serão inseridas no bloco de classe "keyboard".

+ +

A barra de opções

+ +

Abaixo do teclado, colocaremos alguns controles para configurar o camada. Por enquanto, teremos dois controles: Um para controlar o volume e outro para selecionar a forma de onda periodica usada ao gerar as notas.

+ +
O controle de volume
+ +

Primeiro criamos o <div> para conter a barra de opções, para ser personalizado conforme preciso. Então estabelecemos uma caixa que será apresentada no lado esquerdo da barra e colocar um rotulo e um elemento {{HTMLElement("input")}} do tipo "range". O elemento range será tipicamente apresentado como o controle da barra de rolagem ; configuramos ele para permitir qualquer valor entre 0.0 e 1.0 em cada posição.

+ +
<div class="settingsBar">
+  <div class="left">
+    <span>Volume: </span>
+    <input type="range" min="0.0" max="1.0" step="0.01"
+        value="0.5" list="volumes" name="volume">
+    <datalist id="volumes">
+      <option value="0.0" label="Mute">
+      <option value="1.0" label="100%">
+    </datalist>
+  </div>
+
+ +

Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de "volume". isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").

+ +
A seleção de forma de onda
+ +

E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTMLElement("select")}} nomeado de "waveform" cujas opções correspondem as formas de onda disponiveis.

+ +
  <div class="right">
+    <span>Current waveform: </span>
+    <select name="waveform">
+      <option value="sine">Sine</option>
+      <option value="square" selected>Square</option>
+      <option value="sawtooth">Sawtooth</option>
+      <option value="triangle">Triangle</option>
+      <option value="custom">Custom</option>
+    </select>
+  </div>
+</div>
+ + + +

JavaScript

+ +

O código em JavaScript começa inicializando algumas váriaveis.

+ +
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
+let oscList = [];
+let masterGainNode = null;
+
+ +
    +
  1. audioContext é colocado para referenciar o objeto global {{domxref("AudioContext")}} (ou webkitAudioContext se  necessário).
    2. +
  2. oscillators está colocado para conter uma lista de todos os osciladores atualmente tocando. Ele começa nulo, afinal não há nenhum oscilador tocando ainda.
    3. +
  3. masterGainNode é colocado como nulo; durante o processo de setup, ele será configurado para contar um {{domxref("GainNode")}} no quall todos os osciladores irão se conectar para permitir o volume geral a ser controlado por apenas uma barra de rolagem.
    4. +
+ +
let keyboard = document.querySelector(".keyboard");
+let wavePicker = document.querySelector("select[name='waveform']");
+let volumeControl = document.querySelector("input[name='volume']");
+
+ +

Referencias aos elementos que precisaremos acessar são obtidas através dp:

+ + + +
let noteFreq = null;
+let customWaveform = null;
+let sineTerms = null;
+let cosineTerms = null;
+
+ +

Enfim, variaveis globais que serão usadas quando as formas de onda são criadas:

+ + + +

Criando a tabela de notas

+ +

A função createNoteTable() constrói a matriz noteFreq para conter uma matriz de objetos representando cada oitava. Cada oitava, possui uma propriedade para cada nota nessa oitava; O nome dessa propriedade é o nome da nota (utilizando da notação em inglês, como "C" para representar "dó"), e o valor é a frequência, em Hertz, daquela nota.

+ +
function createNoteTable() {
+  let noteFreq = [];
+  for (let i=0; i< 9; i++) {
+    noteFreq[i] = [];
+  }
+
+  noteFreq[0]["A"] = 27.500000000000000;
+  noteFreq[0]["A#"] = 29.135235094880619;
+  noteFreq[0]["B"] = 30.867706328507756;
+
+  noteFreq[1]["C"] = 32.703195662574829;
+  noteFreq[1]["C#"] = 34.647828872109012;
+  noteFreq[1]["D"] = 36.708095989675945;
+  noteFreq[1]["D#"] = 38.890872965260113;
+  noteFreq[1]["E"] = 41.203444614108741;
+  noteFreq[1]["F"] = 43.653528929125485;
+  noteFreq[1]["F#"] = 46.249302838954299;
+  noteFreq[1]["G"] = 48.999429497718661;
+  noteFreq[1]["G#"] = 51.913087197493142;
+  noteFreq[1]["A"] = 55.000000000000000;
+  noteFreq[1]["A#"] = 58.270470189761239;
+  noteFreq[1]["B"] = 61.735412657015513;
+
+ +

... várias oitavas não mostradas para manter breve ...

+ + + +
  noteFreq[7]["C"] = 2093.004522404789077;
+  noteFreq[7]["C#"] = 2217.461047814976769;
+  noteFreq[7]["D"] = 2349.318143339260482;
+  noteFreq[7]["D#"] = 2489.015869776647285;
+  noteFreq[7]["E"] = 2637.020455302959437;
+  noteFreq[7]["F"] = 2793.825851464031075;
+  noteFreq[7]["F#"] = 2959.955381693075191;
+  noteFreq[7]["G"] = 3135.963487853994352;
+  noteFreq[7]["G#"] = 3322.437580639561108;
+  noteFreq[7]["A"] = 3520.000000000000000;
+  noteFreq[7]["A#"] = 3729.310092144719331;
+  noteFreq[7]["B"] = 3951.066410048992894;
+
+  noteFreq[8]["C"] = 4186.009044809578154;
+  return noteFreq;
+}
+
+ +

O resultado é uma matriz, noteFreq, com um objeto para cada oitava. Cada objeto de oitava tem propriedades nomeadas nela onde a propriedade é o nome da nota com a notação em inglês (Como "C" para representar "dó") e o valor da propriedade é a frequência da nota em Hertz.. o objeto resultando se parece com isso:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OctaveNotes
0"A" ⇒ 27.5"A#" ⇒ 29.14"B" ⇒ 30.87
1"C" ⇒ 32.70"C#" ⇒ 34.65"D" ⇒ 36.71"D#" ⇒ 38.89"E" ⇒ 41.20"F" ⇒ 43.65"F#" ⇒ 46.25"G" ⇒ 49"G#" ⇒ 51.9"A" ⇒ 55"A#" ⇒ 58.27"B" ⇒ 61.74
2. . .
+ +

Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em uma oitava particular relativamente fácil. Se queremos a frequência pra nota G# na primeira oitava, nós simplesmente usamos  noteFreq[1]["G#"] e conseguimos o valor 51.9 como resultado.

+ +
+

Os valores na tabela de exemplo acima foram arredondados para duas casas decimais.

+
+ + + +

Construindo o teclado

+ +

A função setup() é responsavel por construir o teclado e preparar a aplicação para tocar a música.

+ +
function setup() {
+  noteFreq = createNoteTable();
+
+  volumeControl.addEventListener("change", changeVolume, false);
+
+  masterGainNode = audioContext.createGain();
+  masterGainNode.connect(audioContext.destination);
+  masterGainNode.gain.value = volumeControl.value;
+
+  // Create the keys; skip any that are sharp or flat; for
+  // our purposes we don't need them. Each octave is inserted
+  // into a <div> of class "octave".
+
+  noteFreq.forEach(function(keys, idx) {
+    let keyList = Object.entries(keys);
+    let octaveElem = document.createElement("div");
+    octaveElem.className = "octave";
+
+    keyList.forEach(function(key) {
+      if (key[0].length == 1) {
+        octaveElem.appendChild(createKey(key[0], idx, key[1]));
+      }
+    });
+
+    keyboard.appendChild(octaveElem);
+  });
+
+  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
+
+  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
+  cosineTerms = new Float32Array(sineTerms.length);
+  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
+
+  for (i=0; i<9; i++) {
+      oscList[i] = {};
+  }
+}
+
+setup();
+ +
    +
  1. A tabela que mapeia o nome e oitavas das notas para suas respectivas frequências é criado ao chamar createNoteTable().
    2. +
  2. Um manipulador de eventos é estabelecido ao chamar nosso velho amigo {{domxref("EventTarget.addEventListener", "addEventListener()")}} para cuidar dos eventos do {{event("change")}} no controle de ganho geral. Isso vai simplesmente atualizar o módulo de ganho de volume para o novo valor.
    3. +
  3. Em seguida, nós replicamos cada oitava na tabela de frequências das notas. Para cada oitava, usamos {{jsxref("Object.entries()")}} para conseguir uma lista de notas daquela oitava.
    4. +
  4. Criar um {{HTMLElement("div")}} para contar as notas daquela oitava (para ter um pouco de espaço entre as oitavas), e mudar o nome de classe para "octave".
    5. +
  5. Para cada tecla na oitava, checamos para ver se o nome daquela nota há mais de um caractere. Nós pulamos essas, pois estamos deixando notas sustenidas de fora deste exemplo. Do contrário, chamamos createKey(), especificando uma string, oitava, e frequência. O elemento retornado é anexado na elemento da oitava criada no passo 4.
    6. +
  6. Quando o elemento da oitava é construido, é então anexada ao teclado.
    7. +
  7. Uma vez que o teclado foi construido, nós rolamos para nota "B" na quinta oitava; isso tem o efeito de garantir que o C médio é visivel junto das notas ao redor.
    8. +
  8. Então uma forma de onda customizada é construida usando {{domxref("AudioContext.createPeriodicWave()")}}. Essa forma de onda será usada toda vez que o usuário selecionar "Custom" da seleção de formas de onda.
    9. +
  9. Enfim, a lista de osciladores é iniciada para garantir que está pronta para receber informação identificando quais osciladores estão associados com que teclas.
    10. +
+ +

Criando uma tecla

+ +

A função createKey()  é chamada toda vez que queremos que uma tecla seja apresentada no nosso teclado virtual. Ela cria elementos da tecla e seu rótulo, adiciona informação dos atributos ao elemento para uso posterior, e coloca modificadores de eventos para os eventos que nos importam.

+ +
function createKey(note, octave, freq) {
+  let keyElement = document.createElement("div");
+  let labelElement = document.createElement("div");
+
+  keyElement.className = "key";
+  keyElement.dataset["octave"] = octave;
+  keyElement.dataset["note"] = note;
+  keyElement.dataset["frequency"] = freq;
+
+  labelElement.innerHTML = note + "<sub>" + octave + "</sub>";
+  keyElement.appendChild(labelElement);
+
+  keyElement.addEventListener("mousedown", notePressed, false);
+  keyElement.addEventListener("mouseup", noteReleased, false);
+  keyElement.addEventListener("mouseover", notePressed, false);
+  keyElement.addEventListener("mouseleave", noteReleased, false);
+
+  return keyElement;
+}
+
+ +

Após criar  os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}}  que contém a string da oitava da nota (attribute data-octave), representando a nota a ser tocada (attribute data-note), e frequência (attribute data-frequency) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos.

+ +

Fazendo música

+ +

Tocando um tom

+ +

O trabalho da função playTone() é tocar um tom em uma dada frequência. Isso será usado pelo modificador para eventos acionados nas teclas do teclado, para que toquem as notas apropriadas.

+ +
function playTone(freq) {
+  let osc = audioContext.createOscillator();
+  osc.connect(masterGainNode);
+
+  let type = wavePicker.options[wavePicker.selectedIndex].value;
+
+  if (type == "custom") {
+    osc.setPeriodicWave(customWaveform);
+  } else {
+    osc.type = type;
+  }
+
+  osc.frequency.value = freq;
+  osc.start();
+
+  return osc;
+}
+
+ +

O playTone() começa criando um novo {{domxref("OscillatorNode")}} ao chamar o método {{domxref("AudioContext.createOscillator()")}}. Então conectamos ele para o módulo de ganha geral ao chamar o novo método de osciladores {{domxref("OscillatorNode.connect()")}} method;, Que determina ao oscilador onde ele irá mandar seu output. Ao fazer isso, mudar o valor do ganho do módulo de ganho geral irá mudar o volume de todos os toms gerados.

+ +

Então conseguimos o tipo de forma de onda para usar ao checar o valor do controle de seleção de formas de onda na barra de opções. Se o usuário estiver colocado como "custom", chamamos {{domxref("OscillatorNode.setPeriodicWave()")}} para configurar os osciladores para usar nossa forma de onda customizada. Fazer isso automáticamente coloca o {{domxref("OscillatorNode.type", "type")}} do oscilador como custom. Se qualquer outro tipo de forma de onda é selecionado na seleção de formas de ondas, nós simplesmente colocamos os tipos de osciladores no valor da seleção, esse valor será um entre sine, square, triangle, e sawtooth.

+ +

A frequência do oscilador é colocada no valor especificado no paramêtro freq ao colocar o valor dos objetos {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} . Então, enfim, o oscilador é iniciado e começa a produzir sons ao chamar o método {{domxref("AudioScheduledSourceNode.start()")}} .

+ +

Tocando um tom

+ +

Quando o evento {{event("mousedown")}} ou {{domxref("mouseover")}} ocorre em uma tecla, queremos que toque a nota correspondente. A função notePressed() é usada como o modificador de eventos para esses eventos.

+ +
function notePressed(event) {
+  if (event.buttons & 1) {
+    let dataset = event.target.dataset;
+
+    if (!dataset["pressed"]) {
+      let octave = +dataset["octave"];
+      oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
+      dataset["pressed"] = "yes";
+    }
+  }
+}
+
+ +

Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento.

+ +

Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo data-pressed ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos playTone() para começar a tocar a nota, passando no valor dos elementos do atributo data-frequency. O valor retornado do oscilador é guardado no oscList para refêrencia futura, e data-pressed é colocado como yes para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado.

+ +

Parando um tom

+ +

A função noteReleased() é o modificador de eventos chamado quando o usuário solta o botão do mouse ou move o mouse para fora da tecla que ele está tocando.

+ +
function noteReleased(event) {
+  let dataset = event.target.dataset;
+
+  if (dataset && dataset["pressed"]) {
+    let octave = +dataset["octave"];
+    oscList[octave][dataset["note"]].stop();
+    delete oscList[octave][dataset["note"]];
+    delete dataset["pressed"];
+  }
+}
+
+ +

noteReleased() usa os atributos customizados data-octave and data-note  para procurar os osciladores das teclas, e então chama o método de oscilador {{domxref("AudioScheduledSourceNode.stop", "stop()")}} para parar de tocar a nota. Finalmente, a entrada oscList para nota é limpa e o atributo data-pressed é removido do elemento da tecla (como identificado pelo {{domxref("event.target")}}), para indicar que a nota não está tocando no momento.

+ +

Mudando o volume geral

+ +

A barra de rolagem do volume na barra de opções dá uma simples interface para mudar o valor do ganho no módulo de ganho geral, então mudando o volume de todas as notas sendo tocadas. O metódo changeVolume() é o modificador do evento {{event("change")}} na barra de rolagem.

+ +
function changeVolume(event) {
+  masterGainNode.gain.value = volumeControl.value
+}
+
+ +

Isso simplesmente coloca o valor do módulo de ganho geral gain {{domxref("AudioParam")}} para o novo valor na barra de rolagem.

+ +

Resultado

+ +

Coloque tudo junto, o resultado é um simples e funcional teclado virtual que funciona com o clique:

+ +

{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..f4e16bd9e7 --- /dev/null +++ b/files/pt-br/web/api/web_storage_api/index.html @@ -0,0 +1,139 @@ +--- +title: API de Armazenamento na Web +slug: Web/API/Web_Storage_API_pt_br +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

A  API de armazenamento na web (Web Storage) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

+ +

Armazenamento na Web conceitos e formas de uso

+ +

A API de Web Storage fornece duas maneiras de armazenar dados:

+ + + +

Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto Window implementa os objetos  Window.LocalStorage e Window.SessionStorage) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de sessionStorage e localStorage, dessa forma o controle de ambos é realizado de forma separada.

+ +
+

Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).

+
+ +
+

Nota: Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).

+
+ +

Interfaces de Armazenamento na Web

+ +
+
{{domxref("Storage")}}
+
Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).
+
{{domxref("Window")}}
+
A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.
+
{{domxref("StorageEvent")}}
+
+

Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.

+
+
+ +

Exemplos

+ +

Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado Web Storage Demo. A página da demo landing page oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em localStorage,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.

+ +

Nós também fornecemos um event output page —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.

+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Compatibilidade com os Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da capacidade de armazenamento de vários navegadores.

+ +
+

Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.

+
+ + + +

Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.

+ +

A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.

+ +

Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste post escrito no blog do WHATWG que lida especificamente com este tópico.

+ +

Veja também

+ +

Usando a API Web Storage

diff --git a/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..eb9807f0ef --- /dev/null +++ b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,267 @@ +--- +title: Usando a API Web Storage +slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API +tags: + - API + - Guía + - Storage + - Web Storage API + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
{{DefaultAPISidebar("Web Storage API")}}
+ +
+

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.

+
+ +

Conceitos básicos

+ +

Objetos Storage são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de corDefinida de maneiras diferentes, mas com o mesmo resultado:

+ +
localStorage.corDefinida = '#a4509b';
+localStorage['corDefinida'] = '#a4509b';
+localStorage.setItem('corDefinida', '#a4509b');
+ +
+

Nota: Recomendamos que você utilize a API Web Storage (setItem, getItem, removeItem, key, length) para evitar as armadilhas associadas ao uso de objetos literais como mapas de chave-valor.

+
+ +

Os dois mecanismos presentes na Web Storage são os seguintes:

+ + + +

Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto Window implementa os objetos WindowLocalStorage e WindowSessionStorage, aos quais as propriedades localStorage and sessionStorage pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para sessionStorage and localStorage — eles operam e são controlados separadamente.

+ +

Por exemplo, chamar localStorage pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar sessionStorage em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.

+ +

Detectando a disponibilidade do localStorage

+ +

Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.

+ +

Testando a disponibilidade

+ +

Navegadores compatíveis com localStorage terão uma propriedade no objeto window chamada localStorage. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser compatível com o localStorage, mas também pode não torná-lo disponível para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually available. Our feature detect should take these scenarios into account.

+ +

Here is a function that detects whether localStorage is both supported and available:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

And here is how you would use it:

+ +
if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}
+ +

You can test for sessionStorage instead by calling storageAvailable('sessionStorage').

+ +

See here for a brief history of feature-detecting localStorage.

+ +

Example

+ +

To illustrate some typical web storage usage, we have created a simple example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font, and decorative image:

+ +

When you choose different options, the page is instantly updated; in addition, your choices are stored in localStorage, so that when you leave the page and load it again, later on, your choices are remembered.

+ +

We have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.

+ +

+ +
+

Note: As well as viewing the example pages live using the above links, you can also check out the source code.

+
+ +

Testing whether your storage has been populated

+ +

To start with on main.js, we will test whether the storage object has already been populated (i.e., the page was previously accessed):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populateStorage() to add the existing customization values to the storage. If there are already values there, we run setStyles() to update the page styling with the stored values.

+ +

Note: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.

+ +

Getting values from storage

+ +

As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

+ +

Setting values in storage

+ +

{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

The populateStorage() function sets three items in local storage — the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

+ +

We've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responding to storage changes with the StorageEvent

+ +

The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

+ +

On the events page (see events.js) the only JavaScript is as follows:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});
+ +

Here we add an event listener to the window object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

+ +

Deleting data records

+ +

Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.

+
+ +

See also

+ + diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api_pt_br/index.html deleted file mode 100644 index f4e16bd9e7..0000000000 --- a/files/pt-br/web/api/web_storage_api_pt_br/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: API de Armazenamento na Web -slug: Web/API/Web_Storage_API_pt_br -translation_of: Web/API/Web_Storage_API ---- -

{{DefaultAPISidebar("Web Storage API")}}

- -

A  API de armazenamento na web (Web Storage) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

- -

Armazenamento na Web conceitos e formas de uso

- -

A API de Web Storage fornece duas maneiras de armazenar dados:

- - - -

Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto Window implementa os objetos  Window.LocalStorage e Window.SessionStorage) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de sessionStorage e localStorage, dessa forma o controle de ambos é realizado de forma separada.

- -
-

Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).

-
- -
-

Nota: Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).

-
- -

Interfaces de Armazenamento na Web

- -
-
{{domxref("Storage")}}
-
Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).
-
{{domxref("Window")}}
-
A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.
-
{{domxref("StorageEvent")}}
-
-

Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.

-
-
- -

Exemplos

- -

Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado Web Storage Demo. A página da demo landing page oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em localStorage,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.

- -

Nós também fornecemos um event output page —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.

- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
- -

Compatibilidade com os Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da capacidade de armazenamento de vários navegadores.

- -
-

Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.

-
- - - -

Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.

- -

A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.

- -

Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste post escrito no blog do WHATWG que lida especificamente com este tópico.

- -

Veja também

- -

Usando a API Web Storage

diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html deleted file mode 100644 index eb9807f0ef..0000000000 --- a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Usando a API Web Storage -slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API -tags: - - API - - Guía - - Storage - - Web Storage API - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API ---- -
{{DefaultAPISidebar("Web Storage API")}}
- -
-

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.

-
- -

Conceitos básicos

- -

Objetos Storage são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de corDefinida de maneiras diferentes, mas com o mesmo resultado:

- -
localStorage.corDefinida = '#a4509b';
-localStorage['corDefinida'] = '#a4509b';
-localStorage.setItem('corDefinida', '#a4509b');
- -
-

Nota: Recomendamos que você utilize a API Web Storage (setItem, getItem, removeItem, key, length) para evitar as armadilhas associadas ao uso de objetos literais como mapas de chave-valor.

-
- -

Os dois mecanismos presentes na Web Storage são os seguintes:

- - - -

Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto Window implementa os objetos WindowLocalStorage e WindowSessionStorage, aos quais as propriedades localStorage and sessionStorage pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para sessionStorage and localStorage — eles operam e são controlados separadamente.

- -

Por exemplo, chamar localStorage pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar sessionStorage em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.

- -

Detectando a disponibilidade do localStorage

- -

Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.

- -

Testando a disponibilidade

- -

Navegadores compatíveis com localStorage terão uma propriedade no objeto window chamada localStorage. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser compatível com o localStorage, mas também pode não torná-lo disponível para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually available. Our feature detect should take these scenarios into account.

- -

Here is a function that detects whether localStorage is both supported and available:

- -
function storageAvailable(type) {
-    try {
-        var storage = window[type],
-            x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // everything except Firefox
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // test name field too, because code might not be present
-            // everything except Firefox
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            storage.length !== 0;
-    }
-}
- -

And here is how you would use it:

- -
if (storageAvailable('localStorage')) {
-  // Yippee! We can use localStorage awesomeness
-}
-else {
-  // Too bad, no localStorage for us
-}
- -

You can test for sessionStorage instead by calling storageAvailable('sessionStorage').

- -

See here for a brief history of feature-detecting localStorage.

- -

Example

- -

To illustrate some typical web storage usage, we have created a simple example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font, and decorative image:

- -

When you choose different options, the page is instantly updated; in addition, your choices are stored in localStorage, so that when you leave the page and load it again, later on, your choices are remembered.

- -

We have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.

- -

- -
-

Note: As well as viewing the example pages live using the above links, you can also check out the source code.

-
- -

Testing whether your storage has been populated

- -

To start with on main.js, we will test whether the storage object has already been populated (i.e., the page was previously accessed):

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
- -

The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populateStorage() to add the existing customization values to the storage. If there are already values there, we run setStyles() to update the page styling with the stored values.

- -

Note: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.

- -

Getting values from storage

- -

As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

- -

Setting values in storage

- -

{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
- -

The populateStorage() function sets three items in local storage — the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

- -

We've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed:

- -
bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
- -

Responding to storage changes with the StorageEvent

- -

The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

- -

On the events page (see events.js) the only JavaScript is as follows:

- -
window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = e.storageArea;
-});
- -

Here we add an event listener to the window object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

- -

Deleting data records

- -

Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:

- - - -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

- -
-

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.

-
- -

See also

- - diff --git a/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..7b4f6384f6 --- /dev/null +++ b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,226 @@ +--- +title: Adicionando conteúdo 2D a um contexto WebGL +slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

+ +

Uma vez que você tenha  criado um contexto WebGL com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.

+ +

Desenhando a cena

+ +

A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.

+ +

Inicializando os shaders

+ +

Shaders são especificados ao usar a Linguagem de Shading OpenGL ES. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina initShaders(), que cuida dessa tarefa:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Cria o progrma shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Se falhar ao criar o progrma shader, alerta
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Não foi possível inicializar o programa shader.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.

+ +

Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.

+ +

Carregando os shaders da DOM

+ +

A rotina getShader() busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.

+ +
function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+
+ +

Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.

+ +
  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // Tipo de shader desconhecido
+     return null;
+  }
+ +

Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.

+ +
  gl.shaderSource(shader, theSource);
+
+  // Compile o programa shader
+  gl.compileShader(shader);
+
+  // Veja se ele compila com sucesso
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+
+ +

Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.

+ +

Os shaders

+ +

Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.

+ +

Fragmentos shader

+ +

Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.

+ +

g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Vértice do shader

+ +

A vértice (vertex) do shader define a posição e a forma de cada vértice.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Criando um objeto

+ +

Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call initBuffers(); as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the gl object's createBuffer() method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the bindBuffer() method.

+ +

Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the gl object's bufferData() method to establish the vertices for the object.

+ +

Desenhando a cena

+ +

Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our drawScene() function is very simple. It uses a few utility routines we'll cover shortly.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.

+ +

Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the drawArrays() method.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

+ +

View the complete code | Open this demo on a new page

+ +

Operações úteis da Matrix

+ +

Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's Sylvester, a very handy library for handling vector and matrix operations from JavaScript.

+ +

The glUtils.js file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.

+ +

In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Ver Também

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html deleted file mode 100644 index 7b4f6384f6..0000000000 --- a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Adicionando conteúdo 2D a um contexto WebGL -slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

- -

Uma vez que você tenha  criado um contexto WebGL com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.

- -

Desenhando a cena

- -

A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.

- -

Inicializando os shaders

- -

Shaders são especificados ao usar a Linguagem de Shading OpenGL ES. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina initShaders(), que cuida dessa tarefa:

- -
function initShaders() {
-  var fragmentShader = getShader(gl, "shader-fs");
-  var vertexShader = getShader(gl, "shader-vs");
-
-  // Cria o progrma shader
-
-  shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // Se falhar ao criar o progrma shader, alerta
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert("Não foi possível inicializar o programa shader.");
-  }
-
-  gl.useProgram(shaderProgram);
-
-  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-  gl.enableVertexAttribArray(vertexPositionAttribute);
-}
-
-
- -

Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.

- -

Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.

- -

Carregando os shaders da DOM

- -

A rotina getShader() busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.

- -
function getShader(gl, id) {
-  var shaderScript, theSource, currentChild, shader;
-
-  shaderScript = document.getElementById(id);
-
-  if (!shaderScript) {
-    return null;
-  }
-
-  theSource = "";
-  currentChild = shaderScript.firstChild;
-
-  while(currentChild) {
-    if (currentChild.nodeType == currentChild.TEXT_NODE) {
-      theSource += currentChild.textContent;
-    }
-
-    currentChild = currentChild.nextSibling;
-  }
-
- -

Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.

- -
  if (shaderScript.type == "x-shader/x-fragment") {
-    shader = gl.createShader(gl.FRAGMENT_SHADER);
-  } else if (shaderScript.type == "x-shader/x-vertex") {
-    shader = gl.createShader(gl.VERTEX_SHADER);
-  } else {
-     // Tipo de shader desconhecido
-     return null;
-  }
- -

Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.

- -
  gl.shaderSource(shader, theSource);
-
-  // Compile o programa shader
-  gl.compileShader(shader);
-
-  // Veja se ele compila com sucesso
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
-      return null;
-  }
-
-  return shader;
-}
-
- -

Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.

- -

Os shaders

- -

Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.

- -

Fragmentos shader

- -

Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.

- -

g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  void main(void) {
-    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-  }
-</script>
-
- -

Vértice do shader

- -

A vértice (vertex) do shader define a posição e a forma de cada vértice.

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-  }
-</script>
-
- -

Criando um objeto

- -

Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call initBuffers(); as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.

- -
var horizAspect = 480.0/640.0;
-
-function initBuffers() {
-  squareVerticesBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-
-  var vertices = [
-    1.0,  1.0,  0.0,
-    -1.0, 1.0,  0.0,
-    1.0,  -1.0, 0.0,
-    -1.0, -1.0, 0.0
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-}
-
- -

This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the gl object's createBuffer() method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the bindBuffer() method.

- -

Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the gl object's bufferData() method to establish the vertices for the object.

- -

Desenhando a cena

- -

Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our drawScene() function is very simple. It uses a few utility routines we'll cover shortly.

- -
function drawScene() {
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
-
-  loadIdentity();
-  mvTranslate([-0.0, 0.0, -6.0]);
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
-  setMatrixUniforms();
-  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-}
-
- -

The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.

- -

Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the drawArrays() method.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

- -

View the complete code | Open this demo on a new page

- -

Operações úteis da Matrix

- -

Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's Sylvester, a very handy library for handling vector and matrix operations from JavaScript.

- -

The glUtils.js file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.

- -

In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.

- -
function loadIdentity() {
-  mvMatrix = Matrix.I(4);
-}
-
-function multMatrix(m) {
-  mvMatrix = mvMatrix.x(m);
-}
-
-function mvTranslate(v) {
-  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
-}
-
-function setMatrixUniforms() {
-  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
-  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
-
-  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
-  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
-}
-
- -

Ver Também

- - - -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html new file mode 100644 index 0000000000..72ac37e56a --- /dev/null +++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html @@ -0,0 +1,272 @@ +--- +title: Uma simples amostra de RTCDataChannel +slug: Web/API/WebRTC_API/Simples_RTCDataChannel_amostra +translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample +--- +

{{WebRTCSidebar}}

+ +

A interface {{domxref("RTCDataChannel")}} é um recurso da WebRTC API que permite abrir um canal entre dois pares sobre os quais você pode enviar e receber dados arbitrários. A API é intencionalmente semelhante à WebSocket API, de modo que o mesmo modelo de programação pode ser usado para ambos.

+ +

Neste exemplo, abriremos um {{domxref("RTCDataChannel")}} para realizar a conexão entre dois elementos na mesma página. Embora seja obviamente um cenário artificial, é útil para demonstrar o fluxo de conexão entre dois pares. Vamos cobrir a mecânica necessária para conectar, transmitir e receber dados, mas vamos deixar para outro exemplo os detalhes sobre como localizar e se conectar a um computador remoto.

+ +

O HTML

+ +

Primeiro, vamos dar uma olhada rápida no HTML que é necessário. Não há nada incrivelmente complicado aqui. Primeiro, temos um par de botões para estabelecer e fechar a conexão:

+ +
<button id="connectButton" name="connectButton" class="buttonleft">
+  Conectar
+</button>
+<button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
+  Desconectar
+</button>
+ +

Depois, há uma caixa que contém o campo de input no qual o usuário pode digitar uma mensagem para transmitir, com um botão para enviar o texto digitado. Este {{HTMLElement("div")}} será o primeiro ponto (peer) no canal.

+ +
  <div class="messagebox">
+    <label for="message">Insira a mensagem:
+      <input type="text" name="message" id="message" placeholder="Texto da mensagem"
+              inputmode="latin" size=60 maxlength=120 disabled>
+    </label>
+    <button id="sendButton" name="sendButton" class="buttonright" disabled>
+      Enviar
+    </button>
+  </div>
+ +

Finalmente, há uma pequena caixa na qual vamos inserir as mensagens. Este bloco {{HTMLElement("div")}} será o segundo ponto do par (peer).

+ +
<div class="messagebox" id="receivebox">
+  <p>Mensagens recebidas:</p>
+</div>
+ +

O código JavaScript

+ +

Como você pode simplesmente ver o próprio código no GitHub, abaixo, analisaremos as partes do código que fazem o trabalho pesado.

+ +

A WebRTC API faz um intenso uso de {{jsxref("Promise")}}s. Que tornam muito fácil encadear as etapas do processo de conexão; Se você ainda não leu sobre esta funcionalidade do ECMAScript 2015, você deveria ler sobre eles. Da mesma forma, este exemplo usa arrow functions para simplificar a sintaxe.

+ +

Começando

+ +

Quando o script é executado, configuramos um {{event("load")}} ouvinte de eventos (event listener), De modo que, uma vez que a página esteja totalmente carregada, nossa função startup() seja chamada.

+ +
function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Define os ouvintes de eventos para os elementos da interface do usuário
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}
+ +

Isso é bastante direto. Pegamos referências de todos os elementos da página que precisaremos acessar e, em seguida, configuramos {{domxref("EventListener", "event listeners")}} nos três botões.

+ +

Estabelecendo uma conexão

+ +

Quando o usuário clica no botão "Conectar", o método connectPeers() é chamado. Para que fique mais claro, iremos quebrar o código em mais partes, e analisar um pouco de cada vez.

+ +
+

Nota: Mesmo que ambas as extremidades da nossa conexão estejam na mesma página, vamos nos referir ao ponto que inicia a conexão como "local", e ao outro como sendo o "remoto".

+
+ +

Configurando o ponto local (local peer)

+ +
localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+
+ +

O primeiro passo é criar o ponto "local" da conexão. Este é o ponto que enviará o pedido de conexão. O próximo passo é criar o {{domxref("RTCDataChannel")}} chamando {{domxref("RTCPeerConnection.createDataChannel()")}} e configurando ouvintes de eventos (event listeners) para monitorar o canal, e para que possamos saber quando ele for aberto e fechado (isto é, quando o canal está conectado ou desconectado dentro dessa conexão entre pares (peer connection)).

+ +

É importante ter em mente que cada extremidade do canal tem seu próprio objeto {{domxref("RTCDataChannel")}} .

+ +

Configurando o ponto remoto (remote peer)

+ +
remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;
+ +

O ponto remoto está configurado de forma semelhante, exceto que não precisamos nós mesmos criar explicitamente um {{domxref("RTCDataChannel")}} , uma vez que vamos ser conectados através do canal estabelecido acima. Em vez disso, criamos um {{event("datachannel")}} manipulador de eventos (event handler); Isso será chamado quando o canal de dados (data channel) for aberto; Este manipulador (handler) receberá um objeto RTCDataChannel; você verá isso abaixo.

+ +

Configurando  ICE candidates

+ +

O próximo passo é configurar cada conexão com os ouvintes do ICE que serão chamados quando houver um novo candidato ICE para comunicar com o outro lado.

+ +
+

Nota: Em um cenário do mundo real em que os dois pares não estão sendo executados no mesmo contexto, o processo é um pouco mais complexo; Cada lado fornece, um de cada vez, um sugestão sobre como conectar (por exemplo, UDP, UDP com um relay, TCP, etc.) chamando {{domxref("RTCPeerConnection.addIceCandidate()")}}, e eles vão de um lado para outro até chegarem a um acordo. Mas aqui, acabamos de aceitar a primeira oferta de cada lado, uma vez que não existe uma rede real envolvida.

+
+ +
    localConnection.onicecandidate = e => !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e => !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+ +

Configuramos cada {{domxref("RTCPeerConnection")}} para ter um manipulador de eventos (event handler) para o evento {{event("icecandidate")}} .

+ +

Iniciando a tentativa de conexão

+ +

A última coisa que precisamos fazer para começar a conectar nossos pares é criar uma oferta de conexão.

+ +
    localConnection.createOffer()
+    .then(offer => localConnection.setLocalDescription(offer))
+    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() => remoteConnection.createAnswer())
+    .then(answer => remoteConnection.setLocalDescription(answer))
+    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);
+ +

Vamos passar por isto linha por linha e decifrar o que significa.

+ +
    +
  1. Primeiro chamamos {{domxref("RTCPeerConnection.createOffer()")}} método para criar um resumo {{Glossary("SDP")}} (Session Description Protocol) descrevendo a conexão que queremos fazer. Este método aceita, opcionalmente, um objeto com restrições a serem suportadas pela conexão para atender às suas necessidades, como no caso da conexão precisar suportar áudio, vídeo ou ambos. Em nosso exemplo simples, não temos restrições.
    2. +
  2. Se a oferta for criada com sucesso, passamos o resumo junto ao método de conexões locais {{domxref("RTCPeerConnection.setLocalDescription()")}} . Isso configura o ponto local da conexão.
    3. +
  3. O próximo passo é conectar o ponto local ao remoto comunicando ao ponto remoto sobre ele. Isso é feito chamando remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Agora o remoteConnection conhece a conexão que está sendo construída.
    4. +
  4. Isso significa que é hora do ponto remoto responder. Ele faz isso chamando o método {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} . Isso gera um resumo de SDP que descreve a conexão que o ponto remoto está disposto e capaz de estabelecer. Essa configuração está em algum lugar na união das opções que ambos os pares podem suportar.
    5. +
  5. Uma vez que a resposta foi criada, ela é passada para o remoteConnection chamando {{domxref("RTCPeerConnection.setLocalDescription()")}}. Isso estabelece o ponto remoto da conexão (que, para o ponto remoto, é o ponto local. Isso pode parecer confuso, mas você irá se acostumar com isso.
    6. +
  6. Finalmente, a descrição local das conexões remotas está configurada para se referir ao ponto remoto, chamando localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
    7. +
  7. O catch() chama uma rotina que lida com os erros que ocorrem.
    8. +
+ +
+

Nota: Mais uma vez, esse processo não é uma implementação do mundo real; No uso normal, há dois pedaços de código executados em duas máquinas, interagindo e negociando a conexão.

+
+ +

Manipulação da conexão de pares bem sucedida

+ +

Como cada lado da conexão peer-to-peer é conectado com sucesso, o evento correspondente {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} é disparado. Esses manipuladores podem fazer o que for necessário, mas, neste exemplo, tudo o que precisamos fazer é atualizar a interface do usuário:

+ +
  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }
+ +

A única coisa que fazemos aqui é desativar o botão "Conectar" quando o ponto local estiver conectado e ativar o botão "Desconectar" quando o ponto remoto se conectar.

+ +

Conectando o canal de dados

+ +

Uma vez que o {{domxref("RTCPeerConnection")}} é aberto, o evento {{event("datachannel")}} é enviado para o ponto remoto para completar o processo de abertura do canal de dados; Isso invoca nosso método receiveChannelCallback(), que se parece com isso:

+ +
  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }
+ +

O evento{{event("datachannel")}} inclui, em sua propriedade de canal, uma referência a um {{domxref("RTCDataChannel")}} Representando o ponto remoto do canal. Isso é salvo, e nós configuramos, no canal, ouvintes de eventos para os eventos que queremos manipular. Uma vez feito isso, nosso método handleReceiveMessage() Será chamado cada vez que os dados são recebidos pelo ponto remoto, e o método handleReceiveChannelStatusChange() será chamado sempre que mudar o estado da conexão do canal, para que possamos reagir quando o canal estiver totalmente aberto e quando ele for fechado.

+ +

Lidando com as mudanças de status do canal

+ +

Ambos nossos pontos locais e remotos usam um único método para lidar com eventos que indicam alguma alteração no status da conexão do canal.

+ +

Quando o ponto local experimenta um evento aberto ou fechado, o métodohandleSendChannelStatusChange() é chamado:

+ +
  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }
+ +

Se o estado do canal mudou para "open", isso indica que terminamos de estabelecer o link entre os dois pares. A interface do usuário é atualizada de forma correspondente: ativando o elemento de input de texto para a mensagem a ser enviada, focando este elemento de input para que o usuário comece imediatamente a digitar, habilitando os botões "Enviar" e "Desconectar", que são agora utilizáveis, E desativando o botão "Conectar", uma vez que não é necessário quando a conexão está aberta.

+ +

Se o estado do canal mudou para "closed", ocorre o conjunto oposto de ações: a caixa de entrada de texto e o botão "Enviar" estão desativados, o botão "Conectar" está habilitado para que o usuário possa abrir uma nova conexão se desejar, e o botão "Desconectar" está desativado, uma vez que não é útil quando não existe conexão.

+ +

Nosso exemplo de par remoto, por outro lado, ignora os eventos de alteração de status, exceto para registrar o evento no console:

+ +
  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }
+ +

O método handleReceiveChannelStatusChange() recebe como parâmetro de entrada o evento que ocorreu; Este será um {{domxref("RTCDataChannelEvent")}}.

+ +

Enviando mensagens

+ +

Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estabelecemos como o manipulador para o evento do botão {{event("click")}} é chamado. Esse método é bastante simples:

+ +
  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }
+ +

Primeiro, o texto da mensagem é obtido dos atributos do elemento de input {{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem.

+ +

Recebendo mensagens

+ +

Quando ocorre um evento de "mensagem" no canal remoto, nosso método handleReceiveMessage() é chamado como o manipulador de eventos.

+ +
  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }
+ +

Este método simplesmente executa alguns injeções básicas {{Glossary("DOM")}} ; cria um novo {{HTMLElement("p")}} (paragraph) elemento, então cria um novo nó {{domxref("Text")}} contendo o texto da mensagem, que é recebido na propriedade de dados do evento. Este nó de texto é anexado como um filho do novo elemento, que é então inserido no bloco receiveBox, fazendo com que ele desenhe na janela do navegador.

+ +

Desconectando os pares (peers)

+ +

Quando o usuário clica no botão "Desconectar", o método disconnectPeers() previamente configurado como o manipulador desse botão é chamado.

+ +
  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+
+ +

Isso começa por fechar cada par {{domxref("RTCDataChannel")}}, então, de forma semelhante, cada um {{domxref("RTCPeerConnection")}}. Então, todas as referências salvas desses objetos são definidas como null para evitar a reutilização acidental, e a interface do usuário é atualizada para refletir o fato de que a conexão foi fechada.

+ +

Próximos passos

+ +

Você poderia tentar este exemplo e dar uma olhada no código fonte webrtc-simple-datachannel, disponível no GitHub.

diff --git a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html b/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html deleted file mode 100644 index 72ac37e56a..0000000000 --- a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Uma simples amostra de RTCDataChannel -slug: Web/API/WebRTC_API/Simples_RTCDataChannel_amostra -translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample ---- -

{{WebRTCSidebar}}

- -

A interface {{domxref("RTCDataChannel")}} é um recurso da WebRTC API que permite abrir um canal entre dois pares sobre os quais você pode enviar e receber dados arbitrários. A API é intencionalmente semelhante à WebSocket API, de modo que o mesmo modelo de programação pode ser usado para ambos.

- -

Neste exemplo, abriremos um {{domxref("RTCDataChannel")}} para realizar a conexão entre dois elementos na mesma página. Embora seja obviamente um cenário artificial, é útil para demonstrar o fluxo de conexão entre dois pares. Vamos cobrir a mecânica necessária para conectar, transmitir e receber dados, mas vamos deixar para outro exemplo os detalhes sobre como localizar e se conectar a um computador remoto.

- -

O HTML

- -

Primeiro, vamos dar uma olhada rápida no HTML que é necessário. Não há nada incrivelmente complicado aqui. Primeiro, temos um par de botões para estabelecer e fechar a conexão:

- -
<button id="connectButton" name="connectButton" class="buttonleft">
-  Conectar
-</button>
-<button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
-  Desconectar
-</button>
- -

Depois, há uma caixa que contém o campo de input no qual o usuário pode digitar uma mensagem para transmitir, com um botão para enviar o texto digitado. Este {{HTMLElement("div")}} será o primeiro ponto (peer) no canal.

- -
  <div class="messagebox">
-    <label for="message">Insira a mensagem:
-      <input type="text" name="message" id="message" placeholder="Texto da mensagem"
-              inputmode="latin" size=60 maxlength=120 disabled>
-    </label>
-    <button id="sendButton" name="sendButton" class="buttonright" disabled>
-      Enviar
-    </button>
-  </div>
- -

Finalmente, há uma pequena caixa na qual vamos inserir as mensagens. Este bloco {{HTMLElement("div")}} será o segundo ponto do par (peer).

- -
<div class="messagebox" id="receivebox">
-  <p>Mensagens recebidas:</p>
-</div>
- -

O código JavaScript

- -

Como você pode simplesmente ver o próprio código no GitHub, abaixo, analisaremos as partes do código que fazem o trabalho pesado.

- -

A WebRTC API faz um intenso uso de {{jsxref("Promise")}}s. Que tornam muito fácil encadear as etapas do processo de conexão; Se você ainda não leu sobre esta funcionalidade do ECMAScript 2015, você deveria ler sobre eles. Da mesma forma, este exemplo usa arrow functions para simplificar a sintaxe.

- -

Começando

- -

Quando o script é executado, configuramos um {{event("load")}} ouvinte de eventos (event listener), De modo que, uma vez que a página esteja totalmente carregada, nossa função startup() seja chamada.

- -
function startup() {
-  connectButton = document.getElementById('connectButton');
-  disconnectButton = document.getElementById('disconnectButton');
-  sendButton = document.getElementById('sendButton');
-  messageInputBox = document.getElementById('message');
-  receiveBox = document.getElementById('receivebox');
-
-  // Define os ouvintes de eventos para os elementos da interface do usuário
-
-  connectButton.addEventListener('click', connectPeers, false);
-  disconnectButton.addEventListener('click', disconnectPeers, false);
-  sendButton.addEventListener('click', sendMessage, false);
-}
- -

Isso é bastante direto. Pegamos referências de todos os elementos da página que precisaremos acessar e, em seguida, configuramos {{domxref("EventListener", "event listeners")}} nos três botões.

- -

Estabelecendo uma conexão

- -

Quando o usuário clica no botão "Conectar", o método connectPeers() é chamado. Para que fique mais claro, iremos quebrar o código em mais partes, e analisar um pouco de cada vez.

- -
-

Nota: Mesmo que ambas as extremidades da nossa conexão estejam na mesma página, vamos nos referir ao ponto que inicia a conexão como "local", e ao outro como sendo o "remoto".

-
- -

Configurando o ponto local (local peer)

- -
localConnection = new RTCPeerConnection();
-
-sendChannel = localConnection.createDataChannel("sendChannel");
-sendChannel.onopen = handleSendChannelStatusChange;
-sendChannel.onclose = handleSendChannelStatusChange;
-
- -

O primeiro passo é criar o ponto "local" da conexão. Este é o ponto que enviará o pedido de conexão. O próximo passo é criar o {{domxref("RTCDataChannel")}} chamando {{domxref("RTCPeerConnection.createDataChannel()")}} e configurando ouvintes de eventos (event listeners) para monitorar o canal, e para que possamos saber quando ele for aberto e fechado (isto é, quando o canal está conectado ou desconectado dentro dessa conexão entre pares (peer connection)).

- -

É importante ter em mente que cada extremidade do canal tem seu próprio objeto {{domxref("RTCDataChannel")}} .

- -

Configurando o ponto remoto (remote peer)

- -
remoteConnection = new RTCPeerConnection();
-remoteConnection.ondatachannel = receiveChannelCallback;
- -

O ponto remoto está configurado de forma semelhante, exceto que não precisamos nós mesmos criar explicitamente um {{domxref("RTCDataChannel")}} , uma vez que vamos ser conectados através do canal estabelecido acima. Em vez disso, criamos um {{event("datachannel")}} manipulador de eventos (event handler); Isso será chamado quando o canal de dados (data channel) for aberto; Este manipulador (handler) receberá um objeto RTCDataChannel; você verá isso abaixo.

- -

Configurando  ICE candidates

- -

O próximo passo é configurar cada conexão com os ouvintes do ICE que serão chamados quando houver um novo candidato ICE para comunicar com o outro lado.

- -
-

Nota: Em um cenário do mundo real em que os dois pares não estão sendo executados no mesmo contexto, o processo é um pouco mais complexo; Cada lado fornece, um de cada vez, um sugestão sobre como conectar (por exemplo, UDP, UDP com um relay, TCP, etc.) chamando {{domxref("RTCPeerConnection.addIceCandidate()")}}, e eles vão de um lado para outro até chegarem a um acordo. Mas aqui, acabamos de aceitar a primeira oferta de cada lado, uma vez que não existe uma rede real envolvida.

-
- -
    localConnection.onicecandidate = e => !e.candidate
-        || remoteConnection.addIceCandidate(e.candidate)
-        .catch(handleAddCandidateError);
-
-    remoteConnection.onicecandidate = e => !e.candidate
-        || localConnection.addIceCandidate(e.candidate)
-        .catch(handleAddCandidateError);
- -

Configuramos cada {{domxref("RTCPeerConnection")}} para ter um manipulador de eventos (event handler) para o evento {{event("icecandidate")}} .

- -

Iniciando a tentativa de conexão

- -

A última coisa que precisamos fazer para começar a conectar nossos pares é criar uma oferta de conexão.

- -
    localConnection.createOffer()
-    .then(offer => localConnection.setLocalDescription(offer))
-    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
-    .then(() => remoteConnection.createAnswer())
-    .then(answer => remoteConnection.setLocalDescription(answer))
-    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
-    .catch(handleCreateDescriptionError);
- -

Vamos passar por isto linha por linha e decifrar o que significa.

- -
    -
  1. Primeiro chamamos {{domxref("RTCPeerConnection.createOffer()")}} método para criar um resumo {{Glossary("SDP")}} (Session Description Protocol) descrevendo a conexão que queremos fazer. Este método aceita, opcionalmente, um objeto com restrições a serem suportadas pela conexão para atender às suas necessidades, como no caso da conexão precisar suportar áudio, vídeo ou ambos. Em nosso exemplo simples, não temos restrições.
    2. -
  2. Se a oferta for criada com sucesso, passamos o resumo junto ao método de conexões locais {{domxref("RTCPeerConnection.setLocalDescription()")}} . Isso configura o ponto local da conexão.
    3. -
  3. O próximo passo é conectar o ponto local ao remoto comunicando ao ponto remoto sobre ele. Isso é feito chamando remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Agora o remoteConnection conhece a conexão que está sendo construída.
    4. -
  4. Isso significa que é hora do ponto remoto responder. Ele faz isso chamando o método {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} . Isso gera um resumo de SDP que descreve a conexão que o ponto remoto está disposto e capaz de estabelecer. Essa configuração está em algum lugar na união das opções que ambos os pares podem suportar.
    5. -
  5. Uma vez que a resposta foi criada, ela é passada para o remoteConnection chamando {{domxref("RTCPeerConnection.setLocalDescription()")}}. Isso estabelece o ponto remoto da conexão (que, para o ponto remoto, é o ponto local. Isso pode parecer confuso, mas você irá se acostumar com isso.
    6. -
  6. Finalmente, a descrição local das conexões remotas está configurada para se referir ao ponto remoto, chamando localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
    7. -
  7. O catch() chama uma rotina que lida com os erros que ocorrem.
    8. -
- -
-

Nota: Mais uma vez, esse processo não é uma implementação do mundo real; No uso normal, há dois pedaços de código executados em duas máquinas, interagindo e negociando a conexão.

-
- -

Manipulação da conexão de pares bem sucedida

- -

Como cada lado da conexão peer-to-peer é conectado com sucesso, o evento correspondente {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} é disparado. Esses manipuladores podem fazer o que for necessário, mas, neste exemplo, tudo o que precisamos fazer é atualizar a interface do usuário:

- -
  function handleLocalAddCandidateSuccess() {
-    connectButton.disabled = true;
-  }
-
-  function handleRemoteAddCandidateSuccess() {
-    disconnectButton.disabled = false;
-  }
- -

A única coisa que fazemos aqui é desativar o botão "Conectar" quando o ponto local estiver conectado e ativar o botão "Desconectar" quando o ponto remoto se conectar.

- -

Conectando o canal de dados

- -

Uma vez que o {{domxref("RTCPeerConnection")}} é aberto, o evento {{event("datachannel")}} é enviado para o ponto remoto para completar o processo de abertura do canal de dados; Isso invoca nosso método receiveChannelCallback(), que se parece com isso:

- -
  function receiveChannelCallback(event) {
-    receiveChannel = event.channel;
-    receiveChannel.onmessage = handleReceiveMessage;
-    receiveChannel.onopen = handleReceiveChannelStatusChange;
-    receiveChannel.onclose = handleReceiveChannelStatusChange;
-  }
- -

O evento{{event("datachannel")}} inclui, em sua propriedade de canal, uma referência a um {{domxref("RTCDataChannel")}} Representando o ponto remoto do canal. Isso é salvo, e nós configuramos, no canal, ouvintes de eventos para os eventos que queremos manipular. Uma vez feito isso, nosso método handleReceiveMessage() Será chamado cada vez que os dados são recebidos pelo ponto remoto, e o método handleReceiveChannelStatusChange() será chamado sempre que mudar o estado da conexão do canal, para que possamos reagir quando o canal estiver totalmente aberto e quando ele for fechado.

- -

Lidando com as mudanças de status do canal

- -

Ambos nossos pontos locais e remotos usam um único método para lidar com eventos que indicam alguma alteração no status da conexão do canal.

- -

Quando o ponto local experimenta um evento aberto ou fechado, o métodohandleSendChannelStatusChange() é chamado:

- -
  function handleSendChannelStatusChange(event) {
-    if (sendChannel) {
-      var state = sendChannel.readyState;
-
-      if (state === "open") {
-        messageInputBox.disabled = false;
-        messageInputBox.focus();
-        sendButton.disabled = false;
-        disconnectButton.disabled = false;
-        connectButton.disabled = true;
-      } else {
-        messageInputBox.disabled = true;
-        sendButton.disabled = true;
-        connectButton.disabled = false;
-        disconnectButton.disabled = true;
-      }
-    }
-  }
- -

Se o estado do canal mudou para "open", isso indica que terminamos de estabelecer o link entre os dois pares. A interface do usuário é atualizada de forma correspondente: ativando o elemento de input de texto para a mensagem a ser enviada, focando este elemento de input para que o usuário comece imediatamente a digitar, habilitando os botões "Enviar" e "Desconectar", que são agora utilizáveis, E desativando o botão "Conectar", uma vez que não é necessário quando a conexão está aberta.

- -

Se o estado do canal mudou para "closed", ocorre o conjunto oposto de ações: a caixa de entrada de texto e o botão "Enviar" estão desativados, o botão "Conectar" está habilitado para que o usuário possa abrir uma nova conexão se desejar, e o botão "Desconectar" está desativado, uma vez que não é útil quando não existe conexão.

- -

Nosso exemplo de par remoto, por outro lado, ignora os eventos de alteração de status, exceto para registrar o evento no console:

- -
  function handleReceiveChannelStatusChange(event) {
-    if (receiveChannel) {
-      console.log("Receive channel's status has changed to " +
-                  receiveChannel.readyState);
-    }
-  }
- -

O método handleReceiveChannelStatusChange() recebe como parâmetro de entrada o evento que ocorreu; Este será um {{domxref("RTCDataChannelEvent")}}.

- -

Enviando mensagens

- -

Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estabelecemos como o manipulador para o evento do botão {{event("click")}} é chamado. Esse método é bastante simples:

- -
  function sendMessage() {
-    var message = messageInputBox.value;
-    sendChannel.send(message);
-
-    messageInputBox.value = "";
-    messageInputBox.focus();
-  }
- -

Primeiro, o texto da mensagem é obtido dos atributos do elemento de input {{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem.

- -

Recebendo mensagens

- -

Quando ocorre um evento de "mensagem" no canal remoto, nosso método handleReceiveMessage() é chamado como o manipulador de eventos.

- -
  function handleReceiveMessage(event) {
-    var el = document.createElement("p");
-    var txtNode = document.createTextNode(event.data);
-
-    el.appendChild(txtNode);
-    receiveBox.appendChild(el);
-  }
- -

Este método simplesmente executa alguns injeções básicas {{Glossary("DOM")}} ; cria um novo {{HTMLElement("p")}} (paragraph) elemento, então cria um novo nó {{domxref("Text")}} contendo o texto da mensagem, que é recebido na propriedade de dados do evento. Este nó de texto é anexado como um filho do novo elemento, que é então inserido no bloco receiveBox, fazendo com que ele desenhe na janela do navegador.

- -

Desconectando os pares (peers)

- -

Quando o usuário clica no botão "Desconectar", o método disconnectPeers() previamente configurado como o manipulador desse botão é chamado.

- -
  function disconnectPeers() {
-
-    // Close the RTCDataChannels if they're open.
-
-    sendChannel.close();
-    receiveChannel.close();
-
-    // Close the RTCPeerConnections
-
-    localConnection.close();
-    remoteConnection.close();
-
-    sendChannel = null;
-    receiveChannel = null;
-    localConnection = null;
-    remoteConnection = null;
-
-    // Update user interface elements
-
-    connectButton.disabled = false;
-    disconnectButton.disabled = true;
-    sendButton.disabled = true;
-
-    messageInputBox.value = "";
-    messageInputBox.disabled = true;
-  }
-
- -

Isso começa por fechar cada par {{domxref("RTCDataChannel")}}, então, de forma semelhante, cada um {{domxref("RTCPeerConnection")}}. Então, todas as referências salvas desses objetos são definidas como null para evitar a reutilização acidental, e a interface do usuário é atualizada para refletir o fato de que a conexão foi fechada.

- -

Próximos passos

- -

Você poderia tentar este exemplo e dar uma olhada no código fonte webrtc-simple-datachannel, disponível no GitHub.

diff --git a/files/pt-br/web/api/websockets_api/index.html b/files/pt-br/web/api/websockets_api/index.html new file mode 100644 index 0000000000..1a24b9d86a --- /dev/null +++ b/files/pt-br/web/api/websockets_api/index.html @@ -0,0 +1,178 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - Referencia + - Sumario + - WebSockets +translation_of: Web/API/WebSockets_API +--- +

WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.

+ +
+
+

Documentação

+ +
+
Escrevendo aplicações cliente WebSocket
+
Um tutorial para escrever clientes WebSocket para ser executado no browser.
+
Referencias WebSockets
+
Uma referência para a API WebSocket do lado do cliente.
+
(TBD)Escrevendo servidores WebSocket
+
Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.
+
+ +

Saiba mais...

+
+ +
+

Ferramentas

+ + + + + + +
+
+ +

Veja Também

+ + + + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte a versão 76 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (desativado)5.0.1
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocolo suporta versão 10 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516{{CompatGeckoDesktop("11.0")}}1012.106.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte a versão 76 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 8 (IETF rascunho 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
+
+ +

Notas Gecko

+ +

O suporte a WebSockets no Firefox continua acompanhando as constantes especificações do WebSocket. O Firefox 6 implementa a versão 7 do protocolo subjacente, enquanto o Firefox 7 implementa a versão 8 (conforme especificado pelo rascunho IETF 10). O Firefox móvel recebeu suporte WebSocket no Firefox mobile 7.0.

+ +

Gecko 6.0

+ +

Antes do Gecko 6.0 {{geckoRelease("6.0")}}, estava incorreto, um objeto WebSocket que alguns sites implicavam que os serviços WebSocket não eram prefixados. Este objeto foi renomeado para MozWebSocket.

+ +

Gecko 7.0

+ +

Iniciado no Gecko 7.0 {{geckoRelease("7.0")}}, o network.websocket.max-connections preferencialmente usado para determinar o número máximo de conexões do WebSocket que pode m ser abertas de cada vez. O valor padrão é 200.

+ +

Gecko 8.0

+ +

Iniciado no Gecko 8.0 {{geckoRelease("8.0")}}, a extensão de fluxo de expansão para o protocolo WebSocket foi desativada, por estar obsoleta nas especificações. Isso resolve incompatibilidades com alguns sites.

+ +

Gecko 11.0

+ +

Antes do Gecko 11.0, as mensagens recebidas e enviadas estavam limitadas a 16 MB de tamanho. Agora elas podem ter até 2 GB de tamanho. Note, no entanto, que as limitações de memória (especialmente em dispositivos móveis) tornam isso apenas teoria, não se aplica à prática. Na realidade, as transferências desse tamanho falharão em dispositivos que não possuem memória suficiente.

+ +

Além disso, o ArrayBuffer envia e recebe suporte para dados binários

+ +

Iniciado no Gecko 11.0, a API do WebSocket já não é prefixada.

+ +
Atenção:Entre outras coisas, um motivo chave para o WebSockets estar desativado por padrão no Firefox 4 e 5 é a descoberta de um Problema de segurança no design do protocolo. Isso foi corrigido no Firefox 6 implementando uma versão mais recente do protocolo que corrige o problema.
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..af608ae641 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,182 @@ +--- +title: Escrevendo aplicações cliente WebSocket +slug: WebSockets/Escrevendo_aplicacoes_cliente_WebSocket +tags: + - Cliente + - Exemplo + - Guía + - WebSocket API +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

Aplicações cliente usam o WebSocket API para se comunicar com WebSocket servers sob o protocolo WebSocket.

+ +

{{AvailableInWorkers}}

+ +
+

O fragmento de código neste artigo foi tomado de um exemplo de chat usando WebSocket. veja o código, então experimente o exemplo. O exemplo atual possui um bug; ele está tentando usar WebSockets inseguro e precisa ser atualizado para usar WebSocokets seguro. Iremos arrumar isso em breve!

+
+ +

Criando um objeto WebSocket 

+ +

Para se comunicar utilizando o protocolo WebSocket, você precisa criar um objeto WebSocket, que automaticamente tentará abrir a conexão com o servidor.

+ +

O construtor WebSocket aceita dois campos, um obrigatório e um opcional:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
A URL para se conectar. Esta deve ser a URL para qual o WebSocket irá responder.
+
protocols {{ optional_inline() }}
+
Uma única string indicando o protocolo ou uma array de strings de protocolos. Estas strings são usadas para indicar sub-protocolos, de forma que um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer que um servidor seja capaz de lidar com diferentes tipos de interações a depender do protocol especificado). Se não especificar uma string de protocolo, uma string vazia é assumida.
+
+ +

O construtor lançará a exceção SECURITY_ERR se o destino não permitir acesso. Isso pode acontecer se você tentar utilizar uma conexão insegura (a maioria dos {{Glossary("user agent", "user agents")}} agora necessitam de um link seguro para todas as conexões WebSocket, a menos que estejam no mesmo dispositivo ou na mesma rede).

+ +
+
+ +

Erros de Conexão

+ +

Se um erro ocorrer durante a tentativa de conexão, primeiro um simpes evento com o nome "error" é enviado ao objeto WebSocket  (invocando, assim, seu manipulador onerror), e então o CloseEvent é enviado ao objeto WebSocket (invocando o manipulador onclose) para indicar a razão pela qual a conexão foi fechada.

+ +

O browser pode exibir uma descrição de erro mais detalhada na saída do console, ou mesmo um código de encerramento conforme definido na RFC 6455, Section 7.4 através do CloseEvent. Está implementado a partir do Firefox 11.

+ +

Exemplos

+ +

Neste simples exemplo, criaremos um novo WebSocket, conectando ao servidor em ws://www.example.com/socketserver. Neste exemplo utilizaremos um protocolo customizado denominado "protocolOne", embora possa ser omitido.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

No retorno, exampleSocket.readyState está como CONNECTING. O readyState se tornará OPEN quando a conexão estiver pronta para transferir dados.

+ +

Se quiser abrir uma conexão e for flexível quanto aos protocolos suportados, você pode especificar um array de protocolos:

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

Uma vez que a conexão for estabelecida (isso é, readyState está OPEN), exampleSocket.protocol informará qual protocolo o servidor selecionou.

+ +

Nos exemplos acima, ws foi substituído por http, de forma similar wss substitui https. Estabelecer uma conexão WebSocket depende do Mecanismo de Aprimoramento HTTP, de forma que o pedido para atualização de protocolo está implícito quando endereçamos o servidor HTTP como ws://www.example.com ou wss://www.example.com.

+ +

Enviando dados ao servidor

+ +

Uma vez a conexão aberta, você pode iniciar a transmisão de dados ao servidor. Para tanto, chame o método send() do WebSocket para cada mensagem que queira enviar:

+ +
exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+
+ +

Você pode enviar dados como uma string, {{ domxref("Blob") }}, ou um ArrayBuffer.

+ +
Note: Nas versões anteriores à 11, o Firefox suporta apenas o envio de dados como string.
+ +

Visto que estabelecer uma conexão funciona de forma assícrona e, consequentemente, propensa a erros, não há garantia de sucesso ao chamar o método send() imediatamente após criar um objeto WebSocket. Podemos, pelo menos, ter certeza de que a tentativa de envio dos dados apenas ocorre quando uma conexão é estabelecida definindo um manipulador de eventos onopen:

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+};
+
+ +

Utilizando JSON para transmitir objetos

+ +

Uma forma conveniente é usar JSON para enviar dados razoavelmente complexos ao servidor. Por exemplo, um aplicação de chat pode interagir  com o servidor empregando um protocolo que utilize pacotes de dados  JSON encapsulados:

+ +
// Enviar texto para todos os usuarios atraves do servidor
+function sendText() {
+  // Construir um objeto do tipo msg contendo o dado que o servidor precisa processar a partir do cliente de chat.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Enviar o objeto msg como um JSON em formato de string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Esvaziar o campo input do elemento text, pronto pra receber a próxima linha de texto do usuário.
+  document.getElementById("text").value = "";
+}
+
+ +

Recebendo mensagens do servidor

+ +

A API WebSockets é dirigida por eventos; quando mensagens são recebidas, um evento de "mensagem" é entregue à função onmessage. Para começar a ouvir os dados de entrada, você pode fazer algo conforme o exemplo abaixo:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Recebendo e interpretando objetos JSON

+ +

Vamos considerar que a aplicação cliente de chat remete o envio de dados {{ anch("Utilizando JSON para transmitir objetos") }}. Existem diversos tipos de pacotes de dados que o cliente pode receber, tais como:

+ + + +

O código que interpreta as mensagens de entrada se parecerá com esse:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Seu usuario foi configurado como <em>" + msg.name + "</em> porque o nome que você escolheu está em uso.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

Aqui utilizamos JSON.parse() para conveter o objeto JSON de volta ao objeto original, em seguida, examine e aja de acordo com seu conteúdo.

+ +

Formato de dados de texto

+ +

O formato de Texto recebido através de uma conexão WebSocket está no formato UTF-8.

+ +

Fechando a conexão

+ +

Quando finalizar o uso da conexão WebSocket, invoque o método close():

+ +
exampleSocket.close();
+
+ +

Pode ser útil examinar o atributo bufferedAmount do socket  antes de tentar fechar a conexão para determinar se qualquer dado ainda está pendente de transmissão na rede. 

+ +

Considerações de segurança

+ +

WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.

diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html new file mode 100644 index 0000000000..553ba11aec --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html @@ -0,0 +1,237 @@ +--- +title: 'Escrevendo um servidor WebSocket em C #' +slug: WebSockets/Writing_WebSocket_server +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introdução

+ +

Se você quiser usar uma API WebSocket, você precisara ter um servidor. Neste artigo vou mostrar como escrever um WebSocket em C#. Você pode fazer isso em qualquer linguagem server-side, mas para manter as coisas simples e mais compreensíveis eu escolhi uma linguagem Microsoft.

+ +

Este servidor está em conformidade com a RFC 6455, por isso irá tratar apenas as conexões com os navegadores Chrome versão 16, Firefox 11, IE 10 ou superior. 

+ +

Primeiros passos

+ +

Os WebSocket´s se comunicam através de uma conexão TCP (Transmission Control Protocol), felizmente o C# possui a classe TcpListener que, como o nome sugere, tem a função de escutar (Listener) as comunicações via TCP. A classe TcpListener está no namespace System.Net.Sockets.

+ +
+

É uma boa idéia usar a palavra chave using para escrever menos. Isso significa que não é preciso você reescrever o namespace toda vez que usar uma classe dele.

+
+ +

TcpListener

+ +

Construtor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

Aqui você define onde o servidor será acessível.

+ +
+

Para setar facilmente o tipo esperado no primeiro parâmetro, use o método estático Parse da classe IPAddress.

+
+ +

Métodos:

+ + + +

Veja como usar o que aprendemos:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("A client connected.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ + + +

Propriedades:

+ + + +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Grava bytes do buffer, offset e size determinam o tamanho da mensagem.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lê bytes para o buffer, offset e size determinam o tamanho da mensagem. 

+ +

Vamos estender nosso exemplo.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("A client connected.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Quando um cliente se conecta a um servidor, ele envia uma solicitação GET para atualizar a conexão com o WebSocket a partir de uma simples requisição HTTP. Isto é conhecido como handshaking (aperto de mão).

+ +
+

Este código tem um defeito. Digamos que a propriedade client.Available retorna o valor 2 porque somente a requisição GET está disponível até agora. a expressão regular iria falhar mesmo que os dados recebidos sejam perfeitamente válidos.

+
+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (new Regex("^GET").IsMatch(data)) {
+
+} else {
+
+}
+ +

Criar a resposta é mais fácil do que entender porque você deve fazê-lo desta forma.

+ +

Você deve,

+ +
    +
  1. Obter o valor do cabeçalho da requisição Sec-WebSocket-Key sem qualquer espaço à direita e à esquerda;
    2. +
  2. Concatenar com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
    3. +
  3. Calcular o código SHA-1 e Base64 dele;
    4. +
  4. Reescreva no cabeçalho de resposta o valor de Sec-WebSocket-Accept como parte de uma resposta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decodificação de mensagens

+ +

Após um handshake de sucesso o cliente ponde enviar mensagens ao servidor, mas agora estas mensagens são codificadas.

+ +

Se nós enviarmos "MDN", nós obtemos estes bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (Esta é toda a mensagem?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Você pode enviar sua mensagem em quadros (frames), mas agora as coisas ficaram mais simples.
+ Opcode 0x1 significa que este é um texto. Veja aqui a lista completa de Opcodes.

+ +

- 131:

+ +

Se o segundo byte menos 128 estiver entre 0 e 125, este é o tamanho da mensagem. Se for 126, os 2 bytes seguintes (16-bit inteiro sem sinal) e se 127, os 8 bytes seguintes (64-bit inteiro sem sinal) são o comprimento.

+ +
+

Eu posso escolher 128, porque o primeiro bit sempre será 1.

+
+ +

- 61, 84, 35 e 6 são os bytes de chave para decodificar. Sempre mudam.

+ +

- O restante dos bytes codificados são a mensagem.

+ +

Algoritmo de decodificação

+ +

byte decodificado = [byte codificado XOR (posição do byte codificado MOD 4º byte da chave)]

+ +

Exemplo em C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ + + + + +
 
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..e493605538 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,263 @@ +--- +title: Escrevendo um servidor WebSocket +slug: WebSockets/Writing_WebSocket_servers +tags: + - Guía + - HTML5 + - Tutorial + - WebSocket + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

Um servidor de WebSocket  é uma aplicação TCP que escuta uma porta de um servidor que segue um protocolo específico, simples assim. A tarefa de criar um servidor personalizado costuma assustar as pessoas; no entanto, pode ser fácil implementar um simples servidor WebSocket na sua plataforma de escolha. 

+ +

Um servidor WebSocket pode ser escrito em qualquer linguagem de programação server-side  que é capaz de utilizar Berkeley sockets,  tais como C(++) , ou Python, ou mesmo o PHP e o server-side JavaScript. Esse não é um tutorial em uma linguagem de programação específica, mas serve como guia para facilitar a escrita do seu próprio servidor.

+ +

Você precisará saber como o HTTP funciona e ter uma experiência média com programação.

+ +

Dependendo do suporte da linguagem, pode ser necessário o conhecimento sobre soquetes TCP. O escopo deste guia é apresentar o conhecimento mínimo que você precisa para escrever um servidor WebSocket.

+ +
+

Leia a útlima especificação sobre WebSockets, a RFC 6455. As seções 1 e 4-7 são especialmente interessantes para implementadores de servidores. A seção 10 discute assuntos sobre segurança que você definitivamente deveria examinar antes de expor seu servidor.

+
+ +

Um servidor de WebSocket é explicado de maneira bem simples aqui. Servidores de WebSocket geralmente são servidores separados e especializados (para balanceamento de carga ou outras razões práticas), então, geralmente você irá usar um proxy reverso (como um servidor HTTP comum) para detectar a solicitação de handshakes do WebSocket, pré-processá-los e enviar esses clientes para um servidor WebSocket real. Isso significa que você não precisa encher seu código com cookies e manipuladores de autenticação (por exemplo).

+ +

O Handshake ("aperto de mão") do WebSocket

+ +

Primeiro de tudo, o servidor deve ouvir as conexões socket recebidas usando um socket TCP padrão. Dependendo da sua plataforma, isso pode já ter sido tratado previamente. Por exemplo, vamos assumir que seu servidor está ouvindo example.com, porta 8000, e seu servidor socket responde às requisições  GET em /chat.

+ +
+

Aviso: O servidor pode ouvir qualquer porta que escolher, mas se escolher qualquer porta diferente de 80 e 443, podem ocorrer problemas relacionados aos firewalls e/ou proxies. Conexões na porta 443 tendem a ter mais sucesso com mais frequência, isso requer uma conexão segura (TLS/SSL). Também, note que a maioria dos browsers (notavelmente o  Firefox 8+) não permite conexões de servidores WebSocket de páginas seguras.

+
+ +

O handshake é a "Web" no WebSockets. É a ponte do HTTP para o Websocket. No handshake, detalhes da conexão são negociados, e qualquer uma das partes pode voltar antes da conclusão se os termos são desfavoráveis. O servidor deve ser cuidadoso para entender tudo que o cliente perguntar,  caso contrário, serão introduzidas questões de segurança.

+ +

Requisição Handshake do Cliente

+ +

Mesmo que você esteja construindo um servidor, um cliente ainda precisa iniciar o processo de handshake do WebSocket. Então você deve saber como interpretar a requisição do cliente. O cliente vai enviar uma requisição HTTP padrão que é parecida com isso (a versão do HTTP deve ser 1.1 ou maior, e o método deve ser um GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

O cliente pode solicitar extensões e/ou subprotocolos aqui; veja Miscellaneous para mais detalhes. Também, cabeçalhos comuns como User-Agent, Referer, Cookie, ou cabeçalhos de autenticação poderiam estar bem aqui. Faça o que você quiser com eles; eles não pertencem diretamente ao WebSocket. Também é seguro ignora-los. Em muitas configurações comuns, um proxy reverso ja tratou deles.

+ +

Se qualquer cabeçalho não foi entendido ou conter um valor incorreto, o servidor deve enviar um erro "400 Bad Request" e fechar o socket imediatamente. É comum, também dar a razão pelo qual o handshake falhou no body da resposta do HTTP, mas muitas mensages nunca serão mostradas (os browsers não mostram isso). Se o servidor não reconhecer a versão do WebSockets, deve enviar um cabeçalho Sec-WebSocket-Version que contenha a(s) versão(versões) que o mesmo entenda. (Esse guia explica o v13, o mais novo). Agora, vamos continuar para o cabeçalho mais curioso, o Sec-WebSocket-Key.

+ +
+

Dica: Todos os browsers  vão enviar um Origin header. Você pode usar esse cabeçalho por segurança (verifique pelo de mesma origem, whitelisting/ blacklisting, etc.) e envie uma 403 Forbidden se você não gostou do que viu. Sobretanto, fique ciente que os agentes non-browser podem apenas enviar uma falsa Origin. Muitas aplicações vão rejeitar requisições sem cabeçalho.

+
+ +
+

Dica: A request-uri (/chat aqui) não tem significado definido na especificação. Muitas pessoas utilizam habilmente para que servidores lidem com muiltíplas aplicações WebSocket. Por exemplo, example.com/chat deve invocar um app de chat com multiplos usuários, enquanto /game no mesmo servidor poderia invocar um jogo multiplayer.

+
+ +
+

Nota: Regular HTTP status codes podem apenas ser usados antes do handshake. Depois que o handshake sucede, você deve usar um conjunto de códigos diferentes (definidos na seção 7.4 da especificação).

+
+ +

Resposta Handshake do Servidor

+ +

Quanto o servidor receber a requisição de handshake, ele deve enviar um resposta especifica (odd-looking) que indica que o protocolo está sendo alterado de HTTP para WebSocket. Essa resposta se parece com isso (lembre-se cada final do cabeçalho com \r\n e coloque um \r\n extra depois do último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, o servidor pode decidir sobre os pedidos de extensão/subprotocolo aqui; veja Miscellaneous para mais detalhes. O Sec-WebSocket-Accept é uma parte interessante. O servidor deve deriva-lo do Sec-WebSocket-Key que o cliente enviou. Para obte-lo, concatene o Sec-WebSocket-Key do cliente e a string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" juntos (isso é uma "magic string"), pegue o SHA-1 hash do resultado, e retorne o codigo base64 do hash.

+ +
+

FYI: Esse processo, aparentemente complicado existe para que seja óbvio para o cliente se o servidor suporta ou não o WebSockets. Isso é importante por causa de problemas com segurança que aparecem se o servidor aceita a conexão WebSocket mas interpreta que os dados são uma requisição HTTP.

+
+ +

Então se a chave foi "dGhlIHNhbXBsZSBub25jZQ==", o cabeçalho Sec-WebSocket-Accept aceito será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Uma vez que o servidor envie estes cabeçalhos, o handshake esta completo e você pode começar a trocar dados!

+ +
+

O servidor pode enviar outros cabeçalhos como Set-Cookie, ou perguntar por autenticação ou redirecionar via outros códigos de status, antes enviando  a resposta do handshake.

+
+ +

Acompanhamento dos clientes

+ +

Isso não está diretamente relacionado ao protocolo de WebSocket, mas vale apena mencionar aqui: seu servidor terá que acompanhar os soquetes dos clientes para que você não tenho que fazer o handshake novamente com clientes que já concluiram o handshake. O mesmo endereço IP do cliente pode tentar se conectar varias vezes (mas o servidor pode negar se tentarem fazer muitas conexões em razão de se defender de ataques de negação de serviço).

+ +

Trocando Data Frames

+ +

Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento — essa é a mágia do WebSocket. Entretanto, extrair informações desses chamados "frames" de dados não é um experiencia tão magica assim. Apesar de todos os frames seguirem um mesmo formato, os dados do cliente são enviados criptografados para o servidor, usando criptografia XOR (com uma chave de 32 bits). A seção 5 da especificação do protocolo de WebSocket descreve isso em detalhes.

+ +

Formato

+ +

Cada data frame (do cliente para o servidor ou vice-versa) segue o mesmo formato:

+ +
Frame format:
+​​
+      0                   1                   2                   3
+      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+     +-+-+-+-+-------+-+-------------+-------------------------------+
+     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+     | |1|2|3|       |K|             |                               |
+     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     |     Extended payload length continued, if payload len == 127  |
+     + - - - - - - - - - - - - - - - +-------------------------------+
+     |                               |Masking-key, if MASK set to 1  |
+     +-------------------------------+-------------------------------+
+     | Masking-key (continued)       |          Payload Data         |
+     +-------------------------------- - - - - - - - - - - - - - - - +
+     :                     Payload Data continued ...                :
+     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+     |                     Payload Data continued ...                |
+     +---------------------------------------------------------------+
+ +

O bit de MASK simplesmente diz se a mensagem está codificada. Mensagens do cliente devem estar mascaradas, então seu servidor deve esperar que o valor de MASK seja 1. De fato, a seção 5.1 da especificação diz que seu servidor deve se desconectar de um cliente se este cliente enviar mensagens que não estão mascaradas. Quando enviando um frame para o cliente, não mascare a mensagem e não defina o bit MASK. Explicaremos o mascaramento mais tarde.

+ +
+

Você tem que mascarar as mensagens mesmo quando usando secure socket (SSL).
+ Os campos RSV de 1 à 3 do cabeçalho podem ser ignorados, eles são para extenções.

+
+ +

O campo opcode define como interpretar o payload data: 0x0 para continuo, 0x1 para texto (que sempre está codificadao em UTF-8), 0x2 para binário, e outros conhecidos como "control codes" seram discutidos posteriormente. Nessa versão de WebSockets, 0x3, a 0x7 e 0xB a 0xF tem o mesmo significado.

+ +

O bit FIN disso se é a ultima mensagem da serie. Se for 0, então o servidor irá continuar esperando por mair partes da mensagem;  caso contrário, o servidor pode considerar a mensagem como enviada.

+ +

Se falará mais sobre isso depois.

+ +

Decodificando o Payload Length

+ +

Para ler o payload data, você deve saber quando parar de ler. Por isso é importante saber o tamanho do payload (payload length). Infelizmente,  conseguir essa informação é de certa forma complicado. Para obte-lá, seguimos esses passos:

+ +
    +
  1. Ler os bits 9-15 (inclusivo) e interpretar como um unsigned integer. Se o valor for de 125 ou menor, esse é o tamanho; temos a resposta. Se o valor é igual a 126, então vai para o passo 2, ou se for 127, então vai para o passo 3.
    2. +
  2. Ler os próximos 16 bits e interpretar como um unsined integer, esse é o tamanho; temos a resposta
    3. +
  3. Ler os próximos 64 bits e interpretar como um unsigned integer (o bit mais significante DEVE ser 0), esse é o tamanho; temos a resposta.
    4. +
+ +

Lendo e Desmascarando o Dado

+ +

Se o bit MASK for definido (e deve estar, para mensagens cliente-para-servidor), leia os próximos 4 octetos (32 bits); isso é a chave da mascara. Uma vez que o payload length e o masking key são decodificados, você pode seguir em frente e ler o número de bytes do socket.

+ +

Vamos chamar os dados de ENCODED, e a chave de MASK.

+ +

Para conseguir o DECODED, faça um loop sobre os octetos de ENCODED e um XOR do (i módulo 4) ezimo octeto de MASK. Em pseudo-código (isso é para ser valida em JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Agora você pode descobrir o que DECODED significa, dependendo da sua aplicação.

+ +

Fragmentação de Mensagens

+ +

Os campos FIN e opcode trabalham juntos para enviar uma mensagens quebradas em mais de um frame. Isso é chamado de fragmentação. Fragmentação está disponível apenas sobre opcode 0x0 a 0x2.

+ +

Lembre que o opcode diz o que o frame deve fazer. Se for 0x1, o payload um é texto. Se for 0x2, o payload são dados binários. Entretanto, se for 0x0, o frame é umframe de continuação. Isso significa que o servidor deve concatenar o frame de payload com o último frame recebido do cliente.

+ +

Aqui está um exemplo, de como o servidor reage a um cliente enviando uma mensagem de texto. A primeira mensagem é enviada em um frame unico, enquanto a segunda mensagem é enviada através de tres frames. Os detalhes de FIN e opcode são mostrados apenas para o cliente:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Note que o primeiro frame que contém a mensagem inteira tem o FIN igual a 1 e o opcode igual a 0x1, entao o servidor pode processar ou responder como achar melhor.
+ O segundo frame enviado pelo cliente é uma mensagem de texto com payload opcode igual a 0x1, mas a mensagem inteira ainda não chegou (FIN=0). Todos as partes restantes da mensagem são enviados em frames continuos (opcode=0x0), e o frame final da mensagem é marcado com FIN=1. Seção 5.4 da especificação descreve a fragmentação de mensagens.

+ +

Pings e Pongs: O Heartbeat do WebSockets

+ +

Em qualquer momento do handshake, tanto o cliente quanto o servidor podem enviar um ping para a outra parte. Quando o ping é rescebido, o destinatário deve responder com um pong assim que possível. Você pode usar isso para garantir que o cliente está conectado, por exemplo.

+ +

Um ping ou um pong é um frame comum, entretanto é usado para controle. Pings tem o valor de opcode 0x9, enquanto que pongs tem o opcode 0xA. Quando você recebe um ping, envia de volta um pong com o mesmo exato payload data do ping (para pings e pongs, o payload length máximo é 125). Você também pode ter um pong sem nunca receber um ping; ignore isso caso ocorra.

+ +
+

Se você receber mais de um ping antes de ter a chance de enviar um pong, você envia apenas um pong.

+
+ +

Fechando a conexão

+ +

Para fechar a conexão tanto cliente quanto servidor podem enviar um frame de controle com dados contendo a sequencia de controles especifica para iniciar o fim do handshake (detalhado na seção 5.5.1). Assim que receber esse tipo de frame, a outra parte envia um frame de fechamento em resposta. A primeira parte então fecha a conexão. Quais quer outros dados recebidos depois de fechar a conexão é descartado. 

+ +

Diversos

+ +
+

Códigos WebSocket, extensões, subprotocols, etc. são registrados na IANA WebSocket Protocol Registry.

+
+ +

As extensões e subprotocolos do WebSocket são negociados via headers durante the handshake. Algumas vezes extensões e subprotocolos paracem muito similares para serem coisas diferentes, mas eles tem claras distinções. Extensões controlam os frame do WebSocket e modificam o payload, enquanto os subprotocolos estruturam o payload do WebSocket e nunca modificam nada. Extensões são opcionais e generalizadas (como comporessam); subprotocolos são mandatórios e localizados (como os usados para chat e para jogos MMORPG).

+ +

Extensões

+ +
+

Essa sessão precisa ser mais desenvolvida. Por favor edite se você tiver conhecimento sobre.

+
+ +

Imagine um extensão que comprime um arquivo antes de ser enviado em um e-mail para alguem. Independente do que você faça, está enviando o mesmo dado de formas diferentes. O destinatário eventualmente terá os mesmos dados que a cópia local que você tem, mas foram enviadas de formas diferentes. Isso é o que extensões fazem. WebSockets definem um protocolo e um forma simples de envio de dados, mas uma extensão como um compressor pode enviar o mesmo dado em um formado menor.

+ +
+

Extensões são explicadas nas sessões 5.8, 9, 11.3.2 e 11.4 da especificação.

+
+ +

Subprotocols

+ +

Pense em um subprotocolo como um esquema XML personalizado ou doctype declaration. Você ainda está usando XML e sua sintaxe, mas também é restringido por uma estrutura em que concordou. Os subprotocolo WebSocket são exatamente assim. Eles não apresentam nada sofisticado, apenas estabelecem estrutura. Como um doctype ou esquema, ambas as partes devem concordar com o subprotocolo; diferente de um doctype ou esquema, o subprotocolo é implementado no servidor e não pode ser referenciado externamente pelo cliente.

+ +
+

Subprotocolos são explicados nas sessões 1.9, 4.2, 11.3.4 e 11.5 da especificação.

+
+ +

Um cliente precisa solicitar um subprotocolo específico. Para fazer isso, ele enviará algo como isso como parte do handshake original:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

ou, equivalentemente:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Agora, o servidor deve escolher um dos protocolos que o cliente sugeriu e suporta. Se houver mais de um, envie o primeiro que o cliente enviou. Imagine que nosso servidor possa usar soap e wamp. Em seguida, no handshake de resposta, ele enviará:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

O servidor não pode enviar mais de um cabeçalho Sec-Websocket-Protocol.
+ Se o servidor não quiser usar nenhum subprotocolo, ele não deverá enviar nenhum cabeçalho Sec-WebSocket-Protocol. O envio de um cabeçalho em branco está incorreto.
+ O cliente pode fechar a conexão se não conseguir o subprotocolo desejado.

+
+ +

Se você deseja que seu servidor obedeça a certos subprotocolo, então naturalmente precisará de código extra no servidor. Vamos imaginar que estamos usando um subprotocolo json. Neste subprotocolo, todos os dados são transmitidos como JSON. Se o cliente solicitar esse protocolo e o servidor quiser usá-lo, o servidor precisará ter um analisador JSON. Na prática, isso fará parte de uma biblioteca, mas o servidor precisará transmitir os dados.

+ +
+

Tip: Para evitar o conflito de nomes, recomenda-se que o subprotocolo seja nomeado como parte da string do domínio. Se você está desenvolvendo um aplicativo de bate-papo personalizado que usa um formato proprietário exclusivo da Exemplo Inc., então você pode usar isso: Sec-WebSocket-Protocol: chat.example.com. Note que isso não é necessário, é apenas uma convenção opcional, e você pode usar qualquer string que desejar.

+
+ +

Relacionado

+ + diff --git a/files/pt-br/web/api/window/beforeunload_event/index.html b/files/pt-br/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..6d6034318c --- /dev/null +++ b/files/pt-br/web/api/window/beforeunload_event/index.html @@ -0,0 +1,106 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +

O evento beforeunload é disparado quando o window, o document e seus recursos estão prestes a ser descarregados.

+ +

Quando uma string é atribuída na propriedade returnValue do Event, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNão
CancelableSim
Target objectsdefaultView
Interface{{domxref("Event")}}
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (the topmost target in the DOM tree).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}É possível cancelar o evento?
returnValue{{domxref("DOMString")}}O valor de retorno do evento (a mensagem que será exibida ao usuário).
+ +

Exemplos

+ +
window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// equivalente a
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});
+ +

Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+ +

Notas

+ +

Quando este evento retorna um valor não vazio (non-void), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a string retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja {{bug("588292")}}.

+ +

Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} e {{domxref("window.prompt()")}} serão ignoradas durante este evento. Para mais detalhes veja a especificação HTML5 (em inglês).

+ +

Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em about:config que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/window/domcontentloaded_event/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..eb54671921 --- /dev/null +++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,177 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load quando DOMContentLoaded seria muito mais apropriado.

+ +
+

Nota: Javascript Síncrono pausa a análise do DOM.

+
+ +

Acelerando

+ +

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

+ +
+
+ +

Informações gerais

+ +
+
Especificação
+
HTML5
+
Interface
+
Event
+
Propaga
+
Sim
+
Cancelável
+
Sim (embora especificado como evento simples não-cancelável)
+
Alvo
+
Document
+
Ação Default
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Alvo do evento (O topo do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento
bubbles {{readonlyInline}}{{jsxref("Boolean")}}O evento é por padrão bubbles ou não.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}O evento pode ser cancelado ou não.
+ +

Exemplo

+ +

Básico

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+</script>
+
+ +

Forçando o atraso do DOMContentLoaded

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
+</script>
+
+ +

 

+ +

Verificando se o carregamento está completo

+ +

DOMContentLoaded pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.

+ +
function doSomething() {
+  console.info("DOM carregado");
+}
+
+if (document.readyState === "loading") {  // Ainda carregando
+  document.addEventListener("DOMContentLoaded", doSomething);
+} else {  // `DOMContentLoaded` foi disparado
+  doSomething();
+}
+ +

 

+ +

Compatibilidade entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico0.2{{ CompatGeckoDesktop("1") }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

+ +

Cross-browser fallback

+ +

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

+ +

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/window/load_event/index.html b/files/pt-br/web/api/window/load_event/index.html new file mode 100644 index 0000000000..db04b1ecbe --- /dev/null +++ b/files/pt-br/web/api/window/load_event/index.html @@ -0,0 +1,89 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +
O evento de load é acionado quando um recurso e seus recursos
+dependentes terminaram de carregar.
+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
UIEvent
+
Bubbles
+
Não
+
Cancelavel
+
Não
+
Alvo
+
Window
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Exemplo

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Todos os recursos terminaram o carregamento!");
+  });
+</script>
+
+ +

 

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/window/localstorage/index.html b/files/pt-br/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..8c7c379435 --- /dev/null +++ b/files/pt-br/web/api/window/localstorage/index.html @@ -0,0 +1,123 @@ +--- +title: Window.localStorage +slug: Web/API/Window/Window.localStorage +tags: + - API + - Armazenamento + - Propriedade + - Referencia + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

A propriedade localStorage permite acessar um objeto {{domxref("Storage")}} local. A localStorage é similar ao sessionStorage. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.

+ +

Sintaxe

+ +
meuStorage = localStorage;
+ +

Valor

+ +

Objeto {{domxref("Storage")}}.

+ +

Exemplo

+ +

O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('meuGato', 'Tom');
+ +
+

Nota: Por favor veja o artigo Using the Web Storage API para um exemplo completo.

+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Cada navegador tem o seu nível de capacidade de armazenamento para localStorage e {{domxref("sessionStorage")}}. Aqui está um teste detalhado de toda a capacidade de armazenamento de vários browsers.

+ +
+

Nota: desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no localStorage de forma alguma.

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html deleted file mode 100644 index e5e756482a..0000000000 --- a/files/pt-br/web/api/window/onscroll/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: window.onscroll -slug: Web/API/Window/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll ---- -

{{ ApiRef() }}

-

Sumário

-

Especifica a função a ser chamada quando é feito o scroll na janela.

-

Sintaxe

-
window.onscroll = funcRef;
-
- -

Exemplos

-

Exemplo 1: Genérico

-
window.onscroll = function (oEvent) {
-  // executa um bloco de código ou funções, quando o scroll é feito na janela.
-}
-
-

Examplo 2: Dectando a rolagem

-

O exemplo a seguir, irá disparar um alerta sempre que o usuário rolar a página .

-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>onscroll test</title>
-<script type="text/javascript">
-window.onscroll = scroll;
-
-function scroll () {
- alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
- // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
-}
-</script>
-</head>
-
-<body>
-<p>Redimensione a janela</p>
-<p>para um tamanho pequeno,</p>
-<p>e use a barra de rolagem</p>
-<p>para mover ao redor do conteúdo da página</p>
-<p>na janela.</p>
-</body>
-</html>
-
- -

O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels

-

 

-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-var bAppended = false, oBookmark = document.createElement("div");
-oBookmark.id = "arrowUp";
-oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";
-
-onscroll = function() {
-  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
-  bAppended = nVScroll > 500 ?
-    bAppended || (document.body.appendChild(oBookmark), true)
-    : bAppended && (document.body.removeChild(oBookmark), false);
-};
-</script>
-<style type="text/css">
-#arrowUp {
-  position: fixed;
-  height: auto;
-  width: auto;
-  right: 10px;
-  top: 10px;
-  font-size: 48px;
-}
-#arrowUp a {
-  text-decoration: none;
-  color: black;
-  font-weight: bold;
-  font-family: serif;
-}
-</style>
-</head>
-
-<body>
-<p>Conteúdo da página aqui!</p>
-</body>
-
-</html>
-

Notas

-

{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.
- Esse bug foi corrigido no Gecko 1.8/Firefox 1.5

-

Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.

-

Especificação

- -

{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}

diff --git a/files/pt-br/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html deleted file mode 100644 index 1dec25bd24..0000000000 --- a/files/pt-br/web/api/window/url/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -

{{ApiRef("Window")}}{{SeeCompatTable}}

- -

A propriedade Window.URL retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.

- -

{{AvailableInWorkers}}

- -

Sintaxe

- -

Chamando um método estático:

- -
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
- -

Construindo um novo objeto:

- -
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
- -

Compatibilidade do navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
- {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
- 7.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
- {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
-
- -

[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno nsIDOMMozURLProperty não padrão. Na prática, isso não fez diferença.

- -

[2] Implementado sob o nome não padronizado webkitURL.

- -

Veja também

- - diff --git a/files/pt-br/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/window.localstorage/index.html deleted file mode 100644 index 8c7c379435..0000000000 --- a/files/pt-br/web/api/window/window.localstorage/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Window.localStorage -slug: Web/API/Window/Window.localStorage -tags: - - API - - Armazenamento - - Propriedade - - Referencia - - WindowLocalStorage - - localStorage -translation_of: Web/API/Window/localStorage ---- -

{{APIRef()}}

- -

A propriedade localStorage permite acessar um objeto {{domxref("Storage")}} local. A localStorage é similar ao sessionStorage. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.

- -

Sintaxe

- -
meuStorage = localStorage;
- -

Valor

- -

Objeto {{domxref("Storage")}}.

- -

Exemplo

- -

O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.

- -
localStorage.setItem('meuGato', 'Tom');
- -
-

Nota: Por favor veja o artigo Using the Web Storage API para um exemplo completo.

-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
- - - -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Cada navegador tem o seu nível de capacidade de armazenamento para localStorage e {{domxref("sessionStorage")}}. Aqui está um teste detalhado de toda a capacidade de armazenamento de vários browsers.

- -
-

Nota: desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no localStorage de forma alguma.

-
- -

Veja também

- - diff --git a/files/pt-br/web/api/windowbase64/atob/index.html b/files/pt-br/web/api/windowbase64/atob/index.html deleted file mode 100644 index cb9058abe5..0000000000 --- a/files/pt-br/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WindowBase64.atob() -slug: Web/API/WindowBase64/atob -tags: - - API - - Referencia - - WindowBase64 - - metodo -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -
{{APIRef("HTML DOM")}}
- -

A função WindowBase64.atob() decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método window.atob() para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.

- -

Para utilizar com strings Unicode ou UTF-8, veja esta nota em Base64 encoding and decoding e essa nota em window.btoa().

- -

Sintaxe

- -
var dadoDecodificado = window.atob(dadoCodificado);
- -

Exemplo

- -
var dadoCodificado = window.btoa("Olá, mundo"); // codifica a string
-var dadoDecodificado = window.atob(dadoCodificado); // decodifica a string
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Versão de {{SpecName("HTML WHATWG")}}. Criação do WindowBase64 (antes as propriedades ficavam no target).
- -

Compatibilidade de navegadores

- -
{{Compat("api.WindowOrWorkerGlobalScope.atob")}}
- -
- -

[1] atob() também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto window não é global nos componentes.

- -

[2] A partir do Firefox 27, atob() ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})

- -

Veja também

- - diff --git a/files/pt-br/web/api/windowbase64/index.html b/files/pt-br/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/pt-br/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -

{{APIRef("HTML DOM")}}

- -

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This helper neither defines nor inherits any properties.

- -

Methods

- -

This helper does not inherit any methods.

- -
-
{{domxref("WindowBase64.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowBase64.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

- -

See also

- - diff --git a/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..cb9058abe5 --- /dev/null +++ b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,72 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Referencia + - WindowBase64 + - metodo +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +
{{APIRef("HTML DOM")}}
+ +

A função WindowBase64.atob() decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método window.atob() para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.

+ +

Para utilizar com strings Unicode ou UTF-8, veja esta nota em Base64 encoding and decoding e essa nota em window.btoa().

+ +

Sintaxe

+ +
var dadoDecodificado = window.atob(dadoCodificado);
+ +

Exemplo

+ +
var dadoCodificado = window.btoa("Olá, mundo"); // codifica a string
+var dadoDecodificado = window.atob(dadoCodificado); // decodifica a string
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Versão de {{SpecName("HTML WHATWG")}}. Criação do WindowBase64 (antes as propriedades ficavam no target).
+ +

Compatibilidade de navegadores

+ +
{{Compat("api.WindowOrWorkerGlobalScope.atob")}}
+ +
+ +

[1] atob() também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto window não é global nos componentes.

+ +

[2] A partir do Firefox 27, atob() ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..f03f43979f --- /dev/null +++ b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,100 @@ +--- +title: WindowTimers.clearTimeout() +slug: Web/API/WindowTimers/clearTimeout +tags: + - API + - Method + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
+
+
{{APIRef("HTML DOM")}}
+
+
+ +

Sumário

+ +

O método clearTimeout() do escopo {{domxref("WindowOrWorkerGlobalScope")}} cancela um timeout previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.

+ +

Síntaxe

+ +
escopo.clearTimeout(timeoutID)
+
+ +

Parâmetros

+ +
+
timeoutID
+
O ID do timeout que você deseja cancelar. Esse ID é o retorno da função setTimeout().
+
+ +

É interessante ressaltar que os conjuntso de IDs usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que clearTimeout() e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.

+ +

Exemplo

+ +

Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.

+ +
var alarme = {
+  relembrar: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+        this.cancelar();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+        this.relembrar(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancelar: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarme.setup() };
+ +

Notas

+ +

Passar um ID inválido para clearTimeout não causa nenhum efeito (não lança nenhuma exceção).

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}{{Spec2("HTML WHATWG")}}Método movido para WindowOrWorkerGlobalScope .
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidade

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/windowtimers/cleartimeout/index.html b/files/pt-br/web/api/windowtimers/cleartimeout/index.html deleted file mode 100644 index f03f43979f..0000000000 --- a/files/pt-br/web/api/windowtimers/cleartimeout/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: WindowTimers.clearTimeout() -slug: Web/API/WindowTimers/clearTimeout -tags: - - API - - Method - - Window -translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout ---- -
-
-
{{APIRef("HTML DOM")}}
-
-
- -

Sumário

- -

O método clearTimeout() do escopo {{domxref("WindowOrWorkerGlobalScope")}} cancela um timeout previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.

- -

Síntaxe

- -
escopo.clearTimeout(timeoutID)
-
- -

Parâmetros

- -
-
timeoutID
-
O ID do timeout que você deseja cancelar. Esse ID é o retorno da função setTimeout().
-
- -

É interessante ressaltar que os conjuntso de IDs usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que clearTimeout() e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.

- -

Exemplo

- -

Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.

- -
var alarme = {
-  relembrar: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    if (typeof this.timeoutID === 'number') {
-        this.cancelar();
-    }
-
-    this.timeoutID = window.setTimeout(function(msg) {
-        this.relembrar(msg);
-    }.bind(this), 1000, 'Wake up!');
-  },
-
-  cancelar: function() {
-    window.clearTimeout(this.timeoutID);
-  }
-};
-window.onclick = function() { alarme.setup() };
- -

Notas

- -

Passar um ID inválido para clearTimeout não causa nenhum efeito (não lança nenhuma exceção).

- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}{{Spec2("HTML WHATWG")}}Método movido para WindowOrWorkerGlobalScope .
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidade

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/windowtimers/index.html b/files/pt-br/web/api/windowtimers/index.html deleted file mode 100644 index 8be6ca7e8b..0000000000 --- a/files/pt-br/web/api/windowtimers/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This interface do not define any property, nor inherit any.

- -

Methods

- -

This interface do not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

- - diff --git a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html b/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html deleted file mode 100644 index 81b8fb8d3e..0000000000 --- a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Requisições síncronas e assíncronas -slug: Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas -translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests ---- -

XMLHttpRequest suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.

- -

Requisições síncronas podem bloquear a execução do codigo, gerando um "congelamento" da tela, prejudicando a experiência do usuário. 

- -

Requisição assíncrona

- -

Se você usa XMLHttpRequest de uma extensão, você deveria usá-la de forma assíncrona. Neste caso, você recebe um callback quando os dados forem recebidos, o que permite que o browser continue seu trabalho normalmente enquanto sua requisição estiver sendo processada.

- -

Exemplo: envie um arquivo para o console de log

- -

Esse é o exemplo mais simples de uso do XMLHttpRequest assíncrono.

- -
var xhr = new XMLHttpRequest();
-xhr.open("GET", "/bar/foo.txt", true);
-xhr.onload = function (e) {
-  if (xhr.readyState === 4) {
-    if (xhr.status === 200) {
-      console.log(xhr.responseText);
-    } else {
-      console.error(xhr.statusText);
-    }
-  }
-};
-xhr.onerror = function (e) {
-  console.error(xhr.statusText);
-};
-xhr.send(null);
- -

A Linha 2 define o terceiro parâmetro como true, indicando que a requisição deve ser tratada assincronamente.

- -

A Linha 3 cria um objeto função do tipo event handler e atribui ele ao atributo onload da requisição.

- -

Na LInha 4, Este handler verifica o estado da requisição, através da variável readyState, para ver se a transação está completa, e se o status do HTTP é 200. Em caso positivo lê o conteúdo recebido. Se um erro ocorrer, uma mensagem de erro será exibida no console.

- -

A requisição é, de fato, realizada na Linha 15. A rotina de callback é invocada quando o estado da requisição muda.

- -

Exemplo: Criando uma função standard para ler arquivos externos

- -

Em alguns casos, você pode precisar ler muitos arquivos externos. Esta é uma função padrão que utiliza o objeto XMLHttpRequest de forma assíncrona para alternar o conteúdo do arquivo legível para um listener especificado.

- -
function xhrSuccess () { this.callback.apply(this, this.arguments); }
-
-function xhrError () { console.error(this.statusText); }
-
-function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oReq = new XMLHttpRequest();
-  oReq.callback = fCallback;
-  oReq.arguments = Array.prototype.slice.call(arguments, 2);
-  oReq.onload = xhrSuccess;
-  oReq.onerror = xhrError;
-  oReq.open("get", sURL, true);
-  oReq.send(null);
-}
-
- -

Uso:

- -
function showMessage (sMsg) {
-  alert(sMsg + this.responseText);
-}
-
-loadFile("message.txt", showMessage, "New message!\n\n");
-
- -

A assinatura da função loadFile declara (i) uma URL de destino que será lida (via HTTP GET), (ii) uma função de callback para executar na conclusão bem-sucedida da instância xhr, e (iii) uma lista opcional de argumentos adicionais que são "passados através" do objeto XHR caso a função de callback seja bem-sucedida.

- -

A linha 1 declara uma função que será invocada quando a operação XHR for completada com sucesso.  Isso, por sua vez, invoca uma função de callback especificada na invocação da função loadFile (neste caso, a função showMessage) que foi atribuída a propriedade do objeto XHR (Linha 7). Os  argumentos adicionais (caso existam) fornecem a invocação da função loadFile são "aplicados" para a execução da função de callback..

- -

A linha 3 declara uma função que será invocada quando a operação XHR não for completada com sucesso.

- -

A linha 7 define no objeto XHR  the success callback function given as the second argument to loadFile.

- -

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

- -

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

- -

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

- -

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

- -

Line 12 actually initiates the request.

- -

Example: using a timeout

- -

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

- -
function loadFile(sUrl, timeout, callback){
-
-    var args = arguments.slice(3);
-    var xhr = new XMLHttpRequest();
-    xhr.ontimeout = function () {
-        console.error("The request for " + url + " timed out.");
-    };
-    xhr.onload = function() {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                callback.apply(xhr, args);
-            } else {
-                console.error(xhr.statusText);
-            }
-        }
-    };
-    xhr.open("GET", url, true);
-    xhr.timeout = timeout;
-    xhr.send(null);
-}
- -

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

- -

Usage:

- -
function showMessage (sMsg) {
-  alert(sMsg + this.responseText);
-}
-
-loadFile("message.txt", 2000, showMessage, "New message!\n");
-
- -

Here, we're specifying a timeout of 2000 ms.

- -
-

Note: Support for timeout was added in {{Gecko("12.0")}}.

-
- -

Synchronous request

- -
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
- -

Em casos raros, o uso do método síncrono é preferível ao invés do método assíncrono.

- -

Example: HTTP synchronous request

- -

This example demonstrates how to make a simple synchronous request.

- -
var request = new XMLHttpRequest();
-request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
-request.send(null);
-
-if (request.status === 200) {
-  console.log(request.responseText);
-}
-
- -

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

- -

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

- -

Example: Synchronous HTTP request from a Worker

- -

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

- -

example.html (the main page):

- -
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-  var worker = new Worker("myTask.js");
-  worker.onmessage = function(event) {
-    alert("Worker said: " + event.data);
-  };
-
-  worker.postMessage("Hello");
-</script>
-</head>
-<body></body>
-</html>
-
- -

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

- -
Hello World!!
-
- -

myTask.js (the Worker):

- -
self.onmessage = function (event) {
-  if (event.data === "Hello") {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "myFile.txt", false);  // synchronous request
-    xhr.send(null);
-    self.postMessage(xhr.responseText);
-  }
-};
-
- -
Note: The effect, because of the use of the Worker, is however asynchronous.
- -

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

- -

Adapting Sync XHR usecases to the Beacon API

- -

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

- -

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

- -
window.addEventListener('unload', logData, false);
-
-function logData() {
-    var client = new XMLHttpRequest();
-    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
-    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
-    client.send(analyticsData);
-}
-
- -

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

- -

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

- -
window.addEventListener('unload', logData, false);
-
-function logData() {
-    navigator.sendBeacon("/log", analyticsData);
-}
-
- -

See also

- - - -

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..81b8fb8d3e --- /dev/null +++ b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,234 @@ +--- +title: Requisições síncronas e assíncronas +slug: Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

XMLHttpRequest suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.

+ +

Requisições síncronas podem bloquear a execução do codigo, gerando um "congelamento" da tela, prejudicando a experiência do usuário. 

+ +

Requisição assíncrona

+ +

Se você usa XMLHttpRequest de uma extensão, você deveria usá-la de forma assíncrona. Neste caso, você recebe um callback quando os dados forem recebidos, o que permite que o browser continue seu trabalho normalmente enquanto sua requisição estiver sendo processada.

+ +

Exemplo: envie um arquivo para o console de log

+ +

Esse é o exemplo mais simples de uso do XMLHttpRequest assíncrono.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

A Linha 2 define o terceiro parâmetro como true, indicando que a requisição deve ser tratada assincronamente.

+ +

A Linha 3 cria um objeto função do tipo event handler e atribui ele ao atributo onload da requisição.

+ +

Na LInha 4, Este handler verifica o estado da requisição, através da variável readyState, para ver se a transação está completa, e se o status do HTTP é 200. Em caso positivo lê o conteúdo recebido. Se um erro ocorrer, uma mensagem de erro será exibida no console.

+ +

A requisição é, de fato, realizada na Linha 15. A rotina de callback é invocada quando o estado da requisição muda.

+ +

Exemplo: Criando uma função standard para ler arquivos externos

+ +

Em alguns casos, você pode precisar ler muitos arquivos externos. Esta é uma função padrão que utiliza o objeto XMLHttpRequest de forma assíncrona para alternar o conteúdo do arquivo legível para um listener especificado.

+ +
function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+
+ +

Uso:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

A assinatura da função loadFile declara (i) uma URL de destino que será lida (via HTTP GET), (ii) uma função de callback para executar na conclusão bem-sucedida da instância xhr, e (iii) uma lista opcional de argumentos adicionais que são "passados através" do objeto XHR caso a função de callback seja bem-sucedida.

+ +

A linha 1 declara uma função que será invocada quando a operação XHR for completada com sucesso.  Isso, por sua vez, invoca uma função de callback especificada na invocação da função loadFile (neste caso, a função showMessage) que foi atribuída a propriedade do objeto XHR (Linha 7). Os  argumentos adicionais (caso existam) fornecem a invocação da função loadFile são "aplicados" para a execução da função de callback..

+ +

A linha 3 declara uma função que será invocada quando a operação XHR não for completada com sucesso.

+ +

A linha 7 define no objeto XHR  the success callback function given as the second argument to loadFile.

+ +

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

+ +

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

+ +

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

+ +

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

+ +

Line 12 actually initiates the request.

+ +

Example: using a timeout

+ +

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

+ +
function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

Here, we're specifying a timeout of 2000 ms.

+ +
+

Note: Support for timeout was added in {{Gecko("12.0")}}.

+
+ +

Synchronous request

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +

Em casos raros, o uso do método síncrono é preferível ao invés do método assíncrono.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html deleted file mode 100644 index b541e64bc1..0000000000 --- a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html +++ /dev/null @@ -1,688 +0,0 @@ ---- -title: Usando XMLHttpRequest -slug: Web/API/XMLHttpRequest/Usando_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -

XMLHttpRequest torna o envio de requisições HTTP muito fácil.  Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O status HTTP do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.

- -
function reqListener () {
-  console.log(this.responseText);
-};
-
-var oReq = new XMLHttpRequest();
-oReq.onload = reqListener;
-oReq.open("get", "yourFile.txt", true);
-oReq.send();
- -

Tipos de Requisições

- -

Uma requisição feita via XMLHttpRequest pode buscar dados de duas maneiras, sícrona e assíncrona. O tipo de requisição é dado pelo argumento async que é opcional (terceiro argumento) e é definido no método XMLHttpRequest open(). Se esse argumento for true ou não especificado, o XMLHttpRequest será processado de maneira assíncrona, caso contrário o processamento será síncrono. Uma discussão detalhada e demonstrações desses dois tipos podem ser encontradas na página requisições síncronas e assíncronas. No geral a melhor prática é a das solicitações assíncronas.

- -

Manipulando Respostas

- -

Existem vários tipos de atributos de resposta definidos pela especificação da W3C para o  XMLHttpRequest.  Eles informam ao cliente que efetuou a requisição XMLHttpRequest informações importantes sobre o status da resposta. Em alguns casos onde se lida com tipos de resposa de não-texto, os tipos de resposta podem envolver alguma manipulação e/ou análise conforme descrito nas seções seguintes.

- -

Analisando e manipulando a propriedade responseXML

- -

Se você utiliza o XMLHttpRequest para obter o conteúdo de um documento XML remoto, a propriedade responseXML será um objeto DOM que contém um documento XML, o que pode dificultar a manipulação e análise.

- -

As cinco formas mais utilizadas para análisar e manipular um arquivo XML são:

- -
    -
  1. Usando XPath para análisar parte deles.
    2. -
  2. Usando JXON para converter em um Objeto JavaScript.
    3. -
  3. Manualmente Parsing and serializing XML para strings ou objetos.
    4. -
  4. Usando XMLSerializer para serializar árvores do DOM para strings ou para arquivos.
    5. -
  5. RegExp pode ser usado se você souber de antemão qual é o conteúdo do XML. Você pode remover quebras de linhas, usando a RegExp para procurar as quebras de linha. No entanto, este é o "último método", caso o código do XML sofra alterações, o método se torna falho.
    6. -
- -

Analisando e manipulando uma propriedade responseText contendo um documento HTML

- -
Nota: A especificação W3C do XMLHttpRequest permite analisar HTML através da propriedade XMLHttpRequest.responseXML . Leia o artigo sobre HTML in XMLHttpRequest para maiores detalhes.
- -

Se você usa o XMLHttpRequest para recuperar o conteúdo de uma página HTML remota, a propriedade responseText será uma string contendo um a "sopa" de todos as tags HTML, o que pode ser difícil de manipular e analizar. Existem três formas básicas para analizar esta sopa de string HTML:

- -
    -
  1. Use a propriedade  XMLHttpRequest.responseXML.
    2. -
  2. Introduza o conteúdo dentro do corpo de um document fragment Através de fragment.body.innerHTML e percorra o fragmento do DOM.
    3. -
  3. RegExp pode se usada se você sempre conhece o conteúdo HTML responseText de que tem em mãos. Você pode quere remover quebras de linha, se você usar RegExp para varrer no que diz respeito a quebra de linhas. Contudo, este método é um "último recurso" uma vez que se o código HTML mudar um pouco, o método provavelmente irá falhar.
    4. -
- -

Manipulação de dados binários

- -

Apesar de XMLHttpRequest ser mais comumente usado para enviar e receber dados textual, ele pode ser utilizado para enviar e receber conteúdo binário. Existem vários métodos bem testados para forçar a resposta de um XMLHttpRequest para o envio de dados binário. Eles envolvem a utilização do método  .overrideMimeType()  sobre o objeto  XMLHttpRequest e é uma solução viável.

- -
var oReq = new XMLHttpRequest();
-oReq.open("GET", url, true);
-// recupera dados não processados como uma string binária
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
- -

A especificação XMLHttpRequest Level 2  adiciona novo responseType attributes que tornam o envio e recebimento de dados muito mais fácil.

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url, true);
-oReq.responseType = "arraybuffer";
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // não é responseText
-  /* ... */
-}
-oReq.send();
-
- -

Para mais exemplos confira a página Sending and Receiving Binary Data.

- -

Monitorando o progresso

- -

XMLHttpRequest fornece a capacidade de ouvir vários eventos que podem ocorrer enquanto o pedido está sendo processado. Isso inclui notificações periódicas de progresso, notificações de erro e assim por diante.

- -

Suporte para evento de progresso DOM monitorando a conexão XMLHttpRequest transfers siga a Web API specification for progress events: estes eventos implementam a interface {{domxref("ProgressEvent")}} .

- -
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress, false);
-oReq.addEventListener("load", transferComplete, false);
-oReq.addEventListener("error", transferFailed, false);
-oReq.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-// ...A transferência foi cancelada pelo usuário
-
-// progresso de transferências do servidor para o cliente (downloads)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total;
-    // ...
-  } else {
-    // Não é possível calcular informações de progresso uma vez que a dimensão total é desconhecida
-  }
-}
-
-function transferComplete(evt) {
-  alert("A transferência foi concluída.");
-}
-
-function transferFailed(evt) {
-  alert("Um erro ocorreu durante a transferência do arquivo.");
-}
-
-function transferCanceled(evt) {
-  alert("A transferência foi cancelada pelo usuário.");
-}
- -

Lines 3-6 adiciona receptores de eventos (event listeners) para os vários que são enviados ao executar uma transferência de dados usando XMLHttpRequest.

- -
Nota: Você precisa adicionar os receptores de eventos (event listeners) antes de chamar open() sobre a requisição.  Caso contrário, os eventos de prograsso não dispararão..
- -

O manipulador de evento  de prograsso, especificado pela função updateProgress() neste exemplo, recebe o número total de bytes para transferir, bem como o número de bytes transferidos até o momento em total de eventos e campos  carregados . No entanto, se o campo lengthComputable é false, o comprimento total não é conhecido e será zero..

- -

Eventos de progresso existem para ambos as transferências de download e upload. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

- -
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress, false);
-oReq.upload.addEventListener("load", transferComplete, false);
-oReq.upload.addEventListener("error", transferFailed, false);
-oReq.upload.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
- -
Nota: eventos de progresso não estão disponíveis para o arquivo: protocol.
- -
Nota: Atualmente, existem bugs em aberto para o evento de progresso que continua fetando a versão 25 do Firefox sobre OS X e Linux.
- -
-

Nota: Iniciando no {{Gecko("9.0")}}, eventos de progresso agora podem ser invocados a entrar para cada pedaço de dados recebidos, incluindo o último bloco, nos casos em que o último pacote é recebido e a conexão fechada antes do evento progresso ser disparado. Neste caso, o evento de progresso é automaticamente acionado quando o evento load ocorre para esse pacote. Isso permite que você agora acompanhe de forma confiável apenas observando o evento de progresso

-
- -
-

Nota: A partir do {{Gecko("12.0")}}, se o seu evento de progresso e chamado com um responseType de "moz-blob", o valor da resposta será um {{domxref("Blob")}} contendo os dados recebidos até agorar.

-
- -

POde-se também detectar todas as três condições de fim de carga (abort, load, or error) usando o evento loadend:

- -
req.addEventListener("loadend", loadEnd, false);
-
-function loadEnd(e) {
-  alert("A transferência terminou (embora não sabemos se ele conseguiu ou não).");
-}
-
- -

Note que não há nenhuma maneira de ter certeza a partir da informação recebida pelo evento loadend sobre qual condição causou a operação de encerrar; no entanto, você pode usar isso para lidar com tarefas que precisam ser realizadas em todos os cenários de fim-de-transferência.

- -

Submitting forms and uploading files

- -

Instances of XMLHttpRequest can be used to submit forms in two ways:

- - - -

The second way (using the FormData API) is the simplest and the fastest, but has the disadvantage that the data thus collected can not be stringified: they are in every way a blob. It is the best solution for simple cases.
- The first way (pure AJAX) is instead the most complex, but in compensation is also the most flexible and powerful: it lends itself to wider uses and the data thus collected can be stringified and reused for other purposes such as, for example, populating the status object during a manipulation of the browser history, or other.

- -

Using nothing but pure AJAX

- -

Submitting forms without the FormData API does not require other APIs, except that, only if you want to upload one or more files, the FileReader API.

- -

A brief introduction to the submit methods

- -

An html {{ HTMLElement("form") }} can be sent in four ways:

- - - -

Now, consider to submit a form containing only two fields, named foo and baz. If you are using the POST method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:

- - - -

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

- -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
- -

A little vanilla framework

- -

All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    alert(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* alert(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

To test it, please, create a page named register.php (which is the action attribute of these sample forms) and just put the following minimalistic content:

- -
<?php
-
-  /* register.php */
-
-  header("Content-type: text/plain");
-
-  echo ":: data received via GET ::\n\n";
-  print_r($_GET);
-
-  echo "\n\n:: Data received via POST ::\n\n";
-  print_r($_POST);
-
-  echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-  if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-  echo "\n\n:: Files received ::\n\n";
-  print_r($_FILES);
-
-?>
- -

The syntax of this script is the following:

- -
AJAXSubmit(myForm);
- -
Note: This little vanilla framework uses the FileReader API, which is a recent technique (but only when there are files to upload, the method of the {{ HTMLElement("form") }} is POST and the enctype attribute is setted to multipart/form-data). For this reason, the pure-AJAX upload is to be considered an experimental technique. Instead, if you don't want to upload files, this framework will not use any recent API.
-Note also that the best way to send binary content is using ArrayBuffers or Blobs in conjuncton with the send() method and, possibly, with the readAsArrayBuffer() method of the FileReader API. But, since the aim of this little script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. So, this is the best solution when working with a relatively few data which must be stringified in order to be reused later. Anyhow, since working with strings instead of typed arrays implies a greater waste of resources, this script makes sense only when you are dealing with small files (like images, documents, mp3, etc.). Otherwise, if you don't want to stringify the submitted or uploaded data, in addition to typed arrays, consider also the use of the FormData API.
- -

Using FormData objects

- -

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script type="text/javascript">
-"use strict";
-
-function ajaxSuccess () {
-  alert(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action, true);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -
Note: As we said, FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
- -

Cross-site XMLHttpRequest

- -

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

- -

Bypassing the cache

- -

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

- -
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
- -

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

- -

You can automatically adjust URLs using the following code:

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
-oReq.send(null);
- -

Security

- -

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

- -

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

- -

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

- -

XMLHttpRequests being stopped

- -

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

- -

Using XMLHttpRequest from JavaScript modules / XPCOM components

- -

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

- -
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
-var oReq = XMLHttpRequest();
- -

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

- -
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
-                                     .getService(Components.interfaces.nsIAppShellService)
-                                     .hiddenDOMWindow;
-var oReq = XMLHttpRequest();
-
- -

See also

- -
    -
  1. MDC AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
diff --git a/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..b541e64bc1 --- /dev/null +++ b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,688 @@ +--- +title: Usando XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usando_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

XMLHttpRequest torna o envio de requisições HTTP muito fácil.  Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O status HTTP do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.

+ +
function reqListener () {
+  console.log(this.responseText);
+};
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();
+ +

Tipos de Requisições

+ +

Uma requisição feita via XMLHttpRequest pode buscar dados de duas maneiras, sícrona e assíncrona. O tipo de requisição é dado pelo argumento async que é opcional (terceiro argumento) e é definido no método XMLHttpRequest open(). Se esse argumento for true ou não especificado, o XMLHttpRequest será processado de maneira assíncrona, caso contrário o processamento será síncrono. Uma discussão detalhada e demonstrações desses dois tipos podem ser encontradas na página requisições síncronas e assíncronas. No geral a melhor prática é a das solicitações assíncronas.

+ +

Manipulando Respostas

+ +

Existem vários tipos de atributos de resposta definidos pela especificação da W3C para o  XMLHttpRequest.  Eles informam ao cliente que efetuou a requisição XMLHttpRequest informações importantes sobre o status da resposta. Em alguns casos onde se lida com tipos de resposa de não-texto, os tipos de resposta podem envolver alguma manipulação e/ou análise conforme descrito nas seções seguintes.

+ +

Analisando e manipulando a propriedade responseXML

+ +

Se você utiliza o XMLHttpRequest para obter o conteúdo de um documento XML remoto, a propriedade responseXML será um objeto DOM que contém um documento XML, o que pode dificultar a manipulação e análise.

+ +

As cinco formas mais utilizadas para análisar e manipular um arquivo XML são:

+ +
    +
  1. Usando XPath para análisar parte deles.
    2. +
  2. Usando JXON para converter em um Objeto JavaScript.
    3. +
  3. Manualmente Parsing and serializing XML para strings ou objetos.
    4. +
  4. Usando XMLSerializer para serializar árvores do DOM para strings ou para arquivos.
    5. +
  5. RegExp pode ser usado se você souber de antemão qual é o conteúdo do XML. Você pode remover quebras de linhas, usando a RegExp para procurar as quebras de linha. No entanto, este é o "último método", caso o código do XML sofra alterações, o método se torna falho.
    6. +
+ +

Analisando e manipulando uma propriedade responseText contendo um documento HTML

+ +
Nota: A especificação W3C do XMLHttpRequest permite analisar HTML através da propriedade XMLHttpRequest.responseXML . Leia o artigo sobre HTML in XMLHttpRequest para maiores detalhes.
+ +

Se você usa o XMLHttpRequest para recuperar o conteúdo de uma página HTML remota, a propriedade responseText será uma string contendo um a "sopa" de todos as tags HTML, o que pode ser difícil de manipular e analizar. Existem três formas básicas para analizar esta sopa de string HTML:

+ +
    +
  1. Use a propriedade  XMLHttpRequest.responseXML.
    2. +
  2. Introduza o conteúdo dentro do corpo de um document fragment Através de fragment.body.innerHTML e percorra o fragmento do DOM.
    3. +
  3. RegExp pode se usada se você sempre conhece o conteúdo HTML responseText de que tem em mãos. Você pode quere remover quebras de linha, se você usar RegExp para varrer no que diz respeito a quebra de linhas. Contudo, este método é um "último recurso" uma vez que se o código HTML mudar um pouco, o método provavelmente irá falhar.
    4. +
+ +

Manipulação de dados binários

+ +

Apesar de XMLHttpRequest ser mais comumente usado para enviar e receber dados textual, ele pode ser utilizado para enviar e receber conteúdo binário. Existem vários métodos bem testados para forçar a resposta de um XMLHttpRequest para o envio de dados binário. Eles envolvem a utilização do método  .overrideMimeType()  sobre o objeto  XMLHttpRequest e é uma solução viável.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// recupera dados não processados como uma string binária
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

A especificação XMLHttpRequest Level 2  adiciona novo responseType attributes que tornam o envio e recebimento de dados muito mais fácil.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // não é responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Para mais exemplos confira a página Sending and Receiving Binary Data.

+ +

Monitorando o progresso

+ +

XMLHttpRequest fornece a capacidade de ouvir vários eventos que podem ocorrer enquanto o pedido está sendo processado. Isso inclui notificações periódicas de progresso, notificações de erro e assim por diante.

+ +

Suporte para evento de progresso DOM monitorando a conexão XMLHttpRequest transfers siga a Web API specification for progress events: estes eventos implementam a interface {{domxref("ProgressEvent")}} .

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...A transferência foi cancelada pelo usuário
+
+// progresso de transferências do servidor para o cliente (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Não é possível calcular informações de progresso uma vez que a dimensão total é desconhecida
+  }
+}
+
+function transferComplete(evt) {
+  alert("A transferência foi concluída.");
+}
+
+function transferFailed(evt) {
+  alert("Um erro ocorreu durante a transferência do arquivo.");
+}
+
+function transferCanceled(evt) {
+  alert("A transferência foi cancelada pelo usuário.");
+}
+ +

Lines 3-6 adiciona receptores de eventos (event listeners) para os vários que são enviados ao executar uma transferência de dados usando XMLHttpRequest.

+ +
Nota: Você precisa adicionar os receptores de eventos (event listeners) antes de chamar open() sobre a requisição.  Caso contrário, os eventos de prograsso não dispararão..
+ +

O manipulador de evento  de prograsso, especificado pela função updateProgress() neste exemplo, recebe o número total de bytes para transferir, bem como o número de bytes transferidos até o momento em total de eventos e campos  carregados . No entanto, se o campo lengthComputable é false, o comprimento total não é conhecido e será zero..

+ +

Eventos de progresso existem para ambos as transferências de download e upload. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: eventos de progresso não estão disponíveis para o arquivo: protocol.
+ +
Nota: Atualmente, existem bugs em aberto para o evento de progresso que continua fetando a versão 25 do Firefox sobre OS X e Linux.
+ +
+

Nota: Iniciando no {{Gecko("9.0")}}, eventos de progresso agora podem ser invocados a entrar para cada pedaço de dados recebidos, incluindo o último bloco, nos casos em que o último pacote é recebido e a conexão fechada antes do evento progresso ser disparado. Neste caso, o evento de progresso é automaticamente acionado quando o evento load ocorre para esse pacote. Isso permite que você agora acompanhe de forma confiável apenas observando o evento de progresso

+
+ +
+

Nota: A partir do {{Gecko("12.0")}}, se o seu evento de progresso e chamado com um responseType de "moz-blob", o valor da resposta será um {{domxref("Blob")}} contendo os dados recebidos até agorar.

+
+ +

POde-se também detectar todas as três condições de fim de carga (abort, load, or error) usando o evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("A transferência terminou (embora não sabemos se ele conseguiu ou não).");
+}
+
+ +

Note que não há nenhuma maneira de ter certeza a partir da informação recebida pelo evento loadend sobre qual condição causou a operação de encerrar; no entanto, você pode usar isso para lidar com tarefas que precisam ser realizadas em todos os cenários de fim-de-transferência.

+ +

Submitting forms and uploading files

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

The second way (using the FormData API) is the simplest and the fastest, but has the disadvantage that the data thus collected can not be stringified: they are in every way a blob. It is the best solution for simple cases.
+ The first way (pure AJAX) is instead the most complex, but in compensation is also the most flexible and powerful: it lends itself to wider uses and the data thus collected can be stringified and reused for other purposes such as, for example, populating the status object during a manipulation of the browser history, or other.

+ +

Using nothing but pure AJAX

+ +

Submitting forms without the FormData API does not require other APIs, except that, only if you want to upload one or more files, the FileReader API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider to submit a form containing only two fields, named foo and baz. If you are using the POST method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:

+ + + +

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

To test it, please, create a page named register.php (which is the action attribute of these sample forms) and just put the following minimalistic content:

+ +
<?php
+
+  /* register.php */
+
+  header("Content-type: text/plain");
+
+  echo ":: data received via GET ::\n\n";
+  print_r($_GET);
+
+  echo "\n\n:: Data received via POST ::\n\n";
+  print_r($_POST);
+
+  echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+  if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+  echo "\n\n:: Files received ::\n\n";
+  print_r($_FILES);
+
+?>
+ +

The syntax of this script is the following:

+ +
AJAXSubmit(myForm);
+ +
Note: This little vanilla framework uses the FileReader API, which is a recent technique (but only when there are files to upload, the method of the {{ HTMLElement("form") }} is POST and the enctype attribute is setted to multipart/form-data). For this reason, the pure-AJAX upload is to be considered an experimental technique. Instead, if you don't want to upload files, this framework will not use any recent API.
+Note also that the best way to send binary content is using ArrayBuffers or Blobs in conjuncton with the send() method and, possibly, with the readAsArrayBuffer() method of the FileReader API. But, since the aim of this little script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. So, this is the best solution when working with a relatively few data which must be stringified in order to be reused later. Anyhow, since working with strings instead of typed arrays implies a greater waste of resources, this script makes sense only when you are dealing with small files (like images, documents, mp3, etc.). Otherwise, if you don't want to stringify the submitted or uploaded data, in addition to typed arrays, consider also the use of the FormData API.
+ +

Using FormData objects

+ +

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Note: As we said, FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
+var oReq = XMLHttpRequest();
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = XMLHttpRequest();
+
+ +

See also

+ +
    +
  1. MDC AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 3c3963b7e6..0000000000 --- a/files/pt-br/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

- -

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

- -

Sumário

- -

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

- -

Valores

- -

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

- -

Exemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html deleted file mode 100644 index 6e5b44d286..0000000000 --- a/files/pt-br/web/css/-moz-cell/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -
{{CSSRef}} {{deprecated_header}}
- -

Não use esse valor! Use o valor cursor {{cssxref("cursor#cell","cell")}} em seu lugar.

diff --git a/files/pt-br/web/css/actual_value/index.html b/files/pt-br/web/css/actual_value/index.html new file mode 100644 index 0000000000..b7f9307a58 --- /dev/null +++ b/files/pt-br/web/css/actual_value/index.html @@ -0,0 +1,34 @@ +--- +title: Valor atual +slug: Web/CSS/Valor_atual +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/attribute_selectors/index.html b/files/pt-br/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..88881a61ea --- /dev/null +++ b/files/pt-br/web/css/attribute_selectors/index.html @@ -0,0 +1,158 @@ +--- +title: Seletor de atributos +slug: Web/CSS/Seletor_de_atributos +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

O seletor de atributos combina elementos baseado no valor de um atributo dado.

+ +
/* <a> elementos com um atributo de título  */
+a[title] {
+  color: purple;
+}
+
+/* <a> elementos combinando com um href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> elementos com um href contendo "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elementos com href terminando em ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa um elemento com atributo de nome attr.
+
[attr=value]
+
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
+
[attr~=value]
+
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
+
[attr|=value]
+
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
+
[attr^=value]
+
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
+
[attr$=value]
+
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
+
[attr*=value]
+
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
+
[attr operator value i]
+
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
+
+ +

Exemplos

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Links internos, começando com "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links com "example" em qualquer lugar da URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links com "insensitive" em qualquer lugar da URL,
+   independentemente da capitalização */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links com final ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Links')}}

+ +

Languages

+ +

CSS

+ +
/* Todas divs com um atributo `lang` em negrito. */
+div[lang] { font-weight: bold; }
+/* Todas divs com US English em azul (blue). */
+div[lang~="en-us"] { color: blue; }
+/* Todas divs onde Portuguese esta em verde (green). */
+div[lang="pt"] { color: green; }
+/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
+div[lang|="zh"] { color: red; }
+/* Todas divs com Traditional Chinese `data-lang` que é purple. */
+/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
+div[data-lang="zh-TW"] { color: purple; }
+
+ +

 

+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+ +

Resultado

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
+ +

Browser compatibilidade

+ + + +

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/box-ordinal-group/index.html b/files/pt-br/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..3c3963b7e6 --- /dev/null +++ b/files/pt-br/web/css/box-ordinal-group/index.html @@ -0,0 +1,60 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

+ +

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

+ +

Sumário

+ +

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

+ +

Valores

+ +

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

+ +

Exemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/box_model/index.html deleted file mode 100644 index 8c0db35cf6..0000000000 --- a/files/pt-br/web/css/box_model/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Box model -slug: Web/CSS/box_model -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

Resumo

- -

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

- -

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

- -

CSS Box model

- -

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

- -

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

- -

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

- -

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

- -

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

- -

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

- -

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

- -

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

- -

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Veja também

- - diff --git "a/files/pt-br/web/css/coment\303\241rio/index.html" "b/files/pt-br/web/css/coment\303\241rio/index.html" deleted file mode 100644 index dabb46a04f..0000000000 --- "a/files/pt-br/web/css/coment\303\241rio/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comentário -slug: Web/CSS/Comentário -tags: - - CSS - - CSS Reference - - Iniciante -translation_of: Web/CSS/Comments ---- -
ios{{CSSRef}}
- -

Sumário

- -

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

- -

Comments can be placed where ever white space is allowed within a style sheet.

- -

Sintaxe

- -
/* Comment */
- -

Exemplos

- -
/* A single line comment */
-
-/*
-A comment
-which stretches
-over several
-lines
-*/
-
- -

Notas

- -

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

- -

Especificações

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/comments/index.html b/files/pt-br/web/css/comments/index.html new file mode 100644 index 0000000000..dabb46a04f --- /dev/null +++ b/files/pt-br/web/css/comments/index.html @@ -0,0 +1,49 @@ +--- +title: Comentário +slug: Web/CSS/Comentário +tags: + - CSS + - CSS Reference + - Iniciante +translation_of: Web/CSS/Comments +--- +
ios{{CSSRef}}
+ +

Sumário

+ +

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

+ +

Comments can be placed where ever white space is allowed within a style sheet.

+ +

Sintaxe

+ +
/* Comment */
+ +

Exemplos

+ +
/* A single line comment */
+
+/*
+A comment
+which stretches
+over several
+lines
+*/
+
+ +

Notas

+ +

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

+ +

Especificações

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/computed_value/index.html b/files/pt-br/web/css/computed_value/index.html new file mode 100644 index 0000000000..a4932b8d40 --- /dev/null +++ b/files/pt-br/web/css/computed_value/index.html @@ -0,0 +1,56 @@ +--- +title: Valor Computado +slug: Web/CSS/valor_computado +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

The computed value of a CSS property is computed from the specified value by:

+ + + +

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

+ +

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

+ +

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

+ +

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

+ +

Notas

+ +

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
+ +

Veja também

+ + diff --git "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" "b/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" deleted file mode 100644 index 4bdd91ad9f..0000000000 --- "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Usando animações CSS -slug: Web/CSS/CSS_Animations/Usando_animações_CSS -tags: - - Advanced - - CSS - - CSS Animations - - Example - - Experimental - - Guide -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

- -

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

- -
    -
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. -
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. -
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. -
- -

Configurando a animação

- -

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

- -

As sub-propriedades da propriedade {{cssxref("animation")}} são:

- -
-
{{ cssxref("animation-delay") }}
-
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
-
{{ cssxref("animation-direction") }}
-
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
-
{{ cssxref("animation-duration") }}
-
Configura o tempo que uma animação deveria levar para completar um ciclo.
-
{{ cssxref("animation-iteration-count") }}
-
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
-
{{ cssxref("animation-name") }}
-
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
-
{{ cssxref("animation-play-state") }}
-
Permite voce pausar e resumir a sequência da animação.
-
{{ cssxref("animation-timing-function") }}
-
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
-
{{ cssxref("animation-fill-mode") }}
-
Configura que valores são aplicados pela animação antes e depois de se executar.
-
- -

Definindo a sequência de animação usando keyframes

- -

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

- -

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

- -

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

- -

Exemplos

- -
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
- -

Fazendo o texto deslizar através da janela do navegador

- -

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

- -

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

- -

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

- -

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

- -

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

- -
 
- -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

- -

Adicionando outro keyframe

- -

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

- -

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

- -

Faça repetir-se

- -

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

- -

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

- -

Fazendo a animação se mover para trás e para frente

- -

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - -
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
-finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
-ela com uma voz lânguida e sonolenta.</p>
- -

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

- -

Usando eventos de animação

- -

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

- -

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

- -

Adicionando o CSS

- -

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

- -
.slidein {
-  -moz-animation-duration: 3s;
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-  -moz-animation-name: slidein;
-  -webkit-animation-name: slidein;
-  animation-name: slidein;
-  -moz-animation-iteration-count: 3;
-  -webkit-animation-iteration-count: 3;
-  animation-iteration-count: 3;
-  -moz-animation-direction: alternate;
-  -webkit-animation-direction: alternate;
-  animation-direction: alternate;
-}
-
-@-moz-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
-
-@-webkit-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
- -

Adicionando animação a lista de eventos

- -

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
-
-
- -

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

- -

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

- -

Recebendo os eventos

- -

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "New loop started at time " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

- -

A saída, quando tudo foi dito e feito, parece com algo assim:

- - - -

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

- -

O HTML

- -

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

- -
 
- -

Veja-me mover

- -

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

- -

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

- - - -

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_animations/using_css_animations/index.html b/files/pt-br/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4bdd91ad9f --- /dev/null +++ b/files/pt-br/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,332 @@ +--- +title: Usando animações CSS +slug: Web/CSS/CSS_Animations/Usando_animações_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

+ +

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

+ +
    +
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. +
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. +
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. +
+ +

Configurando a animação

+ +

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

+ +

As sub-propriedades da propriedade {{cssxref("animation")}} são:

+ +
+
{{ cssxref("animation-delay") }}
+
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
+
{{ cssxref("animation-direction") }}
+
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
+
{{ cssxref("animation-duration") }}
+
Configura o tempo que uma animação deveria levar para completar um ciclo.
+
{{ cssxref("animation-iteration-count") }}
+
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
+
{{ cssxref("animation-play-state") }}
+
Permite voce pausar e resumir a sequência da animação.
+
{{ cssxref("animation-timing-function") }}
+
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
+
{{ cssxref("animation-fill-mode") }}
+
Configura que valores são aplicados pela animação antes e depois de se executar.
+
+ +

Definindo a sequência de animação usando keyframes

+ +

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

+ +

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

+ +

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

+ +

Exemplos

+ +
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
+ +

Fazendo o texto deslizar através da janela do navegador

+ +

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

+ +

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

+ +

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

+ +

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

+ +

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

+ +
 
+ +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Adicionando outro keyframe

+ +

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

+ +

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

+ +

Faça repetir-se

+ +

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

+ +

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

+ +

Fazendo a animação se mover para trás e para frente

+ +

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + +
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
+finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
+ela com uma voz lânguida e sonolenta.</p>
+ +

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

+ +

Usando eventos de animação

+ +

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

+ +

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

+ +

Adicionando o CSS

+ +

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Adicionando animação a lista de eventos

+ +

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+
+ +

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

+ +

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

+ +

Recebendo os eventos

+ +

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

+ +

A saída, quando tudo foi dito e feito, parece com algo assim:

+ + + +

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

+ +

O HTML

+ +

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

+ +
 
+ +

Veja-me mover

+ +

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

+ +

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

+ + + +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..d350bce6b5 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Gerador de Border-image +slug: Web/CSS/Tools/Border-image_generator +tags: + - Alternativas CSS +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..a7db08eb69 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1593 @@ +--- +title: Gerador de Border-radius +slug: Web/CSS/Tools/Border-radius_generator +tags: + - CSS + - Ferramentas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

+
+

border-radius

+

HTML Content

+ 
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+

CSS Content

+ 
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+

JavaScript Content

+ 
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+

 

diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
- -
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index d0e4fa11f7..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Multiple backgrounds -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

- -

Especificar planos de fundo múltplos é fácil:

- -
.minhaClasse {
-  background: fundo1, fundo2, ..., fundoN;
-}
-
- -

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Exemplo

- -

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

- -
.multi_bg_example {
-  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
-        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-position: bottom right, left, right;
-}
-
- - - - - - - - - - - - -
Captura de TelaDemonstração
css_multibg.png 
- -

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..d7c3ccfa3f --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,109 @@ +--- +title: Alterando a escala das imagens de background +slug: Web/Guide/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +

A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

+ +

Duplicando uma imagem grande

+ +

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

+ +

+ +

Isto pode ser conseguido usando o seguinte CSS:

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

+ +

Esticando uma imagem

+ +

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

+ +
background-size: 300px 150px;
+
+ +

O resultado fica assim:

+ +

+ +

Aumentando escala de uma imagem

+ +

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

+ +

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

+ +

Valores especiais: "contain" e "cover"

+ +

Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

+ +

contain

+ +

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

+ +
+

{{ EmbedLiveSample("contain", "100%", "220") }}

+
+ +
<div class="bgSizeContain">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

+ +
{{ EmbedLiveSample("cover", "100%", "220") }}
+ +

Os exemplos à seguir usam HTML & CSS:

+ +
<div class="bgSizeCover">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..d0e4fa11f7 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,58 @@ +--- +title: Multiple backgrounds +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

+ +

Especificar planos de fundo múltplos é fácil:

+ +
.minhaClasse {
+  background: fundo1, fundo2, ..., fundoN;
+}
+
+ +

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Exemplo

+ +

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

+ +
.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+
+ + + + + + + + + + + + +
Captura de TelaDemonstração
css_multibg.png 
+ +

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..8c0db35cf6 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,62 @@ +--- +title: Box model +slug: Web/CSS/box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Resumo

+ +

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

+ +

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

+ +

CSS Box model

+ +

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

+ +

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

+ +

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

+ +

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

+ +

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

+ +

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

+ +

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

+ +

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

+ +

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html deleted file mode 100644 index cb658d4131..0000000000 --- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Dominando margin collapsing -slug: Web/CSS/CSS_Box_Model/margin_collapsing -tags: - - CSS - - CSS Box Model - - Guía - - Intermediario(2) - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
- -
 
- -

Margin collapsing ocorre em três casos básicos:

- -
-
Irmãos adjacentes
-
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
-
- 
 <p>A margem inferior deste parágrafo é colapsada...</p>
- <p>... com margem superior deste parágrafo.</p>
-
-
-
Pai e primeiro/último filho
-
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
-
 
-
- -
-
Blocos vázios
-
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
-
 
-
- -

Algumas coisas podem ser observadas:

- - - -

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja Também

- - diff --git a/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
+ +
 
+ +

Margin collapsing ocorre em três casos básicos:

+ +
+
Irmãos adjacentes
+
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
+
+ 
 <p>A margem inferior deste parágrafo é colapsada...</p>
+ <p>... com margem superior deste parágrafo.</p>
+
+
+
Pai e primeiro/último filho
+
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
+
 
+
+ +
+
Blocos vázios
+
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
+
 
+
+ +

Algumas coisas podem ser observadas:

+ + + +

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_colors/color_picker_tool/index.html b/files/pt-br/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..a98aaf9342 --- /dev/null +++ b/files/pt-br/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3241 @@ +--- +title: Seletor de cores +slug: Web/CSS/CSS_Colors/seletor_de_cores +tags: + - CSS + - Cores CSS + - Cores HTML + - Ferramenta para Seleção de Cores CSS + - Ferramenta para Seleção de Cores HTML + - Ferramentas + - Seletor de Cores + - Seletor de Cores CSS + - Seletor de Cores HTML + - cor + - cores +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+  width: 420px;
+  margin: 0;
+  border: 1px solid #DDD;
+  background-color: #FFF;
+  display: table;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.ui-color-picker .picking-area {
+  width: 198px;
+  height: 198px;
+  margin: 5px;
+  border: 1px solid #DDD;
+  position: relative;
+  float: left;
+  display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+  cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+  background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+  background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+  background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+  background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background-color: #F00;
+}
+
+.ui-color-picker .picker {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid #FFF;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+}
+
+.ui-color-picker .picker:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  border: 1px solid #999;
+  border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+  width: 198px;
+  height: 28px;
+  margin: 5px;
+  border: 1px solid #FFF;
+  float: left;
+}
+
+.ui-color-picker .hue {
+  background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+  border: 1px solid #CCC;
+  background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+  width: 100%;
+  height: 100%;
+  background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+  width: 2px;
+  height: 100%;
+  border: 1px solid #777;
+  background-color: #FFF;
+  position: relative;
+  top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+  width: 200px;
+  margin: 5px;
+  float: left;
+}
+
+.ui-color-picker .info * {
+  float: left;
+}
+
+.ui-color-picker .input {
+  width: 64px;
+  margin: 5px 2px;
+  float: left;
+}
+
+.ui-color-picker .input .name {
+  height: 20px;
+  width: 30px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 18px;
+  float: left;
+}
+
+.ui-color-picker .input input {
+  width: 30px;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #DDD;
+  text-align: center;
+  float: right;
+
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+  display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+  display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+  display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+  margin-top: 10px;
+  width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+  width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+  float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+  width: auto;
+  float: right;
+  margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+  display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+  width: 90px;
+  height: 24px;
+  padding: 2px 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+  width: 95px;
+  height: 53px;
+  margin: 5px;
+  margin-top: 10px;
+  border: 1px solid #DDD;
+  background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+  float: left;
+  position: relative;
+}
+
+.ui-color-picker .preview:before {
+  height: 100%;
+  width: 50%;
+  left: 50%;
+  top: 0;
+  content: "";
+  background: #FFF;
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 0, 0, 0.5);
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+  width: 10px;
+  height: 20px;
+  position: relative;
+  border-radius: 5px 0 0 5px;
+  border: 1px solid #DDD;
+  background-color: #EEE;
+  left: -12px;
+  top: -1px;
+  z-index: 1;
+  transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+  background-color: #CCC;
+  cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+  height: 20px;
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.ui-input-slider * {
+  float: left;
+  height: 100%;
+  line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+  margin: 0;
+  padding: 0;
+  width: 50px;
+  text-align: center;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+  width: 90px;
+  padding: 0px 10px 0px 0px;
+  text-align: right;
+  text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+  width: 16px;
+  cursor: pointer;
+  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+  width: 90px;
+  padding: 0 10px 0 0;
+  text-align: right;
+  text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+  width: 25px;
+  background-color: #2C9FC9;
+  border-radius: 5px;
+  color: #FFF;
+  font-weight: bold;
+  line-height: 14px;
+  text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+  background-color: #379B4A;
+  cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+  max-width: 1000px;
+  margin: 0 auto;
+
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+  box-shadow: 0 0 5px 0 #999;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+  width: 10px;
+  height: 10px;
+  background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+[data-resize='both']:hover {
+  cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+  cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+  cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+  display: none;
+}
+
+[data-collapsed='true'] {
+  height: 0 !important;
+}
+
+.block {
+  display: table;
+}
+
+
+/**
+ *   Container
+ */
+#container {
+  width: 100%;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  display: table;
+}
+
+/**
+ *   Picker Zone
+ */
+
+#picker {
+  padding: 10px;
+  width: 980px;
+}
+
+.ui-color-picker {
+  padding: 3px 5px;
+  float: left;
+  border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+  display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+  cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+  width: 375px;
+  height: 114px;
+  max-height: 218px;
+  margin: 0 10px 0 30px;
+  overflow: hidden;
+  position: relative;
+  float: left;
+
+  transition: all 0.2s;
+}
+
+#picker-samples .sample {
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+  border: 1px solid #DDD;
+  position: absolute;
+  float: left;
+  transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+  cursor: pointer;
+  border-color: #BBB;
+  transform: scale(1.15);
+  border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+  border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+  content: "";
+  position: absolute;
+  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+  width: 100%;
+  height: 12px;
+  top: -12px;
+  z-index: 2;
+}
+
+#picker-samples #add-icon {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+  cursor: pointer;
+  border-color: #DDD;
+  box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+  content: "";
+  position: absolute;
+  background-color: #EEE;
+  box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+  width: 70%;
+  height: 16%;
+  top: 42%;
+  left: 15%;
+}
+
+#picker-samples #add-icon:after {
+  width: 16%;
+  height: 70%;
+  top: 15%;
+  left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+  background-color: #DDD;
+  box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ *   Controls
+ */
+
+#controls {
+  width: 110px;
+  padding: 10px;
+  float: right;
+}
+
+#controls #picker-switch {
+  text-align: center;
+  float: left;
+}
+
+#controls .icon {
+  width: 48px;
+  height: 48px;
+  margin: 10px 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: 1px solid #DDD;
+  display: table;
+  float: left;
+}
+
+#controls .icon:hover {
+  cursor: pointer;
+}
+
+#controls .picker-icon {
+  background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+  margin-right: 10px;
+  background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+  background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+  border-color: #CCC;
+  background-position: center right;
+}
+
+#controls .switch {
+  width: 106px;
+  padding: 1px;
+  border: 1px solid #CCC;
+  font-size: 14px;
+  text-align: center;
+  line-height: 24px;
+  overflow: hidden;
+  float: left;
+}
+
+#controls .switch:hover {
+  cursor: pointer;
+}
+
+#controls .switch > * {
+  width: 50%;
+  padding: 2px 0;
+  background-color: #EEE;
+  float: left;
+}
+
+#controls .switch [data-active='true'] {
+  color: #FFF;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-color: #777;
+}
+
+/**
+ *   Trash Can
+ */
+
+#delete {
+  width: 100%;
+  height: 94px;
+  background-color: #DDD;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+
+  text-align: center;
+  color: #777;
+
+  position: relative;
+  float: right;
+}
+
+#delete #trash-can {
+  width: 80%;
+  height: 80%;
+  border: 2px dashed #FFF;
+  border-radius: 5px;
+  background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+  position: absolute;
+  top: 10%;
+  left: 10%;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+  background-color: #999;
+}
+
+/**
+ *   Color Theme
+ */
+
+#color-theme {
+  margin: 0 8px 0 0;
+  border: 1px solid #EEE;
+  display: inline-block;
+  float: right;
+}
+
+#color-theme .box {
+  width: 80px;
+  height: 92px;
+  float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+  width: 360px;
+  float: left;
+}
+
+#color-info .title {
+  width: 100%;
+  padding: 15px;
+  font-size: 18px;
+  text-align: center;
+  background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+  background-repeat:no-repeat;
+  background-position: center left 30%;
+}
+
+#color-info .copy-container {
+  position: absolute;
+  top: -100%;
+}
+
+#color-info .property {
+  min-width: 280px;
+  height: 30px;
+  margin: 10px 0;
+  text-align: center;
+  line-height: 30px;
+}
+
+#color-info .property > * {
+  float: left;
+}
+
+#color-info .property .type {
+  width: 60px;
+  height: 100%;
+  padding: 0 16px 0 0;
+  text-align: right;
+}
+
+#color-info .property .value {
+  width: 200px;
+  height: 100%;
+  padding: 0 10px;
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #777;
+  text-align: center;
+  background-color: #FFF;
+  border: none;
+}
+
+#color-info .property .value:hover {
+  color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+  background-position: center right;
+}
+
+#color-info .property .copy {
+  width: 24px;
+  height: 100%;
+  padding: 0 5px;
+  background-color: #FFF;
+  background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+  background-repeat: no-repeat;
+  background-position: center left;
+  border-left: 1px solid #EEE;
+  text-align: right;
+  float: left;
+}
+
+#color-info .property .copy:hover {
+  background-position: center right;
+}
+
+
+/**
+ *   Color Palette
+ */
+
+#palette {
+  width: 1000px;
+  padding: 10px 0;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+  background-color: #EEE;
+  color: #777;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#color-palette {
+  width: 640px;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #777;
+  float: left;
+}
+
+#color-palette .container {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  overflow: hidden;
+  float: left;
+  transition: all 0.5s;
+}
+
+#color-palette .container > * {
+  float: left;
+}
+
+#color-palette .title {
+  width: 100px;
+  padding: 0 10px;
+  text-align: right;
+  line-height: inherit;
+}
+
+#color-palette .palette {
+  width: 456px;
+  height: 38px;
+  margin: 3px;
+  padding: 3px;
+  display: table;
+  background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+  width: 30px;
+  height: 30px;
+  margin: 3px;
+  position: relative;
+  border: 1px solid #DDD;
+  float: left;
+  transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+  cursor: pointer;
+  border-color: #BBB;
+  transform: scale(1.15);
+  border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+  float: left;
+}
+
+#color-palette .controls > *:hover {
+  cursor: pointer;
+}
+
+#color-palette .controls .lock {
+  width: 24px;
+  height: 24px;
+  margin: 10px;
+  padding: 3px;
+  background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+  /*background-image: url('images/unlocked-hover.png');*/
+  background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+  /*background-image: url('images/locked.png');*/
+  background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+  /*background-image: url('images/lock-hover.png');*/
+  background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+  width: 100%;
+  height: 300px;
+  min-height: 250px;
+  border-top: 1px solid #DDD;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+  position: relative;
+  float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+  text-align: center;
+  font-size: 30px;
+  color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+  content: "Drop colors here to compare";
+  width: 40%;
+  padding: 30px 9% 70px 11%;
+
+  background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+  background-repeat: no-repeat;
+  background-position: left 35px top 60%;
+
+  text-align: right;
+
+  border: 3px dashed rgb(221, 221, 221);
+  border-radius: 15px;
+
+  position: absolute;
+  top: 50px;
+  left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+  content: "adjust, change or modify";
+  width: 40%;
+  font-size: 24px;
+  position: absolute;
+  top: 130px;
+  left: 32%;
+  z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+  background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+  content: "double click to activate";
+  width: 80px;
+  color: #FFF;
+  position: absolute;
+  top: 10%;
+  left: 20%;
+  z-index: 2;
+}
+
+#canvas .sample {
+  width: 100px;
+  height: 100px;
+  min-width: 20px;
+  min-height: 20px;
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+  cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+  content: "";
+  position: absolute;
+  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+  width: 100%;
+  height: 12px;
+  top: -12px;
+  z-index: 2;
+}
+
+#canvas .sample:hover > * {
+  cursor: pointer;
+  display: block !important;
+}
+
+#canvas .sample .resize-handle {
+  display: none;
+}
+
+#canvas .sample .pick {
+  width: 10px;
+  height: 10px;
+  margin: 5px;
+  background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
+#canvas .sample .delete {
+  width: 10px;
+  height: 10px;
+  margin: 5px;
+  background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+  width: 16px;
+  height: 16px;
+  margin: 5px;
+  background: url("images/canvas-controls.png") center left no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+#canvas .toggle-bg:hover {
+  cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+  background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+  background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+  height: 20px;
+  margin: 5px;
+  font-size: 16px;
+  position: absolute;
+  opacity: 0;
+  top: -10000px;
+  left: 0;
+  color: #777;
+  float: left;
+  transition: opacity 1s;
+}
+
+#zindex input {
+  border: 1px solid #DDD;
+  font-size: 16px;
+  color: #777;
+}
+
+#zindex .ui-input-slider-info {
+  width: 60px;
+}
+
+#zindex[data-active='true'] {
+  top: 0;
+  opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+  function getElemById(id) {
+    return document.getElementById(id);
+  }
+
+  var subscribers = [];
+  var pickers = [];
+
+  /**
+   * RGBA Color class
+   *
+   * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+   * @param hue      0-360
+   * @param saturation  0-100
+   * @param value     0-100
+   * @param lightness    0-100
+   */
+
+  function Color(color) {
+
+    if(color instanceof Color === true) {
+      this.copy(color);
+      return;
+    }
+
+    this.r = 0;
+    this.g = 0;
+    this.b = 0;
+    this.a = 1;
+    this.hue = 0;
+    this.saturation = 0;
+    this.value = 0;
+    this.lightness = 0;
+    this.format = 'HSV';
+  }
+
+  function RGBColor(r, g, b) {
+    var color = new Color();
+    color.setRGBA(r, g, b, 1);
+    return color;
+  }
+
+  function RGBAColor(r, g, b, a) {
+    var color = new Color();
+    color.setRGBA(r, g, b, a);
+    return color;
+  }
+
+  function HSVColor(h, s, v) {
+    var color = new Color();
+    color.setHSV(h, s, v);
+    return color;
+  }
+
+  function HSVAColor(h, s, v, a) {
+    var color = new Color();
+    color.setHSV(h, s, v);
+    color.a = a;
+    return color;
+  }
+
+  function HSLColor(h, s, l) {
+    var color = new Color();
+    color.setHSL(h, s, l);
+    return color;
+  }
+
+  function HSLAColor(h, s, l, a) {
+    var color = new Color();
+    color.setHSL(h, s, l);
+    color.a = a;
+    return color;
+  }
+
+  Color.prototype.copy = function copy(obj) {
+    if(obj instanceof Color !== true) {
+      console.log('Typeof parameter not Color');
+      return;
+    }
+
+    this.r = obj.r;
+    this.g = obj.g;
+    this.b = obj.b;
+    this.a = obj.a;
+    this.hue = obj.hue;
+    this.saturation = obj.saturation;
+    this.value = obj.value;
+    this.format = '' + obj.format;
+    this.lightness = obj.lightness;
+  };
+
+  Color.prototype.setFormat = function setFormat(format) {
+    if (format === 'HSV')
+      this.format = 'HSV';
+    if (format === 'HSL')
+      this.format = 'HSL';
+  };
+
+  /*========== Methods to set Color Properties ==========*/
+
+  Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+    return (typeof(value) === 'number' && isNaN(value) === false &&
+      value >= 0 && value <= 255);
+  };
+
+  Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+    if (this.isValidRGBValue(red) === false ||
+      this.isValidRGBValue(green) === false ||
+      this.isValidRGBValue(blue) === false)
+      return;
+
+      this.r = red | 0;
+      this.g = green | 0;
+      this.b = blue | 0;
+
+    if (this.isValidRGBValue(alpha) === true)
+      this.a = alpha | 0;
+  };
+
+  Color.prototype.setByName = function setByName(name, value) {
+    if (name === 'r' || name === 'g' || name === 'b') {
+      if(this.isValidRGBValue(value) === false)
+        return;
+
+      this[name] = value;
+      this.updateHSX();
+    }
+  };
+
+  Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+    this.hue = hue;
+    this.saturation = saturation;
+    this.value = value;
+    this.HSVtoRGB();
+  };
+
+  Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+    this.hue = hue;
+    this.saturation = saturation;
+    this.lightness = lightness;
+    this.HSLtoRGB();
+  };
+
+  Color.prototype.setHue = function setHue(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 359)
+      return;
+    this.hue = value;
+    this.updateRGB();
+  };
+
+  Color.prototype.setSaturation = function setSaturation(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.saturation = value;
+    this.updateRGB();
+  };
+
+  Color.prototype.setValue = function setValue(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.value = value;
+    this.HSVtoRGB();
+  };
+
+  Color.prototype.setLightness = function setLightness(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.lightness = value;
+    this.HSLtoRGB();
+  };
+
+  Color.prototype.setHexa = function setHexa(value) {
+    var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+    if (valid !== true)
+      return;
+
+    if (value[0] === '#')
+      value = value.slice(1, value.length);
+
+    if (value.length === 3)
+      value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+    this.r = parseInt(value.substr(0, 2), 16);
+    this.g = parseInt(value.substr(2, 2), 16);
+    this.b = parseInt(value.substr(4, 2), 16);
+
+    this.alpha  = 1;
+    this.RGBtoHSV();
+  };
+
+  /*========== Conversion Methods ==========*/
+
+  Color.prototype.convertToHSL = function convertToHSL() {
+    if (this.format === 'HSL')
+      return;
+
+    this.setFormat('HSL');
+    this.RGBtoHSL();
+  };
+
+  Color.prototype.convertToHSV = function convertToHSV() {
+    if (this.format === 'HSV')
+      return;
+
+    this.setFormat('HSV');
+    this.RGBtoHSV();
+  };
+
+  /*========== Update Methods ==========*/
+
+  Color.prototype.updateRGB = function updateRGB() {
+    if (this.format === 'HSV') {
+      this.HSVtoRGB();
+      return;
+    }
+
+    if (this.format === 'HSL') {
+      this.HSLtoRGB();
+      return;
+    }
+  };
+
+  Color.prototype.updateHSX = function updateHSX() {
+    if (this.format === 'HSV') {
+      this.RGBtoHSV();
+      return;
+    }
+
+    if (this.format === 'HSL') {
+      this.RGBtoHSL();
+      return;
+    }
+  };
+
+  Color.prototype.HSVtoRGB = function HSVtoRGB() {
+    var sat = this.saturation / 100;
+    var value = this.value / 100;
+    var C = sat * value;
+    var H = this.hue / 60;
+    var X = C * (1 - Math.abs(H % 2 - 1));
+    var m = value - C;
+    var precision = 255;
+
+    C = (C + m) * precision | 0;
+    X = (X + m) * precision | 0;
+    m = m * precision | 0;
+
+    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
+    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
+    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
+    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
+    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
+    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
+  };
+
+  Color.prototype.HSLtoRGB = function HSLtoRGB() {
+    var sat = this.saturation / 100;
+    var light = this.lightness / 100;
+    var C = sat * (1 - Math.abs(2 * light - 1));
+    var H = this.hue / 60;
+    var X = C * (1 - Math.abs(H % 2 - 1));
+    var m = light - C/2;
+    var precision = 255;
+
+    C = (C + m) * precision | 0;
+    X = (X + m) * precision | 0;
+    m = m * precision | 0;
+
+    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
+    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
+    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
+    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
+    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
+    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
+  };
+
+  Color.prototype.RGBtoHSV = function RGBtoHSV() {
+    var red    = this.r / 255;
+    var green  = this.g / 255;
+    var blue  = this.b / 255;
+
+    var cmax = Math.max(red, green, blue);
+    var cmin = Math.min(red, green, blue);
+    var delta = cmax - cmin;
+    var hue = 0;
+    var saturation = 0;
+
+    if (delta) {
+      if (cmax === red ) { hue = ((green - blue) / delta); }
+      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+      if (cmax) saturation = delta / cmax;
+    }
+
+    this.hue = 60 * hue | 0;
+    if (this.hue < 0) this.hue += 360;
+    this.saturation = (saturation * 100) | 0;
+    this.value = (cmax * 100) | 0;
+  };
+
+  Color.prototype.RGBtoHSL = function RGBtoHSL() {
+    var red    = this.r / 255;
+    var green  = this.g / 255;
+    var blue  = this.b / 255;
+
+    var cmax = Math.max(red, green, blue);
+    var cmin = Math.min(red, green, blue);
+    var delta = cmax - cmin;
+    var hue = 0;
+    var saturation = 0;
+    var lightness = (cmax + cmin) / 2;
+    var X = (1 - Math.abs(2 * lightness - 1));
+
+    if (delta) {
+      if (cmax === red ) { hue = ((green - blue) / delta); }
+      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+      if (cmax) saturation = delta / X;
+    }
+
+    this.hue = 60 * hue | 0;
+    if (this.hue < 0) this.hue += 360;
+    this.saturation = (saturation * 100) | 0;
+    this.lightness = (lightness * 100) | 0;
+  };
+
+  /*========== Get Methods ==========*/
+
+  Color.prototype.getHexa = function getHexa() {
+    var r = this.r.toString(16);
+    var g = this.g.toString(16);
+    var b = this.b.toString(16);
+    if (this.r < 16) r = '0' + r;
+    if (this.g < 16) g = '0' + g;
+    if (this.b < 16) b = '0' + b;
+    var value = '#' + r + g + b;
+    return value.toUpperCase();
+  };
+
+  Color.prototype.getRGBA = function getRGBA() {
+
+    var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+    var a = '';
+    var v = '';
+    var x = parseFloat(this.a);
+    if (x !== 1) {
+      a = 'a';
+      v = ', ' + x;
+    }
+
+    var value = 'rgb' + a + rgb + v + ')';
+    return value;
+  };
+
+  Color.prototype.getHSLA = function getHSLA() {
+    if (this.format === 'HSV') {
+      var color = new Color(this);
+      color.setFormat('HSL');
+      color.updateHSX();
+      return color.getHSLA();
+    }
+
+    var a = '';
+    var v = '';
+    var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+    var x = parseFloat(this.a);
+    if (x !== 1) {
+      a = 'a';
+      v = ', ' + x;
+    }
+
+    var value = 'hsl' + a + hsl + v + ')';
+    return value;
+  };
+
+  Color.prototype.getColor = function getColor() {
+    if (this.a | 0 === 1)
+      return this.getHexa();
+    return this.getRGBA();
+  };
+
+  /*=======================================================================*/
+  /*=======================================================================*/
+
+  /*========== Capture Mouse Movement ==========*/
+
+  var setMouseTracking = function setMouseTracking(elem, callback) {
+    elem.addEventListener('mousedown', function(e) {
+      callback(e);
+      document.addEventListener('mousemove', callback);
+    });
+
+    document.addEventListener('mouseup', function(e) {
+      document.removeEventListener('mousemove', callback);
+    });
+  };
+
+  /*====================*/
+  // Color Picker Class
+  /*====================*/
+
+  function ColorPicker(node) {
+    this.color = new Color();
+    this.node = node;
+    this.subscribers = [];
+
+    var type = this.node.getAttribute('data-mode');
+    var topic = this.node.getAttribute('data-topic');
+
+    this.topic = topic;
+    this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+    this.color.setFormat(this.picker_mode);
+
+    this.createPickingArea();
+    this.createHueArea();
+
+    this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+    this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+    this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+    this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+    this.createAlphaArea();
+
+    this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+    this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+    this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+    this.createPreviewBox();
+    this.createChangeModeButton();
+
+    this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+    this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+    this.setColor(this.color);
+    pickers[topic] = this;
+  }
+
+  /*************************************************************************/
+  //        Function for generating the color-picker
+  /*************************************************************************/
+
+  ColorPicker.prototype.createPickingArea = function createPickingArea() {
+    var area = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'picking-area';
+    picker.className = 'picker';
+
+    this.picking_area = area;
+    this.color_picker = picker;
+    setMouseTracking(area, this.updateColor.bind(this));
+
+    area.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createHueArea = function createHueArea() {
+    var area = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'hue';
+    picker.className ='slider-picker';
+
+    this.hue_area = area;
+    this.hue_picker = picker;
+    setMouseTracking(area, this.updateHueSlider.bind(this));
+
+    area.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+    var area = document.createElement('div');
+    var mask = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'alpha';
+    mask.className = 'alpha-mask';
+    picker.className = 'slider-picker';
+
+    this.alpha_area = area;
+    this.alpha_mask = mask;
+    this.alpha_picker = picker;
+    setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+    area.appendChild(mask);
+    mask.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+    var preview_box = document.createElement('div');
+    var preview_color = document.createElement('div');
+
+    preview_box.className = 'preview';
+    preview_color.className = 'preview-color';
+
+    this.preview_color = preview_color;
+
+    preview_box.appendChild(preview_color);
+    this.node.appendChild(preview_box);
+  };
+
+  ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+    var wrapper = document.createElement('div');
+    var input = document.createElement('input');
+    var info = document.createElement('span');
+
+    wrapper.className = 'input';
+    wrapper.setAttribute('data-topic', topic);
+    info.textContent = title;
+    info.className = 'name';
+    input.setAttribute('type', 'text');
+
+    wrapper.appendChild(info);
+    wrapper.appendChild(input);
+    this.node.appendChild(wrapper);
+
+    input.addEventListener('change', onChangeFunc);
+    input.addEventListener('click', function() {
+      this.select();
+    });
+
+    this.subscribe(topic, function(value) {
+      input.value = value;
+    });
+  };
+
+  ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+    var button = document.createElement('div');
+    button.className = 'switch_mode';
+    button.addEventListener('click', function() {
+      if (this.picker_mode === 'HSV')
+        this.setPickerMode('HSL');
+      else
+        this.setPickerMode('HSV');
+
+    }.bind(this));
+
+    this.node.appendChild(button);
+  };
+
+  /*************************************************************************/
+  //          Updates properties of UI elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.updateColor = function updateColor(e) {
+    var x = e.pageX - this.picking_area.offsetLeft;
+    var y = e.pageY - this.picking_area.offsetTop;
+    var picker_offset = 5;
+
+    // width and height should be the same
+    var size = this.picking_area.clientWidth;
+
+    if (x > size) x = size;
+    if (y > size) y = size;
+    if (x < 0) x = 0;
+    if (y < 0) y = 0;
+
+    var value = 100 - (y * 100 / size) | 0;
+    var saturation = x * 100 / size | 0;
+
+    if (this.picker_mode === 'HSV')
+      this.color.setHSV(this.color.hue, saturation, value);
+    if (this.picker_mode === 'HSL')
+      this.color.setHSL(this.color.hue, saturation, value);
+
+    this.color_picker.style.left = x - picker_offset + 'px';
+    this.color_picker.style.top = y - picker_offset + 'px';
+
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('value', value);
+    this.notify('lightness', value);
+    this.notify('saturation', saturation);
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+    var x = e.pageX - this.hue_area.offsetLeft;
+    var width = this.hue_area.clientWidth;
+
+    if (x < 0) x = 0;
+    if (x > width) x = width;
+
+    // TODO 360 => 359
+    var hue = ((359 * x) / width) | 0;
+    // if (hue === 360) hue = 359;
+
+    this.updateSliderPosition(this.hue_picker, x);
+    this.setHue(hue);
+  };
+
+  ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+    var x = e.pageX - this.alpha_area.offsetLeft;
+    var width = this.alpha_area.clientWidth;
+
+    if (x < 0) x = 0;
+    if (x > width) x = width;
+
+    this.color.a = (x / width).toFixed(2);
+
+    this.updateSliderPosition(this.alpha_picker, x);
+    this.updatePreviewColor();
+
+    this.notify('alpha', this.color.a);
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.setHue = function setHue(value) {
+    this.color.setHue(value);
+
+    this.updatePickerBackground();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+    this.notify('hue', this.color.hue);
+
+    notify(this.topic, this.color);
+  };
+
+  // Updates when one of Saturation/Value/Lightness changes
+  ColorPicker.prototype.updateSLV = function updateSLV() {
+    this.updatePickerPosition();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+
+    notify(this.topic, this.color);
+  };
+
+  /*************************************************************************/
+  //        Update positions of various UI elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+    var size = this.picking_area.clientWidth;
+    var value = 0;
+    var offset = 5;
+
+    if (this.picker_mode === 'HSV')
+      value = this.color.value;
+    if (this.picker_mode === 'HSL')
+      value = this.color.lightness;
+
+    var x = (this.color.saturation * size / 100) | 0;
+    var y = size - (value * size / 100) | 0;
+
+    this.color_picker.style.left = x - offset + 'px';
+    this.color_picker.style.top = y - offset + 'px';
+  };
+
+  ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+    elem.style.left = Math.max(pos - 3, -2) + 'px';
+  };
+
+  ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+    var size = this.hue_area.clientWidth;
+    var offset = 1;
+    var pos = (this.color.hue * size / 360 ) | 0;
+    this.hue_picker.style.left = pos - offset + 'px';
+  };
+
+  ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+    var size = this.alpha_area.clientWidth;
+    var offset = 1;
+    var pos = (this.color.a * size) | 0;
+    this.alpha_picker.style.left = pos - offset + 'px';
+  };
+
+  /*************************************************************************/
+  //            Update background colors
+  /*************************************************************************/
+
+  ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+    var nc = new Color(this.color);
+    nc.setHSV(nc.hue, 100, 100);
+    this.picking_area.style.backgroundColor = nc.getHexa();
+  };
+
+  ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+    this.alpha_mask.style.backgroundColor = this.color.getHexa();
+  };
+
+  ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+    this.preview_color.style.backgroundColor = this.color.getColor();
+  };
+
+  /*************************************************************************/
+  //            Update input elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+    var value = parseInt(e.target.value);
+    this.setHue(value);
+    this.updateHuePicker();
+  };
+
+  ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+    var value = parseInt(e.target.value);
+    this.color.setSaturation(value);
+    e.target.value = this.color.saturation;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+    var value = parseInt(e.target.value);
+    this.color.setValue(value);
+    e.target.value = this.color.value;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+    var value = parseInt(e.target.value);
+    this.color.setLightness(value);
+    e.target.value = this.color.lightness;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('r', value);
+    e.target.value = this.color.r;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('g', value);
+    e.target.value = this.color.g;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('b', value);
+    e.target.value = this.color.b;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+    var value = parseFloat(e.target.value);
+
+    if (typeof value === 'number' && isNaN(value) === false &&
+      value >= 0 && value <= 1)
+      this.color.a = value.toFixed(2);
+
+    e.target.value = this.color.a;
+    this.updateAlphaPicker();
+  };
+
+  ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+    var value = e.target.value;
+    this.color.setHexa(value);
+    this.setColor(this.color);
+  };
+
+  /*************************************************************************/
+  //              Internal Pub/Sub
+  /*************************************************************************/
+
+  ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+    this.subscribers[topic] = callback;
+  };
+
+  ColorPicker.prototype.notify = function notify(topic, value) {
+    if (this.subscribers[topic])
+      this.subscribers[topic](value);
+  };
+
+  /*************************************************************************/
+  //              Set Picker Properties
+  /*************************************************************************/
+
+  ColorPicker.prototype.setColor = function setColor(color) {
+    if(color instanceof Color !== true) {
+      console.log('Typeof parameter not Color');
+      return;
+    }
+
+    if (color.format !== this.picker_mode) {
+      color.setFormat(this.picker_mode);
+      color.updateHSX();
+    }
+
+    this.color.copy(color);
+    this.updateHuePicker();
+    this.updatePickerPosition();
+    this.updatePickerBackground();
+    this.updateAlphaPicker();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+
+    this.notify('hue', this.color.hue);
+    this.notify('saturation', this.color.saturation);
+    this.notify('value', this.color.value);
+    this.notify('lightness', this.color.lightness);
+
+    this.notify('alpha', this.color.a);
+    this.notify('hexa', this.color.getHexa());
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+    if (mode !== 'HSV' && mode !== 'HSL')
+      return;
+
+    this.picker_mode = mode;
+    this.node.setAttribute('data-mode', this.picker_mode);
+    this.setColor(this.color);
+  };
+
+  /*************************************************************************/
+  //                UNUSED
+  /*************************************************************************/
+
+  var setPickerMode = function setPickerMode(topic, mode) {
+    if (pickers[topic])
+      pickers[topic].setPickerMode(mode);
+  };
+
+  var setColor = function setColor(topic, color) {
+    if (pickers[topic])
+      pickers[topic].setColor(color);
+  };
+
+  var getColor = function getColor(topic) {
+    if (pickers[topic])
+      return new Color(pickers[topic].color);
+  };
+
+  var subscribe = function subscribe(topic, callback) {
+    if (subscribers[topic] === undefined)
+      subscribers[topic] = [];
+
+    subscribers[topic].push(callback);
+  };
+
+  var unsubscribe = function unsubscribe(callback) {
+    subscribers.indexOf(callback);
+    subscribers.splice(index, 1);
+  };
+
+  var notify = function notify(topic, value) {
+    if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+      return;
+
+    var color = new Color(value);
+    for (var i in subscribers[topic])
+      subscribers[topic][i](color);
+  };
+
+  var init = function init() {
+    var elem = document.querySelectorAll('.ui-color-picker');
+    var size = elem.length;
+    for (var i = 0; i < size; i++)
+      new ColorPicker(elem[i]);
+  };
+
+  return {
+    init : init,
+    Color : Color,
+    RGBColor : RGBColor,
+    RGBAColor : RGBAColor,
+    HSVColor : HSVColor,
+    HSVAColor : HSVAColor,
+    HSLColor : HSLColor,
+    HSLAColor : HSLAColor,
+    setColor : setColor,
+    getColor : getColor,
+    subscribe : subscribe,
+    unsubscribe : unsubscribe,
+    setPickerMode : setPickerMode
+  };
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+  var subscribers = {};
+  var sliders = [];
+
+  var InputComponent = function InputComponent(obj) {
+    var input = document.createElement('input');
+    input.setAttribute('type', 'text');
+    input.style.width = 50 + obj.precision * 10 + 'px';
+
+    input.addEventListener('click', function(e) {
+      this.select();
+    });
+
+    input.addEventListener('change', function(e) {
+      var value = parseFloat(e.target.value);
+
+      if (isNaN(value) === true)
+        setValue(obj.topic, obj.value);
+      else
+        setValue(obj.topic, value);
+    });
+
+    return input;
+  };
+
+  var SliderComponent = function SliderComponent(obj, sign) {
+    var slider = document.createElement('div');
+    var startX = null;
+    var start_value = 0;
+
+    slider.addEventListener("click", function(e) {
+      document.removeEventListener("mousemove", sliderMotion);
+      setValue(obj.topic, obj.value + obj.step * sign);
+    });
+
+    slider.addEventListener("mousedown", function(e) {
+      startX = e.clientX;
+      start_value = obj.value;
+      document.body.style.cursor = "e-resize";
+
+      document.addEventListener("mouseup", slideEnd);
+      document.addEventListener("mousemove", sliderMotion);
+    });
+
+    var slideEnd = function slideEnd(e) {
+      document.removeEventListener("mousemove", sliderMotion);
+      document.body.style.cursor = "auto";
+      slider.style.cursor = "pointer";
+    };
+
+    var sliderMotion = function sliderMotion(e) {
+      slider.style.cursor = "e-resize";
+      var delta = (e.clientX - startX) / obj.sensivity | 0;
+      var value = delta * obj.step + start_value;
+      setValue(obj.topic, value);
+    };
+
+    return slider;
+  };
+
+  var InputSlider = function(node) {
+    var min    = parseFloat(node.getAttribute('data-min'));
+    var max    = parseFloat(node.getAttribute('data-max'));
+    var step  = parseFloat(node.getAttribute('data-step'));
+    var value  = parseFloat(node.getAttribute('data-value'));
+    var topic  = node.getAttribute('data-topic');
+    var unit  = node.getAttribute('data-unit');
+    var name   = node.getAttribute('data-info');
+    var sensivity = node.getAttribute('data-sensivity') | 0;
+    var precision = node.getAttribute('data-precision') | 0;
+
+    this.min = isNaN(min) ? 0 : min;
+    this.max = isNaN(max) ? 100 : max;
+    this.precision = precision >= 0 ? precision : 0;
+    this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+    this.topic = topic;
+    this.node = node;
+    this.unit = unit === null ? '' : unit;
+    this.sensivity = sensivity > 0 ? sensivity : 5;
+    value = isNaN(value) ? this.min : value;
+
+    var input = new InputComponent(this);
+    var slider_left  = new SliderComponent(this, -1);
+    var slider_right = new SliderComponent(this,  1);
+
+    slider_left.className = 'ui-input-slider-left';
+    slider_right.className = 'ui-input-slider-right';
+
+    if (name) {
+      var info = document.createElement('span');
+      info.className = 'ui-input-slider-info';
+      info.textContent = name;
+      node.appendChild(info);
+    }
+
+    node.appendChild(slider_left);
+    node.appendChild(input);
+    node.appendChild(slider_right);
+
+    this.input = input;
+    sliders[topic] = this;
+    setValue(topic, value);
+  };
+
+  InputSlider.prototype.setInputValue = function setInputValue() {
+    this.input.value = this.value.toFixed(this.precision) + this.unit;
+  };
+
+  var setValue = function setValue(topic, value, send_notify) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = parseFloat(value.toFixed(slider.precision));
+
+    if (value > slider.max) value = slider.max;
+    if (value < slider.min)  value = slider.min;
+
+    slider.value = value;
+    slider.node.setAttribute('data-value', value);
+
+    slider.setInputValue();
+
+    if (send_notify === false)
+      return;
+
+    notify.call(slider);
+  };
+
+  var setMax = function setMax(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.max = value;
+    setValue(topic, slider.value);
+  };
+
+  var setMin = function setMin(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.min = value;
+    setValue(topic, slider.value);
+  };
+
+  var setUnit = function setUnit(topic, unit) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.unit = unit;
+    setValue(topic, slider.value);
+  };
+
+  var setStep = function setStep(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.step = parseFloat(value);
+    setValue(topic, slider.value);
+  };
+
+  var setPrecision = function setPrecision(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = value | 0;
+    slider.precision = value;
+
+    var step = parseFloat(slider.step.toFixed(value));
+    if (step === 0)
+      slider.step = 1 / Math.pow(10, value);
+
+    setValue(topic, slider.value);
+  };
+
+  var setSensivity = function setSensivity(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = value | 0;
+
+    slider.sensivity = value > 0 ? value : 5;
+  };
+
+  var getNode =  function getNode(topic) {
+    return sliders[topic].node;
+  };
+
+  var getPrecision =  function getPrecision(topic) {
+    return sliders[topic].precision;
+  };
+
+  var getStep =  function getStep(topic) {
+    return sliders[topic].step;
+  };
+
+  var subscribe = function subscribe(topic, callback) {
+    if (subscribers[topic] === undefined)
+      subscribers[topic] = [];
+    subscribers[topic].push(callback);
+  };
+
+  var unsubscribe = function unsubscribe(topic, callback) {
+    subscribers[topic].indexOf(callback);
+    subscribers[topic].splice(index, 1);
+  };
+
+  var notify = function notify() {
+    if (subscribers[this.topic] === undefined)
+      return;
+    for (var i = 0; i < subscribers[this.topic].length; i++)
+      subscribers[this.topic][i](this.value);
+  };
+
+  var createSlider = function createSlider(topic, label) {
+    var slider = document.createElement('div');
+    slider.className = 'ui-input-slider';
+    slider.setAttribute('data-topic', topic);
+
+    if (label !== undefined)
+      slider.setAttribute('data-info', label);
+
+    new InputSlider(slider);
+    return slider;
+  };
+
+  var init = function init() {
+    var elem = document.querySelectorAll('.ui-input-slider');
+    var size = elem.length;
+    for (var i = 0; i < size; i++)
+      new InputSlider(elem[i]);
+  };
+
+  return {
+    init : init,
+    setMax : setMax,
+    setMin : setMin,
+    setUnit : setUnit,
+    setStep : setStep,
+    getNode : getNode,
+    getStep : getStep,
+    setValue : setValue,
+    subscribe : subscribe,
+    unsubscribe : unsubscribe,
+    setPrecision : setPrecision,
+    setSensivity : setSensivity,
+    getPrecision : getPrecision,
+    createSlider : createSlider,
+  };
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+  ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+  /*========== Get DOM Element By ID ==========*/
+
+  function getElemById(id) {
+    return document.getElementById(id);
+  }
+
+  function allowDropEvent(e) {
+    e.preventDefault();
+  }
+
+  /*========== Make an element resizable relative to it's parent ==========*/
+
+  var UIComponent = (function UIComponent() {
+
+    function makeResizable(elem, axis) {
+      var valueX = 0;
+      var valueY = 0;
+      var action = 0;
+
+      var resizeStart = function resizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.button !== 0)
+          return;
+
+        valueX = e.clientX - elem.clientWidth;
+        valueY = e.clientY - elem.clientHeight;
+
+        document.body.setAttribute('data-resize', axis);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseup', resizeEnd);
+      };
+
+      var mouseMove = function mouseMove(e) {
+        if (action >= 0)
+          elem.style.width = e.clientX - valueX + 'px';
+        if (action <= 0)
+          elem.style.height = e.clientY - valueY + 'px';
+      };
+
+      var resizeEnd = function resizeEnd(e) {
+        if (e.button !== 0)
+          return;
+
+        document.body.removeAttribute('data-resize', axis);
+        document.removeEventListener('mousemove', mouseMove);
+        document.removeEventListener('mouseup', resizeEnd);
+      };
+
+      var handle = document.createElement('div');
+      handle.className = 'resize-handle';
+
+      if (axis === 'width') action = 1;
+      else if (axis === 'height') action = -1;
+      else axis = 'both';
+
+      handle.className = 'resize-handle';
+      handle.setAttribute('data-resize', axis);
+      handle.addEventListener('mousedown', resizeStart);
+      elem.appendChild(handle);
+    };
+
+    /*========== Make an element draggable relative to it's parent ==========*/
+
+    var makeDraggable = function makeDraggable(elem, endFunction) {
+
+      var offsetTop;
+      var offsetLeft;
+
+      elem.setAttribute('data-draggable', 'true');
+
+      var dragStart = function dragStart(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.target.getAttribute('data-draggable') !== 'true' ||
+          e.target !== elem || e.button !== 0)
+          return;
+
+        offsetLeft = e.clientX - elem.offsetLeft;
+        offsetTop = e.clientY - elem.offsetTop;
+
+        document.addEventListener('mousemove', mouseDrag);
+        document.addEventListener('mouseup', dragEnd);
+      };
+
+      var dragEnd = function dragEnd(e) {
+        if (e.button !== 0)
+          return;
+
+        document.removeEventListener('mousemove', mouseDrag);
+        document.removeEventListener('mouseup', dragEnd);
+      };
+
+      var mouseDrag = function mouseDrag(e) {
+        elem.style.left = e.clientX - offsetLeft + 'px';
+        elem.style.top = e.clientY - offsetTop + 'px';
+      };
+
+      elem.addEventListener('mousedown', dragStart, false);
+    };
+
+    return {
+      makeResizable : makeResizable,
+      makeDraggable : makeDraggable
+    };
+
+  })();
+
+  /*========== Color Class ==========*/
+
+  var Color = UIColorPicker.Color;
+  var HSLColor = UIColorPicker.HSLColor;
+
+  /**
+   * ColorPalette
+   */
+  var ColorPalette = (function ColorPalette() {
+
+    var samples = [];
+    var color_palette;
+    var complementary;
+
+    var hideNode = function(node) {
+      node.setAttribute('data-hidden', 'true');
+    };
+
+    var ColorSample = function ColorSample(id) {
+      var node = document.createElement('div');
+      node.className = 'sample';
+
+      this.uid = samples.length;
+      this.node = node;
+      this.color = new Color();
+
+      node.setAttribute('sample-id', this.uid);
+      node.setAttribute('draggable', 'true');
+      node.addEventListener('dragstart', this.dragStart.bind(this));
+      node.addEventListener('click', this.pickColor.bind(this));
+
+      samples.push(this);
+    };
+
+    ColorSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    ColorSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+      this.color.copy(color);
+      var hue = (steps * degree + this.color.hue) % 360;
+      if (hue < 0) hue += 360;
+      this.color.setHue(hue);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+      var saturation = color.saturation + value * steps;
+      if (saturation <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setSaturation(saturation);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+      var lightness = color.lightness + value * steps;
+      if (lightness <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setLightness(lightness);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+      var brightness = color.value + value * steps;
+      if (brightness <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setValue(brightness);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+      var alpha = parseFloat(color.a) + value * steps;
+      if (alpha <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.a = parseFloat(alpha.toFixed(2));
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.pickColor = function pickColor() {
+      UIColorPicker.setColor('picker', this.color);
+    };
+
+    ColorSample.prototype.dragStart = function dragStart(e) {
+      e.dataTransfer.setData('sampleID', this.uid);
+      e.dataTransfer.setData('location', 'palette-samples');
+    };
+
+    var Palette = function Palette(text, size) {
+      this.samples = [];
+      this.locked = false;
+
+      var palette = document.createElement('div');
+      var title = document.createElement('div');
+      var controls = document.createElement('div');
+      var container = document.createElement('div');
+      var lock = document.createElement('div');
+
+      container.className = 'container';
+      title.className = 'title';
+      palette.className = 'palette';
+      controls.className = 'controls';
+      lock.className = 'lock';
+      title.textContent = text;
+
+      controls.appendChild(lock);
+      container.appendChild(title);
+      container.appendChild(controls);
+      container.appendChild(palette);
+
+      lock.addEventListener('click', function () {
+        this.locked = !this.locked;
+        lock.setAttribute('locked-state', this.locked);
+      }.bind(this));
+
+      for(var i = 0; i < size; i++) {
+        var sample = new ColorSample();
+        this.samples.push(sample);
+        palette.appendChild(sample.node);
+      }
+
+      this.container = container;
+      this.title = title;
+    };
+
+    var createHuePalette = function createHuePalette() {
+      var palette = new Palette('Hue', 12);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 12; i++) {
+          palette.samples[i].updateHue(color, 30, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var createSaturationPalette = function createSaturationPalette() {
+      var palette = new Palette('Saturation', 11);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 11; i++) {
+          palette.samples[i].updateSaturation(color, -10, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    /* Brightness or Lightness - depends on the picker mode */
+    var createVLPalette = function createSaturationPalette() {
+      var palette = new Palette('Lightness', 11);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        if(color.format === 'HSL') {
+          palette.title.textContent = 'Lightness';
+          for(var i = 0; i < 11; i++)
+            palette.samples[i].updateLightness(color, -10, i);
+        }
+        else {
+          palette.title.textContent = 'Value';
+          for(var i = 0; i < 11; i++)
+            palette.samples[i].updateBrightness(color, -10, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var isBlankPalette = function isBlankPalette(container, value) {
+      if (value === 0) {
+        container.setAttribute('data-collapsed', 'true');
+        return true;
+      }
+
+      container.removeAttribute('data-collapsed');
+      return false;
+    };
+
+    var createAlphaPalette = function createAlphaPalette() {
+      var palette = new Palette('Alpha', 10);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 10; i++) {
+          palette.samples[i].updateAlpha(color, -0.1, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var getSampleColor = function getSampleColor(id) {
+      if (samples[id] !== undefined && samples[id]!== null)
+        return new Color(samples[id].color);
+    };
+
+    var init = function init() {
+      color_palette = getElemById('color-palette');
+
+      createHuePalette();
+      createSaturationPalette();
+      createVLPalette();
+      createAlphaPalette();
+
+    };
+
+    return {
+      init : init,
+      getSampleColor : getSampleColor
+    };
+
+  })();
+
+  /**
+   * ColorInfo
+   */
+  var ColorInfo = (function ColorInfo() {
+
+    var info_box;
+    var select;
+    var RGBA;
+    var HEXA;
+    var HSLA;
+
+    var updateInfo = function updateInfo(color) {
+      if (color.a | 0 === 1) {
+        RGBA.info.textContent = 'RGB';
+        HSLA.info.textContent = 'HSL';
+      }
+      else {
+        RGBA.info.textContent = 'RGBA';
+        HSLA.info.textContent = 'HSLA';
+      }
+
+      RGBA.value.value = color.getRGBA();
+      HSLA.value.value = color.getHSLA();
+      HEXA.value.value = color.getHexa();
+    };
+
+    var InfoProperty = function InfoProperty(info) {
+
+      var node = document.createElement('div');
+      var title = document.createElement('div');
+      var value = document.createElement('input');
+      var copy = document.createElement('div');
+
+      node.className = 'property';
+      title.className = 'type';
+      value.className = 'value';
+      copy.className = 'copy';
+
+      title.textContent = info;
+      value.setAttribute('type', 'text');
+
+      copy.addEventListener('click', function() {
+        value.select();
+      });
+
+      node.appendChild(title);
+      node.appendChild(value);
+      node.appendChild(copy);
+
+      this.node = node;
+      this.value = value;
+      this.info = title;
+
+      info_box.appendChild(node);
+    };
+
+    var init = function init() {
+
+      info_box = getElemById('color-info');
+
+      RGBA = new InfoProperty('RGBA');
+      HSLA = new InfoProperty('HSLA');
+      HEXA = new InfoProperty('HEXA');
+
+      UIColorPicker.subscribe('picker', updateInfo);
+
+    };
+
+    return {
+      init: init
+    };
+
+  })();
+
+  /**
+   * ColorPicker Samples
+   */
+  var ColorPickerSamples = (function ColorPickerSamples() {
+
+    var samples = [];
+    var nr_samples = 0;
+    var active = null;
+    var container = null;
+    var  samples_per_line = 10;
+    var trash_can = null;
+    var base_color = new HSLColor(0, 50, 100);
+    var add_btn;
+    var add_btn_pos;
+
+    var ColorSample = function ColorSample() {
+      var node = document.createElement('div');
+      node.className = 'sample';
+
+      this.uid = samples.length;
+      this.index = nr_samples++;
+      this.node = node;
+      this.color = new Color(base_color);
+
+      node.setAttribute('sample-id', this.uid);
+      node.setAttribute('draggable', 'true');
+
+      node.addEventListener('dragstart', this.dragStart.bind(this));
+      node.addEventListener('dragover' , allowDropEvent);
+      node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+      this.updatePosition(this.index);
+      this.updateBgColor();
+      samples.push(this);
+    };
+
+    ColorSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    ColorSample.prototype.updatePosition = function updatePosition(index) {
+      this.index = index;
+      this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+      this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+      this.node.style.top  = this.posY + 'px';
+      this.node.style.left = this.posX + 'px';
+    };
+
+    ColorSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.activate = function activate() {
+      UIColorPicker.setColor('picker', this.color);
+      this.node.setAttribute('data-active', 'true');
+    };
+
+    ColorSample.prototype.deactivate = function deactivate() {
+      this.node.removeAttribute('data-active');
+    };
+
+    ColorSample.prototype.dragStart = function dragStart(e) {
+      e.dataTransfer.setData('sampleID', this.uid);
+      e.dataTransfer.setData('location', 'picker-samples');
+    };
+
+    ColorSample.prototype.dragDrop = function dragDrop(e) {
+      e.stopPropagation();
+      this.color = Tool.getSampleColorFrom(e);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.deleteSample = function deleteSample() {
+      container.removeChild(this.node);
+      samples[this.uid] = null;
+      nr_samples--;
+    };
+
+    var updateUI = function updateUI() {
+      updateContainerProp();
+
+      var index = 0;
+      var nr = samples.length;
+      for (var i=0; i < nr; i++)
+        if (samples[i] !== null) {
+          samples[i].updatePosition(index);
+          index++;
+        }
+
+      AddSampleButton.updatePosition(index);
+    };
+
+    var deleteSample = function deleteSample(e) {
+      trash_can.parentElement.setAttribute('drag-state', 'none');
+
+      var location = e.dataTransfer.getData('location');
+      if (location !== 'picker-samples')
+        return;
+
+      var sampleID = e.dataTransfer.getData('sampleID');
+      samples[sampleID].deleteSample();
+      console.log(samples);
+
+      updateUI();
+    };
+
+    var createDropSample = function createDropSample() {
+      var sample = document.createElement('div');
+      sample.id = 'drop-effect-sample';
+      sample.className = 'sample';
+      container.appendChild(sample);
+    };
+
+    var setActivateSample = function setActivateSample(e) {
+      if (e.target.className !== 'sample')
+        return;
+
+      unsetActiveSample(active);
+      Tool.unsetVoidSample();
+      CanvasSamples.unsetActiveSample();
+      active = samples[e.target.getAttribute('sample-id')];
+      active.activate();
+    };
+
+    var unsetActiveSample = function unsetActiveSample() {
+      if (active)
+        active.deactivate();
+      active = null;
+    };
+
+    var getSampleColor = function getSampleColor(id) {
+      if (samples[id] !== undefined && samples[id]!== null)
+        return new Color(samples[id].color);
+    };
+
+    var updateContainerProp = function updateContainerProp() {
+      samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+      var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+      container.style.height = height + 10 + 'px';
+    };
+
+    var AddSampleButton = (function AddSampleButton() {
+      var node;
+      var _index = 0;
+      var _posX;
+      var _posY;
+
+      var updatePosition = function updatePosition(index) {
+        _index = index;
+        _posY = 5 + ((index / samples_per_line) | 0) * 52;
+        _posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+        node.style.top  = _posY + 'px';
+        node.style.left = _posX + 'px';
+      };
+
+      var addButtonClick = function addButtonClick() {
+        var sample = new ColorSample();
+        container.appendChild(sample.node);
+        updatePosition(_index + 1);
+        updateUI();
+      };
+
+      var init = function init() {
+        node = document.createElement('div');
+        var icon = document.createElement('div');
+
+        node.className = 'sample';
+        icon.id = 'add-icon';
+        node.appendChild(icon);
+        node.addEventListener('click', addButtonClick);
+
+        updatePosition(0);
+        container.appendChild(node);
+      };
+
+      return {
+        init : init,
+        updatePosition : updatePosition
+      };
+    })();
+
+    var init = function init() {
+      container = getElemById('picker-samples');
+      trash_can = getElemById('trash-can');
+
+      AddSampleButton.init();
+
+      for (var i=0; i<16; i++) {
+        var sample = new ColorSample();
+        container.appendChild(sample.node);
+      }
+
+      AddSampleButton.updatePosition(samples.length);
+      updateUI();
+
+      active = samples[0];
+      active.activate();
+
+      container.addEventListener('click', setActivateSample);
+
+      trash_can.addEventListener('dragover', allowDropEvent);
+      trash_can.addEventListener('dragenter', function() {
+        this.parentElement.setAttribute('drag-state', 'enter');
+      });
+      trash_can.addEventListener('dragleave', function(e) {
+        this.parentElement.setAttribute('drag-state', 'none');
+      });
+      trash_can.addEventListener('drop', deleteSample);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (active)
+          active.updateColor(color);
+      });
+
+    };
+
+    return {
+      init : init,
+      getSampleColor : getSampleColor,
+      unsetActiveSample : unsetActiveSample
+    };
+
+  })();
+
+  /**
+   * Canvas Samples
+   */
+  var CanvasSamples = (function CanvasSamples() {
+
+    var active = null;
+    var canvas = null;
+    var samples = [];
+    var zindex = null;
+    var tutorial = true;
+
+    var CanvasSample = function CanvasSample(color, posX, posY) {
+
+      var node = document.createElement('div');
+      var pick = document.createElement('div');
+      var delete_btn = document.createElement('div');
+      node.className = 'sample';
+      pick.className = 'pick';
+      delete_btn.className = 'delete';
+
+      this.uid = samples.length;
+      this.node = node;
+      this.color = color;
+      this.updateBgColor();
+      this.zIndex = 1;
+
+      node.style.top = posY - 50 + 'px';
+      node.style.left = posX - 50 + 'px';
+      node.setAttribute('sample-id', this.uid);
+
+      node.appendChild(pick);
+      node.appendChild(delete_btn);
+
+      var activate = function activate() {
+        setActiveSample(this);
+      }.bind(this);
+
+      node.addEventListener('dblclick', activate);
+      pick.addEventListener('click', activate);
+      delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+      UIComponent.makeDraggable(node);
+      UIComponent.makeResizable(node);
+
+      samples.push(this);
+      canvas.appendChild(node);
+      return this;
+    };
+
+    CanvasSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    CanvasSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+      this.zIndex = value;
+      this.node.style.zIndex = value;
+    };
+
+    CanvasSample.prototype.activate = function activate() {
+      this.node.setAttribute('data-active', 'true');
+      zindex.setAttribute('data-active', 'true');
+
+      UIColorPicker.setColor('picker', this.color);
+      InputSliderManager.setValue('z-index', this.zIndex);
+    };
+
+    CanvasSample.prototype.deactivate = function deactivate() {
+      this.node.removeAttribute('data-active');
+      zindex.removeAttribute('data-active');
+    };
+
+    CanvasSample.prototype.deleteSample = function deleteSample() {
+      if (active === this)
+        unsetActiveSample();
+      canvas.removeChild(this.node);
+      samples[this.uid] = null;
+    };
+
+    CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+      this.node.style.top = posY - this.startY + 'px';
+      this.node.style.left = posX - this.startX + 'px';
+    };
+
+    var canvasDropEvent = function canvasDropEvent(e) {
+      var color = Tool.getSampleColorFrom(e);
+
+      if (color) {
+        var offsetX = e.pageX - canvas.offsetLeft;
+        var offsetY = e.pageY - canvas.offsetTop;
+        var sample = new CanvasSample(color, offsetX, offsetY);
+        if (tutorial) {
+          tutorial = false;
+          canvas.removeAttribute('data-tutorial');
+          var info = new CanvasSample(new Color(), 100, 100);
+          info.node.setAttribute('data-tutorial', 'dblclick');
+        }
+      }
+
+    };
+
+    var setActiveSample = function setActiveSample(sample) {
+      ColorPickerSamples.unsetActiveSample();
+      Tool.unsetVoidSample();
+      unsetActiveSample();
+      active = sample;
+      active.activate();
+    };
+
+    var unsetActiveSample = function unsetActiveSample() {
+      if (active)
+        active.deactivate();
+      active = null;
+    };
+
+    var createToggleBgButton = function createToggleBgButton() {
+      var button = document.createElement('div');
+      var state = false;
+      button.className = 'toggle-bg';
+      canvas.appendChild(button);
+
+      button.addEventListener('click', function() {
+        console.log(state);
+        state = !state;
+        canvas.setAttribute('data-bg', state);
+      });
+    };
+
+    var init = function init() {
+      canvas = getElemById('canvas');
+      zindex = getElemById('zindex');
+
+      canvas.addEventListener('dragover', allowDropEvent);
+      canvas.addEventListener('drop', canvasDropEvent);
+
+      createToggleBgButton();
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (active)  active.updateColor(color);
+      });
+
+      InputSliderManager.subscribe('z-index', function (value) {
+        if (active)  active.updateZIndex(value);
+      });
+
+      UIComponent.makeResizable(canvas, 'height');
+    };
+
+    return {
+      init : init,
+      unsetActiveSample : unsetActiveSample
+    };
+
+  })();
+
+  var StateButton = function StateButton(node, state) {
+    this.state = false;
+    this.callback = null;
+
+    node.addEventListener('click', function() {
+      this.state = !this.state;
+      if (typeof this.callback === "function")
+        this.callback(this.state);
+    }.bind(this));
+  };
+
+  StateButton.prototype.set = function set() {
+    this.state = true;
+    if (typeof this.callback === "function")
+      this.callback(this.state);
+  };
+
+  StateButton.prototype.unset = function unset() {
+    this.state = false;
+    if (typeof this.callback === "function")
+      this.callback(this.state);
+  };
+
+  StateButton.prototype.subscribe = function subscribe(func) {
+    this.callback = func;
+  };
+
+
+  /**
+   * Tool
+   */
+  var Tool = (function Tool() {
+
+    var samples = [];
+    var controls = null;
+    var void_sw;
+
+    var createPickerModeSwitch = function createPickerModeSwitch() {
+      var parent = getElemById('controls');
+      var icon = document.createElement('div');
+      var button = document.createElement('div');
+      var hsv = document.createElement('div');
+      var hsl = document.createElement('div');
+      var active = null;
+
+      icon.className = 'icon picker-icon';
+      button.className = 'switch';
+      button.appendChild(hsv);
+      button.appendChild(hsl);
+
+      hsv.textContent = 'HSV';
+      hsl.textContent = 'HSL';
+
+      active = hsl;
+      active.setAttribute('data-active', 'true');
+
+      function switchPickingModeTo(elem) {
+        active.removeAttribute('data-active');
+        active = elem;
+        active.setAttribute('data-active', 'true');
+        UIColorPicker.setPickerMode('picker', active.textContent);
+      };
+
+      var picker_sw = new StateButton(icon);
+      picker_sw.subscribe(function() {
+        if (active === hsv)
+          switchPickingModeTo(hsl);
+        else
+          switchPickingModeTo(hsv);
+      });
+
+      hsv.addEventListener('click', function() {
+        switchPickingModeTo(hsv);
+      });
+      hsl.addEventListener('click', function() {
+        switchPickingModeTo(hsl);
+      });
+
+      parent.appendChild(icon);
+      parent.appendChild(button);
+    };
+
+    var setPickerDragAndDrop = function setPickerDragAndDrop() {
+      var preview = document.querySelector('#picker .preview-color');
+      var picking_area = document.querySelector('#picker .picking-area');
+
+      preview.setAttribute('draggable', 'true');
+      preview.addEventListener('drop', drop);
+      preview.addEventListener('dragstart', dragStart);
+      preview.addEventListener('dragover', allowDropEvent);
+
+      picking_area.addEventListener('drop', drop);
+      picking_area.addEventListener('dragover', allowDropEvent);
+
+      function drop(e) {
+        var color = getSampleColorFrom(e);
+        UIColorPicker.setColor('picker', color);
+      };
+
+      function dragStart(e) {
+        e.dataTransfer.setData('sampleID', 'picker');
+        e.dataTransfer.setData('location', 'picker');
+      };
+    };
+
+    var getSampleColorFrom = function getSampleColorFrom(e) {
+      var sampleID = e.dataTransfer.getData('sampleID');
+      var location = e.dataTransfer.getData('location');
+
+      if (location === 'picker')
+        return UIColorPicker.getColor(sampleID);
+      if (location === 'picker-samples')
+        return ColorPickerSamples.getSampleColor(sampleID);
+      if (location === 'palette-samples')
+        return ColorPalette.getSampleColor(sampleID);
+    };
+
+    var setVoidSwitch = function setVoidSwitch() {
+      var void_sample = getElemById('void-sample');
+      void_sw = new StateButton(void_sample);
+      void_sw.subscribe( function (state) {
+        void_sample.setAttribute('data-active', state);
+        if (state === true) {
+          ColorPickerSamples.unsetActiveSample();
+          CanvasSamples.unsetActiveSample();
+        }
+      });
+    };
+
+    var unsetVoidSample = function unsetVoidSample() {
+      void_sw.unset();
+    };
+
+    var init = function init() {
+      controls = getElemById('controls');
+
+      var color = new Color();
+      color.setHSL(0, 51, 51);
+      UIColorPicker.setColor('picker', color);
+
+      setPickerDragAndDrop();
+      createPickerModeSwitch();
+      setVoidSwitch();
+    };
+
+    return {
+      init : init,
+      unsetVoidSample : unsetVoidSample,
+      getSampleColorFrom : getSampleColorFrom
+    };
+
+  })();
+
+  var init = function init() {
+    UIColorPicker.init();
+    InputSliderManager.init();
+    ColorInfo.init();
+    ColorPalette.init();
+    ColorPickerSamples.init();
+    CanvasSamples.init();
+    Tool.init();
+  };
+
+  return {
+    init : init
+  };
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

+ +

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

+ +

Veja também

+ +

Para mais aplicações de cores, veja:

+ + diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/seletor_de_cores/index.html deleted file mode 100644 index a98aaf9342..0000000000 --- a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html +++ /dev/null @@ -1,3241 +0,0 @@ ---- -title: Seletor de cores -slug: Web/CSS/CSS_Colors/seletor_de_cores -tags: - - CSS - - Cores CSS - - Cores HTML - - Ferramenta para Seleção de Cores CSS - - Ferramenta para Seleção de Cores HTML - - Ferramentas - - Seletor de Cores - - Seletor de Cores CSS - - Seletor de Cores HTML - - cor - - cores -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-  width: 420px;
-  margin: 0;
-  border: 1px solid #DDD;
-  background-color: #FFF;
-  display: table;
-
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.ui-color-picker .picking-area {
-  width: 198px;
-  height: 198px;
-  margin: 5px;
-  border: 1px solid #DDD;
-  position: relative;
-  float: left;
-  display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-  cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-  background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-  background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-  background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-  background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background-color: #F00;
-}
-
-.ui-color-picker .picker {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 1px solid #FFF;
-  position: absolute;
-  top: 45%;
-  left: 45%;
-}
-
-.ui-color-picker .picker:before {
-  width: 8px;
-  height: 8px;
-  content: "";
-  position: absolute;
-  border: 1px solid #999;
-  border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-  width: 198px;
-  height: 28px;
-  margin: 5px;
-  border: 1px solid #FFF;
-  float: left;
-}
-
-.ui-color-picker .hue {
-  background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-  border: 1px solid #CCC;
-  background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-  width: 100%;
-  height: 100%;
-  background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-  width: 2px;
-  height: 100%;
-  border: 1px solid #777;
-  background-color: #FFF;
-  position: relative;
-  top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-  width: 200px;
-  margin: 5px;
-  float: left;
-}
-
-.ui-color-picker .info * {
-  float: left;
-}
-
-.ui-color-picker .input {
-  width: 64px;
-  margin: 5px 2px;
-  float: left;
-}
-
-.ui-color-picker .input .name {
-  height: 20px;
-  width: 30px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 18px;
-  float: left;
-}
-
-.ui-color-picker .input input {
-  width: 30px;
-  height: 18px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid #DDD;
-  text-align: center;
-  float: right;
-
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-  display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-  display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-  display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-  margin-top: 10px;
-  width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-  width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-  float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-  width: auto;
-  float: right;
-  margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-  display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-  width: 90px;
-  height: 24px;
-  padding: 2px 0;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-  width: 95px;
-  height: 53px;
-  margin: 5px;
-  margin-top: 10px;
-  border: 1px solid #DDD;
-  background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-  float: left;
-  position: relative;
-}
-
-.ui-color-picker .preview:before {
-  height: 100%;
-  width: 50%;
-  left: 50%;
-  top: 0;
-  content: "";
-  background: #FFF;
-  position: absolute;
-  z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 0, 0, 0.5);
-  position: absolute;
-  z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-  width: 10px;
-  height: 20px;
-  position: relative;
-  border-radius: 5px 0 0 5px;
-  border: 1px solid #DDD;
-  background-color: #EEE;
-  left: -12px;
-  top: -1px;
-  z-index: 1;
-  transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-  background-color: #CCC;
-  cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-  height: 20px;
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.ui-input-slider * {
-  float: left;
-  height: 100%;
-  line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-  margin: 0;
-  padding: 0;
-  width: 50px;
-  text-align: center;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-  width: 90px;
-  padding: 0px 10px 0px 0px;
-  text-align: right;
-  text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-  width: 16px;
-  cursor: pointer;
-  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-  width: 90px;
-  padding: 0 10px 0 0;
-  text-align: right;
-  text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-  width: 25px;
-  background-color: #2C9FC9;
-  border-radius: 5px;
-  color: #FFF;
-  font-weight: bold;
-  line-height: 14px;
-  text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-  background-color: #379B4A;
-  cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-  max-width: 1000px;
-  margin: 0 auto;
-
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-  box-shadow: 0 0 5px 0 #999;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-  width: 10px;
-  height: 10px;
-  background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-[data-resize='both']:hover {
-  cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-  cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-  cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-  display: none;
-}
-
-[data-collapsed='true'] {
-  height: 0 !important;
-}
-
-.block {
-  display: table;
-}
-
-
-/**
- *   Container
- */
-#container {
-  width: 100%;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  display: table;
-}
-
-/**
- *   Picker Zone
- */
-
-#picker {
-  padding: 10px;
-  width: 980px;
-}
-
-.ui-color-picker {
-  padding: 3px 5px;
-  float: left;
-  border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-  display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-  cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-  width: 375px;
-  height: 114px;
-  max-height: 218px;
-  margin: 0 10px 0 30px;
-  overflow: hidden;
-  position: relative;
-  float: left;
-
-  transition: all 0.2s;
-}
-
-#picker-samples .sample {
-  width: 40px;
-  height: 40px;
-  margin: 5px;
-  border: 1px solid #DDD;
-  position: absolute;
-  float: left;
-  transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-  cursor: pointer;
-  border-color: #BBB;
-  transform: scale(1.15);
-  border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-  border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-  content: "";
-  position: absolute;
-  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-  width: 100%;
-  height: 12px;
-  top: -12px;
-  z-index: 2;
-}
-
-#picker-samples #add-icon {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-  cursor: pointer;
-  border-color: #DDD;
-  box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-  content: "";
-  position: absolute;
-  background-color: #EEE;
-  box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-  width: 70%;
-  height: 16%;
-  top: 42%;
-  left: 15%;
-}
-
-#picker-samples #add-icon:after {
-  width: 16%;
-  height: 70%;
-  top: 15%;
-  left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-  background-color: #DDD;
-  box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- *   Controls
- */
-
-#controls {
-  width: 110px;
-  padding: 10px;
-  float: right;
-}
-
-#controls #picker-switch {
-  text-align: center;
-  float: left;
-}
-
-#controls .icon {
-  width: 48px;
-  height: 48px;
-  margin: 10px 0;
-  background-repeat: no-repeat;
-  background-position: center;
-  border: 1px solid #DDD;
-  display: table;
-  float: left;
-}
-
-#controls .icon:hover {
-  cursor: pointer;
-}
-
-#controls .picker-icon {
-  background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-  margin-right: 10px;
-  background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-  background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-  border-color: #CCC;
-  background-position: center right;
-}
-
-#controls .switch {
-  width: 106px;
-  padding: 1px;
-  border: 1px solid #CCC;
-  font-size: 14px;
-  text-align: center;
-  line-height: 24px;
-  overflow: hidden;
-  float: left;
-}
-
-#controls .switch:hover {
-  cursor: pointer;
-}
-
-#controls .switch > * {
-  width: 50%;
-  padding: 2px 0;
-  background-color: #EEE;
-  float: left;
-}
-
-#controls .switch [data-active='true'] {
-  color: #FFF;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-color: #777;
-}
-
-/**
- *   Trash Can
- */
-
-#delete {
-  width: 100%;
-  height: 94px;
-  background-color: #DDD;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-
-  text-align: center;
-  color: #777;
-
-  position: relative;
-  float: right;
-}
-
-#delete #trash-can {
-  width: 80%;
-  height: 80%;
-  border: 2px dashed #FFF;
-  border-radius: 5px;
-  background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-  position: absolute;
-  top: 10%;
-  left: 10%;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-  background-color: #999;
-}
-
-/**
- *   Color Theme
- */
-
-#color-theme {
-  margin: 0 8px 0 0;
-  border: 1px solid #EEE;
-  display: inline-block;
-  float: right;
-}
-
-#color-theme .box {
-  width: 80px;
-  height: 92px;
-  float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-  width: 360px;
-  float: left;
-}
-
-#color-info .title {
-  width: 100%;
-  padding: 15px;
-  font-size: 18px;
-  text-align: center;
-  background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-  background-repeat:no-repeat;
-  background-position: center left 30%;
-}
-
-#color-info .copy-container {
-  position: absolute;
-  top: -100%;
-}
-
-#color-info .property {
-  min-width: 280px;
-  height: 30px;
-  margin: 10px 0;
-  text-align: center;
-  line-height: 30px;
-}
-
-#color-info .property > * {
-  float: left;
-}
-
-#color-info .property .type {
-  width: 60px;
-  height: 100%;
-  padding: 0 16px 0 0;
-  text-align: right;
-}
-
-#color-info .property .value {
-  width: 200px;
-  height: 100%;
-  padding: 0 10px;
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-  font-size: 16px;
-  color: #777;
-  text-align: center;
-  background-color: #FFF;
-  border: none;
-}
-
-#color-info .property .value:hover {
-  color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-  background-position: center right;
-}
-
-#color-info .property .copy {
-  width: 24px;
-  height: 100%;
-  padding: 0 5px;
-  background-color: #FFF;
-  background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-  background-repeat: no-repeat;
-  background-position: center left;
-  border-left: 1px solid #EEE;
-  text-align: right;
-  float: left;
-}
-
-#color-info .property .copy:hover {
-  background-position: center right;
-}
-
-
-/**
- *   Color Palette
- */
-
-#palette {
-  width: 1000px;
-  padding: 10px 0;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-  background-color: #EEE;
-  color: #777;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-#color-palette {
-  width: 640px;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #777;
-  float: left;
-}
-
-#color-palette .container {
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  overflow: hidden;
-  float: left;
-  transition: all 0.5s;
-}
-
-#color-palette .container > * {
-  float: left;
-}
-
-#color-palette .title {
-  width: 100px;
-  padding: 0 10px;
-  text-align: right;
-  line-height: inherit;
-}
-
-#color-palette .palette {
-  width: 456px;
-  height: 38px;
-  margin: 3px;
-  padding: 3px;
-  display: table;
-  background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-  width: 30px;
-  height: 30px;
-  margin: 3px;
-  position: relative;
-  border: 1px solid #DDD;
-  float: left;
-  transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-  cursor: pointer;
-  border-color: #BBB;
-  transform: scale(1.15);
-  border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-  float: left;
-}
-
-#color-palette .controls > *:hover {
-  cursor: pointer;
-}
-
-#color-palette .controls .lock {
-  width: 24px;
-  height: 24px;
-  margin: 10px;
-  padding: 3px;
-  background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-  background-repeat: no-repeat;
-  background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-  /*background-image: url('images/unlocked-hover.png');*/
-  background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-  /*background-image: url('images/locked.png');*/
-  background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-  /*background-image: url('images/lock-hover.png');*/
-  background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-  width: 100%;
-  height: 300px;
-  min-height: 250px;
-  border-top: 1px solid #DDD;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-  position: relative;
-  float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-  text-align: center;
-  font-size: 30px;
-  color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-  content: "Drop colors here to compare";
-  width: 40%;
-  padding: 30px 9% 70px 11%;
-
-  background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-  background-repeat: no-repeat;
-  background-position: left 35px top 60%;
-
-  text-align: right;
-
-  border: 3px dashed rgb(221, 221, 221);
-  border-radius: 15px;
-
-  position: absolute;
-  top: 50px;
-  left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-  content: "adjust, change or modify";
-  width: 40%;
-  font-size: 24px;
-  position: absolute;
-  top: 130px;
-  left: 32%;
-  z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-  background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-  content: "double click to activate";
-  width: 80px;
-  color: #FFF;
-  position: absolute;
-  top: 10%;
-  left: 20%;
-  z-index: 2;
-}
-
-#canvas .sample {
-  width: 100px;
-  height: 100px;
-  min-width: 20px;
-  min-height: 20px;
-  position: absolute;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-  cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-  content: "";
-  position: absolute;
-  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-  width: 100%;
-  height: 12px;
-  top: -12px;
-  z-index: 2;
-}
-
-#canvas .sample:hover > * {
-  cursor: pointer;
-  display: block !important;
-}
-
-#canvas .sample .resize-handle {
-  display: none;
-}
-
-#canvas .sample .pick {
-  width: 10px;
-  height: 10px;
-  margin: 5px;
-  background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-}
-
-#canvas .sample .delete {
-  width: 10px;
-  height: 10px;
-  margin: 5px;
-  background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-  width: 16px;
-  height: 16px;
-  margin: 5px;
-  background: url("images/canvas-controls.png") center left no-repeat;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-#canvas .toggle-bg:hover {
-  cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-  background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-  background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-  height: 20px;
-  margin: 5px;
-  font-size: 16px;
-  position: absolute;
-  opacity: 0;
-  top: -10000px;
-  left: 0;
-  color: #777;
-  float: left;
-  transition: opacity 1s;
-}
-
-#zindex input {
-  border: 1px solid #DDD;
-  font-size: 16px;
-  color: #777;
-}
-
-#zindex .ui-input-slider-info {
-  width: 60px;
-}
-
-#zindex[data-active='true'] {
-  top: 0;
-  opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-  function getElemById(id) {
-    return document.getElementById(id);
-  }
-
-  var subscribers = [];
-  var pickers = [];
-
-  /**
-   * RGBA Color class
-   *
-   * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-   * @param hue      0-360
-   * @param saturation  0-100
-   * @param value     0-100
-   * @param lightness    0-100
-   */
-
-  function Color(color) {
-
-    if(color instanceof Color === true) {
-      this.copy(color);
-      return;
-    }
-
-    this.r = 0;
-    this.g = 0;
-    this.b = 0;
-    this.a = 1;
-    this.hue = 0;
-    this.saturation = 0;
-    this.value = 0;
-    this.lightness = 0;
-    this.format = 'HSV';
-  }
-
-  function RGBColor(r, g, b) {
-    var color = new Color();
-    color.setRGBA(r, g, b, 1);
-    return color;
-  }
-
-  function RGBAColor(r, g, b, a) {
-    var color = new Color();
-    color.setRGBA(r, g, b, a);
-    return color;
-  }
-
-  function HSVColor(h, s, v) {
-    var color = new Color();
-    color.setHSV(h, s, v);
-    return color;
-  }
-
-  function HSVAColor(h, s, v, a) {
-    var color = new Color();
-    color.setHSV(h, s, v);
-    color.a = a;
-    return color;
-  }
-
-  function HSLColor(h, s, l) {
-    var color = new Color();
-    color.setHSL(h, s, l);
-    return color;
-  }
-
-  function HSLAColor(h, s, l, a) {
-    var color = new Color();
-    color.setHSL(h, s, l);
-    color.a = a;
-    return color;
-  }
-
-  Color.prototype.copy = function copy(obj) {
-    if(obj instanceof Color !== true) {
-      console.log('Typeof parameter not Color');
-      return;
-    }
-
-    this.r = obj.r;
-    this.g = obj.g;
-    this.b = obj.b;
-    this.a = obj.a;
-    this.hue = obj.hue;
-    this.saturation = obj.saturation;
-    this.value = obj.value;
-    this.format = '' + obj.format;
-    this.lightness = obj.lightness;
-  };
-
-  Color.prototype.setFormat = function setFormat(format) {
-    if (format === 'HSV')
-      this.format = 'HSV';
-    if (format === 'HSL')
-      this.format = 'HSL';
-  };
-
-  /*========== Methods to set Color Properties ==========*/
-
-  Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-    return (typeof(value) === 'number' && isNaN(value) === false &&
-      value >= 0 && value <= 255);
-  };
-
-  Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-    if (this.isValidRGBValue(red) === false ||
-      this.isValidRGBValue(green) === false ||
-      this.isValidRGBValue(blue) === false)
-      return;
-
-      this.r = red | 0;
-      this.g = green | 0;
-      this.b = blue | 0;
-
-    if (this.isValidRGBValue(alpha) === true)
-      this.a = alpha | 0;
-  };
-
-  Color.prototype.setByName = function setByName(name, value) {
-    if (name === 'r' || name === 'g' || name === 'b') {
-      if(this.isValidRGBValue(value) === false)
-        return;
-
-      this[name] = value;
-      this.updateHSX();
-    }
-  };
-
-  Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-    this.hue = hue;
-    this.saturation = saturation;
-    this.value = value;
-    this.HSVtoRGB();
-  };
-
-  Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-    this.hue = hue;
-    this.saturation = saturation;
-    this.lightness = lightness;
-    this.HSLtoRGB();
-  };
-
-  Color.prototype.setHue = function setHue(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 359)
-      return;
-    this.hue = value;
-    this.updateRGB();
-  };
-
-  Color.prototype.setSaturation = function setSaturation(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.saturation = value;
-    this.updateRGB();
-  };
-
-  Color.prototype.setValue = function setValue(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.value = value;
-    this.HSVtoRGB();
-  };
-
-  Color.prototype.setLightness = function setLightness(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.lightness = value;
-    this.HSLtoRGB();
-  };
-
-  Color.prototype.setHexa = function setHexa(value) {
-    var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-    if (valid !== true)
-      return;
-
-    if (value[0] === '#')
-      value = value.slice(1, value.length);
-
-    if (value.length === 3)
-      value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-    this.r = parseInt(value.substr(0, 2), 16);
-    this.g = parseInt(value.substr(2, 2), 16);
-    this.b = parseInt(value.substr(4, 2), 16);
-
-    this.alpha  = 1;
-    this.RGBtoHSV();
-  };
-
-  /*========== Conversion Methods ==========*/
-
-  Color.prototype.convertToHSL = function convertToHSL() {
-    if (this.format === 'HSL')
-      return;
-
-    this.setFormat('HSL');
-    this.RGBtoHSL();
-  };
-
-  Color.prototype.convertToHSV = function convertToHSV() {
-    if (this.format === 'HSV')
-      return;
-
-    this.setFormat('HSV');
-    this.RGBtoHSV();
-  };
-
-  /*========== Update Methods ==========*/
-
-  Color.prototype.updateRGB = function updateRGB() {
-    if (this.format === 'HSV') {
-      this.HSVtoRGB();
-      return;
-    }
-
-    if (this.format === 'HSL') {
-      this.HSLtoRGB();
-      return;
-    }
-  };
-
-  Color.prototype.updateHSX = function updateHSX() {
-    if (this.format === 'HSV') {
-      this.RGBtoHSV();
-      return;
-    }
-
-    if (this.format === 'HSL') {
-      this.RGBtoHSL();
-      return;
-    }
-  };
-
-  Color.prototype.HSVtoRGB = function HSVtoRGB() {
-    var sat = this.saturation / 100;
-    var value = this.value / 100;
-    var C = sat * value;
-    var H = this.hue / 60;
-    var X = C * (1 - Math.abs(H % 2 - 1));
-    var m = value - C;
-    var precision = 255;
-
-    C = (C + m) * precision | 0;
-    X = (X + m) * precision | 0;
-    m = m * precision | 0;
-
-    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
-    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
-    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
-    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
-    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
-    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
-  };
-
-  Color.prototype.HSLtoRGB = function HSLtoRGB() {
-    var sat = this.saturation / 100;
-    var light = this.lightness / 100;
-    var C = sat * (1 - Math.abs(2 * light - 1));
-    var H = this.hue / 60;
-    var X = C * (1 - Math.abs(H % 2 - 1));
-    var m = light - C/2;
-    var precision = 255;
-
-    C = (C + m) * precision | 0;
-    X = (X + m) * precision | 0;
-    m = m * precision | 0;
-
-    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
-    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
-    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
-    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
-    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
-    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
-  };
-
-  Color.prototype.RGBtoHSV = function RGBtoHSV() {
-    var red    = this.r / 255;
-    var green  = this.g / 255;
-    var blue  = this.b / 255;
-
-    var cmax = Math.max(red, green, blue);
-    var cmin = Math.min(red, green, blue);
-    var delta = cmax - cmin;
-    var hue = 0;
-    var saturation = 0;
-
-    if (delta) {
-      if (cmax === red ) { hue = ((green - blue) / delta); }
-      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-      if (cmax) saturation = delta / cmax;
-    }
-
-    this.hue = 60 * hue | 0;
-    if (this.hue < 0) this.hue += 360;
-    this.saturation = (saturation * 100) | 0;
-    this.value = (cmax * 100) | 0;
-  };
-
-  Color.prototype.RGBtoHSL = function RGBtoHSL() {
-    var red    = this.r / 255;
-    var green  = this.g / 255;
-    var blue  = this.b / 255;
-
-    var cmax = Math.max(red, green, blue);
-    var cmin = Math.min(red, green, blue);
-    var delta = cmax - cmin;
-    var hue = 0;
-    var saturation = 0;
-    var lightness = (cmax + cmin) / 2;
-    var X = (1 - Math.abs(2 * lightness - 1));
-
-    if (delta) {
-      if (cmax === red ) { hue = ((green - blue) / delta); }
-      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-      if (cmax) saturation = delta / X;
-    }
-
-    this.hue = 60 * hue | 0;
-    if (this.hue < 0) this.hue += 360;
-    this.saturation = (saturation * 100) | 0;
-    this.lightness = (lightness * 100) | 0;
-  };
-
-  /*========== Get Methods ==========*/
-
-  Color.prototype.getHexa = function getHexa() {
-    var r = this.r.toString(16);
-    var g = this.g.toString(16);
-    var b = this.b.toString(16);
-    if (this.r < 16) r = '0' + r;
-    if (this.g < 16) g = '0' + g;
-    if (this.b < 16) b = '0' + b;
-    var value = '#' + r + g + b;
-    return value.toUpperCase();
-  };
-
-  Color.prototype.getRGBA = function getRGBA() {
-
-    var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-    var a = '';
-    var v = '';
-    var x = parseFloat(this.a);
-    if (x !== 1) {
-      a = 'a';
-      v = ', ' + x;
-    }
-
-    var value = 'rgb' + a + rgb + v + ')';
-    return value;
-  };
-
-  Color.prototype.getHSLA = function getHSLA() {
-    if (this.format === 'HSV') {
-      var color = new Color(this);
-      color.setFormat('HSL');
-      color.updateHSX();
-      return color.getHSLA();
-    }
-
-    var a = '';
-    var v = '';
-    var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-    var x = parseFloat(this.a);
-    if (x !== 1) {
-      a = 'a';
-      v = ', ' + x;
-    }
-
-    var value = 'hsl' + a + hsl + v + ')';
-    return value;
-  };
-
-  Color.prototype.getColor = function getColor() {
-    if (this.a | 0 === 1)
-      return this.getHexa();
-    return this.getRGBA();
-  };
-
-  /*=======================================================================*/
-  /*=======================================================================*/
-
-  /*========== Capture Mouse Movement ==========*/
-
-  var setMouseTracking = function setMouseTracking(elem, callback) {
-    elem.addEventListener('mousedown', function(e) {
-      callback(e);
-      document.addEventListener('mousemove', callback);
-    });
-
-    document.addEventListener('mouseup', function(e) {
-      document.removeEventListener('mousemove', callback);
-    });
-  };
-
-  /*====================*/
-  // Color Picker Class
-  /*====================*/
-
-  function ColorPicker(node) {
-    this.color = new Color();
-    this.node = node;
-    this.subscribers = [];
-
-    var type = this.node.getAttribute('data-mode');
-    var topic = this.node.getAttribute('data-topic');
-
-    this.topic = topic;
-    this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-    this.color.setFormat(this.picker_mode);
-
-    this.createPickingArea();
-    this.createHueArea();
-
-    this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-    this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-    this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-    this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-    this.createAlphaArea();
-
-    this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-    this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-    this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-    this.createPreviewBox();
-    this.createChangeModeButton();
-
-    this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-    this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-    this.setColor(this.color);
-    pickers[topic] = this;
-  }
-
-  /*************************************************************************/
-  //        Function for generating the color-picker
-  /*************************************************************************/
-
-  ColorPicker.prototype.createPickingArea = function createPickingArea() {
-    var area = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'picking-area';
-    picker.className = 'picker';
-
-    this.picking_area = area;
-    this.color_picker = picker;
-    setMouseTracking(area, this.updateColor.bind(this));
-
-    area.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createHueArea = function createHueArea() {
-    var area = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'hue';
-    picker.className ='slider-picker';
-
-    this.hue_area = area;
-    this.hue_picker = picker;
-    setMouseTracking(area, this.updateHueSlider.bind(this));
-
-    area.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-    var area = document.createElement('div');
-    var mask = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'alpha';
-    mask.className = 'alpha-mask';
-    picker.className = 'slider-picker';
-
-    this.alpha_area = area;
-    this.alpha_mask = mask;
-    this.alpha_picker = picker;
-    setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-    area.appendChild(mask);
-    mask.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-    var preview_box = document.createElement('div');
-    var preview_color = document.createElement('div');
-
-    preview_box.className = 'preview';
-    preview_color.className = 'preview-color';
-
-    this.preview_color = preview_color;
-
-    preview_box.appendChild(preview_color);
-    this.node.appendChild(preview_box);
-  };
-
-  ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-    var wrapper = document.createElement('div');
-    var input = document.createElement('input');
-    var info = document.createElement('span');
-
-    wrapper.className = 'input';
-    wrapper.setAttribute('data-topic', topic);
-    info.textContent = title;
-    info.className = 'name';
-    input.setAttribute('type', 'text');
-
-    wrapper.appendChild(info);
-    wrapper.appendChild(input);
-    this.node.appendChild(wrapper);
-
-    input.addEventListener('change', onChangeFunc);
-    input.addEventListener('click', function() {
-      this.select();
-    });
-
-    this.subscribe(topic, function(value) {
-      input.value = value;
-    });
-  };
-
-  ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-    var button = document.createElement('div');
-    button.className = 'switch_mode';
-    button.addEventListener('click', function() {
-      if (this.picker_mode === 'HSV')
-        this.setPickerMode('HSL');
-      else
-        this.setPickerMode('HSV');
-
-    }.bind(this));
-
-    this.node.appendChild(button);
-  };
-
-  /*************************************************************************/
-  //          Updates properties of UI elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.updateColor = function updateColor(e) {
-    var x = e.pageX - this.picking_area.offsetLeft;
-    var y = e.pageY - this.picking_area.offsetTop;
-    var picker_offset = 5;
-
-    // width and height should be the same
-    var size = this.picking_area.clientWidth;
-
-    if (x > size) x = size;
-    if (y > size) y = size;
-    if (x < 0) x = 0;
-    if (y < 0) y = 0;
-
-    var value = 100 - (y * 100 / size) | 0;
-    var saturation = x * 100 / size | 0;
-
-    if (this.picker_mode === 'HSV')
-      this.color.setHSV(this.color.hue, saturation, value);
-    if (this.picker_mode === 'HSL')
-      this.color.setHSL(this.color.hue, saturation, value);
-
-    this.color_picker.style.left = x - picker_offset + 'px';
-    this.color_picker.style.top = y - picker_offset + 'px';
-
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('value', value);
-    this.notify('lightness', value);
-    this.notify('saturation', saturation);
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-    var x = e.pageX - this.hue_area.offsetLeft;
-    var width = this.hue_area.clientWidth;
-
-    if (x < 0) x = 0;
-    if (x > width) x = width;
-
-    // TODO 360 => 359
-    var hue = ((359 * x) / width) | 0;
-    // if (hue === 360) hue = 359;
-
-    this.updateSliderPosition(this.hue_picker, x);
-    this.setHue(hue);
-  };
-
-  ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-    var x = e.pageX - this.alpha_area.offsetLeft;
-    var width = this.alpha_area.clientWidth;
-
-    if (x < 0) x = 0;
-    if (x > width) x = width;
-
-    this.color.a = (x / width).toFixed(2);
-
-    this.updateSliderPosition(this.alpha_picker, x);
-    this.updatePreviewColor();
-
-    this.notify('alpha', this.color.a);
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.setHue = function setHue(value) {
-    this.color.setHue(value);
-
-    this.updatePickerBackground();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-    this.notify('hue', this.color.hue);
-
-    notify(this.topic, this.color);
-  };
-
-  // Updates when one of Saturation/Value/Lightness changes
-  ColorPicker.prototype.updateSLV = function updateSLV() {
-    this.updatePickerPosition();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-
-    notify(this.topic, this.color);
-  };
-
-  /*************************************************************************/
-  //        Update positions of various UI elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-    var size = this.picking_area.clientWidth;
-    var value = 0;
-    var offset = 5;
-
-    if (this.picker_mode === 'HSV')
-      value = this.color.value;
-    if (this.picker_mode === 'HSL')
-      value = this.color.lightness;
-
-    var x = (this.color.saturation * size / 100) | 0;
-    var y = size - (value * size / 100) | 0;
-
-    this.color_picker.style.left = x - offset + 'px';
-    this.color_picker.style.top = y - offset + 'px';
-  };
-
-  ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-    elem.style.left = Math.max(pos - 3, -2) + 'px';
-  };
-
-  ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-    var size = this.hue_area.clientWidth;
-    var offset = 1;
-    var pos = (this.color.hue * size / 360 ) | 0;
-    this.hue_picker.style.left = pos - offset + 'px';
-  };
-
-  ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-    var size = this.alpha_area.clientWidth;
-    var offset = 1;
-    var pos = (this.color.a * size) | 0;
-    this.alpha_picker.style.left = pos - offset + 'px';
-  };
-
-  /*************************************************************************/
-  //            Update background colors
-  /*************************************************************************/
-
-  ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-    var nc = new Color(this.color);
-    nc.setHSV(nc.hue, 100, 100);
-    this.picking_area.style.backgroundColor = nc.getHexa();
-  };
-
-  ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-    this.alpha_mask.style.backgroundColor = this.color.getHexa();
-  };
-
-  ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-    this.preview_color.style.backgroundColor = this.color.getColor();
-  };
-
-  /*************************************************************************/
-  //            Update input elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-    var value = parseInt(e.target.value);
-    this.setHue(value);
-    this.updateHuePicker();
-  };
-
-  ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-    var value = parseInt(e.target.value);
-    this.color.setSaturation(value);
-    e.target.value = this.color.saturation;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-    var value = parseInt(e.target.value);
-    this.color.setValue(value);
-    e.target.value = this.color.value;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-    var value = parseInt(e.target.value);
-    this.color.setLightness(value);
-    e.target.value = this.color.lightness;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('r', value);
-    e.target.value = this.color.r;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('g', value);
-    e.target.value = this.color.g;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('b', value);
-    e.target.value = this.color.b;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-    var value = parseFloat(e.target.value);
-
-    if (typeof value === 'number' && isNaN(value) === false &&
-      value >= 0 && value <= 1)
-      this.color.a = value.toFixed(2);
-
-    e.target.value = this.color.a;
-    this.updateAlphaPicker();
-  };
-
-  ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-    var value = e.target.value;
-    this.color.setHexa(value);
-    this.setColor(this.color);
-  };
-
-  /*************************************************************************/
-  //              Internal Pub/Sub
-  /*************************************************************************/
-
-  ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-    this.subscribers[topic] = callback;
-  };
-
-  ColorPicker.prototype.notify = function notify(topic, value) {
-    if (this.subscribers[topic])
-      this.subscribers[topic](value);
-  };
-
-  /*************************************************************************/
-  //              Set Picker Properties
-  /*************************************************************************/
-
-  ColorPicker.prototype.setColor = function setColor(color) {
-    if(color instanceof Color !== true) {
-      console.log('Typeof parameter not Color');
-      return;
-    }
-
-    if (color.format !== this.picker_mode) {
-      color.setFormat(this.picker_mode);
-      color.updateHSX();
-    }
-
-    this.color.copy(color);
-    this.updateHuePicker();
-    this.updatePickerPosition();
-    this.updatePickerBackground();
-    this.updateAlphaPicker();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-
-    this.notify('hue', this.color.hue);
-    this.notify('saturation', this.color.saturation);
-    this.notify('value', this.color.value);
-    this.notify('lightness', this.color.lightness);
-
-    this.notify('alpha', this.color.a);
-    this.notify('hexa', this.color.getHexa());
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-    if (mode !== 'HSV' && mode !== 'HSL')
-      return;
-
-    this.picker_mode = mode;
-    this.node.setAttribute('data-mode', this.picker_mode);
-    this.setColor(this.color);
-  };
-
-  /*************************************************************************/
-  //                UNUSED
-  /*************************************************************************/
-
-  var setPickerMode = function setPickerMode(topic, mode) {
-    if (pickers[topic])
-      pickers[topic].setPickerMode(mode);
-  };
-
-  var setColor = function setColor(topic, color) {
-    if (pickers[topic])
-      pickers[topic].setColor(color);
-  };
-
-  var getColor = function getColor(topic) {
-    if (pickers[topic])
-      return new Color(pickers[topic].color);
-  };
-
-  var subscribe = function subscribe(topic, callback) {
-    if (subscribers[topic] === undefined)
-      subscribers[topic] = [];
-
-    subscribers[topic].push(callback);
-  };
-
-  var unsubscribe = function unsubscribe(callback) {
-    subscribers.indexOf(callback);
-    subscribers.splice(index, 1);
-  };
-
-  var notify = function notify(topic, value) {
-    if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-      return;
-
-    var color = new Color(value);
-    for (var i in subscribers[topic])
-      subscribers[topic][i](color);
-  };
-
-  var init = function init() {
-    var elem = document.querySelectorAll('.ui-color-picker');
-    var size = elem.length;
-    for (var i = 0; i < size; i++)
-      new ColorPicker(elem[i]);
-  };
-
-  return {
-    init : init,
-    Color : Color,
-    RGBColor : RGBColor,
-    RGBAColor : RGBAColor,
-    HSVColor : HSVColor,
-    HSVAColor : HSVAColor,
-    HSLColor : HSLColor,
-    HSLAColor : HSLAColor,
-    setColor : setColor,
-    getColor : getColor,
-    subscribe : subscribe,
-    unsubscribe : unsubscribe,
-    setPickerMode : setPickerMode
-  };
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-  var subscribers = {};
-  var sliders = [];
-
-  var InputComponent = function InputComponent(obj) {
-    var input = document.createElement('input');
-    input.setAttribute('type', 'text');
-    input.style.width = 50 + obj.precision * 10 + 'px';
-
-    input.addEventListener('click', function(e) {
-      this.select();
-    });
-
-    input.addEventListener('change', function(e) {
-      var value = parseFloat(e.target.value);
-
-      if (isNaN(value) === true)
-        setValue(obj.topic, obj.value);
-      else
-        setValue(obj.topic, value);
-    });
-
-    return input;
-  };
-
-  var SliderComponent = function SliderComponent(obj, sign) {
-    var slider = document.createElement('div');
-    var startX = null;
-    var start_value = 0;
-
-    slider.addEventListener("click", function(e) {
-      document.removeEventListener("mousemove", sliderMotion);
-      setValue(obj.topic, obj.value + obj.step * sign);
-    });
-
-    slider.addEventListener("mousedown", function(e) {
-      startX = e.clientX;
-      start_value = obj.value;
-      document.body.style.cursor = "e-resize";
-
-      document.addEventListener("mouseup", slideEnd);
-      document.addEventListener("mousemove", sliderMotion);
-    });
-
-    var slideEnd = function slideEnd(e) {
-      document.removeEventListener("mousemove", sliderMotion);
-      document.body.style.cursor = "auto";
-      slider.style.cursor = "pointer";
-    };
-
-    var sliderMotion = function sliderMotion(e) {
-      slider.style.cursor = "e-resize";
-      var delta = (e.clientX - startX) / obj.sensivity | 0;
-      var value = delta * obj.step + start_value;
-      setValue(obj.topic, value);
-    };
-
-    return slider;
-  };
-
-  var InputSlider = function(node) {
-    var min    = parseFloat(node.getAttribute('data-min'));
-    var max    = parseFloat(node.getAttribute('data-max'));
-    var step  = parseFloat(node.getAttribute('data-step'));
-    var value  = parseFloat(node.getAttribute('data-value'));
-    var topic  = node.getAttribute('data-topic');
-    var unit  = node.getAttribute('data-unit');
-    var name   = node.getAttribute('data-info');
-    var sensivity = node.getAttribute('data-sensivity') | 0;
-    var precision = node.getAttribute('data-precision') | 0;
-
-    this.min = isNaN(min) ? 0 : min;
-    this.max = isNaN(max) ? 100 : max;
-    this.precision = precision >= 0 ? precision : 0;
-    this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-    this.topic = topic;
-    this.node = node;
-    this.unit = unit === null ? '' : unit;
-    this.sensivity = sensivity > 0 ? sensivity : 5;
-    value = isNaN(value) ? this.min : value;
-
-    var input = new InputComponent(this);
-    var slider_left  = new SliderComponent(this, -1);
-    var slider_right = new SliderComponent(this,  1);
-
-    slider_left.className = 'ui-input-slider-left';
-    slider_right.className = 'ui-input-slider-right';
-
-    if (name) {
-      var info = document.createElement('span');
-      info.className = 'ui-input-slider-info';
-      info.textContent = name;
-      node.appendChild(info);
-    }
-
-    node.appendChild(slider_left);
-    node.appendChild(input);
-    node.appendChild(slider_right);
-
-    this.input = input;
-    sliders[topic] = this;
-    setValue(topic, value);
-  };
-
-  InputSlider.prototype.setInputValue = function setInputValue() {
-    this.input.value = this.value.toFixed(this.precision) + this.unit;
-  };
-
-  var setValue = function setValue(topic, value, send_notify) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = parseFloat(value.toFixed(slider.precision));
-
-    if (value > slider.max) value = slider.max;
-    if (value < slider.min)  value = slider.min;
-
-    slider.value = value;
-    slider.node.setAttribute('data-value', value);
-
-    slider.setInputValue();
-
-    if (send_notify === false)
-      return;
-
-    notify.call(slider);
-  };
-
-  var setMax = function setMax(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.max = value;
-    setValue(topic, slider.value);
-  };
-
-  var setMin = function setMin(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.min = value;
-    setValue(topic, slider.value);
-  };
-
-  var setUnit = function setUnit(topic, unit) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.unit = unit;
-    setValue(topic, slider.value);
-  };
-
-  var setStep = function setStep(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.step = parseFloat(value);
-    setValue(topic, slider.value);
-  };
-
-  var setPrecision = function setPrecision(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = value | 0;
-    slider.precision = value;
-
-    var step = parseFloat(slider.step.toFixed(value));
-    if (step === 0)
-      slider.step = 1 / Math.pow(10, value);
-
-    setValue(topic, slider.value);
-  };
-
-  var setSensivity = function setSensivity(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = value | 0;
-
-    slider.sensivity = value > 0 ? value : 5;
-  };
-
-  var getNode =  function getNode(topic) {
-    return sliders[topic].node;
-  };
-
-  var getPrecision =  function getPrecision(topic) {
-    return sliders[topic].precision;
-  };
-
-  var getStep =  function getStep(topic) {
-    return sliders[topic].step;
-  };
-
-  var subscribe = function subscribe(topic, callback) {
-    if (subscribers[topic] === undefined)
-      subscribers[topic] = [];
-    subscribers[topic].push(callback);
-  };
-
-  var unsubscribe = function unsubscribe(topic, callback) {
-    subscribers[topic].indexOf(callback);
-    subscribers[topic].splice(index, 1);
-  };
-
-  var notify = function notify() {
-    if (subscribers[this.topic] === undefined)
-      return;
-    for (var i = 0; i < subscribers[this.topic].length; i++)
-      subscribers[this.topic][i](this.value);
-  };
-
-  var createSlider = function createSlider(topic, label) {
-    var slider = document.createElement('div');
-    slider.className = 'ui-input-slider';
-    slider.setAttribute('data-topic', topic);
-
-    if (label !== undefined)
-      slider.setAttribute('data-info', label);
-
-    new InputSlider(slider);
-    return slider;
-  };
-
-  var init = function init() {
-    var elem = document.querySelectorAll('.ui-input-slider');
-    var size = elem.length;
-    for (var i = 0; i < size; i++)
-      new InputSlider(elem[i]);
-  };
-
-  return {
-    init : init,
-    setMax : setMax,
-    setMin : setMin,
-    setUnit : setUnit,
-    setStep : setStep,
-    getNode : getNode,
-    getStep : getStep,
-    setValue : setValue,
-    subscribe : subscribe,
-    unsubscribe : unsubscribe,
-    setPrecision : setPrecision,
-    setSensivity : setSensivity,
-    getPrecision : getPrecision,
-    createSlider : createSlider,
-  };
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-  ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-  /*========== Get DOM Element By ID ==========*/
-
-  function getElemById(id) {
-    return document.getElementById(id);
-  }
-
-  function allowDropEvent(e) {
-    e.preventDefault();
-  }
-
-  /*========== Make an element resizable relative to it's parent ==========*/
-
-  var UIComponent = (function UIComponent() {
-
-    function makeResizable(elem, axis) {
-      var valueX = 0;
-      var valueY = 0;
-      var action = 0;
-
-      var resizeStart = function resizeStart(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        if (e.button !== 0)
-          return;
-
-        valueX = e.clientX - elem.clientWidth;
-        valueY = e.clientY - elem.clientHeight;
-
-        document.body.setAttribute('data-resize', axis);
-        document.addEventListener('mousemove', mouseMove);
-        document.addEventListener('mouseup', resizeEnd);
-      };
-
-      var mouseMove = function mouseMove(e) {
-        if (action >= 0)
-          elem.style.width = e.clientX - valueX + 'px';
-        if (action <= 0)
-          elem.style.height = e.clientY - valueY + 'px';
-      };
-
-      var resizeEnd = function resizeEnd(e) {
-        if (e.button !== 0)
-          return;
-
-        document.body.removeAttribute('data-resize', axis);
-        document.removeEventListener('mousemove', mouseMove);
-        document.removeEventListener('mouseup', resizeEnd);
-      };
-
-      var handle = document.createElement('div');
-      handle.className = 'resize-handle';
-
-      if (axis === 'width') action = 1;
-      else if (axis === 'height') action = -1;
-      else axis = 'both';
-
-      handle.className = 'resize-handle';
-      handle.setAttribute('data-resize', axis);
-      handle.addEventListener('mousedown', resizeStart);
-      elem.appendChild(handle);
-    };
-
-    /*========== Make an element draggable relative to it's parent ==========*/
-
-    var makeDraggable = function makeDraggable(elem, endFunction) {
-
-      var offsetTop;
-      var offsetLeft;
-
-      elem.setAttribute('data-draggable', 'true');
-
-      var dragStart = function dragStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (e.target.getAttribute('data-draggable') !== 'true' ||
-          e.target !== elem || e.button !== 0)
-          return;
-
-        offsetLeft = e.clientX - elem.offsetLeft;
-        offsetTop = e.clientY - elem.offsetTop;
-
-        document.addEventListener('mousemove', mouseDrag);
-        document.addEventListener('mouseup', dragEnd);
-      };
-
-      var dragEnd = function dragEnd(e) {
-        if (e.button !== 0)
-          return;
-
-        document.removeEventListener('mousemove', mouseDrag);
-        document.removeEventListener('mouseup', dragEnd);
-      };
-
-      var mouseDrag = function mouseDrag(e) {
-        elem.style.left = e.clientX - offsetLeft + 'px';
-        elem.style.top = e.clientY - offsetTop + 'px';
-      };
-
-      elem.addEventListener('mousedown', dragStart, false);
-    };
-
-    return {
-      makeResizable : makeResizable,
-      makeDraggable : makeDraggable
-    };
-
-  })();
-
-  /*========== Color Class ==========*/
-
-  var Color = UIColorPicker.Color;
-  var HSLColor = UIColorPicker.HSLColor;
-
-  /**
-   * ColorPalette
-   */
-  var ColorPalette = (function ColorPalette() {
-
-    var samples = [];
-    var color_palette;
-    var complementary;
-
-    var hideNode = function(node) {
-      node.setAttribute('data-hidden', 'true');
-    };
-
-    var ColorSample = function ColorSample(id) {
-      var node = document.createElement('div');
-      node.className = 'sample';
-
-      this.uid = samples.length;
-      this.node = node;
-      this.color = new Color();
-
-      node.setAttribute('sample-id', this.uid);
-      node.setAttribute('draggable', 'true');
-      node.addEventListener('dragstart', this.dragStart.bind(this));
-      node.addEventListener('click', this.pickColor.bind(this));
-
-      samples.push(this);
-    };
-
-    ColorSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    ColorSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-      this.color.copy(color);
-      var hue = (steps * degree + this.color.hue) % 360;
-      if (hue < 0) hue += 360;
-      this.color.setHue(hue);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-      var saturation = color.saturation + value * steps;
-      if (saturation <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setSaturation(saturation);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-      var lightness = color.lightness + value * steps;
-      if (lightness <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setLightness(lightness);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-      var brightness = color.value + value * steps;
-      if (brightness <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setValue(brightness);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-      var alpha = parseFloat(color.a) + value * steps;
-      if (alpha <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.a = parseFloat(alpha.toFixed(2));
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.pickColor = function pickColor() {
-      UIColorPicker.setColor('picker', this.color);
-    };
-
-    ColorSample.prototype.dragStart = function dragStart(e) {
-      e.dataTransfer.setData('sampleID', this.uid);
-      e.dataTransfer.setData('location', 'palette-samples');
-    };
-
-    var Palette = function Palette(text, size) {
-      this.samples = [];
-      this.locked = false;
-
-      var palette = document.createElement('div');
-      var title = document.createElement('div');
-      var controls = document.createElement('div');
-      var container = document.createElement('div');
-      var lock = document.createElement('div');
-
-      container.className = 'container';
-      title.className = 'title';
-      palette.className = 'palette';
-      controls.className = 'controls';
-      lock.className = 'lock';
-      title.textContent = text;
-
-      controls.appendChild(lock);
-      container.appendChild(title);
-      container.appendChild(controls);
-      container.appendChild(palette);
-
-      lock.addEventListener('click', function () {
-        this.locked = !this.locked;
-        lock.setAttribute('locked-state', this.locked);
-      }.bind(this));
-
-      for(var i = 0; i < size; i++) {
-        var sample = new ColorSample();
-        this.samples.push(sample);
-        palette.appendChild(sample.node);
-      }
-
-      this.container = container;
-      this.title = title;
-    };
-
-    var createHuePalette = function createHuePalette() {
-      var palette = new Palette('Hue', 12);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 12; i++) {
-          palette.samples[i].updateHue(color, 30, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var createSaturationPalette = function createSaturationPalette() {
-      var palette = new Palette('Saturation', 11);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 11; i++) {
-          palette.samples[i].updateSaturation(color, -10, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    /* Brightness or Lightness - depends on the picker mode */
-    var createVLPalette = function createSaturationPalette() {
-      var palette = new Palette('Lightness', 11);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        if(color.format === 'HSL') {
-          palette.title.textContent = 'Lightness';
-          for(var i = 0; i < 11; i++)
-            palette.samples[i].updateLightness(color, -10, i);
-        }
-        else {
-          palette.title.textContent = 'Value';
-          for(var i = 0; i < 11; i++)
-            palette.samples[i].updateBrightness(color, -10, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var isBlankPalette = function isBlankPalette(container, value) {
-      if (value === 0) {
-        container.setAttribute('data-collapsed', 'true');
-        return true;
-      }
-
-      container.removeAttribute('data-collapsed');
-      return false;
-    };
-
-    var createAlphaPalette = function createAlphaPalette() {
-      var palette = new Palette('Alpha', 10);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 10; i++) {
-          palette.samples[i].updateAlpha(color, -0.1, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var getSampleColor = function getSampleColor(id) {
-      if (samples[id] !== undefined && samples[id]!== null)
-        return new Color(samples[id].color);
-    };
-
-    var init = function init() {
-      color_palette = getElemById('color-palette');
-
-      createHuePalette();
-      createSaturationPalette();
-      createVLPalette();
-      createAlphaPalette();
-
-    };
-
-    return {
-      init : init,
-      getSampleColor : getSampleColor
-    };
-
-  })();
-
-  /**
-   * ColorInfo
-   */
-  var ColorInfo = (function ColorInfo() {
-
-    var info_box;
-    var select;
-    var RGBA;
-    var HEXA;
-    var HSLA;
-
-    var updateInfo = function updateInfo(color) {
-      if (color.a | 0 === 1) {
-        RGBA.info.textContent = 'RGB';
-        HSLA.info.textContent = 'HSL';
-      }
-      else {
-        RGBA.info.textContent = 'RGBA';
-        HSLA.info.textContent = 'HSLA';
-      }
-
-      RGBA.value.value = color.getRGBA();
-      HSLA.value.value = color.getHSLA();
-      HEXA.value.value = color.getHexa();
-    };
-
-    var InfoProperty = function InfoProperty(info) {
-
-      var node = document.createElement('div');
-      var title = document.createElement('div');
-      var value = document.createElement('input');
-      var copy = document.createElement('div');
-
-      node.className = 'property';
-      title.className = 'type';
-      value.className = 'value';
-      copy.className = 'copy';
-
-      title.textContent = info;
-      value.setAttribute('type', 'text');
-
-      copy.addEventListener('click', function() {
-        value.select();
-      });
-
-      node.appendChild(title);
-      node.appendChild(value);
-      node.appendChild(copy);
-
-      this.node = node;
-      this.value = value;
-      this.info = title;
-
-      info_box.appendChild(node);
-    };
-
-    var init = function init() {
-
-      info_box = getElemById('color-info');
-
-      RGBA = new InfoProperty('RGBA');
-      HSLA = new InfoProperty('HSLA');
-      HEXA = new InfoProperty('HEXA');
-
-      UIColorPicker.subscribe('picker', updateInfo);
-
-    };
-
-    return {
-      init: init
-    };
-
-  })();
-
-  /**
-   * ColorPicker Samples
-   */
-  var ColorPickerSamples = (function ColorPickerSamples() {
-
-    var samples = [];
-    var nr_samples = 0;
-    var active = null;
-    var container = null;
-    var  samples_per_line = 10;
-    var trash_can = null;
-    var base_color = new HSLColor(0, 50, 100);
-    var add_btn;
-    var add_btn_pos;
-
-    var ColorSample = function ColorSample() {
-      var node = document.createElement('div');
-      node.className = 'sample';
-
-      this.uid = samples.length;
-      this.index = nr_samples++;
-      this.node = node;
-      this.color = new Color(base_color);
-
-      node.setAttribute('sample-id', this.uid);
-      node.setAttribute('draggable', 'true');
-
-      node.addEventListener('dragstart', this.dragStart.bind(this));
-      node.addEventListener('dragover' , allowDropEvent);
-      node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-      this.updatePosition(this.index);
-      this.updateBgColor();
-      samples.push(this);
-    };
-
-    ColorSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    ColorSample.prototype.updatePosition = function updatePosition(index) {
-      this.index = index;
-      this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-      this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-      this.node.style.top  = this.posY + 'px';
-      this.node.style.left = this.posX + 'px';
-    };
-
-    ColorSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.activate = function activate() {
-      UIColorPicker.setColor('picker', this.color);
-      this.node.setAttribute('data-active', 'true');
-    };
-
-    ColorSample.prototype.deactivate = function deactivate() {
-      this.node.removeAttribute('data-active');
-    };
-
-    ColorSample.prototype.dragStart = function dragStart(e) {
-      e.dataTransfer.setData('sampleID', this.uid);
-      e.dataTransfer.setData('location', 'picker-samples');
-    };
-
-    ColorSample.prototype.dragDrop = function dragDrop(e) {
-      e.stopPropagation();
-      this.color = Tool.getSampleColorFrom(e);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.deleteSample = function deleteSample() {
-      container.removeChild(this.node);
-      samples[this.uid] = null;
-      nr_samples--;
-    };
-
-    var updateUI = function updateUI() {
-      updateContainerProp();
-
-      var index = 0;
-      var nr = samples.length;
-      for (var i=0; i < nr; i++)
-        if (samples[i] !== null) {
-          samples[i].updatePosition(index);
-          index++;
-        }
-
-      AddSampleButton.updatePosition(index);
-    };
-
-    var deleteSample = function deleteSample(e) {
-      trash_can.parentElement.setAttribute('drag-state', 'none');
-
-      var location = e.dataTransfer.getData('location');
-      if (location !== 'picker-samples')
-        return;
-
-      var sampleID = e.dataTransfer.getData('sampleID');
-      samples[sampleID].deleteSample();
-      console.log(samples);
-
-      updateUI();
-    };
-
-    var createDropSample = function createDropSample() {
-      var sample = document.createElement('div');
-      sample.id = 'drop-effect-sample';
-      sample.className = 'sample';
-      container.appendChild(sample);
-    };
-
-    var setActivateSample = function setActivateSample(e) {
-      if (e.target.className !== 'sample')
-        return;
-
-      unsetActiveSample(active);
-      Tool.unsetVoidSample();
-      CanvasSamples.unsetActiveSample();
-      active = samples[e.target.getAttribute('sample-id')];
-      active.activate();
-    };
-
-    var unsetActiveSample = function unsetActiveSample() {
-      if (active)
-        active.deactivate();
-      active = null;
-    };
-
-    var getSampleColor = function getSampleColor(id) {
-      if (samples[id] !== undefined && samples[id]!== null)
-        return new Color(samples[id].color);
-    };
-
-    var updateContainerProp = function updateContainerProp() {
-      samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-      var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-      container.style.height = height + 10 + 'px';
-    };
-
-    var AddSampleButton = (function AddSampleButton() {
-      var node;
-      var _index = 0;
-      var _posX;
-      var _posY;
-
-      var updatePosition = function updatePosition(index) {
-        _index = index;
-        _posY = 5 + ((index / samples_per_line) | 0) * 52;
-        _posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-        node.style.top  = _posY + 'px';
-        node.style.left = _posX + 'px';
-      };
-
-      var addButtonClick = function addButtonClick() {
-        var sample = new ColorSample();
-        container.appendChild(sample.node);
-        updatePosition(_index + 1);
-        updateUI();
-      };
-
-      var init = function init() {
-        node = document.createElement('div');
-        var icon = document.createElement('div');
-
-        node.className = 'sample';
-        icon.id = 'add-icon';
-        node.appendChild(icon);
-        node.addEventListener('click', addButtonClick);
-
-        updatePosition(0);
-        container.appendChild(node);
-      };
-
-      return {
-        init : init,
-        updatePosition : updatePosition
-      };
-    })();
-
-    var init = function init() {
-      container = getElemById('picker-samples');
-      trash_can = getElemById('trash-can');
-
-      AddSampleButton.init();
-
-      for (var i=0; i<16; i++) {
-        var sample = new ColorSample();
-        container.appendChild(sample.node);
-      }
-
-      AddSampleButton.updatePosition(samples.length);
-      updateUI();
-
-      active = samples[0];
-      active.activate();
-
-      container.addEventListener('click', setActivateSample);
-
-      trash_can.addEventListener('dragover', allowDropEvent);
-      trash_can.addEventListener('dragenter', function() {
-        this.parentElement.setAttribute('drag-state', 'enter');
-      });
-      trash_can.addEventListener('dragleave', function(e) {
-        this.parentElement.setAttribute('drag-state', 'none');
-      });
-      trash_can.addEventListener('drop', deleteSample);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (active)
-          active.updateColor(color);
-      });
-
-    };
-
-    return {
-      init : init,
-      getSampleColor : getSampleColor,
-      unsetActiveSample : unsetActiveSample
-    };
-
-  })();
-
-  /**
-   * Canvas Samples
-   */
-  var CanvasSamples = (function CanvasSamples() {
-
-    var active = null;
-    var canvas = null;
-    var samples = [];
-    var zindex = null;
-    var tutorial = true;
-
-    var CanvasSample = function CanvasSample(color, posX, posY) {
-
-      var node = document.createElement('div');
-      var pick = document.createElement('div');
-      var delete_btn = document.createElement('div');
-      node.className = 'sample';
-      pick.className = 'pick';
-      delete_btn.className = 'delete';
-
-      this.uid = samples.length;
-      this.node = node;
-      this.color = color;
-      this.updateBgColor();
-      this.zIndex = 1;
-
-      node.style.top = posY - 50 + 'px';
-      node.style.left = posX - 50 + 'px';
-      node.setAttribute('sample-id', this.uid);
-
-      node.appendChild(pick);
-      node.appendChild(delete_btn);
-
-      var activate = function activate() {
-        setActiveSample(this);
-      }.bind(this);
-
-      node.addEventListener('dblclick', activate);
-      pick.addEventListener('click', activate);
-      delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-      UIComponent.makeDraggable(node);
-      UIComponent.makeResizable(node);
-
-      samples.push(this);
-      canvas.appendChild(node);
-      return this;
-    };
-
-    CanvasSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    CanvasSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-      this.zIndex = value;
-      this.node.style.zIndex = value;
-    };
-
-    CanvasSample.prototype.activate = function activate() {
-      this.node.setAttribute('data-active', 'true');
-      zindex.setAttribute('data-active', 'true');
-
-      UIColorPicker.setColor('picker', this.color);
-      InputSliderManager.setValue('z-index', this.zIndex);
-    };
-
-    CanvasSample.prototype.deactivate = function deactivate() {
-      this.node.removeAttribute('data-active');
-      zindex.removeAttribute('data-active');
-    };
-
-    CanvasSample.prototype.deleteSample = function deleteSample() {
-      if (active === this)
-        unsetActiveSample();
-      canvas.removeChild(this.node);
-      samples[this.uid] = null;
-    };
-
-    CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-      this.node.style.top = posY - this.startY + 'px';
-      this.node.style.left = posX - this.startX + 'px';
-    };
-
-    var canvasDropEvent = function canvasDropEvent(e) {
-      var color = Tool.getSampleColorFrom(e);
-
-      if (color) {
-        var offsetX = e.pageX - canvas.offsetLeft;
-        var offsetY = e.pageY - canvas.offsetTop;
-        var sample = new CanvasSample(color, offsetX, offsetY);
-        if (tutorial) {
-          tutorial = false;
-          canvas.removeAttribute('data-tutorial');
-          var info = new CanvasSample(new Color(), 100, 100);
-          info.node.setAttribute('data-tutorial', 'dblclick');
-        }
-      }
-
-    };
-
-    var setActiveSample = function setActiveSample(sample) {
-      ColorPickerSamples.unsetActiveSample();
-      Tool.unsetVoidSample();
-      unsetActiveSample();
-      active = sample;
-      active.activate();
-    };
-
-    var unsetActiveSample = function unsetActiveSample() {
-      if (active)
-        active.deactivate();
-      active = null;
-    };
-
-    var createToggleBgButton = function createToggleBgButton() {
-      var button = document.createElement('div');
-      var state = false;
-      button.className = 'toggle-bg';
-      canvas.appendChild(button);
-
-      button.addEventListener('click', function() {
-        console.log(state);
-        state = !state;
-        canvas.setAttribute('data-bg', state);
-      });
-    };
-
-    var init = function init() {
-      canvas = getElemById('canvas');
-      zindex = getElemById('zindex');
-
-      canvas.addEventListener('dragover', allowDropEvent);
-      canvas.addEventListener('drop', canvasDropEvent);
-
-      createToggleBgButton();
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (active)  active.updateColor(color);
-      });
-
-      InputSliderManager.subscribe('z-index', function (value) {
-        if (active)  active.updateZIndex(value);
-      });
-
-      UIComponent.makeResizable(canvas, 'height');
-    };
-
-    return {
-      init : init,
-      unsetActiveSample : unsetActiveSample
-    };
-
-  })();
-
-  var StateButton = function StateButton(node, state) {
-    this.state = false;
-    this.callback = null;
-
-    node.addEventListener('click', function() {
-      this.state = !this.state;
-      if (typeof this.callback === "function")
-        this.callback(this.state);
-    }.bind(this));
-  };
-
-  StateButton.prototype.set = function set() {
-    this.state = true;
-    if (typeof this.callback === "function")
-      this.callback(this.state);
-  };
-
-  StateButton.prototype.unset = function unset() {
-    this.state = false;
-    if (typeof this.callback === "function")
-      this.callback(this.state);
-  };
-
-  StateButton.prototype.subscribe = function subscribe(func) {
-    this.callback = func;
-  };
-
-
-  /**
-   * Tool
-   */
-  var Tool = (function Tool() {
-
-    var samples = [];
-    var controls = null;
-    var void_sw;
-
-    var createPickerModeSwitch = function createPickerModeSwitch() {
-      var parent = getElemById('controls');
-      var icon = document.createElement('div');
-      var button = document.createElement('div');
-      var hsv = document.createElement('div');
-      var hsl = document.createElement('div');
-      var active = null;
-
-      icon.className = 'icon picker-icon';
-      button.className = 'switch';
-      button.appendChild(hsv);
-      button.appendChild(hsl);
-
-      hsv.textContent = 'HSV';
-      hsl.textContent = 'HSL';
-
-      active = hsl;
-      active.setAttribute('data-active', 'true');
-
-      function switchPickingModeTo(elem) {
-        active.removeAttribute('data-active');
-        active = elem;
-        active.setAttribute('data-active', 'true');
-        UIColorPicker.setPickerMode('picker', active.textContent);
-      };
-
-      var picker_sw = new StateButton(icon);
-      picker_sw.subscribe(function() {
-        if (active === hsv)
-          switchPickingModeTo(hsl);
-        else
-          switchPickingModeTo(hsv);
-      });
-
-      hsv.addEventListener('click', function() {
-        switchPickingModeTo(hsv);
-      });
-      hsl.addEventListener('click', function() {
-        switchPickingModeTo(hsl);
-      });
-
-      parent.appendChild(icon);
-      parent.appendChild(button);
-    };
-
-    var setPickerDragAndDrop = function setPickerDragAndDrop() {
-      var preview = document.querySelector('#picker .preview-color');
-      var picking_area = document.querySelector('#picker .picking-area');
-
-      preview.setAttribute('draggable', 'true');
-      preview.addEventListener('drop', drop);
-      preview.addEventListener('dragstart', dragStart);
-      preview.addEventListener('dragover', allowDropEvent);
-
-      picking_area.addEventListener('drop', drop);
-      picking_area.addEventListener('dragover', allowDropEvent);
-
-      function drop(e) {
-        var color = getSampleColorFrom(e);
-        UIColorPicker.setColor('picker', color);
-      };
-
-      function dragStart(e) {
-        e.dataTransfer.setData('sampleID', 'picker');
-        e.dataTransfer.setData('location', 'picker');
-      };
-    };
-
-    var getSampleColorFrom = function getSampleColorFrom(e) {
-      var sampleID = e.dataTransfer.getData('sampleID');
-      var location = e.dataTransfer.getData('location');
-
-      if (location === 'picker')
-        return UIColorPicker.getColor(sampleID);
-      if (location === 'picker-samples')
-        return ColorPickerSamples.getSampleColor(sampleID);
-      if (location === 'palette-samples')
-        return ColorPalette.getSampleColor(sampleID);
-    };
-
-    var setVoidSwitch = function setVoidSwitch() {
-      var void_sample = getElemById('void-sample');
-      void_sw = new StateButton(void_sample);
-      void_sw.subscribe( function (state) {
-        void_sample.setAttribute('data-active', state);
-        if (state === true) {
-          ColorPickerSamples.unsetActiveSample();
-          CanvasSamples.unsetActiveSample();
-        }
-      });
-    };
-
-    var unsetVoidSample = function unsetVoidSample() {
-      void_sw.unset();
-    };
-
-    var init = function init() {
-      controls = getElemById('controls');
-
-      var color = new Color();
-      color.setHSL(0, 51, 51);
-      UIColorPicker.setColor('picker', color);
-
-      setPickerDragAndDrop();
-      createPickerModeSwitch();
-      setVoidSwitch();
-    };
-
-    return {
-      init : init,
-      unsetVoidSample : unsetVoidSample,
-      getSampleColorFrom : getSampleColorFrom
-    };
-
-  })();
-
-  var init = function init() {
-    UIColorPicker.init();
-    InputSliderManager.init();
-    ColorInfo.init();
-    ColorPalette.init();
-    ColorPickerSamples.init();
-    CanvasSamples.init();
-    Tool.init();
-  };
-
-  return {
-    init : init
-  };
-
-})();
-
-
-
- -

{{CSSRef}}

- -

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

- -

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

- -

Veja também

- -

Para mais aplicações de cores, veja:

- - diff --git a/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..05318caa79 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,239 @@ +--- +title: Conceitos básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox +tags: + - CSS + - Flex + - Tutorial + - conceitos + - conteiner + - eixos + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

+ +

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

+ +

Os eixos do flexbox

+ +

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

+ +

Eixo principal

+ +

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

+ + + +

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

Eixo transversal

+ +

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

+ +

Linhas de Início e Fim

+ +

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

+ +

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

+ +

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

+ +

Working in English the start edge is on the left.

+ +

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

+ +

The start edge in a RTL language is on the right.

+ +

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

+ +

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

+ +

Contêiner Flex

+ +

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

+ + + +

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

+ +

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Propriedade flex-direction

+ +

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
+
+ Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
+
+ No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
+
+ {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Quebra de linha com "flex-wrap"

+ +

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

+ +

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

+ +

Propriedade abreviada flex-flow

+ +

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

+ +

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Expansão, encolhimento e tamanho dos elementos flex

+ +

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

+ + + +

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

+ +

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

+ +

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

+ +

This flex container has available space after laying out the items.

+ +

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

+ +

Propriedade flex-basis

+ +

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

+ +

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

+ +

Propriedade flex-grow

+ +

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

+ +

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

+ +

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

+ +

Propriedade flex-shrink

+ +

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

+ +

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

+ +
+

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

+
+ +

Abreviatura para os valores das propriedades flex

+ +

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

+ +

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

+ + + +

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

+ +

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

+ +

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

+ +

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

+ +

Teste essas formas abreviadas no exemplo prático abaixo:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

+ +

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

+ +

Propriedade align-items

+ +

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

+ +

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

+ +

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

+ +

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

Propriedade justify-content

+ +

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

+ +

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

+ +

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

+ +

Próximos passos

+ +

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html deleted file mode 100644 index 05318caa79..0000000000 --- a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Conceitos básicos de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox -tags: - - CSS - - Flex - - Tutorial - - conceitos - - conteiner - - eixos - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

- -

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

- -

Os eixos do flexbox

- -

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

- -

Eixo principal

- -

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

- - - -

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

Eixo transversal

- -

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

- -

Linhas de Início e Fim

- -

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

- -

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

- -

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

- -

Working in English the start edge is on the left.

- -

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

- -

The start edge in a RTL language is on the right.

- -

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

- -

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

- -

Contêiner Flex

- -

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

- - - -

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

- -

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Propriedade flex-direction

- -

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
-
- Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
-
- No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
-
- {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Quebra de linha com "flex-wrap"

- -

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

- -

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

- -

Propriedade abreviada flex-flow

- -

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

- -

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Expansão, encolhimento e tamanho dos elementos flex

- -

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

- - - -

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

- -

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

- -

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

- -

This flex container has available space after laying out the items.

- -

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

- -

Propriedade flex-basis

- -

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

- -

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

- -

Propriedade flex-grow

- -

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

- -

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

- -

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

- -

Propriedade flex-shrink

- -

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

- -

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

- -
-

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

-
- -

Abreviatura para os valores das propriedades flex

- -

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

- -

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

- - - -

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

- -

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

- -

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

- -

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

- -

Teste essas formas abreviadas no exemplo prático abaixo:

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

- -

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

- -

Propriedade align-items

- -

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

- -

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

- -

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

- -

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

Propriedade justify-content

- -

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

- -

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

- -

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

- -

Próximos passos

- -

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html deleted file mode 100644 index e14ba15c2d..0000000000 --- a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implementando sprites de imagens em CSS -slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{cssRef}}
- -

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

- -
-

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

-
- -

Implementação

- -

Suponha que uma imagem é dada a cada item com a classe toolbtn:

- -
.toolbtn {
-  background: url(myfile.png);
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

- -

De forma similar, você pode criar um efeito de hover com:

- -
#btn:hover {
-  background-position: <pixels para direita>px <pixels para baixo>px;
-}
- -

Veja também

- - diff --git a/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..e14ba15c2d --- /dev/null +++ b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,47 @@ +--- +title: Implementando sprites de imagens em CSS +slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{cssRef}}
+ +

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

+ +
+

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

+
+ +

Implementação

+ +

Suponha que uma imagem é dada a cada item com a classe toolbtn:

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

+ +

De forma similar, você pode criar um efeito de hover com:

+ +
#btn:hover {
+  background-position: <pixels para direita>px <pixels para baixo>px;
+}
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_positioning/understanding_z_index/index.html b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..488ca0f600 --- /dev/null +++ b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,48 @@ +--- +title: Understanding CSS z-index +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Entendendo_CSS_z-index + - Guía + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

+ +
+

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.

+ +

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi  reservada na especificação do CSS  CSS-2.1 Appendix E para explicar melhor essas regras.

+ +

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

+ +
    +
  1. Stacking without z-index : Regras padrões de empilhamento
    2. +
  2. Stacking and float : Como lidar com elementos que usam float
    3. +
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. +
  4. The stacking context : Notas sobre contexto do empilhamento
    5. +
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. +
+ +

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/css_reference/index.html deleted file mode 100644 index 1afbf4890e..0000000000 --- a/files/pt-br/web/css/css_reference/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Referência de CSS -slug: Web/CSS/CSS_Reference -translation_of: Web/CSS/Reference ---- -{{CSSRef}} - -

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

- -

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

- -

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

- -

{{ CSS_Ref() }}

- -

Seletores

- - - -

Miscelânea

- - - -

Conceitos

- - diff --git a/files/pt-br/web/css/css_selectors/index.html b/files/pt-br/web/css/css_selectors/index.html new file mode 100644 index 0000000000..644d9d87e9 --- /dev/null +++ b/files/pt-br/web/css/css_selectors/index.html @@ -0,0 +1,150 @@ +--- +title: Seletores CSS +slug: Web/CSS/Seletores_CSS +tags: + - CSS + - Referência(2) + - Seletores + - Seletores CSS +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

+ +

Seletores Básicos

+ +
+
Seletor por tag
+
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
+ Sintaxe: nome-da-tag
+ Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
+
Seletor por classe
+
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
+ Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
+
Seletor por ID
+
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
+ Sintaxe: #nome-do-id
+ Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
+
Seletores universais
+
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
+ Sintaxe: * ns|* *|*
+ Exemplo: * irá corresponder a todos os elementos do documento.
+
Seletores por atributo
+
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
+ Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
+ Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
+
+ +

Combinadores

+ +
+
Seletores de irmãos adjacentes
+
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
+ Sintaxe: A + B
+ Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
+
Seletores gerais de irmãos
+
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
+ Sintaxe: A ~ B
+ Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
+
Seletor de filhos
+
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
+ Sintaxe: A > B
+ Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
+
Seletor de descendentes
+
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
+ Sintaxe: A B
+ Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

+ +

Pseudo-elementos

+ +

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_tipos/index.html deleted file mode 100644 index 79256061ae..0000000000 --- a/files/pt-br/web/css/css_tipos/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Tipos básicos de dados CSS -slug: Web/CSS/CSS_Tipos -tags: - - CSS - - CSS tipos de dados - - Referencia - - Visão Geral -translation_of: Web/CSS/CSS_Types ---- -
{{CssRef}}
- -

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
-
- Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

- -

Referência

- -
- -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/css_types/index.html b/files/pt-br/web/css/css_types/index.html new file mode 100644 index 0000000000..79256061ae --- /dev/null +++ b/files/pt-br/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos básicos de dados CSS +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - CSS tipos de dados + - Referencia + - Visão Geral +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
+
+ Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

+ +

Referência

+ +
+ +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/elemento_substituido/index.html deleted file mode 100644 index 22ba1b8ad0..0000000000 --- a/files/pt-br/web/css/elemento_substituido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Elemento substituído -slug: Web/CSS/Elemento_substituido -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef()}}
- -

Sumario

- -

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

- - - -

Some elements are treated as replaced elements only in specific cases:

- - - -

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

- -

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

- -

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

- -

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

- -

Veja também

- - diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index 7880e00f6d..0000000000 --- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Cascata e herança -slug: Web/CSS/Getting_Started/Cascading_and_inheritance -tags: - - Guía - - Iniciante -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.

- -

Informação: Cascata e Herança

- -

O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.

- -

Existem três fontes principais de estilos que constituem a cascata. São elas:

- - - -

O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.

- -
-
Exemplo
- -

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

- -

Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo userContent.css do seu navegador.

- -

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

-
- -

Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.

- -

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

- -

Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.

- -

Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.

- -

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

- -

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

- -

Mais detalhes

- -
-

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

- -

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

- -

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

-
- -

Ação: Usando herança

- -
    -
  1. Edite o seu arquivo CSS.
    2. -
  2. Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.
    - -

    Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Depois
Cascading Style Sheets
- -
-
Desafio
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

- -
p {color: blue; }
-strong {color: red; text-decoration: underline;}
-
- -

 

-Hide solution
-Veja a solução do desafio.
- -

Qual o próximo?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais seletores.

diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html deleted file mode 100644 index 2ead5ccae7..0000000000 --- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Como o CSS funciona -slug: Web/CSS/Getting_Started/Como_CSS_funciona -tags: - - 'CSS:PrimeirosPassos' - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. 

- -

Informação: Como o CSS funciona

- -

Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:

- -
    -
  1. O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
    2. -
  2. O navegador exibe o conteúdo do DOM.
    3. -
- -

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

- -

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

- -

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

- -

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

- -
-
Exemplo
-No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Exemplo em tempo real

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

Ação: Analisando um DOM

- -

Utilizando Inspetor DOM

- -

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

- -
    -
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. -
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. -
    -
    Mais detalhes
    - -

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    - -

    Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.

    -
    -
    3. -
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. -

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    - -

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

    - -

    Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

    -
    4. -
- -
-
Desafio
- -

No DOMi, clique em um nó STRONG.

- -

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

- - -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-Veja a solução para o desafio.
- -

Usando Raio-X Goggles da Web

- -

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

- -
    -
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. -
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. -
  3. Abra o seu documento HTML de exemplo.
    4. -
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. -
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. -
- -

O que vem depois?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html deleted file mode 100644 index 389962ab07..0000000000 --- a/files/pt-br/web/css/getting_started/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Iniciando com o CSS -slug: Web/CSS/Getting_Started -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

- -

Introdução

- -

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

- - - - - -

Esse tutorial é baseado na Especificação do CSS 2.1.

- -

Quem deve usar esse tutorial?

- -

Esse tutorial é, principalmente, para iniciantes no CSS.

- -

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

- -

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

- -

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

- -

O que você precisa saber antes de começar?

- -

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

- -

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

- -

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

- - - -

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

- -

Como usar esse tutorial

- -

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

- -

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

- -

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

- -

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

- -

Parte I do Tutorial

- -

Uma guia básico passo a passo do CSS

- -
    -
  1. O que é o CSS
    2. -
  2. Porque usar o CSS
    3. -
  3. Como o CSS funciona
    4. -
  4. Cascata e herança
    5. -
  5. Seletores
    6. -
  6. CSS legível
    7. -
  7. Estilos de texto
    8. -
  8. Cores
    9. -
  9. Conteúdo
    10. -
  10. Listas
    11. -
  11. Caixas
    12. -
  12. Layout
    13. -
  13. Tabelas
    14. -
  14. Mídia
    15. -
- -

Parte II do Tutorial

- -

Exemplos do uso do CSS juntamente com outras tecnologias

- -
    -
  1. JavaScript
    2. -
  2. Gráficos SVG
    3. -
  3. Dados XML
    4. -
  4. Ligações XBL
    5. -
  5. Interfaces de usuário XUL
    6. -
- -

{{ CSSTutorialTOC() }}

- -

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html deleted file mode 100644 index 544deb8960..0000000000 --- a/files/pt-br/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript e CSS -slug: Web/CSS/Getting_Started/JavaScript -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

-

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

-

Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

-

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

-

Sessão Anterior (da Parte I): Media
- Próxima sessão: SVG

-

Informação: JavaScript

-

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

-

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

-

Há três formas de fazer isso:

- - - - - - - - -
- Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.
-

Ação: Uma demonstração de  JavaScript

-

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

-
- 
<!DOCTYPE html>
-<html>
-
-<head>
-<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
-<link rel="stylesheet" type="text/css" href="style5.css" />
-<script type="text/javascript" src="script5.js"></script>
-</head>
-
-<body>
-<h1>JavaScript sample</h1>
-
-<div id="square"></div>
-
-<button type="button" onclick="doDemo(this);">Click Me</button>
-
-</body>
-</html>
-
-
-

Crie um novo arquivo  CSS, style5.css. Copie e cole o conteúdo daqui:

-
- 
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-
-
-

Crie um novo arquivo de texto, script5.js. Coie e cole o conteúdo daqui:

-
- 
// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-
-
-

Abra o documento no seu Browser e pressione o botão.

-

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

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

JavaScript demonstration

-
- 		- - - - - - -
-

JavaScript demonstration

-
-
-
- Notas importantes sobre esta demonstração: - -
- - - - - - - -
- Desafio
-

Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

-
-

Veja a solução deste desafio.

-

O que vem agora?

-

Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de Discussão.

-

Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html deleted file mode 100644 index 72dc8dc227..0000000000 --- a/files/pt-br/web/css/getting_started/lists/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Manipulando Listas -slug: Web/CSS/Getting_Started/Lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}

- -

Este é o 10º seção do CSS Introdução tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

- -

Informação: Lists

- -

Se você aceitou o desafio na última seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

- -

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

- -

Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.

- -

O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.

- -

Listas não ordenadas

- -

Em uma lista desordenada, cada item da lista é marcado da mesma forma.

- -

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

- - - -

        none

- -

Alternativamente, você pode especificar o URL de uma imagem.

- -
-
Exemplo
- -

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

- -
li.open {list-style: circle;} 
-li.closed {list-style: disc;}
-
- -

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

- -
<ul> 
-  <li class="open"> Lorem ipsum </ li> 
-  <li class="closed"> dolor sit </ li>
-  <li class="closed"> Amet consectetuer </ li>
-  <li class="open"> Magna aliquam </ li>
-  <li class="closed"> Autem veleum </ li>
-</ ul>
-
- -

O resultado pode parecer:

- -

{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}

-
- -

Listas ordenadas

- -

Em uma listaordenada , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

- -

Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:

- - - -
-
Exemplo
- -

Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe informações, os itens são identificados com letras maiúsculas.

- -
<ol class="info">
-  <li>Lorem ipsum</li>
-  <li>Dolor sit</li>
-  <li>Amet consectetuer</li>
-  <li>Magna aliquam</li>
-  <li>Autem veleum</li>
-</ol>
- -
ol.info {list-style: upper-latin;}
-
- -

O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:

- -

{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}

-
- -
-
Mais detalhes
- -

O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.

- -

Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.

- -

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

-
- -

Contadores

- -
-

Nota:  Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

-
- -

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

- -

Para especificar a numeração, você precisa de um contador com um nome que você especificar.

- -

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.

- -

Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.

- -

Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o conteúdo da propriedade (como você fez na página anterior, Conteúdo) .

- -

No valor do conteúdo de propriedade, especifique counter () com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na lista ordenada secção acima.

- -

Normalmente, o elemento que apresenta o contador também incrementa-lo.

- -
-
Exemplo
- -

Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe numeradas:

- -
h3.numbered {counter-reset: mynum;}
-
- -

 

- -

Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe numeradas:

- -
<p class = "numbered"> Lorem ipsum </ p>
-<p class = "numbered"> dolor sit </ p>
-<p class = "numbered"> Amet consectetuer </ p>
-<p class = "numbered"> Magna aliquam </ p>
-<p class = "numbered"> Autem veleum </ p>
-
- -
body 
-   {counter-reset: 
-mynum;} 
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
- -

O resultado se parece com isso:

- -

{{ EmbedLiveSample("Contadores", '300', '200', '') }}

-
- -
-
Mais detalhes
- -

Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.

- -

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

- -

Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

-
- -

Listas denominadas: Ação

- -

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
-
- -

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

Se o layout e comentário não são a seu gosto, alterá-los.

- -

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

- -

{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}

- -
-
Desafios
- -

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

 

- -

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

Ver soluções para esses desafios.

- -

Qual o proximo?

- -

{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.

diff --git a/files/pt-br/web/css/getting_started/oque_é_css/index.html b/files/pt-br/web/css/getting_started/oque_é_css/index.html deleted file mode 100644 index 1ccc04f0ce..0000000000 --- a/files/pt-br/web/css/getting_started/oque_é_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: O que é CSS -slug: Web/CSS/Getting_Started/Oque_é_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

- -

O que é CSS ?

- -

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

- -

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

- -
-
Examples
- - -
- -

Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.

- -
-
Mais detalhes
- -

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

- -

Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.

- -

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
- -

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

-
- -

Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.

- -
-
Mais detalhes
- -

CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

- -

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

-
- -

Ação: Criando um documento

- -
    -
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. -
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.html - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento de exemplo</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. -

    Você deve ver o texto  com as letras iniciais em negrito, como este:

    - - - - - - - -
    Cascading Style Sheets
    - -

    O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.

    -
    4. -
- -

O que veremos depois?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html deleted file mode 100644 index 453aa4c966..0000000000 --- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Por que usar CSS? -slug: Web/CSS/Getting_Started/Porque_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

- -

Informação: Por que usar CSS?

- -

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

- -

Uma folha de estilo externa, tem muitas vantagens.:

- - - -
-
Exemplo
- -

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

- -

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

- -

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

-
- -

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

- -
-
Mais detalhes
- -

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

- -

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

- -

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

-
- -

Ação: Criando uma folha de estilo

- -
    -
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. -
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. -
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: - 
    strong {color: red;}
-
    -
    4. -
- -

Linkando seu documento para sua folha de estilo

- -
    -
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento Simples com CSS</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

- -
-
Desafio
- -

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

- -

Encontre mais cinco nomes de cores que as CSS trabalham.

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-Veja a solução para este desafio.
- -

O que veremos?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html deleted file mode 100644 index 3870c68936..0000000000 --- a/files/pt-br/web/css/getting_started/seletores/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Getting_Started/Seletores -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.

- -

Informações: Seletores

- -

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

- -
strong {
-  color: red;
-}
-
- -

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

- -
-
Mais detalhes
- -

A parte dentro das chaves é a declaração.

- -

A palavra-chave color é uma propriedade e red é um valor.

- -

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

- -

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

-
- -

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

- -

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

- -

Dois atributos são especiais para o CSS. São eles o class e o id.

- -

Seletores com Classe

- -

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

- -

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

- -

Seletores com ID

- -

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

- -

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

- -
-
Exemplo
-Esta tag HTML tem tanto um atributo class quanto um atributo id: - -
<p class="chave" id="principal">
-
- -

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

- -

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

- -
.chave {
-  color: green;
-}
-
- -

Esta regra torna negrito um elemento com id principal:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Seletores de Atributo

- -

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:

- -
-
[disabled]
-
Seleciona todos os elementos com o atributo "disabled".
-
[type='button']
-
Seleciona todos os elementos do tipo "button".
-
[class~=key]
-
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
-
[lang|=es]
-
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
-
[title*="example" i]
-
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
-
a[href^="https://"]
-
Seleciona links seguros.
-
img[src$=".png"]
-
IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.
-
- -

Seletores de pseudo-classes

- -

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

- -

Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite CSS3 Selectors working spec.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Lista de pseudo-classes

- - - -

Informação: Especificidade

- -

Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais específico. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.

- -
-
Mais detalhes
- -

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

-
- -

Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.

- -

Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.

- -

Information: Selectors based on relationships

- -

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
- -

You can combine these to express complex relationships.

- -

You can also use the symbol * (asterisk) to mean "any element".

- -
-
Example
- -

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:

- -
    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-
- -

The result looks like:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
More details
- -

In the usual way, if you make a selector more specific, then you increase its priority.

- -

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

- -

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

- -

For more examples about tables, see Tables in the CSS Reference page.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. -
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. Now edit your CSS file. Replace the entire contents with: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Save the files and refresh your browser to see the result: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    - -

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    - -

    The ID selector #first has priority over the class and tag selectors.

    -
    5. -
- -
-
Challenges
- -
    -
  1. Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Create an HTML file with following content: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Now edit your CSS file. Replace the entire contents with: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

Action: Using selectors based on relationships and pseudo-classes

- -

With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

to be applied to an HTML structure like the following:

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
- -

See our complete CSS-based dropdown menu example for a possible cue.

- -

What next?

- -

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/pt-br/web/css/hifens/index.html b/files/pt-br/web/css/hifens/index.html deleted file mode 100644 index c8e718562f..0000000000 --- a/files/pt-br/web/css/hifens/index.html +++ /dev/null @@ -1,902 +0,0 @@ ---- -title: hifens -slug: Web/CSS/hifens -translation_of: Web/CSS/hyphens ---- -
{{CSSRef}}
- -
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
- -
 
- -
hyphens: none;
-hyphens: manual;
-hyphens: auto;
-
-/* Valores globais */
-hyphens: inherit;
-hyphens: initial;
-hyphens: unset;
-
- -

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

- -
-

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

-
- -

{{cssinfo}}

- -

Sintaxe

- -

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

- -

Valores

- -
-
none
-
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
-
manual
-
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
-
auto
-
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
-
- -
-

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

-
- -

Oportunidades sugeridas de quebra de linha

- -

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

- -
-
U+2010 (HYPHEN)
-
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
-
U+00AD (SHY)
-
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
-
- -

Sintaxe formal

- -
{{csssyntax}}
- -

Exemplo

- -

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

- -
<ul>
-  <li><code>none</code>: sem hífen; transbordar se necessário
-    <p lang="en" class="none">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
-    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
-    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
-  </li>
-</ul>
-
- -
p {
-  width: 55px;
-  border: 1px solid black;
- }
-p.none {
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-p.manual {
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
-  hyphens: manual;
-}
-p.auto {
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-}
-
- -
-

{{EmbedLiveSample("Example", "100%", "470'")}}

-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
- -

Compatibilidade dos navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
- {{CompatChrome(55.0)}} (unprefixed)		 -

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}

- 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

- -

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[4] Usa um dicionário en-US.

- -

[5] en-GB e en-US usam dicionários diferentes.

- -

[6] Usa um dicionário Português.

- -

Veja também

- - diff --git a/files/pt-br/web/css/hyphens/index.html b/files/pt-br/web/css/hyphens/index.html new file mode 100644 index 0000000000..c8e718562f --- /dev/null +++ b/files/pt-br/web/css/hyphens/index.html @@ -0,0 +1,902 @@ +--- +title: hifens +slug: Web/CSS/hifens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
+ +
 
+ +
hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valores globais */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

+ +
+

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

+
+ +

{{cssinfo}}

+ +

Sintaxe

+ +

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

+ +

Valores

+ +
+
none
+
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
+
manual
+
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
+
auto
+
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
+
+ +
+

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

+
+ +

Oportunidades sugeridas de quebra de linha

+ +

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

+ +
+
U+2010 (HYPHEN)
+
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
+
U+00AD (SHY)
+
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

+ +
<ul>
+  <li><code>none</code>: sem hífen; transbordar se necessário
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+
+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +
+

{{EmbedLiveSample("Example", "100%", "470'")}}

+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

Compatibilidade dos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
+ {{CompatChrome(55.0)}} (unprefixed)		 +

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}

+ 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

+ +

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[4] Usa um dicionário en-US.

+ +

[5] en-GB e en-US usam dicionários diferentes.

+ +

[6] Usa um dicionário Português.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/image/index.html b/files/pt-br/web/css/image/index.html new file mode 100644 index 0000000000..fe9631cb30 --- /dev/null +++ b/files/pt-br/web/css/image/index.html @@ -0,0 +1,157 @@ +--- +title: +slug: Web/CSS/imagem +tags: + - CSS + - CSS imagens + - Layout + - Referencia + - Tipo de data CSS + - Web + - graficos +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

+ +

Tipos de imagens

+ +

CSS pode lidar com os seguintes tipos de imagens:

+ + + +

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
+ +

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

+ + + +
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
+ +

Sintaxe

+ +

O tipo de data <image> pode ser representado por qualquer item seguinte:

+ + + +

Exemplos

+ +

Imagens válidas

+ +
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
+linear-gradient(blue, red)  /* Um <gradient> */
+element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
+
+ +

Imagens inválidas

+ +
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
+url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
+element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
+ +

Compatibilidade do navegador

+ +

 

+ + + +

{{Compat("css.types.image")}}

+ +

 

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/imagem/index.html deleted file mode 100644 index fe9631cb30..0000000000 --- a/files/pt-br/web/css/imagem/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: -slug: Web/CSS/imagem -tags: - - CSS - - CSS imagens - - Layout - - Referencia - - Tipo de data CSS - - Web - - graficos -translation_of: Web/CSS/image ---- -
{{CSSRef}}
- -

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

- -

Tipos de imagens

- -

CSS pode lidar com os seguintes tipos de imagens:

- - - -

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
- -

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

- - - -
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
- -

Sintaxe

- -

O tipo de data <image> pode ser representado por qualquer item seguinte:

- - - -

Exemplos

- -

Imagens válidas

- -
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
-linear-gradient(blue, red)  /* Um <gradient> */
-element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
-
- -

Imagens inválidas

- -
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
-url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
-element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
- -

Compatibilidade do navegador

- -

 

- - - -

{{Compat("css.types.image")}}

- -

 

- -

Veja também

- - diff --git a/files/pt-br/web/css/initial_value/index.html b/files/pt-br/web/css/initial_value/index.html new file mode 100644 index 0000000000..fea27bfe3c --- /dev/null +++ b/files/pt-br/web/css/initial_value/index.html @@ -0,0 +1,30 @@ +--- +title: Valor inicial +slug: Web/CSS/valor_inicial +tags: + - CSS + - Iniciante + - Web + - valor inicial +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

+ + + +
+

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/layout_mode/index.html b/files/pt-br/web/css/layout_mode/index.html new file mode 100644 index 0000000000..883cdbd4a4 --- /dev/null +++ b/files/pt-br/web/css/layout_mode/index.html @@ -0,0 +1,25 @@ +--- +title: Modelo de layout +slug: Web/CSS/Modelo_layout +translation_of: Web/CSS/Layout_mode +--- +

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

+ + + +
+

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html new file mode 100644 index 0000000000..4b7f7f52d5 --- /dev/null +++ b/files/pt-br/web/css/mask/index.html @@ -0,0 +1,150 @@ +--- +title: mask +slug: mask +tags: + - CSS + - Compatibilidade Mobile + - Internet + - Layout + - Referencia + - SVG + - Web + - máscaras +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

Resumo

+ +

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

Valores

+ +

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

+ +
{{csssyntax}}
+ +

Exemplos

+ +
.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Estende-se a sua utilização para elementos HTML.
+ Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Definição inicial.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico (para o SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}} [*]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Aplica-se a elementos HTML{{CompatNo}}{{CompatGeckoDesktop("1.9.1")}} [*]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/media_queries/using_media_queries/index.html b/files/pt-br/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..4b9728eebd --- /dev/null +++ b/files/pt-br/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,639 @@ +--- +title: Usando Media Queries +slug: Web/Guide/CSS/CSS_Media_queries +tags: + - CSS + - Desenho Responsivo + - Design Responsivo +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

+ +

Sintaxe

+ +

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

+ +
<!-- CSS media query em um elemento de link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query dentro de um stylesheet -->
+
+<style>
+@media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }
+}
+</style>
+ +

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

+ +

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

+ +

Operadores lógicos

+ +

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

+ +

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

+ +

and

+ +

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:

+ +
@media (min-width: 700px) { ... }
+ +

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

+ +

Listas separadas por vírgula

+ +

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

+ +

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Acima, se eu estivesse em um dispositivo screen com um viewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como @media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

+ +

not

+ +

A palavra chave not se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado). Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas. A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:

+ +
@media not all and (monochrome) { ... }
+
+ +

Isto significa que a query é avaliada assim:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... em vez disso:

+ +
@media (not all) and (monochrome) { ... }
+ +

Um outro exemplo, veja a media query seguinte:

+ +
@media not screen and (color), print and (color)
+
+ +

É avalida desta forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media queries são case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

+ +
Nota: Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.
+ +

Características de mídia

+ +

A maioria das media features podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

+ +
Nota: Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.
+ +

cor

+ +

Valor: {{cssxref("<color>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

+ +
Nota: Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.
+ +

Exemplos

+ +

Aplicar uma folha de estilo a todos dispositivos:

+ +
@media all and (color) { ... }
+
+ +

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: Sim

+ +

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

+ +

Exemplos

+ +

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: todas
+ Aceita prefixos min/max: não

+ +

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

+ +

Exemplo

+ +

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota:  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: yes

+ +

A característica height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

+ +
Nota: Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features width e height.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

+ +

Exemplos

+ +

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

+ +

Exemplo

+ +

Para aplicar a folha de estilo apenas em orientação portrait:

+ +
@media all and (orientation: portrait) { ... }
+ +
Nota: Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Mídia: {{cssxref("Media/Bitmap", "bitmap")}}
+ Aceita prefixos min/max: sim

+ +

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

+ +

Exemplos

+ +

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Mídia: {{cssxref("Media/TV")}}
+ Aceita prefixos min/max: não

+ +

Descreve o processo de digitalização de dispositivos saída de televisão.

+ +

Exemplo

+ +

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

A media feature width descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

+ +

Nota:
+ Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em media queries usando media features width e height.

+ +

Exemplos

+ +

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Essa media query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Essa query especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Especificação da Mozilla para mídias características

+ +

Mozilla oferece várias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max:no

+ +

Se o usuário tenha configurado seu dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência padrão blue, ou não está num Mac OS X, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o usuário está usando Maemo com o tema original, o valor é 1; Se está usando o mais novo tema Fremantle, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Valor: {{cssxref("<number>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Dar o número de pixels do dispositivo por pixels do CSS.

+ +
+

Não use este recurso.

+ +

Em vez disso, use o recurso resolution com a unidade dppx.
+
+ -moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e -webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportam dppx.

+ +

Exemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
+       (min-resolution: 2dppx),             /* Forma padrão */
+       (min-resolution: 192dpi)             /* dppx fallback */
+ +

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.

+
+ +
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

+ + + +

Isto é fornecido pelas skins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Exemplo

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

Isto é previsto para skins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

+ +

Compatibilidade no navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
Grade{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Resolução{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
+ {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/modelo_layout/index.html deleted file mode 100644 index 883cdbd4a4..0000000000 --- a/files/pt-br/web/css/modelo_layout/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Modelo de layout -slug: Web/CSS/Modelo_layout -translation_of: Web/CSS/Layout_mode ---- -

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

- - - -
-

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/modelo_visual/index.html deleted file mode 100644 index a37a0cc7b0..0000000000 --- a/files/pt-br/web/css/modelo_visual/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Modelo de formatação visual -slug: Web/CSS/Modelo_Visual -tags: - - CSS - - CSS conceitos basicos - - Intermediário -translation_of: Web/CSS/Visual_formatting_model ---- -

{{CSSRef}}

- -

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

- -

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

- - - -

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

- -

 Gerando um Box

- -

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

- -

Block-level elements and block boxes

- -

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

- -

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

- -

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

- -

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

- -

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

- -

Block-level boxes that also are block container boxes are called block boxes.

- -

Anonymous block boxes

- -

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

- -

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

- -

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

- -

Exemplo

- -

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

- -
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
- -

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

- -

anonymous_block-level_boxes.png

- -

Leading to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

- -

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

- -

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

- -

Exemplo

- -

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

- -
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
- -

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

- -

- -

Which leads to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Inline-level elements and inline boxes

- -

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

- -

venn_inlines.png

- -
-

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

-
- -

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

- -
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
- -
Atomic inline boxes cannot be split into several lines in an inline formatting context. -
-
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>can be split in several
-   lines as it</span> is an inline box.
-</div>
-
- -

which leads to:

- -
The text in the span can be split into several lines as it is an inline box.
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>cannot be split in several
-   lines as it</span> is an inline-block box.
-</div>
-
- -

which leads to:

- -
The text in the span cannot be split into several lines as it is an inline-block box.
-
-
- -

Anonymous inline boxes

- -

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

- -

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

- -
Example TBD
- -

Outros tipos de boxes

- -

Line boxes

- -

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

- -

These boxes are technical, and Web authors do not usually have to bother with them.

- -

Run-in boxes

- -

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

- -
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
- -

Model-induced boxes

- -

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

- - - -

Positioning schemes

- -

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

- - - -

Normal flow

- -

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

- -

Exemplo

- -
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
-
-[image]
-
-When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
-
-[image]
- -

There are two sub-cases of the normal flow: static positioning and relative positioning:

- - - -

Floats

- -

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

- -

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

- -

[image]

- -

Absolute positioning

- -

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

- -

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

- -

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

- -

Veja Também

- - diff --git a/files/pt-br/web/css/overflow-wrap/index.html b/files/pt-br/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..c23f4b966d --- /dev/null +++ b/files/pt-br/web/css/overflow-wrap/index.html @@ -0,0 +1,117 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Resumo

+ +

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

+ +
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
+ +

{{cssinfo}}

+ +

Sintaxe

+ +
word-wrap:  normal | break-word
+ +

Valores

+ +
+
normal
+
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
+
break-word
+
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
+
+ +

Exemplos

+ +
p { width: 13em; background: gold; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +
p { width: 13em; background: gold; word-wrap: break-word; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
+ +

Compatibilidade entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
+
+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html deleted file mode 100644 index 273c7765e3..0000000000 --- a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'Privacidade e o seletor :visited' -slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' -tags: - - CSS - - Guía - - Pseudo-classe - - Referencia - - Segurança - - Seletores -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{cssref}}
- -

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

- -

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

- -

Pequenas mentiras brancas

- -

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

- - - - - -

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

- - - -

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

- -

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* O valor padrão de background-color é `transparent`. Você precisa
-     especificar um valor diferente, caso contrário as mudanças
-     feitas em :visited não se aplicam. */
-}
-
-:visited {
-  outline-color: orange;    /* Links visitados tem contornos laranja */
-  background-color: green;  /* Links visitados tem um fundo verde */
-  color: yellow;            /* Links visitados tem texto amarelo */
-}
-
- -

Impacto nos desenvolvedores web

- -

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..273c7765e3 --- /dev/null +++ b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,76 @@ +--- +title: 'Privacidade e o seletor :visited' +slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' +tags: + - CSS + - Guía + - Pseudo-classe + - Referencia + - Segurança + - Seletores +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

+ +

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

+ +

Pequenas mentiras brancas

+ +

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

+ + + + + +

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

+ + + +

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

+ +

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* O valor padrão de background-color é `transparent`. Você precisa
+     especificar um valor diferente, caso contrário as mudanças
+     feitas em :visited não se aplicam. */
+}
+
+:visited {
+  outline-color: orange;    /* Links visitados tem contornos laranja */
+  background-color: green;  /* Links visitados tem um fundo verde */
+  color: yellow;            /* Links visitados tem texto amarelo */
+}
+
+ +

Impacto nos desenvolvedores web

+ +

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elementos/index.html deleted file mode 100644 index a457c9ac9a..0000000000 --- a/files/pt-br/web/css/pseudo-elementos/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Pseudo-elementos -slug: Web/CSS/Pseudo-elementos -tags: - - CSS - - Principiantes - - Pseudo-elementos - - Referencia - - Seletores -translation_of: Web/CSS/Pseudo-elements ---- -
{{ CSSRef() }}
- -
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
- -
- -
/* A primeira linha de todo elemento <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

-
- -

Sintaxe

- -
seletor::pseudo-elemento {
-  propriedade: valor;
-}
-
- -

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

- -

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

- -

Índice de pseudo-elementos comuns

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Ver também

- - diff --git a/files/pt-br/web/css/pseudo-elements/index.html b/files/pt-br/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..a457c9ac9a --- /dev/null +++ b/files/pt-br/web/css/pseudo-elements/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudo-elementos +slug: Web/CSS/Pseudo-elementos +tags: + - CSS + - Principiantes + - Pseudo-elementos + - Referencia + - Seletores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
+ +
+ +
/* A primeira linha de todo elemento <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

+
+ +

Sintaxe

+ +
seletor::pseudo-elemento {
+  propriedade: valor;
+}
+
+ +

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

+ +

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

+ +

Índice de pseudo-elementos comuns

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Ver também

+ + diff --git a/files/pt-br/web/css/reference/index.html b/files/pt-br/web/css/reference/index.html new file mode 100644 index 0000000000..1afbf4890e --- /dev/null +++ b/files/pt-br/web/css/reference/index.html @@ -0,0 +1,75 @@ +--- +title: Referência de CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +{{CSSRef}} + +

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

+ +

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

+ +

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

+ +

{{ CSS_Ref() }}

+ +

Seletores

+ + + +

Miscelânea

+ + + +

Conceitos

+ + diff --git a/files/pt-br/web/css/replaced_element/index.html b/files/pt-br/web/css/replaced_element/index.html new file mode 100644 index 0000000000..22ba1b8ad0 --- /dev/null +++ b/files/pt-br/web/css/replaced_element/index.html @@ -0,0 +1,40 @@ +--- +title: Elemento substituído +slug: Web/CSS/Elemento_substituido +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef()}}
+ +

Sumario

+ +

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

+ + + +

Some elements are treated as replaced elements only in specific cases:

+ + + +

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

+ +

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

+ +

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

+ +

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/resolved_value/index.html b/files/pt-br/web/css/resolved_value/index.html new file mode 100644 index 0000000000..a045149bc7 --- /dev/null +++ b/files/pt-br/web/css/resolved_value/index.html @@ -0,0 +1,40 @@ +--- +title: Valor Resolvido +slug: Web/CSS/Valor_resolvido +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/seletor_de_atributos/index.html deleted file mode 100644 index 88881a61ea..0000000000 --- a/files/pt-br/web/css/seletor_de_atributos/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Seletor de atributos -slug: Web/CSS/Seletor_de_atributos -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

O seletor de atributos combina elementos baseado no valor de um atributo dado.

- -
/* <a> elementos com um atributo de título  */
-a[title] {
-  color: purple;
-}
-
-/* <a> elementos combinando com um href "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* <a> elementos com um href contendo "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* <a> elementos com href terminando em ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Representa um elemento com atributo de nome attr.
-
[attr=value]
-
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
-
[attr~=value]
-
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
-
[attr|=value]
-
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
-
[attr^=value]
-
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
-
[attr$=value]
-
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
-
[attr*=value]
-
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
-
[attr operator value i]
-
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
-
- -

Exemplos

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Links internos, começando com "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links com "example" em qualquer lugar da URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links com "insensitive" em qualquer lugar da URL,
-   independentemente da capitalização */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links com final ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Resultado

- -

{{EmbedLiveSample('Links')}}

- -

Languages

- -

CSS

- -
/* Todas divs com um atributo `lang` em negrito. */
-div[lang] { font-weight: bold; }
-/* Todas divs com US English em azul (blue). */
-div[lang~="en-us"] { color: blue; }
-/* Todas divs onde Portuguese esta em verde (green). */
-div[lang="pt"] { color: green; }
-/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
-div[lang|="zh"] { color: red; }
-/* Todas divs com Traditional Chinese `data-lang` que é purple. */
-/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
-div[data-lang="zh-TW"] { color: purple; }
-
- -

 

- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
- -

Resultado

- -

{{EmbedLiveSample('Languages')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
- -

Browser compatibilidade

- - - -

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/seletor_universal/index.html deleted file mode 100644 index 15e64a08ca..0000000000 --- a/files/pt-br/web/css/seletor_universal/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Seletor universal -slug: Web/CSS/Seletor_universal -tags: - - CSS - - Referências - - Seletores -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

- -
/* Seleciona todos os elementos */
-* {
-  color: green;
-}
- -

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

- - - -

Sintaxe

- -
* { propriedades de estilo }
- -

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

- -

Exemplos

- -

CSS

- -
* [lang^=pt] {
-  color: green;
-}
-
-*.atencao {
-  color: red;
-}
-
-*#conteudoprincipal {
-  border: 1px solid blue;
-}
-
-.flutuando {
-  float: left
-}
-
-/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
-.flutuando + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="atencao">
-  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
-</p>
-<p id="conteudoprincipal" lang="pt-pt">
-  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
-</p>
- -

Resultado

- -

{{EmbedLiveSample('Exemplos')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Compatibilidade dos Browsers

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/seletores_css/index.html deleted file mode 100644 index 644d9d87e9..0000000000 --- a/files/pt-br/web/css/seletores_css/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Seletores CSS -slug: Web/CSS/Seletores_CSS -tags: - - CSS - - Referência(2) - - Seletores - - Seletores CSS -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

- -

Seletores Básicos

- -
-
Seletor por tag
-
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
- Sintaxe: nome-da-tag
- Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
-
Seletor por classe
-
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
- Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
-
Seletor por ID
-
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
- Sintaxe: #nome-do-id
- Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
-
Seletores universais
-
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
- Sintaxe: * ns|* *|*
- Exemplo: * irá corresponder a todos os elementos do documento.
-
Seletores por atributo
-
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
- Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
- Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
-
- -

Combinadores

- -
-
Seletores de irmãos adjacentes
-
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
- Sintaxe: A + B
- Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
-
Seletores gerais de irmãos
-
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
- Sintaxe: A ~ B
- Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
-
Seletor de filhos
-
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
- Sintaxe: A > B
- Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
-
Seletor de descendentes
-
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
- Sintaxe: A B
- Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
-
- -

Pseudo-classes

- -

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

- -

Pseudo-elementos

- -

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/sintaxe/index.html deleted file mode 100644 index 4d6ff0bf1c..0000000000 --- a/files/pt-br/web/css/sintaxe/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Sintaxe -slug: Web/CSS/sintaxe -translation_of: Web/CSS/Syntax ---- -

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

- - - -

Declarações do CSS

- -

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

- -

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

- -

css syntax - declaration.png

- -

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

- -

Blocos de declaração CSS

- -

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

- -

css syntax - block.png

- -

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

- -

css syntax - declarations block.png

- -
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
- -

Regras CSS

- -

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

- -

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

- -

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

- -
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
-
-Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
- -

CSS statements

- -

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

- -

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

- -

css syntax - statements Venn diag.png

- -

There are different kinds of statements:

- - - -

Any statement which isn't a rule or an at-rule is invalid and ignored.

- -

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

- -

See also

- - diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/sintexe_valor/index.html deleted file mode 100644 index d14bcaecdf..0000000000 --- a/files/pt-br/web/css/sintexe_valor/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: Sintexe do valor -slug: Web/CSS/Sintexe_valor -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

- -

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

- -

Tipos de componente

- -

Keywords

- -

Generic keywords

- -

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

- -

The specific case of inherit, initial and unset

- -

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

- -

Literals

- -

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

- -

Both symbols appear literally in a value definition.

- -

Data types

- -

Basic data types

- -

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Non-terminal data types

- -

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

- -

Non-terminal data types are of two kinds:

- - - -

Component value combinators

- -

Brackets

- -

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

- -
bold [ thin && <length> ]
- -

This example matches the following values:

- - - -

But not:

- - - -

Juxtaposition

- -

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

- -
bold <length> , thin
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Double ampersand

- -

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

- -
bold && <length>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
- -

Double bar

- -

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
- -

Single bar

- -

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

This example matches the following values:

- - - -

But not:

- - - -
-

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

-
- -

Component value multipliers

- -

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

- -

Note that multipliers cannot be added and have all precedence over combinators.

- -

Asterisk (*)

- -

The asterisk multiplier indicates that the entity may appear zero, one or several times.

- -
bold smaller*
- -

This example matches the following values:

- - - -

But not:

- - - -

Plus (+)

- -

The plus multiplier indicates that the entity may appear one or several times.

- -
bold smaller+
- -

This example matches the following values:

- - - -

But not:

- - - -

Question mark (?)

- -

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

- -
bold smaller?
- -

This example matches the following values:

- - - -

But not:

- - - -

Curly braces ({ })

- -

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

- -
bold smaller{1,3}
- -

This example matches the following values:

- - - -

But not:

- - - -

Hash mark (#)

- -

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

- -
bold smaller#
- -

This example matches the following values:

- - - -

But not:

- - - -

Exclamation point (!)

- -

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

- -
[ bold? smaller? ]!
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Summary

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
- -

See also

- - diff --git a/files/pt-br/web/css/specified_value/index.html b/files/pt-br/web/css/specified_value/index.html new file mode 100644 index 0000000000..939aa09234 --- /dev/null +++ b/files/pt-br/web/css/specified_value/index.html @@ -0,0 +1,44 @@ +--- +title: Valor Especifícado +slug: Web/CSS/valor_espeficifco +tags: + - CSS + - Iniciante + - Web +translation_of: Web/CSS/specified_value +--- +

{{CSSRef}}

+ +

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

+ +
    +
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. +
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. +
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/syntax/index.html b/files/pt-br/web/css/syntax/index.html new file mode 100644 index 0000000000..4d6ff0bf1c --- /dev/null +++ b/files/pt-br/web/css/syntax/index.html @@ -0,0 +1,70 @@ +--- +title: Sintaxe +slug: Web/CSS/sintaxe +translation_of: Web/CSS/Syntax +--- +

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

+ + + +

Declarações do CSS

+ +

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

+ +

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

+ +

css syntax - declaration.png

+ +

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

+ +

Blocos de declaração CSS

+ +

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

+ +

css syntax - block.png

+ +

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

+ +

css syntax - declarations block.png

+ +
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
+ +

Regras CSS

+ +

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

+ +

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

+ +

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

+ +
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
+
+Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
+ +

CSS statements

+ +

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

+ +

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

+ +

css syntax - statements Venn diag.png

+ +

There are different kinds of statements:

+ + + +

Any statement which isn't a rule or an at-rule is invalid and ignored.

+ +

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

+ +

See also

+ + diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/tools/border-image_generator/index.html deleted file mode 100644 index d350bce6b5..0000000000 --- a/files/pt-br/web/css/tools/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Gerador de Border-image -slug: Web/CSS/Tools/Border-image_generator -tags: - - Alternativas CSS -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

- -
-

Border Image Generator

- -

HTML Content

- -
    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
-            </div>
-        </div>
-
-        <div id="load-actions" class="group section">
-            <div id="toggle-gallery" data-action="hide"> </div>
-            <div id="load-image" class="button"> Upload image </div>
-            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
-            <div id="load-remote" class="button"> </div>
-        </div>
-
-        <div id="general-controls" class="group section">
-            <div class="name"> Control Box </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">scale</div>
-                <div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">draggable</div>
-                <div class="ui-checkbox" data-topic='drag-subject'></div>
-            </div>
-            <div class="property right">
-                <div class="name">section height</div>
-                <div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000">
-                </div>
-            </div>
-        </div>
-
-        <div id="preview_section" class="group section">
-            <div id="subject">
-                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
-                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-        <!-- controls -->
-        <div id="controls" class="group section">
-
-            <!-- border-image-slice -->
-            <div id="border-slice-control" class="category">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox" data-topic='slice-fill'></div>
-                </div>
-            </div>
-
-            <!-- border-image-width -->
-            <div id="border-width-control" class="category">
-                <div class="title"> border-image-width </div>
-            </div>
-
-            <!-- border-image-outset -->
-            <div id="border-outset-control" class="category">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-            <!-- other-settings -->
-            <div id="aditional-properties" class="category">
-                <div class="title"> aditional-properties </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
-                        <div data-value="0">repeat</div>
-                        <div data-value="0">stretch</div>
-                        <div data-value="0">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
-                        <div data-value="1">repeat</div>
-                        <div data-value="1">stretch</div>
-                        <div data-value="1">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
-                    </div>
-                </div>
-            </div>
-
-
-            <div id="output" class="category">
-                <div class="title"> CSS Code </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span id="out-border-slice" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span id="out-border-width" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span id="out-border-outset" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span id="out-border-repeat" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span id="out-border-source" class="value">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div>
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/tools/border-radius_generator/index.html deleted file mode 100644 index a7db08eb69..0000000000 --- a/files/pt-br/web/css/tools/border-radius_generator/index.html +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: Gerador de Border-radius -slug: Web/CSS/Tools/Border-radius_generator -tags: - - CSS - - Ferramentas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

-
-

border-radius

-

HTML Content

- 
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> rounded corner </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> select border units </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
-

CSS Content

- 
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
-

JavaScript Content

- 
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
-

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

-

 

diff --git a/files/pt-br/web/css/universal_selectors/index.html b/files/pt-br/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..15e64a08ca --- /dev/null +++ b/files/pt-br/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Seletor universal +slug: Web/CSS/Seletor_universal +tags: + - CSS + - Referências + - Seletores +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

+ +
/* Seleciona todos os elementos */
+* {
+  color: green;
+}
+ +

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxe

+ +
* { propriedades de estilo }
+ +

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

+ +

Exemplos

+ +

CSS

+ +
* [lang^=pt] {
+  color: green;
+}
+
+*.atencao {
+  color: red;
+}
+
+*#conteudoprincipal {
+  border: 1px solid blue;
+}
+
+.flutuando {
+  float: left
+}
+
+/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
+.flutuando + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="atencao">
+  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
+</p>
+<p id="conteudoprincipal" lang="pt-pt">
+  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample('Exemplos')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Compatibilidade dos Browsers

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/used_value/index.html b/files/pt-br/web/css/used_value/index.html new file mode 100644 index 0000000000..18c48dedb5 --- /dev/null +++ b/files/pt-br/web/css/used_value/index.html @@ -0,0 +1,114 @@ +--- +title: Valor usado +slug: Web/CSS/Valor_usado +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

+ +

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

+ +

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

+ +

Detalhes

+ +

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

+ +

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

+ +

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

+ +

Exemplo

+ +

Compute and show the used width of three elements (updates on resize):

+ +

HTML

+ +
<div id="no-width">
+  <p>No explicit width.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Explicit width: 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Explicit width: inherit.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see: */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.getElementById(id);
+  var par = document.querySelector(`#${id} .show-used-width`);
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '80%', '372px') }}

+ +

 

+ +

Diferentes valores computados

+ +

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

+ + + +

Especificações

+ +

CSS Level 2: Used Values

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/valor_atual/index.html deleted file mode 100644 index b7f9307a58..0000000000 --- a/files/pt-br/web/css/valor_atual/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Valor atual -slug: Web/CSS/Valor_atual -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/valor_computado/index.html deleted file mode 100644 index a4932b8d40..0000000000 --- a/files/pt-br/web/css/valor_computado/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Valor Computado -slug: Web/CSS/valor_computado -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/computed_value ---- -
{{cssref}}
- -

The computed value of a CSS property is computed from the specified value by:

- - - -

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

- -

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

- -

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

- -

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

- -

Notas

- -

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/valor_espeficifco/index.html deleted file mode 100644 index 939aa09234..0000000000 --- a/files/pt-br/web/css/valor_espeficifco/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Valor Especifícado -slug: Web/CSS/valor_espeficifco -tags: - - CSS - - Iniciante - - Web -translation_of: Web/CSS/specified_value ---- -

{{CSSRef}}

- -

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

- -
    -
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. -
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. -
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/valor_inicial/index.html deleted file mode 100644 index fea27bfe3c..0000000000 --- a/files/pt-br/web/css/valor_inicial/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Valor inicial -slug: Web/CSS/valor_inicial -tags: - - CSS - - Iniciante - - Web - - valor inicial -translation_of: Web/CSS/initial_value ---- -
{{cssref}}
- -

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

- - - -
-

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/valor_resolvido/index.html deleted file mode 100644 index a045149bc7..0000000000 --- a/files/pt-br/web/css/valor_resolvido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Valor Resolvido -slug: Web/CSS/Valor_resolvido -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/valor_usado/index.html deleted file mode 100644 index 18c48dedb5..0000000000 --- a/files/pt-br/web/css/valor_usado/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Valor usado -slug: Web/CSS/Valor_usado -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

- -

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

- -

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

- -

Detalhes

- -

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

- -

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

- -

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

- -

Exemplo

- -

Compute and show the used width of three elements (updates on resize):

- -

HTML

- -
<div id="no-width">
-  <p>No explicit width.</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>Explicit width: 50%.</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>Explicit width: inherit.</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* Make results easier to see: */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.getElementById(id);
-  var par = document.querySelector(`#${id} .show-used-width`);
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Example', '80%', '372px') }}

- -

 

- -

Diferentes valores computados

- -

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

- - - -

Especificações

- -

CSS Level 2: Used Values

- -

Veja também

- - diff --git a/files/pt-br/web/css/value_definition_syntax/index.html b/files/pt-br/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..d14bcaecdf --- /dev/null +++ b/files/pt-br/web/css/value_definition_syntax/index.html @@ -0,0 +1,436 @@ +--- +title: Sintexe do valor +slug: Web/CSS/Sintexe_valor +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

+ +

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

+ +

Tipos de componente

+ +

Keywords

+ +

Generic keywords

+ +

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

+ +

The specific case of inherit, initial and unset

+ +

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

+ +

Literals

+ +

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

+ +

Both symbols appear literally in a value definition.

+ +

Data types

+ +

Basic data types

+ +

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Non-terminal data types

+ +

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

+ +

Non-terminal data types are of two kinds:

+ + + +

Component value combinators

+ +

Brackets

+ +

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

+ +
bold [ thin && <length> ]
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Juxtaposition

+ +

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

+ +
bold <length> , thin
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Double ampersand

+ +

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

+ +
bold && <length>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
+ +

Double bar

+ +

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
+ +

Single bar

+ +

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
+

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

+
+ +

Component value multipliers

+ +

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

+ +

Note that multipliers cannot be added and have all precedence over combinators.

+ +

Asterisk (*)

+ +

The asterisk multiplier indicates that the entity may appear zero, one or several times.

+ +
bold smaller*
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Plus (+)

+ +

The plus multiplier indicates that the entity may appear one or several times.

+ +
bold smaller+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Question mark (?)

+ +

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

+ +
bold smaller?
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Curly braces ({ })

+ +

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

+ +
bold smaller{1,3}
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Hash mark (#)

+ +

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

+ +
bold smaller#
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Exclamation point (!)

+ +

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

+ +
[ bold? smaller? ]!
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Summary

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
+ +

See also

+ + diff --git a/files/pt-br/web/css/visual_formatting_model/index.html b/files/pt-br/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..a37a0cc7b0 --- /dev/null +++ b/files/pt-br/web/css/visual_formatting_model/index.html @@ -0,0 +1,227 @@ +--- +title: Modelo de formatação visual +slug: Web/CSS/Modelo_Visual +tags: + - CSS + - CSS conceitos basicos + - Intermediário +translation_of: Web/CSS/Visual_formatting_model +--- +

{{CSSRef}}

+ +

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

+ +

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

+ + + +

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

+ +

 Gerando um Box

+ +

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

+ +

Block-level elements and block boxes

+ +

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

+ +

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

+ +

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

+ +

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

+ +

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

+ +

Block-level boxes that also are block container boxes are called block boxes.

+ +

Anonymous block boxes

+ +

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

+ +

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

+ +

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

+ +

Exemplo

+ +

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

+ +
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
+ +

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

+ +

anonymous_block-level_boxes.png

+ +

Leading to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

+ +

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

+ +

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

+ +

Exemplo

+ +

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

+ +
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
+ +

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

+ +

+ +

Which leads to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Inline-level elements and inline boxes

+ +

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

+ +

venn_inlines.png

+ +
+

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

+
+ +

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

+ +
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
+ +
Atomic inline boxes cannot be split into several lines in an inline formatting context. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>can be split in several
+   lines as it</span> is an inline box.
+</div>
+
+ +

which leads to:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>cannot be split in several
+   lines as it</span> is an inline-block box.
+</div>
+
+ +

which leads to:

+ +
The text in the span cannot be split into several lines as it is an inline-block box.
+
+
+ +

Anonymous inline boxes

+ +

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

+ +

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

+ +
Example TBD
+ +

Outros tipos de boxes

+ +

Line boxes

+ +

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

+ +

These boxes are technical, and Web authors do not usually have to bother with them.

+ +

Run-in boxes

+ +

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

+ +
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
+ +

Model-induced boxes

+ +

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

+ + + +

Positioning schemes

+ +

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

+ + + +

Normal flow

+ +

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

+ +

Exemplo

+ +
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
+
+[image]
+
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
+
+[image]
+ +

There are two sub-cases of the normal flow: static positioning and relative positioning:

+ + + +

Floats

+ +

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

+ +

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

+ +

[image]

+ +

Absolute positioning

+ +

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

+ +

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

+ +

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/word-wrap/index.html deleted file mode 100644 index c23f4b966d..0000000000 --- a/files/pt-br/web/css/word-wrap/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: word-wrap -slug: Web/CSS/word-wrap -translation_of: Web/CSS/overflow-wrap ---- -
{{CSSRef}} {{SeeCompatTable}}
- -

Resumo

- -

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

- -
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
- -

{{cssinfo}}

- -

Sintaxe

- -
word-wrap:  normal | break-word
- -

Valores

- -
-
normal
-
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
-
break-word
-
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
-
- -

Exemplos

- -
p { width: 13em; background: gold; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -
p { width: 13em; background: gold; word-wrap: break-word; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
- -

Compatibilidade entre navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
-
- - - -

Veja também

- - diff --git a/files/pt-br/web/events/abort/index.html b/files/pt-br/web/events/abort/index.html deleted file mode 100644 index 62243a2762..0000000000 --- a/files/pt-br/web/events/abort/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

O evento abort é disparado quando o carregamento de um recurso foi interrompido.

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("UIEvent")}} se gerado a partir da interface do usuário, caso contrário será {{domxref("Event")}}.
-
Bubbles
-
Não
-
Cancelável
-
Não
-
Alvo
-
{{domxref("Element")}}
-
Ação Padrão
-
Nenhuma
-
- -

Propriedades

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (O mais elevado da árvore DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{domxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{domxref("Boolean")}}É possível cancelar o evento?
view {{readOnlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window do documento)
detail {{readOnlyInline}}long (float)0.
-
diff --git a/files/pt-br/web/events/beforeunload/index.html b/files/pt-br/web/events/beforeunload/index.html deleted file mode 100644 index 6d6034318c..0000000000 --- a/files/pt-br/web/events/beforeunload/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -

O evento beforeunload é disparado quando o window, o document e seus recursos estão prestes a ser descarregados.

- -

Quando uma string é atribuída na propriedade returnValue do Event, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.

- - - - - - - - - - - - - - - - - - - - -
BubblesNão
CancelableSim
Target objectsdefaultView
Interface{{domxref("Event")}}
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (the topmost target in the DOM tree).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}É possível cancelar o evento?
returnValue{{domxref("DOMString")}}O valor de retorno do evento (a mensagem que será exibida ao usuário).
- -

Exemplos

- -
window.addEventListener("beforeunload", function (event) {
-  event.returnValue = "\o/";
-});
-
-// equivalente a
-window.addEventListener("beforeunload", function (event) {
-  event.preventDefault();
-});
- -

Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome <34
-});
- -

Notas

- -

Quando este evento retorna um valor não vazio (non-void), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a string retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja {{bug("588292")}}.

- -

Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} e {{domxref("window.prompt()")}} serão ignoradas durante este evento. Para mais detalhes veja a especificação HTML5 (em inglês).

- -

Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em about:config que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.

- -

Veja também

- - diff --git a/files/pt-br/web/events/blur/index.html b/files/pt-br/web/events/blur/index.html deleted file mode 100644 index 7eb9263be2..0000000000 --- a/files/pt-br/web/events/blur/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: blur (evento) -slug: Web/Events/blur -translation_of: Web/API/Element/blur_event ---- -

O evento blur é acionado quando um elemento perde foco. A diferença principal entre este evento e focusout é que apenas o segundo 'borbulha'.

- -

Informação geral

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Não
-
Cancelável
-
Não
-
Alvo
-
Elemento
-
Ação padrão
-
Nenhuma
-
- -

{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o body do documento.{{NoteEnd}}

- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Delegação do evento

- -

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento focusout nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do addEventListener para true:

- -

Conteúdo HTML 

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

Conteúdo JavaScript

- -
var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
- -

{{EmbedLiveSample('Event_delegation')}}

- -

Compatibilidade entre navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
-
- -

[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).

- -

Eventos relacionados

- - diff --git a/files/pt-br/web/events/domcontentloaded/index.html b/files/pt-br/web/events/domcontentloaded/index.html deleted file mode 100644 index eb54671921..0000000000 --- a/files/pt-br/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load quando DOMContentLoaded seria muito mais apropriado.

- -
-

Nota: Javascript Síncrono pausa a análise do DOM.

-
- -

Acelerando

- -

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

- -
-
- -

Informações gerais

- -
-
Especificação
-
HTML5
-
Interface
-
Event
-
Propaga
-
Sim
-
Cancelável
-
Sim (embora especificado como evento simples não-cancelável)
-
Alvo
-
Document
-
Ação Default
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Alvo do evento (O topo do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento
bubbles {{readonlyInline}}{{jsxref("Boolean")}}O evento é por padrão bubbles ou não.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}O evento pode ser cancelado ou não.
- -

Exemplo

- -

Básico

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM completamente carregado e analisado");
-  });
-</script>
-
- -

Forçando o atraso do DOMContentLoaded

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM completamente carregado e analisado");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
-</script>
-
- -

 

- -

Verificando se o carregamento está completo

- -

DOMContentLoaded pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.

- -
function doSomething() {
-  console.info("DOM carregado");
-}
-
-if (document.readyState === "loading") {  // Ainda carregando
-  document.addEventListener("DOMContentLoaded", doSomething);
-} else {  // `DOMContentLoaded` foi disparado
-  doSomething();
-}
- -

 

- -

Compatibilidade entre Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico0.2{{ CompatGeckoDesktop("1") }}9.09.03.1
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

- -

Cross-browser fallback

- -

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

- -

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/events/focus/index.html b/files/pt-br/web/events/focus/index.html deleted file mode 100644 index 9f6dd7117d..0000000000 --- a/files/pt-br/web/events/focus/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: focus -slug: Web/Events/focus -translation_of: Web/API/Element/focus_event ---- -

O evento focus é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento focusin, é que esse segundo "borbulha".

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{ domxref("FocusEvent") }}
-
Borbulha
-
Não
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -
Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Eventos Delegados

- -

Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento  focusin que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento  addEventListener  como true:

- -

{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

- -

(Exemplo de codigo do evento blur (event))

- -

Compatibilidade de Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
-
- -

Eventos Relacionais

- - diff --git a/files/pt-br/web/events/focusin/index.html b/files/pt-br/web/events/focusin/index.html deleted file mode 100644 index 797424de54..0000000000 --- a/files/pt-br/web/events/focusin/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusin -slug: Web/Events/focusin -translation_of: Web/API/Element/focusin_event ---- -

O evento focusin é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento  focus, é que apenas o focusin delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Sim
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilidade com Demais Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Eventos Relacionais

- - diff --git a/files/pt-br/web/events/focusout/index.html b/files/pt-br/web/events/focusout/index.html deleted file mode 100644 index 8f72b211b2..0000000000 --- a/files/pt-br/web/events/focusout/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusout -slug: Web/Events/focusout -translation_of: Web/API/Element/focusout_event ---- -

O evento focusout é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento blur, é que esse ultimo não gera "borbulhas".

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Sim
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilidade dos Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Eventos Relcionados

- - diff --git a/files/pt-br/web/events/input/index.html b/files/pt-br/web/events/input/index.html deleted file mode 100644 index dd69baf988..0000000000 --- a/files/pt-br/web/events/input/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: input -slug: Web/Events/input -translation_of: Web/API/HTMLElement/input_event ---- -

O evento input do DOM é disparado sincronicamente quando o valor de um elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} é alterado. (Para elementos input com type=checkbox ou type=radio, o evento input não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no contenteditable editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha contenteditable como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do designMode editors.

- -

Informações gerais

- -
-
Specification
-
HTML5, DOM Level 3 Events
-
Interface
-
{{domxref("Event")}}, {{domxref("InputEvent")}}
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
The value or the content is modified.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Compatibilidade dos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9[2]{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatVersionUnknown}}15{{CompatVersionUnknown}}
on contenteditable element{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}[4] -

 

- 		15{{CompatVersionUnknown}}
when designMode is "on"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}15{{CompatVersionUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("12")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
on contenteditable element{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
when designMode is "on"{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on Mac OS X.

- -

[2] IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

- -

[3] Prior to Opera 15, Opera did not fire an input event after dropping text in an input field.

- -

[4] The event target is the innermost element at the caret position.

- -

Veja também

- - - -

Also the change event is related. change fires less often than input – it only fires when the changes are committed by the user.

diff --git a/files/pt-br/web/events/load/index.html b/files/pt-br/web/events/load/index.html deleted file mode 100644 index db04b1ecbe..0000000000 --- a/files/pt-br/web/events/load/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: load -slug: Web/Events/load -translation_of: Web/API/Window/load_event ---- -
O evento de load é acionado quando um recurso e seus recursos
-dependentes terminaram de carregar.
- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
UIEvent
-
Bubbles
-
Não
-
Cancelavel
-
Não
-
Alvo
-
Window
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Exemplo

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Todos os recursos terminaram o carregamento!");
-  });
-</script>
-
- -

 

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/events/readystatechange/index.html b/files/pt-br/web/events/readystatechange/index.html deleted file mode 100644 index 185350cb54..0000000000 --- a/files/pt-br/web/events/readystatechange/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: readystatechange -slug: Web/Events/readystatechange -translation_of: Web/API/Document/readystatechange_event ---- -

{{ApiRef}}

- -

O evento readystatechange é ativado quando o atributo readyState de um documento é alterado.

- -

Informações gerais

- -
-
Especificação
-
HTML5
-
Interface
-
Event
-
Propaga
-
Não
-
Cancelável
-
Não
-
Alvo
-
Document
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Exemplo

- -
// alternativa ao DOMContentLoaded
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
- -

Compatibilidade entre Navegadores

- -

Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento DOMContentLoaded (veja a seção cross-browser fallback).

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/guide/css/css_media_queries/index.html b/files/pt-br/web/guide/css/css_media_queries/index.html deleted file mode 100644 index 4b9728eebd..0000000000 --- a/files/pt-br/web/guide/css/css_media_queries/index.html +++ /dev/null @@ -1,639 +0,0 @@ ---- -title: Usando Media Queries -slug: Web/Guide/CSS/CSS_Media_queries -tags: - - CSS - - Desenho Responsivo - - Design Responsivo -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

- -

Sintaxe

- -

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

- -
<!-- CSS media query em um elemento de link -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- CSS media query dentro de um stylesheet -->
-
-<style>
-@media (max-width: 600px)
-{
-  .facet_sidebar
-   {
-    display: none;
-   }
-}
-</style>
- -

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

- -

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

- -

Operadores lógicos

- -

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

- -

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

- -

and

- -

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:

- -
@media (min-width: 700px) { ... }
- -

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
- -

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

- -

Listas separadas por vírgula

- -

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

- -

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Acima, se eu estivesse em um dispositivo screen com um viewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como @media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

- -

not

- -

A palavra chave not se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado). Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas. A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:

- -
@media not all and (monochrome) { ... }
-
- -

Isto significa que a query é avaliada assim:

- -
@media not (all and (monochrome)) { ... }
-
- -

... em vez disso:

- -
@media (not all) and (monochrome) { ... }
- -

Um outro exemplo, veja a media query seguinte:

- -
@media not screen and (color), print and (color)
-
- -

É avalida desta forma:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

Media queries são case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

- -
Nota: Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.
- -

Características de mídia

- -

A maioria das media features podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

- -
Nota: Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.
- -

cor

- -

Valor: {{cssxref("<color>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

- -
Nota: Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.
- -

Exemplos

- -

Aplicar uma folha de estilo a todos dispositivos:

- -
@media all and (color) { ... }
-
- -

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: Sim

- -

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

- -

Exemplos

- -

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

- -
@media all and (color-index) { ... }
-
- -

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

- -

Exemplo

- -

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

- -

device-aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

- -

Exemplo

- -

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

- -

device-height

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

- -

Exemplo

- -

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

- -

Exemplo

- -

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Valor: {{cssxref("<integer>")}}
- Mídia: todas
- Aceita prefixos min/max: não

- -

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

- -

Exemplo

- -

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Nota:  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.
- -

height

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: yes

- -

A característica height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

- -
Nota: Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features width e height.
- -

monochrome

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

- -

Exemplos

- -

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

- -
@media all and (monochrome) { ... }
-
- -

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Valor: landscape | portrait
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

- -

Exemplo

- -

Para aplicar a folha de estilo apenas em orientação portrait:

- -
@media all and (orientation: portrait) { ... }
- -
Nota: Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.
- -

resolution

- -

Valor: {{cssxref("<resolution>")}}
- Mídia: {{cssxref("Media/Bitmap", "bitmap")}}
- Aceita prefixos min/max: sim

- -

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

- -

Exemplos

- -

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Valor: progressive | interlace
- Mídia: {{cssxref("Media/TV")}}
- Aceita prefixos min/max: não

- -

Descreve o processo de digitalização de dispositivos saída de televisão.

- -

Exemplo

- -

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

A media feature width descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

- -

Nota:
- Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em media queries usando media features width e height.

- -

Exemplos

- -

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa query:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Essa media query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Essa query especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Especificação da Mozilla para mídias características

- -

Mozilla oferece várias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max:no

- -

Se o usuário tenha configurado seu dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência padrão blue, ou não está num Mac OS X, o valor é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se o usuário está usando Maemo com o tema original, o valor é 1; Se está usando o mais novo tema Fremantle, o valor é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Valor: {{cssxref("<number>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Dar o número de pixels do dispositivo por pixels do CSS.

- -
-

Não use este recurso.

- -

Em vez disso, use o recurso resolution com a unidade dppx.
-
- -moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e -webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportam dppx.

- -

Exemplo:

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
-       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
-       (min-resolution: 2dppx),             /* Forma padrão */
-       (min-resolution: 192dpi)             /* dppx fallback */
- -

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.

-
- -
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

- - - -

Isto é fornecido pelas skins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Exemplo

- -

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

Isto é previsto para skins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

- -

Compatibilidade no navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
Grade{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Resolução{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
- {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - diff --git "a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" "b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" deleted file mode 100644 index c2f5f9f4ce..0000000000 --- "a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Usando CSS media queries (consultas de mídia em CSS) -slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) -tags: - - CSS - - Guía - - Iniciante - - media query ---- -

Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.

- -

Sintaxe

- -

Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.

- -

Fonte:

- -

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

- -

 

diff --git a/files/pt-br/web/guide/css/scaling_background_images/index.html b/files/pt-br/web/guide/css/scaling_background_images/index.html deleted file mode 100644 index d7c3ccfa3f..0000000000 --- a/files/pt-br/web/guide/css/scaling_background_images/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Alterando a escala das imagens de background -slug: Web/Guide/CSS/Scaling_background_images -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -

A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

- -

Duplicando uma imagem grande

- -

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

- -

- -

Isto pode ser conseguido usando o seguinte CSS:

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(firefox_logo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

- -

Esticando uma imagem

- -

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

- -
background-size: 300px 150px;
-
- -

O resultado fica assim:

- -

- -

Aumentando escala de uma imagem

- -

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

- -

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

- -

Valores especiais: "contain" e "cover"

- -

Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

- -

contain

- -

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

- -
-

{{ EmbedLiveSample("contain", "100%", "220") }}

-
- -
<div class="bgSizeContain">
-  <p>Tente redimensionar a janela e ver o que acontece.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

- -
{{ EmbedLiveSample("cover", "100%", "220") }}
- -

Os exemplos à seguir usam HTML & CSS:

- -
<div class="bgSizeCover">
-  <p>Tente redimensionar a janela e ver o que acontece.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Veja Também

- - diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/guide/css/understanding_z_index/index.html deleted file mode 100644 index 488ca0f600..0000000000 --- a/files/pt-br/web/guide/css/understanding_z_index/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Understanding CSS z-index -slug: Web/Guide/CSS/Understanding_z_index -tags: - - CSS - - Entendendo_CSS_z-index - - Guía - - Web - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

- -
-

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

-
- -

(from CSS 2.1 Section 9.9.1 - Layered presentation)

- -

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.

- -

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi  reservada na especificação do CSS  CSS-2.1 Appendix E para explicar melhor essas regras.

- -

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

- -
    -
  1. Stacking without z-index : Regras padrões de empilhamento
    2. -
  2. Stacking and float : Como lidar com elementos que usam float
    3. -
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. -
  4. The stacking context : Notas sobre contexto do empilhamento
    5. -
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. -
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. -
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. -
- -

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

- -
-

Original Document Information

- - -
- -

 

diff --git a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..632b54df75 --- /dev/null +++ b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,145 @@ +--- +title: Criando e disparando eventos +slug: Web/Guide/Events/criando_e_disparando_eventos +tags: + - Avançado + - DOM + - Guía + - JavaScript + - eventos +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

+ +

Criando eventos customizados

+ +

Eventos podem ser criados com o construtor Event da seguinte forma:

+ +
var event = new Event('build');
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispara o evento.
+elem.dispatchEvent(event);
+ +

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

+ +

Adicionando dados customizados – CustomEvent()

+ +

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

+ +

Por exemplo, o evento pode ser criado da seguinte forma:

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

Isso permitirá que você acesse dados customizados no listener do evento:

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

A forma antiga

+ +

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

+ +
// Cria o evento.
+var event = document.createEvent('Event');
+
+// Define que o nome do evento é 'build'.
+event.initEvent('build', true, true);
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) {
+  // e.target é igual a elem, neste caso
+}, false);
+
+// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
+elem.dispatchEvent(event);
+
+
+ +

Disparando eventos nativos

+ +

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+
+  if (cancelled) {
+    // Um listener invocou o método preventDefault.
+    alert("Cancelado");
+  } else {
+    // Nenhum listener invocou o método preventDefault.
+    alert("Não cancelado");
+  }
+}
+ +

Compatibilidade entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html b/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html deleted file mode 100644 index 632b54df75..0000000000 --- a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Criando e disparando eventos -slug: Web/Guide/Events/criando_e_disparando_eventos -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

- -

Criando eventos customizados

- -

Eventos podem ser criados com o construtor Event da seguinte forma:

- -
var event = new Event('build');
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Dispara o evento.
-elem.dispatchEvent(event);
- -

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

- -

Adicionando dados customizados – CustomEvent()

- -

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

- -

Por exemplo, o evento pode ser criado da seguinte forma:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Isso permitirá que você acesse dados customizados no listener do evento:

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

A forma antiga

- -

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

- -
// Cria o evento.
-var event = document.createEvent('Event');
-
-// Define que o nome do evento é 'build'.
-event.initEvent('build', true, true);
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) {
-  // e.target é igual a elem, neste caso
-}, false);
-
-// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Disparando eventos nativos

- -

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-
-  if (cancelled) {
-    // Um listener invocou o método preventDefault.
-    alert("Cancelado");
-  } else {
-    // Nenhum listener invocou o método preventDefault.
-    alert("Não cancelado");
-  }
-}
- -

Compatibilidade entre navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

Veja também

- - diff --git a/files/pt-br/web/guide/events/touch_events/index.html b/files/pt-br/web/guide/events/touch_events/index.html deleted file mode 100644 index df21cdf335..0000000000 --- a/files/pt-br/web/guide/events/touch_events/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Eventos do Toque -slug: Web/Guide/Events/Touch_events -tags: - - Avançado - - DOM - - Evento - - Guía - - Mobile - - Visualização -translation_of: Web/API/Touch_events ---- -

Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.

- -

Definições

- -
-
Surface
-
A superfície sensível ao toque. Pode ser uma tela ou trackpad.
-
- -
-
Touch point
-
Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.
-
- -

Interfaces

- -
-
{{ domxref("TouchEvent") }}
-
Representa um evento quando ocorre o estado de toque na superfície.
-
{{ domxref("Touch") }}
-
Representa um único ponto de contato entre o usuário e a superfície sensível a toque.
-
{{ domxref("TouchList") }}
-
Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.
-
{{ domxref("DocumentTouch") }}
-
Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .
-
- -

Exemplo

- -

Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.

- -
Nota: O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.
- -

Crie um canvas

- -
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
-  Seu browser não tem suporte ao elemento canvas.
-</canvas>
-<br>
-<button onclick="startup()">Initialize</button>
-<br>
-Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
-
- -

Configurado os eventos

- -

Quando uma página é carregada, a função startup() mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo onload (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).

- -
function startup() {
-  var el = document.getElementsByTagName("canvas")[0];
-  el.addEventListener("touchstart", handleStart, false);
-  el.addEventListener("touchend", handleEnd, false);
-  el.addEventListener("touchcancel", handleCancel, false);
-  el.addEventListener("touchleave", handleEnd, false);
-  el.addEventListener("touchmove", handleMove, false);
-  log("initialized.");
-}
-
- -

Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem.

- -

Rastreando novos toques

- -

Vamos acompanhar os toques em seu progresso.

- -
var ongoingTouches = new Array; 
- -

Quando ocorre um evento touchstart, indicando que um novo toque na superfície tenha ocorrido, a função abaixo handleStart() é chamada. 

- -
function handleStart(evt) {
-  evt.preventDefault();
-  log("touchstart.");
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    log("touchstart:"+i+"...");
-    ongoingTouches.push(copyTouch(touches[i]));
-    var color = colorForTouch(touches[i]);
-    ctx.beginPath();
-    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
-    ctx.fillStyle = color;
-    ctx.fill();
-    log("touchstart:"+i+".");
-  }
-}
-
- -

A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.

- -

Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.

- -

Desenhando movimento do toque

- -

Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.

- -
function handleMove(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    if(idx >= 0) {
-      log("continuing touch "+idx);
-      ctx.beginPath();
-      log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
-      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-      log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
-      ctx.lineTo(touches[i].pageX, touches[i].pageY);
-      ctx.lineWidth = 4;
-      ctx.strokeStyle = color;
-      ctx.stroke();
-
-      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
-      log(".");
-    } else {
-      log("can't figure out which touch to continue");
-    }
-  }
-}
-
- -

Esta interação sobre os toques também muda, mas parece em cache as  informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.

- -

Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.

- -

Depois de desenhar a linha, nós chamamos Array.splice() para substituir as informações previas sobre o ponto de toque com a informação atual no array ongoingTouches.

- -

Gerenciando o final do evento de toque 

- -

Quando o usuário retira o dedo da superfície , um evento touchend é disparado.  Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento touchleave disparado. Nós tratamos da mesma forma em ambos os casos:  chamamos  a função handleEnd(). A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.

- -
function handleEnd(evt) {
-  evt.preventDefault();
-  log("touchend/touchleave.");
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    if(idx >= 0) {
-      ctx.lineWidth = 4;
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-      ctx.lineTo(touches[i].pageX, touches[i].pageY);
-      ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
-      ongoingTouches.splice(idx, 1);  // remove it; we're done
-    } else {
-      log("can't figure out which touch to end");
-    }
-  }
-}
-
- -

Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos Array.splice(), nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.

- -

Tratando toques cancelados

- -

Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função handleCancel().

- -
function handleCancel(evt) {
-  evt.preventDefault();
-  log("touchcancel.");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    ongoingTouches.splice(i, 1);  // remove it; we're done
-  }
-}
-
- -

Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.

- -

Funções de conveniência

- -

Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro

- -

Selecionando a cor para cada toque

- -

A fim de fazer cada toque desenhar com uma cor diferente, a função  colorForTouch()  é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.

- -
function colorForTouch(touch) {
-  var r = touch.identifier % 16;
-  var g = Math.floor(touch.identifier / 3) % 16;
-  var b = Math.floor(touch.identifier / 7) % 16;
-  r = r.toString(16); // make it a hex digit
-  g = g.toString(16); // make it a hex digit
-  b = b.toString(16); // make it a hex digit
-  var color = "#" + r + g + b;
-  log("color for touch with identifier " + touch.identifier + " = " + color);
-  return color;
-}
-
- -

O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor  {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".

- -

Copiando touch objects

- -

Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.

- -
function copyTouch(touch) {
-  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
-}
- -

Encontrando um toque ongoing

- -

A função ongoingTouchIndexById() abaixo verifica através do array ongoingTouches para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.

- -
function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i < ongoingTouches.length; i++) {
-    var id = ongoingTouches[i].identifier;
-
-    if (id == idToFind) {
-      return i;
-    }
-  }
-  return -1;    // não econtrado
-}
-
- -

Mostrando o que está acontecendo

- -
function log(msg) {
-  var p = document.getElementById('log');
-  p.innerHTML = msg + "\n" + p.innerHTML;
-}
- -

If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.

- -

jsFiddle example

- -

Additional tips

- -

This section provides additional tips on how to handle touch events in your web application.

- -

Handling clicks

- -

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

- -
function onTouch(evt) {
-  evt.preventDefault();
-  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
-    return;
-
-  var newEvt = document.createEvent("MouseEvents");
-  var type = null;
-  var touch = null;
-  switch (evt.type) {
-    case "touchstart":    type = "mousedown";    touch = evt.changedTouches[0];break;
-    case "touchmove":        type = "mousemove";    touch = evt.changedTouches[0];break;
-    case "touchend":        type = "mouseup";    touch = evt.changedTouches[0];break;
-  }
-  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
-    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
-    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
-  evt.originalTarget.dispatchEvent(newEvt);
-}
-
- -

Calling preventDefault() only on a second touch

- -

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

- -
-
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}
- Disabled with 24 ({{ bug(888304) }})		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}(Yes){{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Gecko notes

- -

The dom.w3c_touch_events.enabled tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.

- -
-

Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.

-
- -
-

Note: As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open about:config and set the dom.w3c_touch_events.enabled pref to 2. The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.

-
- -
Note: Prior to {{Gecko("6.0") }}, Gecko offered a proprietary touch event API. That API is now deprecated; you should switch to this one.
diff --git a/files/pt-br/web/guide/graphics/index.html b/files/pt-br/web/guide/graphics/index.html new file mode 100644 index 0000000000..6abc792433 --- /dev/null +++ b/files/pt-br/web/guide/graphics/index.html @@ -0,0 +1,49 @@ +--- +title: Gráficos na Web +slug: Web/Guide/Gráficos +tags: + - 2D + - 3D + - Canvas + - Gráficos(2) + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. Imagens estáticas podem ser exibidas facilmente usando o elemento {{HTMLElement("img")}} ou configurando o background de elementos HTML usando a propriedade {{cssxref("background-image")}}. Você também pode construir gráficos em tempo real ou manipular imagens depois de criadas. Esses artigos fornecem conhecimento de como você pode realizar isto.

+ +
+
+

Gráficos 2D

+ +
+
Canvas
+
Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) ou Gráficos de Vetor Escalável permite que você use linhas, curvas e outras formas geométricas para renderizar gráficos. Com vetores, você pode criar imagens que se redimensionam perfeitamente para qualquer tamanho.
+
+ +

Ver todos...

+
+ +
+

Gráficos 3D

+ +
+
WebGL
+
Um guia para começar com WebGL, a API gráfica 3D para a Web. Esta tecnologia permite que você use o padrão OpenGL ES em conteúdo Web.
+
+ +

Video

+ +
+
Usando áudio e vídeo em HTML5
+
Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.
+
WebRTC
+
O RTC in WebRTC é um padrão para Real-Time Communications (comunicação em tempo real), tecnologia que permite a transmissão de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (peers).
+
+
+
diff --git "a/files/pt-br/web/guide/gr\303\241ficos/index.html" "b/files/pt-br/web/guide/gr\303\241ficos/index.html" deleted file mode 100644 index 6abc792433..0000000000 --- "a/files/pt-br/web/guide/gr\303\241ficos/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Gráficos na Web -slug: Web/Guide/Gráficos -tags: - - 2D - - 3D - - Canvas - - Gráficos(2) - - HTML5 - - SVG - - Web - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -

Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. Imagens estáticas podem ser exibidas facilmente usando o elemento {{HTMLElement("img")}} ou configurando o background de elementos HTML usando a propriedade {{cssxref("background-image")}}. Você também pode construir gráficos em tempo real ou manipular imagens depois de criadas. Esses artigos fornecem conhecimento de como você pode realizar isto.

- -
-
-

Gráficos 2D

- -
-
Canvas
-
Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.
-
SVG
-
Scalable Vector Graphics (SVG) ou Gráficos de Vetor Escalável permite que você use linhas, curvas e outras formas geométricas para renderizar gráficos. Com vetores, você pode criar imagens que se redimensionam perfeitamente para qualquer tamanho.
-
- -

Ver todos...

-
- -
-

Gráficos 3D

- -
-
WebGL
-
Um guia para começar com WebGL, a API gráfica 3D para a Web. Esta tecnologia permite que você use o padrão OpenGL ES em conteúdo Web.
-
- -

Video

- -
-
Usando áudio e vídeo em HTML5
-
Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.
-
WebRTC
-
O RTC in WebRTC é um padrão para Real-Time Communications (comunicação em tempo real), tecnologia que permite a transmissão de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (peers).
-
-
-
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 23f072420e..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Advanced animations -slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations -tags: - - Animation - - Animations - - Canvas - - animated - - efeitos em animações -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

No último capítulo nós fizemos algumas animações básicas  e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.

-
- -

Desenhe uma bola

- -

Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

 Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de 

- -

{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.

- -

Adicionando velocidade

- -

Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e) {
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Limites

- -

Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Primeira demonstração

- -

Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

Aceleração

- -

Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

Efeito de arrastar

- -

Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.

- -
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-ctx.fillRect(0, 0, canvas.width, canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

Adicione um controle de mouse

- -

 

- -

Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover, por exemplo. O clique por exemplo. O evento clique que libera a bola e deixa seu limite de novo.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e) {
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener('click', function(e) {
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Mova a bola usando seu mouse e libere - o com um clique.

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

Sair

- -

Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.

- -

Veja também:

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index f711570b9f..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,725 +0,0 @@ ---- -title: Aplicando estilos e cores -slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

No capítulo sobre desenhando formas com canvas, usamos apenas os estilos padrões de preenchimento e linha. Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes. Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.

-
- -

Cores

- -

Até agora só vimos métodos do contexto de desenho. Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar: fillStyle e strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Define o estilo usado ao preencher (fill) formas.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Define o estilo para os contornos (strokes) das formas.
-
- -

color é uma string que representa um CSS {{cssxref("<color>")}}, um objeto gradiente, ou um objeto padrão. Examinaremos sobre objetos de gradiente e padrão mais tarde. Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto (valor de cor no CSS é #000000).

- -
-

Nota: Quando você definir as propriedades strokeStyle e/ou fillStyle , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade fillStyle ou strokeStyle.

-
- -

As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("<color>")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
-
- -

Um fillStyle exemplo

- -

Neste exemplo, nós vamos mais uma vez utilizar dois for loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis i and j para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
-                       Math.floor(255 - 42.5 * j) + ',0)';
-      ctx.fillRect(j * 25, i * 25, 25, 25);
-    }
-  }
-}
- - - -

O resultado se parece com isto:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

Um strokeStyle exemplo

- -

Este exemplo é similar com o anterior, porém utiliza a propriedade strokeStyle para alterar a cor de contorno das formas. Nós usamos o método arc()  para desenhar círculos ao invés de quadrados.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i < 6; i++) {
-      for (var j = 0; j < 6; j++) {
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
-                         Math.floor(255 - 42.5 * j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

O resultado se parece com isto:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -
Transparência
- Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.
- -
-
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
-
-

Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.
- A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.

- -

Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.

-
-
- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

- -

Um exemplo globalAlpha

- -

Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i = 0; i < 7; i++) {
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

Um exemplo usando o rgba()

- -

Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255, 221, 0)';
-  ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = 'rgb(102, 204, 0)';
-  ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = 'rgb(0, 153, 255)';
-  ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = 'rgb(255, 51, 0)';
-  ctx.fillRect(0, 112.5, 150, 37.5);
-
-  // Draw semi transparent rectangles
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
-      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Line styles

- -

Existem várias propriedades que permitem estilizar linhas.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Define a largura das linhas desenhadas no futuro.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Define a aparência dos fins das linhas.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Define a aparência dos "cantos" onde as linhas se encontram.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Define o padrão de traço da linha atual.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Especifica onde iniciar uma matriz de traços em uma linha.
-
- -

Você entenderá melhor o que eles fazem observando os exemplos abaixo.

- -

Um exemplo lineWidth

- -

A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.

- -

  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.

- -

No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.
-

- -

Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.

- -

Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.
-  

- -
-

Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).

- -

Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.

-
- -

Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .

- -

Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.

- -

Exemplo lineCap.

- -

A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.

- -
-
butt
-
As extremidades das linhas são quadradas nos pontos finais.
-
round
-
As extremidades das linhas são arredondadas.
- arredondadas.
-
square
-
As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.
-
- -

Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.

- -

A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

Um exemplo de lineJoin

- -

A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .

- -

Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.

- -
-
round
-
Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.
-
bevel
-
Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.
-
miter
-
Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.
-
- -

O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

Uma demonstração da propriedade miterLimit

- -

Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.

- -

A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.

- -

Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:

- - - -

Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.

- -

Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++){
-    var dy = i % 2 == 0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Usando linhas tracejadas

- -

O método setLineDash e a propriedade lineDashOffset especificam o padrão de traço para as linhas. O método setLineDash aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade lineDashOffset define a distância até onde se deve iniciar a linha.

- -

Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer animações básicas.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradients

- -

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
-
- -

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

A createLinearGradient example

- -

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
-
- - - -

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

- -

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

A createRadialGradient example

- -

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
-
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
-
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
-
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0, 0, 150, 150);
-}
-
- - - -

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

- -

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Patterns

- -

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
-
- -

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

- -
-
repeat
-
Tiles the image in both vertical and horizontal directions.
-
repeat-x
-
Tiles the image horizontally but not vertically.
-
repeat-y
-
Tiles the image vertically but not horizontally.
-
no-repeat
-
Doesn't tile the image. It's used only once.
-
- -

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
-
- -
-

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

-
- -

A createPattern example

- -

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // create pattern
-    var ptrn = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0, 0, 150, 150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Shadows

- -

Using shadows involves just four properties:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
-
- -

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

- -

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

- -

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

- -
-

Note: Shadows are only drawn for source-over compositing operations.

-
- -

A shadowed text example

- -

This example draws a text string with a shadowing effect.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
-
-  ctx.font = '20px Times New Roman';
-  ctx.fillStyle = 'Black';
-  ctx.fillText('Sample String', 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

We will look at the font property and fillText method in the next chapter about drawing text.

- -

Canvas fill rules

- -

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
-
- Two values are possible:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 125e0874a7..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Basic animations -slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -

Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.

- -

Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.

- -

Passos para animação básica

- -

Estes são os passos que você precisa para desenhar um frame:

- -
    -
  1. Limpe o canvas
    - A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().
    2. -
  2. Salve o estado da tela
    - Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.
    3. -
  3. Desenhe formas animadas
    - A etapa em que você faz a renderização real do quadro.
    4. -
  4. Restaure o estado do canvas
    - Se você salvou o estado, restaure-o antes de desenhar um novo quadro.
    5. -
- -

Controlando uma animação

- -

Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.

- -

Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.

- -

Atualizações agendadas

- -

Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.

- -
-

Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.

-
- -
-
setInterval(função,atraso)
-
Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.
-
setTimeout(função,atraso)
-
Executa a função especificada pela função em milissegundos de atraso.
-
- -

Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.

- -

Atualizar na interação do usuário

- -

O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. 

- -

Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:

- -
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
- -

ou

- -
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
- -

Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.

- -

Um sistema solar animado

- -

Esse exemplo anima um pequeno modelo do nosso sistema solar.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  setInterval(draw,100);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-}
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

Um relógio animado

- -

Esse exemplos desenha um relógio animado, mostrando sua hora atual.

- -
function init(){
-  clock();
-  setInterval(clock,1000);
-}
-
-function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Hour marks
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // write Hours
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-}
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

Um panorama  em loop

- -

Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; //lower is faster
-var scale = 1.05;
-var y = -4.5; //vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width*scale;
-    imgH = img.height*scale;
-    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
-    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
-    else { clearY = CanvasYSize; }
-    //Get Canvas Element
-    ctx = document.getElementById('canvas').getContext('2d');
-    //Set Refresh Rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    //Clear Canvas
-    ctx.clearRect(0,0,clearX,clearY);
-    //If image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        //reset, start from beginning
-        if (x > (CanvasXSize)) { x = 0; }
-        //draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
-    }
-    //If image is > Canvas Size
-    else {
-        //reset, start from beginning
-        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
-        //draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
-    }
-    //draw image
-    ctx.drawImage(img,x,y,imgW,imgH);
-    //amount to move
-    x += dx;
-}
-
- -

Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. 

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

Live sample

- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

Outros exemplos

- -
-
Gartic
-
Jogo de desenho para multiplayers.
-
Canvascape
-
Um jogo de aventura 3D (tiro em primeira pessoa).
-
A basic ray-caster
-
Um bom exemplo de como fazer animações usando os controles do teclado.
-
canvas adventure
-
Outro bom exemplo que usa controles de teclado.
-
An interactive Blob
-
Divirta-se com Blob.
-
Flying through a starfield
-
Voe através de estrelas, círculos ou quadrados.
-
iGrapher
-
Um exemplo que ilustra os dados do mercado de ações.
-
- -

Veja também

- - - -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html deleted file mode 100644 index 87de5aa19d..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Exemplo de Composição -slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo -tags: - - Canvas - - Example - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

Esse exemplo demonstra várias operações de composição. A saída se parece assim:

- -

{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

- -

Exemplo de composição

- -

Este código configura os valores globais usados pelo restante do programa.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
-            'Destination-over','Destination-in','Destination-out','Destination-atop',
-            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
-            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
-            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
-          ].reverse();
-var gcoText = [
-'Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.',
-'A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ',
-'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
-'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
-'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
-'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
-'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
-'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
-'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
-'Somente a nova forma é mostrada.',
-'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
-'Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ',
-'Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)',
-'Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.',
-'Mantêm os pixels mais escuro de ambas camadas.',
-'Mantêm os pixels mais claro de ambas camadas.',
-'Divide a camada inferior pela camada superior invertida.',
-'Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.',
-'Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.',
-'Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.',
-'Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.',
-'Como diferença, mas com menor contraste.',
-'Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.',
-'Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.',
-'Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.',
-'Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.'
-          ].reverse();
-var width = 320;
-var height = 340;
- -

Programa principal

- -

Quando a página é carregada, esse código é executado para configurar e executar o exemplo:

- -
window.onload = function() {
-    // lum em sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // redimensiona canvas
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix();
-    colorSphere();
-    runComposite();
-    return;
-};
-
- -

E esse código, runComposite (), manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.

- -
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
-}
-
-function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
-
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
-
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
-};
-
- -

Funções Utilitárias

- -

O programa depende de várias funções utilitárias.

- -
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
-};
-
- -
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // per degree
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
-};
-
- -
// HSV (1978) = H: Hue (tom)
-//              S: Saturation (Saturação)
-//              V: Value (Valor)
-Color = {};
-Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
-};
-
-var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
-};
-
-var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html deleted file mode 100644 index 6d9ff5c33d..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Compositing and clipping -slug: Web/Guide/HTML/Canvas_tutorial/Compositing -translation_of: Web/API/Canvas_API/Tutorial/Compositing ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
- -
-

Em todo os nossos exemplos prévios, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.

- -

Nós podemos, no entanto, mudar este comportamento por configurar a propriedade globalCompositeOperation. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.

-
- -

globalCompositeOperation

- -

Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.

- -
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
-
Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.
-
- -

Veja os seguintes exemplos de composição para o código dos seguintes exemplos.

- -

{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

- -

Caminhos de recorte (Clipping path)

- -

Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.

- -

Se nós compararmos caminho de recorte para a propriedade globalCompositeOperation nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.

- -

No capítulo sobre formas de desenho (drawing shapes) eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().

- -
-
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
-
Volta o caminho atualmente sendo construído no caminho de recorte atual.
-
- -

Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.

- -

Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.

- -

Um exemplo do recorte

- -

Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-
-  // Create a circular clipping path
-  ctx.beginPath();
-  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
-  ctx.clip();
-
-  // draw background
-  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
-  lingrad.addColorStop(0, '#232256');
-  lingrad.addColorStop(1, '#143778');
-
-  ctx.fillStyle = lingrad;
-  ctx.fillRect(-75, -75, 150, 150);
-
-  // draw stars
-  for (var j = 1; j < 50; j++) {
-    ctx.save();
-    ctx.fillStyle = '#fff';
-    ctx.translate(75 - Math.floor(Math.random() * 150),
-                  75 - Math.floor(Math.random() * 150));
-    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
-    ctx.restore();
-  }
-
-}
-
-function drawStar(ctx, r) {
-  ctx.save();
-  ctx.beginPath();
-  ctx.moveTo(r, 0);
-  for (var i = 0; i < 9; i++) {
-    ctx.rotate(Math.PI / 5);
-    if (i % 2 === 0) {
-      ctx.lineTo((r / 0.525731) * 0.200811, 0);
-    } else {
-      ctx.lineTo(r, 0);
-    }
-  }
-  ctx.closePath();
-  ctx.fill();
-  ctx.restore();
-}
-
- - - -

Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.

- -

Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.

- -

Um exemplo de recorte:

- -

- -

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git "a/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" "b/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" deleted file mode 100644 index 9cd393b652..0000000000 --- "a/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Conclusão -slug: Web/Guide/HTML/Canvas_tutorial/Conclusão -translation_of: Web/API/Canvas_API/Tutorial/Finale ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
- -
-

Parabéns! Você terminou o Canvas tutorial! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.

-
- -

Mais exemplos e tutoriais

- -

Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:

- -
-
Codepen.io
-
Front End Developer Playground & Code Editor no navegador.
-
HTML5CanvasTutorials
-
Exemplos para a maioria das APIs canvas.
-
31 days of Canvas tutorials
-
Uma ótima fundação para codificação visual em JavaScript .
-
Game development
-
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.
-
- -

Outras Web APIs

- -

Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:

- -
-
WebGL
-
API para renderização interativa de gráficos 3D.
-
SVG
-
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.
-
Web Audio
-
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.
-
- -

Questions

- -
-
Stackoverflow
-
Perguntas marcadas como "canvas".
-
Comentários sobre esse tutorial – A comunidade MDN de documentação
-
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html deleted file mode 100644 index f54fca780e..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,581 +0,0 @@ ---- -title: Desenhando formas com canvas -slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes -tags: - - Canvas - - Gráficos(2) - - HTML - - HTML Canvas - - HTML5 - - Intermediário - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

Agora que criamos nosso ambiente em canvas, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (shapes) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.

-
- -

A grade

- -

Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou espaço de coordenadas. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.

- -

Desenhando retângulos

- -

Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (paths), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.

- -

Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:

- -
-
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
-
Desenha um retângulo preenchido.
-
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
-
Desenha a borda do retângulo.
-
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
-
Limpa um retângulo específico, tornando-o totalmente transparente.
-
- -

Cada umas das funções recebem os mesmos parâmetros. x e y determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O width (largura) e o height (altura) definem o tamanho do retângulo.

- -

Abaixo esta listado a função draw() da página anterior, porém utilizando as três funções.

- -

Exemplo de forma retangular

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

O resultado desse exemplo é mostrado abaixo.

- -

{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

A função fillRect() desenha um grande quadrado preto de 100 pixels. A função clearRect() por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função strokeRect() é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.

- -

Posteriormente veremos duas alternativas à função clearRect(), nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.

- -

Ao contrário das funções de paths que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.

- -

Desenhando caminhos/regiões (paths)

- -

Para criar uma camada usando caminhos (regiões ou paths) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:

- -
-
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
-
Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.
-
- -
-
Métodos de Caminhos (Path)
-
Métodos para manipuliar diferentes paths para objetos.
-
- -
-
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
-
Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.
-
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
-
Desenha uma borda na camada.
-
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
-
Desenha uma forma sólida através de preenchimento.
-
- -

O primeiro passo para criar um caminho é chamar o beginPath(). Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (shape). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.

- -
Nota: Quando o caminho atual está vazio, assim como imediatamente depois de chamar beginPath(), ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um moveTo(), independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.
- -

A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.

- -


- O terceiro, e um passo opcional, é chamar closePath(). Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (shape) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.

- -
Nota: Quando você chama fill(), todas as formas abertas são fechadas automaticamente, assim você não precisa chamar closePath(). Isso não acontece quando você chamar stroke().
- -

Desenhando um triângulo

- -

Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75,50);
-    ctx.lineTo(100,75);
-    ctx.lineTo(100,25);
-    ctx.fill();
-  }
-}
-
- -

O resultado se parece com isso:

- -

{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

- -

Desenhando

- -

Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função moveTo(). Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.

- -
-
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
-
Move a caneta (pen) para as coordenadas especificadas por x e y.
-
- -

Quando o canvas é inicializado ou beginPath() é chamado, você normalmente vai querer usar a função moveTo() para colocar o ponto inicial em outro lugar. Poderíamos também usar moveTo() para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método moveTo() (as linhas vermelhas).

- -

Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função draw() que vimos anteriormente.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
-    ctx.stroke();
-  }
-}
-
- -

O resultado aparece como:

- -

{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função moveTo().

- -
-

Nota: Para aprender mais sobre a função arc(), veja sobre {{anch("Arcos")}}.

-
- -

Linhas

- -

Para desenhar linhas retas, use o método lineTo().

- -
-
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
-
Desenha uma linha do ponto atual a até a posição especificada por x e y.
-
- -

Esse método recebe dois argumentos, x e y, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método moveTo().
-
- O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25,25);
-    ctx.lineTo(105,25);
-    ctx.lineTo(25,105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125,125);
-    ctx.lineTo(125,45);
-    ctx.lineTo(45,125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

Isso começa chamando o método beginPath() para iniciar um novo shape path. Em seguida, usamos o método moveTo() para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.

- -

{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Você notará a diferença entre o triângulo preenchido (filled) e não prenchido (stroked). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o closePath() para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.

- -

Arcos

- -

Para desenhar arcos, nós usamos os métodos arc() ou arcTo().

- -
-
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
-
Desenha um arco centralizado na posição (x, y) com um raio r iniciando em startAngle e terminando em endAngle apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).
-
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
-
Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.
-
- -

Vamos dar uma olhada mais detalhada sobre o método arc, que tem seis parâmetros: x e y são as coordenadas do centro do círculo em que o arco deve ser desenhado. radius é o raio. Os parâmetros startAngle e endAngle definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo x. O parâmetro anticlockwise é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.

- -
-

Nota: Os ângulos na função arc são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: radians = (Math.PI/180)*degrees.

-
- -

O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.

- -

Os dois laços for são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando beginPath(). No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.

- -

As coordenadas x e y devem ser suficientemente claras. O parâmetros radius e startAngle são fixos. O endAngle começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.

- -

A manipulação do parâmetro clockwise faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução if faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.

- -
-

Note: Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.

-
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for(var i=0;i<4;i++){
-      for(var j=0;j<3;j++){
-        ctx.beginPath();
-        var x              = 25+j*50;               // coordenada x
-        var y              = 25+i*50;               // coordenada y
-        var radius         = 20;                    // Raio do Arco
-        var startAngle     = 0;                     // Ponto inicial no círculo
-        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
-        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i>1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
- -

{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

- -

Curvas de Bézier Cúbicas e Quadráticas

- -

O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.

- -
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
-
Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por cp1x e cp1y.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
-
Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por (cp1x, cp1y) e (cp2x, cp2y).
-
- -

A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.

- -

Os parâmetros x e y em ambos os métodos são as coordenadas do ponto final. cp1x e cp1y são as coordenadas do primeiro ponto de controle, e cp2x e cp2y são as coordenadas do segundo ponto de controle.

- -

Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.

- -

Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (shape) completa.

- -

Curvas de Bézier Quadráticas

- -

Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Exemplo de curvas de Bézier quadráticas
-    ctx.beginPath();
-    ctx.moveTo(75,25);
-    ctx.quadraticCurveTo(25,25,25,62.5);
-    ctx.quadraticCurveTo(25,100,50,100);
-    ctx.quadraticCurveTo(50,120,30,125);
-    ctx.quadraticCurveTo(60,120,65,100);
-    ctx.quadraticCurveTo(125,100,125,62.5);
-    ctx.quadraticCurveTo(125,25,75,25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Curvas de Bézier Cúbicas

- -

Este exemplo desenha um coração usando curvas de Bézier cúbicas.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Exemplo de curvas de Bézier cúbicas
-    ctx.beginPath();
-    ctx.moveTo(75,40);
-    ctx.bezierCurveTo(75,37,70,25,50,25);
-    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
-    ctx.bezierCurveTo(20,80,40,102,75,120);
-    ctx.bezierCurveTo(110,102,130,80,130,62.5);
-    ctx.bezierCurveTo(130,62.5,130,25,100,25);
-    ctx.bezierCurveTo(85,25,75,37,75,40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Retângulos

- -

Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método rect(), que adiciona uma forma retangular a um caminho (path) atualmente aberto.

- -
-
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
-
-

Desenha um retângulo cujo canto superior esquerdo é especificado por (x, y) com base em uma largura (width) e uma altura (height).

-
-
- -

Quando este método é executado, o método moveTo() é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.

- -

Combinando Elementos

- -

Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (path) para cada forma (shape). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um shape. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx,12,12,150,150,15);
-    roundedRect(ctx,19,19,150,150,9);
-    roundedRect(ctx,53,53,49,33,10);
-    roundedRect(ctx,53,119,49,16,6);
-    roundedRect(ctx,135,53,49,33,10);
-    roundedRect(ctx,135,119,25,49,10);
-
-    ctx.beginPath();
-    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
-    ctx.lineTo(31,37);
-    ctx.fill();
-
-    for(var i=0;i<8;i++){
-      ctx.fillRect(51+i*16,35,4,4);
-    }
-
-    for(i=0;i<6;i++){
-      ctx.fillRect(115,51+i*16,4,4);
-    }
-
-    for(i=0;i<8;i++){
-      ctx.fillRect(51+i*16,99,4,4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83,116);
-    ctx.lineTo(83,102);
-    ctx.bezierCurveTo(83,94,89,88,97,88);
-    ctx.bezierCurveTo(105,88,111,94,111,102);
-    ctx.lineTo(111,116);
-    ctx.lineTo(106.333,111.333);
-    ctx.lineTo(101.666,116);
-    ctx.lineTo(97,111.333);
-    ctx.lineTo(92.333,116);
-    ctx.lineTo(87.666,111.333);
-    ctx.lineTo(83,116);
-    ctx.fill();
-
-    ctx.fillStyle = "white";
-    ctx.beginPath();
-    ctx.moveTo(91,96);
-    ctx.bezierCurveTo(88,96,87,99,87,101);
-    ctx.bezierCurveTo(87,103,88,106,91,106);
-    ctx.bezierCurveTo(94,106,95,103,95,101);
-    ctx.bezierCurveTo(95,99,94,96,91,96);
-    ctx.moveTo(103,96);
-    ctx.bezierCurveTo(100,96,99,99,99,101);
-    ctx.bezierCurveTo(99,103,100,106,103,106);
-    ctx.bezierCurveTo(106,106,107,103,107,101);
-    ctx.bezierCurveTo(107,99,106,96,103,96);
-    ctx.fill();
-
-    ctx.fillStyle = "black";
-    ctx.beginPath();
-    ctx.arc(101,102,2,0,Math.PI*2,true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89,102,2,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
-
-// Uma função útil para desenhar um retângulo com cantos arredondados.
-
-function roundedRect(ctx,x,y,width,height,radius){
-  ctx.beginPath();
-  ctx.moveTo(x,y+radius);
-  ctx.lineTo(x,y+height-radius);
-  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
-  ctx.lineTo(x+width-radius,y+height);
-  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
-  ctx.lineTo(x+width,y+radius);
-  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
-  ctx.lineTo(x+radius,y);
-  ctx.quadraticCurveTo(x,y,x,y+radius);
-  ctx.stroke();
-}
-
- -

O resultado é:

- -

{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

- -

Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade fillStyle no contexto de desenho e o uso de uma função auxiliar (neste caso roundedRect()). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.

- -

Vamos dar uma nova olhada em fillStyle, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (paths) de cor preta (padrão) para branca.

- -

Path2D

- -

Como vimos no último exemplo, pode haver uma série de paths e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus paths rapidamente.
- Vamos ver como podemos construir um objeto de Path2D:

- -
-
{{domxref("Path2D.Path2D", "Path2D()")}}
-
-

O construtor de Path2D() retorna um objeto Path2D instanciado recentemente, opcionalmente através de um outro objeto Path2D como argumento (cria uma cópia) ou, opcionalmente, com uma string que representam dados de paths em SVG.

-
-
- -
new Path2D();     // objeto vazio de Path2D
-new Path2D(path); // cópia de outro objeto de Path2D
-new Path2D(d);    // objeto criado a partir de paths em SVG
- -

Todos os métodos de caminho (path methods) como moveTo, rect, arc ou quadraticCurveTo, etc., que temos de saber acima, estão disponíveis em Path2D.

- -

A API Path2D também adiciona uma maneira de combinar caminhos usando o método addPath. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.

- -
-
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
-
Adiciona um path para o path atual através de uma matriz de transformação opcional.
-
- -

Exemplo de Path2D

- -

Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de Path2D, de modo que eles estão disponíveis para uso posterior. Com a nova API Path2D, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto Path2D em vez do path atual. Aqui, os métodos stroke e fill são usados, ​​com um argumento de path, para desenhar ambos os objetos na tela, por exemplo.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var circle = new Path2D();
-    circle.moveTo(125, 35);
-    circle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(circle);
-  }
-}
-
- -

{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

- -

Usando paths em SVG

- -

Outro recurso poderoso da nova API de Path2D é a utilização de dados de path em SVG para inicializar caminhos (paths) no canvas. Isso permite que você crie dados de paths que possam ser utilizados tanto no SVG como no canvas.

- -

O caminho se moverá para o ponto (M10 10) e então se moverá horizontalmente 80 pontos para a direita (h 80), depois 80 pontos para baixo (v 80), então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (z). Você pode ver este exemplo na página do construtor do Path2D.

- -
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html deleted file mode 100644 index 550719e627..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Drawing text -slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text -tags: - - Canvas - - Intermediário - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Após entender como aplicar estilos e cores no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.

-
- -

Desenhando texto

- -

O context de renderização da canvas fornece dois métodos para renderização textual: 

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
-
- -

Um exemplo com fillText

- -

O texto a seguir é rederizado utilizando fillStyle.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

Um exemplo com strokeText

- -

 

- -

O texto é preenchido usando o strokeStyle atual.

- -

 

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Estilo de Texto

- -

Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
The current text style being used when drawing text. This string uses the same syntax as the CSS {{cssxref("font")}} property. The default font is 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
-
- -

Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.

- -

O diagrama seguinte do WHATWG demonstra as várias baselines suportadas pela propriedade do textBaselineThe top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

O exemplo de uma textBaseline

- -

Edite o código abaixo e veja as atualizações em tempo real no canvas.

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Advanced text measurements

- -

In the case you need to obtain more details about the text, the following method allows you to measure it.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
-
- -

The following code snippet shows how you can measure a text and get its width.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Notas específicas - Gecko

- -

No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/index.html b/files/pt-br/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index 2f9dbab7df..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Canvas tutorial -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -

 {{CanvasSidebar}}

- -

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

- -

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

- -

Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <canvas>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.

- -

Antes de começar

- -

Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

- -

Nesse tutorial

- - - -

Veja também

- - - -

Nota dos contribuidores

- -

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

- -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html b/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html deleted file mode 100644 index d18afddefa..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Otimizando canvas -slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas -tags: - - Canvas - - Gráfico 2D - - Otimização -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.

-
- -

Dicas de performance

- -

O que segue é uma coleção de dicas para melhorar a performance.

- -

Pre-render similar primitives or repeating objects on an off-screen canvas

- -

If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.

- -
myEntity.offscreenCanvas = document.createElement('canvas');
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Avoid floating-point coordinates and use integers instead

- -

Sub-pixel rendering occurs when you render objects on a canvas without whole values.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.

- -

Don’t scale images in drawImage

- -

Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

- -

Use multiple layered canvases for complex scenes

- -

You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.

- -

For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

CSS for large background images

- -

If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.

- -

Scaling canvas using CSS transforms

- -

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

Turn off transparency

- -

If your game uses canvas and doesn’t need to be transparent, set the alpha option to false when creating a drawing context with HTMLCanvasElement.getContext(). This information can be used internally to optimize rendering.

- -
var ctx = canvas.getContext('2d', { alpha: false });
- -

More tips

- - - -

See also

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html b/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html deleted file mode 100644 index 0b0dcfe7e7..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Using images -slug: Web/Guide/HTML/Canvas_tutorial/Using_images -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
- -
-

Até agora nós criamos nossos próprios shapes e aplicamos estilos(applied styles) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!

-
- -

A importação de imagens para o canvas é basicamente um processo de duas etapas:

- -
    -
  1. Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.
    2. -
  2. Desenhar a imagem no canvas usando a função drawImage() .
    3. -
- -

Vamos dar uma olhada em como fazer isso.

- -

Getting images to draw

- -

The canvas API is able to use any of the following data types as an image source:

- -
-
{{domxref("HTMLImageElement")}}
-
These are images created using the Image() constructor, as well as any {{HTMLElement("img")}} element.
-
{{domxref("SVGImageElement")}}
-
These are images embedded using the {{SVGElement("image")}} element.
-
{{domxref("HTMLVideoElement")}}
-
Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.
-
{{domxref("HTMLCanvasElement")}}
-
You can use another {{HTMLElement("canvas")}} element as your image source.
-
- -

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

- -

There are several ways to get images for use on a canvas.

- -

Using images from the same page

- -

We can obtain a reference to images on the same page as the canvas by using one of:

- - - -

Using images from other domains

- -

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

- -

Using other canvas elements

- -

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

- -

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

- -

Creating an image from scratch

- -

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

- -
var img = new Image();   // Create new img element
-img.src = 'myImage.png'; // Set source path
-
- -

When this script gets executed, the image starts loading.

- -

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

- -
var img = new Image();   // Create new img element
-img.addEventListener('load', function() {
-  // execute drawImage statements here
-}, false);
-img.src = 'myImage.png'; // Set source path
-
- -

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

- -

Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img = new Image();   // Create new img element
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

Drawing images

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -
-

SVG images must specify a width and height in the root <svg> element.

-
- -

Example: A simple line graph

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    ctx.drawImage(img, 0, 0);
-    ctx.beginPath();
-    ctx.moveTo(30, 96);
-    ctx.lineTo(70, 66);
-    ctx.lineTo(103, 76);
-    ctx.lineTo(170, 15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Scaling

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

Example: Tiling an image

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.drawImage(img, j * 50, i * 38, 50, 38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Slicing

- -

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

Example: Framing an image

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'), 0, 0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- - - -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i = 0; i < document.images.length; i++) {
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id') != 'frame') {
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width', 132);
-      canvas.setAttribute('height', 150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i], 15, 20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

- -

Controlling image scaling behavior

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html b/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html deleted file mode 100644 index 767a5ff97c..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Utilização básica do Canvas -slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica -tags: - - Canvas - - HTML - - Intermediário - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
Vamos começar este tutorial olhando para o elemento {{HTMLElement("canvas")}} {{Glossary("HTML")}} em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.
- -

O elemento <canvas>

- -

Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Se parece muito com o elemento <img> com a diferença de não possuir os atributos src e alt. O elemento <canvas> tem apenas dois atributos - width e height. Ambos são opcionais e podem ser aplicados utilizando as propriedades DOM respectivas. Se não forem especificados, o canvas será iniciado com 300 pixels de largura por 150 pixels de altura. O elemento pode ser redimensionado por CSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.

- -
-

Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS.

-
- -

O atributo id não é específico do elemento <canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o class por exemplo). É sempre uma boa ideia inserir um id pois fica muito mais fácil de capturar o elemento no seu script.

- -

O elemento <canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.

- -
-

Conteúdo alternativo

- -

Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.

- -

Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam o <canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.

- -

Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:

- -
<canvas id="stockGraph" width="150" height="150">
-  preço das ações: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Tag </canvas> é necessária

- -

Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento (</canvas>) é necessária.

- -
-

Nota: Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.

-
- -

Se o conteúdo alternativo não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.

- -

O contexto de renderização

- -

{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, WebGL usa um contexto 3D ("experimental-WebGL") baseado em OpenGL ES.

- -

Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um script precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método getContext().

- -
-

Verificação de suporte

- -

O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um script simplesmente testando a presença do método getContext():

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // codigo de desenho aqui
-} else {
-  // codigo para quando o canvas nao for suportado aqui
-}
-
-
-
- -

Um modelo de estrutura

- -

Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:

- -
-

Nota: não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.

-
- -
<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

O script inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento onload do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.

- -

{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}

- -

Um simples exemplo

- -

Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.

- -
<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
- -

Este exemplo parece assim:

- -

{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html b/files/pt-br/web/guide/html/categorias_de_conteudo/index.html deleted file mode 100644 index 7b55358b7b..0000000000 --- a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Categorias de conteúdo -slug: Web/Guide/HTML/Categorias_de_conteudo -tags: - - Avançado - - Guía - - HTML - - HTML5 - - NeedsUpdate - - Web -translation_of: Web/Guide/HTML/Content_categories ---- -

Cada elemento HTML deve permanecer, por regras, definindo que tipo de conteúdo ele pode ter. Essas regras estão agrupadas em modelos de conteúdo para muitos elementos. Cada elemento HTML pertence a nenhum, um, ou múltiplos modelos de conteúdo, cada regra de definição que o conteúdo do elemento deve seguir em um documento HTML.

- -

Há três tipos de categorias de conteúdo:

- - - -
Content_categories_venn.png
- -

Principais categorias de conteúdo

- -

Conteúdo de metadados

- -

Os elementos pertencentes a categoria conteúdo de metadados modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações fora da banda.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

- -

Conteúdo de fluxo

- -

Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém texto ou conteúdo embutido. Eles são: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

- -

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

- - - -

Conteúdo de seccionamento

- -

Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esboço atual que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na conteúdo do cabeçalho.

- -

Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

- -
-

Nota: Não confunda esse modelo de conteúdo com a categoria de seccionamento raiz que isola seus conteúdos dos esboços regulares.

-
- -

Conteúdo do cabeçalho

- -

O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do conteúdo de seccionamento ou implicitamente definido pelo próprio conteúdo do cabeçalho.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

- -
-

Note: Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.

-
- -

Conteúdo fraseado

- -

O conteúdo fraseado define o texto e a marcação que ele contém. Séries de conteúdos fraseados compõem parágrafos.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e texto simples (não consistindo somente de caracteres de espaço em branco).

- -

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

- - - -

Conteúdo embutido

- -

O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra linguagem de marcação no documento. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} e {{HTMLElement("video")}}.

- -

Conteúdo interativo

- -

O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas:

- - - -

Conteúdo associado ao form

- -

O conteúdo associado ao form compreende elementos que têm um formulário de proprietário, exposto por um atributo form. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo form.

- - - -

 Essa categoria contém várias sub-categorias:

- -
-
listed
-
Elementos que estão listados nas coleções IDL form.elements e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
labelable
-
Elementos que podem ser associados com elementos {{HTMLElement("label")}}. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
submittable
-
Elementos que podem ser usados para construir o formulário de dados quando o formulário é enviado. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
resettable
-
Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
- -

Modelo de conteúdo transparente

- -

Se um elemento tem um modelo de conteúdo transparente, então seu conteúdo deve ser estruturado de tal forma que ele seja um HTML5 válido, mesmo se o elemento transparente for removido e substituído pelos elementos filhos.

- -

Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:

- -
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
-
- -

Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.

- -
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
-
- -

Outros modelos de conteúdo

- -

Raiz de secionamento.

diff --git a/files/pt-br/web/guide/html/content_categories/index.html b/files/pt-br/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..7b55358b7b --- /dev/null +++ b/files/pt-br/web/guide/html/content_categories/index.html @@ -0,0 +1,148 @@ +--- +title: Categorias de conteúdo +slug: Web/Guide/HTML/Categorias_de_conteudo +tags: + - Avançado + - Guía + - HTML + - HTML5 + - NeedsUpdate + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +

Cada elemento HTML deve permanecer, por regras, definindo que tipo de conteúdo ele pode ter. Essas regras estão agrupadas em modelos de conteúdo para muitos elementos. Cada elemento HTML pertence a nenhum, um, ou múltiplos modelos de conteúdo, cada regra de definição que o conteúdo do elemento deve seguir em um documento HTML.

+ +

Há três tipos de categorias de conteúdo:

+ + + +
Content_categories_venn.png
+ +

Principais categorias de conteúdo

+ +

Conteúdo de metadados

+ +

Os elementos pertencentes a categoria conteúdo de metadados modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações fora da banda.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Conteúdo de fluxo

+ +

Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém texto ou conteúdo embutido. Eles são: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+ + + +

Conteúdo de seccionamento

+ +

Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esboço atual que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na conteúdo do cabeçalho.

+ +

Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: Não confunda esse modelo de conteúdo com a categoria de seccionamento raiz que isola seus conteúdos dos esboços regulares.

+
+ +

Conteúdo do cabeçalho

+ +

O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do conteúdo de seccionamento ou implicitamente definido pelo próprio conteúdo do cabeçalho.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Note: Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.

+
+ +

Conteúdo fraseado

+ +

O conteúdo fraseado define o texto e a marcação que ele contém. Séries de conteúdos fraseados compõem parágrafos.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e texto simples (não consistindo somente de caracteres de espaço em branco).

+ +

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+ + + +

Conteúdo embutido

+ +

O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra linguagem de marcação no documento. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} e {{HTMLElement("video")}}.

+ +

Conteúdo interativo

+ +

O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas:

+ + + +

Conteúdo associado ao form

+ +

O conteúdo associado ao form compreende elementos que têm um formulário de proprietário, exposto por um atributo form. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo form.

+ + + +

 Essa categoria contém várias sub-categorias:

+ +
+
listed
+
Elementos que estão listados nas coleções IDL form.elements e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
labelable
+
Elementos que podem ser associados com elementos {{HTMLElement("label")}}. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
submittable
+
Elementos que podem ser usados para construir o formulário de dados quando o formulário é enviado. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
resettable
+
Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
+ +

Modelo de conteúdo transparente

+ +

Se um elemento tem um modelo de conteúdo transparente, então seu conteúdo deve ser estruturado de tal forma que ele seja um HTML5 válido, mesmo se o elemento transparente for removido e substituído pelos elementos filhos.

+ +

Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:

+ +
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+
+ +

Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.

+ +
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+ +

Outros modelos de conteúdo

+ +

Raiz de secionamento.

diff --git a/files/pt-br/web/guide/html/content_editable/index.html b/files/pt-br/web/guide/html/content_editable/index.html deleted file mode 100644 index ed2a588e47..0000000000 --- a/files/pt-br/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -translation_of: Web/Guide/HTML/Editable_content ---- -

No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.

- -

Compatibilidade

- -

Conteúdo editável é totalmente compatível com os seguintes browsers.

- - - -

Ainda não é suportato pelo Opera Mini.

- -
-

*A maioria dos elementos HTML não suporta esta funcionalidade

-
- -

Como isso funciona?

- -

Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para true no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.

- -

Exemplos

- -

Um exemplo simples:

- -
<!DOCTYPE html>
-<html>
-  <body>
-    <div contentEditable="true">
-      Este conteúdo pode ser editado.
-    </div>
-  </body>
-</html>
- -

Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.

- -

Veja também

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

Como interagir com o conteúdo  (Antiga API do  IE)  aqui

diff --git a/files/pt-br/web/guide/html/editable_content/index.html b/files/pt-br/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..ed2a588e47 --- /dev/null +++ b/files/pt-br/web/guide/html/editable_content/index.html @@ -0,0 +1,57 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +translation_of: Web/Guide/HTML/Editable_content +--- +

No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.

+ +

Compatibilidade

+ +

Conteúdo editável é totalmente compatível com os seguintes browsers.

+ + + +

Ainda não é suportato pelo Opera Mini.

+ +
+

*A maioria dos elementos HTML não suporta esta funcionalidade

+
+ +

Como isso funciona?

+ +

Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para true no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.

+ +

Exemplos

+ +

Um exemplo simples:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <div contentEditable="true">
+      Este conteúdo pode ser editado.
+    </div>
+  </body>
+</html>
+ +

Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.

+ +

Veja também

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Como interagir com o conteúdo  (Antiga API do  IE)  aqui

diff --git a/files/pt-br/web/guide/html/forms/form_validation/index.html b/files/pt-br/web/guide/html/forms/form_validation/index.html deleted file mode 100644 index 7f9146d0a4..0000000000 --- a/files/pt-br/web/guide/html/forms/form_validation/index.html +++ /dev/null @@ -1,813 +0,0 @@ ---- -title: Form data validation -slug: Web/Guide/HTML/Forms/Form_validation -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
- -

A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o Constraint validation guide.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento em informática, uma compreensão razoável de HTML, CSS, e JavaScript.
Objetivo:Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.
- -

O que é validação de formulário?

- -

Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:

- - - -

Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.

- -


- Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:

- - - -

Different types of form validation

- -

There are two different types of form validation which you'll encounter on the web:

- - - -

In the real world, developers tend to use a combination of client-side and server-side validation.

- -

Using built-in form validation

- -

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done by using validation attributes on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.

- -

When an element is valid:

- - - -

When an element is invalid:

- - - -

Validation constraints on input elements — starting simple

- -

In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.

- -

Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as fruit-start.html, and a live example below:

- - - -

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

- -

To begin with, make a copy of fruit-start.html in a new directory on your hard drive.

- -

The required attribute

- -

The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

- -

Add a required attribute to your input, as shown below:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Also, take note of the CSS included in the example file:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

- -

Validating against a regular expression

- -

Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a Regular Expression as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).

- -

Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:

- - - -

Anyway, let's implement an example — update your HTML to add a pattern attribute, like so:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="banana|cherry">
-  <button>Submit</button>
-</form>
- - - -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

- -

In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".

- -

At this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!

- -
-

Note: Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the email type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the url type automatically require a properly-formed URL.

-
- -
-

Note: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.

-
- -

Constraining the length of your entries

- -

All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.

- -

For number fields (i.e. <input type="number">), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.

- -

Let's look at another example. Create a new copy of the fruit-start.html file.

- -

Now delete the contents of the <body> element, and replace it with the following:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Here is the example running live:

- -

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}

- -
-

Note: <input type="number"> (and other types, like range) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).

-
- -

Full example

- -

Here is a full example to show off usage of HTML's built-in validation features:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* required to properly style form
-   elements on WebKit based browsers */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

See Validation-related attributes for a complete list of attributes that can be used to constrain input values, and the input types that support them.

- -

Customized error messages

- -

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

- -

These automated messages have two drawbacks:

- - - - - - - - - - - - - - - - - - - - - - - - - -
French versions of feedback messages on an English page
BrowserRendering
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

- -

HTML5 provides the constraint validation API to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:

- -
<form>
-  <label for="mail">I would like you to provide me an e-mail</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

In JavaScript, you call the setCustomValidity() method:

- -
var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}

- -

Validating forms using JavaScript

- -

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

- -

The constraint validation API

- -

More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:

- - - -

Constraint validation API properties

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
validationMessageA localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (willValidate is false), or the element's value satisfies its constraints.
validityA {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.
willValidateReturns true if the element will be validated when the form is submitted; false otherwise.
- -

Constraint validation API methods

- - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
checkValidity()Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.
{{domxref("HTMLFormElement.reportValidity()")}}Returns true if the element or its child controls satisfy validation constraints. When false is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.
setCustomValidity(message)Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
-
- If the argument is the empty string, the custom error is cleared.
- -

For legacy browsers, it's possible to use a polyfill such as Hyperform to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.

- -

Example using the constraint validation API

- -

Let's see how to use this API to build custom error messages. First, the HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.

- -

The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.

- -
CSS
- -

This CSS styles our form and the error output to look more attractive.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The following JavaScript code handles the custom error validation.

- -
// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Each time the user types something, we check if the
-  // email field is valid.
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    error.innerHTML = ""; // Reset the content of the message
-    error.className = "error"; // Reset the visual state of the message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Each time the user tries to send the data, we check
-  // if the email field is valid.
-  if (!email.validity.valid) {
-
-    // If the field is not valid, we display a custom
-    // error message.
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // And we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-}, false);
- -

Here is the live result:

- -

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

- -

The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.

- -

Validating forms without a built-in API

- -

Sometimes, such as with legacy browsers or custom widgets, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.

- -

To validate a form, you have to ask yourself a few questions:

- -
-
What kind of validation should I perform?
-
You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.
-
What should I do if the form does not validate?
-
This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?
-
How can I help the user to correct invalid data?
-
In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: - -
-
- -

An example that doesn't use the constraint validation API

- -

In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that ARIA is an independent specification that's not specifically related to HTML5.

- -
CSS
- -

Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.

- -
// There are fewer ways to pick a DOM node with legacy browsers
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

The result looks like this:

- -

{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

- -

As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:

- - - -

Remote validation

- -

In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.

- -

Performing such a validation requires taking a few precautions:

- - - -

Conclusion

- -

Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html b/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 76e202e685..0000000000 --- a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,786 +0,0 @@ ---- -title: How to build custom form widgets -slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

There are many cases where available HTML form widgets are just nThere are many cases where available HTML form widgets are just not enough. If you want to perform advanced styling on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.

- -

In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.

- -
-

Note: We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.

-
- -

Design, structure, and semantics

- -

Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.

- -

In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:

- -

The three states of a select box

- -

This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).

- -

In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:

- -
-
The widget is in its normal state when:
-
-
    -
  • the page loads
    • -
  • the widget was active and the user clicks anywhere outside the widget
    • -
  • the widget was active and the user moves the focus to another widget using the keyboard
    • -
- -
-

Note: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

-
-
-
The widget is in its active state when:
-
-
    -
  • the user clicks on it
    • -
  • the user hits the tab key and it gains focus
    • -
  • the widget was in its open state and the user clicks on the widget.
    • -
-
-
The widget is in its open state when:
-
-
    -
  • the widget is in any other state than open and the user clicks on it
    • -
-
-
- -

Once we know how to change states, it is important to define how to change the widget's value:

- -
-
The value changes when:
-
-
    -
  • the user clicks on an option when the widget is in the open state
    • -
  • the user hits the up or down arrow keys when the widget is in its active state
    • -
-
-
- -

Finally, let's define how the widget's options will behave:

- - - -

For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.

- -

Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).

- -

In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to perform user tests. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:

- - - -
-

Note: Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

-
- -

Defining the HTML structure and semantics

- -

Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:

- -
<!-- This is our main container for our widget.
-     The tabindex attribute is what allows the user to focus the widget.
-     We'll see later that it's better to set it through JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- This container will be used to display the current value of the widget -->
-  <span class="value">Cherry</span>
-
-  <!-- This container will contain all the options available for our widget.
-       Because it's a list, it makes sense to use the ul element. -->
-  <ul class="optList">
-    <!-- Each option only contains the value to be displayed, we'll see later
-         how to handle the real value that will be sent with the form data -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.

- -

Creating the look and feel using CSS

- -

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

- -

Required styles

- -

The required styles are those necessary to handle the three states of our widget.

- -
.select {
-  /* This will create a positioning context for the list of options */
-  position: relative;
-
-  /* This will make our widget become part of the text flow and sizable at the same time */
-  display : inline-block;
-}
- -

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

- -
.select .active,
-.select:focus {
-  outline: none;
-
-  /* This box-shadow property is not exactly required, however it's so important to be sure
-     the active state is visible that we use it as a default value, feel free to override it. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Now, let's handle the list of options:

- -
/* The .select selector here is syntactic sugar to be sure the classes we define are
-   the ones inside our widget. */
-.select .optList {
-  /* This will make sure our list of options will be displayed below the value
-     and out of the HTML flow */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

- -
.select .optList.hidden {
-  /* This is a simple way to hide the list in an accessible way,
-     we will talk more about accessibility in the end */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Beautification

- -

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

- -
.select {
-  /* All sizes will be expressed with the em value for accessibility reasons
-     (to make sure the widget remains resizable if the user uses the
-     browser's zoom in a text-only mode). The computations are made
-     assuming 1em == 16px which is the default value in most browsers.
-     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* We need extra room for the down arrow we will add */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* The first declaration is for browsers that do not support linear gradients.
-     The second declaration is because WebKit based browsers haven't unprefixed it yet.
-     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Because the value can be wider than our widget, we have to make sure it will not
-     change the widget's width */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* And if the content overflows, it's better to have a nice ellipsis. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

- -
.select:after {
-  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

Next, let's style the list of options:

- -
.select .optList {
-  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
-
-  /* this will reset the default style of the ul element */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* This will ensure that even if the values are smaller than the widget,
-     the list of options will be as large as the widget itself */
-  min-width : 100%;
-
-  /* In case the list is too long, its content will overflow vertically
-     (which will add a vertical scrollbar automatically) but never horizontally
-     (because we haven't set a width, the list will adjust its width automatically.
-     If it can't, the content will be truncated) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

So here's the result with our three states:

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

Bring your widget to life with JavaScript

- -

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

- -
-

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

-
- -
-

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

-
- -

Why isn't it working?

- -

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

- - - -

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

- -

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

- -

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

- -
.widget select,
-.no-widget .select {
-  /* This CSS selector basically says:
-     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
-     - or we have not changed the body class, therefore the body class is still "no-widget",
-       so the elements whose class is "select" must be hidden */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

-
- -

Making the job easier

- -

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

- -

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

- -

The features we plan to use are the following (ordered from the riskiest to the safest):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

We weren't kidding when we said it's easy to do.

- -

Building event callbacks

- -

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

- -
// This function will be used each time we want to deactivate a custom widget
-// It takes one parameter
-// select : the DOM node with the `select` class to deactivate
-function deactivateSelect(select) {
-
-  // If the widget is not active there is nothing to do
-  if (!select.classList.contains('active')) return;
-
-  // We need to get the list of options for the custom widget
-  var optList = select.querySelector('.optList');
-
-  // We close the list of option
-  optList.classList.add('hidden');
-
-  // and we deactivate the custom widget itself
-  select.classList.remove('active');
-}
-
-// This function will be used each time the user wants to (de)activate the widget
-// It takes two parameters:
-// select : the DOM node with the `select` class to activate
-// selectList : the list of all the DOM nodes with the `select` class
-function activeSelect(select, selectList) {
-
-  // If the widget is already active there is nothing to do
-  if (select.classList.contains('active')) return;
-
-  // We have to turn off the active state on all custom widgets
-  // Because the deactivateSelect function fulfill all the requirement of the
-  // forEach callback function, we use it directly without using an intermediate
-  // anonymous function.
-  selectList.forEach(deactivateSelect);
-
-  // And we turn on the active state for this specific widget
-  select.classList.add('active');
-}
-
-// This function will be used each time the user wants to open/closed the list of options
-// It takes one parameter:
-// select : the DOM node with the list to toggle
-function toggleOptList(select) {
-
-  // The list is kept from the widget
-  var optList = select.querySelector('.optList');
-
-  // We change the class of the list to show/hide it
-  optList.classList.toggle('hidden');
-}
-
-// This function will be used each time we need to highlight an option
-// It takes two parameters:
-// select : the DOM node with the `select` class containing the option to highlight
-// option : the DOM node with the `option` class to highlight
-function highlightOption(select, option) {
-
-  // We get the list of all option available for our custom select element
-  var optionList = select.querySelectorAll('.option');
-
-  // We remove the highlight from all options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // We highlight the right option
-  option.classList.add('highlight');
-};
- -

That's all you need in order to handle the various states of the custom widget.

- -

Next, we bind these functions to the appropriate events:

- -
// We handle the event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // as well as all its `option` elements
-    var optionList = select.querySelectorAll('.option');
-
-    // Each time a user hovers their mouse over an option, we highlight the given option
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note: the `select` and `option` variable are closures
-        // available in the scope of our function call.
-        highlightOption(select, option);
-      });
-    });
-
-    // Each times the user click on a custom select element
-    select.addEventListener('click', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We toggle the visibility of the list of options
-      toggleOptList(select);
-    });
-
-    // In case the widget gain focus
-    // The widget gains the focus each time the user clicks on it or each time
-    // they use the tabulation key to access the widget
-    select.addEventListener('focus', function (event) {
-      // Note: the `select` and `selectList` variable are closures
-      // available in the scope of our function call.
-
-      // We activate the widget
-      activeSelect(select, selectList);
-    });
-
-    // In case the widget loose focus
-    select.addEventListener('blur', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We deactivate the widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

Handling the widget's value

- -

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

- -

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

- -

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

- -
// This function updates the displayed value and synchronizes it with the native widget.
-// It takes two parameters:
-// select : the DOM node with the class `select` containing the value to update
-// index  : the index of the value to be selected
-function updateValue(select, index) {
-  // We need to get the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  // We also need  to get the value placeholder of our custom widget
-  var value = select.querySelector('.value');
-
-  // And we need the whole list of options
-  var optionList = select.querySelectorAll('.option');
-
-  // We set the selected index to the index of our choice
-  nativeWidget.selectedIndex = index;
-
-  // We update the value placeholder accordingly
-  value.innerHTML = optionList[index].innerHTML;
-
-  // And we highlight the corresponding option of our custom widget
-  highlightOption(select, optionList[index]);
-};
-
-// This function returns the current selected index in the native widget
-// It takes one parameter:
-// select : the DOM node with the class `select` related to the native widget
-function getIndex(select) {
-  // We need to access the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

With these two functions, we can bind the native widgets to the custom ones:

- -
// We handle event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // We make our custom widget focusable
-    select.tabIndex = 0;
-
-    // We make the native widget no longer focusable
-    select.previousElementSibling.tabIndex = -1;
-
-    // We make sure that the default selected value is correctly displayed
-    updateValue(select, selectedIndex);
-
-    // Each time a user clicks on an option, we update the value accordingly
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // When the user hits the down arrow, we jump to the next option
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // When the user hits the up arrow, we jump to the previous option
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

- -

With that, we're done! Here's the result:

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

But wait a second, are we really done?

- -

Make it accessible

- -

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

- -

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

- -

The role attribute

- -

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

- -

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

- -

To support the listbox role, we just have to update our HTML like this:

- -
<!-- We add the role="listbox" attribute to our top element -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- We also add the role="presentation" to the ul element -->
-  <ul class="optList" role="presentation">
-    <!-- And we add the role="option" attribute to all the li elements -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

-
- -

The aria-selected attribute

- -

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

- -

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // We make sure that all the options are not selected
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // We make sure the chosen option is selected
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

Conclusion

- -

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

- -

Here are a few libraries you should consider before coding your own:

- - - -

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html b/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index 33a562813c..0000000000 --- a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Como estruturar um formulário HTML -slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form -tags: - - Beginner - - CodingScripting - - Example - - Forms - - Guide - - HTML - - Learn - - Structure - - Web -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

-
- -

Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.

- - - - - - - - - - - - -
Pré-Requisitos:Leitura sobre computação básica e entendimento básico de HTML.
Objetivo:Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.
- -

A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e acessível.

- -

O elemento <form> 

- -

O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.

- -

Nós já vimos isto em um artigo anterior:

- -
Nota: É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.
- -

Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.

- -
-

Nota: O HTML 5 introduziu o atributo form no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.

-
- -

Os elementos <fieldset> e <legend>

- -

O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.

- -

Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como Jaws ou NVDA, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.

- -

Aqui está um pequeno exemplo:

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -

Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.

- -

O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.

- -

O elemento <label> 

- -

Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:

- -
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
- -

Com o <label> associado corretamente ao <input> por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".

- -

Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.

- -

Observe que um widget pode ser aninhado dentro de seu elemento <label>, assim:

- -
<label for="name">
-  Name: <input type="text" id="name" name="user_name">
-</label>
- -

Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.

- -

Labels são clicáveis também !.

- -

Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.

- -

Por exemplo:

- -
<form>
-  <p>
-    <label for="taste_1">I like cherry</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">I like banana</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

Nota: Você pode encontrar este exemplo em checkbox-label.html (ver ao vivo também).

-
- -

Múltiplos labels

- -

Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.

- -

Vamos considerar este exemplo:

- -
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
-
-<!-- So this: -->
-<div>
-  <label for="username">Name:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- would be better done like this: -->
-<div>
-  <label for="username">
-    <span>Name:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- But this is probably best: -->
-<div>
-  <label for="username">Name: <abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "star" or "required", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).

- - - -
-

Note: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.

-
- -

Note: You can find this example on GitHub as required-labels.html (see it live also). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

- -

Estruturas comuns HTML usadas com formulários

- -

Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.

- -

Como você pode ver nos exemplos, é comum envolver um label e seu widget com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários checkboxes ou radio buttons).

- -

Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.

- -

Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.

- -

Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os radio buttons.

- -

Active learning: building a form structure

- -

Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (The native form widgets). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

- -
    -
  1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
    2. -
  2. First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. Next, start your form off by adding the outer {{htmlelement("form")}} element: - 
    <form>
-
-</form>
    -
    4. -
  4. Inside the <form> tags, start by adding a heading and paragraph to inform users how required fields are marked: - 
    <h1>Payment form</h1>
-<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now: - 
    <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Mister
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Ms.">
-              Miss
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. Now we'll turn to the second <section> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <p>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <input> element of type number, for entering a credit card number. The last one is an <input> element of type date, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section: - 
    <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="number" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formatted as yyyy/mm/dd</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type submit, for submitting the form data. Add this to the bottom of your form now: - 
    <p> <button type="submit">Validate the payment</button> </p>
    -
    8. -
- -

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

Summary

- -

You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.

- -

See Also

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/index.html b/files/pt-br/web/guide/html/forms/index.html deleted file mode 100644 index 15bd243566..0000000000 --- a/files/pt-br/web/guide/html/forms/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Formulários da Web - Trabalhando com dados do usuário -slug: Web/Guide/HTML/Forms -tags: - - Aprender - - Funcionalidades - - Guía - - HTML - - Iniciante - - Web - - formulários -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms. HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  nem sempre é óbvio como usá-los em seu pleno potencial. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!

- -

Pré-requisitos

- -

Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa Introdução ao HTML.

- -
-

Dica: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como JSBin ou Thimble.

-
- -

Guias básicos

- -

Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.

- -
-
Meu primeiro formulário HTML
-
O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.
-
Como estruturar um formulário HTML
-
Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.
-
Os form widgets nativos
-
Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.
-
Enviando e recuperando dados
-
Este artigo mostra o que acontece quando um usuário submete (envia) um formulário — para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.
-
Validação de dados nos formulários HTML
-
Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.
-
- -

Guias avançados

- -

Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.

- -
-
Como criar widgets HTML form personalizados
-
Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.
-
Enviando HTML forms através do JavaScript
-
Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)
-
Formulários HTML para browsers antigos
-
Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.
-
Novidades em formulários no HTML5
-
Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.
-
- -

Guias de estilização de formulários

- -

Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre CSS, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.

- -
-
Estilizando formulários HTML
-
Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.
-
Estilos avançados para HTML forms
-
Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.
-
Tabela de compatibilidade das Propriedades dos widgets
-
Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.
-
- -

Avaliações

- -

A definir.

- -

Veja também

- - diff --git a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html b/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html deleted file mode 100644 index 31ef58aa7c..0000000000 --- a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Meu primeiro formulário HTML -slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML -translation_of: Learn/Forms/Your_first_form ---- -

Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o básico de HTML e CSS.

- -

Antes de começarmos

- -

O que são formulários HTML?

- -

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

- -

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.

- -

O que você precisa para trabalhar com formulários?

- -

Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como Visual Studio, Eclipse, Aptana, etc., mas cabe somente a você.

- -

A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: Envio e recuperação de dados do formulário.

- -

Desenhando seu formulário

- -

Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: peça apenas o que é absolutamente necessário.
- A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:

- - - -

Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.

- -

The form to build, roughly sketch

- -

O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.

- -

Sujar as mãos com HTML

- -


- Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .

- -

O Elemento {{HTMLElement("form")}} 

- -

Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-
-</form>
- -

Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo action e o atributo method.

- - - -

Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo Enviando e recebendo dados de um formulário

- -

Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} 

- -

O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").

- -

Em termos de código HTML, teremos algo assim:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="nome">Nome:</label>
-        <input type="text" id="nome" />
-    </div>
-    <div>
-        <label for="email">E-mail:</label>
-        <input type="email" id="email" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg"></textarea>
-    </div>
-</form>
- -

Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo for em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma label à um campo do formulário. Este atributo faz referência ao id do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: How to structure an HTML form(en).

- -

No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo type. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo native form widgets. Em nosso exemplo, nós usamos somente o  type="text", valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o type="email" que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo Validação de dados de formulário.

- -

Por último, mas não menos importante, observe a sintaxe de <input />  e <textarea> </ textarea>. Esta é uma das esquisitices do HTML. A tag <input /> é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "/" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo value como este:

- -
<input type="text" value="Por padrão, este elemento será preenchido com este texto " />
- -

Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:

- -
<textarea>Por padrão, este elemento será preenchido com este texto </textarea>
- -

E um elemento {{HTMLElement("button")}} para concluir

- -

O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="name">Nome:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg"></textarea>
-    </div>
-    <div class="button">
-        <button type="submit">Enviar sua mensagem</button>
-    </div>
-</form>
- -

Um botão pode ser de três tipos: submit, reset, ou button.

- - - -

Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.

- - - -

Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.

- -

- -

Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:

- -

Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:

- -
form {
-    /* Apenas para centralizar o form na página */
-    margin: 0 auto;
-    width: 400px;
-    /* Para ver as bordas do formulário */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}
- -

Então, adicionaremos algum espaço entre cada conjunto de campos do form:

- -
form div + div {
-    margin-top: 1em;
-}
- -

Agora vamos focar nas labels. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.

- -
label {
-    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo Styling HTML forms.

- -

Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:

- -
input, textarea {
-    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
-    font: 1em sans-serif;
-
-    /* Para dar o mesmo tamanho a todos os campo de texto */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* Para harmonizar o look & feel das bordas nos campos de texto*/
-    border: 1px solid #999;
-}
- -

Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.

- -
input:focus, textarea:focus {
-    /* Dar um pouco de destaque nos elementos ativos */
-    border-color: #000;
-}
- -

Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a label e o campo, temos que alterar a propriedade  vertical-align do {{HTMLElement ("textarea")}} para top.

- -

Observe também o uso da propriedade de resize, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.

- -
textarea {
-    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
-    vertical-align: top;
-
-    /* Para dar espaço suficiente para digitar algum texto */
-    height: 5em;
-
-    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
-    resize: vertical;
-}
- -

Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css button. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando padding e margin.

- -
.button {
-    /* Para posicionar os botões para a mesma posição dos campos de texto */
-    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
-}
-button {
-    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
-    margin-left: .5em;
-}
- -

Agora o nosso formulário parece muito mais bonito.

- -

- -

 

- -

Enviar os dados para seu servidor web

- -

A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.

- -

O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo action e ao atributo method

- -

Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.

- -

Então, para nomear seus dados, você precisará usar o atributo name em cada campo do formulário que irá recolher uma parte específica dos dados:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="nome">Nome:</label>
-        <input type="text" id="nome" name="usuario_nome" />
-    </div>
-    <div>
-        <label for="email">E-mail:</label>
-        <input type="email" id="email" name="usuario_email" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg" name="usuario_msg"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Enviar sua mensagem</button>
-    </div>
-</form>
- -

Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "/pagina-processa-dados-do-form" com o método HTTP:  POST .

- -

No lado do servidor, o script na URL "/pagina-processa-dados-do-form" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo Enviando e recuperando dados de formulário.

- -

 

- -

Conclusão

- -

Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.

- - - - - - - - - - - - - - -
Live example
{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}
- -

Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui e os outros artigos deste guia irá ajudá-lo a dominar o resto.

diff --git a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html b/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html deleted file mode 100644 index ebefe55869..0000000000 --- a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html +++ /dev/null @@ -1,701 +0,0 @@ ---- -title: Os widgets nativos -slug: Web/Guide/HTML/Forms/Os_widgets_nativos -tags: - - Aprender - - Contrôles - - Exemplos - - Guía - - HTML - - Iniciantes - - Intermediário - - Web -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.

- - - - - - - - - - - - -
Pré-requisitos:Alfabetização básica em informática e um entendimento básico de HTML.
Objetivo:Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.
- -

Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários — Veja How to build custom form widgets posteriormente neste mesmo módulo para obter mais idéias sobre isso.

- -
-

Nota: A maioria dos recursos discutidos neste artigo possui amplo suporte nos navegadores; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo referência aos elementos de formulário HTML, e, em particular, nossa extensa referência de tipos <input>.

-
- -

Atributos comuns

- -

Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos. Entretanto, há um conjunto de atributos comuns a todos os elementos do formulário, os quais permitem certo controle sobre os widgets. Aqui está uma lista desses atributos comuns:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome do atributoValor padrãoDescrição
autofocus(falso)Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo digitando sobre um controle diferente. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.
disabled(falso)Este é um atributo booleano que indica que o usuário não pode interagir com este elemento. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo disabled, então o elemento é ativado.
formO elemento do formulário ao qual o widget está associado. O valor do atributo deve ser o atributo id de um {{HTMLElement("form")}} no mesmo documento. Em teoria, permite colocar um widget fora de um elemento {{HTMLElement("form")}}. Na prática, no entanto, não há navegador que suporte esse recurso.
nameO nome do elemento. Este atributo é enviado com os dados do formulário.
valueO Valor inicial do elemento.
- -

Text input fields

- -

Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples

- -
-

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

-
- -

All text fields share some common behaviors:

- - - -
-

Note: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.

-
- -

Single line text fields

- -

A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to text (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, text is the default value). The value text for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify type="date" and the browser doesn't support native date pickers).

- -
-

Note: You can find examples of all the single line text field types on GitHub at single-line-text-fields.html (see it live also).

-
- -

Here is a basic single line text field example:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.

- -

Screenshots of single line text fields on several platforms.

- -

HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

- -

E-mail address field

- -

This type of field is set with the value email for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="email" id="email" name="email" multiple>
- -

When this type is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:

- -

An invalid email input showing the message Please enter an email address.

- -

It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

- -

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

- -
-

Note: You can find out more about form validation in the article Form data validation.

-
- -

Password field

- -

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="password" id="pwd" name="pwd">
- -

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

- -

Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.

- -

Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

- -

Search field

- -

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="search" id="search" name="search">
- -

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

- -

Screenshots of search fields on several platforms.

- -

Phone number field

- -

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

- -
<input type="tel" id="tel" name="tel">
- -

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.

- -

URL field

- -

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="url" id="url" name="url">
- -

It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.

- -
Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
- -
-

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

-
- -

Multi-line text fields

- -

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

- -
<textarea cols="30" rows="10"></textarea>
- -

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

-
- -

{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("textarea")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("cols","textarea")}}20The visible width of the text control, in average character widths.
{{htmlattrxref("rows","textarea")}}The number of visible text lines for the control.
{{htmlattrxref("wrap","textarea")}}softIndicates how the control wraps text. Possible values are: hard or soft
- -

Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.

- -

There are two key related points to note here:

- - - -

Drop-down content

- -

Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the select box, and autocomplete box. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.

- -
-

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

-
- -

Select box

- -

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

- -
<select id="simple" name="simple">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:

- -
<select id="groups" name="groups">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
- -

Screenshots of single line select box on several platforms.

- -

If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

- -

On the {{HTMLElement("optgroup")}} element, the label attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.

- -

Multiple choice select box

- -

By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down Cmd/Ctrl and clicking multiple values).

- -

Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

- -
<select multiple id="multi" name="multi">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

Screenshots of multi-lines select box on several platforms.

- -
Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
- -

Autocomplete box

- -

You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.

- -

The data list is then bound to a text field (usually an <input> element) using the {{htmlattrxref("list","input")}} attribute.

- -

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

- -
<label for="myFruit">What's your favorite fruit?</label>
-<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
-<datalist id="mySuggestion">
-  <option>Apple</option>
-  <option>Banana</option>
-  <option>Blackberry</option>
-  <option>Blueberry</option>
-  <option>Lemon</option>
-  <option>Lychee</option>
-  <option>Peach</option>
-  <option>Pear</option>
-</datalist>
- -
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
- -
Screenshots of datalist on several platforms.
- -
- -

Datalist support and fallbacks

- -

The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.

- -

To handle this, here is a little trick to provide a nice fallback for those browsers:

- -
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">or pick a fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Apple</option>
-    <option>Banana</option>
-    <option>Blackberry</option>
-    <option>Blueberry</option>
-    <option>Lemon</option>
-    <option>Lychee</option>
-    <option>Peach</option>
-    <option>Pear</option>
-  </select>
-</datalist>
-
- -

Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

Checkable items

- -

Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.

- -

It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.

- -
-

Note: You can find the examples from this section on GitHub as checkable-items.html (see it live also).

-
- -

For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. 

- -

You also need to provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

- -

Check box

- -

A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

- -
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

Including the checked attribute makes the checkbox checked automatically when the page loads.

- -

Screenshots of check boxes on several platforms.

- -

Radio button

- -

A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

- -
<input type="radio" checked id="soup" name="meal">
- -

Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

- -
<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Screenshots of radio buttons on several platforms.

- -

Buttons

- -

Within HTML forms, there are three kinds of button:

- -
-
Submit
-
Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the type attribute (or an invalid value of type) results in a submit button.
-
Reset
-
Resets all form widgets to their default values.
-
Anonymous
-
Buttons that have no automatic effect but can be customized using JavaScript code.
-
- -
-

Note: You can find the examples from this section on GitHub as button-examples.html (see it live also).

-
- -

A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:

- -

submit

- -
<button type="submit">
-    This a <br><strong>submit button</strong>
-</button>
-
-<input type="submit" value="This is a submit button">
- -

reset

- -
<button type="reset">
-    This a <br><strong>reset button</strong>
-</button>
-
-<input type="reset" value="This is a reset button">
- -

anonymous

- -
<button type="button">
-    This an <br><strong>anonymous button</strong>
-</button>
-
-<input type="button" value="This is an anonymous button">
- -

Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:

- - - -

Screenshots of buttons on several platforms.

- -

Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

- -

Advanced form widgets

- -

In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.

- -
-

Note: You can find the examples from this section on GitHub as advanced-examples.html (see it live also).

-
- -

Numbers

- -

Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.

- -

It's also possible to:

- - - -

Example

- -
<input type="number" name="age" id="age" min="1" max="10" step="2">
- -

This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.

- -

number inputs are not supported in versions of Internet Explorer below 10.

- -

Sliders

- -

Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.

- -

A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.

- -

Example

- -
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
- -

This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

- -

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.

- -
<label for="beans">How many beans can you eat?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

This can be implemented using some simple JavaScript:

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

Here we store references to the range input and the span in two variables, then we immediately set the span's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

- -

range inputs are not supported in versions of Internet Explorer below 10.

- -

Date and time picker

- -

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.

- -

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.

- -

datetime-local

- -

This creates a widget to display and pick a date with time, but without any specific time zone information.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

This creates a widget to display and pick a month with a year.

- -
<input type="month" name="month" id="month">
- -

time

- -

This creates a widget to display and pick a time value.

- -
<input type="time" name="time" id="time">
- -

week

- -

This creates a widget to display and pick a week number and its year.

- -
<input type="week" name="week" id="week">
- -

All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

- -
<label for="myDate">When are you available this summer?</label>
-<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
- -

Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.

- -

Color picker

- -

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.

- -

A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

- -
<input type="color" name="color" id="color">
- -

Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

- -

Other widgets

- -

There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.

- -
-

Note: You can find the examples from this section on GitHub as other-examples.html (see it live also).

-
- -

File picker

- -

HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

- -

To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

- -

Example

- -

In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

Hidden content

- -

It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value hidden.

- -

If you create such an element, it's required to set its name and value attributes:

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

Image button

- -

The image button control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).

- -

An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.

- -
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:

- - - -

So for example when you click on the image of this widget, you are sent to a URL like the following:

- -
http://foo.com?pos.x=123&pos.y=456
- -

This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

- -

Meters and progress bars

- -

Meters and progress bars are visual representations of numeric values.

- -

Progress

- -

A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.

- -
<progress max="100" value="75">75/100</progress>
- -

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

- -

The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Meter

- -

A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

- - - -

All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:

- - - -

Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.

- -

Conclusion

- -

As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.

- -

See also

- -

To dig into the different form widgets, there are some useful external resources you should check out:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- - - -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index c6eaaee29b..0000000000 --- a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Sending form data -slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

Em muitos casos, a finalidade de HTML Form Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.

- -

Para onde vão os dados?

- -

Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.

- -

Sobre a arquitetura cliente / servidor

- -

A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como Apache, Nginx, IIS, Tomcat, etc.), usando o HTTP protocol. O servidor responde a solicitação usando o mesmo protocolo.

- -

A basic schema of the Web client/server architecture

- -

No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.

- -

No lado do cliente: definindo como enviar os dados

- -

O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.

- -

o atributo {{htmlattrxref("action","form")}}

- -

Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.

- -
Exemplos
- -

Neste exemplo, os dados são enviados para http://foo.com:

- -
<form action="http://foo.com">
- -

Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:

- -
<form action="/somewhere_else">
- -

Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:

- -
<form>
- -

Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.

- -
<form action="#">
- -
-

Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.

-
- -

o atributo {{htmlattrxref("method","form")}}

- -

Este atributo define como os dados são enviados. o HTTP protocol 

- -

Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.

- -

Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.

- -
O método GET
- -

O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.

- -
Exemplo
- Considere o seguinte formulário:
- -
<form action="http://foo.com" method="get">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Envie meus cumprimentos</button>
-</form>
- -

Com o método GET, a solicitação HTTP tem esta aparência:

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
O método POST
- -

O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.

- -
Exemplo
- -

Considere esta forma (a mesma acima):

- -
<form action="http://foo.com" method="post">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

Quando enviado usando o método POST, o pedido HTTP se parece com isto:

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.

- -

Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox Web Console ou o Chrome Developer Tools). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:

- -
    -
  1. Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.
    2. -
  2. Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.
    3. -
- -

No lado do servidor: recuperar os dados

- -

Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.

- -

Exemplo: PHP Bruto

- -

O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.

- -
<?php
-  // The global $_POST variable allows you to access the data sent with the POST method
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:

- -
Oi Mãe
- -

Example: Python Bruto

- -

This example uses Python to do the same thing--display the provided data on a web page. It uses the CGI Python package to access the form data.

- -
#!/usr/bin/env python
-import html
-import cgi
-import cgitb; cgitb.enable()     # for troubleshooting
-
-print("Content-Type: text/html") # HTTP header to say HTML is following
-print()                          # blank line, end of headers
-
-form = cgi.FieldStorage()
-say  = html.escape(form["say"].value);
-to   = html.escape(form["to"].value);
-
-print(say, " ", to)
- -

O resultado é o mesmo que com o PHP:

- -
Oi Mãe
- -

Outros idiomas e frameworks

- -

Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo Perl, Java, .Net, Ruby, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:

- - - -

Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.

- -

Um caso especial: enviar arquivos

- -

Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.

- -

o {{htmlattrxref("enctype","form")}} atributo

- -

Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."

- -

Mas se você quiser enviar arquivos, você precisa fazer duas coisas:

- - - -

Por exemplo:

- -
<form method="post" enctype="multipart/form-data">
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -
-

Nota: Alguns navegadores suportam{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.

-
- -
-

Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.

-
- -

Preocupações com segurança

- -

Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.

- -

Falhas de segurança comuns

- -

Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:

- -

XSS e CSRF

- -

Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.

- -

O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o same origin policy. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.

- -

CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).

- -

Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.

- -

To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim.  Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.

- -

SQL injection

- -

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

- -

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

- -

HTTP header injection and email injection

- -

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.

- -

These attacks are mostly silent, and can turn your server into a zombie.

- -

Be paranoid: Never trust your users

- -

So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

- -

All data that comes to your server must be checked and sanitized. Always. No exception.

- - - -

You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

- -

Conclusion

- -

As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

- -

See also

- -

If you want to learn more about securing a web application, you can dig into these resources:

- - diff --git a/files/pt-br/web/guide/html/html5/index.html b/files/pt-br/web/guide/html/html5/index.html new file mode 100644 index 0000000000..e39b45444a --- /dev/null +++ b/files/pt-br/web/guide/html/html5/index.html @@ -0,0 +1,299 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - Desenvolvimento Web + - Guía + - HTML + - HTML5 + - Visão Geral + - Web +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

+ + + +

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

+ + + +
+ +
+ +

 Semântica 

+ +
+
Seções e estruturas em HTML
+
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
+
Formulários em HTML5 
+
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
+
Novos elementos semânticos
+
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
+
Melhorias no {{HTMLElement("iframe")}}
+
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
+
​MathML
+
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
+
Introdução ao HTML5
+
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
+
HTML5 parser compatível
+
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
+
+ +

Conectividade

+ +
+
Web Sockets
+
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
+
Eventos do servidor
+
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
+
WebRTC
+
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
+ +

Offline e armazenamento

+ +
+
Recursos offline: cache de aplicação
+
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
+
Eventos online e offline
+
+

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

+
+
WHATWG 
+
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
+
IndexedDB
+
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
+
Uso de arquivos de aplicações web
+
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
+
+ +

Multimídia

+ +
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
+
WebRTC
+
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
API da câmera
+
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
+
Track e WebVTT
+
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
+
+ +

Gráficos e efeitos 3D

+ +
+
Canvas
+
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
+
API de texto para {{HTMLElement("canvas")}}
+
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
+
WebGL
+
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
+
SVG
+
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
+
+ +

Performance e integração

+ +
+
Web Workers
+
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
+
XMLHttpRequest level 2
+
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
+
Motor JIT-compiling para JavaScript
+
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
+
History API
+
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
+
O atributo contentEditable: Transforme seu website em uma wiki!
+
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
+
Arrastar e soltar
+
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
+
Foco de gestão em HTML
+
O novo HTML5 activeElement e hasFocus são atributos suportados.
+
Manipuladores de protocolos beseados na web
+
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite o controle de animações de renderização para obter a performance ideal.
+
API Fullscreen
+
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
+
API bloqueio de ponteiro
+
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
+
Eventos online e offline
+
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
+
+ +

Acesso à dispositivos

+ +
+
Usando a API da câmera
+
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
+
Eventos touch
+
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
+
Utilizando geolocalização
+
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
+
Detectando a orientaçåo do dispositivo
+
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
+
Pointer Lock API
+
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
+
+ +

Estilização

+ +

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

+ +
+
Novas caracteristicas dos estilos de background
+
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
+
More fancy borders
+
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
+
Animating your style
+
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
+
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
+
Novos layouts de apresentaçoes
+
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
+
+ + + +

(Alguns outros artigos relacionados com HTML5.)

+ +

Introdução ao HTML5

+ +
+
Introdução ao HTML5
+
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
+
+ +

Elementos do HTML5

+ +
+
Lista de tags / elementos do HTML5
+
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
+
+ +
+
Utilizando audio e video
+
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
+
Formulários em HTML5
+
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
+
Seções e esboços em HTML5
+
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
+
O elemento {{ HTMLElement("mark") }}
+
Este elemento é usado para marcar em destaque um texto de especial relevância.
+
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
+
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
+
+ +

Suporte Canvas

+ +
+
Tutorial Canvas
+
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
+
HTML5 API texto para elemento <canvas>
+
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
+
+ +
+

Recursos de aplicações web

+
+ +
+
Recursos Offline
+
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
+
Eventos online e offline
+
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
+
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
+
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
+
O atributo contentEditable: transforma seu website em um wiki!
+
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
+
Usando arquivos de aplicações web
+
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
+
+ +

Recursos DOM

+ +
+
getElementsByClassName
+
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
+
Arrastar e soltar
+
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
+
Foco na gestão do HTML
+
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
+
Manipuladores de protocolo baseado em web
+
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
+
+ +

HTML parser

+ +

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.) {{ fx_minversion_inline(4.0) }}

+ +

Alterações adicionais

+ + + +

Tecnologias muitas vezes chamado de parte do HTML5 que não são

+ +

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

+ + + +

Veja também

+ +

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

+ + + +
+

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

+
diff --git a/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..465d67760d --- /dev/null +++ b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,23 @@ +--- +title: Introdução ao HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.

+ +

Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

+ +

Seu primeiro passo: O doctype do HTML5

+ +

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

+ +
<!DOCTYPE html>
+
+ +

Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.

+ +
+

{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}

+
+ +

 

diff --git a/files/pt-br/web/guide/html/using_data_attributes/index.html b/files/pt-br/web/guide/html/using_data_attributes/index.html deleted file mode 100644 index 20daf02206..0000000000 --- a/files/pt-br/web/guide/html/using_data_attributes/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Utilizando data attributes -slug: Web/Guide/HTML/Using_data_attributes -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -

O HTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  Atributos data-* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList, atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

- -

Sintaxe HTML

- -

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com data- é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Acesso no JavaScript

- -

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Para obter o atributo data através do objeto dataset, acesse a propriedade utilizando a parte do nome do atributo após o prefixo data- (note que o hífen é convertido para camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição article.dataset.columns = 5 iria alterar esse atributo para "5".

- -

Acesso no CSS

- -

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Pode-se tudo isso em funcionamento neste exemplo JSBin.

- -

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

- -

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

- -

Issues

- -

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. 

- -

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam dataset. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de dataset é até pior que a leitura dos dados com getAttribute().

- -

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

- -

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

- -

Veja também

- - diff --git a/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..09ec86b3a2 --- /dev/null +++ b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,416 @@ +--- +title: Seções e estrutura de um documento HTML5 +slug: Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

+
+ +

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

+ +

Estrutura de um documento em HTML4

+ +

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

+ +

Então a seguinte marcação:

+ +
<div class="section" id="elefantes-da-floresta" >
+<h1>Elefantes da floresta</h1>
+<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
+...esta seção continua...
+<div class="subsection" id="floresta-habitat">
+<h2>Habitat</h2>
+<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
+...esta subseção continua...
+</div>
+</div>
+
+ +

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

+ +
1. Elefantes da floresta
+   1.1 Habitat
+
+ +

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

+ +
<h1>Elefantes da floresta</h1>
+<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
+...esta seção continua...
+<h2>Habitat</h2>
+<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
+...esta subseção continua...
+<h2>Dieta</h2>
+<h1>Esquilo da mongólia</h1>
+
+ +

leva à:

+ +
1. Elefantes da floresta
+   1.1 Habitat
+   1.2 Dieta
+2. Esquilo da mongólia
+
+ +

Problemas resolvidos pelo HTML5

+ +

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

+ +
    +
  1. O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. 
    2. +
  2. Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
    3. +
  3. No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. +
  4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.
    5. +
+ +

+ +

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

+ +

The HTML5 Outline Algorithm

+ +

Definindo seções em HTML5

+ +

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. 

+ +
Nota: Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja Definindo cabeçalhos com HTML5.
+ +

Exemplo:

+ +
<section>
+  <h1>Elefantes da floresta</h1>
+  <section>
+    <h1>Introdução</h1>
+    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
+  </section>
+  <aside>
+    <p>Bloco publicitário</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 O Exemplo de empresa</p>
+</footer>
+
+ +

Esse snippet HTML define duas seções de nível superior:

+ +
 <section>
+  <h1> Elefantes da floresta </h1>
+  <section>
+    <h1> Introdução </h1>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
+  </section>
+  <section>
+    <h1> Habitat </h1>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
+  </section>
+  <aside>
+    <p> bloco de publicidade</p>
+  </aside>
+</section>
+<footer>
+  <p> (c) 2010 A empresa exemplo</p>
+</footer>
+ +

A primeira seção possui três subseções:

+ +
<section>
+   <h1>Forest elephants</h1>
+   <section>
+     <h1>Introduction</h1>
+     <p>In this section, we discuss the lesser known forest elephants.
+   </section>
+   <section>
+     <h1>Habitat</h1>
+     <P>Forest elephants do not live in trees but among them.
+   </section>
+   <aside>
+     <p>advertising block
+   </aside>
+ </section>
+ <footer>
+   <p>(c) 2010 The Example company
+ </footer>
+ +

Isso leva à seguinte estrutura:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+
+ +

Definindo cabeçalho com HTML5

+ +

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

+ +

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+     ...this section continues...
+  <section>
+     <h2>Habitat</h2>
+     <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+
+ +

leva ao seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Habitat
+2. Gerbos da Mongólia
+ +

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

+ +

Seção implícita

+ +

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

+ +

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  <h3 class = "subseção implícita"> Habitat </h3>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
+      ... esta subseção continua ...</p>
+</section>
+
+ +

levando ao seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Habitat (definido implicitamente pelo elemento h3)
+
+ +

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
+  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
+    ... esta seção continua ...</p>
+</section>
+
+ +

levando ao seguinte esboço:

+ +
1. Elefantes da floresta
+2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
+
+ +

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

+ +
<body>
+  <h1> Mamíferos </h1>
+  <h2> Baleias </h2>
+  <p> Nesta seção, discutimos as baleias nadadoras.
+    ... esta seção continua ...</p>
+  <section>
+    <h3> Elefantes da floresta </h3>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+      ... esta seção continua ...</p>
+    <h3> Gerbos da Mongólia </h3>
+      <p> Hordas de gerbos se espalharam muito além da Mongólia.
+        ... esta subseção continua ...</p>
+    <h2> Répteis </h2>
+      <p>Répteis são animais com sangue frio.
+        ... esta subseção continua ...</p>
+  </section>
+</body>
+
+ +

levando ao seguinte esboço:

+ +
1. Mamíferos
+   1.1 Baleias (definidos implicitamente pelo elemento h2)
+   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
+   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
+   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
+
+
+ +

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

+ +

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

+ +

Sobrepondo seções implícitas

+ +

 Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

+ + + +

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

+ +
<section>
+  <hgroup>
+    <h1>Justine</h1>
+    <h2>Les Malheurs de la vertu</h2>
+  </hgroup>
+</section>
+
+ +

leads to the following outline:

+ +
1. Justine
+
+ +

Caminhos de seção

+ +

 Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

+ +

Exemplo:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <section>
+    <h2> Introdução </h2>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
+  </section>
+  <section>
+    <h2> Habitat </h2>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
+      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
+    <blockquote>
+      <h1> Bornéu</h1>
+      <p> O elemento florestal vive em Bornéu ...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Este exemplo resulta no seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Introdução
+   1.2 Habitat
+
+ +

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

+ +

Seções de fora da estrutura

+ +

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

+ +
    +
  1. O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
    2. +
  2. O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
    3. +
  3. O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
    4. +
  4. O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.
    5. +
+ +

Endereços e horário de publicação nos elementos de seção

+ +

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

+ +

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

+ +

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

+ +

Usando elementos HTML5 em navegadores não-HTML5

+ +

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

+ +

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+
+ +

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

+ +
<noscript>
+  <strong> Aviso! </strong>
+  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
+  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
+</noscript>
+
+ +

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Aviso !</strong>
+     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
+     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
+  </noscript>
+<![endif]--> 
+
+ +

Conclusão

+ +

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

+ +

{{ HTML5ArticleTOC() }}

+ +
+

{{ languages( {"es": "/es/Secciones_y_esquema_de_un_documento_HTML_5", "ja": "ja/Sections_and_Outlines_of_an_HTML5_document"}) }}

+
diff --git a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html b/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html deleted file mode 100644 index 46944374f5..0000000000 --- a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Introdução ao Desenvolvimento Web -slug: Web/Guide/Introducao_ao_Desenvolvimento_Web -tags: - - CSS - - CodingScriping - - HTML - - Iniciante - - JavaScript - - Web -translation_of: Web/Guide/Introduction_to_Web_development ---- -

Se você está apenas começando com o desenvolvimento Web ou expandindo seus horizontes em novos domínios da espetacular Web, os links aqui devem ajudá-lo a começar.
-
- Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as páginas de aprendizado do MDN.

- -
Nota: Os recursos recomendados nesta página estão sujeitos à alterações
- - - - - - - - -
-

Tópicos da documentação

- -

HTML

- - - -

CSS

- - - -

JavaScript

- -

Iniciante

- - - -

Intermediário

- - - -

Avançado

- - - 		-

Recursos

- -
-
W3C Web Education Community Group Wiki
-
Aborda design web, HTML e HTML5, CSS, JavaScript e acessibilidade. Este é um bom ponto de partida para iniciantes que desejam aprender fundamentos de desenvolvimento web em várias áreas
-
SitePoint
-
Uma referência confiável para aprender HTML, CSS e Javascript que também menciona o suporte através de diferentes navegadores e erros conhecidos.
-
HTMLDog
-
Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.
-
HTML, CSS, and Javascript do Ground Up
-
Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.
-
Tutoriais iniciantes de CSSTutorial.net
-
Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.
-
Tutoriais CSS do Tizag
-
Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos
-
Fundamentos do jQuery
-
Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.
-
JavaScript From Null: Uma série de vídeos
-
Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.
-
-
diff --git a/files/pt-br/web/guide/introduction_to_web_development/index.html b/files/pt-br/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..46944374f5 --- /dev/null +++ b/files/pt-br/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,97 @@ +--- +title: Introdução ao Desenvolvimento Web +slug: Web/Guide/Introducao_ao_Desenvolvimento_Web +tags: + - CSS + - CodingScriping + - HTML + - Iniciante + - JavaScript + - Web +translation_of: Web/Guide/Introduction_to_Web_development +--- +

Se você está apenas começando com o desenvolvimento Web ou expandindo seus horizontes em novos domínios da espetacular Web, os links aqui devem ajudá-lo a começar.
+
+ Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as páginas de aprendizado do MDN.

+ +
Nota: Os recursos recomendados nesta página estão sujeitos à alterações
+ + + + + + + + +
+

Tópicos da documentação

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ +

Iniciante

+ + + +

Intermediário

+ + + +

Avançado

+ + + 		+

Recursos

+ +
+
W3C Web Education Community Group Wiki
+
Aborda design web, HTML e HTML5, CSS, JavaScript e acessibilidade. Este é um bom ponto de partida para iniciantes que desejam aprender fundamentos de desenvolvimento web em várias áreas
+
SitePoint
+
Uma referência confiável para aprender HTML, CSS e Javascript que também menciona o suporte através de diferentes navegadores e erros conhecidos.
+
HTMLDog
+
Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.
+
HTML, CSS, and Javascript do Ground Up
+
Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.
+
Tutoriais iniciantes de CSSTutorial.net
+
Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.
+
Tutoriais CSS do Tizag
+
Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos
+
Fundamentos do jQuery
+
Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.
+
JavaScript From Null: Uma série de vídeos
+
Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.
+
+
diff --git a/files/pt-br/web/guide/mobile/mobile-friendliness/index.html b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html new file mode 100644 index 0000000000..4fd3c49a1a --- /dev/null +++ b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html @@ -0,0 +1,30 @@ +--- +title: Site Móvel Amigável +slug: Web_Development/Mobile/Mobile-friendliness +translation_of: Web/Guide/Mobile/Mobile-friendliness +--- +

O que é site móvel amigável?

+

Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.

+

Goal #1 (Presentation)

+

“Make websites that work well on a variety of screen sizes.”

+

These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.

+

Goal #2 (Content)

+

“Adjust your content for mobile users.”alaska_air_mobile_and_desktop-300x225.png

+

Think about what your users want to do at your site if they are on a phone. A great example of this is Alaska Air’s website. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.

+

Goal #3 (Performance)

+

“Give your users a smooth experience, even on a slow connection.”

+

Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need.

+

Know your audience

+

While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.

+

Approaches to mobile Web development

+

The following approaches aim to achieve each of these goals by different means.

+ +
+

Original document information

+

Originally published on 4 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", by Jason Grlicky.

+
+

 

diff --git a/files/pt-br/web/guide/mobile/separate_sites/index.html b/files/pt-br/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..2ca783fbc9 --- /dev/null +++ b/files/pt-br/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,30 @@ +--- +title: Sites separados para celular e desktop +slug: Web_Development/Mobile/Sites_separados +translation_of: Web/Guide/Mobile/Separate_sites +--- +

The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.

+

The good

+

The first option is the most popular by far: use user-agent detection to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all three goals of mobile web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.

+

Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!

+

The bad

+

Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.

+

Even more important than that, though, is the fact that user-agent detection is inherently flawed, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.

+

When it is right to choose this option

+

sumo_screenshot.pngFirstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like XHTML-MP or the older WML.

+

This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the most practical choice. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.

+

Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.

+

Examples

+

Most of the major Web applications you see in the wild have chosen this path, including Facebook, YouTube, Digg, and Flickr. In fact, Mozilla picked this strategy for the mobile versions of addons.mozilla.org (AMO) and support.mozilla.org (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the github repository for AMO or SUMO.

+

Approaches to mobile Web development

+

See the following articles for background and other approaches to developing for mobile platforms.

+ +
+

Original document information

+

This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 2 – Separate Sites", by Jason Grlicky.

+
+

 

diff --git a/files/pt-br/web/html/attributes/index.html b/files/pt-br/web/html/attributes/index.html new file mode 100644 index 0000000000..cac8b527ec --- /dev/null +++ b/files/pt-br/web/html/attributes/index.html @@ -0,0 +1,578 @@ +--- +title: Atributos +slug: HTML/Attributes +translation_of: Web/HTML/Attributes +--- +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome do AtributoElementosDescrição
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo.
accept-charset{{ HTMLElement("form") }}Lista de conjunto de caracteres suportados.
accesskeyGlobal attributeDefine um atalho no teclado para ativar ou adicionar foco ao elemento.
action{{ HTMLElement("form") }}A URI de um programa que processa a informação submetida através do formulário.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica o alinhamento horizontal do elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Texto alternativo caso uma imagem não possa ser exibida.
async{{ HTMLElement("script") }}Indica que o script deve ser executado assíncrono.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica se controles  neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}O elemento deve ser focado automaticamente após a página ser carregada.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}O aúdio ou vídeo deve ser reproduzido assim que possível.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Cor do plano de fundo do elemento.

+

Nota: Este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("background-color") }} em vez disso.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

A largura da borda.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("border") }} em vez disso.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contém o intervalo de tempo da mídia que já foi carregada.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara a codificação dos caracteres da página ou do script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica se o elemento deve ser checado no carregamento da página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contêm uma URI que aponta para a fonte da citação ou alteração.
classGlobal attributeFrequentemente usado com CSS para estilizar os elementos com propriedades comuns.
code{{ HTMLElement("applet") }}Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado.
codebase{{ HTMLElement("applet") }}Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("color") }} em vez disso.

+
cols{{ HTMLElement("textarea") }}Define o número de colunas numa area de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}O atributo colspan define o número de colunas que uma célula deve conter.
content{{ HTMLElement("meta") }}Um valor associado com http-equiv ou name dependendo do contexto.
contenteditableGlobal attributeIndica se o conteúdo do elemento é editável.
contextmenuGlobal attributeDefine o ID de um elemento {{ HTMLElement("menu") }} que servirá como o menu de contexto de um outro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário.
coords{{ HTMLElement("area") }}Uma escolha de valores especificando as coordenadas da região hot-spot.
data{{ HTMLElement("object") }}Especifica a URL do recurso.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }} +

Indica a data e o horário associados ao elemento.

+
default{{ HTMLElement("track") }}Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente.
defer{{ HTMLElement("script") }}Indica que o script deve ser executado após a página ter sido analisada.
dirGlobal attributeDefina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se o usuário pode ou não interagir com o elemento.
draggableGlobal attributeDefine se o elemento pode ser arrastado.
dropzoneGlobal attributeIndica que o elemento aceita a soltagem de conteúdo nele.
enctype{{ HTMLElement("form") }}Define o tipo de conteúdo da data do formulário quando o method é POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descreve elementos na qual pertencem a este.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica o formulário que é o proprietário do elemento.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs dos elementos <th> na qual se aplicam a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, isto é um atributo legado, em cujo caso  a propriedade CSS {{ Cssxref("height") }} deveria ser usado em vez. Em outros casos, assim como {{ HTMLElement("canvas") }}, a altura deve ser especificado com esse atributo.
hiddenGlobal attributeIndica a relevância de um elemento.
high{{ HTMLElement("meter") }}Indica o menor limite da faixa superior.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} A URL de um recurso ligado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o idioma de um recurso ligado.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Especifica uma imagem na qual represente o comando.
idGlobal attributeFrequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único.
ismap{{ HTMLElement("img") }}Indica que a imagem é parte de um mapa de imagem "sever-side".
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}Especifica o tipo de chave gerada.
kind{{ HTMLElement("track") }}Especifica o tipo de caminho de texto.
label{{ HTMLElement("track") }}Especifica um título "user-releadable" de um caminho de texto.
langGlobal attributeDefine o idioma usado no elemento.
language{{ HTMLElement("script") }}Define o idioma do script usado no elemento.
list{{ HTMLElement("input") }}Identifica uma lista de opções pré definidas para sugerir ao usuário.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica se a mídia deveria começar tocando do começo quando ela é finalizada.
low{{ HTMLElement("meter") }}Indica o maior limite da menor distância.
manifest{{ HTMLElement("html") }}Especifica a URL do cache manifest do documento. documento
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica o valor máximo permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define o núemro máximo de caracteres permitido no elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Especifica uma sugestão da mídia para qual recurso ligado foi designado.
method{{ HTMLElement("form") }}Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica o valor mínimo permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica se múltiplos valores podem ser inseridos em uma entrada do tipo email ou file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário.
novalidate{{ HTMLElement("form") }}Este atributo indica que o formulário não deveria ser validado quando enviado.
open{{ HTMLElement("details") }}Indica se os detalhes serão mostrados no carregamento da página.
optimum{{ HTMLElement("meter") }}Indica o valor numérico optimal.
pattern{{ HTMLElement("input") }}Define uma espreção regular na qual o valor do elemento será validado de encontro.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornece uma sugestão ao usuário de o que pode ser inserido no campo.
poster{{ HTMLElement("video") }}Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se todo o recurso, partes dele ou nada deveria ser pré carregado.
pubdate{{ HTMLElement("time") }} +

Indica se esta data e tempo é a data no mais próximo

+

elemento antecessor{{ HTMLElement("article") }}.

+
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se o elemento pode ser editado.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o relacionamento do objeto alvo para o objeto ligado.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se este elemento é requerido para preencher ou não.
reversed{{ HTMLElement("ol") }}Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente.
rows{{ HTMLElement("textarea") }}Define o número de linhas em uma área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define o número de linhas que uma célula de tabela deveria abranger mais.
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attributeIndica se o spell de checagem está permitido para o elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Define o valor na qual será selecionado no carregamento da página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define a largura do elemento (em pixels). Se o elemento de atributo type é text ou password então este é o número de caracteres.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }} URL de um conteúdo incorporável.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Define o primeiro número se não for 1.
step{{ HTMLElement("input") }} 
styleGlobal attributeDefine estilos CSS na qual ultrapassarão estilos previamente configurados.
summary{{ HTMLElement("table") }} 
tabindexGlobal attributeUltrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attributeTexto a ser mostrado em uma dica quando suspenso sobre um elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define o tipo de elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define o valor padrão na qual será mostrado no elemento no carregar da página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, este é um atributo legado, no caso da propriedade CSS {{ Cssxref("width") }} deveria ser usado ao em vez. em outros casos, tal como {{ HTMLElement("canvas") }}, a largura deve ser especificada com este atributo.
wrap{{ HTMLElement("textarea") }}Indica se o texto deveria ser enrolado.
+

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/pt-br/web/html/block-level_elements/index.html b/files/pt-br/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..3feed31681 --- /dev/null +++ b/files/pt-br/web/html/block-level_elements/index.html @@ -0,0 +1,126 @@ +--- +title: Elementos block-level +slug: Web/HTML/Elementos_block-level +tags: + - Desenvolvimento + - Guía + - HTML + - HTML5 + - Iniciante + - Web +translation_of: Web/HTML/Block-level_elements +--- +

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um “bloco”. Este artigo ajuda a explicar o que isso significa.

+ +

Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:

+ +

Elementos em nível de bloco

+ +

HTML

+ +
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

Utilização

+ + + +

Nível-de-bloco vs. em-linha

+ +

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

+ +
+
Modelo de conteúdo
+
Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.
+
Formatação padrão
+
Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.
+
+ +

A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo de categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem ao conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

+ +

Elementos

+ +

A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).

+ +
+
+
{{ HTMLElement("address") }}
+
Informação de contato.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Conteúdo do artigo.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Conteúdo lateral.
+
{{ HTMLElement("blockquote") }}
+
Citação longa ("bloco").
+
{{ HTMLElement("details") }}
+
Widget de divulgação.
+
{{ HTMLElement("dialog") }}
+
Caixa de diálogo.
+
{{ HTMLElement("dd") }}
+
Descreve um termo em uma lista de descrição.
+
{{ HTMLElement("div") }}
+
Divisão de conteúdo.
+
{{ HTMLElement("dl") }}
+
Lista de descrição.
+
{{ HTMLElement("fieldset") }}
+
Rótulo de conjunto de campos.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Legenda da figura.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html deleted file mode 100644 index ca188eb6f9..0000000000 --- a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -
-

Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando ray-casting.

-
- -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

- -

Abrir em uma nova janela

- -

Porquê?

- -

Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava lendo sobre ele não estava apenas próximo de ser suportado pelo Firefox, mas que já estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.

- -

A visão geral do canvas e o tutorial que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.

- -

 

- -

Como?

- -

A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.

- -

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
-
- O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

- -

 

- -

Resultados

- -

 

- -


- A tela no Safari 2.0.1 apresentou surpreendentemente bem. Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.
-
- Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

- -

 

- -

O ray-caster

- -

 

- -


- As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).
-
- Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

 

- -

 

- -

 

- -

 

- -

See also

- - diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/html/canvas/index.html deleted file mode 100644 index 821909e726..0000000000 --- a/files/pt-br/web/html/canvas/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - Referência(2) -translation_of: Web/API/Canvas_API ---- -

{{CanvasSidebar}}

- -

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

- -

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

- -

Exemplo básico

- -

Este exemplo simples desenha um retângulo verde para um canvas.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

- -

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 150, 100);
-
- -

Resultado

- -

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

- -

Referência

- - - -
-

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

-
- -

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

- -

Guias e Tutoriais

- -
-
-
Tutorial Canvas
-
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
-
Mergulhando no Canvas HTML5
-
Uma introdução prática e extensa à API Canvas e WebGL.
-
Guia Canvas
-
Uma referência acessível para a API Canvas.
-
Demonstração: Um ray-caster básico 
-
Uma demonstração de animação ray-tracing usando canvas.
-
Manipulando vídeos usando canvas
-
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
-
- -

Bibliotecas

- -

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

- - - -
-

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

-
- -

Especificações

- -
- - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
-
- -

Compatibilidade de navegador

- -

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

- -

Ver também

- - diff --git a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html b/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html deleted file mode 100644 index c379684839..0000000000 --- a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Controlando a verificação ortográfica em formulários HTML -slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML -tags: - - Gerenciamento de configuração - - HTML - - Intermediário -translation_of: Web/HTML/Global_attributes/spellcheck -translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms ---- -

{{ gecko_minversion_header("1.8.1") }} Firefox 2 introduz suporte à verificação ortográfica  para áreas de texto e campos de texto em formulários web. O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.

- -

Por padrão, áreas de texto e documentos  designMode tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.

- -

Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.

- -

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

- -

Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

- -

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

- -
<input type="text" size="50" spellcheck="true">
-
- -

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

- -
<textarea spellcheck="false"></textarea>
-
- -

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

- -

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.

- -

Por exemplo:

- -
<div spellcheck="true">
-  <label>Escreva algo: </label><input type="text" size="50">
-  <br>
-  <label>Escreva outra coisa: </label><input type="text" size="50">
-</div>
-<br>
-<label>Mais alguma coisa: </label><input type="text" size="50">
-
- -

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

- -

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

- -

Iniciando no Gecko 9.0 {{ geckoRelease("9.0") }}, a verificação ortográfica usa o atributo  {{ htmlattrxref("lang", "input") }} do elemento {{ HTMLElement("input") }}  para determinar o idioma padrão da verificação ortográfica. Se o {{ HTMLElement("input") }} não tiver o atributo lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

- -

Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo lang="en", o dicionário inglês será automaticamente usado para este elemento.

- -

Por exemplo:

- -
<html lang="pt-BR">
-<body>
-  <textarea></textarea>
-  <textarea lang="en"></textarea>
-  <div lang="ru">
-    <textarea></textarea>
-  </div>
-</body>
-</html>
-
- -

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

- -

Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.

diff --git a/files/pt-br/web/html/cors_enabled_image/index.html b/files/pt-br/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..5e41b735fe --- /dev/null +++ b/files/pt-br/web/html/cors_enabled_image/index.html @@ -0,0 +1,113 @@ +--- +title: CORS_habilitar_imagens +slug: Web/HTML/CORS_imagens_habilitadas +tags: + - CORS + - Canvas problems + - Crossorigin + - Segurança do Canvas +translation_of: Web/HTML/CORS_enabled_image +--- +

The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

+ +

See CORS settings attributes for details on how the crossorigin attribute is used.

+ +

O que é um "contaminado" canvas?

+ +

Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.

+ +

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

+ +

Exemplo: Armazenando uma imagem de uma origem estrangeira

+ +

 

+ +

Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

+ +
<IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        </FilesMatch>
+    </IfModule>
+</IfModule>
+ +

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

+ +
var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}
+ +

Compatiibilidade do Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/cors_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_imagens_habilitadas/index.html deleted file mode 100644 index 5e41b735fe..0000000000 --- a/files/pt-br/web/html/cors_imagens_habilitadas/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: CORS_habilitar_imagens -slug: Web/HTML/CORS_imagens_habilitadas -tags: - - CORS - - Canvas problems - - Crossorigin - - Segurança do Canvas -translation_of: Web/HTML/CORS_enabled_image ---- -

The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

- -

See CORS settings attributes for details on how the crossorigin attribute is used.

- -

O que é um "contaminado" canvas?

- -

Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.

- -

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

- -

Exemplo: Armazenando uma imagem de uma origem estrangeira

- -

 

- -

Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

- -
<IfModule mod_setenvif.c>
-    <IfModule mod_headers.c>
-        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
-            SetEnvIf Origin ":" IS_CORS
-            Header set Access-Control-Allow-Origin "*" env=IS_CORS
-        </FilesMatch>
-    </IfModule>
-</IfModule>
- -

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

- -
var img = new Image,
-    canvas = document.createElement("canvas"),
-    ctx = canvas.getContext("2d"),
-    src = "http://example.com/image"; // insert image url here
-
-img.crossOrigin = "Anonymous";
-
-img.onload = function() {
-    canvas.width = img.width;
-    canvas.height = img.height;
-    ctx.drawImage( img, 0, 0 );
-    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
-}
-img.src = src;
-// make sure the load event fires for cached images too
-if ( img.complete || img.complete === undefined ) {
-    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
-    img.src = src;
-}
- -

Compatiibilidade do Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Veja também

- - diff --git "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" "b/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" deleted file mode 100644 index e693b6fed8..0000000000 --- "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Dicas para criar páginas HTML de carregamento rápido -slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido -tags: - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Estas dicas são baseadas em conhecimento comum e experimentação.

-

Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.

-

Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.

-

Dicas

-

Reduza o peso da página

-

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

-

Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS inline para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

-

Ferramentas como HTML Tidy podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.

-

Minimize o número de arquivos

-

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP requeridas para realizar o download da página.

-

Dependendo das configurações de cache do browser, este pode enviar uma requisição If-Modified-Since ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

-

Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.

-

Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um sprite de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e caching de uma única imagem devem ajudar a reduzir o tempo de carregamento.

-

Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o browser deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

-

Reduza pesquisa de domínio

-

Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.

-

Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.

-

Conteúdo em cache reutilizado

-

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

-

Em especial, atente ao cabeçalho Last-Modified. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho Last-Modified a páginas estáticas (p. ex.: .html, .css), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:.php, .aspx), isso não pode ser feito, e o cabeçalho não é enviado.

-

Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.

-

Mais informações:

-
    -
  1. Get HTTP Condicional para Hackers RSS
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. Sobre o Last-Modified HTTP e ETag
    4. -
-

Estabeleça a ordem dos componentes da página de forma otimizada

-

Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.

-

Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.

-

Reduza o número de scripts inline

-

Scripts inline podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de parsing está em andamento. Reduzir o número de scripts inline no geral e reduzir o uso de document.write() para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em document.write().

-

Use CSS moderno e marcação validada

-

O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.

-

Usar marcações validadas tem outras vantagens. Primeiro, browsers não precisarão realizar correção de erros durante o parsing de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).

-

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.

-

Divida seu conteúdo

-

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, layout multi-colunas CSS3 ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

-

Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.

-

Ao invés de realizar aninhamentos profundos como:

-
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-

use tabelas não-aninhadas ou divs, como em

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
-

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

-

Especifique tamanhos para imagens e tabelas

-

Se o browser puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, height e width devem ser especificadas para imagens, sempre que possível.

-

Tabelas devem usar a combinação CSS selector:property:

-
  table-layout: fixed;
-
-

e devem especificar as larguras das colunas usando as tags HTML COL e COLGROUP.

-

Escolha bem seus requisitos de agente de usuário

-

Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os browsers, especialmente nos obsoletos.

-

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os browsers modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.

-

Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em browsers.

-

Exemplo de estrutura de página

-

· HTML

-
-
- · HEAD
-
-
-
-
-
- · LINK ...
- Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
-
-
-
-
-
-
-
- · SCRIPT ...
- Arquivos JavaScript para funções requeridas durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
-
- Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
-
-
-
-
-
- · BODY
-
- · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.
-
-
-
-
-
- · SCRIPT ...
- Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.
-
- Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
-
- Se uma ou mais imagens forem usadas para efeitos de rollover, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
-
-
-
-

Use async and defer, se possível

-

Faça com que scripts JavaScript sejam compatíveis tanto com async como defer e use async sempre que possível, especialmente se você tiver múltiplas tags de script.

-

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o browser não renderizará nada que estiver após as tags de script sem esses atributos.

-

Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os browsers. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

- - -
-

Informações do Documento Original

- -
-

 

diff --git a/files/pt-br/web/html/element/command/index.html b/files/pt-br/web/html/element/command/index.html deleted file mode 100644 index 99a42fb9db..0000000000 --- a/files/pt-br/web/html/element/command/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: command -slug: Web/HTML/Element/command -translation_of: Web/HTML/Element/command ---- -

Sumário

- -

O elemento command representa um comando que o usuário pode chamar.

- -

Contexto de uso

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorias de conteúdoFlow content, phrasing content
Elementos permitidosNenhum, é um elemento vazio.
Omissão de tagDeve ter uma tag inicial, mas não deve ter uma tag final.
Elementos pais permitidosQualquer elemento que aceite phrasing content.
Documento normativoHTML5, section 4.11.3
- -

Atributos

- -

Como todos ou outros elementos HTML, esse elemento suporta os global attributes.

- -
-
{{ htmlattrdef("checked") }}
-
Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo type seja checkbox ou radio.
-
{{ htmlattrdef("disabled") }}
-
Indica que o elemento não está disponível.
-
{{ htmlattrdef("icon") }}
-
Atribui uma figura para representar o comando.
-
{{ htmlattrdef("label") }}
-
O nome do comando, como será mostrado para o usuário.
-
{{ htmlattrdef("radiogroup") }}
-
Esse atributo dá o nome de um grupo de comandos, com type sendo radio, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo type seja radio.
-
{{ htmlattrdef("type") }}
-
Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: -
    -
  • -

    command ou vazio que é o estado padrão e indica que é um comando normal.

    -
    • -
  • -

    checkbox indica que o comando pode ser alternado utilizando uma caixa de seleção.

    -
    • -
  • -

    radio indica que o comando pode ser alternado utilizando uma radiobutton.

    -
    • -
-
-
- -

Interface do DOM

- -

Esse elemetno implementa a interface HTMLCommandElement.

- -

Exemplos

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

 

- -

{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}

diff --git a/files/pt-br/web/html/element/content/index.html b/files/pt-br/web/html/element/content/index.html new file mode 100644 index 0000000000..1a1832de04 --- /dev/null +++ b/files/pt-br/web/html/element/content/index.html @@ -0,0 +1,101 @@ +--- +title: ': The Shadow DOM Content Placeholder element (obsolete)' +slug: Web/HTML/Element/conteúdo +translation_of: Web/HTML/Element/content +--- +
{{Deprecated_header}}
+ +

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.

+ +
+

Note: Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
+ +

Attributes

+ +

This element includes the global attributes.

+ +
+
select
+
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
+
+ +

Example

+ +

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

+ +
+

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

If you display this in a web browser it should look like the following.

+ +

content example

+ +

Specifications

+ +

This element is no longer defined by any specifications.

+ +

Browser compatibility

+ + + +

{{Compat("html.elements.content")}}

+ +

See also

+ + + +
{{HTMLRef}}
diff --git "a/files/pt-br/web/html/element/conte\303\272do/index.html" "b/files/pt-br/web/html/element/conte\303\272do/index.html" deleted file mode 100644 index 1a1832de04..0000000000 --- "a/files/pt-br/web/html/element/conte\303\272do/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ': The Shadow DOM Content Placeholder element (obsolete)' -slug: Web/HTML/Element/conteúdo -translation_of: Web/HTML/Element/content ---- -
{{Deprecated_header}}
- -

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.

- -
-

Note: Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -
-
select
-
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
-
- -

Example

- -

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

- -
-

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

-
- -
<html>
-  <head></head>
-  <body>
-  <!-- The original content accessed by <content> -->
-  <div>
-    <h4>My Content Heading</h4>
-    <p>My content text</p>
-  </div>
-
-  <script>
-  // Get the <div> above.
-  var myContent = document.querySelector('div');
-  // Create a shadow DOM on the <div>
-  var shadowroot = myContent.createShadowRoot();
-  // Insert into the shadow DOM a new heading and
-  // part of the original content: the <p> tag.
-  shadowroot.innerHTML =
-   '<h2>Inserted Heading</h2> <content select="p"></content>';
-  </script>
-
-  </body>
-</html>
-
- -

If you display this in a web browser it should look like the following.

- -

content example

- -

Specifications

- -

This element is no longer defined by any specifications.

- -

Browser compatibility

- - - -

{{Compat("html.elements.content")}}

- -

See also

- -
    -
  • Web Components
    • -
  • {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figura/index.html b/files/pt-br/web/html/element/figura/index.html deleted file mode 100644 index 309a10c791..0000000000 --- a/files/pt-br/web/html/element/figura/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/figura -translation_of: Web/HTML/Element/figure ---- -

Resumo

- -

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

- -
-

Notas de uso:

- -
    -
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • -
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • -
-
- -
    -
  • Content categories Flow content, sectioning root, palpable content.
    • -
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • -
  • Omissão de TAGs {{no_tag_omission}}
    • -
  • Permitted parent elements Any element that accepts Flow content.
    • -
  • DOM interface {{domxref("HTMLElement")}}
    • -
- -

Atributos

- -

Este elemento só inclui os atributos globais.

- -

Exemplos

- -

Exemplo 1

- -
<!-- Apenas uma imagem-->
-<figure>
-	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
-</figure>
-<p></p>
-<!-- Imagem com legenda -->
-<figure>
-	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
-	<figcaption>Legenda para a imagem impressionante</figcaption>
-</figure>
-<p></p>
-
- - -
MDN Logo
- -

 

- - -
MDN Logo -
-

Imagem1. MDN Logo

-
-
- -

 

- -

Example 2

- -
    <figure>
-      <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
-        <pre>
-          function NavigatorExample(){
-          var txt;
-          txt = "Browser CodeName: " + navigator.appCodeName;
-          txt+= "Browser Name: " + navigator.appName;
-          txt+= "Browser Version: " + navigator.appVersion ;
-          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
-          txt+= "Platform: " + navigator.platform;
-          txt+= "User-agent header: " + navigator.userAgent;
-          }
-        </pre>
-
- -
-
-

Obtenha os detalhes do browser usando navigator

-
- -
          function NavigatorExample(){
-          var txt;
-          txt = "Browser CodeName: " + navigator.appCodeName;
-          txt+= "Browser Name: " + navigator.appName;
-          txt+= "Browser Version: " + navigator.appVersion ;
-          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
-          txt+= "Platform: " + navigator.platform;
-          txt+= "User-agent header: " + navigator.userAgent;
-          }
-
-
- -

Exemplo 3

- -
<figure>
-      <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
-      <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
-    </figure>
-
-
-
- -
-
Edsger Dijkstra :-
- -

"Se o debugging é o processo de remoção de bugs de software, 
- então programação deve ser o processo de colocá-los"

-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
-
- -

Veja Também

- -
    -
  • O {{HTMLElement("figcaption")}} elemento.
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figure/index.html b/files/pt-br/web/html/element/figure/index.html new file mode 100644 index 0000000000..309a10c791 --- /dev/null +++ b/files/pt-br/web/html/element/figure/index.html @@ -0,0 +1,193 @@ +--- +title:
+slug: Web/HTML/Element/figura +translation_of: Web/HTML/Element/figure +--- +

Resumo

+ +

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

+ +
+

Notas de uso:

+ +
    +
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • +
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • +
+
+ +
    +
  • Content categories Flow content, sectioning root, palpable content.
    • +
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • +
  • Omissão de TAGs {{no_tag_omission}}
    • +
  • Permitted parent elements Any element that accepts Flow content.
    • +
  • DOM interface {{domxref("HTMLElement")}}
    • +
+ +

Atributos

+ +

Este elemento só inclui os atributos globais.

+ +

Exemplos

+ +

Exemplo 1

+ +
<!-- Apenas uma imagem-->
+<figure>
+	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
+</figure>
+<p></p>
+<!-- Imagem com legenda -->
+<figure>
+	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
+	<figcaption>Legenda para a imagem impressionante</figcaption>
+</figure>
+<p></p>
+
+ + +
MDN Logo
+ +

 

+ + +
MDN Logo +
+

Imagem1. MDN Logo

+
+
+ +

 

+ +

Example 2

+ +
    <figure>
+      <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
+        <pre>
+          function NavigatorExample(){
+          var txt;
+          txt = "Browser CodeName: " + navigator.appCodeName;
+          txt+= "Browser Name: " + navigator.appName;
+          txt+= "Browser Version: " + navigator.appVersion ;
+          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+          txt+= "Platform: " + navigator.platform;
+          txt+= "User-agent header: " + navigator.userAgent;
+          }
+        </pre>
+
+ +
+
+

Obtenha os detalhes do browser usando navigator

+
+ +
          function NavigatorExample(){
+          var txt;
+          txt = "Browser CodeName: " + navigator.appCodeName;
+          txt+= "Browser Name: " + navigator.appName;
+          txt+= "Browser Version: " + navigator.appVersion ;
+          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+          txt+= "Platform: " + navigator.platform;
+          txt+= "User-agent header: " + navigator.userAgent;
+          }
+
+
+ +

Exemplo 3

+ +
<figure>
+      <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
+      <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
+    </figure>
+
+
+
+ +
+
Edsger Dijkstra :-
+ +

"Se o debugging é o processo de remoção de bugs de software, 
+ então programação deve ser o processo de colocá-los"

+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
+
+ +

Veja Também

+ +
    +
  • O {{HTMLElement("figcaption")}} elemento.
    • +
+ +
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/data/index.html deleted file mode 100644 index 0bb8fb07f8..0000000000 --- a/files/pt-br/web/html/element/input/data/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/data -tags: - - Date picker - - Elemento - - Elemento de entrada - - HTML - - Input - - NeedsCompatTable - - Referencia - - Selecionador de data - - Tipo de Input - - data -translation_of: Web/HTML/Element/input/date ---- -

Os elementos {{htmlelement("input")}} do tipo date cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

- -

A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um  <input type="text"> simples.

- -
<input id="date" type="date">
- -

{{ EmbedLiveSample('Basic_example', 600, 40) }}

- -

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

- -

- -

O controle de data do Edge se parece assim:

- -

- -

O controle de data do Firefox se parece assim:

- -

Datepicker UI in firefox

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
- -

Valores

- -

Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:

- -
<input id="date" type="date" value="2017-06-01">
- -

{{ EmbedLiveSample('Value', 600, 40) }}

- -

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

- -

Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:

- -
var dateControl = document.querySelector('input[type="date"]');
-dateControl.value = '2017-06-01';
- -

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

- -

Atributos adicionais

- -

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
- -

 

- -

Usando caixas de texto de data

- -

Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <input type="date"> por causa do suporte limitado do navegador.

- -

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.

- -

Uso básico da data

- -

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

- -
<form>
-  <div>
-    <label for="diaa">Informe a data do seu aniversário:</label>
-    <input type="date" id="diaa" name="diaa">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

- -

Definindo data mínima e máxima

- -

Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como 2017-04-01 e data máxima como 2017-04-30:

- -
<form>
-  <div>
-    <label for="festa">Escolha a sua data preferida da festa:</label>
-    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

- -

O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.

- -
-

Observação: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.

-
- -

Controlando o tamanho da entrada

- -

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

- -

Validação

- -

Por padrão <input type="date"> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo text) informar uma data inválida (ex.: o 32 de Abril).

- -

Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.

- -

Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.

- -

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

- -
<form>
-  <div>
-    <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label>
-    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-    <input type="submit">
-  </div>
-</form>
- -

Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:

- -

{{ EmbedLiveSample('Validation', 600, 100) }}

- -

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

- -

- -

Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.

- -
div {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-
-label {
-  display: inline-block;
-  width: 300px;
-}
-
-input:invalid+span:after {
-    content: '✖';
-    padding-left: 5px;
-}
-
-input:valid+span:after {
-    content: '✓';
-    padding-left: 5px;
-}
- -
-

Importante: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado.  É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente.  Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).

-
- -

Manipulação do suporte do navegador

- -

Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:

- -

- -

Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.

- -

O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato yyyy-mm-dd. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:

- -
    -
  • ddmmyyyy
    • -
  • dd/mm/yyyy
    • -
  • mm/dd/yyyy
    • -
  • dd-mm-yyyy
    • -
  • mm-dd-yyyy
    • -
  • Month dd yyyy
    • -
- -

Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:

- -
<form>
-  <div>
-    <label for="diaa">Informe a data do seu aniversário:</label>
-    <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-    <span class="validity"></span>
-  </div>
-  <div>
-    <input type="submit">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

- -

Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

- - - -

A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o selecionador de data do jQuery.

- -

Atributos

- -

Beside the attributes listed below, this element can have any of the global attributes.

- -
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
-
{{htmlattrdef("autofocus")}}
-
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
-
{{htmlattrdef("disabled")}}
-
-

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

-
-
{{htmlattrdef("form")}}
-
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-
{{htmlattrdef("formaction")}}
-
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formenctype")}}
-
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formmethod")}}
-
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formtarget")}}
-
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • -
-
-
{{htmlattrdef("inputmode")}}
-
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: -
    -
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • -
  • latin: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
    • -
  • latin-name: As latin, but for human names.
    • -
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • -
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • -
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • numeric: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
    • -
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • -
  • email: Email input. Use <input type="email"> if possible instead.
    • -
  • url: URL input. Use <input type="url"> if possible instead.
    • -
-
-
{{htmlattrdef("list")}}
-
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
-
{{htmlattrdef("max")}}
-
The maximum value for this item, which must not be less than its minimum (min attribute) value.
-
{{htmlattrdef("min")}}
-
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
-
{{htmlattrdef("name")}}
-
The name of the control, which is submitted with the form data.
-
{{htmlattrdef("readonly")}}
-
This Boolean attribute indicates that the user cannot modify the value of the control.
-
{{htmlattrdef("required")}}
-
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-
{{htmlattrdef("selectionDirection")}}
-
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
-
{{htmlattrdef("spellcheck")}}
-
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
-
{{htmlattrdef("step")}}
-
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
-
{{htmlattrdef("value")}}
-
The initial value of the control. This attribute is optional.
- Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
-
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
-
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
-
- -

Examples

- -

To create a widget to display a date, use:

- -
<input type="date">
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/element/input/date/index.html b/files/pt-br/web/html/element/input/date/index.html new file mode 100644 index 0000000000..0bb8fb07f8 --- /dev/null +++ b/files/pt-br/web/html/element/input/date/index.html @@ -0,0 +1,430 @@ +--- +title: +slug: Web/HTML/Element/Input/data +tags: + - Date picker + - Elemento + - Elemento de entrada + - HTML + - Input + - NeedsCompatTable + - Referencia + - Selecionador de data + - Tipo de Input + - data +translation_of: Web/HTML/Element/input/date +--- +

Os elementos {{htmlelement("input")}} do tipo date cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

+ +

A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um  <input type="text"> simples.

+ +
<input id="date" type="date">
+ +

{{ EmbedLiveSample('Basic_example', 600, 40) }}

+ +

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

+ +

+ +

O controle de data do Edge se parece assim:

+ +

+ +

O controle de data do Firefox se parece assim:

+ +

Datepicker UI in firefox

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

Valores

+ +

Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:

+ +
<input id="date" type="date" value="2017-06-01">
+ +

{{ EmbedLiveSample('Value', 600, 40) }}

+ +

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

+ +

Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:

+ +
var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+ +

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

+ +

Atributos adicionais

+ +

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
+ +

 

+ +

Usando caixas de texto de data

+ +

Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <input type="date"> por causa do suporte limitado do navegador.

+ +

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.

+ +

Uso básico da data

+ +

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

+ +
<form>
+  <div>
+    <label for="diaa">Informe a data do seu aniversário:</label>
+    <input type="date" id="diaa" name="diaa">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

+ +

Definindo data mínima e máxima

+ +

Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como 2017-04-01 e data máxima como 2017-04-30:

+ +
<form>
+  <div>
+    <label for="festa">Escolha a sua data preferida da festa:</label>
+    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

+ +

O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.

+ +
+

Observação: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.

+
+ +

Controlando o tamanho da entrada

+ +

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

+ +

Validação

+ +

Por padrão <input type="date"> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo text) informar uma data inválida (ex.: o 32 de Abril).

+ +

Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.

+ +

Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.

+ +

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

+ +
<form>
+  <div>
+    <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label>
+    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:

+ +

{{ EmbedLiveSample('Validation', 600, 100) }}

+ +

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

+ +

+ +

Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.

+ +
div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}
+ +
+

Importante: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado.  É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente.  Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).

+
+ +

Manipulação do suporte do navegador

+ +

Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:

+ +

+ +

Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.

+ +

O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato yyyy-mm-dd. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:

+ +
    +
  • ddmmyyyy
    • +
  • dd/mm/yyyy
    • +
  • mm/dd/yyyy
    • +
  • dd-mm-yyyy
    • +
  • mm-dd-yyyy
    • +
  • Month dd yyyy
    • +
+ +

Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:

+ +
<form>
+  <div>
+    <label for="diaa">Informe a data do seu aniversário:</label>
+    <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

+ + + +

A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o selecionador de data do jQuery.

+ +

Atributos

+ +

Beside the attributes listed below, this element can have any of the global attributes.

+ +
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
+
{{htmlattrdef("autofocus")}}
+
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
+
{{htmlattrdef("disabled")}}
+
+

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

+
+
{{htmlattrdef("form")}}
+
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
+
{{htmlattrdef("formaction")}}
+
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formenctype")}}
+
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: +
    +
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • +
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • +
  • text/plain
    • +
+ +

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formmethod")}}
+
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: +
    +
  • post: The data from the form is included in the body of the form and is sent to the server.
    • +
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • +
+ +

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formnovalidate")}}
+
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formtarget")}}
+
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: +
    +
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed browsing context.
    • +
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+
+
{{htmlattrdef("inputmode")}}
+
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: +
    +
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • +
  • latin: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
    • +
  • latin-name: As latin, but for human names.
    • +
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • +
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • +
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • numeric: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
    • +
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • +
  • email: Email input. Use <input type="email"> if possible instead.
    • +
  • url: URL input. Use <input type="url"> if possible instead.
    • +
+
+
{{htmlattrdef("list")}}
+
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
+
{{htmlattrdef("max")}}
+
The maximum value for this item, which must not be less than its minimum (min attribute) value.
+
{{htmlattrdef("min")}}
+
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
+
{{htmlattrdef("name")}}
+
The name of the control, which is submitted with the form data.
+
{{htmlattrdef("readonly")}}
+
This Boolean attribute indicates that the user cannot modify the value of the control.
+
{{htmlattrdef("required")}}
+
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
+
{{htmlattrdef("selectionDirection")}}
+
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
+
{{htmlattrdef("spellcheck")}}
+
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+
{{htmlattrdef("step")}}
+
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
+
{{htmlattrdef("value")}}
+
The initial value of the control. This attribute is optional.
+ Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
+
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
+
+ +

Examples

+ +

To create a widget to display a date, use:

+ +
<input type="date">
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/elementos_block-level/index.html b/files/pt-br/web/html/elementos_block-level/index.html deleted file mode 100644 index 3feed31681..0000000000 --- a/files/pt-br/web/html/elementos_block-level/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Elementos block-level -slug: Web/HTML/Elementos_block-level -tags: - - Desenvolvimento - - Guía - - HTML - - HTML5 - - Iniciante - - Web -translation_of: Web/HTML/Block-level_elements ---- -

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um “bloco”. Este artigo ajuda a explicar o que isso significa.

- -

Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:

- -

Elementos em nível de bloco

- -

HTML

- -
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
- -

CSS

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

Utilização

- -
    -
  • Elementos nível de bloco podem aparecer apenas dentro do elemento {{ HTMLElement("body") }} 
    • -
- -

Nível-de-bloco vs. em-linha

- -

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

- -
-
Modelo de conteúdo
-
Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.
-
Formatação padrão
-
Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.
-
- -

A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo de categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem ao conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

- -

Elementos

- -

A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).

- -
-
-
{{ HTMLElement("address") }}
-
Informação de contato.
-
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
-
Conteúdo do artigo.
-
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
-
Conteúdo lateral.
-
{{ HTMLElement("blockquote") }}
-
Citação longa ("bloco").
-
{{ HTMLElement("details") }}
-
Widget de divulgação.
-
{{ HTMLElement("dialog") }}
-
Caixa de diálogo.
-
{{ HTMLElement("dd") }}
-
Descreve um termo em uma lista de descrição.
-
{{ HTMLElement("div") }}
-
Divisão de conteúdo.
-
{{ HTMLElement("dl") }}
-
Lista de descrição.
-
{{ HTMLElement("fieldset") }}
-
Rótulo de conjunto de campos.
-
- -
-
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
-
Legenda da figura.
-
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
- -
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("tfoot") }}
-
Table footer.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
-
Video player.
-
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/favicon/index.html b/files/pt-br/web/html/favicon/index.html deleted file mode 100644 index 6b3bef6490..0000000000 --- a/files/pt-br/web/html/favicon/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: favicon -slug: Web/HTML/favicon ---- -

 

- -

 

- -

Comentário da revisão

- -
-

 

- -

Diga-nos porque fez adições e alterações. É opcional, mas irá fazer com que o histórico da página seja mais fácil de entender.

-
- -
-

É necessário revisão?

- -
    -
    • -
    • -
-
- -
-

 

-
- -

Tags

- -

 

diff --git a/files/pt-br/web/html/formatos_midia_suportados/index.html b/files/pt-br/web/html/formatos_midia_suportados/index.html deleted file mode 100644 index 49c0b02fc1..0000000000 --- a/files/pt-br/web/html/formatos_midia_suportados/index.html +++ /dev/null @@ -1,526 +0,0 @@ ---- -title: Formatos de mídia suportados por elementos HTML de áudio e vídeo -slug: Web/HTML/formatos_midia_suportados -tags: - - Audio - - Firefox - - HTML - - HTML5 - - Ogg - - Reference - - Video - - formatos de arquivos - - mp3 - - mp4 -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -

Os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} fornecem suporte para a reprodução de mídias de áudio e vídeo sem necessitar de plug-ins. Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos,  no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, embora apenas alguns são relevantes para a internet.

- -

Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers relevantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.
-
- Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos: WebM e MPEG H.264 AAC, usando o elemento {{HTMLElement("source")}} desta forma:

- -
<video controls>
-  <source src="somevideo.webm" type="video/webm">
-  <source src="somevideo.mp4" type="video/mp4">
-  Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264.
-  <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
-</video>
-
- -

WebM

- -

O formato WebM é baseado em uma versão restrita do container Matroska. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.
-
- Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo  para o WebM.
-
- O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.
-
- Gecko reconhece os seguintes tipos de arquivos WebM:

- -
-
video/webm
-
Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).
-
audio/webm
-
Um arquivo de mídia WebM contendo apenas áudio.
-
- -

Ogg Theora Vorbis

- -

O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possui suporte para esse formato.
-
- WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disponível, por que ele possui uma melhor qualidade de compressão e tem suporte na maioria dos navegadores. O formato Ogg, contudo, pode ser usado para navegadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).

- -

A situação de patente do Theora é similar com a da WebM.

- -

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

- -

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

- -
-
audio/ogg
-
Um arquivo Ogg que contem apensa áudio
-
video/ogg
-
Um arquivo Ogg que contem vídeo (e possivelmente áudio)
-
application/ogg
-
Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.
-
- -

Ogg Opus

- -

O container Ogg  pode também conter um áudio codificado usando o codec Opus. Suporte para ele está disponível no Gecko 15.0 {{ geckoRelease("15.0") }} e versões superiores, em navegadores no desktop e dispositivos móveis.

- -

Ogg FLAC

- -

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.

- -

MP4 H.264 (AAC ou MP3)

- -

O formato MP4 com o codec de vídeo H.264 e codec de áudio  AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4.

- -
-

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

-
- -

O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

- -

MP3

- -

O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacional fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.

- -

WAVE PCM

- -

O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".

- -
Nota: Veja RFC 2361 para ver registros do codec WAVE
- -

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

- -
    -
  • audio/wave (preferido; não funciona no Chrome)
    • -
  • audio/wav
    • -
  • audio/x-wav
    • -
  • audio/x-pn-wav
    • -
- -

Media Source Extensions (MSE)

- -

Origem da extesão de mídia é um projeto de trabalho da W3C que planeja ampliar {{ domxref("HTMLMediaElement") }} para permitir que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.
-
- Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

- -
-

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: PCM em WAVE{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1
<audio>: Vorbis em WebM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3{{ CompatVersionUnknown() }} (Não em Chromium)Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
<audio>: MP3 em MP4 -

{{ CompatUnknown() }}

- 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
<audio>: AAC em MP4 -

{{ CompatVersionUnknown() }} (Main only) (Não em  Chromium)

- 		-

Partial (Veja abaixo)

- 		9.0{{ CompatVersionUnknown() }}3.1
<audio>: Opus em Ogg27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: VP8 e Vorbis em WebM6.0{{ CompatGeckoDesktop("2.0") }}9.0 (deve ser instalado separadamente, e.g. WebM MF)10.603.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM29.0{{ CompatGeckoDesktop("28.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>:  Theora e Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
<video>: H.264 e AAC em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
outro formato{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (executa todos os formatos via QuickTime)
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari MobileChrome for Android
Suporte básico2.324.01.0.110.011.0Partial (Veja abaixo)3.229.0
<audio>: PCM em WAVE{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: Vorbis em WebM{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: MP3{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: MP3 em MP4{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: AAC em MP4{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo){{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: Opus em Ogg{{ CompatNo() }}24.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  VP8 e Vorbis em WebM2.324.01.0.1{{ CompatNo() }}16.0Partial (Veja abaixo){{ CompatNo() }}29.0
<video>: VP9 and Opus em WebM{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Theora e Vorbis em Ogg{{ CompatNo() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  H.264 e MP3 em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo){{ CompatVersionUnknown() }}29.0
<video>: H.264 e AAC em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo)3.229.0
qualquer outro formato{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Notas:

- -
    -
  • AAC é suportado apenas em containers MP4.
    • -
  • Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositivo  executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.
    • -
  • Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
    • -
  • No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.
    • -
  • Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construídas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PlataformaVersão Firefox
Windows Vista+22.0+
Android20.0+
Firefox OS15.0+
Linux -

26.0+ (depende do codec GStreamer)

-
OS X 10.7+35.0+
- - - -

Veja também

- - diff --git a/files/pt-br/web/html/global_attributes/spellcheck/index.html b/files/pt-br/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..c379684839 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,69 @@ +--- +title: Controlando a verificação ortográfica em formulários HTML +slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML +tags: + - Gerenciamento de configuração + - HTML + - Intermediário +translation_of: Web/HTML/Global_attributes/spellcheck +translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms +--- +

{{ gecko_minversion_header("1.8.1") }} Firefox 2 introduz suporte à verificação ortográfica  para áreas de texto e campos de texto em formulários web. O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.

+ +

Por padrão, áreas de texto e documentos  designMode tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.

+ +

Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.

+ +

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

+ +

Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

+ +

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

+ +
<input type="text" size="50" spellcheck="true">
+
+ +

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

+ +
<textarea spellcheck="false"></textarea>
+
+ +

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

+ +

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.

+ +

Por exemplo:

+ +
<div spellcheck="true">
+  <label>Escreva algo: </label><input type="text" size="50">
+  <br>
+  <label>Escreva outra coisa: </label><input type="text" size="50">
+</div>
+<br>
+<label>Mais alguma coisa: </label><input type="text" size="50">
+
+ +

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

+ +

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

+ +

Iniciando no Gecko 9.0 {{ geckoRelease("9.0") }}, a verificação ortográfica usa o atributo  {{ htmlattrxref("lang", "input") }} do elemento {{ HTMLElement("input") }}  para determinar o idioma padrão da verificação ortográfica. Se o {{ HTMLElement("input") }} não tiver o atributo lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

+ +

Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo lang="en", o dicionário inglês será automaticamente usado para este elemento.

+ +

Por exemplo:

+ +
<html lang="pt-BR">
+<body>
+  <textarea></textarea>
+  <textarea lang="en"></textarea>
+  <div lang="ru">
+    <textarea></textarea>
+  </div>
+</body>
+</html>
+
+ +

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

+ +

Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.

diff --git a/files/pt-br/web/html/html5/index.html b/files/pt-br/web/html/html5/index.html deleted file mode 100644 index e39b45444a..0000000000 --- a/files/pt-br/web/html/html5/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

- -
    -
  • É uma nova versão da linguagem HTML, com novos elementos, atributos, e comportamentos
    • -
  • e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado HTML5 & friends e muitas vezes abreviado apenas como HTML5.
    • -
- -

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

- -
    -
  • Semântica: permite você descrever mais precisamente o seu conteúdo.
    • -
  • Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.
    • -
  • Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.
    • -
  • Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.
    • -
  • Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. 
    • -
  • Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.
    • -
  • Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.
    • -
  • Estilização: permite aos autores a escrita de temas mais sofisticados.
    • -
- -
- -
- -

 Semântica 

- -
-
Seções e estruturas em HTML
-
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
-
Formulários em HTML5 
-
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
-
Novos elementos semânticos
-
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
-
Melhorias no {{HTMLElement("iframe")}}
-
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
-
​MathML
-
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
-
Introdução ao HTML5
-
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
-
HTML5 parser compatível
-
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
-
- -

Conectividade

- -
-
Web Sockets
-
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
-
Eventos do servidor
-
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
-
WebRTC
-
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
- -

Offline e armazenamento

- -
-
Recursos offline: cache de aplicação
-
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
-
Eventos online e offline
-
-

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

-
-
WHATWG 
-
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
-
IndexedDB
-
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
-
Uso de arquivos de aplicações web
-
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
-
- -

Multimídia

- -
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
-
WebRTC
-
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
API da câmera
-
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
-
Track e WebVTT
-
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
-
- -

Gráficos e efeitos 3D

- -
-
Canvas
-
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
-
API de texto para {{HTMLElement("canvas")}}
-
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
-
WebGL
-
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
-
SVG
-
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
-
- -

Performance e integração

- -
-
Web Workers
-
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
-
XMLHttpRequest level 2
-
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
-
Motor JIT-compiling para JavaScript
-
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
-
History API
-
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
-
O atributo contentEditable: Transforme seu website em uma wiki!
-
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
-
Arrastar e soltar
-
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
-
Foco de gestão em HTML
-
O novo HTML5 activeElement e hasFocus são atributos suportados.
-
Manipuladores de protocolos beseados na web
-
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite o controle de animações de renderização para obter a performance ideal.
-
API Fullscreen
-
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
-
API bloqueio de ponteiro
-
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
-
Eventos online e offline
-
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
-
- -

Acesso à dispositivos

- -
-
Usando a API da câmera
-
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
-
Eventos touch
-
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
-
Utilizando geolocalização
-
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
-
Detectando a orientaçåo do dispositivo
-
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
-
Pointer Lock API
-
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
-
- -

Estilização

- -

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

- -
-
Novas caracteristicas dos estilos de background
-
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
-
More fancy borders
-
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
-
Animating your style
-
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
-
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
-
Typography improvement
-
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
-
Novos layouts de apresentaçoes
-
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
-
- - - -

(Alguns outros artigos relacionados com HTML5.)

- -

Introdução ao HTML5

- -
-
Introdução ao HTML5
-
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
-
- -

Elementos do HTML5

- -
-
Lista de tags / elementos do HTML5
-
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
-
- -
-
Utilizando audio e video
-
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
-
Formulários em HTML5
-
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
-
Seções e esboços em HTML5
-
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
O elemento {{ HTMLElement("mark") }}
-
Este elemento é usado para marcar em destaque um texto de especial relevância.
-
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
-
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
-
- -

Suporte Canvas

- -
-
Tutorial Canvas
-
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
-
HTML5 API texto para elemento <canvas>
-
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
-
- -
-

Recursos de aplicações web

-
- -
-
Recursos Offline
-
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
-
Eventos online e offline
-
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
-
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
-
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
-
O atributo contentEditable: transforma seu website em um wiki!
-
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
-
Usando arquivos de aplicações web
-
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
-
- -

Recursos DOM

- -
-
getElementsByClassName
-
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
-
Arrastar e soltar
-
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
-
Foco na gestão do HTML
-
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
-
Manipuladores de protocolo baseado em web
-
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
-
- -

HTML parser

- -

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.) {{ fx_minversion_inline(4.0) }}

- -

Alterações adicionais

- -
    -
  • localName e namespaceURI em documentos HTML agora  se comportam como em documentos XML: localName retorna em minúsculas e  namespaceURI para elementos HTML é "http://www.w3.org/1999/xhtml"
    • -
  • Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento hashchange é enviado para a página. Veja window.onhashchange para mais informação.
    • -
  • Suporte para element.classList para facilitar o manuseio de atributo de classe.
    • -
  • evnto de documento pronto document.onreadystatechange  e document.readyState são propriedades suportadas.
    • -
  • Cores em atributos de apresentação são interpretados de acordo com o HTML5.
    • -
- -

Tecnologias muitas vezes chamado de parte do HTML5 que não são

- -

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

- - - -

Veja também

- -

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

- - - -
-

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

-
diff --git a/files/pt-br/web/html/html5/introduction_to_html5/index.html b/files/pt-br/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 465d67760d..0000000000 --- a/files/pt-br/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.

- -

Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

- -

Seu primeiro passo: O doctype do HTML5

- -

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

- -
<!DOCTYPE html>
-
- -

Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.

- -
-

{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}

-
- -

 

diff --git a/files/pt-br/web/html/inline_elemente/index.html b/files/pt-br/web/html/inline_elemente/index.html deleted file mode 100644 index 7a5866b243..0000000000 --- a/files/pt-br/web/html/inline_elemente/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Elementos inline -slug: Web/HTML/Inline_elemente -translation_of: Web/HTML/Inline_elements ---- -

Sumário

-

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:

-
-
- Modelo de conteúdo
-
- Geralmente, elementos inline devem ter somente dados em outros elementos inline.
-
- Formato
-
- Por padrão, os elementos inline não começam em uma nova linha.
-
-

Elementos

-

Listagem dos elementos que são "inline":

- -

Ver também

- diff --git a/files/pt-br/web/html/inline_elements/index.html b/files/pt-br/web/html/inline_elements/index.html new file mode 100644 index 0000000000..7a5866b243 --- /dev/null +++ b/files/pt-br/web/html/inline_elements/index.html @@ -0,0 +1,29 @@ +--- +title: Elementos inline +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +

Sumário

+

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:

+
+
+ Modelo de conteúdo
+
+ Geralmente, elementos inline devem ter somente dados em outros elementos inline.
+
+ Formato
+
+ Por padrão, os elementos inline não começam em uma nova linha.
+
+

Elementos

+

Listagem dos elementos que são "inline":

+ +

Ver também

+ diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformatos/index.html deleted file mode 100644 index 01e61069a7..0000000000 --- a/files/pt-br/web/html/microformatos/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Microformatos -slug: Web/HTML/microformatos -translation_of: Web/HTML/microformats ---- -
{{HTMLSidebar}}
- -

Microformatos (ás vezes abreviado como μF) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

- -

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

- -

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

- -

Como os Microformatos Funcionam?

- -

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

- -
-
<a class="h-card" href="http://example.com">Joe Bloggs</a>
- -

Quando um analisador encontra  esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

- -

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: name, url, photo.

-
- -

Prefixos de Microformatos

- -

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

- -

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

- -
    -
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: - -
      -
    • h-card descreve uma pessoa ou uma organização.
      • -
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • -
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • -
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • -
    -
    • -
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" -
      -
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • -
    -
    • -
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" -
      -
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • -
    -
    • -
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" -
      -
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • -
    -
    • -
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • -
- -

Alguns exemplos de microformatos

- -

h-card

- -

O microformato h-card representa uma pessoa ou uma organização.

- -

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

- -

Exemplo de h-card

- -
-
<p class="h-card">
-  <img class="u-photo" src="http://example.org/photo.png" alt="" />
-  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
-  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
-  <span class="p-street-address">17 Austerstræti</span>
-  <span class="p-locality">Reykjavík</span>
-  <span class="p-country-name">Iceland</span>
-</p>
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
- -

Exemplo de h-card aninhado

- -
-
<div class="h-card">
-  <a class="p-name u-url"
-   href="http://blog.lizardwrangler.com/"
-  >Mitchell Baker</a>
-  (<a class="p-org h-card"
-    href="http://mozilla.org/"
-   >Mozilla Foundation</a>)
-</div>
-
- -

JSON analisado:

- -
-
{
-  "items": [{
-  "type": ["h-card"],
-  "properties": {
-    "name": ["Mitchell Baker"],
-    "url": ["http://blog.lizardwrangler.com/"],
-    "org": [{
-    "value": "Mozilla Foundation",
-    "type": ["h-card"],
-    "properties": {
-      "name": ["Mozilla Foundation"],
-      "url": ["http://mozilla.org/"]
-    }
-    }]
-  }
-  }]
-}
-
- -

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <a href>.

- -

h-entry

- -

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

- -

Exemplo de h-entry como uma postagem em blog:

- -
-
<article class="h-entry">
-  <h1 class="p-name">Microformats are amazing</h1>
-  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
-   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
-
-  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
-
-  <div class="e-content">
-  <p>Blah blah blah</p>
-  </div>
-</article>
- -

Propriedades

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
- -

Exemplo de h-entry analisado

- -
<div class="h-entry">
-  <p><span class="p-author h-card">
-    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
-    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
-     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
-   <strong>developer.mozilla.org</strong> </a>:
-  </p>
-   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
-   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
-  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
-   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
-</div>
- -
-
{
-  "items": [
-    {
-      "type": [ "h-entry" ],
-      "properties": {
-        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
-        "name": [ "Hey thanks for making this microformats resource" ],
-        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
-        "published": [ "2019-05-31T14:19:09+0000" ],
-        "content": [
-          {
-            "html": "Hey thanks for making this microformats resource",
-            "value": "Hey thanks for making this microformats resource",
-            "lang": "en"
-          }
-        ],
-        "author": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Greg McVerry" ],
-              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
-              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
-            },
-            "lang": "en",
-            "value": "Greg McVerry"
-          }
-        ]
-      },
-      "lang": "en"
-    }
-
- -

h-feed

- -

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

- -

Exemplo h-feed

- -
-
<div class="h-feed">
-  <h1 class="p-name">Microformats Blogs</h1>
-  <article class="h-entry">
-  <h2 class="p-name">Microformats are amazing</h2>
-  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
-     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
-  </p>
-  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
-  <div class="e-content"> <p>Blah blah blah</p> </div>
-  </article>
-</div>
-
- -

Propriedades

- - - - - - - - - - - - - - - - -
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
- -

Filhos

- - - - - - - - - - - - -
h-entry aninhado
objetos representando os itens do feed
- -

h-event

- -

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

- -
-
<div class="h-event">
-  <h1 class="p-name">Microformats Meetup</h1>
-  <p>From
-  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
-  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
-  at <span class="p-location">Some bar in SF</span></p>
-  <p class="p-summary">Get together and discuss all things microformats-related.</p>
-</div>
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
- -

Exemplo de h-event analisado

- -
-
<div class="h-event">
-  <h2 class="p-name">IndieWeb Summit</h2>
-  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
-  <div class="p-location h-card">
-    <div>
-    <span class="p-name">Mozilla</span>
-     </div>
-     <div>
-      <span class="p-street-address">1120 NW Couch St</span>,
-      <span class="p-locality">Portland</span>,
-      <span class="p-region">Oregon</span>,
-      <span class="p-country">US</span>
-     </div>
-       <data class="p-latitude" value="45.52345"></data>
-      <data class="p-longitude" value="-122.682677"></data>
-  </div>
-    <div class="e-content">Come join us
-     </div>
-    <div>
-     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
-    </div>
-</div>
- -
-
{
-  "items": [
-    {
-      "type": [ "h-event" ],
-      "properties": {
-        "name": [ "IndieWeb Summit" ],
-        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
-        "author": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Aaron Parecki" ],
-              "url": [ "https://aaronparecki.com"]
-            },
-            "lang": "en",
-            "value": "Aaron Parecki"
-          }
-        ],
-        "start": [ "2019-06-29T09:00:00-07:00" ],
-        "end": [ "2019-06-30T18:00:00-07:00" ],
-        "published": [ "2019-05-25T18:00:00-07:00" ],
-        "content": [
-          {
-            "html": "Come join us",
-            "value": "Come join us",
-            "lang": "en"
-          }
-        ],
-        "location": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Mozilla" ],
-              p-street-address: [ "1120 NW Couch St" ]
-              "locality": [ "Portland" ],
-              "region": [ "Oregon" ],
-              "country": [ "US" ],
-              "latitude": [ "45.52345" ],
-              "longitude": [ "-122.682677" ]
-            },
-            "lang": "en",
-            "value": "Mozilla"
-          }
-        ]
-      },
-      "lang": "en"
-    }
-  ],
-
-
- -

See also

- - diff --git a/files/pt-br/web/html/microformats/index.html b/files/pt-br/web/html/microformats/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformats/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +
{{HTMLSidebar}}
+ +

Microformatos (ás vezes abreviado como μF) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

+ +

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

+ +

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

+ +

Como os Microformatos Funcionam?

+ +

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

+ +
+
<a class="h-card" href="http://example.com">Joe Bloggs</a>
+ +

Quando um analisador encontra  esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

+ +

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: name, url, photo.

+
+ +

Prefixos de Microformatos

+ +

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

+ +

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

+ +
    +
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: + +
      +
    • h-card descreve uma pessoa ou uma organização.
      • +
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • +
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • +
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • +
    +
    • +
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" +
      +
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • +
    +
    • +
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" +
      +
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • +
    +
    • +
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" +
      +
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • +
    +
    • +
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • +
+ +

Alguns exemplos de microformatos

+ +

h-card

+ +

O microformato h-card representa uma pessoa ou uma organização.

+ +

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

+ +

Exemplo de h-card

+ +
+
<p class="h-card">
+  <img class="u-photo" src="http://example.org/photo.png" alt="" />
+  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
+  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
+  <span class="p-street-address">17 Austerstræti</span>
+  <span class="p-locality">Reykjavík</span>
+  <span class="p-country-name">Iceland</span>
+</p>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
+ +

Exemplo de h-card aninhado

+ +
+
<div class="h-card">
+  <a class="p-name u-url"
+   href="http://blog.lizardwrangler.com/"
+  >Mitchell Baker</a>
+  (<a class="p-org h-card"
+    href="http://mozilla.org/"
+   >Mozilla Foundation</a>)
+</div>
+
+ +

JSON analisado:

+ +
+
{
+  "items": [{
+  "type": ["h-card"],
+  "properties": {
+    "name": ["Mitchell Baker"],
+    "url": ["http://blog.lizardwrangler.com/"],
+    "org": [{
+    "value": "Mozilla Foundation",
+    "type": ["h-card"],
+    "properties": {
+      "name": ["Mozilla Foundation"],
+      "url": ["http://mozilla.org/"]
+    }
+    }]
+  }
+  }]
+}
+
+ +

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <a href>.

+ +

h-entry

+ +

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

+ +

Exemplo de h-entry como uma postagem em blog:

+ +
+
<article class="h-entry">
+  <h1 class="p-name">Microformats are amazing</h1>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
+
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+
+  <div class="e-content">
+  <p>Blah blah blah</p>
+  </div>
+</article>
+ +

Propriedades

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
+ +

Exemplo de h-entry analisado

+ +
<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-entry" ],
+      "properties": {
+        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
+        "name": [ "Hey thanks for making this microformats resource" ],
+        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
+        "published": [ "2019-05-31T14:19:09+0000" ],
+        "content": [
+          {
+            "html": "Hey thanks for making this microformats resource",
+            "value": "Hey thanks for making this microformats resource",
+            "lang": "en"
+          }
+        ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Greg McVerry" ],
+              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
+              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
+            },
+            "lang": "en",
+            "value": "Greg McVerry"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+
+ +

h-feed

+ +

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

+ +

Exemplo h-feed

+ +
+
<div class="h-feed">
+  <h1 class="p-name">Microformats Blogs</h1>
+  <article class="h-entry">
+  <h2 class="p-name">Microformats are amazing</h2>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
+  </p>
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+  <div class="e-content"> <p>Blah blah blah</p> </div>
+  </article>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + +
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
+ +

Filhos

+ + + + + + + + + + + + +
h-entry aninhado
objetos representando os itens do feed
+ +

h-event

+ +

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

+ +
+
<div class="h-event">
+  <h1 class="p-name">Microformats Meetup</h1>
+  <p>From
+  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
+  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
+  at <span class="p-location">Some bar in SF</span></p>
+  <p class="p-summary">Get together and discuss all things microformats-related.</p>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
+ +

Exemplo de h-event analisado

+ +
+
<div class="h-event">
+  <h2 class="p-name">IndieWeb Summit</h2>
+  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
+  <div class="p-location h-card">
+    <div>
+    <span class="p-name">Mozilla</span>
+     </div>
+     <div>
+      <span class="p-street-address">1120 NW Couch St</span>,
+      <span class="p-locality">Portland</span>,
+      <span class="p-region">Oregon</span>,
+      <span class="p-country">US</span>
+     </div>
+       <data class="p-latitude" value="45.52345"></data>
+      <data class="p-longitude" value="-122.682677"></data>
+  </div>
+    <div class="e-content">Come join us
+     </div>
+    <div>
+     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
+    </div>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-event" ],
+      "properties": {
+        "name": [ "IndieWeb Summit" ],
+        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Aaron Parecki" ],
+              "url": [ "https://aaronparecki.com"]
+            },
+            "lang": "en",
+            "value": "Aaron Parecki"
+          }
+        ],
+        "start": [ "2019-06-29T09:00:00-07:00" ],
+        "end": [ "2019-06-30T18:00:00-07:00" ],
+        "published": [ "2019-05-25T18:00:00-07:00" ],
+        "content": [
+          {
+            "html": "Come join us",
+            "value": "Come join us",
+            "lang": "en"
+          }
+        ],
+        "location": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Mozilla" ],
+              p-street-address: [ "1120 NW Couch St" ]
+              "locality": [ "Portland" ],
+              "region": [ "Oregon" ],
+              "country": [ "US" ],
+              "latitude": [ "45.52345" ],
+              "longitude": [ "-122.682677" ]
+            },
+            "lang": "en",
+            "value": "Mozilla"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+  ],
+
+
+ +

See also

+ + diff --git a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 5da1c3efa2..0000000000 --- a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Optimizing your pages for speculative parsing -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -translation_of: Glossary/speculative_parsing ---- -

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

-

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

-

Making speculative loads succeed

-

There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:

-
    -
  • If you use a <base> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via document.write() or document.createElement().
    • -
-

Avoiding losing tree builder output

-

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

-
    -
  • Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
    • -
  • Don't write an unfinished token. <script>document.write("<div></div");</script> is bad.
    • -
  • Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK.
    • -
  • Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.
    • -
  • Don't let the semicolon of a named character reference be the last thing that is written. Due to a bug in Firefox 4 though 10 (fixed in Firefox 11), <script>document.write("foo&nbsp;");</script> causes a speculation failure. However, <script>document.write("&nbsp;foo");</script> is OK.
    • -
  • Don't format part of a table. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> is bad. However, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> is OK.
    • -
  • TODO: document.write inside other formatting elements.
    • -
diff --git a/files/pt-br/web/html/reference/index.html b/files/pt-br/web/html/reference/index.html new file mode 100644 index 0000000000..f0eda6be3f --- /dev/null +++ b/files/pt-br/web/html/reference/index.html @@ -0,0 +1,25 @@ +--- +title: Referência HTML +slug: Web/HTML/ReferenciaHTML +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

+ +
+
Referência de elementos do HTML
+
Esta página lista todos os elementos do HTML que são criados usando tags.
+
Referência de atributos do HTML
+
Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.
+
Atributos globais
+
Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.
+
Tipos de links
+
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
+
Categorias de conteúdo
+
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
+
+ +

Veja todas as páginas com a tag HTML...

+ +
diff --git a/files/pt-br/web/html/referenciahtml/index.html b/files/pt-br/web/html/referenciahtml/index.html deleted file mode 100644 index f0eda6be3f..0000000000 --- a/files/pt-br/web/html/referenciahtml/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Referência HTML -slug: Web/HTML/ReferenciaHTML -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

- -
-
Referência de elementos do HTML
-
Esta página lista todos os elementos do HTML que são criados usando tags.
-
Referência de atributos do HTML
-
Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.
-
Atributos globais
-
Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.
-
Tipos de links
-
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
-
Categorias de conteúdo
-
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
-
- -

Veja todas as páginas com a tag HTML...

- -
diff --git a/files/pt-br/web/html/using_html5_audio_and_video/index.html b/files/pt-br/web/html/using_html5_audio_and_video/index.html deleted file mode 100644 index 4577341105..0000000000 --- a/files/pt-br/web/html/using_html5_audio_and_video/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Utilizando áudio e vídeo com HTML5 -slug: Web/HTML/Using_HTML5_audio_and_video -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.

- -

Incorporando mídia:

- -

Incorporar mídia em documentos HTML é simples:

- -
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
-
- -

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

- -

Aqui há um exemplo de áudio incorporado em um documento HTML

- -
<audio src="/test/audio.ogg">
-<p>Seu nevegador não suporta o elemento audio.</p>
-</audio>
-
- -

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

- -
<audio src="audio.ogg" controls autoplay loop>
-<p>Seu navegador não suporta o elemento audio </p>
-</audio>
-
- -

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

- -
    -
  • controls : Mostra os controles padrão para o áudio na página.
    • -
  • autoplay : Faz com que o áudio reproduza automaticamente.
    • -
  • loop : Faz com que o áudio repita automaticamente.
    • -
- -
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

- -
    -
  • "none" não carrega o arquivo
    • -
  • "auto" carrega o arquivo
    • -
  • "metadata" carrega apenas os meta dados do arquivo
    • -
- -

Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4" type="video/mp4">
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
-
- -

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista media formats supported by the audio and video elements para detalhes.

- -

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
- -

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

- -

Se o atributo type não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo source é verificado.

- -

Veja Media events para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja Media formats supported by the audio and video elements.

- -

Controlando a reprodução de mídia

- -

Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

- -

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

- -
<audio id="demo" src="audio.mp3"></audio>
-<div>
-  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
-  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
-  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
-  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
-</div>
-
- -

Parando o download de mídia

- -

Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.

- -

Esta é um modo para parar o download imediatamente:

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src = "";
-
- -

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

- - - -

Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade currentTime no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.

- -

Você pode usar a propriedade seekable para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.

- -
var mediaElement = document.getElementById('mediaElementID');
-mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
-mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
-mediaElement.currentTime = 122; // Ir para 122 segundos
-mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
-
- -

Especificando o intervalo de reprodução

- -

Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.

- -

O intervalo é especificado usando a sintaxe:

- -
#t=[tempoinicial],[tempofinal]
-
- -

O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).

- -

Alguns exemplos:

- -
-
http://foo.com/video.ogg#t=10,20
-
Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
-
http://foo.com/video.ogg#t=,10.5
-
Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.
-
http://foo.com/video.ogg#t=,02:00:00
-
Especifica que o vídeo deve ser reproduzido do início até 2 horas.
-
http://foo.com/video.ogg#t=60,
-
Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.
-
- -
-

{{ gecko_callout_heading("9.0") }}

- -

O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da Media Fragments URI specification implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.

-
- -

Opções alternativas

- -

O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.

- -

Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.

- -

Utilizando Flash

- -

Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
-
- -

Note que você não deve incluir classid na tag object para que outros navegadores além do Internet Explorer sejam compatíveis.

- -

Reproduzindo vídeos em Ogg usando uma applet Java

- -

Existe uma applet Java chamada Cortado que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:

- -
<video src="my_ogg_video.ogg" controls width="320" height="240">
-  <object type="application/x-java-applet"
-          width="320" height="240">
-     <param name="archive" value="cortado.jar">
-     <param name="code" value="com.fluendo.player.Cortado.class">
-     <param name="url" value="my_ogg_video.ogg">
-     <p>You need to install Java to play this file.</p>
-  </object>
-</video>
-
- -

Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.

- -

{{ h1_gecko_minversion("Error handling", "2.0") }}

- -

A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento error ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.

- -

Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:

- -
<video>
-<source id="mp4_src"
-        src="video.mp4"
-        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-</source>
-<source id="3gp_src"
-        src="video.3gp"
-        type='video/3gpp; codecs="mp4v.20.8, samr"'>
-</source>
-<source id="ogg_src"
-        src="video.ogv"
-        type='video/ogg; codecs="theora, vorbis"'>
-</source>
-</video>
- -

Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos error antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.

- -

Detectando quando nenhuma fonte foi carregada

- -

Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo networkState do elemento media. Se esse valor for HTMLMediaElement.NETWORK_NO_SOURCE, você saberá que todas as fontes falharam o carregamento.

- -

Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.

- -

Veja também

- - - -

{{ HTML5ArticleTOC() }}

- -
{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}
diff --git a/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html b/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html deleted file mode 100644 index 42830a10b9..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Identificando recursos na web -slug: Web/HTTP/Basico_sobre_HTTP/Identifying_resources_on_the_Web -tags: - - Esquema - - HTTP - - O que é HTTP? - - Protocolo HTTP - - Sintaxe URL - - URI - - URL - - query - - resources -translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web ---- -
{{HTTPSidebar}}
- -

O alvo de uma requisição HTTP é chamada de "resource", ou recurso em português, com a natureza ainda não definida; Isso pode ser um documento, uma foto ou qualquer outra coisa. Cada recurso é identificado por uma Identificação de recursos uniforme, do inglês Uniform Resource Identifier ({{Glossary("URI")}}) usada pelo HTTP para identificar recursos.

- -

A identidade e a localização de recursos na Web são fornecidas, principalmente por um único URL (Uniform Resource Locator, um tipo de URI). Pode ser que as vezes as a identidade e a localização não são dadas pelo mesmo URI: O HTTP usa um cabeçalho HTTP específico, {{HTTPHeader("Alt-Svc")}} quando o recurso solicitado quer que o cliente acesse-o de outra localização

- -

URLs e URNs

- -

URLs

- -

A forma mais comum de URL é o Uniform Resource Locator ({{Glossary("URL")}}) , que é conhecido como endereço de Web.

- -
https://developer.mozilla.org
-https://developer.mozilla.org/pt-BR/docs/Learn/
-https://developer.mozilla.org/pt-BR/search?q=URL
- -

Qualquer um desses URLs podem ser digitado na barra de endereços do seu navegador dizendo para carregar a página associada (recurso).

- -

Uma URL é composta por diferentes partes, algumas são estritamente necessárias e outras são opcionais. Um exemplo mais complexo seria algo como isso:

- -
http://www.exemplo.com:80/pasta/para/meu-arquivo.html?chave1=valor1&chave2=valor2#AlgumaCoisaNoDocumento
- -

URNs

- -

Um Nome de Recurso Uniforme do inglês Uniform Resource Name (URN) é uma URI que identifica um recurso pelo nome em um namespace particular.

- -
urn:isbn:9780141036144
-urn:ietf:rfc:7230
-
- -

As duas URNs correspondem

- -
    -
  • o livro Nineteen Eighty-Four por George Orwell,
    • -
  • a especificação 720 da IETF, Hypertext Transfer Protocol (HTTP/1.1): Sintaxe de mensagem e rotas.
    • -
- -

Sintaxe daUniform Resource Identifiers (URIs)

- -

Esquema ou protocolo

- -
-
Protocol
-
http:// é o protocolo. Ele indica qual é o protocolo que o navegador irá usar. Usualmente o protocolo é o HTTP, ou sua versão segura, HTTPS. A Web requer um desses dois, mas os navegadores tambem sabem como lidar com outros protocolos como o mailto: (para abrir um cliente de email) ou o ftp: para fazer uma transferêcia de arquivo, então não fique surpreso se ver alguns desses protocolos. Esquemas comuns são:
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EsquemaDescrição
dataURI de dados
fileNomes de arquivos específicos do host
ftpProtocolo de transferência de arquivo
http/httpsHyper text transfer protocol (Secure)
mailtoEndereço de correio eletrônico (e-mail)
sshSecure shell
teltelefone
urnUniform Resource Names
view-sourceCódigo fonte de um recurso
ws/wssConecções de WebSocket (Encriptadas)
- -

Autoridade

- -
-
Domaine Name
-
www.example.com é o nome de domínio ou autoridade que governa o namespace. Ele indica qual servidor web será solicitado. Alternativamente, é possível utilizar um {{Glossary("IP address")}}, mas isso pode ser menos conveniente e não é muito utilizado na Web.
-
- -

Porta

- -
-
Port
-
:80 é a porta nesta instância . Ela indica qual é o "portão" técnico usado para acessar os recursos no servidor web. Usualmente ela é omitida se o servidor web utiliza a porta padrão do protocolo HTTP (80 para HTTP e 443 para HTTPS) para garantir o acesso aos recursos. Do contrário, ela se torna obrigatória.
-
- -

Caminhos

- -
-
Path to the file
-
/path/to/myfile.html é o caminho para o recurso no servidor Web. Nos primeiros dias da Web, um caminho era representado pelo caminho físico correspondente no servidor web. Hoje em dia isso é mais uma abstração  tratada pelos servidores Web não sendo necessariamente o endereço físico do arquivo em questão.
-
- -

Query / Parâmetros

- -
-
Parameters
-
?key1=value1&key2=value2 são parâmetros extras fornecidos ao servidor Web. Eles são uma lista de pares chaves/valores separados com o símbolo &  O servidor web pode usar esses parametros para fazer coisas extras depois retornando o recurso para o usuário. Cada servidor web tem suas regras em relação aos parâmetros, e o unico jeito confiável de saber como um servidor Web especifico trata os parâmetros é perguntando o dono do servidor.
-
- -

Fragmentos

- -
-
Anchor
-
#SomewhereInTheDocument é uma âncora para outra parte do próprio recurso. Uma âncora representa uma espécie de "marcador" dentro do recurso, dando ao navegador as instruções para mostrar o conteúdo localizado naquele ponto "marcado". Em um documento HTML, por exemplo, o navegador erá dar scroll para a ancora em um ponto definido; em um vídeo ou audio, o navegor erá tentar ir para o tempo que a âncora representa. Vale ressaltar que a parte após o #, também conhecido como identificador de fragmento, nunca é enviado ao servidor com o pedido. 
-
- -

Notas de uso

- -

Ao usar URLs em conteúdo {{Glossary("HTML")}} em geral se deve usar apenas alguns desses esquemas URL. Apenas os esquemas HTTP e HTTPS devem ser usados quando se faz referência a subrecursos — isto é, arquivos carregados como parte de um documento maior. Por razões de segurança, os navegadores estão reduzindo cada vez mais o suporte a FTP para o carregamento de subrecursos.

- -

FTP ainda é aceito em alguns casos específicos de acesso direto, como quando a URL é digitada diretamente na barra do navegador ou como o alvo em um link, ainda que alguns navegadores possam delegar o carregamento do conteúdo FTP para outra aplicação.

- -

Exemplos

- -
https://developer.mozilla.org/en-US/docs/Learn
-tel:+1-816-555-1212
-git@github.com:mdn/browser-compat-data.git
-ftp://example.org/resource.txt
-urn:isbn:9780141036144
-
- -

Especificações

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
- -

Veja também

- - diff --git a/files/pt-br/web/http/basico_sobre_http/index.html b/files/pt-br/web/http/basico_sobre_http/index.html deleted file mode 100644 index a89b456f12..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Básico sobre HTTP -slug: Web/HTTP/Basico_sobre_HTTP -translation_of: Web/HTTP/Basics_of_HTTP ---- -
{{HTTPSidebar}}
- -

HTTP é um protocolo bem extensivo. Isso depende um pouco do conceito básico com noção de recursos e URIs, uma simples estrutura de mensagens, e uma estrutura de cliente-servidor para a comunicação ocorrer. Em cima destes conceitos básicos, várias versões surgiram ao longo do tempo, adicionando novas funcionalidades e novas semanticas para criar novos métodos HTTP ou cabeçalhos.

- -

Artigos

- -
-
Visão geral sobre HTTP
-
-

Descreve o que é HTTP e quais as regras para arquitetura Web, sua posição na lista de protocolos.

-
-
Evolução do HTTP
-
-

HTTP foi criada no inicio dos anos 1990 e vem evolindo ao longo do tempo. Esse artigo passa por sua história e descreve HTTP/0.9, HTTP/1.0, HTTP/1.1, e o moderno HTTP/2 bem como pequenas novidades adicionadas ao longo de seus anos.

-
-
Negociação entre versões HTTP
-
-

Explicações de como um cliente e um servidor conseguem negociar em uma versão expecífica do HTTP e enventuais atualizaçõs nos protocolos usados;

-
-
Recursos e URIs
-
-

Uma breve introdução sobre noção de recursos, identicadores e localizações na Web.

-
-
Identificando recursos na Web
-
Descreve como os recursos Web são referênciados e como encontrar eles.
-
Data URIs
-
-

Um tipo especifico de URIs que incorpora diretamente os recursos apresentados, Data URIs são muito convenientes, mas tem algumas ressalvas

-
-
Separando identidades e localização de recursos: O cabeçalho Alt-Svc HTTP
-
Na maioria das vezes, a indentidade ea localização de um recurso da Web são compartilhados, isso pode ser mudado com no cabeçalho {{HTTPHeader("Alt-Svc")}}.
-
MIME types
-
Desde HTTP/1.0, diferentes tipos de conteúdos poderam ser transmitidos. Esse artigo explica como funciona usando o {cabeçalho {HTTPHeader("Content-Type")}} e o MIME standard.
-
Escolhendo entre URLs www e sem-www
-
-

Ajuda de como usar o prefixo www no domínio ou não, esse artigo fala as consequencias da escolhe e também como fazer isso.

-
-
Fluxo de sessões HTTP
-
-

Esse artigo fundamente descreve uma típica sessão HTTP: o que acontece por trás do do navegador quando você clica em um link.

-
-
Mensagens HTTP
-
-

Mensagens HTTP transmitidas durante o pedido ou resposta tem uma clara estrutura; isso introduz descrição sobre essas estrutura no artigo, seus proprósitos e suas possibilidades.

-
-
Quadro e estrutura de mensagens no HTTP/2
-
-

HTTP/2 junta e representa mensagens do HTTP/1.x em um quadro binário. Esse artigo explica a estrutura do quadro, sua finalidade ea maneira como ele é codificado.

-
-
Gerenciamento de conexão no HTTP/1.x
-
HTTP/1.1 foi a primeira versão do HTTP a suportar conexão constante e canalizar elas. Esse artigo explica sobre estes dois conceitos.
-
Gerenciamento de conexão no HTTP/2
-
HTTP/2 Revisitou completamente como as conexões são criadas e mantidas: esse artigo explica como os quadros HTTP permitem multiplexação e resolver o bloco 'head-of-line' bloqueio das versões anteirores do HTTP.
-
Conteúdo da negociação
-
HTTP introduz um conjunto de cabeçalhos, começando com Accept- como o meio que o navegador anuncia o formato, linguagem, ou a codificação é preferida. Esse artigo explica como esse anuncio acontece, como o servidor é esperado para reagir e como será escolhido a melhor resposta.
-
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html b/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html deleted file mode 100644 index d8f2b6898d..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Lista Incompleta de tipos MIME -slug: Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types -tags: - - Extensões HTTP - - Tipos MIME -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types ---- -
{{HTTPSidebar}}
- -

Abaixo uma lista de tipos de MIME, associadas por tipos de documentos, ordenados por suas extensões comuns.

- -


- Há dois tipo MIME que são importantes para tipos padrões:

- -
    -
  • text/plain é o tipo padrão para arquivos de texto. Um arquivo de texto deve ser legível para um ser humano, e não deve conter dados binários.
    • -
  • application/octet-stream  É um tipo padrão para todos outros casos. Um tipo de arquivo desconhecido deveria usar este tipo. Navegadores tomarão mais cuidado ao manipular esses arquivos, tentando proteger o usuário e prevenir comportamentos perigosos.
    • -
- -

IANA é o registrador official de tipos de mídia MIME e mantém uma lista de todos tipos oficiais de MIME.  Esta tabela lista alguns tipos de MIME importantes para a Web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ExtensãoTipo do documentoTipo MIME
.aacArquivo de audio AACaudio/aac
.abwDocumento AbiWordapplication/x-abiword
.arcArchive document (multiple files embedded)application/octet-stream
.aviArquivo de audio e vídeo  Intercalar AVIvideo/x-msvideo
.azwFormato eBook do Amazon Kindleapplication/vnd.amazon.ebook
.binQualquer tipo de dados bináriosapplication/octet-stream
.bzArquivo compactado  BZipapplication/x-bzip
.bz2Arquivo compactado  BZip2application/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm
- .html		HyperText Markup Language (HTML)text/html
.icoIcon formatimage/x-icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg
- .jpg		JPEG imagesimage/jpeg
.jsJavaScript (ECMAScript)application/javascript
.jsonJSON formatapplication/json
.mid
- .midi		Musical Instrument Digital Interface (MIDI)audio/midi
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif
- .tiff		Tagged Image File Format (TIFF)image/tiff
.tsTypescript fileapplication/typescript
.ttfTrueType Fontfont/ttf
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/x-wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xls
- .xlsx		Microsoft Excelapplication/vnd.ms-excel
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp
- audio/3gpp if it doesn't contain video
.3g23GPP2 audio/video containervideo/3gpp2
- audio/3gpp2 if it doesn't contain video
.7z7-zip archiveapplication/x-7z-compressed
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html b/files/pt-br/web/http/basico_sobre_http/mime_types/index.html deleted file mode 100644 index 3acce2553a..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: MIME types -slug: Web/HTTP/Basico_sobre_HTTP/MIME_types -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types ---- -
{{HTTPSidebar}}
- -

O MIME type é o mecanismo para dizer ao cliente a variedade de documentos transmitidos: a extensão de um nome de arquivo não tem significado na web. Portanto, é importante que o servidor esteja configurado corretamente, de modo que o MIME-type correto seja transmitido com cada documento. Os navegadores costumam usar o MIME-type para determinar qual ação usar como padrão para fazer quando um recurso é obtido.

- -

Existem muitos tipos de documentos, por isso há muitos MIME-types. Neste artigo, listaremos os mais importantes para o desenvolvimento da Web, mas você pode encontrá-los para os tipos de documento aplicáveis ​​neste artigo dedicado: Lista completa de MIME types.

- -

MIME types não são a única maneira de transmitir as informações do tipo de documento:

- -
    -
  • Os sufixos de nome são usados ​​às vezes, especialmente em sistemas Microsoft Windows. Nem todos os sistemas operacionais consideram esses sufixos significativos (especialmente Linux e Mac OS), e como um tipo MIME externo, não há garantia de que eles estejam corretos.
    • -
  • Números mágicos. A sintaxe dos diferentes tipos de arquivos permite a inferência de tipo de arquivo, olhando para a estrutura. Por exemplo. Cada arquivo GIF começa com o valor hexadecimal 47 49 46 38 [GIF89] ou arquivos PNG com 89 50 4E 47 [.PNG]. Nem todos os tipos de arquivos têm números mágicos, portanto este não é um sistema 100% confiável.
    • -
- -

Na Web, apenas o MIME type é relevante e deve ser definido com cuidado. Navegadores e servidores usavam frequentemente heurísticas baseadas em sufixos ou números mágicos para definir o tipo MIME, verificar a coerência ou encontrar o tipo MIME correto quando apenas um tipo genérico foi fornecido.

- -

Sintaxe

- -

Estrutura geral

- -
tipo/subtipo
- -

A estrutura de um MIME type é muito simples; Consiste de um tipo e um subtipo, duas strings, separados por um '/'. Nenhum espaço é permitido. O tipo representa a categoria e pode ser um tipo discreto ou multipart. O subtipo é específico para cada tipo.

- -

Um MIME type é case-insensitive mas tradicionalmente é escrito tudo em minúsculas.

- -

Tipos discretos

- -
text/plain
-text/html
-image/jpeg
-image/png
-audio/mpeg
-audio/ogg
-audio/*
-video/mp4
-application/octet-stream
-…
- -

Tipos discretos indicam a categoria do documento, ele pode ser um dos seguintes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TipoDescriçãoExemplos de subtipos típicos
textRepresenta qualquer documento que contenha texto e é teoricamente legivel para o ser humano.text/plain, text/html, text/css, text/javascript
imageRepresenta qualquer tipo de imagens. Os vídeos não estão incluídos, embora imagens animadas (como gif animado) sejam descritas com um tipo de imagem.image/gif, image/png, image/jpeg, image/bmp, image/webp
audioRepresenta qualquer tipo de arquivo de audioaudio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
videoRepresenta qualquer tipo de arquivo de videovideo/webm, video/ogg
applicationRepresenta qualquer tipo de dados binários.application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf
- -

Para documentos de texto sem um subtipo especifico, text/plain deverá ser usado. Assim como, para documentos binários sem subtipo especifico ou conhecido, application/octet-stream deverá ser usado.

- -

Tipos de multipart

- -
multipart/form-data
-multipart/byteranges
- -

Multipart types indicam uma categoria de documento que são quebrados em partes distintas, muitas vezes com diferentes tipos MIME. É uma maneira de representar um documento composto. Com exceção de multipart/form-data, que são usados ​​em relação de formularios HTML e metodo {{HTTPMethod("POST")}}, e multipart/byteranges que são usados em conjunto com {{HTTPStatus("206")}} Mensagem de status de conteúdo parcial para enviar apenas um subconjunto de um documento inteiro, o HTTP não manipula documentos de várias partes de uma maneira específica: a mensagem é simplesmente transmitida ao navegador (o que provavelmente irá propor uma janela Salvar como, sem saber como exibir o documento).

- -

Importantes MIME types para desenvolvedores Web

- -

application/octet-stream

- -

Este é o valor padrão para um arquivo binario. Como é um arquivo binário desconhecido, os navegadores geralmente não irá executá-lo automaticamente, ou irá perguntar se ele deve ser executado. Eles tratam-na como se o cabeçalho {{HTTPHeader("Content-Disposition")}} fosse definido com o anexo de valor e propusessem um "Salvar como".

- -

text/plain

- -

Este é o valor padrão para arquivos de texto. Mesmo se realmente significa arquivo textual desconhecido, os navegadores assumem que eles podem exibi-lo.

- -
-

Note que text/plain não significa qualquer tipo de dados textuais. Se eles esperam um tipo específico de dados textuais, eles provavelmente não consideram uma correspondência. Especificamente se eles baixarem um arquivo text/plain de um elemento {{HTMLElement ("link")}} declarando arquivos CSS, eles não o reconhecerão como arquivos CSS válidos se forem apresentados com text/plain.
- O CSS mime tipo text/css deve ser usado.

-
- -

text/css

- -

Quaisquer arquivos CSS que têm de ser interpretados como tal em uma página da Web devem ser dos arquivos de text/css. Muitas vezes os servidores não reconhecem arquivos com o sufixo .css como arquivos CSS, em vez disso, enviam-nos com o tipo MIME de text/plain ou application/octet-stream: nesses casos, eles não serão reconhecidos como arquivos CSS pela maioria dos navegadores e serão silenciosamente ignorados.
- Atenção especial tem de ser paga para servir arquivos CSS com o tipo correto.

- -

text/html

- -

Todo o conteúdo HTML deve ser exibido com este tipo. Tipos MIME alternativos para XHTML (como application/xml+html) são em sua maioria inúteis hoje em dia (HTML5 unificou esses formatos).

- -

Images types

- -

Apenas um punhado de tipos de imagem são amplamente reconhecidos e são considerados seguros na Web, prontos para uso em uma página da Web:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MIME typeImage type
image/gifGIF images (Compressão sem perdas, substituído por PNG)
image/jpegJPEG images
image/pngPNG images
image/svg+xmlSVG images (vector images)
- -

Há uma discussão para adicionar WebP (image / webp) a esta lista, mas como cada novo tipo de imagem irá aumentar o tamanho de um codebase, isso pode introduzir novos problemas de segurança, então os fornecedores de navegador são cautelosos em aceitá-lo.

- -

Outros tipos de imagens podem ser encontrados em documentos da Web. Por exemplo, muitos navegadores suportam tipos de imagem de ícones para favicons ou similares.
- Em particular, as imagens do ICO são suportadas neste contexto com o tipo MIME image/x-icon.

- -

Audio and video types

- -

Como as imagens, o HTML não define um conjunto de tipos suportados para usar com os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} , de modo que apenas um grupo relativamente pequeno deles pode ser Usado na Web. Os formatos de mídia suportados pelos elementos de áudio e vídeo em HTML explicam os codecs e formatos de contêiner que podem ser usados.
-
- O tipo MIME de tais arquivos principalmente representam os formatos de contêiner e os mais comuns em um contexto da Web são:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MIME typeAudio or video type
audio/wave
- audio/wav
- audio/x-wav
- audio/x-pn-wav		Um arquivo de áudio no formato de recipiente WAVE. O codec de áudio PCM (WAVE codec "1") é freqüentemente suportado, mas outros codecs têm suporte mais limitado (se houver).
audio/webmUm arquivo de áudio no formato de contêiner WebM. Vorbis e Opus são os codecs de áudio mais comuns.
video/webmUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner WebM. VP8 e VP9 são os codecs video os mais comuns usados ​​dentro dele; Vorbis e Opus os codecs de áudio mais comuns.
audio/oggUm arquivo de áudio no formato de contêiner OGG. Vorbis é o codec de áudio mais comum usado em tal recipiente.
video/oggUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
application/oggUm arquivo de áudio ou vídeo usando o formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
- -

multipart/form-data

- -

O tipo multipart/form-data pode ser usado ao enviar o conteúdo de um  formulario HTML preenchido do navegador para o servidor. Como um documento multipart formal, consiste em partes diferentes, delimitado por um limite (uma seqüência de caracteres começando com um traço duplo '--'). Cada parte é uma entidade por si só, com seus próprios cabeçalhos HTTP, {{HTTPHeader("Content-Disposition")}}, e {{HTTPHeader("Content-Type")}} Para os campos de upload de arquivos, e os mais comuns ({{HTTPHeader("Content-Length")}} É ignorada como a linha de limite é usada como o delimitador).

- -
Content-Type: multipart/form-data; boundary=aBoundaryString
-(Outros cabeçalhos associados ao documento em várias partes como um todo)
-
---aBoundaryString
-Content-Disposition: form-data; name="myFile"; filename="img.jpg"
-Content-Type: image/jpeg
-
-(dados)
---aBoundaryString
-Content-Disposition: form-data; name="myField"
-
-(dados)
---aBoundaryString
-(mais subpartes)
---aBoundaryString--
-
-
- -

O seguinte formulario:

- -
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
-  <input type="text" name="myTextField">
-  <input type="checkbox" name="myCheckBox">Check</input>
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -

Enviará esta mensagem:

- -
POST / HTTP/1.1
-Host: localhost:8000
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-US,en;q=0.5
-Accept-Encoding: gzip, deflate
-Connection: keep-alive
-Upgrade-Insecure-Requests: 1
-Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
-Content-Length: 465
-
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myTextField"
-
-Test
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myCheckBox"
-
-on
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myFile"; filename="test.txt"
-Content-Type: text/plain
-
-Simple file.
------------------------------8721656041911415653955004498--
-
-
- -

multipart/byteranges

- -

O tipo MIME multipart/byteranges é usado no contexto de enviar respostas parciais para o navegador. Quando o código de status de conteúdo parcial {{HTTPStatus("206")}} é enviado, este tipo MIME é usado para indicar que o documento é composto de várias partes, uma para cada um do intervalo solicitado. Como outros tipos de multipart, o {{HTTPHeader("Content-Type")}} usa a diretiva de limite para definir a seqüência de limites. Cada uma das diferentes partes tem um cabeçalho {{HTTPHeader("Content-Type")}} com o tipo real do documento e um {{HTTPHeader("Content-Range")}} com o intervalo que representam.

- -
HTTP/1.1 206 Partial Content
-Accept-Ranges: bytes
-Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
-Content-Length: 385
-
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 100-200/1270
-
-eta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="vieport" content
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 300-400/1270
-
--color: #f0f0f2;
-        margin: 0;
-        padding: 0;
-        font-family: "Open Sans", "Helvetica
---3d6b6a416f9b5--
- -

Importância de definir o MIME type correto

- -

A maioria dos servidores web envia recursos de tipo desconhecido usando o tipo MIME de application/octet-stream padrão. Por razões de segurança, a maioria dos navegadores não permite definir uma ação padrão personalizada para esses recursos, forçando o usuário a armazená-lo no disco para usá-lo. Algumas configurações de servidor incorretamente exibidas ocorrem com os seguintes tipos de arquivo:

- -
    -
  • -

    Arquivos RAR-codificados. Neste caso, o ideal seria definir o verdadeiro tipo de arquivos codificados; Isso muitas vezes não é possível (como pode não ser conhecido para o servidor e esses arquivos podem conter vários recursos de tipos diferentes). Nesse caso, configure o servidor para enviar o tipo MIME application/x-rar-compressed.

    -
    • -
  • -

    Arquivos de áudio e vídeo. Somente recursos com o Tipo MIME correto serão reconhecidos e reproduzidos em elementos {{HTMLElement("video")}} ou {{HTMLElement("áudio")}}. Certifique-se de usar o tipo correto para áudio e vídeo.

    -
    • -
  • -

    Tipos de arquivos proprietários. Preste especial atenção ao servir um tipo de arquivo proprietário. Evite usar o application/octet-stream como manipulação especial não será possível: a maioria dos navegadores não permitem definir um comportamento padrão (como "Abertura no Word") para este tipo MIME genérico.

    -
    • -
- -

MIME sniffing

- -

Na ausência de um tipo MIME, ou em alguns outros casos em que um cliente acredita que estão incorrectamente definidos, os navegadores podem conduzir MIME sniffing, que está adivinhando o tipo MIME correto, olhando para o recurso. Cada navegador executa isso de forma diferente e em circunstâncias diferentes. Existem algumas preocupações de segurança com esta prática,
- Como alguns tipos MIME representam conteúdo executável e outros não. Os servidores podem bloquear MIME sniffing enviando o {{HTTPHeader("X-Content-Type-Options")}} ao longo do {{HTTPHeader("Content-Type")}}.

- -

See also

- - - -
-
-
diff --git a/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html new file mode 100644 index 0000000000..42830a10b9 --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -0,0 +1,183 @@ +--- +title: Identificando recursos na web +slug: Web/HTTP/Basico_sobre_HTTP/Identifying_resources_on_the_Web +tags: + - Esquema + - HTTP + - O que é HTTP? + - Protocolo HTTP + - Sintaxe URL + - URI + - URL + - query + - resources +translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +--- +
{{HTTPSidebar}}
+ +

O alvo de uma requisição HTTP é chamada de "resource", ou recurso em português, com a natureza ainda não definida; Isso pode ser um documento, uma foto ou qualquer outra coisa. Cada recurso é identificado por uma Identificação de recursos uniforme, do inglês Uniform Resource Identifier ({{Glossary("URI")}}) usada pelo HTTP para identificar recursos.

+ +

A identidade e a localização de recursos na Web são fornecidas, principalmente por um único URL (Uniform Resource Locator, um tipo de URI). Pode ser que as vezes as a identidade e a localização não são dadas pelo mesmo URI: O HTTP usa um cabeçalho HTTP específico, {{HTTPHeader("Alt-Svc")}} quando o recurso solicitado quer que o cliente acesse-o de outra localização

+ +

URLs e URNs

+ +

URLs

+ +

A forma mais comum de URL é o Uniform Resource Locator ({{Glossary("URL")}}) , que é conhecido como endereço de Web.

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/pt-BR/docs/Learn/
+https://developer.mozilla.org/pt-BR/search?q=URL
+ +

Qualquer um desses URLs podem ser digitado na barra de endereços do seu navegador dizendo para carregar a página associada (recurso).

+ +

Uma URL é composta por diferentes partes, algumas são estritamente necessárias e outras são opcionais. Um exemplo mais complexo seria algo como isso:

+ +
http://www.exemplo.com:80/pasta/para/meu-arquivo.html?chave1=valor1&chave2=valor2#AlgumaCoisaNoDocumento
+ +

URNs

+ +

Um Nome de Recurso Uniforme do inglês Uniform Resource Name (URN) é uma URI que identifica um recurso pelo nome em um namespace particular.

+ +
urn:isbn:9780141036144
+urn:ietf:rfc:7230
+
+ +

As duas URNs correspondem

+ +
    +
  • o livro Nineteen Eighty-Four por George Orwell,
    • +
  • a especificação 720 da IETF, Hypertext Transfer Protocol (HTTP/1.1): Sintaxe de mensagem e rotas.
    • +
+ +

Sintaxe daUniform Resource Identifiers (URIs)

+ +

Esquema ou protocolo

+ +
+
Protocol
+
http:// é o protocolo. Ele indica qual é o protocolo que o navegador irá usar. Usualmente o protocolo é o HTTP, ou sua versão segura, HTTPS. A Web requer um desses dois, mas os navegadores tambem sabem como lidar com outros protocolos como o mailto: (para abrir um cliente de email) ou o ftp: para fazer uma transferêcia de arquivo, então não fique surpreso se ver alguns desses protocolos. Esquemas comuns são:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EsquemaDescrição
dataURI de dados
fileNomes de arquivos específicos do host
ftpProtocolo de transferência de arquivo
http/httpsHyper text transfer protocol (Secure)
mailtoEndereço de correio eletrônico (e-mail)
sshSecure shell
teltelefone
urnUniform Resource Names
view-sourceCódigo fonte de um recurso
ws/wssConecções de WebSocket (Encriptadas)
+ +

Autoridade

+ +
+
Domaine Name
+
www.example.com é o nome de domínio ou autoridade que governa o namespace. Ele indica qual servidor web será solicitado. Alternativamente, é possível utilizar um {{Glossary("IP address")}}, mas isso pode ser menos conveniente e não é muito utilizado na Web.
+
+ +

Porta

+ +
+
Port
+
:80 é a porta nesta instância . Ela indica qual é o "portão" técnico usado para acessar os recursos no servidor web. Usualmente ela é omitida se o servidor web utiliza a porta padrão do protocolo HTTP (80 para HTTP e 443 para HTTPS) para garantir o acesso aos recursos. Do contrário, ela se torna obrigatória.
+
+ +

Caminhos

+ +
+
Path to the file
+
/path/to/myfile.html é o caminho para o recurso no servidor Web. Nos primeiros dias da Web, um caminho era representado pelo caminho físico correspondente no servidor web. Hoje em dia isso é mais uma abstração  tratada pelos servidores Web não sendo necessariamente o endereço físico do arquivo em questão.
+
+ +

Query / Parâmetros

+ +
+
Parameters
+
?key1=value1&key2=value2 são parâmetros extras fornecidos ao servidor Web. Eles são uma lista de pares chaves/valores separados com o símbolo &  O servidor web pode usar esses parametros para fazer coisas extras depois retornando o recurso para o usuário. Cada servidor web tem suas regras em relação aos parâmetros, e o unico jeito confiável de saber como um servidor Web especifico trata os parâmetros é perguntando o dono do servidor.
+
+ +

Fragmentos

+ +
+
Anchor
+
#SomewhereInTheDocument é uma âncora para outra parte do próprio recurso. Uma âncora representa uma espécie de "marcador" dentro do recurso, dando ao navegador as instruções para mostrar o conteúdo localizado naquele ponto "marcado". Em um documento HTML, por exemplo, o navegador erá dar scroll para a ancora em um ponto definido; em um vídeo ou audio, o navegor erá tentar ir para o tempo que a âncora representa. Vale ressaltar que a parte após o #, também conhecido como identificador de fragmento, nunca é enviado ao servidor com o pedido. 
+
+ +

Notas de uso

+ +

Ao usar URLs em conteúdo {{Glossary("HTML")}} em geral se deve usar apenas alguns desses esquemas URL. Apenas os esquemas HTTP e HTTPS devem ser usados quando se faz referência a subrecursos — isto é, arquivos carregados como parte de um documento maior. Por razões de segurança, os navegadores estão reduzindo cada vez mais o suporte a FTP para o carregamento de subrecursos.

+ +

FTP ainda é aceito em alguns casos específicos de acesso direto, como quando a URL é digitada diretamente na barra do navegador ou como o alvo em um link, ainda que alguns navegadores possam delegar o carregamento do conteúdo FTP para outra aplicação.

+ +

Exemplos

+ +
https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+
+ +

Especificações

+ + + + + + + + + + + + +
SpecificationTitle
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
+ +

Veja também

+ + diff --git a/files/pt-br/web/http/basics_of_http/index.html b/files/pt-br/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..a89b456f12 --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/index.html @@ -0,0 +1,61 @@ +--- +title: Básico sobre HTTP +slug: Web/HTTP/Basico_sobre_HTTP +translation_of: Web/HTTP/Basics_of_HTTP +--- +
{{HTTPSidebar}}
+ +

HTTP é um protocolo bem extensivo. Isso depende um pouco do conceito básico com noção de recursos e URIs, uma simples estrutura de mensagens, e uma estrutura de cliente-servidor para a comunicação ocorrer. Em cima destes conceitos básicos, várias versões surgiram ao longo do tempo, adicionando novas funcionalidades e novas semanticas para criar novos métodos HTTP ou cabeçalhos.

+ +

Artigos

+ +
+
Visão geral sobre HTTP
+
+

Descreve o que é HTTP e quais as regras para arquitetura Web, sua posição na lista de protocolos.

+
+
Evolução do HTTP
+
+

HTTP foi criada no inicio dos anos 1990 e vem evolindo ao longo do tempo. Esse artigo passa por sua história e descreve HTTP/0.9, HTTP/1.0, HTTP/1.1, e o moderno HTTP/2 bem como pequenas novidades adicionadas ao longo de seus anos.

+
+
Negociação entre versões HTTP
+
+

Explicações de como um cliente e um servidor conseguem negociar em uma versão expecífica do HTTP e enventuais atualizaçõs nos protocolos usados;

+
+
Recursos e URIs
+
+

Uma breve introdução sobre noção de recursos, identicadores e localizações na Web.

+
+
Identificando recursos na Web
+
Descreve como os recursos Web são referênciados e como encontrar eles.
+
Data URIs
+
+

Um tipo especifico de URIs que incorpora diretamente os recursos apresentados, Data URIs são muito convenientes, mas tem algumas ressalvas

+
+
Separando identidades e localização de recursos: O cabeçalho Alt-Svc HTTP
+
Na maioria das vezes, a indentidade ea localização de um recurso da Web são compartilhados, isso pode ser mudado com no cabeçalho {{HTTPHeader("Alt-Svc")}}.
+
MIME types
+
Desde HTTP/1.0, diferentes tipos de conteúdos poderam ser transmitidos. Esse artigo explica como funciona usando o {cabeçalho {HTTPHeader("Content-Type")}} e o MIME standard.
+
Escolhendo entre URLs www e sem-www
+
+

Ajuda de como usar o prefixo www no domínio ou não, esse artigo fala as consequencias da escolhe e também como fazer isso.

+
+
Fluxo de sessões HTTP
+
+

Esse artigo fundamente descreve uma típica sessão HTTP: o que acontece por trás do do navegador quando você clica em um link.

+
+
Mensagens HTTP
+
+

Mensagens HTTP transmitidas durante o pedido ou resposta tem uma clara estrutura; isso introduz descrição sobre essas estrutura no artigo, seus proprósitos e suas possibilidades.

+
+
Quadro e estrutura de mensagens no HTTP/2
+
+

HTTP/2 junta e representa mensagens do HTTP/1.x em um quadro binário. Esse artigo explica a estrutura do quadro, sua finalidade ea maneira como ele é codificado.

+
+
Gerenciamento de conexão no HTTP/1.x
+
HTTP/1.1 foi a primeira versão do HTTP a suportar conexão constante e canalizar elas. Esse artigo explica sobre estes dois conceitos.
+
Gerenciamento de conexão no HTTP/2
+
HTTP/2 Revisitou completamente como as conexões são criadas e mantidas: esse artigo explica como os quadros HTTP permitem multiplexação e resolver o bloco 'head-of-line' bloqueio das versões anteirores do HTTP.
+
Conteúdo da negociação
+
HTTP introduz um conjunto de cabeçalhos, começando com Accept- como o meio que o navegador anuncia o formato, linguagem, ou a codificação é preferida. Esse artigo explica como esse anuncio acontece, como o servidor é esperado para reagir e como será escolhido a melhor resposta.
+
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html new file mode 100644 index 0000000000..d8f2b6898d --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html @@ -0,0 +1,336 @@ +--- +title: Lista Incompleta de tipos MIME +slug: Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types +tags: + - Extensões HTTP + - Tipos MIME +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +--- +
{{HTTPSidebar}}
+ +

Abaixo uma lista de tipos de MIME, associadas por tipos de documentos, ordenados por suas extensões comuns.

+ +


+ Há dois tipo MIME que são importantes para tipos padrões:

+ +
    +
  • text/plain é o tipo padrão para arquivos de texto. Um arquivo de texto deve ser legível para um ser humano, e não deve conter dados binários.
    • +
  • application/octet-stream  É um tipo padrão para todos outros casos. Um tipo de arquivo desconhecido deveria usar este tipo. Navegadores tomarão mais cuidado ao manipular esses arquivos, tentando proteger o usuário e prevenir comportamentos perigosos.
    • +
+ +

IANA é o registrador official de tipos de mídia MIME e mantém uma lista de todos tipos oficiais de MIME.  Esta tabela lista alguns tipos de MIME importantes para a Web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExtensãoTipo do documentoTipo MIME
.aacArquivo de audio AACaudio/aac
.abwDocumento AbiWordapplication/x-abiword
.arcArchive document (multiple files embedded)application/octet-stream
.aviArquivo de audio e vídeo  Intercalar AVIvideo/x-msvideo
.azwFormato eBook do Amazon Kindleapplication/vnd.amazon.ebook
.binQualquer tipo de dados bináriosapplication/octet-stream
.bzArquivo compactado  BZipapplication/x-bzip
.bz2Arquivo compactado  BZip2application/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm
+ .html		HyperText Markup Language (HTML)text/html
.icoIcon formatimage/x-icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg
+ .jpg		JPEG imagesimage/jpeg
.jsJavaScript (ECMAScript)application/javascript
.jsonJSON formatapplication/json
.mid
+ .midi		Musical Instrument Digital Interface (MIDI)audio/midi
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif
+ .tiff		Tagged Image File Format (TIFF)image/tiff
.tsTypescript fileapplication/typescript
.ttfTrueType Fontfont/ttf
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/x-wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xls
+ .xlsx		Microsoft Excelapplication/vnd.ms-excel
+ application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp
+ audio/3gpp if it doesn't contain video
.3g23GPP2 audio/video containervideo/3gpp2
+ audio/3gpp2 if it doesn't contain video
.7z7-zip archiveapplication/x-7z-compressed
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..3acce2553a --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,314 @@ +--- +title: MIME types +slug: Web/HTTP/Basico_sobre_HTTP/MIME_types +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +--- +
{{HTTPSidebar}}
+ +

O MIME type é o mecanismo para dizer ao cliente a variedade de documentos transmitidos: a extensão de um nome de arquivo não tem significado na web. Portanto, é importante que o servidor esteja configurado corretamente, de modo que o MIME-type correto seja transmitido com cada documento. Os navegadores costumam usar o MIME-type para determinar qual ação usar como padrão para fazer quando um recurso é obtido.

+ +

Existem muitos tipos de documentos, por isso há muitos MIME-types. Neste artigo, listaremos os mais importantes para o desenvolvimento da Web, mas você pode encontrá-los para os tipos de documento aplicáveis ​​neste artigo dedicado: Lista completa de MIME types.

+ +

MIME types não são a única maneira de transmitir as informações do tipo de documento:

+ +
    +
  • Os sufixos de nome são usados ​​às vezes, especialmente em sistemas Microsoft Windows. Nem todos os sistemas operacionais consideram esses sufixos significativos (especialmente Linux e Mac OS), e como um tipo MIME externo, não há garantia de que eles estejam corretos.
    • +
  • Números mágicos. A sintaxe dos diferentes tipos de arquivos permite a inferência de tipo de arquivo, olhando para a estrutura. Por exemplo. Cada arquivo GIF começa com o valor hexadecimal 47 49 46 38 [GIF89] ou arquivos PNG com 89 50 4E 47 [.PNG]. Nem todos os tipos de arquivos têm números mágicos, portanto este não é um sistema 100% confiável.
    • +
+ +

Na Web, apenas o MIME type é relevante e deve ser definido com cuidado. Navegadores e servidores usavam frequentemente heurísticas baseadas em sufixos ou números mágicos para definir o tipo MIME, verificar a coerência ou encontrar o tipo MIME correto quando apenas um tipo genérico foi fornecido.

+ +

Sintaxe

+ +

Estrutura geral

+ +
tipo/subtipo
+ +

A estrutura de um MIME type é muito simples; Consiste de um tipo e um subtipo, duas strings, separados por um '/'. Nenhum espaço é permitido. O tipo representa a categoria e pode ser um tipo discreto ou multipart. O subtipo é específico para cada tipo.

+ +

Um MIME type é case-insensitive mas tradicionalmente é escrito tudo em minúsculas.

+ +

Tipos discretos

+ +
text/plain
+text/html
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/octet-stream
+…
+ +

Tipos discretos indicam a categoria do documento, ele pode ser um dos seguintes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TipoDescriçãoExemplos de subtipos típicos
textRepresenta qualquer documento que contenha texto e é teoricamente legivel para o ser humano.text/plain, text/html, text/css, text/javascript
imageRepresenta qualquer tipo de imagens. Os vídeos não estão incluídos, embora imagens animadas (como gif animado) sejam descritas com um tipo de imagem.image/gif, image/png, image/jpeg, image/bmp, image/webp
audioRepresenta qualquer tipo de arquivo de audioaudio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
videoRepresenta qualquer tipo de arquivo de videovideo/webm, video/ogg
applicationRepresenta qualquer tipo de dados binários.application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf
+ +

Para documentos de texto sem um subtipo especifico, text/plain deverá ser usado. Assim como, para documentos binários sem subtipo especifico ou conhecido, application/octet-stream deverá ser usado.

+ +

Tipos de multipart

+ +
multipart/form-data
+multipart/byteranges
+ +

Multipart types indicam uma categoria de documento que são quebrados em partes distintas, muitas vezes com diferentes tipos MIME. É uma maneira de representar um documento composto. Com exceção de multipart/form-data, que são usados ​​em relação de formularios HTML e metodo {{HTTPMethod("POST")}}, e multipart/byteranges que são usados em conjunto com {{HTTPStatus("206")}} Mensagem de status de conteúdo parcial para enviar apenas um subconjunto de um documento inteiro, o HTTP não manipula documentos de várias partes de uma maneira específica: a mensagem é simplesmente transmitida ao navegador (o que provavelmente irá propor uma janela Salvar como, sem saber como exibir o documento).

+ +

Importantes MIME types para desenvolvedores Web

+ +

application/octet-stream

+ +

Este é o valor padrão para um arquivo binario. Como é um arquivo binário desconhecido, os navegadores geralmente não irá executá-lo automaticamente, ou irá perguntar se ele deve ser executado. Eles tratam-na como se o cabeçalho {{HTTPHeader("Content-Disposition")}} fosse definido com o anexo de valor e propusessem um "Salvar como".

+ +

text/plain

+ +

Este é o valor padrão para arquivos de texto. Mesmo se realmente significa arquivo textual desconhecido, os navegadores assumem que eles podem exibi-lo.

+ +
+

Note que text/plain não significa qualquer tipo de dados textuais. Se eles esperam um tipo específico de dados textuais, eles provavelmente não consideram uma correspondência. Especificamente se eles baixarem um arquivo text/plain de um elemento {{HTMLElement ("link")}} declarando arquivos CSS, eles não o reconhecerão como arquivos CSS válidos se forem apresentados com text/plain.
+ O CSS mime tipo text/css deve ser usado.

+
+ +

text/css

+ +

Quaisquer arquivos CSS que têm de ser interpretados como tal em uma página da Web devem ser dos arquivos de text/css. Muitas vezes os servidores não reconhecem arquivos com o sufixo .css como arquivos CSS, em vez disso, enviam-nos com o tipo MIME de text/plain ou application/octet-stream: nesses casos, eles não serão reconhecidos como arquivos CSS pela maioria dos navegadores e serão silenciosamente ignorados.
+ Atenção especial tem de ser paga para servir arquivos CSS com o tipo correto.

+ +

text/html

+ +

Todo o conteúdo HTML deve ser exibido com este tipo. Tipos MIME alternativos para XHTML (como application/xml+html) são em sua maioria inúteis hoje em dia (HTML5 unificou esses formatos).

+ +

Images types

+ +

Apenas um punhado de tipos de imagem são amplamente reconhecidos e são considerados seguros na Web, prontos para uso em uma página da Web:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeImage type
image/gifGIF images (Compressão sem perdas, substituído por PNG)
image/jpegJPEG images
image/pngPNG images
image/svg+xmlSVG images (vector images)
+ +

Há uma discussão para adicionar WebP (image / webp) a esta lista, mas como cada novo tipo de imagem irá aumentar o tamanho de um codebase, isso pode introduzir novos problemas de segurança, então os fornecedores de navegador são cautelosos em aceitá-lo.

+ +

Outros tipos de imagens podem ser encontrados em documentos da Web. Por exemplo, muitos navegadores suportam tipos de imagem de ícones para favicons ou similares.
+ Em particular, as imagens do ICO são suportadas neste contexto com o tipo MIME image/x-icon.

+ +

Audio and video types

+ +

Como as imagens, o HTML não define um conjunto de tipos suportados para usar com os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} , de modo que apenas um grupo relativamente pequeno deles pode ser Usado na Web. Os formatos de mídia suportados pelos elementos de áudio e vídeo em HTML explicam os codecs e formatos de contêiner que podem ser usados.
+
+ O tipo MIME de tais arquivos principalmente representam os formatos de contêiner e os mais comuns em um contexto da Web são:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeAudio or video type
audio/wave
+ audio/wav
+ audio/x-wav
+ audio/x-pn-wav		Um arquivo de áudio no formato de recipiente WAVE. O codec de áudio PCM (WAVE codec "1") é freqüentemente suportado, mas outros codecs têm suporte mais limitado (se houver).
audio/webmUm arquivo de áudio no formato de contêiner WebM. Vorbis e Opus são os codecs de áudio mais comuns.
video/webmUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner WebM. VP8 e VP9 são os codecs video os mais comuns usados ​​dentro dele; Vorbis e Opus os codecs de áudio mais comuns.
audio/oggUm arquivo de áudio no formato de contêiner OGG. Vorbis é o codec de áudio mais comum usado em tal recipiente.
video/oggUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
application/oggUm arquivo de áudio ou vídeo usando o formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
+ +

multipart/form-data

+ +

O tipo multipart/form-data pode ser usado ao enviar o conteúdo de um  formulario HTML preenchido do navegador para o servidor. Como um documento multipart formal, consiste em partes diferentes, delimitado por um limite (uma seqüência de caracteres começando com um traço duplo '--'). Cada parte é uma entidade por si só, com seus próprios cabeçalhos HTTP, {{HTTPHeader("Content-Disposition")}}, e {{HTTPHeader("Content-Type")}} Para os campos de upload de arquivos, e os mais comuns ({{HTTPHeader("Content-Length")}} É ignorada como a linha de limite é usada como o delimitador).

+ +
Content-Type: multipart/form-data; boundary=aBoundaryString
+(Outros cabeçalhos associados ao documento em várias partes como um todo)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(dados)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(dados)
+--aBoundaryString
+(mais subpartes)
+--aBoundaryString--
+
+
+ +

O seguinte formulario:

+ +
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
+  <input type="text" name="myTextField">
+  <input type="checkbox" name="myCheckBox">Check</input>
+  <input type="file" name="myFile">
+  <button>Send the file</button>
+</form>
+ +

Enviará esta mensagem:

+ +
POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+
+ +

multipart/byteranges

+ +

O tipo MIME multipart/byteranges é usado no contexto de enviar respostas parciais para o navegador. Quando o código de status de conteúdo parcial {{HTTPStatus("206")}} é enviado, este tipo MIME é usado para indicar que o documento é composto de várias partes, uma para cada um do intervalo solicitado. Como outros tipos de multipart, o {{HTTPHeader("Content-Type")}} usa a diretiva de limite para definir a seqüência de limites. Cada uma das diferentes partes tem um cabeçalho {{HTTPHeader("Content-Type")}} com o tipo real do documento e um {{HTTPHeader("Content-Range")}} com o intervalo que representam.

+ +
HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--
+ +

Importância de definir o MIME type correto

+ +

A maioria dos servidores web envia recursos de tipo desconhecido usando o tipo MIME de application/octet-stream padrão. Por razões de segurança, a maioria dos navegadores não permite definir uma ação padrão personalizada para esses recursos, forçando o usuário a armazená-lo no disco para usá-lo. Algumas configurações de servidor incorretamente exibidas ocorrem com os seguintes tipos de arquivo:

+ +
    +
  • +

    Arquivos RAR-codificados. Neste caso, o ideal seria definir o verdadeiro tipo de arquivos codificados; Isso muitas vezes não é possível (como pode não ser conhecido para o servidor e esses arquivos podem conter vários recursos de tipos diferentes). Nesse caso, configure o servidor para enviar o tipo MIME application/x-rar-compressed.

    +
    • +
  • +

    Arquivos de áudio e vídeo. Somente recursos com o Tipo MIME correto serão reconhecidos e reproduzidos em elementos {{HTMLElement("video")}} ou {{HTMLElement("áudio")}}. Certifique-se de usar o tipo correto para áudio e vídeo.

    +
    • +
  • +

    Tipos de arquivos proprietários. Preste especial atenção ao servir um tipo de arquivo proprietário. Evite usar o application/octet-stream como manipulação especial não será possível: a maioria dos navegadores não permitem definir um comportamento padrão (como "Abertura no Word") para este tipo MIME genérico.

    +
    • +
+ +

MIME sniffing

+ +

Na ausência de um tipo MIME, ou em alguns outros casos em que um cliente acredita que estão incorrectamente definidos, os navegadores podem conduzir MIME sniffing, que está adivinhando o tipo MIME correto, olhando para o recurso. Cada navegador executa isso de forma diferente e em circunstâncias diferentes. Existem algumas preocupações de segurança com esta prática,
+ Como alguns tipos MIME representam conteúdo executável e outros não. Os servidores podem bloquear MIME sniffing enviando o {{HTTPHeader("X-Content-Type-Options")}} ao longo do {{HTTPHeader("Content-Type")}}.

+ +

See also

+ + + +
+
+
diff --git a/files/pt-br/web/http/caching/index.html b/files/pt-br/web/http/caching/index.html new file mode 100644 index 0000000000..9cfd4d4a0d --- /dev/null +++ b/files/pt-br/web/http/caching/index.html @@ -0,0 +1,157 @@ +--- +title: Cacheamento HTTP +slug: Web/HTTP/HTTP +tags: + - Cache + - Cacheamento + - Guía + - HTTP + - Internet + - Rede + - Web +translation_of: Web/HTTP/Caching +--- +
{{HTTPSidebar}}
+ +

A performance de websites e aplicações podem ser melhoradas significativamente ao reusar recursos previamente buscados. Caches em web reduzem latência e o tráfego de rede e assim diminuir o tempo necesário para exibir uma representação do recurso. Ao usar caching em HTTP, websites se tornam mais responsivos.

+ +

Diferentes tipos de caches

+ +

Caching é uma técnica que guarda uma cópia de dado recurso e mostra de volta quando requisitado. Quando um web cache tem um recurso requerido em seu armazenamento, ele intercepta a solicitação e retorna sua cópia ao invés de fazer o download novamente do servidor original. Isto alcança vários objetivos: facilita o balanceamento do servidor que não precisa servir todos os clients sozinho, e melhora a performance por estar próximo do client,  por exemplo, ele leva menos tempo para transmitir o recurso de volta. Para um website, é um componente principal para alcançar alta performance. De outro lado, ele deve ser configurado devidamente pois não são todos os recursos que ficam idênticos para sempre: é importante colocar um recurso em cache somente até que ele mude, não mais que isso. 

+ +

Há muitos tipos de caches: estes podem ser agrupados em duas categorias principais, caches privados ou compartilhados. Um cache compartilhado é um cache que armazena respostas para serem reusadas por mais de um usuário. Um cache privado é dedicado a um único usuário. Esta página irá falar principalmente sobre caches em navegadores e em proxy, mas há também caches de gateway, CDN, cache de proxy reverso e balanceadores de carga (load balancers) que são implantados em servers da web para melhor confiabilidade, desempenho e dimensionamento de sites e aplicativos da web.

+ +

What a cache provide, advantages/disadvantages of shared/private caches.

+ +

Caches privados de browser

+ +

Um cache privado é dedicado para um único usuário. Você já pode ter visto "caching" nas configurações de seu navegador. Um cache de browser guarda todos os documentos que foram baixados via HTTP pelo usuário. Este cache é usado para tornar disponíveis documentos visitados para navegação "para frente e para trás" (ou back/forward, em Inglês), salvar, ver como fonte, etc. sem exigir uma viagem para o servidor. Também melhora a navegação offline de conteúdo em cache.

+ +

Caches de proxy compartilhada

+ +

Uma cache compartilhada é uma cache que armazena respostas para serem reusadas por mais de um usuário. Por exemplo, um fornecedor de acesso à internet ou sua empresa pode ter definido uma web proxy como parte de sua infraestrutura de rede local para servir muitos usuários para que recursos populares sejam reusados numerosas vezes, reduzindo o tráfego de rede e latência.

+ +

Alvos de operações de cache

+ +

Fazer cache de HTTP é opcional, mas reusar um recurso em cache é usualmente desejável. No entanto, caches HTTP comuns são tipicamente limitados a respostas em cache para {{HTTPMethod("GET")}} e podem declinar outros métodos. As chaves primárias de cache consistem de um método de requisição e um alvo URI (como requisições são alvos de cache, muitas vezes somente o URI é usado). Formas comuns de entrada de cache são:

+ +
    +
  • Resultados bem sucedidos de uma requisição: uma resposta {{HTTPStatus(200)}} (OK) para uma requisição {{HTTPMethod("GET")}} contendo recursos como documentos HTML, imagens ou arquivos.
    • +
  • Redirecionamentos permanentes: uma resposta {{HTTPStatus(301)}} (Moved Permanently).
    • +
  • Respostas de erro: um resultado {{HTTPStatus(404)}} (Not Found).
    • +
  • Resultados incompletos: uma resposta {{HTTPStatus(206)}} (Partial Content).
    • +
  • Outras respostas que não sejam {{HTTPMethod("GET")}} se algo mais adequado para uso como chave de cache é definido.
    • +
+ +

Uma entrada de cache pode também consistir de múltiplas respostas armazenadas diferenciadas por uma chave secundária, se a requisição é alvo de negociação de conteúdo. Para mais detalhes veja a informação sobre o cabeçalho {{HTTPHeader("Vary")}} abaixo.

+ +

Controlando cache

+ +

O cabeçalho Cache-control

+ +

O cabeçalho-geral {{HTTPHeader("Cache-Control")}} HTTP/1.1 é usado para especificar diretivas para mecanismos de cache em ambas requisições e respostas. Use este cabeçalho para definir suas políticas de cache com a variedade de diretivas que fornece.

+ +

Não usar armazenamento de cache

+ +

O cache não deve armazenar nada sobre a requisição do cliente ou a resposta do servidor. Uma requisição é enviada ao servidor e uma resposta completa é baixada por cada e toda vez.

+ +
Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+
+ +

Sem fazer cache

+ +

Um cache irá enviar a requisição ao servidor de origem para validação antes de liberar uma cópia em cache. 

+ +
Cache-Control: no-cache
+ +

Caches privados e públicos

+ +

A diretiva "public" indica que a resposta pode ser colocada em cache por qualquer cache. Isto pode ser útil, se páginas com autenticação HTTP ou códigos de status de resposta que não são normalmente colocadas em cache, devem agora ser colocadas. Por outro lado, "private" indica que a resposta é para um único usuário somente e não deve ser armazenada por um cache compartilhado. Um cache privado de navegador pode armazenar a resposta neste caso.

+ +
Cache-Control: private
+Cache-Control: public
+
+ +

Data de validade

+ +

A diretiva mais importante aqui é "max-age=<seconds>" que é a quantidade máxima de tempo que um recurso será considerado "fresco". Contrário ao {{HTTPHeader("Expires")}}, esta diretiva é relativa ao tempo da requisição. Para os arquivos na aplicação que não irão mudar, você pode normalmente adicionar cache agressivamente. Isto inclui arquivos estáticos como imagens, arquivos CSS e Javascript, por exemplo.

+ +

Para mais detalhes, veja também a seção Tempo de Vida abaixo.

+ +
Cache-Control: max-age=31536000
+ +

Validação

+ +

Quando usamos a diretiva "must-revalidate", o cache deve verificar o status dos recursos obsoletos antes de os usar e os expirados não deverão ser usados. Para mais detalhes, veja a seção Validation abaixo.

+ +
Cache-Control: must-revalidate
+ +

O header Pragma

+ +

{{HTTPHeader("Pragma")}} é um header HTTP/1.0, não é especificado para respostas HTTP e não é, assim, uma reposição confiável para o cabeçalho geral HTTP/1.1 Cache-Control, apesar de se comportar da mesma forma que Cache-Control: no-cache, se o campo do cabeçalho Cache-Control é omitido em uma requisição.Use Pragma somente para compatibilidade com clients HTTP/1.0 mais antigos

+ +

Tempo de Vida

+ +

Quando um recurso é armazenado em um cache, ele poderia teoricamente ser servido para sempre. Caches possuem armazenamento finito então itens são periodicamente removidos do armazenamento. Esse processo é chamado de despejo de cache. Por outro lado, alguns recursos podem mudar no servidor fazendo com que o cache fique desatualizado. Como o HTTP é um protocolo cliente-servidor, os servidores não podem contatar caches e clientes quando um recurso é alterado; eles precisam comunicar um tempo de expiração para o recurso. Antes deste período de expiração, o recurso é novo; após o tempo de expiração, o recurso é obsoleto. Os algoritmos de despejo geralmente privilegiam recursos novos em vez de recursos obsoletos. Observe que um recurso obsoleto não é despejado ou ignorado; quando o cache recebe uma solicitação para um recurso obsoleto, ele encaminha essa solicitação com um {{HTTPHeader ("If-None-Match")}} para verificar se, de fato, ainda está fresco. Em caso afirmativo, o servidor retorna um cabeçalho {{HTTPStatus ("304")}} (Não modificado) sem enviar o corpo do recurso solicitado, economizando alguma largura de banda.

+ +

Here is an example of this process with a shared cache proxy:

+ +

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

+ +

O tempo de Vida é calculado beaseado em vários headers. Se o "Cache-control: max-age=N" header é especificado, então o tempo de vida é igual a N. Se este header não está presente, o que ocorre com frequência, ele checa se um {{HTTPHeader("Expires")}} heade está presente. Se um Expires header existe, então é o valor menos o valor do {{HTTPHeader("Date")}} header determina o tempo de vida. Finalmente, se nenhum header está presente, procure pelo {{HTTPHeader("Last-Modified")}} header. Se este header está presente, então o tempo de vidaé igual ao valor do  Date header menos o valor do Last-modified header dividido por 10.
+ O valor de expiração é computado por:

+ +
expirationTime = responseTime + freshnessLifetime - currentAge
+
+ +

No qual responseTimeé o tempo em que a resposta é recebida de acordo com o navegador.

+ +

Revved resources

+ +

The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.

+ +

Web developers invented a technique that Steve Souders called revving[1]. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that never changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.

+ +

This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.

+ +

+ +

The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.

+ +

Cache validation

+ +

Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "Cache-control: must-revalidate" header. Another factor is the cache validation preferences in the Advanced->Cache preferences panel. There is an option to force a validation each time a document is loaded.

+ +

When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a strong validator or a weak validator.

+ +

ETags

+ +

The {{HTTPHeader("ETag")}} response header is an opaque-to-the-useragent value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the ETag header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.

+ +

The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the Last-Modified header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.

+ +

When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} OK, or it can return {{HTTPStatus(304)}} Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.

+ +

Varying responses

+ +

The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.

+ +

When a cache receives a request that can be satisfied by a cached response that has a Vary header field, it must not use that cached response unless all header fields as nominated by the Vary header match in both the original (cached) request and the new request.

+ +

The Vary header leads cache to use more HTTP headers as key for the cache.

+ +

This can be useful for serving content dynamically, for example. When using the Vary: User-Agent header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no Cloaking is intended.

+ +
Vary: User-Agent
+ +

Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.

+ +

See also

+ + diff --git a/files/pt-br/web/http/compression/index.html b/files/pt-br/web/http/compression/index.html new file mode 100644 index 0000000000..a1f16b762f --- /dev/null +++ b/files/pt-br/web/http/compression/index.html @@ -0,0 +1,72 @@ +--- +title: Compressão em HTTP +slug: Web/HTTP/Compressão +tags: + - Guía + - HTTP + - compressão +translation_of: Web/HTTP/Compression +--- +
{{HTTPSidebar}}
+ +

A Compressão é uma forma importante de aumentar o desempenho de um Web site. Para alguns documentos, a redução de tamanho de até 70% diminui a necessidade de capacidade de largura de banda. Com o passar dos anos, os algoritmos também ficaram mais eficientes e novos têm recebido suporte por clientes e servidores.

+ +

Na prática, os desenvolvedores web não precisam implementar mecanismos de compressão de dados, pois ambos os navegadores e servidores já possuem tais mecanismos implementados. Porém, é preciso ter certeza de que o servidor esteja configurado adequadamente. A compressão acontece em três níveis distintos:

+ +
    +
  • primeiramente, alguns formatos de arquivo são comprimidos com métodos otimizados específicos,
    • +
  • então a criptografia ocorre no nível HTTP (o recurso é transmitido comprimido de ponta a ponta),
    • +
  • e finalmente a compressão pode ser definida no nível da conexão, entre dois nós de uma conexão HTTP.
    • +
+ +

Compressão de formato de arquivo

+ +

Cada tipo de dado tem alguma redundância, ou seja, espaço desperdiçado. Se um texto pode geralmente apresentar até 60% de redundância, essa taxa pode ser muito maior para outras mídias, como áudio e vídeo. Ao contrário do texto, esses outros tipos de mídia ocupam muito espaço de armazenamento, sendo que a necessidade de recuperar esse espaço desperdiçado apareceu muito cedo. Engenheiros projetaram o algoritmo de compressão otimizada usada por formatos de arquivo para esse fim específico. Os algoritmos de compressão usados para arquivos podem ser agrupados em duas grandes categorias:

+ +
    +
  • Compressão sem perdas (do inglês Loss-less compression), em que o ciclo de compressão-descompressão não altera os dados recuperados. Corresponde byte a byte com o original. Para imagens, gif e png usam a compressão sem perdas.
    • +
  • Compressão com perdas (do inglês Lossy compression), onde o ciclo altera os dados originais, de forma imperceptível para o usuário.
    + Formatos de vídeo na Web utilizam compressão com perdas, assim como o formato  jpeg para imagens.
    • +
+ +

Alguns formatos podem ser usados para a compressão com ou sem perdas, como o webp. Geralmente, o algoritmo de compressão com perdas pode ser configurado para comprimir mais ou menos, resultando em uma qualidade menor ou maior.

+ +

Para o melhor desempenho de um site, é ideal comprimir o máximo possível, mantendo um nível aceitável de qualidade. Para imagens, uma imagem gerada por uma ferramenta pode não ser otimizada o suficiente para a Web. Recomenda-se portanto o uso de ferramentas que comprimirão o máximo possível com uma certa qualidade exigida. Existem inúmeras ferramentas especializadas para isso.

+ +

Algoritmos de compressão com perdas geralmente são mais eficientes que os sem perdas.

+ +
+

Como a compressão funciona melhor em tipos específicos de arquivos, ela geralmente não fornece nada mais ao comprimir o mesmo arquivo uma segunda vez. Na verdade, isso geralmente é contraproducente, pois o custo da sobrecarga (algoritmos geralmente precisam de um dicionário que some ao tamanho inicial) pode ser maior do que o ganho extra na compressão, resultando em um arquivo maior. Não use as duas técnicas a seguir para arquivos em um formato comprimido.

+
+ +

Compressão de ponta a ponta

+ +

Para compressão, a compressão de ponta a ponta é onde residem as maiores melhorias de desempenho dos sites. Compressão de ponta a ponta refere-se a uma compressão do corpo de uma mensagem que é realizada pelo servidor e permanecerá inalterada até atingir o cliente. Quaisquer que sejam os nós intermediários, eles deixam o corpo intacto.

+ +

 

+ +

+ +

Todos os navegadores e servidores modernos suportam a compressão, bastante somente negociar o algoritmo a ser usado. Esses algoritmos são otimizados para texto. Nos anos 90, a tecnologia de compressão avançava a um ritmo acelerado e numerosos algoritmos sucessivos foram adicionados ao conjunto de escolhas possíveis. Hoje em dia, apenas dois são relevantes: o gzip, o mais comum, e br o novo desafiante.

+ +

Para selecionar o algoritmo a ser usado, os navegadores e servidores usam a negociação proativa de conteúdo. O navegador envia um cabeçalho {{HTTPHeader("Accept-Encoding")}} com o algoritmo que ele suporta e sua ordem de precedência. O servidor escolhe um, usa-o para comprimir o corpo da resposta e usa o {{HTTPHeader("Content-Encoding")}} para informar ao navegador o algoritmo escolhido. Como a negociação de conteúdo foi usada para escolher uma representação baseada em sua codificação, o servidor deve enviar um cabeçalho {{HTTPHeader("Vary")}} contendo pelo menos {{HTTPHeader("Accept-Encoding")}} ao lado do cabeçalho na resposta. Dessa forma, os caches poderão armazenar em cache as diferentes representações do recurso.

+ +

+ +

Como a copressão de dados traz melhorias significativas no desempenho, recomenda-se ativá-la para todos os arquivos, com exceção daqueles já comprimidos, como imagens, arquivos de áudio e vídeos.

+ +

Apache suporta compressão e usa mod_deflate; para nginx existe ngx_http_gzip_module; para IIS, o elemento <httpCompression>.

+ +

Compressão de nó a nó (Hop-by-hop)

+ +

A compressão de nó a nó (do inglês Hop-by-hop compression), embora semelhante à compresão de ponta a ponta, difere em um elemento fundamental: a compressão não acontece no recurso no servidor, criando uma representação específica que é então transmitida, mas sim no corpo da mensagem entre dois nós no caminho entre o cliente e o servidor. Conexões entre nós intermediários sucessivos podem aplicar uma compressão diferente.

+ +

+ +

Para fazer isso, o HTTP usa um mecanismo semelhante à negociação de conteúdo para a compressão ponta a ponta: o nó que transmite a solicitação anuncia sua vontade usando o cabeçalho {{HTTPHeader ("TE")}}, sendo que o outro nó escolhe o método adequado, aplica-o e indica a sua escolha com o cabeçalho {{HTTPHeader("Transfer-Encoding")}}.

+ +

+ +

Na prática, a compressão de nó a nó é transparente para o servidor e o cliente, sendo raramente usada. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} são usados principalmente para enviar uma resposta por partes, permitindo iniciar a transmissão de um recurso sem conhecer seu tamanho.

+ +

Observe que usar {{HTTPHeader("Transfer-Encoding")}} e compressão a nível de salto entre nós é tão raro que a maioria dos servidores, como Apache, nginx ou IIS, não apresentam uma maneira fácil de configurá-lo. Tal configuração geralmente acontece no nível do proxy.

diff --git "a/files/pt-br/web/http/compress\303\243o/index.html" "b/files/pt-br/web/http/compress\303\243o/index.html" deleted file mode 100644 index a1f16b762f..0000000000 --- "a/files/pt-br/web/http/compress\303\243o/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Compressão em HTTP -slug: Web/HTTP/Compressão -tags: - - Guía - - HTTP - - compressão -translation_of: Web/HTTP/Compression ---- -
{{HTTPSidebar}}
- -

A Compressão é uma forma importante de aumentar o desempenho de um Web site. Para alguns documentos, a redução de tamanho de até 70% diminui a necessidade de capacidade de largura de banda. Com o passar dos anos, os algoritmos também ficaram mais eficientes e novos têm recebido suporte por clientes e servidores.

- -

Na prática, os desenvolvedores web não precisam implementar mecanismos de compressão de dados, pois ambos os navegadores e servidores já possuem tais mecanismos implementados. Porém, é preciso ter certeza de que o servidor esteja configurado adequadamente. A compressão acontece em três níveis distintos:

- -
    -
  • primeiramente, alguns formatos de arquivo são comprimidos com métodos otimizados específicos,
    • -
  • então a criptografia ocorre no nível HTTP (o recurso é transmitido comprimido de ponta a ponta),
    • -
  • e finalmente a compressão pode ser definida no nível da conexão, entre dois nós de uma conexão HTTP.
    • -
- -

Compressão de formato de arquivo

- -

Cada tipo de dado tem alguma redundância, ou seja, espaço desperdiçado. Se um texto pode geralmente apresentar até 60% de redundância, essa taxa pode ser muito maior para outras mídias, como áudio e vídeo. Ao contrário do texto, esses outros tipos de mídia ocupam muito espaço de armazenamento, sendo que a necessidade de recuperar esse espaço desperdiçado apareceu muito cedo. Engenheiros projetaram o algoritmo de compressão otimizada usada por formatos de arquivo para esse fim específico. Os algoritmos de compressão usados para arquivos podem ser agrupados em duas grandes categorias:

- -
    -
  • Compressão sem perdas (do inglês Loss-less compression), em que o ciclo de compressão-descompressão não altera os dados recuperados. Corresponde byte a byte com o original. Para imagens, gif e png usam a compressão sem perdas.
    • -
  • Compressão com perdas (do inglês Lossy compression), onde o ciclo altera os dados originais, de forma imperceptível para o usuário.
    - Formatos de vídeo na Web utilizam compressão com perdas, assim como o formato  jpeg para imagens.
    • -
- -

Alguns formatos podem ser usados para a compressão com ou sem perdas, como o webp. Geralmente, o algoritmo de compressão com perdas pode ser configurado para comprimir mais ou menos, resultando em uma qualidade menor ou maior.

- -

Para o melhor desempenho de um site, é ideal comprimir o máximo possível, mantendo um nível aceitável de qualidade. Para imagens, uma imagem gerada por uma ferramenta pode não ser otimizada o suficiente para a Web. Recomenda-se portanto o uso de ferramentas que comprimirão o máximo possível com uma certa qualidade exigida. Existem inúmeras ferramentas especializadas para isso.

- -

Algoritmos de compressão com perdas geralmente são mais eficientes que os sem perdas.

- -
-

Como a compressão funciona melhor em tipos específicos de arquivos, ela geralmente não fornece nada mais ao comprimir o mesmo arquivo uma segunda vez. Na verdade, isso geralmente é contraproducente, pois o custo da sobrecarga (algoritmos geralmente precisam de um dicionário que some ao tamanho inicial) pode ser maior do que o ganho extra na compressão, resultando em um arquivo maior. Não use as duas técnicas a seguir para arquivos em um formato comprimido.

-
- -

Compressão de ponta a ponta

- -

Para compressão, a compressão de ponta a ponta é onde residem as maiores melhorias de desempenho dos sites. Compressão de ponta a ponta refere-se a uma compressão do corpo de uma mensagem que é realizada pelo servidor e permanecerá inalterada até atingir o cliente. Quaisquer que sejam os nós intermediários, eles deixam o corpo intacto.

- -

 

- -

- -

Todos os navegadores e servidores modernos suportam a compressão, bastante somente negociar o algoritmo a ser usado. Esses algoritmos são otimizados para texto. Nos anos 90, a tecnologia de compressão avançava a um ritmo acelerado e numerosos algoritmos sucessivos foram adicionados ao conjunto de escolhas possíveis. Hoje em dia, apenas dois são relevantes: o gzip, o mais comum, e br o novo desafiante.

- -

Para selecionar o algoritmo a ser usado, os navegadores e servidores usam a negociação proativa de conteúdo. O navegador envia um cabeçalho {{HTTPHeader("Accept-Encoding")}} com o algoritmo que ele suporta e sua ordem de precedência. O servidor escolhe um, usa-o para comprimir o corpo da resposta e usa o {{HTTPHeader("Content-Encoding")}} para informar ao navegador o algoritmo escolhido. Como a negociação de conteúdo foi usada para escolher uma representação baseada em sua codificação, o servidor deve enviar um cabeçalho {{HTTPHeader("Vary")}} contendo pelo menos {{HTTPHeader("Accept-Encoding")}} ao lado do cabeçalho na resposta. Dessa forma, os caches poderão armazenar em cache as diferentes representações do recurso.

- -

- -

Como a copressão de dados traz melhorias significativas no desempenho, recomenda-se ativá-la para todos os arquivos, com exceção daqueles já comprimidos, como imagens, arquivos de áudio e vídeos.

- -

Apache suporta compressão e usa mod_deflate; para nginx existe ngx_http_gzip_module; para IIS, o elemento <httpCompression>.

- -

Compressão de nó a nó (Hop-by-hop)

- -

A compressão de nó a nó (do inglês Hop-by-hop compression), embora semelhante à compresão de ponta a ponta, difere em um elemento fundamental: a compressão não acontece no recurso no servidor, criando uma representação específica que é então transmitida, mas sim no corpo da mensagem entre dois nós no caminho entre o cliente e o servidor. Conexões entre nós intermediários sucessivos podem aplicar uma compressão diferente.

- -

- -

Para fazer isso, o HTTP usa um mecanismo semelhante à negociação de conteúdo para a compressão ponta a ponta: o nó que transmite a solicitação anuncia sua vontade usando o cabeçalho {{HTTPHeader ("TE")}}, sendo que o outro nó escolhe o método adequado, aplica-o e indica a sua escolha com o cabeçalho {{HTTPHeader("Transfer-Encoding")}}.

- -

- -

Na prática, a compressão de nó a nó é transparente para o servidor e o cliente, sendo raramente usada. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} são usados principalmente para enviar uma resposta por partes, permitindo iniciar a transmissão de um recurso sem conhecer seu tamanho.

- -

Observe que usar {{HTTPHeader("Transfer-Encoding")}} e compressão a nível de salto entre nós é tão raro que a maioria dos servidores, como Apache, nginx ou IIS, não apresentam uma maneira fácil de configurá-lo. Tal configuração geralmente acontece no nível do proxy.

diff --git a/files/pt-br/web/http/connection_management_in_http_1.x/index.html b/files/pt-br/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..c67e52b062 --- /dev/null +++ b/files/pt-br/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,94 @@ +--- +title: Gerenciamento de Conexão em HTTP/1.x +slug: Web/HTTP/Gerenciamento_de_Conexão_em_HTTP_1.x +tags: + - Guide + - Guía + - HTTP + - Short-lived + - Web + - conexões + - performace + - sharding +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +--- +

Gerenciamento de Conexão é um tema central em HTTP: abertura e manutenção de conexões e em grande parte tem impacto sobre o desempenho de Web sites e aplicações Web. Existem vários modelos, em HTTP/1.x: ligações de curta duração, conexões persistentes, canalização e HTTP (HTTP pipelining).

+ +

HTTP é um protocolo de transporte que fornece conexão entre o cliente e o servidor geralmente depende de TCP. Em sua infância, HTTP usava um único modelo para lidar com tais conexões. Sua conexão é de curta duração. Essas conexões foram de curta duração: criado um novo cada vez que enviar um pedido necessário, e fechado uma vez a resposta tinha sido recebida.

+ +

Este simples modelo realiza uma limitação inata em desempenho: a abertura de cada uma das conexões TCP é uma operação de consumo de recursos.Várias mensagens devem ser trocadas entre o cliente e o servidor. Latência de rede e largura de banda afetam o desempenho quando precisa de uma solicitação de envio. Páginas de Web modernas exigem muitos pedidos (uma dúzia ou mais) para servir a quantidade de informação necessária, provando este modelo anterior ineficiente.

+ +

Dois novos modelos foram criados no HTTP/1.1.

+ +
    +
  1. O modelo de conexão persistente, mantém conexões abertas entre solicitações sucessivas, reduzindo o tempo necessário para abrir novas conexões.
    2. +
  2. O modelo de pipelining HTTP, vai um passo além, enviando várias solicitações sucessivas sem nem esperar por uma resposta, reduzindo em grande parte a latência da rede.
    3. +
+ +

Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.

+ +
+

HTTP/2 Adiciona modelos adicionais para o gerenciamento de conexão.

+
+ +

Um ponto importante para observar, que gerenciamento de conexão HTTP, aplica-se para a conexão entre dois nós consecutivos, que é o hop-by-hop e não end-to-end . O modelo usado em conexões entre um cliente e seu primeiro proxy pode diferir do modelo entre um proxy e o servidor de destino (ou qualquer proxies intermédios). Os cabeçalhos HTTP envolvidos na definição do modelo de conexão, como {{HTTPHeader("Connection")}} e {{HTTPHeader("Keep-Alive")}}, são hop-by-hop, cabeçalhos com seus valores poderão ser alterados por nós intermediários.

+ +

Short-lived connections (Conexões de curta duração)

+ +

O modelo original de HTTP e o padrão HTTP/1.0, é short-lived connections (conexões de curta duração). Cada solicitação HTTP é concluída na sua própria conexão; Isto significa que um handshake TCP acontece antes de cada solicitação HTTP, e estas são serializadas.

+ +

O handshake TCP em si é demorado, mas uma conexão TCP adapta-se a sua carga, tornando-se mais eficiente com mais conexões sustentadas (ou aquecidas). Conexões de curta duração não fazem uso desse recurso de eficiência do TCP, e degrada o desempenho do ideal persistindo para transmitir mais de uma conexão nova, frio.

+ +

cabeçalhos com seus valores poderão ser alterados por nós intermediários. (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to close). Em HTTP/1.1 este modelo é apenas usado quando o {{HTTPHeader("Connection")}}cabeçalho é enviado com um valor de fechamento.

+ +
A menos que lidemos com um sistema muito antigo, que não suporta uma conexão persistente, não há nenhuma razão convincente para usar este modelo.
+ +

Conexões Persistentes

+ +

Short-lived connections (conexões de curta duração) tem dois grandes problemas: o tempo necessário para estabelecer uma nova conexão é significativo, e desempenho da conexão TCP subjacente melhora somente quando esta conexão tem sido usado há algum tempo (conexão quente). Para aliviar estes problemas, foi concebido o conceito de uma conexão persistente, mesmo antes de HTTP/1.1. Alternativamente, este pode ser chamado uma conexão keep-alive.

+ +

É uma conexão persistente que permanece aberto por um período e pode ser reutilizado por vários pedidos, salvando a necessidade de um novo handshake TCP, e utilizando recursos para melhorar o desempenho do TCP. Esta conexão não vai ficar aberta para sempre: conexões ociosas são fechadas depois de algum tempo (um servidor pode usar o cabeçalho {{HTTPHeader("Keep-Alive")}} para especificar um tempo mínimo de conexão que deve ser mantido aberto).

+ +

Conexões persistentes também têm desvantagens, mesmo quando em marcha lenta eles consomem recursos do servidor e sob pesada carga, pode efetuar-se {{glossary("DoS attack", "DoS attacks")}}. Em tais casos, usar conexões não-persistentes, que estão fechadas, assim como elas estão ociosas, pode fornecer um melhor desempenho.HTTP/1.0 as conexões sem persistencia por default.Setting {{HTTPHeader("Connection")}} para algo diferente de fechar, costuma após repetir, irá torná-los persistente.

+ +

Em HTTP/1.1, persistencia é o padrão e o cabeçalho não é mais necessário (mas ele é adicionado frequentemente como uma medida defensiva contra casos que exigem um fallback para HTTP/1.0).

+ +

HTTP pipelining

+ +
+

HTTP o pipelining não é ativado por padrão em navegadores modernos:

+ +
    +
  • Buggy proxies são ainda comuns e eles levam a comportamentos estranhos e erráticos que desenvolvedores Web não podem prever e diagnosticar facilmente.
    • +
  • Pipelining é complexo para implementar corretamente: o tamanho do recurso a ser transferido, a efetiva RTT que será usado, bem como a largura de banda efetiva, têm uma incidência direta na melhoria fornecida pelo pipeline. Sem conhecer eles, mensagens importantes podem ser atrasadas por detrás aqueles sem importância. A noção de importante mesmo evolui durante o layout de página! Pipeline HTTP, portanto, traz uma melhoria marginal na maioria dos casos apenas.
    • +
  • Pipelining está sujeito à problema HOL.
    • +
+ +

Por estas razões, o pipelining tem sido substituído por um algoritmo melhor, multiplexação, que é usado pelo HTTP/2.

+
+ +

Por padrão, HTTP as solicitações são emitidas sequencialmente. A próxima solicitação só é emitida depois que recebeu a resposta para a solicitação atual. Como eles são afetados pelas latências de rede e as limitações de largura de banda, isso pode resultar em atrasos significativos antes que a próxima solicitação é vista pelo servidor.

+ +

Pipelining é o processo para enviar solicitações sucessivas, sobre a mesma conexão persistente, sem esperar pela resposta. Isso evita a latência da conexão. Teoricamente, desempenho também poderia ser melhorado se duas solicitações HTTP para ser embalado na mesma mensagem TCP. O MSS típico (tamanho máximo de segmento), é grande o suficiente para conter várias solicitações simples, embora a demanda em tamanho de solicitações HTTP continua a crescer.

+ +

Nem todos os tipos de solicitações HTTP podem ser intermitente: only {{glossary("idempotent")}} método, isso é {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} pode ser repetido com segurança: uma falha pode acontecer, o conteúdo do pipeline simplesmente pode ser repetido.

+ +

Hoje, cada proxy HTTP/1.1-compatível e servidor devem apoiar o pipelining, embora muitos têm limitações na prática: uma razão significativa, nenhum navegador moderno ativa esse recurso por padrão.

+ +

Domain sharding

+ +
+A menos que você tem uma necessidade muito específica e imediata, não use esta técnica depreciada; Mude para HTTP/2 ao invéz. Em HTTP/2, sharding domínio não é mais útil: a conexão HTTP/2 é capaz de manipular as solicitações sem prioridades paralelas muito bem. Sharding domínio é mesmo prejudicial ao desempenho. A maioria dos implementação de HTTP/2 usam uma técnica chamada connection coalescing para reverter o sharding de domínio eventual. +
+ +

Como uma conexão de HTTP/1.x está serializando solicitações, mesmo sem qualquer ordenação, não pode ser ideal sem largura de banda grande o suficiente disponível. Como uma solução, os navegadores abrir várias conexões para cada domínio, enviando solicitações paralelas. Era padrão conexões de 2 a 3, mas isto agora aumentou para um uso mais comum de 6 conexões paralelas. Há um risco de provocar proteção DoS no lado do servidor, se tentar mais do que este número.

+ +

Se o servidor deseja um site de Web mais rápido ou resposta do aplicativo, é possível para o servidor forçar a abertura de mais conexões. Por exemplo, em vez de ter todos os recursos no mesmo domínio, diz www.example.com, poderia dividir em vários domínios, www1.example.com, www2.example.com, www3.example.com. Cada um destes domínios resolver acessar o mesmo servidor e o navegador da Web abrirá 6 conexões para cada (no nosso exemplo, impulsionando as conexões para 18). Esta técnica é chamada sharding do domínio.

+ +

+ +

Conclusão

+ +
+
Gerenciamento de conexão melhorada permite considerável aumento de desempenho em HTTP. Com HTTP/1.1 ou HTTP/1.0, usando uma conexão persistente – pelo menos até que se torne ocioso – levando para o melhor desempenho. No entanto, o falha do pipelining tem levado para a concepção de modelos de gestão de conexão superior, que foram incorporados ao HTTP/2.
+
diff --git a/files/pt-br/web/http/controle_acesso_cors/index.html b/files/pt-br/web/http/controle_acesso_cors/index.html deleted file mode 100644 index 51470f94b7..0000000000 --- a/files/pt-br/web/http/controle_acesso_cors/index.html +++ /dev/null @@ -1,553 +0,0 @@ ---- -title: Cross-Origin Resource Sharing (CORS) -slug: Web/HTTP/Controle_Acesso_CORS -tags: - - AJAX - - CORS - - HTTP - - XMLHttpRequest -translation_of: Web/HTTP/CORS ---- -
{{HTTPSidebar}}
- -

{{Glossary("CORS")}} - Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais {{Glossary("HTTP")}} para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

- -

Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em http://domain-a.com usa {{domxref ("XMLHttpRequest")}} para fazer uma requisição para http://api.domain-b.com/data.json.

- -

Por motivos de segurança, navegadores restringem requisições cross-origin HTTP iniciadas por scripts. Por exemplo, XMLHttpRequest e Fetch API seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos de mesma origem da qual o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.

- -

- -

O mecânismo CORS suporta requisições seguras do tipo cross-origin e transferências de dados entre navegadores e servidores web. Navegadores modernos usam o CORS em uma API contêiner, como XMLHttpRequest ou Fetch, para ajudar a reduzir os riscos de requisições cross-origin HTTP.

- -

Quem deve ler este artigo?

- -

Todos, realmente.

- -

Este artigo destina-se a administradores da Web, desenvolvedores de servidores e desenvolvedores front-end. Os navegadores modernos lidam com os componentes do lado cliente em compartilhamento entre origens, incluindo cabeçalhos e aplicação de políticas. Mas esse novo padrão significa que os servidores precisam lidar com novos cabeçalhos de requisição e resposta. Outro artigo para desenvolvedores de servidores que discutem compartilhamento cross-origin a partir de uma perspectiva de servidor (com fragmentos de código PHP), pode ser uma leitura complementar.

- -

Quais solicitações usam o CORS?

- -

Esse padrão de compartilhamento cross-origin é usado para habilitar solicitações HTTP entre sites para:

- - - -

Este artigo é uma discussão geral sobre Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) e inclui uma discussão de cabeçalhos HTTP necessários.

- -

Visão Geral

- -

O padrão Cross-Origin Resource Sharing trabalha adicionando novos cabeçalhos HTTP que permitem que os servidores descrevam um conjunto de origens que possuem permissão a ler uma informação usando o navegador. Além disso, para métodos de requisição HTTP que podem causar efeitos colaterais nos dados do servidor (em particular, para métodos HTTP diferentes de {{HTTPMethod("GET")}} ou para uso de {{HTTPMethod("POST")}} com certos MIME types), a especificação exige que navegadores "pré-enviem" a requisição, solicitando os métodos suportados pelo servidor com um método de requisição HTTP {{HTTPMethod("OPTIONS")}} e, após a "aprovação", o servidor envia a requisição verdadeira com o método de requisição HTTP correto. Servidores também podem notificar clientes se "credenciais" (incluindo Cookies e dados de autenticação HTTP) devem ser enviadas com as requisições.

- -

Falhas no CORS resultam em erros, mas por questões de segurança, detalhes sobre erros não estão disponíveis no código JavaScript. O código tem apenas conhecimento de que ocorreu um erro. A única maneira para determinar especificamente o que ocorreu de errado é procurar no console do navegador por mais detalhes.

- -

Seções subsequentes discutem cenários, assim como fornecem um detalhamento dos cabeçalhos HTTP utilizados.

- -

Exemplos de cenários com controle de acesso

- -

Aqui, apresentamos três cenários que ilustram como Cross-Origin Resource Sharing funciona. Todos estes exemplos usam o objeto {{domxref("XMLHttpRequest")}}, que pode ser utilizado para fazer requisições entre origens em qualquer navegador compatível.

- -

Os snippets JavaScript inclusos nessas seções (e instâncias executáveis de código do lado servidor que tratam corretamente essas requisições entre origens) podem ser encontrados "em ação" aqui: http://arunranga.com/examples/access-control/, e irão funcionar em navegadores que suportam XMLHttpRequest entre origens.

- -

Uma discussão sobre Cross-Origin Resource Sharing a partir da perspectiva do servidor (incluindo snippets de código PHP) pode ser encontrada no artigo Server-Side Access Control (CORS).

- -

Requisições simples

- -

Algumas requisições não acionam um pré-envio CORS. Essas são denominadas neste artigo como “requisições simples” (simple request), embora a especificação {{SpecName('Fetch')}} (que define CORS) não utilize esse termo. Uma requisição que não aciona um pré-envio CORS — denominada “requisição simples” — é uma que atende todas as seguintes condições:

- -
    -
  • Os únicos métodos permitidos são: -
      -
    • {{HTTPMethod("GET")}}
      • -
    • {{HTTPMethod("HEAD")}}
      • -
    • {{HTTPMethod("POST")}}
      • -
    -
    • -
  • Além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou qualquer um dos outros cabeçalhos com nomes definidos na especificação Fetch como “forbidden header name”), os únicos cabeçalhos que podem ser definidos manualmente são aqueles cujo a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: -
      -
    • {{HTTPHeader("Accept")}}
      • -
    • {{HTTPHeader("Accept-Language")}}
      • -
    • {{HTTPHeader("Content-Language")}}
      • -
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • -
    • DPR
      • -
    • {{HTTPHeader("Downlink")}}
      • -
    • Save-Data
      • -
    • Viewport-Width
      • -
    • Width
      • -
    -
    • -
  • Os únicos valores permitidos para o {{HTTPHeader("Content-Type")}} do cabeçalho são: -
      -
    • application/x-www-form-urlencoded
      • -
    • multipart/form-data
      • -
    • text/plain
      • -
    -
    • -
  • Nenhum event listener é registrado em qualquer objeto {{domxref("XMLHttpRequestUpload")}} usado na requisição, estes são acessados usando a propriedade {{domxref("XMLHttpRequest.upload")}}.
    • -
  • Nenhum objeto {{domxref("ReadableStream")}} é usado na requisição.
    • -
- -
Nota: Esses são os mesmos tipos de requisições entre origens distintas que o conteúdo da web já pode realizar e nenhum dado dado de resposta é liberado ao solicitante, a menos que o servidor envie um cabeçalho adequado. Portanto, sites que impedem a falsificação de requisições entre origens não tem nada a temer em relação ao controle de acesso HTTP.
- -
Nota: O WebKit Nightly e Safari Technology Preview impõem restrições adicionais nos valores permitidos nos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso algum destes cabeçalhos tenham valores ”não-padronizados”, o WebKit/Safari não considera que a requisição atenda as condições para uma “requisição simples”. O que o WebKit/Safari considera valores “não-padronizados” para estes cabeçalhos não é documentado exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS  e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
- -

Por exemplo, suponha que o conteúdo web no domínio http://foo.example deseje chamar (invocation do exemplo abaixo) um outro conteúdo no domínio http://bar.other. Esse código Javascript pode estar hospedado em foo.example:

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/public-data/';
-
-function callOtherDomain() {
-  if(invocation) {
-    invocation.open('GET', url, true);
-    invocation.onreadystatechange = handler;
-    invocation.send();
-  }
-}
-
- -

Isso fará uma troca simples entre cliente e servidor, utilizando o cabeçalho CORS para tratar os privilégios.

- -

- -

Neste caso, vamos ver o que o navegador enviará ao servidor e vamos olhar como o servidor responde:

- -
GET /resources/public-data/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
-Origin: http://foo.example
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 00:23:53 GMT
-Server: Apache/2.0.61
-Access-Control-Allow-Origin: *
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Transfer-Encoding: chunked
-Content-Type: application/xml
-
-[XML Data]
-
- -

As linhas de 1 a 10 são enviadas no header. Note que o cabeçalho principal da requisição HTTP aqui é {{HTTPHeader("Origin")}} na linha 10, o qual revela que a chamada é proveniente de um conteúdo no domínio http://foo.example.

- -

As linhas de 13 a 22 mostram a resposta HTTP do servidor no domínio http://bar.other. Nesta resposta, o servidor envia de volta um cabeçalho {{HTTPHeader("Access-Control-Allow-Origin")}} exibido na linha 16. O uso dos cabeçalhos {{HTTPHeader("Origin")}} e {{HTTPHeader("Access-Control-Allow-Origin")}} mostram o protocolo de controle de acesso em seu uso mais simples. Neste caso, o servidor responde com Access-Control-Allow-Origin: *, o que significa que o recurso pode ser acessado por qualquer domínio pela comunicação entre origens. Se os proprietários dos recursos em http://bar.other desejarem restringir o acesso ao conteúdo para o mesmo ser apenas de http://foo.example, eles retornaram:

- -

Access-Control-Allow-Origin: http://foo.example

- -

Observe que, agora, nenhum dominio além de http://foo.example (identificado na requisição pelo cabeçalho ORIGIN: como na linha 10) pode acessar o recurso pela comunicação entre origens. O cabeçalho Access-Control-Allow-Origin deve conter o valor que foi enviado no cabeçalho Origin da requisição. 

- -

Requisições com pré-envio

- -

Ao contrário de “requisições simples” (discutido acima), requisições com "pré-envio" (Preflighted requests) primeiramente enviam uma requisição HTTP através do método {{HTTPMethod("OPTIONS")}} para obter um recurso em outro domínio, a fim de determinar se de fato a requisição atual é segura para envio. Requisições entre sites possuem pré-envio, já que podem interferir em dados do usuário.

- -

Em particular, uma requisição tem um pré-envio se qualquer das seguintes condições for verdadeira:

- -
    -
  • Se a requisição usa algum dos seguintes métodos: - -
      -
    • {{HTTPMethod("PUT")}}
      • -
    • {{HTTPMethod("DELETE")}}
      • -
    • {{HTTPMethod("CONNECT")}}
      • -
    • {{HTTPMethod("OPTIONS")}}
      • -
    • {{HTTPMethod("TRACE")}}
      • -
    • {{HTTPMethod("PATCH")}}
      • -
    -
    • -
  • Ou se, além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {HTTPHeader("User-Agent")}} ou qualquer OUTRO cabeçalho com um nome definido na especificação Fetch como “forbidden header name”), a requisição inclui quaisquer cabeçalhos além daqueles que a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: -
      -
    • {{HTTPHeader("Accept")}}
      • -
    • {{HTTPHeader("Accept-Language")}}
      • -
    • {{HTTPHeader("Content-Language")}}
      • -
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • -
    • DPR
      • -
    • {{HTTPHeader("Downlink")}}
      • -
    • Save-Data
      • -
    • Viewport-Width
      • -
    • Width
      • -
    -
    • -
  • Ou se o {{HTTPHeader("Content-Type")}} do cabeçalho tem outro valor que: -
      -
    • application/x-www-form-urlencoded
      • -
    • multipart/form-data
      • -
    • text/plain
      • -
    -
    • -
  • Ou se um ou mais event listener estiver registrado em um objeto {{domxref ("XMLHttpRequestUpload")}} usado nessa requisição.
    • -
  • Ou se um objeto {{domxref("ReadableStream")}} é usado nessa requisição.
    • -
- -
Nota: WebKit Nightly e Safari Technology Preview colocam restrições adicionais nos valores permitidos dos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso qualquer um desses cabeçalhos tenha algum valor fora do padrão (non-standard), o WebKit/Safari faz o pré-envio da requisição. O que o WebKit/Safari considera como valor “non-standard” para tais cabeçalhos não está documentado, exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, e Content-Language request headers for simple CORS e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
- -

O exemplo a seguir é de uma requisição com pré-envio.

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/post-here/';
-var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
-
-function callOtherDomain(){
-  if(invocation)
-    {
-      invocation.open('POST', url, true);
-      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
-      invocation.setRequestHeader('Content-Type', 'application/xml');
-      invocation.onreadystatechange = handler;
-      invocation.send(body);
-    }
-}
-
-......
-
- -

No exemplo acima, a linha 3 cria um XML para enviar com a requisição POST da linha 8. Também, na linha 9, é definido um cabeçalho de uma requisição HTTP "personalizada" (non-standard) com (X-PINGOTHER: pingpong). Tais cabeçalhos não fazem parte do protocolo HTTP/1.1, mas podem ser usados para aplicações web. Já que a requisição usa um Content-Type do tipo application/xml e como é uma requisição personalizada, esta requisição faz um pré-envio.

- -

- -

(Observação: conforme descrito abaixo, a requisição POST real não inclui os cabeçalhos Access-Control-Request- *; eles são necessários apenas para a requisição OPTIONS.)

- -

Vamos conferir a comunicação completa que ocorre entre cliente e servidor. A primeira comunicação é a requisição com pré-envio/resposta:

- -
OPTIONS /resources/post-here/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Origin: http://foo.example
-Access-Control-Request-Method: POST
-Access-Control-Request-Headers: X-PINGOTHER, Content-Type
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:15:39 GMT
-Server: Apache/2.0.61 (Unix)
-Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
-Access-Control-Max-Age: 86400
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 0
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Content-Type: text/plain
-
- -

Uma vez que a requisição com pré-envio é completa, a requisição efetiva será enviada:

- -
POST /resources/post-here/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-X-PINGOTHER: pingpong
-Content-Type: text/xml; charset=UTF-8
-Referer: http://foo.example/examples/preflightInvocation.html
-Content-Length: 55
-Origin: http://foo.example
-Pragma: no-cache
-Cache-Control: no-cache
-
-<?xml version="1.0"?><person><name>Arun</name></person>
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:15:40 GMT
-Server: Apache/2.0.61 (Unix)
-Access-Control-Allow-Origin: http://foo.example
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 235
-Keep-Alive: timeout=2, max=99
-Connection: Keep-Alive
-Content-Type: text/plain
-
-[Some GZIP'd payload]
-
- -

As linhas de 1 a 12 acima representam a requisição com pré-envio tendo o método {{HTTPMethod("OPTIONS")}}. O navegador determina que precisa fazer este envio baseado nos parâmetros da requisição do código JavaScript acima utilizado, para que o servidor possa responder caso seja aceitável o envio da requisição com os dados parâmetros da mesma. OPTIONS é um método HTTP/1.1 usado para determinar informações complementares dos servidores, sendo o mesmo um método {{Glossary("safe")}}, o que significa que não pode ser utilizado para troca de recurso. Note que junto da requisição OPTIONS, outros dois cabeçalhos são enviados (linhas 10 e 11, respectivamente):

- -
Access-Control-Request-Method: POST
-Access-Controa l-Request-Headers: X-PINGOTHER, Content-Type
-
- -

O cabeçalho {{HTTPHeader("Access-Control-Request-Method")}} notifica o servidor como sendo uma parte da requisição com pré-envio que, quando a requisição efetiva é enviada, será enviada com uma requisição de método POST. O cabeçalho {{HTTPHeader("Access-Control-Request-Headers")}} notifica o servidor que quando a requisição efetiva fora enviada, será enviada com os seguintes cabeçalhos personalizados X-PINGOTHER e Content-Type. O servidor agora tem a oportunidade para definir se deseja aceitar uma requisição sob estas condições.

- -

As linhas 14 a 26 acima são as respostas que o servidor devolve, indicando que o método (POST) e os cabeçalhos (X-PINGOTHER) da requisição são aceitáveis. Em particular, vejamos as linhas 17 a 20:

- -
Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
-Access-Control-Max-Age: 86400
- -

O servidor responde com Access-Control-Allow-Methods e diz que POST, GET, e OPTIONS são métodos viáveis para requerir o recurso em questão. Perceba que este cabeçalho é similar ao cabeçalho da resposta {{HTTPHeader("Allow")}}, mas usado estritamente dentro do contexto do controle de acesso.

- -

O servidor envia também Access-Control-Allow-Headers com um valor de "X-PINGOTHER, Content-Type", confirmando estes são cabeçalhos permitidos a serem usados com a requisição efetiva. Assim como Access-Control-Allow-Methods, Access-Control-Allow-Headers é uma lista de cabeçalhos aceitáveis, separados por vírgula.

- -

Por fim, {{HTTPHeader("Access-Control-Max-Age")}} traz o valor em segundos de quão longo pode ser mantida em cache a resposta da requisição pré-envio sem o envio de outra requisição pré-envio. Neste caso, 86400 segundos são 24 horas. Note que cada browser tem um valor interno máximo que toma precedência quado Access-Control-Max-Age for maior.

- -

Requisições com pré-envio e redirecionamento

- -

Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.

- -
-

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

-
- -
-

Request requires preflight, which is disallowed to follow cross-origin redirect

-
- -

The CORS protocol originally required that behavior but was subsequently changed to no longer require it. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.

- -

So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:

- -
    -
  • change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to
    • -
  • change the request such that it is a simple request that doesn’t cause a preflight
    • -
- -

But if it’s not possible to make those changes, then another way that may be possible is to this:

- -
    -
  1. Make a simple request (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.
    2. -
  2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.
    3. -
- -

However, if the request is one that triggers a preflight due to the presence of the Authorization header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.

- -

Requisições com credenciais

- -

The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or Fetch and CORS is the ability to make "credentialed" requests that are aware of HTTP cookies and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.

- -

In this example, content originally loaded from http://foo.example makes a simple GET request to a resource on http://bar.other which sets Cookies. Content on foo.example might contain JavaScript like this:

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/credentialed-content/';
-
-function callOtherDomain(){
-  if(invocation) {
-    invocation.open('GET', url, true);
-    invocation.withCredentials = true;
-    invocation.onreadystatechange = handler;
-    invocation.send();
-  }
-}
- -

Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the withCredentials boolean value. By default, the invocation is made without Cookies. Since this is a simple GET request, it is not preflighted, but the browser will reject any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}: true header, and not make the response available to the invoking web content.

- -

- -

Here is a sample exchange between client and server:

- -
GET /resources/access-control-with-credentials/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Referer: http://foo.example/examples/credential.html
-Origin: http://foo.example
-Cookie: pageAccess=2
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:34:52 GMT
-Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
-X-Powered-By: PHP/5.2.6
-Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Credentials: true
-Cache-Control: no-cache
-Pragma: no-cache
-Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 106
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Content-Type: text/plain
-
-
-[text/plain payload]
-
- -

Although line 11 contains the Cookie destined for the content on http://bar.other, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (line 19) the response would be ignored and not made available to web content.

- -

Solicitações credenciadas e curingas (wildcards)

- -

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

- -

Because the request headers in the above example include a Cookie header, the request would fail if the value of the Access-Control-Allow-Origin header were "*". But it does not fail: Because the value of the Access-Control-Allow-Origin header is "http://foo.example" (an actual origin) rather than the "*" wildcard, the credential-cognizant content is returned to the invoking web content.

- -

Note that the Set-Cookie response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.

- -

All of these examples can be seen working here. The next section deals with the actual HTTP headers.

- -

Os cabeçalhos de resposta HTTP

- -

This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.

- -

Access-Control-Allow-Origin

- -

A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:

- -
Access-Control-Allow-Origin: <origin> | *
-
- -

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

- -

For example, to allow http://mozilla.org to access the resource, you can specify:

- -
Access-Control-Allow-Origin: http://mozilla.org
- -

If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.

- -

Access-Control-Expose-Headers

- -

The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:

- -
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
-
- -

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

- -

Access-Control-Max-Age

- -

The  {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

- -
Access-Control-Max-Age: <delta-seconds>
-
- -

The delta-seconds parameter indicates the number of seconds the results can be cached.

- -

Access-Control-Allow-Credentials

- -

The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the credentials flag is true.  When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple GET requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

- -
Access-Control-Allow-Credentials: true
-
- -

Credentialed requests are discussed above.

- -

Access-Control-Allow-Methods

- -

O {{HTTPHeader("Access-Control-Allow-Methods")}} cabeçalho especifica o método ou os métodos permitidos ao acessar o recurso. Isso é usado em resposta há uma requisição preflight. As condições na qual a requisição é preflight são discutidas à seguir.

- -
Access-Control-Allow-Methods: <method>[, <method>]*
-
- -

An example of a preflight request is given above, including an example which sends this header to the browser.

- -

Access-Control-Allow-Headers

- -

The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

- -
Access-Control-Allow-Headers: <field-name>[, <field-name>]*
-
- -

Os cabeçalhos de solicitação HTTP

- -

This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.

- -

Origin

- -

The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.

- -
Origin: <origin>
-
- -

The origin is a URI indicating the server from which the request initiated.  It does not include any path information, but only the server name.

- -
Note: The origin can be the empty string; this is useful, for example, if the source is a data URL.
- -

Note that in any access control request, the {{HTTPHeader("Origin")}} header is always sent.

- -

Access-Control-Request-Method

- -

The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.

- -
Access-Control-Request-Method: <method>
-
- -

Examples of this usage can be found above.

- -

Access-Control-Request-Headers

- -

The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.

- -
Access-Control-Request-Headers: <field-name>[, <field-name>]*
-
- -

Examples of this usage can be found above.

- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch', '#cors-protocol', 'CORS')}}{{Spec2('Fetch')}}New definition; supplants W3C CORS specification.
- -

Compatibilidade entre Navegadores

- - - -

{{Compat("http.headers.Access-Control-Allow-Origin")}}

- -

Notas de compatibilidade

- -
    -
  • Internet Explorer 8 and 9 expose CORS via the XDomainRequest object, but have a full implementation in IE 10. 
    • -
  • While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using drawImage.
    • -
- -

Veja também

- - diff --git a/files/pt-br/web/http/cors/index.html b/files/pt-br/web/http/cors/index.html new file mode 100644 index 0000000000..51470f94b7 --- /dev/null +++ b/files/pt-br/web/http/cors/index.html @@ -0,0 +1,553 @@ +--- +title: Cross-Origin Resource Sharing (CORS) +slug: Web/HTTP/Controle_Acesso_CORS +tags: + - AJAX + - CORS + - HTTP + - XMLHttpRequest +translation_of: Web/HTTP/CORS +--- +
{{HTTPSidebar}}
+ +

{{Glossary("CORS")}} - Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais {{Glossary("HTTP")}} para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

+ +

Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em http://domain-a.com usa {{domxref ("XMLHttpRequest")}} para fazer uma requisição para http://api.domain-b.com/data.json.

+ +

Por motivos de segurança, navegadores restringem requisições cross-origin HTTP iniciadas por scripts. Por exemplo, XMLHttpRequest e Fetch API seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos de mesma origem da qual o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.

+ +

+ +

O mecânismo CORS suporta requisições seguras do tipo cross-origin e transferências de dados entre navegadores e servidores web. Navegadores modernos usam o CORS em uma API contêiner, como XMLHttpRequest ou Fetch, para ajudar a reduzir os riscos de requisições cross-origin HTTP.

+ +

Quem deve ler este artigo?

+ +

Todos, realmente.

+ +

Este artigo destina-se a administradores da Web, desenvolvedores de servidores e desenvolvedores front-end. Os navegadores modernos lidam com os componentes do lado cliente em compartilhamento entre origens, incluindo cabeçalhos e aplicação de políticas. Mas esse novo padrão significa que os servidores precisam lidar com novos cabeçalhos de requisição e resposta. Outro artigo para desenvolvedores de servidores que discutem compartilhamento cross-origin a partir de uma perspectiva de servidor (com fragmentos de código PHP), pode ser uma leitura complementar.

+ +

Quais solicitações usam o CORS?

+ +

Esse padrão de compartilhamento cross-origin é usado para habilitar solicitações HTTP entre sites para:

+ + + +

Este artigo é uma discussão geral sobre Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) e inclui uma discussão de cabeçalhos HTTP necessários.

+ +

Visão Geral

+ +

O padrão Cross-Origin Resource Sharing trabalha adicionando novos cabeçalhos HTTP que permitem que os servidores descrevam um conjunto de origens que possuem permissão a ler uma informação usando o navegador. Além disso, para métodos de requisição HTTP que podem causar efeitos colaterais nos dados do servidor (em particular, para métodos HTTP diferentes de {{HTTPMethod("GET")}} ou para uso de {{HTTPMethod("POST")}} com certos MIME types), a especificação exige que navegadores "pré-enviem" a requisição, solicitando os métodos suportados pelo servidor com um método de requisição HTTP {{HTTPMethod("OPTIONS")}} e, após a "aprovação", o servidor envia a requisição verdadeira com o método de requisição HTTP correto. Servidores também podem notificar clientes se "credenciais" (incluindo Cookies e dados de autenticação HTTP) devem ser enviadas com as requisições.

+ +

Falhas no CORS resultam em erros, mas por questões de segurança, detalhes sobre erros não estão disponíveis no código JavaScript. O código tem apenas conhecimento de que ocorreu um erro. A única maneira para determinar especificamente o que ocorreu de errado é procurar no console do navegador por mais detalhes.

+ +

Seções subsequentes discutem cenários, assim como fornecem um detalhamento dos cabeçalhos HTTP utilizados.

+ +

Exemplos de cenários com controle de acesso

+ +

Aqui, apresentamos três cenários que ilustram como Cross-Origin Resource Sharing funciona. Todos estes exemplos usam o objeto {{domxref("XMLHttpRequest")}}, que pode ser utilizado para fazer requisições entre origens em qualquer navegador compatível.

+ +

Os snippets JavaScript inclusos nessas seções (e instâncias executáveis de código do lado servidor que tratam corretamente essas requisições entre origens) podem ser encontrados "em ação" aqui: http://arunranga.com/examples/access-control/, e irão funcionar em navegadores que suportam XMLHttpRequest entre origens.

+ +

Uma discussão sobre Cross-Origin Resource Sharing a partir da perspectiva do servidor (incluindo snippets de código PHP) pode ser encontrada no artigo Server-Side Access Control (CORS).

+ +

Requisições simples

+ +

Algumas requisições não acionam um pré-envio CORS. Essas são denominadas neste artigo como “requisições simples” (simple request), embora a especificação {{SpecName('Fetch')}} (que define CORS) não utilize esse termo. Uma requisição que não aciona um pré-envio CORS — denominada “requisição simples” — é uma que atende todas as seguintes condições:

+ +
    +
  • Os únicos métodos permitidos são: +
      +
    • {{HTTPMethod("GET")}}
      • +
    • {{HTTPMethod("HEAD")}}
      • +
    • {{HTTPMethod("POST")}}
      • +
    +
    • +
  • Além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou qualquer um dos outros cabeçalhos com nomes definidos na especificação Fetch como “forbidden header name”), os únicos cabeçalhos que podem ser definidos manualmente são aqueles cujo a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: +
      +
    • {{HTTPHeader("Accept")}}
      • +
    • {{HTTPHeader("Accept-Language")}}
      • +
    • {{HTTPHeader("Content-Language")}}
      • +
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • +
    • DPR
      • +
    • {{HTTPHeader("Downlink")}}
      • +
    • Save-Data
      • +
    • Viewport-Width
      • +
    • Width
      • +
    +
    • +
  • Os únicos valores permitidos para o {{HTTPHeader("Content-Type")}} do cabeçalho são: +
      +
    • application/x-www-form-urlencoded
      • +
    • multipart/form-data
      • +
    • text/plain
      • +
    +
    • +
  • Nenhum event listener é registrado em qualquer objeto {{domxref("XMLHttpRequestUpload")}} usado na requisição, estes são acessados usando a propriedade {{domxref("XMLHttpRequest.upload")}}.
    • +
  • Nenhum objeto {{domxref("ReadableStream")}} é usado na requisição.
    • +
+ +
Nota: Esses são os mesmos tipos de requisições entre origens distintas que o conteúdo da web já pode realizar e nenhum dado dado de resposta é liberado ao solicitante, a menos que o servidor envie um cabeçalho adequado. Portanto, sites que impedem a falsificação de requisições entre origens não tem nada a temer em relação ao controle de acesso HTTP.
+ +
Nota: O WebKit Nightly e Safari Technology Preview impõem restrições adicionais nos valores permitidos nos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso algum destes cabeçalhos tenham valores ”não-padronizados”, o WebKit/Safari não considera que a requisição atenda as condições para uma “requisição simples”. O que o WebKit/Safari considera valores “não-padronizados” para estes cabeçalhos não é documentado exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS  e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
+ +

Por exemplo, suponha que o conteúdo web no domínio http://foo.example deseje chamar (invocation do exemplo abaixo) um outro conteúdo no domínio http://bar.other. Esse código Javascript pode estar hospedado em foo.example:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+
+ +

Isso fará uma troca simples entre cliente e servidor, utilizando o cabeçalho CORS para tratar os privilégios.

+ +

+ +

Neste caso, vamos ver o que o navegador enviará ao servidor e vamos olhar como o servidor responde:

+ +
GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+
+ +

As linhas de 1 a 10 são enviadas no header. Note que o cabeçalho principal da requisição HTTP aqui é {{HTTPHeader("Origin")}} na linha 10, o qual revela que a chamada é proveniente de um conteúdo no domínio http://foo.example.

+ +

As linhas de 13 a 22 mostram a resposta HTTP do servidor no domínio http://bar.other. Nesta resposta, o servidor envia de volta um cabeçalho {{HTTPHeader("Access-Control-Allow-Origin")}} exibido na linha 16. O uso dos cabeçalhos {{HTTPHeader("Origin")}} e {{HTTPHeader("Access-Control-Allow-Origin")}} mostram o protocolo de controle de acesso em seu uso mais simples. Neste caso, o servidor responde com Access-Control-Allow-Origin: *, o que significa que o recurso pode ser acessado por qualquer domínio pela comunicação entre origens. Se os proprietários dos recursos em http://bar.other desejarem restringir o acesso ao conteúdo para o mesmo ser apenas de http://foo.example, eles retornaram:

+ +

Access-Control-Allow-Origin: http://foo.example

+ +

Observe que, agora, nenhum dominio além de http://foo.example (identificado na requisição pelo cabeçalho ORIGIN: como na linha 10) pode acessar o recurso pela comunicação entre origens. O cabeçalho Access-Control-Allow-Origin deve conter o valor que foi enviado no cabeçalho Origin da requisição. 

+ +

Requisições com pré-envio

+ +

Ao contrário de “requisições simples” (discutido acima), requisições com "pré-envio" (Preflighted requests) primeiramente enviam uma requisição HTTP através do método {{HTTPMethod("OPTIONS")}} para obter um recurso em outro domínio, a fim de determinar se de fato a requisição atual é segura para envio. Requisições entre sites possuem pré-envio, já que podem interferir em dados do usuário.

+ +

Em particular, uma requisição tem um pré-envio se qualquer das seguintes condições for verdadeira:

+ +
    +
  • Se a requisição usa algum dos seguintes métodos: + +
      +
    • {{HTTPMethod("PUT")}}
      • +
    • {{HTTPMethod("DELETE")}}
      • +
    • {{HTTPMethod("CONNECT")}}
      • +
    • {{HTTPMethod("OPTIONS")}}
      • +
    • {{HTTPMethod("TRACE")}}
      • +
    • {{HTTPMethod("PATCH")}}
      • +
    +
    • +
  • Ou se, além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {HTTPHeader("User-Agent")}} ou qualquer OUTRO cabeçalho com um nome definido na especificação Fetch como “forbidden header name”), a requisição inclui quaisquer cabeçalhos além daqueles que a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: +
      +
    • {{HTTPHeader("Accept")}}
      • +
    • {{HTTPHeader("Accept-Language")}}
      • +
    • {{HTTPHeader("Content-Language")}}
      • +
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • +
    • DPR
      • +
    • {{HTTPHeader("Downlink")}}
      • +
    • Save-Data
      • +
    • Viewport-Width
      • +
    • Width
      • +
    +
    • +
  • Ou se o {{HTTPHeader("Content-Type")}} do cabeçalho tem outro valor que: +
      +
    • application/x-www-form-urlencoded
      • +
    • multipart/form-data
      • +
    • text/plain
      • +
    +
    • +
  • Ou se um ou mais event listener estiver registrado em um objeto {{domxref ("XMLHttpRequestUpload")}} usado nessa requisição.
    • +
  • Ou se um objeto {{domxref("ReadableStream")}} é usado nessa requisição.
    • +
+ +
Nota: WebKit Nightly e Safari Technology Preview colocam restrições adicionais nos valores permitidos dos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso qualquer um desses cabeçalhos tenha algum valor fora do padrão (non-standard), o WebKit/Safari faz o pré-envio da requisição. O que o WebKit/Safari considera como valor “non-standard” para tais cabeçalhos não está documentado, exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, e Content-Language request headers for simple CORS e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
+ +

O exemplo a seguir é de uma requisição com pré-envio.

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+
+ +

No exemplo acima, a linha 3 cria um XML para enviar com a requisição POST da linha 8. Também, na linha 9, é definido um cabeçalho de uma requisição HTTP "personalizada" (non-standard) com (X-PINGOTHER: pingpong). Tais cabeçalhos não fazem parte do protocolo HTTP/1.1, mas podem ser usados para aplicações web. Já que a requisição usa um Content-Type do tipo application/xml e como é uma requisição personalizada, esta requisição faz um pré-envio.

+ +

+ +

(Observação: conforme descrito abaixo, a requisição POST real não inclui os cabeçalhos Access-Control-Request- *; eles são necessários apenas para a requisição OPTIONS.)

+ +

Vamos conferir a comunicação completa que ocorre entre cliente e servidor. A primeira comunicação é a requisição com pré-envio/resposta:

+ +
OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+ +

Uma vez que a requisição com pré-envio é completa, a requisição efetiva será enviada:

+ +
POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+<?xml version="1.0"?><person><name>Arun</name></person>
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+
+ +

As linhas de 1 a 12 acima representam a requisição com pré-envio tendo o método {{HTTPMethod("OPTIONS")}}. O navegador determina que precisa fazer este envio baseado nos parâmetros da requisição do código JavaScript acima utilizado, para que o servidor possa responder caso seja aceitável o envio da requisição com os dados parâmetros da mesma. OPTIONS é um método HTTP/1.1 usado para determinar informações complementares dos servidores, sendo o mesmo um método {{Glossary("safe")}}, o que significa que não pode ser utilizado para troca de recurso. Note que junto da requisição OPTIONS, outros dois cabeçalhos são enviados (linhas 10 e 11, respectivamente):

+ +
Access-Control-Request-Method: POST
+Access-Controa l-Request-Headers: X-PINGOTHER, Content-Type
+
+ +

O cabeçalho {{HTTPHeader("Access-Control-Request-Method")}} notifica o servidor como sendo uma parte da requisição com pré-envio que, quando a requisição efetiva é enviada, será enviada com uma requisição de método POST. O cabeçalho {{HTTPHeader("Access-Control-Request-Headers")}} notifica o servidor que quando a requisição efetiva fora enviada, será enviada com os seguintes cabeçalhos personalizados X-PINGOTHER e Content-Type. O servidor agora tem a oportunidade para definir se deseja aceitar uma requisição sob estas condições.

+ +

As linhas 14 a 26 acima são as respostas que o servidor devolve, indicando que o método (POST) e os cabeçalhos (X-PINGOTHER) da requisição são aceitáveis. Em particular, vejamos as linhas 17 a 20:

+ +
Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+ +

O servidor responde com Access-Control-Allow-Methods e diz que POST, GET, e OPTIONS são métodos viáveis para requerir o recurso em questão. Perceba que este cabeçalho é similar ao cabeçalho da resposta {{HTTPHeader("Allow")}}, mas usado estritamente dentro do contexto do controle de acesso.

+ +

O servidor envia também Access-Control-Allow-Headers com um valor de "X-PINGOTHER, Content-Type", confirmando estes são cabeçalhos permitidos a serem usados com a requisição efetiva. Assim como Access-Control-Allow-Methods, Access-Control-Allow-Headers é uma lista de cabeçalhos aceitáveis, separados por vírgula.

+ +

Por fim, {{HTTPHeader("Access-Control-Max-Age")}} traz o valor em segundos de quão longo pode ser mantida em cache a resposta da requisição pré-envio sem o envio de outra requisição pré-envio. Neste caso, 86400 segundos são 24 horas. Note que cada browser tem um valor interno máximo que toma precedência quado Access-Control-Max-Age for maior.

+ +

Requisições com pré-envio e redirecionamento

+ +

Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.

+ +
+

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

+
+ +
+

Request requires preflight, which is disallowed to follow cross-origin redirect

+
+ +

The CORS protocol originally required that behavior but was subsequently changed to no longer require it. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.

+ +

So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:

+ +
    +
  • change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to
    • +
  • change the request such that it is a simple request that doesn’t cause a preflight
    • +
+ +

But if it’s not possible to make those changes, then another way that may be possible is to this:

+ +
    +
  1. Make a simple request (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.
    2. +
  2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.
    3. +
+ +

However, if the request is one that triggers a preflight due to the presence of the Authorization header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.

+ +

Requisições com credenciais

+ +

The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or Fetch and CORS is the ability to make "credentialed" requests that are aware of HTTP cookies and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.

+ +

In this example, content originally loaded from http://foo.example makes a simple GET request to a resource on http://bar.other which sets Cookies. Content on foo.example might contain JavaScript like this:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+ +

Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the withCredentials boolean value. By default, the invocation is made without Cookies. Since this is a simple GET request, it is not preflighted, but the browser will reject any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}: true header, and not make the response available to the invoking web content.

+ +

+ +

Here is a sample exchange between client and server:

+ +
GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+
+ +

Although line 11 contains the Cookie destined for the content on http://bar.other, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (line 19) the response would be ignored and not made available to web content.

+ +

Solicitações credenciadas e curingas (wildcards)

+ +

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

+ +

Because the request headers in the above example include a Cookie header, the request would fail if the value of the Access-Control-Allow-Origin header were "*". But it does not fail: Because the value of the Access-Control-Allow-Origin header is "http://foo.example" (an actual origin) rather than the "*" wildcard, the credential-cognizant content is returned to the invoking web content.

+ +

Note that the Set-Cookie response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.

+ +

All of these examples can be seen working here. The next section deals with the actual HTTP headers.

+ +

Os cabeçalhos de resposta HTTP

+ +

This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.

+ +

Access-Control-Allow-Origin

+ +

A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:

+ +
Access-Control-Allow-Origin: <origin> | *
+
+ +

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

+ +

For example, to allow http://mozilla.org to access the resource, you can specify:

+ +
Access-Control-Allow-Origin: http://mozilla.org
+ +

If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.

+ +

Access-Control-Expose-Headers

+ +

The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:

+ +
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+
+ +

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

+ +

Access-Control-Max-Age

+ +

The  {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

+ +
Access-Control-Max-Age: <delta-seconds>
+
+ +

The delta-seconds parameter indicates the number of seconds the results can be cached.

+ +

Access-Control-Allow-Credentials

+ +

The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the credentials flag is true.  When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple GET requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

+ +
Access-Control-Allow-Credentials: true
+
+ +

Credentialed requests are discussed above.

+ +

Access-Control-Allow-Methods

+ +

O {{HTTPHeader("Access-Control-Allow-Methods")}} cabeçalho especifica o método ou os métodos permitidos ao acessar o recurso. Isso é usado em resposta há uma requisição preflight. As condições na qual a requisição é preflight são discutidas à seguir.

+ +
Access-Control-Allow-Methods: <method>[, <method>]*
+
+ +

An example of a preflight request is given above, including an example which sends this header to the browser.

+ +

Access-Control-Allow-Headers

+ +

The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

+ +
Access-Control-Allow-Headers: <field-name>[, <field-name>]*
+
+ +

Os cabeçalhos de solicitação HTTP

+ +

This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.

+ +

Origin

+ +

The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.

+ +
Origin: <origin>
+
+ +

The origin is a URI indicating the server from which the request initiated.  It does not include any path information, but only the server name.

+ +
Note: The origin can be the empty string; this is useful, for example, if the source is a data URL.
+ +

Note that in any access control request, the {{HTTPHeader("Origin")}} header is always sent.

+ +

Access-Control-Request-Method

+ +

The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.

+ +
Access-Control-Request-Method: <method>
+
+ +

Examples of this usage can be found above.

+ +

Access-Control-Request-Headers

+ +

The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.

+ +
Access-Control-Request-Headers: <field-name>[, <field-name>]*
+
+ +

Examples of this usage can be found above.

+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch', '#cors-protocol', 'CORS')}}{{Spec2('Fetch')}}New definition; supplants W3C CORS specification.
+ +

Compatibilidade entre Navegadores

+ + + +

{{Compat("http.headers.Access-Control-Allow-Origin")}}

+ +

Notas de compatibilidade

+ +
    +
  • Internet Explorer 8 and 9 expose CORS via the XDomainRequest object, but have a full implementation in IE 10. 
    • +
  • While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using drawImage.
    • +
+ +

Veja também

+ + diff --git "a/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" "b/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" deleted file mode 100644 index c67e52b062..0000000000 --- "a/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Gerenciamento de Conexão em HTTP/1.x -slug: Web/HTTP/Gerenciamento_de_Conexão_em_HTTP_1.x -tags: - - Guide - - Guía - - HTTP - - Short-lived - - Web - - conexões - - performace - - sharding -translation_of: Web/HTTP/Connection_management_in_HTTP_1.x ---- -

Gerenciamento de Conexão é um tema central em HTTP: abertura e manutenção de conexões e em grande parte tem impacto sobre o desempenho de Web sites e aplicações Web. Existem vários modelos, em HTTP/1.x: ligações de curta duração, conexões persistentes, canalização e HTTP (HTTP pipelining).

- -

HTTP é um protocolo de transporte que fornece conexão entre o cliente e o servidor geralmente depende de TCP. Em sua infância, HTTP usava um único modelo para lidar com tais conexões. Sua conexão é de curta duração. Essas conexões foram de curta duração: criado um novo cada vez que enviar um pedido necessário, e fechado uma vez a resposta tinha sido recebida.

- -

Este simples modelo realiza uma limitação inata em desempenho: a abertura de cada uma das conexões TCP é uma operação de consumo de recursos.Várias mensagens devem ser trocadas entre o cliente e o servidor. Latência de rede e largura de banda afetam o desempenho quando precisa de uma solicitação de envio. Páginas de Web modernas exigem muitos pedidos (uma dúzia ou mais) para servir a quantidade de informação necessária, provando este modelo anterior ineficiente.

- -

Dois novos modelos foram criados no HTTP/1.1.

- -
    -
  1. O modelo de conexão persistente, mantém conexões abertas entre solicitações sucessivas, reduzindo o tempo necessário para abrir novas conexões.
    2. -
  2. O modelo de pipelining HTTP, vai um passo além, enviando várias solicitações sucessivas sem nem esperar por uma resposta, reduzindo em grande parte a latência da rede.
    3. -
- -

Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.

- -
-

HTTP/2 Adiciona modelos adicionais para o gerenciamento de conexão.

-
- -

Um ponto importante para observar, que gerenciamento de conexão HTTP, aplica-se para a conexão entre dois nós consecutivos, que é o hop-by-hop e não end-to-end . O modelo usado em conexões entre um cliente e seu primeiro proxy pode diferir do modelo entre um proxy e o servidor de destino (ou qualquer proxies intermédios). Os cabeçalhos HTTP envolvidos na definição do modelo de conexão, como {{HTTPHeader("Connection")}} e {{HTTPHeader("Keep-Alive")}}, são hop-by-hop, cabeçalhos com seus valores poderão ser alterados por nós intermediários.

- -

Short-lived connections (Conexões de curta duração)

- -

O modelo original de HTTP e o padrão HTTP/1.0, é short-lived connections (conexões de curta duração). Cada solicitação HTTP é concluída na sua própria conexão; Isto significa que um handshake TCP acontece antes de cada solicitação HTTP, e estas são serializadas.

- -

O handshake TCP em si é demorado, mas uma conexão TCP adapta-se a sua carga, tornando-se mais eficiente com mais conexões sustentadas (ou aquecidas). Conexões de curta duração não fazem uso desse recurso de eficiência do TCP, e degrada o desempenho do ideal persistindo para transmitir mais de uma conexão nova, frio.

- -

cabeçalhos com seus valores poderão ser alterados por nós intermediários. (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to close). Em HTTP/1.1 este modelo é apenas usado quando o {{HTTPHeader("Connection")}}cabeçalho é enviado com um valor de fechamento.

- -
A menos que lidemos com um sistema muito antigo, que não suporta uma conexão persistente, não há nenhuma razão convincente para usar este modelo.
- -

Conexões Persistentes

- -

Short-lived connections (conexões de curta duração) tem dois grandes problemas: o tempo necessário para estabelecer uma nova conexão é significativo, e desempenho da conexão TCP subjacente melhora somente quando esta conexão tem sido usado há algum tempo (conexão quente). Para aliviar estes problemas, foi concebido o conceito de uma conexão persistente, mesmo antes de HTTP/1.1. Alternativamente, este pode ser chamado uma conexão keep-alive.

- -

É uma conexão persistente que permanece aberto por um período e pode ser reutilizado por vários pedidos, salvando a necessidade de um novo handshake TCP, e utilizando recursos para melhorar o desempenho do TCP. Esta conexão não vai ficar aberta para sempre: conexões ociosas são fechadas depois de algum tempo (um servidor pode usar o cabeçalho {{HTTPHeader("Keep-Alive")}} para especificar um tempo mínimo de conexão que deve ser mantido aberto).

- -

Conexões persistentes também têm desvantagens, mesmo quando em marcha lenta eles consomem recursos do servidor e sob pesada carga, pode efetuar-se {{glossary("DoS attack", "DoS attacks")}}. Em tais casos, usar conexões não-persistentes, que estão fechadas, assim como elas estão ociosas, pode fornecer um melhor desempenho.HTTP/1.0 as conexões sem persistencia por default.Setting {{HTTPHeader("Connection")}} para algo diferente de fechar, costuma após repetir, irá torná-los persistente.

- -

Em HTTP/1.1, persistencia é o padrão e o cabeçalho não é mais necessário (mas ele é adicionado frequentemente como uma medida defensiva contra casos que exigem um fallback para HTTP/1.0).

- -

HTTP pipelining

- -
-

HTTP o pipelining não é ativado por padrão em navegadores modernos:

- -
    -
  • Buggy proxies são ainda comuns e eles levam a comportamentos estranhos e erráticos que desenvolvedores Web não podem prever e diagnosticar facilmente.
    • -
  • Pipelining é complexo para implementar corretamente: o tamanho do recurso a ser transferido, a efetiva RTT que será usado, bem como a largura de banda efetiva, têm uma incidência direta na melhoria fornecida pelo pipeline. Sem conhecer eles, mensagens importantes podem ser atrasadas por detrás aqueles sem importância. A noção de importante mesmo evolui durante o layout de página! Pipeline HTTP, portanto, traz uma melhoria marginal na maioria dos casos apenas.
    • -
  • Pipelining está sujeito à problema HOL.
    • -
- -

Por estas razões, o pipelining tem sido substituído por um algoritmo melhor, multiplexação, que é usado pelo HTTP/2.

-
- -

Por padrão, HTTP as solicitações são emitidas sequencialmente. A próxima solicitação só é emitida depois que recebeu a resposta para a solicitação atual. Como eles são afetados pelas latências de rede e as limitações de largura de banda, isso pode resultar em atrasos significativos antes que a próxima solicitação é vista pelo servidor.

- -

Pipelining é o processo para enviar solicitações sucessivas, sobre a mesma conexão persistente, sem esperar pela resposta. Isso evita a latência da conexão. Teoricamente, desempenho também poderia ser melhorado se duas solicitações HTTP para ser embalado na mesma mensagem TCP. O MSS típico (tamanho máximo de segmento), é grande o suficiente para conter várias solicitações simples, embora a demanda em tamanho de solicitações HTTP continua a crescer.

- -

Nem todos os tipos de solicitações HTTP podem ser intermitente: only {{glossary("idempotent")}} método, isso é {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} pode ser repetido com segurança: uma falha pode acontecer, o conteúdo do pipeline simplesmente pode ser repetido.

- -

Hoje, cada proxy HTTP/1.1-compatível e servidor devem apoiar o pipelining, embora muitos têm limitações na prática: uma razão significativa, nenhum navegador moderno ativa esse recurso por padrão.

- -

Domain sharding

- -
-A menos que você tem uma necessidade muito específica e imediata, não use esta técnica depreciada; Mude para HTTP/2 ao invéz. Em HTTP/2, sharding domínio não é mais útil: a conexão HTTP/2 é capaz de manipular as solicitações sem prioridades paralelas muito bem. Sharding domínio é mesmo prejudicial ao desempenho. A maioria dos implementação de HTTP/2 usam uma técnica chamada connection coalescing para reverter o sharding de domínio eventual. -
- -

Como uma conexão de HTTP/1.x está serializando solicitações, mesmo sem qualquer ordenação, não pode ser ideal sem largura de banda grande o suficiente disponível. Como uma solução, os navegadores abrir várias conexões para cada domínio, enviando solicitações paralelas. Era padrão conexões de 2 a 3, mas isto agora aumentou para um uso mais comum de 6 conexões paralelas. Há um risco de provocar proteção DoS no lado do servidor, se tentar mais do que este número.

- -

Se o servidor deseja um site de Web mais rápido ou resposta do aplicativo, é possível para o servidor forçar a abertura de mais conexões. Por exemplo, em vez de ter todos os recursos no mesmo domínio, diz www.example.com, poderia dividir em vários domínios, www1.example.com, www2.example.com, www3.example.com. Cada um destes domínios resolver acessar o mesmo servidor e o navegador da Web abrirá 6 conexões para cada (no nosso exemplo, impulsionando as conexões para 18). Esta técnica é chamada sharding do domínio.

- -

- -

Conclusão

- -
-
Gerenciamento de conexão melhorada permite considerável aumento de desempenho em HTTP. Com HTTP/1.1 ou HTTP/1.0, usando uma conexão persistente – pelo menos até que se torne ocioso – levando para o melhor desempenho. No entanto, o falha do pipelining tem levado para a concepção de modelos de gestão de conexão superior, que foram incorporados ao HTTP/2.
-
diff --git "a/files/pt-br/web/http/headers/conex\303\243o/index.html" "b/files/pt-br/web/http/headers/conex\303\243o/index.html" deleted file mode 100644 index b8df737d95..0000000000 --- "a/files/pt-br/web/http/headers/conex\303\243o/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Connection -slug: Web/HTTP/Headers/Conexão -tags: - - Cabeçalhos - - HTTP - - Reference - - Referencia - - Web -translation_of: Web/HTTP/Headers/Connection ---- -
{{HTTPSidebar}}
- -

O cabeçalho Connection controla se a conexão se mantém aberta ou não após o término da transação atual. Se o valor for keep-alive, a conexão é persistente e não fecha, permitindo que requisições futuras ao mesmo servidor sejam feitas.

- -
-

Nota: Campos de cabeçalho de conexão específica como Connection não devem ser usados com HTTP/2.

-
- -

Exceto pelos cabeçalhos padrões hop-by-hop (salto-por-salto)  ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} e {{HTTPHeader("Proxy-Authenticate")}}), quaisquer cabeçalhos hop-by-hop usados pela mensagem devem estar listados no cabeçalho Connection, para que o primeiro proxy saiba que tem que consumi-los e não repassá-los além. Os cabeçalhos hop-by-hop padrões podem ser listados também (como é o caso do {{HTTPHeader("Keep-Alive")}}, mas não é obrigatório).

- - - - - - - - - - - - -
Tipo de cabeçalho{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}sim
- -

Sintaxe

- -
Connection: keep-alive
-Connection: close
-
- -

Diretivas

- -
-
close
-
Indica que ou o cliente, ou o servidor querem fechar a conexão. Este é o valor padrão em requisições HTTP/1.0.
-
qualquer lista de cabelhaços HTTP separados por vírgulas [Geralmente apenas o keep-alive ]
-
Indica que o cliente gostaria de manter a ligação aberta. Ter uma conexão persistente é o valor padrão das requisições HTTP/1.1. A lista de cabeçalhos são os nomes dos cabeçalhos a serem removidos pelo primeiro proxy não-transparente ou com "cache no meio": estes cabeçalhos definem a conexão entre o emissor e a primeira entidade, não o nó destinatário.
-
- -

Browser compatibility

- - - -

{{Compat("http.headers.Connection")}}

diff --git a/files/pt-br/web/http/headers/connection/index.html b/files/pt-br/web/http/headers/connection/index.html new file mode 100644 index 0000000000..b8df737d95 --- /dev/null +++ b/files/pt-br/web/http/headers/connection/index.html @@ -0,0 +1,54 @@ +--- +title: Connection +slug: Web/HTTP/Headers/Conexão +tags: + - Cabeçalhos + - HTTP + - Reference + - Referencia + - Web +translation_of: Web/HTTP/Headers/Connection +--- +
{{HTTPSidebar}}
+ +

O cabeçalho Connection controla se a conexão se mantém aberta ou não após o término da transação atual. Se o valor for keep-alive, a conexão é persistente e não fecha, permitindo que requisições futuras ao mesmo servidor sejam feitas.

+ +
+

Nota: Campos de cabeçalho de conexão específica como Connection não devem ser usados com HTTP/2.

+
+ +

Exceto pelos cabeçalhos padrões hop-by-hop (salto-por-salto)  ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} e {{HTTPHeader("Proxy-Authenticate")}}), quaisquer cabeçalhos hop-by-hop usados pela mensagem devem estar listados no cabeçalho Connection, para que o primeiro proxy saiba que tem que consumi-los e não repassá-los além. Os cabeçalhos hop-by-hop padrões podem ser listados também (como é o caso do {{HTTPHeader("Keep-Alive")}}, mas não é obrigatório).

+ + + + + + + + + + + + +
Tipo de cabeçalho{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}sim
+ +

Sintaxe

+ +
Connection: keep-alive
+Connection: close
+
+ +

Diretivas

+ +
+
close
+
Indica que ou o cliente, ou o servidor querem fechar a conexão. Este é o valor padrão em requisições HTTP/1.0.
+
qualquer lista de cabelhaços HTTP separados por vírgulas [Geralmente apenas o keep-alive ]
+
Indica que o cliente gostaria de manter a ligação aberta. Ter uma conexão persistente é o valor padrão das requisições HTTP/1.1. A lista de cabeçalhos são os nomes dos cabeçalhos a serem removidos pelo primeiro proxy não-transparente ou com "cache no meio": estes cabeçalhos definem a conexão entre o emissor e a primeira entidade, não o nó destinatário.
+
+ +

Browser compatibility

+ + + +

{{Compat("http.headers.Connection")}}

diff --git "a/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" "b/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" deleted file mode 100644 index 2b8ebcc404..0000000000 --- "a/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Location -slug: Web/HTTP/Headers/Localização -tags: - - Cabeçalho HTTP - - Cabeçalho de Resposta - - HTTP -translation_of: Web/HTTP/Headers/Location ---- -
{{HTTPSidebar}}
- -

O cabeçalho de resposta Location indica o URL para qual página deve-se ser redirecionada. Ele só tem significado quando é enviado junto a uma resposta de status 3xx (redirecionamento) ou 201 (criado).

- -

Em casos de redirecionamento, o método HTTP utilizado para fazer a nova requisição à página apontada pelo cabeçalho Location depende do método original e do tipo de redirecionamento:

- -
    -
  • Se respostas com status {{HTTPStatus("303")}} (Veja também) sempre levam ao uso do método {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirecionamento Temporário) e {{HTTPStatus("308")}} (Redirecionamento Permanente) não mudam o método utilizado na requisição original;
    • -
  • {{HTTPStatus("301")}} (Movido Permanentemente) e {{HTTPStatus("302")}} (Encontrado) não mudam o método na maior parte das vezes, entretanto agentes de usuário antigos talvez mudem (basicamente você não sabe se eles farão isso).
    • -
- -

Todas as respostas com um desses códigos de status enviam um cabeçalho Location.

- -

Em casos de recursos de criação, ele indica o URL para o novo recurso criado.

- -

Location e {{HTTPHeader("Content-Location")}} são diferentes: Location indica o alvo de redirecionamento (ou URL do novo recurso criado), enquanto {{HTTPHeader("Content-Location")}} indica o URL direto para ter acesso ao recurso quando negociação de conteúdo acontecer, sem a necessidade de futura negociação de conteúdo. Location é um cabeçalho associado com a resposta, enquanto {{HTTPHeader("Content-Location")}} é associado com a entidade retornada.

- - - - - - - - - - - - -
Tipo de cabeçalho{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}não
- -

Sintaxe

- -
Location: <url>
-
- -

Diretivas

- -
-
<url>
-
Uma URL relativa (ao URL de requisição) ou absoluta.
-
- -

Exemplos

- -
Location: /index.html
- -

Especificações

- - - - - - - - - - - - -
EspecificaçãoTítulo
{{RFC("7231", "Location", "7.1.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilidade de navegadores

- - - -

{{Compat("http.headers.Location")}}

- -

Veja também

- -
    -
  • {{HTTPHeader("Content-Location")}}
    • -
  • Código de status de respostas que incluem o cabeçalho Location: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.
    • -
diff --git a/files/pt-br/web/http/headers/location/index.html b/files/pt-br/web/http/headers/location/index.html new file mode 100644 index 0000000000..2b8ebcc404 --- /dev/null +++ b/files/pt-br/web/http/headers/location/index.html @@ -0,0 +1,82 @@ +--- +title: Location +slug: Web/HTTP/Headers/Localização +tags: + - Cabeçalho HTTP + - Cabeçalho de Resposta + - HTTP +translation_of: Web/HTTP/Headers/Location +--- +
{{HTTPSidebar}}
+ +

O cabeçalho de resposta Location indica o URL para qual página deve-se ser redirecionada. Ele só tem significado quando é enviado junto a uma resposta de status 3xx (redirecionamento) ou 201 (criado).

+ +

Em casos de redirecionamento, o método HTTP utilizado para fazer a nova requisição à página apontada pelo cabeçalho Location depende do método original e do tipo de redirecionamento:

+ +
    +
  • Se respostas com status {{HTTPStatus("303")}} (Veja também) sempre levam ao uso do método {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirecionamento Temporário) e {{HTTPStatus("308")}} (Redirecionamento Permanente) não mudam o método utilizado na requisição original;
    • +
  • {{HTTPStatus("301")}} (Movido Permanentemente) e {{HTTPStatus("302")}} (Encontrado) não mudam o método na maior parte das vezes, entretanto agentes de usuário antigos talvez mudem (basicamente você não sabe se eles farão isso).
    • +
+ +

Todas as respostas com um desses códigos de status enviam um cabeçalho Location.

+ +

Em casos de recursos de criação, ele indica o URL para o novo recurso criado.

+ +

Location e {{HTTPHeader("Content-Location")}} são diferentes: Location indica o alvo de redirecionamento (ou URL do novo recurso criado), enquanto {{HTTPHeader("Content-Location")}} indica o URL direto para ter acesso ao recurso quando negociação de conteúdo acontecer, sem a necessidade de futura negociação de conteúdo. Location é um cabeçalho associado com a resposta, enquanto {{HTTPHeader("Content-Location")}} é associado com a entidade retornada.

+ + + + + + + + + + + + +
Tipo de cabeçalho{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}não
+ +

Sintaxe

+ +
Location: <url>
+
+ +

Diretivas

+ +
+
<url>
+
Uma URL relativa (ao URL de requisição) ou absoluta.
+
+ +

Exemplos

+ +
Location: /index.html
+ +

Especificações

+ + + + + + + + + + + + +
EspecificaçãoTítulo
{{RFC("7231", "Location", "7.1.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("http.headers.Location")}}

+ +

Veja também

+ +
    +
  • {{HTTPHeader("Content-Location")}}
    • +
  • Código de status de respostas que incluem o cabeçalho Location: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.
    • +
diff --git a/files/pt-br/web/http/http/index.html b/files/pt-br/web/http/http/index.html deleted file mode 100644 index 9cfd4d4a0d..0000000000 --- a/files/pt-br/web/http/http/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Cacheamento HTTP -slug: Web/HTTP/HTTP -tags: - - Cache - - Cacheamento - - Guía - - HTTP - - Internet - - Rede - - Web -translation_of: Web/HTTP/Caching ---- -
{{HTTPSidebar}}
- -

A performance de websites e aplicações podem ser melhoradas significativamente ao reusar recursos previamente buscados. Caches em web reduzem latência e o tráfego de rede e assim diminuir o tempo necesário para exibir uma representação do recurso. Ao usar caching em HTTP, websites se tornam mais responsivos.

- -

Diferentes tipos de caches

- -

Caching é uma técnica que guarda uma cópia de dado recurso e mostra de volta quando requisitado. Quando um web cache tem um recurso requerido em seu armazenamento, ele intercepta a solicitação e retorna sua cópia ao invés de fazer o download novamente do servidor original. Isto alcança vários objetivos: facilita o balanceamento do servidor que não precisa servir todos os clients sozinho, e melhora a performance por estar próximo do client,  por exemplo, ele leva menos tempo para transmitir o recurso de volta. Para um website, é um componente principal para alcançar alta performance. De outro lado, ele deve ser configurado devidamente pois não são todos os recursos que ficam idênticos para sempre: é importante colocar um recurso em cache somente até que ele mude, não mais que isso. 

- -

Há muitos tipos de caches: estes podem ser agrupados em duas categorias principais, caches privados ou compartilhados. Um cache compartilhado é um cache que armazena respostas para serem reusadas por mais de um usuário. Um cache privado é dedicado a um único usuário. Esta página irá falar principalmente sobre caches em navegadores e em proxy, mas há também caches de gateway, CDN, cache de proxy reverso e balanceadores de carga (load balancers) que são implantados em servers da web para melhor confiabilidade, desempenho e dimensionamento de sites e aplicativos da web.

- -

What a cache provide, advantages/disadvantages of shared/private caches.

- -

Caches privados de browser

- -

Um cache privado é dedicado para um único usuário. Você já pode ter visto "caching" nas configurações de seu navegador. Um cache de browser guarda todos os documentos que foram baixados via HTTP pelo usuário. Este cache é usado para tornar disponíveis documentos visitados para navegação "para frente e para trás" (ou back/forward, em Inglês), salvar, ver como fonte, etc. sem exigir uma viagem para o servidor. Também melhora a navegação offline de conteúdo em cache.

- -

Caches de proxy compartilhada

- -

Uma cache compartilhada é uma cache que armazena respostas para serem reusadas por mais de um usuário. Por exemplo, um fornecedor de acesso à internet ou sua empresa pode ter definido uma web proxy como parte de sua infraestrutura de rede local para servir muitos usuários para que recursos populares sejam reusados numerosas vezes, reduzindo o tráfego de rede e latência.

- -

Alvos de operações de cache

- -

Fazer cache de HTTP é opcional, mas reusar um recurso em cache é usualmente desejável. No entanto, caches HTTP comuns são tipicamente limitados a respostas em cache para {{HTTPMethod("GET")}} e podem declinar outros métodos. As chaves primárias de cache consistem de um método de requisição e um alvo URI (como requisições são alvos de cache, muitas vezes somente o URI é usado). Formas comuns de entrada de cache são:

- -
    -
  • Resultados bem sucedidos de uma requisição: uma resposta {{HTTPStatus(200)}} (OK) para uma requisição {{HTTPMethod("GET")}} contendo recursos como documentos HTML, imagens ou arquivos.
    • -
  • Redirecionamentos permanentes: uma resposta {{HTTPStatus(301)}} (Moved Permanently).
    • -
  • Respostas de erro: um resultado {{HTTPStatus(404)}} (Not Found).
    • -
  • Resultados incompletos: uma resposta {{HTTPStatus(206)}} (Partial Content).
    • -
  • Outras respostas que não sejam {{HTTPMethod("GET")}} se algo mais adequado para uso como chave de cache é definido.
    • -
- -

Uma entrada de cache pode também consistir de múltiplas respostas armazenadas diferenciadas por uma chave secundária, se a requisição é alvo de negociação de conteúdo. Para mais detalhes veja a informação sobre o cabeçalho {{HTTPHeader("Vary")}} abaixo.

- -

Controlando cache

- -

O cabeçalho Cache-control

- -

O cabeçalho-geral {{HTTPHeader("Cache-Control")}} HTTP/1.1 é usado para especificar diretivas para mecanismos de cache em ambas requisições e respostas. Use este cabeçalho para definir suas políticas de cache com a variedade de diretivas que fornece.

- -

Não usar armazenamento de cache

- -

O cache não deve armazenar nada sobre a requisição do cliente ou a resposta do servidor. Uma requisição é enviada ao servidor e uma resposta completa é baixada por cada e toda vez.

- -
Cache-Control: no-store
-Cache-Control: no-cache, no-store, must-revalidate
-
- -

Sem fazer cache

- -

Um cache irá enviar a requisição ao servidor de origem para validação antes de liberar uma cópia em cache. 

- -
Cache-Control: no-cache
- -

Caches privados e públicos

- -

A diretiva "public" indica que a resposta pode ser colocada em cache por qualquer cache. Isto pode ser útil, se páginas com autenticação HTTP ou códigos de status de resposta que não são normalmente colocadas em cache, devem agora ser colocadas. Por outro lado, "private" indica que a resposta é para um único usuário somente e não deve ser armazenada por um cache compartilhado. Um cache privado de navegador pode armazenar a resposta neste caso.

- -
Cache-Control: private
-Cache-Control: public
-
- -

Data de validade

- -

A diretiva mais importante aqui é "max-age=<seconds>" que é a quantidade máxima de tempo que um recurso será considerado "fresco". Contrário ao {{HTTPHeader("Expires")}}, esta diretiva é relativa ao tempo da requisição. Para os arquivos na aplicação que não irão mudar, você pode normalmente adicionar cache agressivamente. Isto inclui arquivos estáticos como imagens, arquivos CSS e Javascript, por exemplo.

- -

Para mais detalhes, veja também a seção Tempo de Vida abaixo.

- -
Cache-Control: max-age=31536000
- -

Validação

- -

Quando usamos a diretiva "must-revalidate", o cache deve verificar o status dos recursos obsoletos antes de os usar e os expirados não deverão ser usados. Para mais detalhes, veja a seção Validation abaixo.

- -
Cache-Control: must-revalidate
- -

O header Pragma

- -

{{HTTPHeader("Pragma")}} é um header HTTP/1.0, não é especificado para respostas HTTP e não é, assim, uma reposição confiável para o cabeçalho geral HTTP/1.1 Cache-Control, apesar de se comportar da mesma forma que Cache-Control: no-cache, se o campo do cabeçalho Cache-Control é omitido em uma requisição.Use Pragma somente para compatibilidade com clients HTTP/1.0 mais antigos

- -

Tempo de Vida

- -

Quando um recurso é armazenado em um cache, ele poderia teoricamente ser servido para sempre. Caches possuem armazenamento finito então itens são periodicamente removidos do armazenamento. Esse processo é chamado de despejo de cache. Por outro lado, alguns recursos podem mudar no servidor fazendo com que o cache fique desatualizado. Como o HTTP é um protocolo cliente-servidor, os servidores não podem contatar caches e clientes quando um recurso é alterado; eles precisam comunicar um tempo de expiração para o recurso. Antes deste período de expiração, o recurso é novo; após o tempo de expiração, o recurso é obsoleto. Os algoritmos de despejo geralmente privilegiam recursos novos em vez de recursos obsoletos. Observe que um recurso obsoleto não é despejado ou ignorado; quando o cache recebe uma solicitação para um recurso obsoleto, ele encaminha essa solicitação com um {{HTTPHeader ("If-None-Match")}} para verificar se, de fato, ainda está fresco. Em caso afirmativo, o servidor retorna um cabeçalho {{HTTPStatus ("304")}} (Não modificado) sem enviar o corpo do recurso solicitado, economizando alguma largura de banda.

- -

Here is an example of this process with a shared cache proxy:

- -

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

- -

O tempo de Vida é calculado beaseado em vários headers. Se o "Cache-control: max-age=N" header é especificado, então o tempo de vida é igual a N. Se este header não está presente, o que ocorre com frequência, ele checa se um {{HTTPHeader("Expires")}} heade está presente. Se um Expires header existe, então é o valor menos o valor do {{HTTPHeader("Date")}} header determina o tempo de vida. Finalmente, se nenhum header está presente, procure pelo {{HTTPHeader("Last-Modified")}} header. Se este header está presente, então o tempo de vidaé igual ao valor do  Date header menos o valor do Last-modified header dividido por 10.
- O valor de expiração é computado por:

- -
expirationTime = responseTime + freshnessLifetime - currentAge
-
- -

No qual responseTimeé o tempo em que a resposta é recebida de acordo com o navegador.

- -

Revved resources

- -

The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.

- -

Web developers invented a technique that Steve Souders called revving[1]. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that never changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.

- -

This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.

- -

- -

The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.

- -

Cache validation

- -

Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "Cache-control: must-revalidate" header. Another factor is the cache validation preferences in the Advanced->Cache preferences panel. There is an option to force a validation each time a document is loaded.

- -

When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a strong validator or a weak validator.

- -

ETags

- -

The {{HTTPHeader("ETag")}} response header is an opaque-to-the-useragent value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the ETag header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.

- -

The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the Last-Modified header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.

- -

When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} OK, or it can return {{HTTPStatus(304)}} Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.

- -

Varying responses

- -

The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.

- -

When a cache receives a request that can be satisfied by a cached response that has a Vary header field, it must not use that cached response unless all header fields as nominated by the Vary header match in both the original (cached) request and the new request.

- -

The Vary header leads cache to use more HTTP headers as key for the cache.

- -

This can be useful for serving content dynamically, for example. When using the Vary: User-Agent header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no Cloaking is intended.

- -
Vary: User-Agent
- -

Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.

- -

See also

- - diff --git a/files/pt-br/web/http/mensagens/index.html b/files/pt-br/web/http/mensagens/index.html deleted file mode 100644 index 895c58d2e8..0000000000 --- a/files/pt-br/web/http/mensagens/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Mensagens HTTP -slug: Web/HTTP/Mensagens -tags: - - Guía - - HTTP - - Protocolos -translation_of: Web/HTTP/Messages ---- -
{{HTTPSidebar}}
- -

Dados são trocados entre servidor e cliente por meio de mensagens HTTP. Há dois tipos de mensagens: requisições (requests) enviadas pelo cliente para disparar uma ação no servidor, e respostas (responses), a réplica do servidor.

- -

Mensagens HTTP são compostas de informação textual codificada em ASCII, e se espalham por multiplas linhas. Em HTTP/1.1, e versões anteriores do protocolo, estas mensagens eram abertamente enviadas através da conexão. Em HTTP/2, a mensagem antes legível por humanos é agora dividida em quadros HTTP, resultando em otimização e melhora de desempenho.

- -

Desenvolvedores Web, ou webmasters, raramente lidam com essas mensagens textuais diretamente: um programa, um navegador, um proxy, ou um servidor Web, executam essa ação. Eles proveem mensagens HTTP por meio de arquivos de configuração (para  proxys ou servidores), APIs (para navegadores) ou outras interfaces.

- -

From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.

- -

O mecanismo de enquadramento binário foi projetado de modo a não requerer qualquer alteração das APIs ou arquivos de configuração aplicados: ele é transparente para o usuário.

- -

Requisições e respostas HTTP compartilham estrutura similar e são compostas de:

- -
    -
  1. Uma linha inicial (start-line) que descreve as requisições a serem implementadas, ou seu status de sucesso ou falha. Esta linha inicial é sempre uma única.
    2. -
  2. Um conjunto opcional de cabeçalhos HTTP especificando a requisição, ou descrevendo o corpo incluso na mensagem.
    3. -
  3. Uma linha em branco (empty line) indicando que toda meta-informação para a requisição já foi enviada.
    4. -
  4. Um corpo (body) contendo dados associados à requisição (como o conteúdo de um formulário HTML), ou o documento associado à resposta. A presença do corpo e seu tamanho são especificados pela linha inicial e os cabeçalhos HTTP.
    5. -
- -

A linha inicial e os cabeçalhos HTTP da mensagem HTTP são conjuntamente chamados de cabeça (head) da requisição, enquanto o que ela carrega, a sua carga, é conhecida como corpo.

- -

Requests and responses share a common structure in HTTP

- -

Requisições HTTP

- -

Linha inicial

- -

Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Suas linhas iniciais contêm três elementos:

- -
    -
  1. Um método HTTP, um verbo (como {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} ou {{HTTPMethod("POST")}}) ou um nome (como {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}), que descrevem a ação a ser executada. Por exemplo, GET indica que um recurso deve ser obtido ou POST significa que dados são inseridos no servidor (criando ou modificando um recurso, ou gerando um documento temporário para mandar de volta).
    2. -
  2. O alvo da requisição, normalmente um {{glossary("URL")}}, ou o caminho absoluto do protocolo, porta e domínio são em geral caracterizados pelo contexto da requisição. O formato deste alvo varia conforme o método HTTP. Pode ser -
      -
    • Um caminho absoluto, seguido de um '?' e o texto da consulta. Esta é a forma mais comum, conhecida como a forma original, e é usada com os métodos GET, POST, HEAD, e OPTIONS.
      - POST / HTTP/1.1
      - GET /background.png HTTP/1.0
      - HEAD /test.html?query=alibaba HTTP/1.1
      - OPTIONS /anypage.html HTTP/1.0
      • -
    • Uma URL completa, conhecida como a forma absoluta, usada principalmente com GET quando conectado a um proxy.
      - GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
      • -
    • O componente autoridade de um URL, que consiste no nome do domínio e opcionalmente uma porta (prefixada por ':'), chamada de forma autoridade. Só usada com CONNECT ao estabelecer um túnel HTTP.
      - CONNECT developer.mozilla.org:80 HTTP/1.1
      • -
    • A  forma asterisco, um simples asterisco ('*'), usada com OPTIONS. Representa o servidor como um todo.
      - OPTIONS * HTTP/1.1
      • -
    -
    3. -
  3. A  versão HTTP, que define a estrutura do restante da mensagem, atuando como um indicador da versão esperada para uso na resposta.
    4. -
- -

Cabeçalhos

- -

Cabeçalhos HTTP de uma requisição seguem a mesma estrutura básica de um cabeçalho HTTP: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha, que pode ser bem grande.

- -

Há numerosos cabeçalhos de requisição disponíveis. Eles podem ser divididos em vários grupos:

- -
    -
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}},  se aplicam à mensagem como um todo.
    • -
  • Cabeçalhos de requisição, como {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, modificam a requisição, especificando-a mais (como {{HTTPHeader("Accept-Language")}}), dando-a contexto (como {{HTTPHeader("Referer")}}), ou restringindo-a condicionalmente (como {{HTTPHeader("If-None")}}).
    • -
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}} que se aplicam ao corpo da mensagem. Obviamente este cabeçalho não será transmitido se não houver corpo na requisição.
    • -
- -

Example of headers in an HTTP request

- -

Corpo

- -

A parte final da requisição é o corpo. Nem todas as requisições tem um: as que pegam recursos, como GET, HEAD, DELETE, ou OPTIONS, usualmente não precisam de um. Algumas requisições enviam dados ao servidor a fim de atualizá-lo: é o caso frequente de requisições POST (contendo dados de formulário HTML).

- -

Corpos podem ser divididos, a grosso modo, em duas categorias:

- -
    -
  • Corpos de recurso-simples, consistindo em um único arquivo, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • -
  • Corpos de recurso-múltiplo, consistindo em um corpo de múltiplas partes, cada uma contendo uma porção diferente de informação. Este é tipicamente associado à Formulários HTML.
    • -
- -

Respostas HTTP

- -

Linha de status

- -

A linha inicial de uma resposta HTTP, chamada de linha de status, contém a seguinte informação:

- -
    -
  1. A versão do protocolo, normalmente HTTP/1.1.
    2. -
  2. Um código de status, indicando o sucesso ou falha da requisição. Códigos de status comuns são {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, ou {{HTTPStatus("302")}}
    3. -
  3. Um texto de status. Uma descrição textual breve, puramente informativa, do código de status a fim de auxiliar o entendimento da mensagem HTTP por humanos.
    4. -
- -

Uma linha de status típica se parece com: HTTP/1.1 404 Not Found.

- -

Cabeçalhos

- -

Cabeçalhos HTTP para respostas seguem a mesma estrutura de qualquer outro cabeçalho: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do tipo de cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha.

- -

Há numerosos cabeçalhos de resposta disponíveis. Eles podem ser divididos em vários grupos:

- -
    -
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}}, aplicam-se à toda mensagem.
    • -
  • Cabeçalhos de resposta, como {{HTTPHeader("Vary")}} e {{HTTPHeader("Accept-Ranges")}}, dão informação adicional sobre o servidor, que não cabe na linha de status.
    • -
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}}, aplicam-se ao corpo da resposta. Obviamente este cabeçalho não será transmitido se não houver corpo na resposta.
    • -
- -

Example of headers in an HTTP response

- -

Corpo

- -

A última parte de uma resposta é o corpo. Nem toda resposta tem um: aquelas com código de status {{HTTPStatus("201")}} ou {{HTTPStatus("204")}} normalmente não tem.

- -

Corpos podem ser divididos, a grosso modo, em três categorias:

- -
    -
  • Corpos de recurso simples que consistem em um único arquivo de tamanho conhecido, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • -
  • Corpos de recurso simples que consistem em um único arquivo de tamanho desconhecido, codificado aos pedaços com {{HTTPHeader("Transfer-Encoding")}} ajustado para chunked.
    • -
  • Corpos de recurso múltiplo, que consiste em um corpo com múltiplas partes, cada uma contendo diferentes seções de informação. Estes são relativamente raros.
    • -
- -

Quadros HTTP/2

- -

Mensagens HTTP/1.x têm algumas desvantagens quanto ao desempenho:

- -
    -
  • Os cabeçalhos, ao contrário dos corpos, não são compactados.
    • -
  • Cabeçalhos com frequência são similares entre uma mensagem e a seguinte, ainda assim são repetidos entre conexões.
    • -
  • Nenhuma multiplexação pode ser feita. É necessário abrir várias conexões no mesmo servidor: e conexões TCP quentes são mais eficientes que frias.
    • -
- -

HTTP/2 introduz um passo extra: ele divide mensagens HTTP/1.x em quadros que são embutidos em um fluxo. Quadros de dados e de cabeçalho são separados, isto permite a compressão do cabeçalho. Muitos fluxos podem ser conjugados, um processo chamado de multiplexação, permitindo mais eficiência nas conexões TCP subjacentes.

- -

HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.

- -
Connection
- -

Quadros HTTP agora são transparentes aos desenvolvedores web. Isso é um passo adicional no HTTP/2, entre mensagens HTTP/1.1 e o protocolo de transporte subjacente. Nenhuma mudança é necessária nas API usadas pelo desenvolvedor web para utilizar quadros; quando disponível tanto no navegador quanto no servidor, HTTP/2 é ativado e usado.

- -

Conclusão

- -

Mensagens HTTP são a chave ao usar HTTP; sua estrutura é simples e elas são altamente extensíveis. O mecanismo de enquadramento do HTTP/2 adiciona uma nova camada intermediária entre a sintaxe HTTP/1.x e o protocolo de transporte subjacente, sem modificá-lo fundamentalmente: construído sobre mecanismos provados.

diff --git a/files/pt-br/web/http/messages/index.html b/files/pt-br/web/http/messages/index.html new file mode 100644 index 0000000000..895c58d2e8 --- /dev/null +++ b/files/pt-br/web/http/messages/index.html @@ -0,0 +1,146 @@ +--- +title: Mensagens HTTP +slug: Web/HTTP/Mensagens +tags: + - Guía + - HTTP + - Protocolos +translation_of: Web/HTTP/Messages +--- +
{{HTTPSidebar}}
+ +

Dados são trocados entre servidor e cliente por meio de mensagens HTTP. Há dois tipos de mensagens: requisições (requests) enviadas pelo cliente para disparar uma ação no servidor, e respostas (responses), a réplica do servidor.

+ +

Mensagens HTTP são compostas de informação textual codificada em ASCII, e se espalham por multiplas linhas. Em HTTP/1.1, e versões anteriores do protocolo, estas mensagens eram abertamente enviadas através da conexão. Em HTTP/2, a mensagem antes legível por humanos é agora dividida em quadros HTTP, resultando em otimização e melhora de desempenho.

+ +

Desenvolvedores Web, ou webmasters, raramente lidam com essas mensagens textuais diretamente: um programa, um navegador, um proxy, ou um servidor Web, executam essa ação. Eles proveem mensagens HTTP por meio de arquivos de configuração (para  proxys ou servidores), APIs (para navegadores) ou outras interfaces.

+ +

From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.

+ +

O mecanismo de enquadramento binário foi projetado de modo a não requerer qualquer alteração das APIs ou arquivos de configuração aplicados: ele é transparente para o usuário.

+ +

Requisições e respostas HTTP compartilham estrutura similar e são compostas de:

+ +
    +
  1. Uma linha inicial (start-line) que descreve as requisições a serem implementadas, ou seu status de sucesso ou falha. Esta linha inicial é sempre uma única.
    2. +
  2. Um conjunto opcional de cabeçalhos HTTP especificando a requisição, ou descrevendo o corpo incluso na mensagem.
    3. +
  3. Uma linha em branco (empty line) indicando que toda meta-informação para a requisição já foi enviada.
    4. +
  4. Um corpo (body) contendo dados associados à requisição (como o conteúdo de um formulário HTML), ou o documento associado à resposta. A presença do corpo e seu tamanho são especificados pela linha inicial e os cabeçalhos HTTP.
    5. +
+ +

A linha inicial e os cabeçalhos HTTP da mensagem HTTP são conjuntamente chamados de cabeça (head) da requisição, enquanto o que ela carrega, a sua carga, é conhecida como corpo.

+ +

Requests and responses share a common structure in HTTP

+ +

Requisições HTTP

+ +

Linha inicial

+ +

Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Suas linhas iniciais contêm três elementos:

+ +
    +
  1. Um método HTTP, um verbo (como {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} ou {{HTTPMethod("POST")}}) ou um nome (como {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}), que descrevem a ação a ser executada. Por exemplo, GET indica que um recurso deve ser obtido ou POST significa que dados são inseridos no servidor (criando ou modificando um recurso, ou gerando um documento temporário para mandar de volta).
    2. +
  2. O alvo da requisição, normalmente um {{glossary("URL")}}, ou o caminho absoluto do protocolo, porta e domínio são em geral caracterizados pelo contexto da requisição. O formato deste alvo varia conforme o método HTTP. Pode ser +
      +
    • Um caminho absoluto, seguido de um '?' e o texto da consulta. Esta é a forma mais comum, conhecida como a forma original, e é usada com os métodos GET, POST, HEAD, e OPTIONS.
      + POST / HTTP/1.1
      + GET /background.png HTTP/1.0
      + HEAD /test.html?query=alibaba HTTP/1.1
      + OPTIONS /anypage.html HTTP/1.0
      • +
    • Uma URL completa, conhecida como a forma absoluta, usada principalmente com GET quando conectado a um proxy.
      + GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
      • +
    • O componente autoridade de um URL, que consiste no nome do domínio e opcionalmente uma porta (prefixada por ':'), chamada de forma autoridade. Só usada com CONNECT ao estabelecer um túnel HTTP.
      + CONNECT developer.mozilla.org:80 HTTP/1.1
      • +
    • A  forma asterisco, um simples asterisco ('*'), usada com OPTIONS. Representa o servidor como um todo.
      + OPTIONS * HTTP/1.1
      • +
    +
    3. +
  3. A  versão HTTP, que define a estrutura do restante da mensagem, atuando como um indicador da versão esperada para uso na resposta.
    4. +
+ +

Cabeçalhos

+ +

Cabeçalhos HTTP de uma requisição seguem a mesma estrutura básica de um cabeçalho HTTP: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha, que pode ser bem grande.

+ +

Há numerosos cabeçalhos de requisição disponíveis. Eles podem ser divididos em vários grupos:

+ +
    +
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}},  se aplicam à mensagem como um todo.
    • +
  • Cabeçalhos de requisição, como {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, modificam a requisição, especificando-a mais (como {{HTTPHeader("Accept-Language")}}), dando-a contexto (como {{HTTPHeader("Referer")}}), ou restringindo-a condicionalmente (como {{HTTPHeader("If-None")}}).
    • +
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}} que se aplicam ao corpo da mensagem. Obviamente este cabeçalho não será transmitido se não houver corpo na requisição.
    • +
+ +

Example of headers in an HTTP request

+ +

Corpo

+ +

A parte final da requisição é o corpo. Nem todas as requisições tem um: as que pegam recursos, como GET, HEAD, DELETE, ou OPTIONS, usualmente não precisam de um. Algumas requisições enviam dados ao servidor a fim de atualizá-lo: é o caso frequente de requisições POST (contendo dados de formulário HTML).

+ +

Corpos podem ser divididos, a grosso modo, em duas categorias:

+ +
    +
  • Corpos de recurso-simples, consistindo em um único arquivo, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • +
  • Corpos de recurso-múltiplo, consistindo em um corpo de múltiplas partes, cada uma contendo uma porção diferente de informação. Este é tipicamente associado à Formulários HTML.
    • +
+ +

Respostas HTTP

+ +

Linha de status

+ +

A linha inicial de uma resposta HTTP, chamada de linha de status, contém a seguinte informação:

+ +
    +
  1. A versão do protocolo, normalmente HTTP/1.1.
    2. +
  2. Um código de status, indicando o sucesso ou falha da requisição. Códigos de status comuns são {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, ou {{HTTPStatus("302")}}
    3. +
  3. Um texto de status. Uma descrição textual breve, puramente informativa, do código de status a fim de auxiliar o entendimento da mensagem HTTP por humanos.
    4. +
+ +

Uma linha de status típica se parece com: HTTP/1.1 404 Not Found.

+ +

Cabeçalhos

+ +

Cabeçalhos HTTP para respostas seguem a mesma estrutura de qualquer outro cabeçalho: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do tipo de cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha.

+ +

Há numerosos cabeçalhos de resposta disponíveis. Eles podem ser divididos em vários grupos:

+ +
    +
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}}, aplicam-se à toda mensagem.
    • +
  • Cabeçalhos de resposta, como {{HTTPHeader("Vary")}} e {{HTTPHeader("Accept-Ranges")}}, dão informação adicional sobre o servidor, que não cabe na linha de status.
    • +
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}}, aplicam-se ao corpo da resposta. Obviamente este cabeçalho não será transmitido se não houver corpo na resposta.
    • +
+ +

Example of headers in an HTTP response

+ +

Corpo

+ +

A última parte de uma resposta é o corpo. Nem toda resposta tem um: aquelas com código de status {{HTTPStatus("201")}} ou {{HTTPStatus("204")}} normalmente não tem.

+ +

Corpos podem ser divididos, a grosso modo, em três categorias:

+ +
    +
  • Corpos de recurso simples que consistem em um único arquivo de tamanho conhecido, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • +
  • Corpos de recurso simples que consistem em um único arquivo de tamanho desconhecido, codificado aos pedaços com {{HTTPHeader("Transfer-Encoding")}} ajustado para chunked.
    • +
  • Corpos de recurso múltiplo, que consiste em um corpo com múltiplas partes, cada uma contendo diferentes seções de informação. Estes são relativamente raros.
    • +
+ +

Quadros HTTP/2

+ +

Mensagens HTTP/1.x têm algumas desvantagens quanto ao desempenho:

+ +
    +
  • Os cabeçalhos, ao contrário dos corpos, não são compactados.
    • +
  • Cabeçalhos com frequência são similares entre uma mensagem e a seguinte, ainda assim são repetidos entre conexões.
    • +
  • Nenhuma multiplexação pode ser feita. É necessário abrir várias conexões no mesmo servidor: e conexões TCP quentes são mais eficientes que frias.
    • +
+ +

HTTP/2 introduz um passo extra: ele divide mensagens HTTP/1.x em quadros que são embutidos em um fluxo. Quadros de dados e de cabeçalho são separados, isto permite a compressão do cabeçalho. Muitos fluxos podem ser conjugados, um processo chamado de multiplexação, permitindo mais eficiência nas conexões TCP subjacentes.

+ +

HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.

+ +
Connection
+ +

Quadros HTTP agora são transparentes aos desenvolvedores web. Isso é um passo adicional no HTTP/2, entre mensagens HTTP/1.1 e o protocolo de transporte subjacente. Nenhuma mudança é necessária nas API usadas pelo desenvolvedor web para utilizar quadros; quando disponível tanto no navegador quanto no servidor, HTTP/2 é ativado e usado.

+ +

Conclusão

+ +

Mensagens HTTP são a chave ao usar HTTP; sua estrutura é simples e elas são altamente extensíveis. O mecanismo de enquadramento do HTTP/2 adiciona uma nova camada intermediária entre a sintaxe HTTP/1.x e o protocolo de transporte subjacente, sem modificá-lo fundamentalmente: construído sobre mecanismos provados.

diff --git a/files/pt-br/web/http/redirecionamento/index.html b/files/pt-br/web/http/redirecionamento/index.html deleted file mode 100644 index c429ac82cb..0000000000 --- a/files/pt-br/web/http/redirecionamento/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Redirecionamentos em HTTP -slug: Web/HTTP/Redirecionamento -tags: - - Guía - - HTTP - - Redirecionamento -translation_of: Web/HTTP/Redirections ---- -
{{HTTPSidebar}}
- -

Redirecionamento de URL, também conhecido como encaminhamento de URL, é uma técnica que à uma página, formulário ou uma aplicação web inteira, mais de um endereço de URL. HTTP fornece uma espécie especial de respostas, HTTP redirects,  executar esta operação é utilizada para vários objetivos: redirecionamento temporário enquanto está sendo feita a manutenção do web site, redirecionamento permanente para manter links externos funcionando após alterações na arquitetura do web site, páginas de progresso enquanto é feito o envio de um arquivo, e assim por diante.

- -

Princípio

- -

Em HTTP, um redirecionamento é acionado pelo servidor enviando respostas especiais para uma solicitação: redirects. Os redirecionamentos HTTP são respostas com um código de status de 3xx. Um navegador, ao receber uma resposta de redirecionamento, usa o novo URL fornecido e carrega-o imediatamente: a maior parte do tempo, o redirecionamento é transparente para o usuário, além de um pequeno desempenho.

- -

- -

Existem vários tipos de redirecionamentos e eles se enquadram em três categorias: redirecionamentos permanentes, temporários e especiais.

- -

Redirecionamentos permanentes

- -

Estes redirecionamentos devem durar permanentemente. Eles implicam que o URL original não deve mais ser usado e que o novo é preferido. Os robôs dos mecanismos de pesquisa desencadeiam uma atualização do URL associado para o recurso em seus índices.

- - - - - - - - - - - - - - - - - - - - - - - - -
CodeTextMethod handlingTypical use case
301Movido permanentemente{{HTTPMethod("GET")}} métodos inalterados.
- Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[1]		Reorganização de um web site.
308Permanentemente redirecionadoMétodo e corpo não alteradosReorganização de um web site, com não-GET links/operações.
- -

[1]A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 308 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

- -

Redirecionamentos temporários

- -

Às vezes, o recurso solicitado não pode ser acessado a partir da sua localização canônica, mas pode ser acessado a partir de outro local. Neste caso, um redirecionamento temporário pode ser usado. Os robôs do mecanismo de busca não memorizam o novo e temporário link. Os redirecionamentos temporários também são usados ao criar, atualizar e excluir recursos para apresentar páginas de progresso temporárias.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeTextMethod handlingTypical use case
302Encontrado{{HTTPMethod("GET")}} métodos inalterados.
- Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[2]		A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links.
303Ver outro{{HTTPMethod("GET")}} Métodos inalterados.
- Outros alterados para GET (corpo perdido).		Usado para redirecionar após um {{HTTPMethod ("PUT")}} ou um {{HTTPMethod ("POST")}} para evitar uma atualização da página que reativaria a operação.
307Redirecionamento temporárioMétodo ou corpo não alteradosA página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. Melhor que 302 quando os links / operações não-GET estão disponíveis no site.
- -

[2] A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 307 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

- -

Redirecionamentos Especiais

- -

Além desses redirecionamentos usuais, existem dois redirecionamentos específicos. O {{HTTPStatus ("304")}} (Não Modificado) redireciona uma página para a cópia em cache local (que estava obsoleta) e {{HTTPStatus ("300")}} (Múltipla escolha) é um redirecionamento manual: o corpo, apresentado pelo navegador como uma página da Web, lista os possíveis redirecionamentos e o usuário clica em um para selecioná-lo.

- - - - - - - - - - - - - - - - - - - - - -
CodeTextTypical use case
300Múltipla EscolhaNão muitas: as opções estão listadas em uma página HTML no corpo. Poderia ser servido com um estado {{HTTPStatus ("200")}} OK.
304Não ModificadoAtualização de cache: isso indica que o valor do cache ainda é recente e pode ser usado.
- -

Alternative way of specifying redirections

- -

HTTP redirects aren't the only way to define redirections. There are two other methods: HTML redirections using the {{HTMLElement("meta")}} element, and JavaScript redirections using the DOM.

- -

HTML redirections

- -

HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the {{htmlattrxref("http-equiv", "meta")}} attribute set to refresh in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page.

- -
<head>
-  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
-</head>
-
- -

The {{htmlattrxref("content")}} attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to 0, for better accessibility.

- -

Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content.

- -
-

Note that these redirections break the back button in a browser: you can go back to a page with this header but it instantaneously moves forward again.

-
- -

JavaScript redirections

- -

Redirections in JavaScript are created by setting a value to the {{domxref("window.location")}} property and the new page is loaded.

- -
window.location = "http://www.example.com/";
- -

Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other side, there are more possibilities as you can trigger the redirection only if some conditions are met, for example.

- -

Order of precedence

- -

With three possibilities for URL redirections, several methods can be specified at the same time, but which one is applied first? The order of precedence is the following:

- -
    -
  1. HTTP redirects are always executed first when there is not even a page transmitted, and of course not even read.
    2. -
  2. HTML redirects ({{HTMLElement("meta")}}) are executed if there weren't any HTTP redirects.
    3. -
  3. JavaScript redirects are used as the last resort, and only if JavaScript is enabled on the client side.
    4. -
- -

When possible, always try to use HTTP redirects, and don't use a {{HTMLElement("meta")}} element. If a developer changes the HTTP redirects and forgets the HTML redirects, redirects are no more identical or end up in an infinite loop, or other nightmares happen.

- -

Use cases

- -

There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum.

- -

Domain aliasing

- -

Ideally, there is one location, and therefore one URL, for one resource. But there are reasons for wanting to have alternative names for a resource (several domains, like with and without the www prefix or shorter and easy to remember URLs, …). In these cases, rather than duplicating the resource, it is useful to use a redirect to the one true (canonical) URL.

- -

Domain aliasing can be done for several reasons:

- -
    -
  • Expanding the reach of your site. A common case is when your site resides under the www.example.com domain and accessing your pages from example.com should be possible, too. Redirections for example.com pages to www.example.com are set up in this case. You might also provide commonly used synonym names or frequent typos of your domain names.
    • -
  • Moving to a different domain. For example, your company has been renamed and you when searching for the old name, you want people used to the old company Web site still find you under the new name.
    • -
  • Forcing HTTPS. Requests to the HTTP version of your site will be redirected to the HTTPS version of your site.
    • -
- - - -

When you restructure Web sites, URLs of resources change. Even if you can update the internal links of your Web site to match the new naming scheme, you have no control over the URLs used by external resources. You don't want to break these links, as they bring you valuable users (and help your SEO), so you set up redirects from the old URLs to the new ones.

- -
-

Even if this technique also works for internal links, you should try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request is done) and if you can avoid it by correcting internal links, you should fix these links.

-
- -

Temporary responses to unsafe requests

- -

{{Glossary("safe", "Unsafe")}} requests modify the state of the server and the user shouldn't replay them inadvertently. Typically, you don't want your users to resend {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} or {{HTTPMethod("DELETE")}} requests. If you just serve the response as the result of this request, a simple press of the reload button will (possibly after a confirmation message), resend the request.

- -

In this case, the server can send back a {{HTTPStatus("303")}} (See Other) response that will contain the right information, but if the reload button is pressed, only this page is redisplayed, without replaying the unsafe requests.

- -

Temporary responses to long requests

- -

Some requests may need more time on the server like sometimes {{HTTPHeader("DELETE")}} requests that are scheduled for later processing. In this case, the response is a {{HTTPStatus("303")}} (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about the progress, or allows to cancel it.

- -

Configuring redirects in common servers

- -

Apache

- -

Redirects can be set either in the server config file or in the .htaccess of each directory.

- -

The mod_alias module has Redirect and Redirect_Match directives that set up a {{HTTPStatus("302")}} response (by default):

- -
<VirtualHost *:80>
-	ServerName example.com
-	Redirect / http://www.example.com
-</VirtualHost>
-
- -

The URL http://example.com/ will be redirected to http://www.example.com/ (but not http://example.com/other.html )

- -

Redirect_Match does the same but takes a regular expression to define a collection of URLs that are affected:

- -
RedirectMatch ^/images/(.*)$ http://images.example.com/$1
- -

All documents in the images/ folder will be redirected to a different domain.

- -

If you don't want to set up a temporary redirect, an extra parameter (either the HTTP status code to use or the permanent keyword) can be used to set up a different redirect:

- -
Redirect permanent / http://www.example.com
-Redirect 301 / http://www.example.com
-
- -

The mod_rewrite module can also be used to create redirects. It is more flexible, but a bit more complex to use.

- -

Nginx

- -

In Nginx, you create a specific server block for the content you want to redirect:

- -
server {
-	listen 80;
-	server_name example.com;
-	return 301 $scheme://www.example.com$request_uri;
-}
- -

To apply a redirect to a folder or a subset of the pages only, use the rewrite directive:

- -
rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
-rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
-
- -

IIS

- -

In IIS, you use the <httpRedirect> element to configure redirections.

- -

Redirection loops

- -

Redirection loops happen when successive redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will be found ultimately.

- -

Most of the time this is a server problem, and if the server cannot detect it, it will send back a {{HTTPStatus("500")}} Internal Server Error. If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop.

- -

Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and post an error message. Firefox will display:

- -
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
- -

while Chrome will display:

- -
This Webpage has a redirect loop
- -

In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies).

- -

It is important to avoid redirection loops as they completely break the user experience.

diff --git a/files/pt-br/web/http/redirections/index.html b/files/pt-br/web/http/redirections/index.html new file mode 100644 index 0000000000..c429ac82cb --- /dev/null +++ b/files/pt-br/web/http/redirections/index.html @@ -0,0 +1,260 @@ +--- +title: Redirecionamentos em HTTP +slug: Web/HTTP/Redirecionamento +tags: + - Guía + - HTTP + - Redirecionamento +translation_of: Web/HTTP/Redirections +--- +
{{HTTPSidebar}}
+ +

Redirecionamento de URL, também conhecido como encaminhamento de URL, é uma técnica que à uma página, formulário ou uma aplicação web inteira, mais de um endereço de URL. HTTP fornece uma espécie especial de respostas, HTTP redirects,  executar esta operação é utilizada para vários objetivos: redirecionamento temporário enquanto está sendo feita a manutenção do web site, redirecionamento permanente para manter links externos funcionando após alterações na arquitetura do web site, páginas de progresso enquanto é feito o envio de um arquivo, e assim por diante.

+ +

Princípio

+ +

Em HTTP, um redirecionamento é acionado pelo servidor enviando respostas especiais para uma solicitação: redirects. Os redirecionamentos HTTP são respostas com um código de status de 3xx. Um navegador, ao receber uma resposta de redirecionamento, usa o novo URL fornecido e carrega-o imediatamente: a maior parte do tempo, o redirecionamento é transparente para o usuário, além de um pequeno desempenho.

+ +

+ +

Existem vários tipos de redirecionamentos e eles se enquadram em três categorias: redirecionamentos permanentes, temporários e especiais.

+ +

Redirecionamentos permanentes

+ +

Estes redirecionamentos devem durar permanentemente. Eles implicam que o URL original não deve mais ser usado e que o novo é preferido. Os robôs dos mecanismos de pesquisa desencadeiam uma atualização do URL associado para o recurso em seus índices.

+ + + + + + + + + + + + + + + + + + + + + + + + +
CodeTextMethod handlingTypical use case
301Movido permanentemente{{HTTPMethod("GET")}} métodos inalterados.
+ Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[1]		Reorganização de um web site.
308Permanentemente redirecionadoMétodo e corpo não alteradosReorganização de um web site, com não-GET links/operações.
+ +

[1]A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 308 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

+ +

Redirecionamentos temporários

+ +

Às vezes, o recurso solicitado não pode ser acessado a partir da sua localização canônica, mas pode ser acessado a partir de outro local. Neste caso, um redirecionamento temporário pode ser usado. Os robôs do mecanismo de busca não memorizam o novo e temporário link. Os redirecionamentos temporários também são usados ao criar, atualizar e excluir recursos para apresentar páginas de progresso temporárias.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeTextMethod handlingTypical use case
302Encontrado{{HTTPMethod("GET")}} métodos inalterados.
+ Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[2]		A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links.
303Ver outro{{HTTPMethod("GET")}} Métodos inalterados.
+ Outros alterados para GET (corpo perdido).		Usado para redirecionar após um {{HTTPMethod ("PUT")}} ou um {{HTTPMethod ("POST")}} para evitar uma atualização da página que reativaria a operação.
307Redirecionamento temporárioMétodo ou corpo não alteradosA página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. Melhor que 302 quando os links / operações não-GET estão disponíveis no site.
+ +

[2] A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 307 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

+ +

Redirecionamentos Especiais

+ +

Além desses redirecionamentos usuais, existem dois redirecionamentos específicos. O {{HTTPStatus ("304")}} (Não Modificado) redireciona uma página para a cópia em cache local (que estava obsoleta) e {{HTTPStatus ("300")}} (Múltipla escolha) é um redirecionamento manual: o corpo, apresentado pelo navegador como uma página da Web, lista os possíveis redirecionamentos e o usuário clica em um para selecioná-lo.

+ + + + + + + + + + + + + + + + + + + + + +
CodeTextTypical use case
300Múltipla EscolhaNão muitas: as opções estão listadas em uma página HTML no corpo. Poderia ser servido com um estado {{HTTPStatus ("200")}} OK.
304Não ModificadoAtualização de cache: isso indica que o valor do cache ainda é recente e pode ser usado.
+ +

Alternative way of specifying redirections

+ +

HTTP redirects aren't the only way to define redirections. There are two other methods: HTML redirections using the {{HTMLElement("meta")}} element, and JavaScript redirections using the DOM.

+ +

HTML redirections

+ +

HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the {{htmlattrxref("http-equiv", "meta")}} attribute set to refresh in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page.

+ +
<head>
+  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
+</head>
+
+ +

The {{htmlattrxref("content")}} attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to 0, for better accessibility.

+ +

Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content.

+ +
+

Note that these redirections break the back button in a browser: you can go back to a page with this header but it instantaneously moves forward again.

+
+ +

JavaScript redirections

+ +

Redirections in JavaScript are created by setting a value to the {{domxref("window.location")}} property and the new page is loaded.

+ +
window.location = "http://www.example.com/";
+ +

Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other side, there are more possibilities as you can trigger the redirection only if some conditions are met, for example.

+ +

Order of precedence

+ +

With three possibilities for URL redirections, several methods can be specified at the same time, but which one is applied first? The order of precedence is the following:

+ +
    +
  1. HTTP redirects are always executed first when there is not even a page transmitted, and of course not even read.
    2. +
  2. HTML redirects ({{HTMLElement("meta")}}) are executed if there weren't any HTTP redirects.
    3. +
  3. JavaScript redirects are used as the last resort, and only if JavaScript is enabled on the client side.
    4. +
+ +

When possible, always try to use HTTP redirects, and don't use a {{HTMLElement("meta")}} element. If a developer changes the HTTP redirects and forgets the HTML redirects, redirects are no more identical or end up in an infinite loop, or other nightmares happen.

+ +

Use cases

+ +

There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum.

+ +

Domain aliasing

+ +

Ideally, there is one location, and therefore one URL, for one resource. But there are reasons for wanting to have alternative names for a resource (several domains, like with and without the www prefix or shorter and easy to remember URLs, …). In these cases, rather than duplicating the resource, it is useful to use a redirect to the one true (canonical) URL.

+ +

Domain aliasing can be done for several reasons:

+ +
    +
  • Expanding the reach of your site. A common case is when your site resides under the www.example.com domain and accessing your pages from example.com should be possible, too. Redirections for example.com pages to www.example.com are set up in this case. You might also provide commonly used synonym names or frequent typos of your domain names.
    • +
  • Moving to a different domain. For example, your company has been renamed and you when searching for the old name, you want people used to the old company Web site still find you under the new name.
    • +
  • Forcing HTTPS. Requests to the HTTP version of your site will be redirected to the HTTPS version of your site.
    • +
+ + + +

When you restructure Web sites, URLs of resources change. Even if you can update the internal links of your Web site to match the new naming scheme, you have no control over the URLs used by external resources. You don't want to break these links, as they bring you valuable users (and help your SEO), so you set up redirects from the old URLs to the new ones.

+ +
+

Even if this technique also works for internal links, you should try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request is done) and if you can avoid it by correcting internal links, you should fix these links.

+
+ +

Temporary responses to unsafe requests

+ +

{{Glossary("safe", "Unsafe")}} requests modify the state of the server and the user shouldn't replay them inadvertently. Typically, you don't want your users to resend {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} or {{HTTPMethod("DELETE")}} requests. If you just serve the response as the result of this request, a simple press of the reload button will (possibly after a confirmation message), resend the request.

+ +

In this case, the server can send back a {{HTTPStatus("303")}} (See Other) response that will contain the right information, but if the reload button is pressed, only this page is redisplayed, without replaying the unsafe requests.

+ +

Temporary responses to long requests

+ +

Some requests may need more time on the server like sometimes {{HTTPHeader("DELETE")}} requests that are scheduled for later processing. In this case, the response is a {{HTTPStatus("303")}} (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about the progress, or allows to cancel it.

+ +

Configuring redirects in common servers

+ +

Apache

+ +

Redirects can be set either in the server config file or in the .htaccess of each directory.

+ +

The mod_alias module has Redirect and Redirect_Match directives that set up a {{HTTPStatus("302")}} response (by default):

+ +
<VirtualHost *:80>
+	ServerName example.com
+	Redirect / http://www.example.com
+</VirtualHost>
+
+ +

The URL http://example.com/ will be redirected to http://www.example.com/ (but not http://example.com/other.html )

+ +

Redirect_Match does the same but takes a regular expression to define a collection of URLs that are affected:

+ +
RedirectMatch ^/images/(.*)$ http://images.example.com/$1
+ +

All documents in the images/ folder will be redirected to a different domain.

+ +

If you don't want to set up a temporary redirect, an extra parameter (either the HTTP status code to use or the permanent keyword) can be used to set up a different redirect:

+ +
Redirect permanent / http://www.example.com
+Redirect 301 / http://www.example.com
+
+ +

The mod_rewrite module can also be used to create redirects. It is more flexible, but a bit more complex to use.

+ +

Nginx

+ +

In Nginx, you create a specific server block for the content you want to redirect:

+ +
server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}
+ +

To apply a redirect to a folder or a subset of the pages only, use the rewrite directive:

+ +
rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
+
+ +

IIS

+ +

In IIS, you use the <httpRedirect> element to configure redirections.

+ +

Redirection loops

+ +

Redirection loops happen when successive redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will be found ultimately.

+ +

Most of the time this is a server problem, and if the server cannot detect it, it will send back a {{HTTPStatus("500")}} Internal Server Error. If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop.

+ +

Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and post an error message. Firefox will display:

+ +
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
+ +

while Chrome will display:

+ +
This Webpage has a redirect loop
+ +

In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies).

+ +

It is important to avoid redirection loops as they completely break the user experience.

diff --git a/files/pt-br/web/http/server-side_access_control/index.html b/files/pt-br/web/http/server-side_access_control/index.html deleted file mode 100644 index b1cb255383..0000000000 --- a/files/pt-br/web/http/server-side_access_control/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Controle de Acesso do lado do servidor (CORS) -slug: Web/HTTP/Server-Side_Access_Control -translation_of: Web/HTTP/CORS -translation_of_original: Web/HTTP/Server-Side_Access_Control ---- -

Os sistemas de controle de acesso realizam   identificação de autorização ,  autenticação , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo  senhas , números de identificação pessoal (PINs),   varreduras biométricas e chaves físicas ou eletrônicas.

- -

O controle de acesso é uma técnica de segurança que pode ser usada para regular quem ou o que pode exibir ou usar recursos em um ambiente de computação.

- -

{{HTTPSidebar}}

- -

Os navegadores enviam Cabeçalhos HTTP específicos para solicitações entre sites iniciadas de dentro XMLHttpRequest ou da Fetch Api . Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. Uma visão geral desses cabeçalhos, incluindo amostra de código JavaScript que inicia solicitações e processa respostas do servidor, além de uma discussão sobre cada cabeçalho, pode ser encontrada no artigo HTTP Access Control (CORS) article e deve ser lida como um artigo complementar para este. Este artigo aborda o processamento de solicitações de controle de acesso e a formulação de respostas de controle de acessoem PHP. O público-alvo deste artigo são programadores ou administradores de servidores. Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; em geral, esses conceitos podem ser aplicados a qualquer ambiente de programação do servidor que processa solicitações HTTP e formula dinamicamente respostas HTTP.

- -

Discussão de cabeçalhos HTTP

- -

O artigo que cobre os cabeçalhos HTTP usados por clientes e servidores deve ser considerado leitura de pré-requisito.

- -

Amostras de código de trabalho

- -

Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das amostras de código de trabalho postadas aqui. Eles funcionarão em navegadores que implementam sites cruzados {{domxref("XMLHttpRequest")}}.

- -

Solicitações simples entre sites

- -

Solicitações simples de controle de acesso são iniciadas quando:

- -
    -
  • Um HTTP / 1.1 GET ou a POST é usado como método de solicitação. No caso de um POST, o Content-Type do corpo do pedido é uma de application/x-www-form-urlencoded, multipart/form-dataoutext/plain.
    • -
  • Nenhum cabeçalho personalizado é enviado com a solicitação HTTP (como X-Modified, etc.)
    • -
- -

Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.

- -
    -
  • Se o recurso em questão for amplamente acessado (como qualquer recurso HTTP acessado pelo GET), o envio do cabeçalho será suficiente, a menos que o recurso precise de credenciais, como informações de autenticação de cookies e HTTP. Access-Control-Allow-Origin: *
    • -
  • Se o recurso deve ser mantido restrito com base no domínio do solicitante, OU se o recurso precisar ser acessado com credenciais (ou define credenciais), Origin pode ser necessário filtrar pelo cabeçalho da solicitação ou, pelo menos, repetir o retorno do solicitante Origin ( por exemplo ). Além disso, o cabeçalho deverá ser enviado. Isso é discutido em uma seção subsequente . Access-Control-Allow-Origin: http://arunranga.com Access-Control-Allow-Credentials: true
    • -
- -

A seção Solicitações de controle de acesso simples mostra as trocas de cabeçalho entre cliente e servidor. Aqui está um segmento de código PHP que lida com uma solicitação simples:

- -
<?php
-
-// Consideremos acesso apenas ao domínio arunranga.com
-// Que achamos seguro acessar esse recurso como aplicattion / xml
-
-if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-type: application/xml');
-    readfile('arunerDotNetResource.xml');
-} else {
-  header('Content-Type: text/html');
-  echo "<html>";
-  echo "<head>";
-  echo "   <title>Another Resource</title>";
-  echo "</head>";
-  echo "<body>",
-       "<p>This resource behaves two-fold:";
-  echo "<ul>",
-         "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>";
-  echo   "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
-  echo   "you get this HTML document</li>",
-       "</ul>",
-     "</body>",
-   "</html>";
-}
-?>
-
- -

O Origin item acima verifica se o cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' http://arunranga.com '. Se sim, ele retorna . Este exemplo pode ser visto em execução aqui . Access-Control-Allow-Origin: http://arunranga.com

- -

Solicitações comprovadas

- -

Solicitações de controle de acesso comprovadas ocorrem quando:

- -
    -
  • Um outro método que não GET ou POSTé utilizado, ou se POST é usado com um {{HTTPHeader("Content-Type")}} diferente de um application/x-www-form-urlencoded, multipart/form-data ou text/plain. Por exemplo, se o Tipo de Conteúdo do corpo POST for application / xml, uma solicitação será comprovada.
    • -
  • Um cabeçalho personalizado (como X-PINGARUNER) é enviado com a solicitação.
    • -
- -

A seção Solicitações de controle de acesso comprovado mostra uma troca de cabeçalho entre cliente e servidor. Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:

- - - -

Aqui está um exemplo no PHP de manipulação de uma solicitação preflighted :

- -
<?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-
-  header('Content-Type: text/plain');
-  echo "This HTTP resource is designed to handle POSTed XML input";
-  echo "from arunranga.com and not be retrieved with GET";
-
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que apoiamos arunranga.com
-  // e que esse comprovante seja válido por 20 dias
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
-    header('Access-Control-Allow-Headers: X-PINGARUNER');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-    //exit(0);
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-
-} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
-  //  Manipula o post primeiro obtendo o blob XML POST
-  // e, em seguida, fazendo algo e enviando resultados para o cliente
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    $postData = file_get_contents('php://input');
-    $document = simplexml_load_string($postData);
-
-    // Faça algo com os dados POST
-
-    $ping = $_SERVER['HTTP_X_PINGARUNER'];
-
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-Type: text/plain');
-    echo // some string response after processing
-  } else {
-    die("POSTing Only Allowed from arunranga.com");
-  }
-} else {
-    die("No Other Methods Allowed");
-}
-?>
-
- -

Observe os cabeçalhos apropriados sendo enviados de volta em resposta à OPTIONS comprovação, bem como aos POST dados. Um recurso lida com a comprovação e com a solicitação real. Na resposta à OPTIONS solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o POST método e campos de cabeçalho como X-PINGARUNERpodem ser enviados com a solicitação real. Este exemplo pode ser visto em execução aqui .

- -

Solicitações credenciadas

- -

Solicitações de controle de acesso credenciadas - ou seja, solicitações acompanhadas de informações sobre cookies ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser simples ou comprovadas , dependendo dos métodos de solicitação utilizados.

- -

Em um cenário de solicitação simples , a solicitação será enviada com cookies (por exemplo, se o withCredentials sinalizador estiver ativado XMLHttpRequest). Se o servidor responder com anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. Em uma solicitação comprovada , Se o servidor responder com Access-Control-Allow-Credentials: true anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da Web. Em uma Solicitação Comprovada, o servidor pode responder com Acesso-Controle-Permitir Credenciais: true à solicitação OPTIONS.

- -

Aqui está um PHP que lida com solicitações credenciadas:

- -
<?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-  header('Access-Control-Allow-Origin: http://arunranga.com');
-  header('Access-Control-Allow-Credentials: true');
-  header('Cache-Control: no-cache');
-  header('Pragma: no-cache');
-  header('Content-Type: text/plain');
-
-  // Primeiro, veja se existe um cookie
-  if (!isset($_COOKIE["pageAccess"])) {
-    setcookie("pageAccess", 1, time()+2592000);
-    echo 'I do not know you or anyone like you so I am going to';
-    echo 'mark you with a Cookie :-)';
-  } else {
-    $accesses = $_COOKIE['pageAccess'];
-    setcookie('pageAccess', ++$accesses, time()+2592000);
-    echo 'Hello -- I know you or something a lot like you!';
-    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
-    echo 'at least ', $accesses-1, ' time(s) before!';
-  }
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que esse comprovante permanece válido por apenas 20 dias
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: GET, OPTIONS');
-    header('Access-Control-Allow-Credentials: true');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-} else {
-  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
-}
-?>
-
- -

Observe que, no caso de solicitações credenciadas, o Access-Control-Allow-Origin: cabeçalho não deve ter um valor curinga de "*". Ele deve mencionar um domínio de origem válido. O exemplo acima pode ser visto em execução aqui .

- -

Exemplos do Apache

- -

Restringir o acesso a determinados URIs

- -

Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar Access-Control-Allow-*a determinados URIs. Isso é útil, por exemplo, para restringir solicitações de origem cruzada a GET /api(.*).jsonsolicitações sem credenciais:

- -
RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
-Header set Access-Control-Allow-Origin "*" env=CORS
-Header set Access-Control-Allow-Methods "GET" env=CORS
-Header set Access-Control-Allow-Credentials "false" env=CORS
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/closures/index.html b/files/pt-br/web/javascript/closures/index.html new file mode 100644 index 0000000000..efc7578d7d --- /dev/null +++ b/files/pt-br/web/javascript/closures/index.html @@ -0,0 +1,336 @@ +--- +title: Closures +slug: Web/JavaScript/Guide/Closures +tags: + - Closure + - ES5 + - Intermediário + - JavaScript + - Referencia +translation_of: Web/JavaScript/Closures +--- +
{{jsSidebar("Intermediate")}}
+ +

Um closure (fechamento) é uma função que se "lembra" do ambiente — ou escopo léxico — em que ela foi criada.

+ +

Escopo léxico

+ +

Considere a função abaixo:

+ +
+
function init() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  displayName();
+}
+init();
+
+
+ +

A função init() cria uma variável local chamada name, e depois define uma função chamada displayName(). displayName() é uma função aninhada (um closure) — ela é definida dentro da função init(), e está disponivel apenas dentro do corpo daquela função. Diferente de init(), displayName() não tem variáveis locais próprias, e ao invés disso reusa a variável name declarada na função pai.

+ +

Rode o código e veja que isso funciona. Este é um exemplo de escopo léxico: em JavaScript, o escopo de uma variável é definido por sua localização dentro do código fonte (isto é aparentemente léxico) e funções aninhadas têm acesso às variáveis declaradas em seu escopo externo.

+ +

Closure

+ +

Agora considere o seguinte exemplo:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

Se você rodar este código o mesmo terá exatamente o mesmo efeito que o init() do exemplo anterior: a palavra "Mozilla" será mostrada na caixa de alerta. O que é diferente - e interessante - é o fato de que a função interna do displayName() foi retornada da função externa antes de ser executada.

+ +

Pode parecer não muito intuitivo de que o código de fato funciona. Normalmente variáveis locais a uma função apenas existem pela duração da execução da mesma. Uma vez que makeFunc() terminou de executar, é razoável esperar que a variável name não será mais necessária. Dado que o código ainda funciona como o esperado, este não é o caso.

+ +

A solução para tal problema é que a função myFunc tornou-se uma closure. Uma closure (fechamento) trata-se de um tipo especial de objeto que combina duas coisas: a função e o ambiente onde a função foi criada. Este ambiente consiste de quaisquer variáveis que estavam no escopo naquele momento em que a função foi criada. Neste caso, myFunc é a closure que incorpora tanto a função displayName quanto a palavra Mozilla que existia quando a closure foi criada.

+ +

Aqui temos um exemplo um pouco mais interessante, a função makeAdder:

+ +
function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+print(add5(2));  // 7
+print(add10(2)); // 12
+
+ +

Neste exemplo definimos a função makeAdder(x) que toma um único argumento x e retorna uma nova função. A função retornada toma então um único argumento, y, e retorna então a soma de x e de y.

+ +

Na essência o makeAdder trata-se de uma função fábrica - irá construir outras funções que podem adicionar um determinado valor específico a seu argumento. No exemplo acima usamos a fábrica de funções para criar duas novas funções - uma que adiciona 5 ao argumento, e outra que adiciona 10.

+ +

Ambas as funções add5 e add10 são closures. Compartilham o mesmo corpo de definição de função mas armazenam diferentes ambientes. No ambiente da add5, por exemplo, x equivale a 5, enquanto na add10 o valor de x é 10.

+ +

Closures na prática

+ +

Esta é a teoria — mas closures são realmente úteis? Vamos considerar suas aplicações práticas. Uma closure deixa você associar dados (do ambiente) com uma função que trabalha estes dados. Isto está diretamente ligado com programação orientada a objetos, onde objetos nos permitem associar dados (as propriedades do objeto) utilizando um ou mais métodos.

+ +

Consequentemente, você pode utilizar uma closure em qualquer lugar onde você normalmente utilizaria um objeto de único método.

+ +

Situações onde você poderia utilizar isto são comuns em ambientes web. Muitos códigos escritos em JavaScript para web são baseados em eventos - nós definimos algum comportamento e então, o atribuimos a um evento que será disparado pelo usuário (quando uma tecla for pressionada, por exemplo). Nosso código normalmente é utilizado como callback: uma função que será executada como resposta ao evento.

+ +

Aqui temos um exemplo prático: suponha que queremos adicionar alguns botões para ajustar o tamanho do texto de uma página. Um jeito de fazer seria especificar o tamanho da fonte no elemento body e então definir o tamanho dos outros elementos da página (os cabeçalhos, por exemplo) utilizando a unidade relativa em:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Nossos botões interativos de tamanho de texto podem alterar a propriedade font-size do elemento body, e os ajustes serão refletidos em outros elementos graças à unidade relativa.

+ +

O código JavaScript:

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

size12, size14 e size16 agora são funções que devem redimensionar o texto do elemento body para 12, 14 e 16 pixels respectivamente. Nós podemos designá-las a botões (neste caso, links) como feito a seguir:

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

View on JSFiddle

+ +

Emulando métodos privados com closures

+ +

Linguagens como Java oferecem a habilidade de declarar métodos privados, o que significa que eles só poderão ser chamados por outros métodos na mesma classe.

+ +

O JavaScript não oferece uma maneira nativa de fazer isso, mas é possível emular métodos privados usando closures. Métodos privados não são somente úteis para restringir acesso ao código: eles também oferecem uma maneira eficaz de gerenciar seu namespace global, evitando que métodos não essenciais baguncem a interface pública do seu código.

+ +

Veja como definir algumas funções públicas que acessam funções e variáveis privadas, usando closures que também é conhecido como module pattern:

+ +
var Counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+})();
+
+alert(Counter.value()); /* Alerts 0 */
+Counter.increment();
+Counter.increment();
+alert(Counter.value()); /* Alerts 2 */
+Counter.decrement();
+alert(Counter.value()); /* Alerts 1 */
+
+ +

Tem muita coisa acontecendo aqui. Nos exemplos anteriores cada closure teve o seu próprio ambiente; aqui nós criamos um ambiente único que é compartilhado por três funções: Counter.increment, Counter.decrement e Counter.value.

+ +

O ambiente compartilhado é criado no corpo de uma função anônima, da qual é executada assim que é definida. O ambiente contém dois itens privados: uma variável chamada privateCounter e uma função chamada changeBy. Nenhum desses itens privados podem ser acessados diretamente de fora da função anônima. Ao invés disso, eles devem ser acessados pelas três funções públicas que são retornadas.

+ +

Aquelas três funções públicas são closures que compartilham o mesmo ambiente. Graças ao escopo léxico do JavaScript, cada uma delas tem acesso a variável privateCounter e à função changeBy.

+ +
+

Você perceberá que estamos definindo uma função anônima que cria um contador , e então o executamos imediatamente e atribuímos o resultado à variável Counter. Poderíamos armazenar essa função em uma variável separada e usá-la para criar diversos contadores.

+
+ +
var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var Counter1 = makeCounter();
+var Counter2 = makeCounter();
+alert(Counter1.value()); /* Alerts 0 */
+Counter1.increment();
+Counter1.increment();
+alert(Counter1.value()); /* Alerts 2 */
+Counter1.decrement();
+alert(Counter1.value()); /* Alerts 1 */
+alert(Counter2.value()); /* Alerts 0 */
+
+ +

Observe como cada um dos contadores mantém a sua independência em relação ao outro. Seu ambiente durante a execução da função makeCounter() é diferente a cada vez que ocorre. A variável privateCounter contém uma instância diferente a cada vez.

+ +
+

Usar closures desta maneira oferece uma série de benefícios que estão normalmente associados a programação orientada a objetos, em particular encapsulamento e ocultação de dados.

+
+ +
+
+ +

Criando closures dentro de loops: Um erro comum

+ +

Antes da introdução da palavra chave let no JavaScript 1.7, um problema comum ocorria com closures quando eram criadas dentro de um loop. Considere o exemplo:

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

View on JSFiddle

+ +

O array helpText define três dicas úteis, cada uma associada ao ID de um input no documento. O loop percorre essas definições, atrelando um evento onfocus para cada um que mostra o método de ajuda associado.

+ +

Se você tentar executar esse código, Você verá que não vai funcionar como esperado. Não importa em qual campo ocorre o focus, a mensagem sobre a sua idade será mostrada.

+ +

O motivo disto é que as funções atreladas ao onfocus são closures; elas consistem na definição da função e do ambiente capturado do escopo da função setupHelp. Três closures foram criados, mas todos eles compartilham o mesmo ambiente. No momento em que os callbacks do onfocus são executados, o loop segue seu curso e então a variável item (compartilhada por todos os três closures) fica apontando para a última entrada na lista helpText.

+ +

Uma solução seria neste caso usar mais closures: em particular, usar uma fábrica de funções como descrito anteriormente:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

View on JSFiddle

+ +

Isto funciona conforme o esperado. Ao invés dos callbacks compartilharem o mesmo ambiente, a função makeHelpCallback cria um novo ambiente para cada um no qual help se refere à string correspondente do array helpText.

+ +

Considerações de performance

+ +

Não é sábio criar funções dentro de outras funções se o closure não for necessário para uma tarefa em particular, pois ele afetará a performance do script de forma bem negativa tanto em velocidade de processamento quanto em consumo de memória.

+ +

Por exemplo, ao criar uma nova classe/objeto, os métodos devem normalmente estar associados ao protótipo do objeto do que definido no construtor. O motivo disso é que sempre que o construtor for chamado os métodos serão reatribuídos (isto é, para cada criação de objeto).

+ +

Considere o seguinte exemplo pouco prático porém demonstrativo:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

O código anterior não aproveita os benefícios dos closures e portanto poderia ser reformulado assim:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

Ou assim:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+
+ +

Nos dois exemplos anteriores, o protótipo herdado pode ser compartilhado por todos os objetos, e as definições de métodos não precisam ocorrer sempre que o objeto for criado. Veja Detalhes do modelo de objeto para mais detalhes.

diff --git a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html b/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html deleted file mode 100644 index 3d7feb0bd4..0000000000 --- a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: Enumerabilidade e posse de propriedades -slug: Web/JavaScript/Enumerabilidade_e_posse_de_propriedades -tags: - - JavaScript -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -
{{JsSidebar("Mais")}}
- -

-Propriedades enumeráveis são aquelas propriedades cuja flag interna [[Enumerable]] é verdadeira (true), que é o padrão para propriedades criadas via assinatura simples ou através de um inicializador (propriedades definidas através de  Object.defineProperty e tipo padrão [[Enumerable]] falso (false)).
- -
 
- -
Propriedades enumeráveis aparecem em for...in loops exceto se o nome da propriedade for um objeto Symbol. Posse de propriedades é determinada pelo fato da propriedade pertencer ao objeto diretamente e não a uma cadeira de protótipos. Propriedades de um objeto pode também ser recuperadas diretamente. Há um número de built-in de detecção, iteração/enumeração e recuperação de propriedades,  com o gráfico mostrando que estão disponíveis. 
- -
 
- -
O código de exemplo a seguir demostra como obter as categorias que faltam.
- -
 
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriedade de enumerabilidade e posse - métodos internos de detecção, recuperação, e iteração
FuncionalidadePróprio objeto -

Próprio objeto e sua cadeia de caracteres

- 		Somente cadeia de protótipos
Detecção - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
propertyIsEnumerablehasOwnProperty e não propertyIsEnumerablehasOwnProperty
- 		Não disponível sem código extraNão disponível sem código extra
Recuperação - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
Object.keysgetOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerablegetOwnPropertyNames
- 		Não disponível sem código extraNão disponível sem código extra
Iteração - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
Iterar Object.keys -

itera getOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerable

- 		iterar getOwnPropertyNames
- 		- - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
for..inNão disponível sem código extraNão disponível sem código extra
- 		Não disponível sem código extra
- -

Obtendo propriedades por enumerabilidade/posse

- -

 

- -

Note que não é o algoritmo mais eficiente para todos os casos, mas útil para uma demonstração rápida.

- -
    -
  • Detecção pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • -
  • Iteração pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (ou use filter(), map(), etc.)
    • -
- -
var SimplePropertyRetriever = {
-    getOwnEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // Ou poderia usar for..in filtrado com hasOwnProperty ou apenas isto: return Object.keys(obj);
-    },
-    getOwnNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // Ou apenas use: return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // Ou poderia usar filtrado for..in
-    },
-    getOwnAndPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Private static property checker callbacks
-    _enumerable : function (obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable : function (obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable : function (obj, prop) {
-        return true;
-    },
-    // Inspirado por http://stackoverflow.com/a/8024294/271577
-    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function (prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};
- -

Tabela de Detecção

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 infor..inhasOwnPropertypropertyIsEnumerablein Object.keysin Object.getOwnPropertyNamesin Object.getOwnPropertyDescriptors
Enumeráveltruetruetruetruetruetruetrue
Não enumeráveltruefalsetruefalsefalsetruetrue
Inherited Enumerabletruetruefalsefalsefalsefalsefalse
Inherited Nonenumerabletruefalsefalsefalsefalsefalsefalse
Account for Symbols keystruefalsetruetruefalsefalsetrue
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..3d7feb0bd4 --- /dev/null +++ b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,280 @@ +--- +title: Enumerabilidade e posse de propriedades +slug: Web/JavaScript/Enumerabilidade_e_posse_de_propriedades +tags: + - JavaScript +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("Mais")}}
+ +

+Propriedades enumeráveis são aquelas propriedades cuja flag interna [[Enumerable]] é verdadeira (true), que é o padrão para propriedades criadas via assinatura simples ou através de um inicializador (propriedades definidas através de  Object.defineProperty e tipo padrão [[Enumerable]] falso (false)).
+ +
 
+ +
Propriedades enumeráveis aparecem em for...in loops exceto se o nome da propriedade for um objeto Symbol. Posse de propriedades é determinada pelo fato da propriedade pertencer ao objeto diretamente e não a uma cadeira de protótipos. Propriedades de um objeto pode também ser recuperadas diretamente. Há um número de built-in de detecção, iteração/enumeração e recuperação de propriedades,  com o gráfico mostrando que estão disponíveis. 
+ +
 
+ +
O código de exemplo a seguir demostra como obter as categorias que faltam.
+ +
 
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriedade de enumerabilidade e posse - métodos internos de detecção, recuperação, e iteração
FuncionalidadePróprio objeto +

Próprio objeto e sua cadeia de caracteres

+ 		Somente cadeia de protótipos
Detecção + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
propertyIsEnumerablehasOwnProperty e não propertyIsEnumerablehasOwnProperty
+ 		Não disponível sem código extraNão disponível sem código extra
Recuperação + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
Object.keysgetOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerablegetOwnPropertyNames
+ 		Não disponível sem código extraNão disponível sem código extra
Iteração + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
Iterar Object.keys +

itera getOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerable

+ 		iterar getOwnPropertyNames
+ 		+ + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
for..inNão disponível sem código extraNão disponível sem código extra
+ 		Não disponível sem código extra
+ +

Obtendo propriedades por enumerabilidade/posse

+ +

 

+ +

Note que não é o algoritmo mais eficiente para todos os casos, mas útil para uma demonstração rápida.

+ +
    +
  • Detecção pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • +
  • Iteração pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (ou use filter(), map(), etc.)
    • +
+ +
var SimplePropertyRetriever = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Ou poderia usar for..in filtrado com hasOwnProperty ou apenas isto: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Ou apenas use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Ou poderia usar filtrado for..in
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspirado por http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Tabela de Detecção

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 infor..inhasOwnPropertypropertyIsEnumerablein Object.keysin Object.getOwnPropertyNamesin Object.getOwnPropertyDescriptors
Enumeráveltruetruetruetruetruetruetrue
Não enumeráveltruefalsetruefalsefalsetruetrue
Inherited Enumerabletruetruefalsefalsefalsefalsefalse
Inherited Nonenumerabletruefalsefalsefalsefalsefalsefalse
Account for Symbols keystruefalsetruetruefalsefalsetrue
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/guide/closures/index.html b/files/pt-br/web/javascript/guide/closures/index.html deleted file mode 100644 index efc7578d7d..0000000000 --- a/files/pt-br/web/javascript/guide/closures/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Closures -slug: Web/JavaScript/Guide/Closures -tags: - - Closure - - ES5 - - Intermediário - - JavaScript - - Referencia -translation_of: Web/JavaScript/Closures ---- -
{{jsSidebar("Intermediate")}}
- -

Um closure (fechamento) é uma função que se "lembra" do ambiente — ou escopo léxico — em que ela foi criada.

- -

Escopo léxico

- -

Considere a função abaixo:

- -
-
function init() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  displayName();
-}
-init();
-
-
- -

A função init() cria uma variável local chamada name, e depois define uma função chamada displayName(). displayName() é uma função aninhada (um closure) — ela é definida dentro da função init(), e está disponivel apenas dentro do corpo daquela função. Diferente de init(), displayName() não tem variáveis locais próprias, e ao invés disso reusa a variável name declarada na função pai.

- -

Rode o código e veja que isso funciona. Este é um exemplo de escopo léxico: em JavaScript, o escopo de uma variável é definido por sua localização dentro do código fonte (isto é aparentemente léxico) e funções aninhadas têm acesso às variáveis declaradas em seu escopo externo.

- -

Closure

- -

Agora considere o seguinte exemplo:

- -
function makeFunc() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  return displayName;
-}
-
-var myFunc = makeFunc();
-myFunc();
-
- -

Se você rodar este código o mesmo terá exatamente o mesmo efeito que o init() do exemplo anterior: a palavra "Mozilla" será mostrada na caixa de alerta. O que é diferente - e interessante - é o fato de que a função interna do displayName() foi retornada da função externa antes de ser executada.

- -

Pode parecer não muito intuitivo de que o código de fato funciona. Normalmente variáveis locais a uma função apenas existem pela duração da execução da mesma. Uma vez que makeFunc() terminou de executar, é razoável esperar que a variável name não será mais necessária. Dado que o código ainda funciona como o esperado, este não é o caso.

- -

A solução para tal problema é que a função myFunc tornou-se uma closure. Uma closure (fechamento) trata-se de um tipo especial de objeto que combina duas coisas: a função e o ambiente onde a função foi criada. Este ambiente consiste de quaisquer variáveis que estavam no escopo naquele momento em que a função foi criada. Neste caso, myFunc é a closure que incorpora tanto a função displayName quanto a palavra Mozilla que existia quando a closure foi criada.

- -

Aqui temos um exemplo um pouco mais interessante, a função makeAdder:

- -
function makeAdder(x) {
-  return function(y) {
-    return x + y;
-  };
-}
-
-var add5 = makeAdder(5);
-var add10 = makeAdder(10);
-
-print(add5(2));  // 7
-print(add10(2)); // 12
-
- -

Neste exemplo definimos a função makeAdder(x) que toma um único argumento x e retorna uma nova função. A função retornada toma então um único argumento, y, e retorna então a soma de x e de y.

- -

Na essência o makeAdder trata-se de uma função fábrica - irá construir outras funções que podem adicionar um determinado valor específico a seu argumento. No exemplo acima usamos a fábrica de funções para criar duas novas funções - uma que adiciona 5 ao argumento, e outra que adiciona 10.

- -

Ambas as funções add5 e add10 são closures. Compartilham o mesmo corpo de definição de função mas armazenam diferentes ambientes. No ambiente da add5, por exemplo, x equivale a 5, enquanto na add10 o valor de x é 10.

- -

Closures na prática

- -

Esta é a teoria — mas closures são realmente úteis? Vamos considerar suas aplicações práticas. Uma closure deixa você associar dados (do ambiente) com uma função que trabalha estes dados. Isto está diretamente ligado com programação orientada a objetos, onde objetos nos permitem associar dados (as propriedades do objeto) utilizando um ou mais métodos.

- -

Consequentemente, você pode utilizar uma closure em qualquer lugar onde você normalmente utilizaria um objeto de único método.

- -

Situações onde você poderia utilizar isto são comuns em ambientes web. Muitos códigos escritos em JavaScript para web são baseados em eventos - nós definimos algum comportamento e então, o atribuimos a um evento que será disparado pelo usuário (quando uma tecla for pressionada, por exemplo). Nosso código normalmente é utilizado como callback: uma função que será executada como resposta ao evento.

- -

Aqui temos um exemplo prático: suponha que queremos adicionar alguns botões para ajustar o tamanho do texto de uma página. Um jeito de fazer seria especificar o tamanho da fonte no elemento body e então definir o tamanho dos outros elementos da página (os cabeçalhos, por exemplo) utilizando a unidade relativa em:

- -
body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-h2 {
-  font-size: 1.2em;
-}
-
- -

Nossos botões interativos de tamanho de texto podem alterar a propriedade font-size do elemento body, e os ajustes serão refletidos em outros elementos graças à unidade relativa.

- -

O código JavaScript:

- -
function makeSizer(size) {
-  return function() {
-    document.body.style.fontSize = size + 'px';
-  };
-}
-
-var size12 = makeSizer(12);
-var size14 = makeSizer(14);
-var size16 = makeSizer(16);
-
- -

size12, size14 e size16 agora são funções que devem redimensionar o texto do elemento body para 12, 14 e 16 pixels respectivamente. Nós podemos designá-las a botões (neste caso, links) como feito a seguir:

- -
document.getElementById('size-12').onclick = size12;
-document.getElementById('size-14').onclick = size14;
-document.getElementById('size-16').onclick = size16;
-
- -
<a href="#" id="size-12">12</a>
-<a href="#" id="size-14">14</a>
-<a href="#" id="size-16">16</a>
-
- -

View on JSFiddle

- -

Emulando métodos privados com closures

- -

Linguagens como Java oferecem a habilidade de declarar métodos privados, o que significa que eles só poderão ser chamados por outros métodos na mesma classe.

- -

O JavaScript não oferece uma maneira nativa de fazer isso, mas é possível emular métodos privados usando closures. Métodos privados não são somente úteis para restringir acesso ao código: eles também oferecem uma maneira eficaz de gerenciar seu namespace global, evitando que métodos não essenciais baguncem a interface pública do seu código.

- -

Veja como definir algumas funções públicas que acessam funções e variáveis privadas, usando closures que também é conhecido como module pattern:

- -
var Counter = (function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-})();
-
-alert(Counter.value()); /* Alerts 0 */
-Counter.increment();
-Counter.increment();
-alert(Counter.value()); /* Alerts 2 */
-Counter.decrement();
-alert(Counter.value()); /* Alerts 1 */
-
- -

Tem muita coisa acontecendo aqui. Nos exemplos anteriores cada closure teve o seu próprio ambiente; aqui nós criamos um ambiente único que é compartilhado por três funções: Counter.increment, Counter.decrement e Counter.value.

- -

O ambiente compartilhado é criado no corpo de uma função anônima, da qual é executada assim que é definida. O ambiente contém dois itens privados: uma variável chamada privateCounter e uma função chamada changeBy. Nenhum desses itens privados podem ser acessados diretamente de fora da função anônima. Ao invés disso, eles devem ser acessados pelas três funções públicas que são retornadas.

- -

Aquelas três funções públicas são closures que compartilham o mesmo ambiente. Graças ao escopo léxico do JavaScript, cada uma delas tem acesso a variável privateCounter e à função changeBy.

- -
-

Você perceberá que estamos definindo uma função anônima que cria um contador , e então o executamos imediatamente e atribuímos o resultado à variável Counter. Poderíamos armazenar essa função em uma variável separada e usá-la para criar diversos contadores.

-
- -
var makeCounter = function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-};
-
-var Counter1 = makeCounter();
-var Counter2 = makeCounter();
-alert(Counter1.value()); /* Alerts 0 */
-Counter1.increment();
-Counter1.increment();
-alert(Counter1.value()); /* Alerts 2 */
-Counter1.decrement();
-alert(Counter1.value()); /* Alerts 1 */
-alert(Counter2.value()); /* Alerts 0 */
-
- -

Observe como cada um dos contadores mantém a sua independência em relação ao outro. Seu ambiente durante a execução da função makeCounter() é diferente a cada vez que ocorre. A variável privateCounter contém uma instância diferente a cada vez.

- -
-

Usar closures desta maneira oferece uma série de benefícios que estão normalmente associados a programação orientada a objetos, em particular encapsulamento e ocultação de dados.

-
- -
-
- -

Criando closures dentro de loops: Um erro comum

- -

Antes da introdução da palavra chave let no JavaScript 1.7, um problema comum ocorria com closures quando eram criadas dentro de um loop. Considere o exemplo:

- -
<p id="help">Helpful notes will appear here</p>
-<p>E-mail: <input type="text" id="email" name="email"></p>
-<p>Name: <input type="text" id="name" name="name"></p>
-<p>Age: <input type="text" id="age" name="age"></p>
-
- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
-
- -

View on JSFiddle

- -

O array helpText define três dicas úteis, cada uma associada ao ID de um input no documento. O loop percorre essas definições, atrelando um evento onfocus para cada um que mostra o método de ajuda associado.

- -

Se você tentar executar esse código, Você verá que não vai funcionar como esperado. Não importa em qual campo ocorre o focus, a mensagem sobre a sua idade será mostrada.

- -

O motivo disto é que as funções atreladas ao onfocus são closures; elas consistem na definição da função e do ambiente capturado do escopo da função setupHelp. Três closures foram criados, mas todos eles compartilham o mesmo ambiente. No momento em que os callbacks do onfocus são executados, o loop segue seu curso e então a variável item (compartilhada por todos os três closures) fica apontando para a última entrada na lista helpText.

- -

Uma solução seria neste caso usar mais closures: em particular, usar uma fábrica de funções como descrito anteriormente:

- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function makeHelpCallback(help) {
-  return function() {
-    showHelp(help);
-  };
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
-  }
-}
-
-setupHelp();
-
- -

View on JSFiddle

- -

Isto funciona conforme o esperado. Ao invés dos callbacks compartilharem o mesmo ambiente, a função makeHelpCallback cria um novo ambiente para cada um no qual help se refere à string correspondente do array helpText.

- -

Considerações de performance

- -

Não é sábio criar funções dentro de outras funções se o closure não for necessário para uma tarefa em particular, pois ele afetará a performance do script de forma bem negativa tanto em velocidade de processamento quanto em consumo de memória.

- -

Por exemplo, ao criar uma nova classe/objeto, os métodos devem normalmente estar associados ao protótipo do objeto do que definido no construtor. O motivo disso é que sempre que o construtor for chamado os métodos serão reatribuídos (isto é, para cada criação de objeto).

- -

Considere o seguinte exemplo pouco prático porém demonstrativo:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-  this.getName = function() {
-    return this.name;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-
- -

O código anterior não aproveita os benefícios dos closures e portanto poderia ser reformulado assim:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype = {
-  getName: function() {
-    return this.name;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-
- -

Ou assim:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype.getName = function() {
-  return this.name;
-};
-MyObject.prototype.getMessage = function() {
-  return this.message;
-};
-
- -

Nos dois exemplos anteriores, o protótipo herdado pode ser compartilhado por todos os objetos, e as definições de métodos não precisam ocorrer sempre que o objeto for criado. Veja Detalhes do modelo de objeto para mais detalhes.

diff --git "a/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" "b/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" deleted file mode 100644 index cb626865f8..0000000000 --- "a/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Coleções chaveadas -slug: Web/JavaScript/Guide/Coleções_chaveadas -tags: - - Coleções - - Guía - - JavaScript - - Mapas ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}
- -

This chapter introduces collections of data which are ordered by a key; Map and Set objects contain elements which are iterable in the order of insertion.

- -

Maps

- -

Map object

- -

ECMAScript 6 introduces a new data structure to map values to values. A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order

- -

The following code shows some basic operations with a Map. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of [key, value] for each iteration.

- -
var sayings = new Map();
-sayings.set("dog", "woof");
-sayings.set("cat", "meow");
-sayings.set("elephant", "toot");
-sayings.size; // 3
-sayings.get("fox"); // undefined
-sayings.has("bird"); // false
-sayings.delete("dog");
-
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
-}
-// "cat goes meow"
-// "elephant goes toot"
-
- -

Object and Map compared

- -

Traditionally, {{jsxref("Object", "objects", "", 1)}} have been used to map strings to values. Objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Map objects, however, have a few more advantages that make them better maps.

- -
    -
  • The keys of an Object are {{jsxref("Global_Objects/String","Strings")}}, where they can be of any value for a Map.
    • -
  • You can get the size of a Map easily while you have to manually keep track of size for an Object.
    • -
  • The iteration of maps is in insertion order of the elements.
    • -
  • An Object has a prototype, so there are default keys in the map. (this can be bypassed using map = Object.create(null)).
    • -
- -

These two tips can help you to decide whether to use a Map or an Object:

- -
    -
  • Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.
    • -
  • Use objects when there is logic that operates on individual elements.
    • -
- -

WeakMap object

- -

The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the keys are objects only and the values can be arbitrary values. The object references in the keys are held weakly meaning that they are target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.

- -

One difference to Map objects is that WeakMap keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.

- -

For more information and example code, see also "Why WeakMap?" on the {{jsxref("WeakMap")}} reference page.

- -

One use case of WeakMap objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald blog post "Hiding Implementation Details with ECMAScript 6 WeakMaps". The private data and methods belong inside the object and are stored in the privates WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because privates is not exported from the module

- -
const privates = new WeakMap();
-
-function Public() {
-  const me = {
-    // Private data goes here
-  };
-  privates.set(this, me);
-}
-
-Public.prototype.method = function () {
-  const me = privates.get(this);
-  // Do stuff with private data in `me`...
-};
-
-module.exports = Public;
-
- -

Sets

- -

Set object

- -

{{jsxref("Set")}} objects are collections of values. You can iterate its elements in insertion order. A value in a Set may only occur once; it is unique in the Set's collection.

- -

The following code shows some basic operations with a Set. See also the {{jsxref("Set")}} reference page for more examples and the complete API.

- -
var mySet = new Set();
-mySet.add(1);
-mySet.add("some text");
-mySet.add("foo");
-
-mySet.has(1); // true
-mySet.delete("foo");
-mySet.size; // 2
-
-for (let item of mySet) console.log(item);
-// 1
-// "some text"
-
- -

Converting between Array and Set

- -

You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the spread operator. Also, the Set constructor accepts an Array to convert in the other direction. Note again that Set objects store unique values, so any duplicate elements from an Array are deleted when converting.

- -
Array.from(mySet);
-[...mySet2];
-
-mySet2 = new Set([1,2,3,4]);
-
- -

Array and Set compared

- -

Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new Set object, however, has some advantages:

- -
    -
  • Checking whether an element exists in an collection using {{jsxref("Array.indexOf", "indexOf")}} for arrays is slow.
    • -
  • Set objects let you delete elements by their value. With an array you would have to splice based on a element's index.
    • -
  • The value {{jsxref("NaN")}} can not be found with indexOf in array.
    • -
  • Set objects store unique values, you don't have to keep track of duplicates by yourself.
    • -
- -

WeakSet object

- -

{{jsxref("WeakSet")}} objects are collections of objects. An object in the WeakSet may only occur once; it is unique in the WeakSet's collection and objects are not enumerable.

- -

The main differences to the {{jsxref("Set")}} object are:

- -
    -
  • In contrast to Sets, WeakSets are collections of objects only and not of arbitrary values of any type.
    • -
  • The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection. WeakSets are not enumerable.
    • -
- -

The use cases of WeakSet objects are limited. They will not leak memory so it can be safe to use DOM elements as a key and mark them for tracking purposes, for example.

- -

Key and value equality of Map and Set

- -

Both, the key equality of Map objects and the value equality of Set objects, are based on the "same-value-zero algorithm":

- -
    -
  • Equality works like the identity comparison operator ===.
    • -
  • -0 and +0 are considered equal.
    • -
  • {{jsxref("NaN")}} is considered equal to itself (contrary to ===).
    • -
- -

{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}

diff --git a/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..e352b58f6d --- /dev/null +++ b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,429 @@ +--- +title: Controle de Fluxo e Manipulação de Erro +slug: Web/JavaScript/Guide/Declarações +tags: + - Guia(2) + - Iniciante + - JavaScript + - declarações + - declarações de controle +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+ +

O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.

+ +

Veja a Referência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;) é utilizado para separar declarações.

+ +

Toda expressão também é uma declaração. Veja Expressões e Operadores para informações completas sobre expressões.

+ +

Declaração em bloco

+ +

Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:

+ +
{
+   declaracao_1;
+   declaracao_2;
+   .
+   .
+   .
+   declaracao_n;
+}
+
+ +

Exemplo

+ +

Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex. if, for, while).

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Aqui, { x++; } é a declaração de bloco.

+ +

Importante: Antes de ECMAScript 6 o JavaScript não possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // exibe 2
+
+ +

Este código exibe 2 porque a declaração var x dentro do bloco possui o mesmo escopo que a declaração var x antes do bloco. Em C ou Java, o código equivalente exibiria 1.

+ +

Declarações condicionais

+ +

Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais: if...else e switch.

+ +

Declaração if...else

+ +

Use a declaração if para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcional else para executar alguma declaração caso a condição lógica for falsa. Uma declaração if é declarada da seguinte maneira:

+ +
if (condicao) {
+  declaracao_1;
+} else {
+  declaracao_2;
+}
+ +

onde condicao pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. Veja Boolean para uma explicação sobre o que é avaliado como true e false. Se condicao for avaliada como verdadeira, declaracao_1 é executada; caso contrário, declaracao_2 é executada. declaracao_1 e declaracao_2 podem ser qualquer declaração, incluindo declarações if aninhadas.

+ +

Você pode também combinar declarações utilizando else if para obter várias condições testadas em sequência, como o seguinte:

+ +
if (condicao) {
+  declaracao_1;
+} else if (condicao_2) {
+  declaracao_2;
+} else if (condicao_n) {
+  declaracao_n;
+} else {
+  declaracao_final;
+}
+ +

Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declarações if:

+ +
if (condicao) {
+    declaracao_1_executada_se_condicao_for_verdadeira;
+    declaracao_2_executada_se_condicao_for_verdadeira;
+} else {
+    declaracao_3_executada_se_condicao_for_falsa;
+    declaracao_4_executada_se_condicao_for_falsa;
+}
+
+ +
Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:
+ +
if (x = y) {
+  /* faça a coisa certa */
+}
+
+ +

Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:

+ +
if ((x = y)) {
+  /* faça a coisa certa */
+}
+
+ +

Valores avaliados como falsos

+ +

Os seguintes valores são avaliados como falsos:

+ +
    +
  • false
    • +
  • undefined
    • +
  • null
    • +
  • 0
    • +
  • NaN
    • +
  • string vazia ("")
    • +
+ +

Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.

+ +

Não confunda os valores booleanos primitivos true e false com os valores de true e false do objeto Boolean. Por exemplo:

+ +
var b = new Boolean(false);
+if (b) // esta condição é avaliada como verdadeira
+if (b == true) // esta condição é avaliada como falsa
+ +

 

+ +

Exemplo

+ +

No exemplo a seguir, a função verifiqueDados retorna verdadeiro se o número de caracteres em um objeto Text for três; caso contrário, exibe um alerta e retorna falso.

+ +
function verifiqueDados() {
+  if (document.form1.tresCaracteres.value.length == 3) {
+    return true;
+  } else {
+    alert("Informe exatamente três caracteres. " +
+      document.form1.tresCaracteres.value + " não é válido.");
+    return false;
+  }
+}
+
+ +

Declaração switch

+ +

Uma declaração switch permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de um case. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaração switch se parece com o seguinte:

+ +
switch (expressao) {
+   case rotulo_1:
+      declaracoes_1
+      [break;]
+   case rotulo_2:
+      declaracoes_2
+      [break;]
+   ...
+   default:
+      declaracoes_padrao
+      [break;]
+}
+
+ +

O programa primeiramente procura por uma cláusula case com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcional default e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusula default é encontrada, o programa continua a execução a partir da declaracao seguinte ao switch. Por convenção, a cláusula default é a última, mas não é necessário que seja assim.

+ +

A instrução break associada a cada cláusula case, garante que o programa sairá do switch assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte ao switch. Se a declaração break for omitida, o programa continua a execução a partir da próxima declaração dentro do switch.

+ +

Exemplo

+ +

No exemplo a seguir, se tipofruta for avaliada como "Banana", o programa faz a correspondência do valor com case "Banana" e executa a declaração associada. Quando o break é encontrado, o programa termina o switch e executa a declaração seguinte ao condicional. Se o break fosse omitido, a declaração de case "Cereja" também seria executada.

+ +
switch (tipofruta) {
+   case "Laranja":
+      console.log("O quilo da laranja está R$0,59.<br>");
+      break;
+   case "Maçã":
+      console.log("O quilo da maçã está R$0,32.<br>");
+      break;
+   case "Banana":
+      console.log("O quilo da banana está R$0,48.<br>");
+      break;
+   case "Cereja":
+      console.log("O quilo da cereja está R$3,00.<br>");
+      break;
+   case "Manga":
+      console.log("O quilo da manga está R$0,56.<br>");
+       break;
+   case "Mamão":
+      console.log("O quilo do mamão está R$2,23.<br>");
+      break;
+   default:
+      console.log("Desculpe, não temos " + tipofruta + ".<br>");
+}
+console.log("Gostaria de mais alguma coisa?<br>");
+ +

Declarações de Manipulação de Error

+ +

Você pode chamar uma exceção usando a declaração throw e manipulá-la usando a declaração try...catch.

+ + + +

Tipos de exceções

+ +

Praticamente pode-se utilizar throw em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados por throw são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usando throw, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:

+ + + +

Declaração throw

+ +

Use a declaração throw para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:

+ +
throw expressão;
+
+ +

Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:

+ +
throw "Error2";   // tipo string
+throw 42;         // tipo numérico
+throw true;       // tipo booleano
+throw {toString: function() { return "Eu sou um objeto!"; } };
+
+ +
Nota:  Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch.  O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.
+ +
// Cria um objeto do tipo UserException
+function UserException(mensagem) {
+  this.mensagem = mensagem;
+  this.nome = "UserException";
+}
+
+// Realiza a conversão da exceção para uma string adequada quando usada como uma string.
+// (ex. pelo console de erro)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Cria uma instância de um tipo de objeto e lança ela
+throw new UserException("Valor muito alto");
+ +

Declaração try...catch

+ +

A declaração try...catch coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaração try...catch pegá-a.

+ +

A declaração try...catch é composta por um bloco try, que contém uma ou mais declarações, e zero ou mais blocos catch, contendo declarações que especificam o que fazer se uma exceção é lançada no bloco try. Ou seja, você deseja que o bloco try  tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o bloco catch. Se qualquer declaração do bloco try (ou em uma função chamada dentro do bloco try) lança uma exceção, o controle é imediatamente mudado para o bloco catch. Se nenhuma exceção é lançada no bloco try, o bloco catch é ignorado. O bloco finally executa após os blocos try e catch executarem, mas antes das declarações seguinte ao bloco try...catch.

+ +

O exemplo a seguir usa a declaração try...catch. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo" e as declarações no bloco catch define a váriavel monthName para unknown.

+ +
function getMonthName(mo) {
+  mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada.
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // função poderia lançar uma exceção
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.
+}
+
+ +

O bloco catch

+ +

Você pode usar um bloco catch para lidar com todas as exceções que podem ser geradas no bloco try.

+ +
catch (catchID) {
+  declaracoes
+}
+
+ +

O bloco catch específica um identificador (catchID na sintaxe anterior), que contém o valor especificado pela declaração throw; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o bloco catch é inserido; o identificador dura enquanto o bloco catch está em execução, depois que termina a execução do bloco catch, o identificador não estará mais disponível.

+ +

Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o bloco catch.

+ +
try {
+  throw "myException"; // lança  uma exceção
+}
+catch (e) {
+  // declarações de lidar com as exceções
+  logMyErrors(e); // passar a exceção para o manipulador de erro
+}
+
+ +

O bloco finally

+ +

O bloco finally contém instruções para executar após os blocos try e catch, mas antes das declarações seguinte a declaração try...catch. O bloco finally é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no bloco finally executa, mesmo que nenhum bloco catch processe a exceção.

+ +

Você pode usar bloco finally para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o bloco finally fecha o arquivo antes do script falhar.

+ +
openMyFile();
+try {
+  writeMyFile(theData); //Isso pode lançar um erro
+} catch(e) {
+  handleError(e); // Se temos um erro temos que lidar com ele
+} finally {
+  closeMyFile(); // Sempre feche o recurso
+}
+
+ +

Se o bloco finally retornar um valor, este valor se torna o valor de toda a entrada try-catch-finally, independente de quaisquer declarações de retorno nos blocos try e catch:

+ +
function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // essa declaração de retorno é suspensa
+                 // até que o bloco finally seja concluído
+    console.log(2); // não executa
+  } finally {
+    console.log(3);
+    return false; // substitui o "return" anterior
+    console.log(4); // não executa
+  }
+  // "return false" é executado agora
+  console.log(5); // não executa
+}
+f(); // exibe 0, 1, 3; retorna false
+
+ +

Substituições de valores de retorno pelo bloco finally também se aplica a exceções lançadas ou re-lançadas dentro do bloco catch:

+ +
function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('captura interior "falso"');
+    throw e; // essa instrução throw é suspensa até
+             // que o bloco finally seja concluído
+  } finally {
+    return false; // substitui "throw" anterior
+  }
+  // "return false" é executado agora
+}
+
+try {
+  f();
+} catch(e) {
+  // isto nunca é executado porque o throw dentro
+  // do catch é substituído
+  // pelo return no finally
+  console.log('captura exterior "falso"');
+}
+
+// SAIDA
+// captura interior "falso"
+ +

Aninhando declarações try...catch

+ +

Você pode aninhar uma ou mais declarações try...catch. Se uma declaração try...catch interior não tem um bloco catch, o delimitador do bloco try...catch da declaração catch é verificado por uma correspondência.

+ +

Utilizando objetos de erro

+ +

Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.

+ +

Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:

+ +
function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('A mensagem'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // exibe 'Error'
+  console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript
+}
+ +

Promises

+ +

Começando com ECMAScript 6, JavaScript ganha suporte para objetos {{jsxref("Promise")}} que lhe permite controlar o fluxo de operações diferídas e assíncronas.

+ +

Uma Promise assume um destes estados:

+ +
    +
  • pending: estado inicial, não fulfilled, ou rejected.
    • +
  • fulfilled: operação bem sucedida.
    • +
  • rejected: operação falha.
    • +
  • settled: A Promise é fulfilled ou rejected, mas não pending.
    • +
+ +

+ +

Carregando uma imagem com XHR

+ +

Um exemplo simples usando Promise e XMLHttpRequest para carregar uma imagem disponível no repositório MDN GitHub promise-test. Você também pode vê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxo Promise para que você possa ter uma ideia:

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}
+ +

Para uma informação mais detalhada, consulte a página de referência {{jsxref("Promise")}}.

+ +
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git "a/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" "b/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" deleted file mode 100644 index e352b58f6d..0000000000 --- "a/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: Controle de Fluxo e Manipulação de Erro -slug: Web/JavaScript/Guide/Declarações -tags: - - Guia(2) - - Iniciante - - JavaScript - - declarações - - declarações de controle -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
- -

O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.

- -

Veja a Referência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;) é utilizado para separar declarações.

- -

Toda expressão também é uma declaração. Veja Expressões e Operadores para informações completas sobre expressões.

- -

Declaração em bloco

- -

Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:

- -
{
-   declaracao_1;
-   declaracao_2;
-   .
-   .
-   .
-   declaracao_n;
-}
-
- -

Exemplo

- -

Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex. if, for, while).

- -
while (x < 10) {
-  x++;
-}
-
- -

Aqui, { x++; } é a declaração de bloco.

- -

Importante: Antes de ECMAScript 6 o JavaScript não possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // exibe 2
-
- -

Este código exibe 2 porque a declaração var x dentro do bloco possui o mesmo escopo que a declaração var x antes do bloco. Em C ou Java, o código equivalente exibiria 1.

- -

Declarações condicionais

- -

Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais: if...else e switch.

- -

Declaração if...else

- -

Use a declaração if para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcional else para executar alguma declaração caso a condição lógica for falsa. Uma declaração if é declarada da seguinte maneira:

- -
if (condicao) {
-  declaracao_1;
-} else {
-  declaracao_2;
-}
- -

onde condicao pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. Veja Boolean para uma explicação sobre o que é avaliado como true e false. Se condicao for avaliada como verdadeira, declaracao_1 é executada; caso contrário, declaracao_2 é executada. declaracao_1 e declaracao_2 podem ser qualquer declaração, incluindo declarações if aninhadas.

- -

Você pode também combinar declarações utilizando else if para obter várias condições testadas em sequência, como o seguinte:

- -
if (condicao) {
-  declaracao_1;
-} else if (condicao_2) {
-  declaracao_2;
-} else if (condicao_n) {
-  declaracao_n;
-} else {
-  declaracao_final;
-}
- -

Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declarações if:

- -
if (condicao) {
-    declaracao_1_executada_se_condicao_for_verdadeira;
-    declaracao_2_executada_se_condicao_for_verdadeira;
-} else {
-    declaracao_3_executada_se_condicao_for_falsa;
-    declaracao_4_executada_se_condicao_for_falsa;
-}
-
- -
Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:
- -
if (x = y) {
-  /* faça a coisa certa */
-}
-
- -

Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:

- -
if ((x = y)) {
-  /* faça a coisa certa */
-}
-
- -

Valores avaliados como falsos

- -

Os seguintes valores são avaliados como falsos:

- -
    -
  • false
    • -
  • undefined
    • -
  • null
    • -
  • 0
    • -
  • NaN
    • -
  • string vazia ("")
    • -
- -

Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.

- -

Não confunda os valores booleanos primitivos true e false com os valores de true e false do objeto Boolean. Por exemplo:

- -
var b = new Boolean(false);
-if (b) // esta condição é avaliada como verdadeira
-if (b == true) // esta condição é avaliada como falsa
- -

 

- -

Exemplo

- -

No exemplo a seguir, a função verifiqueDados retorna verdadeiro se o número de caracteres em um objeto Text for três; caso contrário, exibe um alerta e retorna falso.

- -
function verifiqueDados() {
-  if (document.form1.tresCaracteres.value.length == 3) {
-    return true;
-  } else {
-    alert("Informe exatamente três caracteres. " +
-      document.form1.tresCaracteres.value + " não é válido.");
-    return false;
-  }
-}
-
- -

Declaração switch

- -

Uma declaração switch permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de um case. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaração switch se parece com o seguinte:

- -
switch (expressao) {
-   case rotulo_1:
-      declaracoes_1
-      [break;]
-   case rotulo_2:
-      declaracoes_2
-      [break;]
-   ...
-   default:
-      declaracoes_padrao
-      [break;]
-}
-
- -

O programa primeiramente procura por uma cláusula case com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcional default e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusula default é encontrada, o programa continua a execução a partir da declaracao seguinte ao switch. Por convenção, a cláusula default é a última, mas não é necessário que seja assim.

- -

A instrução break associada a cada cláusula case, garante que o programa sairá do switch assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte ao switch. Se a declaração break for omitida, o programa continua a execução a partir da próxima declaração dentro do switch.

- -

Exemplo

- -

No exemplo a seguir, se tipofruta for avaliada como "Banana", o programa faz a correspondência do valor com case "Banana" e executa a declaração associada. Quando o break é encontrado, o programa termina o switch e executa a declaração seguinte ao condicional. Se o break fosse omitido, a declaração de case "Cereja" também seria executada.

- -
switch (tipofruta) {
-   case "Laranja":
-      console.log("O quilo da laranja está R$0,59.<br>");
-      break;
-   case "Maçã":
-      console.log("O quilo da maçã está R$0,32.<br>");
-      break;
-   case "Banana":
-      console.log("O quilo da banana está R$0,48.<br>");
-      break;
-   case "Cereja":
-      console.log("O quilo da cereja está R$3,00.<br>");
-      break;
-   case "Manga":
-      console.log("O quilo da manga está R$0,56.<br>");
-       break;
-   case "Mamão":
-      console.log("O quilo do mamão está R$2,23.<br>");
-      break;
-   default:
-      console.log("Desculpe, não temos " + tipofruta + ".<br>");
-}
-console.log("Gostaria de mais alguma coisa?<br>");
- -

Declarações de Manipulação de Error

- -

Você pode chamar uma exceção usando a declaração throw e manipulá-la usando a declaração try...catch.

- - - -

Tipos de exceções

- -

Praticamente pode-se utilizar throw em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados por throw são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usando throw, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:

- - - -

Declaração throw

- -

Use a declaração throw para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:

- -
throw expressão;
-
- -

Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:

- -
throw "Error2";   // tipo string
-throw 42;         // tipo numérico
-throw true;       // tipo booleano
-throw {toString: function() { return "Eu sou um objeto!"; } };
-
- -
Nota:  Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch.  O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.
- -
// Cria um objeto do tipo UserException
-function UserException(mensagem) {
-  this.mensagem = mensagem;
-  this.nome = "UserException";
-}
-
-// Realiza a conversão da exceção para uma string adequada quando usada como uma string.
-// (ex. pelo console de erro)
-UserException.prototype.toString = function() {
-  return this.name + ': "' + this.message + '"';
-}
-
-// Cria uma instância de um tipo de objeto e lança ela
-throw new UserException("Valor muito alto");
- -

Declaração try...catch

- -

A declaração try...catch coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaração try...catch pegá-a.

- -

A declaração try...catch é composta por um bloco try, que contém uma ou mais declarações, e zero ou mais blocos catch, contendo declarações que especificam o que fazer se uma exceção é lançada no bloco try. Ou seja, você deseja que o bloco try  tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o bloco catch. Se qualquer declaração do bloco try (ou em uma função chamada dentro do bloco try) lança uma exceção, o controle é imediatamente mudado para o bloco catch. Se nenhuma exceção é lançada no bloco try, o bloco catch é ignorado. O bloco finally executa após os blocos try e catch executarem, mas antes das declarações seguinte ao bloco try...catch.

- -

O exemplo a seguir usa a declaração try...catch. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo" e as declarações no bloco catch define a váriavel monthName para unknown.

- -
function getMonthName(mo) {
-  mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec)
-  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
-                "Aug","Sep","Oct","Nov","Dec"];
-  if (months[mo]) {
-    return months[mo];
-  } else {
-    throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada.
-  }
-}
-
-try { // statements to try
-  monthName = getMonthName(myMonth); // função poderia lançar uma exceção
-}
-catch (e) {
-  monthName = "unknown";
-  logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.
-}
-
- -

O bloco catch

- -

Você pode usar um bloco catch para lidar com todas as exceções que podem ser geradas no bloco try.

- -
catch (catchID) {
-  declaracoes
-}
-
- -

O bloco catch específica um identificador (catchID na sintaxe anterior), que contém o valor especificado pela declaração throw; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o bloco catch é inserido; o identificador dura enquanto o bloco catch está em execução, depois que termina a execução do bloco catch, o identificador não estará mais disponível.

- -

Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o bloco catch.

- -
try {
-  throw "myException"; // lança  uma exceção
-}
-catch (e) {
-  // declarações de lidar com as exceções
-  logMyErrors(e); // passar a exceção para o manipulador de erro
-}
-
- -

O bloco finally

- -

O bloco finally contém instruções para executar após os blocos try e catch, mas antes das declarações seguinte a declaração try...catch. O bloco finally é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no bloco finally executa, mesmo que nenhum bloco catch processe a exceção.

- -

Você pode usar bloco finally para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o bloco finally fecha o arquivo antes do script falhar.

- -
openMyFile();
-try {
-  writeMyFile(theData); //Isso pode lançar um erro
-} catch(e) {
-  handleError(e); // Se temos um erro temos que lidar com ele
-} finally {
-  closeMyFile(); // Sempre feche o recurso
-}
-
- -

Se o bloco finally retornar um valor, este valor se torna o valor de toda a entrada try-catch-finally, independente de quaisquer declarações de retorno nos blocos try e catch:

- -
function f() {
-  try {
-    console.log(0);
-    throw "bogus";
-  } catch(e) {
-    console.log(1);
-    return true; // essa declaração de retorno é suspensa
-                 // até que o bloco finally seja concluído
-    console.log(2); // não executa
-  } finally {
-    console.log(3);
-    return false; // substitui o "return" anterior
-    console.log(4); // não executa
-  }
-  // "return false" é executado agora
-  console.log(5); // não executa
-}
-f(); // exibe 0, 1, 3; retorna false
-
- -

Substituições de valores de retorno pelo bloco finally também se aplica a exceções lançadas ou re-lançadas dentro do bloco catch:

- -
function f() {
-  try {
-    throw "bogus";
-  } catch(e) {
-    console.log('captura interior "falso"');
-    throw e; // essa instrução throw é suspensa até
-             // que o bloco finally seja concluído
-  } finally {
-    return false; // substitui "throw" anterior
-  }
-  // "return false" é executado agora
-}
-
-try {
-  f();
-} catch(e) {
-  // isto nunca é executado porque o throw dentro
-  // do catch é substituído
-  // pelo return no finally
-  console.log('captura exterior "falso"');
-}
-
-// SAIDA
-// captura interior "falso"
- -

Aninhando declarações try...catch

- -

Você pode aninhar uma ou mais declarações try...catch. Se uma declaração try...catch interior não tem um bloco catch, o delimitador do bloco try...catch da declaração catch é verificado por uma correspondência.

- -

Utilizando objetos de erro

- -

Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.

- -

Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:

- -
function doSomethingErrorProne () {
-  if (ourCodeMakesAMistake()) {
-    throw (new Error('A mensagem'));
-  } else {
-    doSomethingToGetAJavascriptError();
-  }
-}
-....
-try {
-  doSomethingErrorProne();
-}
-catch (e) {
-  console.log(e.name); // exibe 'Error'
-  console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript
-}
- -

Promises

- -

Começando com ECMAScript 6, JavaScript ganha suporte para objetos {{jsxref("Promise")}} que lhe permite controlar o fluxo de operações diferídas e assíncronas.

- -

Uma Promise assume um destes estados:

- -
    -
  • pending: estado inicial, não fulfilled, ou rejected.
    • -
  • fulfilled: operação bem sucedida.
    • -
  • rejected: operação falha.
    • -
  • settled: A Promise é fulfilled ou rejected, mas não pending.
    • -
- -

- -

Carregando uma imagem com XHR

- -

Um exemplo simples usando Promise e XMLHttpRequest para carregar uma imagem disponível no repositório MDN GitHub promise-test. Você também pode vê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxo Promise para que você possa ter uma ideia:

- -
function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-    request.onload = function() {
-      if (request.status === 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('Image didn\'t load successfully; error code:'
-                     + request.statusText));
-      }
-    };
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
-    };
-    request.send();
-  });
-}
- -

Para uma informação mais detalhada, consulte a página de referência {{jsxref("Promise")}}.

- -
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..55a4c928a5 --- /dev/null +++ b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,705 @@ +--- +title: Detalhes do modelo de objeto +slug: Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto +tags: + - Entidade + - Modelo + - Objeto + - Orientação á Objeto +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +

JavaScript é uma linguagem orientada a objetos com base em protótipos, em vez de ser baseada em classes. Devido a essa base diferente, pode ser menos evidente como o JavaScript permite criar hierarquias de objetos e ter herança de propriedades e seus valores. Este capítulo tenta esclarecer essa situação.

+ +
+
Este capítulo assume que você já está um pouco familiarizado com JavaScript e que você já tenha usado funções JavaScript para criar simples objetos.
+ +
+
+ +

Linguagens baseada em classe vs. baseada em protótipo

+ +

Linguagens orientadas a objetos baseadas em classe, como Java e C + +, são fundadas no conceito de duas entidades distintas: classes e instâncias.

+ +
    +
  • Uma classe define todas as propriedades (considerando-se os métodos e campos em Java, ou membros em C + +, para ser propriedades) que caracterizam um determinado conjunto de objetos. Uma classe é algo abstrato, ao invés de qualquer membro particular do conjunto de objetos que descreve. Por exemplo, a classe Employee poderia representar o conjunto de todos os funcionários.
    • +
  • Uma instância, por outro lado, é a instanciação de uma classe, ou seja, um dos seus membros. Por exemplo, Victoria poderia ser uma instância da classe Employee, o que representa um indivíduo em particular como um empregado. Uma instância tem exatamente as propriedades de sua classe pai (nem mais, nem menos).
    • +
+ +

Uma linguagem baseada em protótipo, como JavaScript, não faz essa distinção: ele simplesmente tem objetos. Uma linguagem baseada em protótipo tem a idéia de um objeto prototípico, um objeto usado como um modelo do qual obtém as propriedades iniciais para um novo objeto. Qualquer objeto pode especificar suas próprias propriedades, quando você o cria ou em tempo de execução. Além disso, qualquer objeto pode ser associado como um protótipo de outro objeto, permitindo ao segundo objeto compartilhar as propriedades do primeiro objeto.

+ +

Definindo uma classe

+ +

Em linguagens baseadas em classe, você define uma classe em uma definição de classe separada. Nessa definição, você pode especificar métodos especiais, chamados de construtores, para criar instâncias da classe. Um método construtor pode especificar valores iniciais para as propriedades da instância e executar outros processamentos apropriados no momento da criação. Você pode usar o operador new, em associação com o método construtor para criar instâncias de classe.

+ +

O JavaScript segue um modelo semelhante, mas não têm uma definição da classe separada do construtor. Em vez disso, você define uma função de construtor para criar objetos com um conjunto inicial particular de propriedades e valores. Qualquer função JavaScript pode ser usado como um construtor. Você pode usar o operador new com uma função de construtor para criar um novo objeto.

+ +

Subclasses e herança

+ +

Em uma linguagem baseada em classe, você cria a hierárquia de classes através de sua definição. Em uma definição de classes,  você pode  especificar que a nova classe é uma subclasse de outra já existente. A subclasse herda todas as propriedades da  superclasse e pode adicionar novas propriedades ou modificar propriedades herdadas. Por exemplo, assuma que  a classe Employee tem somente duas propriedades name e dept , e Manager é uma subclasse of Employee que adiciona a propriedade reports. Neste caso, uma instância da classe Manager  terá todas as três propiedades: name, dept, and reports.

+ +

Em JavaScript, a herança é implementada associando um objeto prototípico a qualquer função de construtor. Então, você pode criar exatamente o mesmo exemplo: Employee — Manager, mas utilizando uma terminologia ligeramente diferente. Primeiro, define-se a função de construtor de  Employee, especificando as propriedades name e dept. Depois,  define-se a função de construtor de  Manager, especificando a propriedade reports. Finalmente, associa-se um objeto new Employee  como  prototype para a função de construtor Manager. Então, quando vocẽ criar um objeto new Manager, ele herdará as propriedades  name e dept do objeto Employee.

+ +

Adicionando e removendo propriedades

+ +

Em uma linguagem baseada em classe, você normalmente cria uma classe em tempo de compilação e então vincula as instâncias da classe em tempo de compilação, ou tempo de execução. Você não pode alterar o número ou o tipo de propriedade de uma classe após definí-la. Em javaScript, no entanto, você pode adicionar ou remover propriedades de qualquer objeto. Se você adiciona uma propriedade a um objeto que é usado como o protótipo para um conjunto de objetos, os objetos no qual ele é protótipo herdarão as novas propriedades.

+ +

Sumário das diferenças

+ +

A tabela a seguir apresenta um breve resumo de algumas dessas diferenças. O restante deste capítulo descreve os detalhes do uso de construtores e protótipos JavaScript para criar uma hierarquia de objetos e compara isso à maneira como você faria em Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comparação de objetos do sistema baseados em classes (Java) e baseado em protótipo (JavaScript)
Baseados em classes (Java)Baseados em protótipos (JavaScript)
Classes e instancias são entidades distintas.Todos os objetos são instancias.
Define uma classe com uma definição de classe; cria um objeto - como instância da classe - com o método constructor.Define e cria um conjunto de objetos com funções construtoras.
Cria um único objeto com o operador new.Faz o mesmo.
Constroi uma hierarquia de objetos usando definição de classe para definir subclasses de classes existentes.Constrói uma hierarquia de objetos, atribuindo um objeto como o protótipo associado com uma função de construtor.
Herda propriedade seguindo a cadeia de classe.Herda propriedade seguindo a cadeia de protótipo.
Definição de classe especifica todas as propriedades de todas as instâncias de uma classe. Não é possível adicionar propriedades dinamicamente em tempo de execução.Função construtor ou protótipo especifica um conjunto inicial de propriedades. Pode adicionar ou remover propriedades de forma dinâmica para objetos individuais ou para todo o conjunto de objetos.
+ +

O exemplo employee

+ +

O restante deste capítulo usa a hierarquia employee como mostrado na figura abaixo. 

+ +
+

Uma simples hierarquia de objetos:

+ +

+ +
    +
  • Employee tem a propriedade name (cujo valor padrão é uma string vazia) e dept (cujo valor padrão  e o "general").
    • +
  • Manager é baseado no Employee. É adicionada a propriedade reports (cujo valor padrão é um array vazio, planejado para ter um array do objeto Employee como valor).
    • +
  • WorkerBee também é baseado no  Employee. É adicionada  a propriedade projects (cujo valor padrão é um array vazio, pretende-se ter um array de strings como valor).
    • +
  • SalesPerson é baseado no WorkerBee. É adicionada a propriedade quota (cujo valor padrão é 100). E também controla a propriedade dept  com o valor "sales", indicando que todos os salespersons são o mesmo departamento.
    • +
  • Engineer é baseado no WorkerBee. É adicionada a propriedade machine (cujo valor padrão é uma string vazia) e também controla a propriedade dept com o valor "engineering".
    • +
+
+ +

Criando a hierarquia

+ +

Há muitas formas de definir funções construtoras apropriadas para implementar a hierarquia Employee. Como escolher defini-las depende amplamente do que você quer ser capaz de fazer em sua aplicação.

+ +

Esta seção mostra definições simples de como trabalhar com heranças. Nestas definições, você não pode especificar nenhum valor de propriedade quando criar um objeto. O recém-criado objeto terá os valores padrão, que você poderá alterar mais tarde.

+ +

Na aplicação real, você poderia definir construtores que permitem que você forneça valores de propriedade no momento da criação do objeto (veja Construtores flexíveis para saber mais). Por enquanto, estas simples definições demonstram como a herança ocorre.

+ +

As seguintes definições Java e JavaScript Employee são similares. A única diferença é que você precisa especificar o tipo de cada propriedade em Java, mas não em JavaScript (devido ao Java ser uma linguagem fortemente tipada enquanto o JavaScript é linguagem fracamente tipada).

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+
+ +

Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

As definições Manager e WorkerBee mostram a diferença na forma de especificar o próximo objeto mais alto na cadeia de herança. Em JavaScript, você adiciona uma instância prototípica como o valor da propriedade prototype da função construtora. Você pode fazer isso a qualquer momento depois de definir o construtor. Em Java, você especifica a superclasse dentro da classe definida. Você não pode alterar a superclasse fora da classe definida.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+
+ +

Java

+ +
public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

As definições Engineer e SalesPerson criam objetos que descendem de WorkerBee e consequentemente de Employee. Objetos destes tipos tem propriedades de todos os objetos acima de sua cadeia. Em adição, estas definições substituem o valor herdado da propriedade dept com novos valores específicos para esses objetos.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+
+ +

Java

+ +
public class SalesPerson extends WorkerBee {
+   public double quota;
+   public dept = "sales";
+   public quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public dept = "engineering";
+   public machine = "";
+}
+
+
+
+ +

Usando estas definições, você pode criar instâncias desses objetos que obterão valores padrão para suas propriedades. A próxima imagem mostra o uso destas definições JavaScript para criar novos objetos e mostrar os valores das propriedades dos novos objetos. 

+ +
+

Note: O termo instancia   tem significado específicamente técnico em linguagens baseadas em classe. Nessas linguagens, uma instância é uma instanciação individual de uma classe e é fundamentalmente diferente de uma classe. Em JavaScript, "instância" não tem esse significado técnico porque JavaScript não tem essa diferença entre classes e instâncias. No entanto, falando sobre JavaScript, "instância" pode ser usada informalmente para significar um objeto criado usando uma função construtora particular. Então, neste exemplo, você pode informalmente dizer que jane é uma instância de Engineer. Similarmente, embora os termos parent, child, ancestor, e descendant não tenham significados formais em JavaScript; você pode usá-los informalmente para referir a objetos altos ou baixos na cadeia de protótipos.

+
+ +

Criando objetos com definições simples

+ +
+

Hierarquia do Objeto

+ +

A hierarquia abaixo foi criada utilizando o código ao lado.

+ +

+ +

Objetos individuais = Jim, Sally, Mark, Fred, Jane, etc. "Instancias" criadas a partir do construtor.

+ +
var jim = new Employee;
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+
+
+ +

Propriedades do Objeto

+ +

Esta seção discute como objetos herdam propriedades de outros objetos na cadeia de protótipos e o que acontece quando você adiciona uma propriedade em tempo de execução.

+ +

Herdando Propriedades

+ +

Suponha que você criou o objeto mark como um WorkerBee com a seguinte declaração:

+ +
var mark = new WorkerBee;
+
+ +

Quando o JavaScript vê o operador new, ele cria um novo objeto genérico e implicitamente define o valor da propriedade interna [[Protótipo]] para o valor de WorkerBee.prototype passando este novo objeto como o valor da palavra-chave this para a função construtora de WorkerBee. A propriedade interna [[__proto__]] determina a cadeia de protótipos usada para retornar os valores das propriedades. Uma vez que essas propriedades são definidas, o JavaScript retorna o novo objeto e a declaração de atribuição define a variável mark para este objeto.

+ +

Este processo não põe explicitamente valores no objeto mark (valores locais) para as propriedades que mark herdou da cadeia de protótipo. Quando você solicita o valor de uma propriedade, o JavaScript primeiro verifica se o valor existe nesse objeto. Caso exista, esse valor é retornado. Se o valor não existe localmente, JavaScript verifica a cadeia de protótipos (usando a propriedade  interna __proto__). Se um objeto na cadeia de protótipos possui um valor para a propriedade, este valor é retornado. Se nenhuma propriedade é encontrada, o Javascript avisa que o objeto não possui a propriedade. Deste modo, o objeto mark possui as seguintes propriedades e valores: 

+ +
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+ +

The mark object inherits values for the name and dept properties from the prototypical object in mark.__proto__. It is assigned a local value for the projects property by the WorkerBee constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in Property inheritance revisited.

+ +

Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from WorkerBee. You can, of course, change the values of any of these properties. So, you could give specific information for mark as follows:

+ +
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+ +

Adding properties

+ +

In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:

+ +
mark.bonus = 3000;
+
+ +

Now, the mark object has a bonus property, but no other WorkerBee has this property.

+ +

If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a specialty property to all employees with the following statement:

+ +
Employee.prototype.specialty = "none";
+
+ +

As soon as JavaScript executes this statement, the mark object also has the specialty property with the value of "none". The following figure shows the effect of adding this property to the Employee prototype and then overriding it for the Engineer prototype.

+ +


+ Adding properties

+ +

More flexible constructors

+ +

The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.

+ +


+ Specifying properties in a constructor, take 1

+ +

The following table shows the Java and JavaScript definitions for these objects.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+
+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

These JavaScript definitions use a special idiom for setting default values:

+ +
this.name = name || "";
+
+ +

The JavaScript logical OR operator (||) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if name has a useful value for the name property. If it does, it sets this.name to that value. Otherwise, it sets this.name to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.

+ +
+

Note: This may not work as expected if the constructor function is called with arguments which convert to false (like 0 (zero) and empty string (""). In this case the default value will be chosen.

+
+ +

With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new Engineer:

+ +
var jane = new Engineer("belau");
+
+ +

Jane's properties are now:

+ +
jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+
+ +

Notice that with these definitions, you cannot specify an initial value for an inherited property such as name. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.

+ +

So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.

+ +


+ Specifying properties in a constructor, take 2

+ +

Let's look at one of these definitions in detail. Here's the new definition for the Engineer constructor:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +

Suppose you create a new Engineer object as follows:

+ +
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+
+ +

JavaScript follows these steps:

+ +
    +
  1. The new operator creates a generic object and sets its __proto__ property to Engineer.prototype.
    2. +
  2. The new operator passes the new object to the Engineer constructor as the value of the this keyword.
    3. +
  3. The constructor creates a new property called base for that object and assigns the value of the WorkerBee constructor to the base property. This makes the WorkerBee constructor a method of the Engineer object.The name of the base property is not special. You can use any legal property name; base is simply evocative of its purpose.
    4. +
  4. +

    The constructor calls the base method, passing as its arguments two of the arguments passed to the constructor ("Doe, Jane" and ["navigator", "javascript"]) and also the string "engineering". Explicitly using "engineering" in the constructor indicates that all Engineer objects have the same value for the inherited dept property, and this value overrides the value inherited from Employee.

    +
    5. +
  5. Because base is a method of Engineer, within the call to base, JavaScript binds the this keyword to the object created in Step 1. Thus, the WorkerBee function in turn passes the "Doe, Jane" and "engineering" arguments to the Employee constructor function. Upon return from the Employee constructor function, the WorkerBee function uses the remaining argument to set the projects property.
    6. +
  6. Upon return from the base method, the Engineer constructor initializes the object's machine property to "belau".
    7. +
  7. Upon return from the constructor, JavaScript assigns the new object to the jane variable.
    8. +
+ +

You might think that, having called the WorkerBee constructor from inside the Engineer constructor, you have set up inheritance appropriately for Engineer objects. This is not the case. Calling the WorkerBee constructor ensures that an Engineer object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the Employee or WorkerBee prototypes, those properties are not inherited by the Engineer object. For example, assume you have the following statements:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

The jane object does not inherit the specialty property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

Now the value of the jane object's specialty property is "none".

+ +

Another way of inheriting is by using the call() / apply() methods. Below are equivalent:

+ +
+
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +
function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+
+ +

Using the javascript call() method makes a cleaner implementation because the base is not needed anymore.

+ +

Property inheritance revisited

+ +

The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.

+ +

Local versus inherited values

+ +

When you access an object property, JavaScript performs these steps, as described earlier in this chapter:

+ +
    +
  1. Check to see if the value exists locally. If it does, return that value.
    2. +
  2. If there is not a local value, check the prototype chain (using the __proto__ property).
    3. +
  3. If an object in the prototype chain has a value for the specified property, return that value.
    4. +
  4. If no such property is found, the object does not have the property.
    5. +
+ +

The outcome of these steps depends on how you define things along the way. The original example had these definitions:

+ +
function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

With these definitions, suppose you create amy as an instance of WorkerBee with the following statement:

+ +
var amy = new WorkerBee;
+
+ +

The amy object has one local property, projects. The values for the name and dept properties are not local to amy and so are gotten from the amy object's __proto__ property. Thus, amy has these property values:

+ +
amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+
+ +

Now suppose you change the value of the name property in the prototype associated with Employee:

+ +
Employee.prototype.name = "Unknown"
+
+ +

At first glance, you might expect that new value to propagate down to all the instances of Employee. However, it does not.

+ +

When you create any instance of the Employee object, that instance gets a local value for the name property (the empty string). This means that when you set the WorkerBee prototype by creating a new Employee object, WorkerBee.prototype has a local value for the name property. Therefore, when JavaScript looks up the name property of the amy object (an instance of WorkerBee), JavaScript finds the local value for that property in WorkerBee.prototype. It therefore does not look farther up the chain to Employee.prototype.

+ +

If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:

+ +
function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+
+ +

In this case, the name property of amy becomes "Unknown".

+ +

As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.

+ +

Determining instance relationships

+ +

Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. This continues recursively; the process is called "lookup in the prototype chain".

+ +

The special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. So the expression new Foo() creates an object with __proto__ == Foo.prototype. Consequently, changes to the properties of Foo.prototype alters the property lookup for all objects that were created by new Foo().

+ +

Every object has a __proto__ object property (except Object); every function has a prototype object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to a function's prototype object. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

For a more detailed example, suppose you have the same set of definitions shown in Inheriting properties. Create an Engineer object as follows:

+ +
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+
+ +

With this object, the following statements are all true:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Given this, you could write an instanceOf function as follows:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Note: The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.
+ +

Using the instanceOf function defined above, these expressions are true:

+ +
instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+
+ +

But the following expression is false:

+ +
instanceOf (chris, SalesPerson)
+
+ +

Global information in constructors

+ +

When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for Employee:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+ +

With this definition, when you create a new Employee, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, victoria.id is 1 and harry.id is 2:

+ +
var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+
+ +

At first glance that seems fine. However, idCounter gets incremented every time an Employee object is created, for whatever purpose. If you create the entire Employee hierarchy shown in this chapter, the Employee constructor is called every time you set up a prototype. Suppose you have the following code:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+
+ +

Further assume that the definitions omitted here have the base property and call the constructor above them in the prototype chain. In this case, by the time the mac object is created, mac.id is 5.

+ +

Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:

+ +
function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

When you create an instance of Employee to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an Employee to get an assigned id, you must specify a name for the employee. In this example, mac.id would be 1.

+ +

No multiple inheritance

+ +

Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.

+ +

Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.

+ +

In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:

+ +
function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+
+ +

Further assume that the definition of WorkerBee is as used earlier in this chapter. In this case, the dennis object has these properties:

+ +
dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+
+ +

So dennis does get the hobby property from the Hobbyist constructor. However, assume you then add a property to the Hobbyist constructor's prototype:

+ +
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+
+ +

The dennis object does not inherit this new property.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html b/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html deleted file mode 100644 index 55a4c928a5..0000000000 --- a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html +++ /dev/null @@ -1,705 +0,0 @@ ---- -title: Detalhes do modelo de objeto -slug: Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto -tags: - - Entidade - - Modelo - - Objeto - - Orientação á Objeto -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -

JavaScript é uma linguagem orientada a objetos com base em protótipos, em vez de ser baseada em classes. Devido a essa base diferente, pode ser menos evidente como o JavaScript permite criar hierarquias de objetos e ter herança de propriedades e seus valores. Este capítulo tenta esclarecer essa situação.

- -
-
Este capítulo assume que você já está um pouco familiarizado com JavaScript e que você já tenha usado funções JavaScript para criar simples objetos.
- -
-
- -

Linguagens baseada em classe vs. baseada em protótipo

- -

Linguagens orientadas a objetos baseadas em classe, como Java e C + +, são fundadas no conceito de duas entidades distintas: classes e instâncias.

- -
    -
  • Uma classe define todas as propriedades (considerando-se os métodos e campos em Java, ou membros em C + +, para ser propriedades) que caracterizam um determinado conjunto de objetos. Uma classe é algo abstrato, ao invés de qualquer membro particular do conjunto de objetos que descreve. Por exemplo, a classe Employee poderia representar o conjunto de todos os funcionários.
    • -
  • Uma instância, por outro lado, é a instanciação de uma classe, ou seja, um dos seus membros. Por exemplo, Victoria poderia ser uma instância da classe Employee, o que representa um indivíduo em particular como um empregado. Uma instância tem exatamente as propriedades de sua classe pai (nem mais, nem menos).
    • -
- -

Uma linguagem baseada em protótipo, como JavaScript, não faz essa distinção: ele simplesmente tem objetos. Uma linguagem baseada em protótipo tem a idéia de um objeto prototípico, um objeto usado como um modelo do qual obtém as propriedades iniciais para um novo objeto. Qualquer objeto pode especificar suas próprias propriedades, quando você o cria ou em tempo de execução. Além disso, qualquer objeto pode ser associado como um protótipo de outro objeto, permitindo ao segundo objeto compartilhar as propriedades do primeiro objeto.

- -

Definindo uma classe

- -

Em linguagens baseadas em classe, você define uma classe em uma definição de classe separada. Nessa definição, você pode especificar métodos especiais, chamados de construtores, para criar instâncias da classe. Um método construtor pode especificar valores iniciais para as propriedades da instância e executar outros processamentos apropriados no momento da criação. Você pode usar o operador new, em associação com o método construtor para criar instâncias de classe.

- -

O JavaScript segue um modelo semelhante, mas não têm uma definição da classe separada do construtor. Em vez disso, você define uma função de construtor para criar objetos com um conjunto inicial particular de propriedades e valores. Qualquer função JavaScript pode ser usado como um construtor. Você pode usar o operador new com uma função de construtor para criar um novo objeto.

- -

Subclasses e herança

- -

Em uma linguagem baseada em classe, você cria a hierárquia de classes através de sua definição. Em uma definição de classes,  você pode  especificar que a nova classe é uma subclasse de outra já existente. A subclasse herda todas as propriedades da  superclasse e pode adicionar novas propriedades ou modificar propriedades herdadas. Por exemplo, assuma que  a classe Employee tem somente duas propriedades name e dept , e Manager é uma subclasse of Employee que adiciona a propriedade reports. Neste caso, uma instância da classe Manager  terá todas as três propiedades: name, dept, and reports.

- -

Em JavaScript, a herança é implementada associando um objeto prototípico a qualquer função de construtor. Então, você pode criar exatamente o mesmo exemplo: Employee — Manager, mas utilizando uma terminologia ligeramente diferente. Primeiro, define-se a função de construtor de  Employee, especificando as propriedades name e dept. Depois,  define-se a função de construtor de  Manager, especificando a propriedade reports. Finalmente, associa-se um objeto new Employee  como  prototype para a função de construtor Manager. Então, quando vocẽ criar um objeto new Manager, ele herdará as propriedades  name e dept do objeto Employee.

- -

Adicionando e removendo propriedades

- -

Em uma linguagem baseada em classe, você normalmente cria uma classe em tempo de compilação e então vincula as instâncias da classe em tempo de compilação, ou tempo de execução. Você não pode alterar o número ou o tipo de propriedade de uma classe após definí-la. Em javaScript, no entanto, você pode adicionar ou remover propriedades de qualquer objeto. Se você adiciona uma propriedade a um objeto que é usado como o protótipo para um conjunto de objetos, os objetos no qual ele é protótipo herdarão as novas propriedades.

- -

Sumário das diferenças

- -

A tabela a seguir apresenta um breve resumo de algumas dessas diferenças. O restante deste capítulo descreve os detalhes do uso de construtores e protótipos JavaScript para criar uma hierarquia de objetos e compara isso à maneira como você faria em Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comparação de objetos do sistema baseados em classes (Java) e baseado em protótipo (JavaScript)
Baseados em classes (Java)Baseados em protótipos (JavaScript)
Classes e instancias são entidades distintas.Todos os objetos são instancias.
Define uma classe com uma definição de classe; cria um objeto - como instância da classe - com o método constructor.Define e cria um conjunto de objetos com funções construtoras.
Cria um único objeto com o operador new.Faz o mesmo.
Constroi uma hierarquia de objetos usando definição de classe para definir subclasses de classes existentes.Constrói uma hierarquia de objetos, atribuindo um objeto como o protótipo associado com uma função de construtor.
Herda propriedade seguindo a cadeia de classe.Herda propriedade seguindo a cadeia de protótipo.
Definição de classe especifica todas as propriedades de todas as instâncias de uma classe. Não é possível adicionar propriedades dinamicamente em tempo de execução.Função construtor ou protótipo especifica um conjunto inicial de propriedades. Pode adicionar ou remover propriedades de forma dinâmica para objetos individuais ou para todo o conjunto de objetos.
- -

O exemplo employee

- -

O restante deste capítulo usa a hierarquia employee como mostrado na figura abaixo. 

- -
-

Uma simples hierarquia de objetos:

- -

- -
    -
  • Employee tem a propriedade name (cujo valor padrão é uma string vazia) e dept (cujo valor padrão  e o "general").
    • -
  • Manager é baseado no Employee. É adicionada a propriedade reports (cujo valor padrão é um array vazio, planejado para ter um array do objeto Employee como valor).
    • -
  • WorkerBee também é baseado no  Employee. É adicionada  a propriedade projects (cujo valor padrão é um array vazio, pretende-se ter um array de strings como valor).
    • -
  • SalesPerson é baseado no WorkerBee. É adicionada a propriedade quota (cujo valor padrão é 100). E também controla a propriedade dept  com o valor "sales", indicando que todos os salespersons são o mesmo departamento.
    • -
  • Engineer é baseado no WorkerBee. É adicionada a propriedade machine (cujo valor padrão é uma string vazia) e também controla a propriedade dept com o valor "engineering".
    • -
-
- -

Criando a hierarquia

- -

Há muitas formas de definir funções construtoras apropriadas para implementar a hierarquia Employee. Como escolher defini-las depende amplamente do que você quer ser capaz de fazer em sua aplicação.

- -

Esta seção mostra definições simples de como trabalhar com heranças. Nestas definições, você não pode especificar nenhum valor de propriedade quando criar um objeto. O recém-criado objeto terá os valores padrão, que você poderá alterar mais tarde.

- -

Na aplicação real, você poderia definir construtores que permitem que você forneça valores de propriedade no momento da criação do objeto (veja Construtores flexíveis para saber mais). Por enquanto, estas simples definições demonstram como a herança ocorre.

- -

As seguintes definições Java e JavaScript Employee são similares. A única diferença é que você precisa especificar o tipo de cada propriedade em Java, mas não em JavaScript (devido ao Java ser uma linguagem fortemente tipada enquanto o JavaScript é linguagem fracamente tipada).

- -
-

JavaScript

- -
function Employee() {
-  this.name = "";
-  this.dept = "general";
-}
-
- -

Java

- -
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

As definições Manager e WorkerBee mostram a diferença na forma de especificar o próximo objeto mais alto na cadeia de herança. Em JavaScript, você adiciona uma instância prototípica como o valor da propriedade prototype da função construtora. Você pode fazer isso a qualquer momento depois de definir o construtor. Em Java, você especifica a superclasse dentro da classe definida. Você não pode alterar a superclasse fora da classe definida.

- -
-

JavaScript

- -
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype = Object.create(Employee.prototype);
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype = Object.create(Employee.prototype);
-
- -

Java

- -
public class Manager extends Employee {
-   public Employee[] reports = new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

As definições Engineer e SalesPerson criam objetos que descendem de WorkerBee e consequentemente de Employee. Objetos destes tipos tem propriedades de todos os objetos acima de sua cadeia. Em adição, estas definições substituem o valor herdado da propriedade dept com novos valores específicos para esses objetos.

- -
-

JavaScript

- -
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = "sales";
-   this.quota = 100;
-}
-SalesPerson.prototype = Object.create(WorkerBee.prototype);
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = "engineering";
-   this.machine = "";
-}
-Engineer.prototype = Object.create(WorkerBee.prototype);
-
- -

Java

- -
public class SalesPerson extends WorkerBee {
-   public double quota;
-   public dept = "sales";
-   public quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String machine;
-   public dept = "engineering";
-   public machine = "";
-}
-
-
-
- -

Usando estas definições, você pode criar instâncias desses objetos que obterão valores padrão para suas propriedades. A próxima imagem mostra o uso destas definições JavaScript para criar novos objetos e mostrar os valores das propriedades dos novos objetos. 

- -
-

Note: O termo instancia   tem significado específicamente técnico em linguagens baseadas em classe. Nessas linguagens, uma instância é uma instanciação individual de uma classe e é fundamentalmente diferente de uma classe. Em JavaScript, "instância" não tem esse significado técnico porque JavaScript não tem essa diferença entre classes e instâncias. No entanto, falando sobre JavaScript, "instância" pode ser usada informalmente para significar um objeto criado usando uma função construtora particular. Então, neste exemplo, você pode informalmente dizer que jane é uma instância de Engineer. Similarmente, embora os termos parent, child, ancestor, e descendant não tenham significados formais em JavaScript; você pode usá-los informalmente para referir a objetos altos ou baixos na cadeia de protótipos.

-
- -

Criando objetos com definições simples

- -
-

Hierarquia do Objeto

- -

A hierarquia abaixo foi criada utilizando o código ao lado.

- -

- -

Objetos individuais = Jim, Sally, Mark, Fred, Jane, etc. "Instancias" criadas a partir do construtor.

- -
var jim = new Employee;
-// jim.name is ''
-// jim.dept is 'general'
-
-var sally = new Manager;
-// sally.name is ''
-// sally.dept is 'general'
-// sally.reports is []
-
-var mark = new WorkerBee;
-// mark.name is ''
-// mark.dept is 'general'
-// mark.projects is []
-
-var fred = new SalesPerson;
-// fred.name is ''
-// fred.dept is 'sales'
-// fred.projects is []
-// fred.quota is 100
-
-var jane = new Engineer;
-// jane.name is ''
-// jane.dept is 'engineering'
-// jane.projects is []
-// jane.machine is ''
-
-
- -

Propriedades do Objeto

- -

Esta seção discute como objetos herdam propriedades de outros objetos na cadeia de protótipos e o que acontece quando você adiciona uma propriedade em tempo de execução.

- -

Herdando Propriedades

- -

Suponha que você criou o objeto mark como um WorkerBee com a seguinte declaração:

- -
var mark = new WorkerBee;
-
- -

Quando o JavaScript vê o operador new, ele cria um novo objeto genérico e implicitamente define o valor da propriedade interna [[Protótipo]] para o valor de WorkerBee.prototype passando este novo objeto como o valor da palavra-chave this para a função construtora de WorkerBee. A propriedade interna [[__proto__]] determina a cadeia de protótipos usada para retornar os valores das propriedades. Uma vez que essas propriedades são definidas, o JavaScript retorna o novo objeto e a declaração de atribuição define a variável mark para este objeto.

- -

Este processo não põe explicitamente valores no objeto mark (valores locais) para as propriedades que mark herdou da cadeia de protótipo. Quando você solicita o valor de uma propriedade, o JavaScript primeiro verifica se o valor existe nesse objeto. Caso exista, esse valor é retornado. Se o valor não existe localmente, JavaScript verifica a cadeia de protótipos (usando a propriedade  interna __proto__). Se um objeto na cadeia de protótipos possui um valor para a propriedade, este valor é retornado. Se nenhuma propriedade é encontrada, o Javascript avisa que o objeto não possui a propriedade. Deste modo, o objeto mark possui as seguintes propriedades e valores: 

- -
mark.name = "";
-mark.dept = "general";
-mark.projects = [];
-
- -

The mark object inherits values for the name and dept properties from the prototypical object in mark.__proto__. It is assigned a local value for the projects property by the WorkerBee constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in Property inheritance revisited.

- -

Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from WorkerBee. You can, of course, change the values of any of these properties. So, you could give specific information for mark as follows:

- -
mark.name = "Doe, Mark";
-mark.dept = "admin";
-mark.projects = ["navigator"];
- -

Adding properties

- -

In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:

- -
mark.bonus = 3000;
-
- -

Now, the mark object has a bonus property, but no other WorkerBee has this property.

- -

If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a specialty property to all employees with the following statement:

- -
Employee.prototype.specialty = "none";
-
- -

As soon as JavaScript executes this statement, the mark object also has the specialty property with the value of "none". The following figure shows the effect of adding this property to the Employee prototype and then overriding it for the Engineer prototype.

- -


- Adding properties

- -

More flexible constructors

- -

The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.

- -


- Specifying properties in a constructor, take 1

- -

The following table shows the Java and JavaScript definitions for these objects.

- -
-

JavaScript

- -

Java

-
- -
-
function Employee (name, dept) {
-  this.name = name || "";
-  this.dept = dept || "general";
-}
-
- -
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-
-
- -
-
function WorkerBee (projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer (mach) {
-   this.dept = "engineering";
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

These JavaScript definitions use a special idiom for setting default values:

- -
this.name = name || "";
-
- -

The JavaScript logical OR operator (||) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if name has a useful value for the name property. If it does, it sets this.name to that value. Otherwise, it sets this.name to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.

- -
-

Note: This may not work as expected if the constructor function is called with arguments which convert to false (like 0 (zero) and empty string (""). In this case the default value will be chosen.

-
- -

With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new Engineer:

- -
var jane = new Engineer("belau");
-
- -

Jane's properties are now:

- -
jane.name == "";
-jane.dept == "engineering";
-jane.projects == [];
-jane.machine == "belau"
-
- -

Notice that with these definitions, you cannot specify an initial value for an inherited property such as name. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.

- -

So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.

- -


- Specifying properties in a constructor, take 2

- -

Let's look at one of these definitions in detail. Here's the new definition for the Engineer constructor:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -

Suppose you create a new Engineer object as follows:

- -
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-
- -

JavaScript follows these steps:

- -
    -
  1. The new operator creates a generic object and sets its __proto__ property to Engineer.prototype.
    2. -
  2. The new operator passes the new object to the Engineer constructor as the value of the this keyword.
    3. -
  3. The constructor creates a new property called base for that object and assigns the value of the WorkerBee constructor to the base property. This makes the WorkerBee constructor a method of the Engineer object.The name of the base property is not special. You can use any legal property name; base is simply evocative of its purpose.
    4. -
  4. -

    The constructor calls the base method, passing as its arguments two of the arguments passed to the constructor ("Doe, Jane" and ["navigator", "javascript"]) and also the string "engineering". Explicitly using "engineering" in the constructor indicates that all Engineer objects have the same value for the inherited dept property, and this value overrides the value inherited from Employee.

    -
    5. -
  5. Because base is a method of Engineer, within the call to base, JavaScript binds the this keyword to the object created in Step 1. Thus, the WorkerBee function in turn passes the "Doe, Jane" and "engineering" arguments to the Employee constructor function. Upon return from the Employee constructor function, the WorkerBee function uses the remaining argument to set the projects property.
    6. -
  6. Upon return from the base method, the Engineer constructor initializes the object's machine property to "belau".
    7. -
  7. Upon return from the constructor, JavaScript assigns the new object to the jane variable.
    8. -
- -

You might think that, having called the WorkerBee constructor from inside the Engineer constructor, you have set up inheritance appropriately for Engineer objects. This is not the case. Calling the WorkerBee constructor ensures that an Engineer object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the Employee or WorkerBee prototypes, those properties are not inherited by the Engineer object. For example, assume you have the following statements:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

The jane object does not inherit the specialty property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

Now the value of the jane object's specialty property is "none".

- -

Another way of inheriting is by using the call() / apply() methods. Below are equivalent:

- -
-
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -
function Engineer (name, projs, mach) {
-  WorkerBee.call(this, name, "engineering", projs);
-  this.machine = mach || "";
-}
-
-
- -

Using the javascript call() method makes a cleaner implementation because the base is not needed anymore.

- -

Property inheritance revisited

- -

The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.

- -

Local versus inherited values

- -

When you access an object property, JavaScript performs these steps, as described earlier in this chapter:

- -
    -
  1. Check to see if the value exists locally. If it does, return that value.
    2. -
  2. If there is not a local value, check the prototype chain (using the __proto__ property).
    3. -
  3. If an object in the prototype chain has a value for the specified property, return that value.
    4. -
  4. If no such property is found, the object does not have the property.
    5. -
- -

The outcome of these steps depends on how you define things along the way. The original example had these definitions:

- -
function Employee () {
-  this.name = "";
-  this.dept = "general";
-}
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

With these definitions, suppose you create amy as an instance of WorkerBee with the following statement:

- -
var amy = new WorkerBee;
-
- -

The amy object has one local property, projects. The values for the name and dept properties are not local to amy and so are gotten from the amy object's __proto__ property. Thus, amy has these property values:

- -
amy.name == "";
-amy.dept == "general";
-amy.projects == [];
-
- -

Now suppose you change the value of the name property in the prototype associated with Employee:

- -
Employee.prototype.name = "Unknown"
-
- -

At first glance, you might expect that new value to propagate down to all the instances of Employee. However, it does not.

- -

When you create any instance of the Employee object, that instance gets a local value for the name property (the empty string). This means that when you set the WorkerBee prototype by creating a new Employee object, WorkerBee.prototype has a local value for the name property. Therefore, when JavaScript looks up the name property of the amy object (an instance of WorkerBee), JavaScript finds the local value for that property in WorkerBee.prototype. It therefore does not look farther up the chain to Employee.prototype.

- -

If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:

- -
function Employee () {
-  this.dept = "general";
-}
-Employee.prototype.name = "";
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = "Unknown";
-
- -

In this case, the name property of amy becomes "Unknown".

- -

As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.

- -

Determining instance relationships

- -

Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. This continues recursively; the process is called "lookup in the prototype chain".

- -

The special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. So the expression new Foo() creates an object with __proto__ == Foo.prototype. Consequently, changes to the properties of Foo.prototype alters the property lookup for all objects that were created by new Foo().

- -

Every object has a __proto__ object property (except Object); every function has a prototype object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to a function's prototype object. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

For a more detailed example, suppose you have the same set of definitions shown in Inheriting properties. Create an Engineer object as follows:

- -
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
-
- -

With this object, the following statements are all true:

- -
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

Given this, you could write an instanceOf function as follows:

- -
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
Note: The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.
- -

Using the instanceOf function defined above, these expressions are true:

- -
instanceOf (chris, Engineer)
-instanceOf (chris, WorkerBee)
-instanceOf (chris, Employee)
-instanceOf (chris, Object)
-
- -

But the following expression is false:

- -
instanceOf (chris, SalesPerson)
-
- -

Global information in constructors

- -

When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for Employee:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
- -

With this definition, when you create a new Employee, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, victoria.id is 1 and harry.id is 2:

- -
var victoria = new Employee("Pigbert, Victoria", "pubs")
-var harry = new Employee("Tschopik, Harry", "sales")
-
- -

At first glance that seems fine. However, idCounter gets incremented every time an Employee object is created, for whatever purpose. If you create the entire Employee hierarchy shown in this chapter, the Employee constructor is called every time you set up a prototype. Suppose you have the following code:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
-function Manager (name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee (name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer (name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson (name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer("Wood, Mac");
-
- -

Further assume that the definitions omitted here have the base property and call the constructor above them in the prototype chain. In this case, by the time the mac object is created, mac.id is 5.

- -

Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:

- -
function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   if (name)
-      this.id = idCounter++;
-}
-
- -

When you create an instance of Employee to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an Employee to get an assigned id, you must specify a name for the employee. In this example, mac.id would be 1.

- -

No multiple inheritance

- -

Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.

- -

Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.

- -

In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:

- -
function Hobbyist (hobby) {
-   this.hobby = hobby || "scuba";
-}
-
-function Engineer (name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, "engineering", projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
-
- -

Further assume that the definition of WorkerBee is as used earlier in this chapter. In this case, the dennis object has these properties:

- -
dennis.name == "Doe, Dennis"
-dennis.dept == "engineering"
-dennis.projects == ["collabra"]
-dennis.machine == "hugo"
-dennis.hobby == "scuba"
-
- -

So dennis does get the hobby property from the Hobbyist constructor. However, assume you then add a property to the Hobbyist constructor's prototype:

- -
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
-
- -

The dennis object does not inherit this new property.

- -
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/pt-br/web/javascript/guide/formatando_texto/index.html b/files/pt-br/web/javascript/guide/formatando_texto/index.html deleted file mode 100644 index 1b4bb50772..0000000000 --- a/files/pt-br/web/javascript/guide/formatando_texto/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Formatando texto -slug: Web/JavaScript/Guide/Formatando_texto -tags: - - Guía - - JavaScript -translation_of: Web/JavaScript/Guide/Text_formatting ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
- -

Esse capítulo introduz como trabalhar com strings e texto em JavaScript.

- -

Strings

- -

O tipo {{Glossary("String")}} do JavaScript é usado para representar informações de texto. É um conjunto de "elementos" composto por valores inteiros de 16-bits sem sinal. Cada elemento dentro da String ocupa uma posição dentro dessa String. O primeiro elemento está no índice 0, o próximo no índice 1, e assim sucessivamente. O tamanho de uma String é a quantidade de elementos que ela possui. Você pode criar strings usando strings literais ou objetos string.

- -

Strings literais

- -

Você pode criar strings usando aspas simples ou aspas duplas:

- -
'foo'
-"bar"
- -

Strings mais avançadas podem ser criadas usando sequências de escape:

- -

Sequências de escape hexadecimais

- -

O número depois de \x é interpretado como um número hexadecimal.

- -
'\xA9' // "©"
-
- -

Sequências de escape unicode

- -

As sequências de escape unicode requerem no mínimo quatro caracteres depois do \u.

- -
'\u00A9' // "©"
- -

Sequências de escape Unicode code point

- -

É novo no ECMAScript 6. Com essas sequências, cada caractere pode ser "escapado" usando números hexadecimais, sendo possível usar pontos de código Unicode de até 0x10FFFF. Com escapes Unicode simples muitas vezes é necessário escrever as metades substitutas separadamente para obter o mesmo resultado.

- -

Veja também {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.

- -
'\u{2F804}'
-
-// o mesmo com escapes Unicode simples
-'\uD87E\uDC04'
- -

Objetos String

- -

O objeto {{jsxref("String")}} é como uma "capa" ao redor do tipo primitivo string.

- -
var s = new String("foo"); // Cria um objeto String
-console.log(s); // Exibe no console: { '0': 'f', '1': 'o', '2': 'o'}
-typeof s; // Retorna 'object'
-
- -

Você pode chamar qualquer um dos métodos do objeto String em cima de uma string literal — JavaScript automaticamente converte a string literal em um objeto String temporário, chama o método, e então descarta o objeto String temporário. Você pode também usar a propriedade String.length com uma string literal.

- -

Você deve usar strings literais a menos que você realmente precise usar um objeto String, pois objetos String podem ter comportamentos inesperados. Por exemplo:

- -
var s1 = "2 + 2"; // Cria uma string literal
-var s2 = new String("2 + 2"); // Creates um objeto String
-eval(s1); // Retorna o número 4
-eval(s2); // Retorna a string "2 + 2"
- -

Um objeto String possui uma propriedade, length, que indica o número de caracteres na string. Por exemplo, o código a seguir atribui o valor 11 à variável x, pois "Olá, mundo!" possui 11 caracteres:

- -
var minhaString = "Olá, mundo!";
-var x = minhaString.length;
-
- -

Um objeto String possui uma variedade de métodos: por exemplo aqueles que retornam uma variação da própria string, como substring e toUpperCase.

- -

A tabela a seguir lista os métodos de objetos {{jsxref("String")}}.

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

Métodos de String

-
MétodoDescrição
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retorna o código do caractere ou o caractere em uma posição específica na string.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retorna a posição de uma substring específica na string ou a última posição da substring específica, respectivamente.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retorna se uma string começa, termina ou contém uma outra string específica.
{{jsxref("String.concat", "concat")}}Concatena o texto de duas strings e retorna uma nova string.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Cria uma string a partir de uma sequência específica de valores Unicode. Esse é um método da classe String, não de uma instância do tipo String.
{{jsxref("String.split", "split")}}Separa um objeto String em um array de strings, separando a string em substrings.
{{jsxref("String.slice", "slice")}}Extrai uma seção de uma string e retorna uma nova string.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retorna um subconjunto específico de uma string, definindo os índices inicial e final, ou definindo um índice e um tamanho.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Trabalha com expressões regulares.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} -

Retorna a string com todos caracteres em minúsculo, ou maiúsculo, respectivamente.

-
{{jsxref("String.normalize", "normalize")}}Retorna a Forma Normalizada Unicode (Unicode Normalization Form) da string que chama o método.
{{jsxref("String.repeat", "repeat")}}Retorna uma string contendo os elementos do objeto repetidos pela quantidade de vezes dada.
{{jsxref("String.trim", "trim")}}Retira espaços em branco no começo e no final da string.
- -

Template strings com várias linhas

- -

Template strings são strings literais que permitem expressões no seu conteúdo. Você pode usar os recursos de strings com multiplas linhas e interpolações de string com as template strings.

- -

Template strings são declaradas com o acento grave (``) ao invés de aspas simples ou aspas duplas. Essas strings podem conter place holders. Os place holders são indicados pelo cifrão e com chaves ( ${expressao} ).

- -

Várias linhas (Multi-lines)

- -

Qualquer caractere de nova linha ( '\n' ) inserido na string também faz parte das template string. Usando strings normais, você teria que usar a sintaxe a seguir para conseguir uma string de várias linhas

- -
console.log("linha de texto 1\n\
-linha de texto 2");
-// "linha de texto 1
-// linha de texto 2"
- -

Para obter o mesmo efeito com strings multi-lines, você pode agora escrever:

- -
console.log(`linha de texto 1
-linha de texto 2`);
-// "linha de texto 1
-// linha de texto 2"
- -

Expressões inseridas

- -

Para conseguir inserir expressões com strings normais, você teria que usar a seguinte sintaxe:

- -
var a = 5;
-var b = 10;
-console.log("Quinze é " + (a + b) + " e\nnão " + (2 * a + b) + ".");
-// "Quinze é 15 e
-// não 20."
- -

Agora, com template strings, você tem a capacidade de usar uma forma mais simples e legível para fazer essas substituições:

- -
var a = 5;
-var b = 10;
-console.log(`Quinze é ${a + b} e\nnão ${2 * a + b}.`);
-// "Quinze é 15 e
-// não 20."
- -

Para mais informações, leia sobre Template strings na referência JavaScript.

- -

Internacionalização

- -

O objeto {{jsxref("Intl")}} é o namespace para a API de Internacionalização do ECMAScript, que oferece comparação de strings sensíveis à linguagem, formatação de números, e formatação de datas e horas. Os construtores para os objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}} são propriedades do objeto Intl.

- -

Formatação de data e hora

- -

O objeto {{jsxref("DateTimeFormat")}} é útil para a formatação de data e hora. O código a seguir formata uma data em inglês no formato que é utilizado nos Estados Unidos. (O resultado é diferente em outro fuso horário).

- -
var msPorDia = 24 * 60 * 60 * 1000; // número de milisegundos em um dia
-
-// July 17, 2014 00:00:00 UTC.
-var july172014 = new Date(msPorDia * (44 * 365 + 11 + 197));
-
-var opcoes = { year: "2-digit", month: "2-digit", day: "2-digit",
-                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
-var americanDateTime = new Intl.DateTimeFormat("en-US", opcoes).format;
-
-console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
-
- -

Formatação de números

- -

O objeto {{jsxref("NumberFormat")}} é útil para formatar números, por exemplo unidade monetária.

- -
var precoGasolina = new Intl.NumberFormat("en-US",
-                        { style: "currency", currency: "USD",
-                          minimumFractionDigits: 3 });
-
-console.log(precoGasolina.format(5.259)); // $5.259
-
-var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
-                        { style: "currency", currency: "CNY" });
-
-console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
-
- -

Collation

- -

O objeto {{jsxref("Collator")}} é usado para comparar e ordenar strings.

- -

Por exemplo, existem atualmente duas ordens diferentes de classificação no Alemão: listaTelefônica e dicionário. A ordenação da listaTelefônica enfatiza o som, e é como se "ä", "ö", e assim por diante, fossem expandidos para "ae", "oe", e assim sucessivamente, para definir a ordem.

- -
var nomes = ["Hochberg", "Hönigswald", "Holzman"];
-
-var phonebookAlemao = new Intl.Collator("de-DE-u-co-phonebk");
-
-// como se ordenasse ["Hochberg", "Hoenigswald", "Holzman"]:
-console.log(names.sort(phonebookAlemao.compare).join(", "));
-// imprime "Hochberg, Hönigswald, Holzman"
-
- -

Algumas palavras do alemão são conjugadas com tremas extras, mas no dicionário essas palavras são ordenadas ignorando os tremas (exceto quando ordenando palavras que tem apenas o trema como diferença: schon antes de schön).

- -
var dicionarioAlemao = new Intl.Collator("de-DE-u-co-dict");
-
-// como se ordenasse ["Hochberg", "Honigswald", "Holzman"]:
-console.log(names.sort(dicionarioAlemao.compare).join(", "));
-// imprime "Hochberg, Holzman, Hönigswald"
-
- -

Para mais informação sobre a API {{jsxref("Intl")}}, veja também Introducing the JavaScript Internationalization API (em inglês).

- -
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/pt-br/web/javascript/guide/functions/index.html b/files/pt-br/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..7077d1787b --- /dev/null +++ b/files/pt-br/web/javascript/guide/functions/index.html @@ -0,0 +1,640 @@ +--- +title: Funções +slug: Web/JavaScript/Guide/Funções +tags: + - Funções JavaScript + - Guia(2) + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

+ +

Veja também o capítulo de referência sobre funções JavaScript para conhecer os detalhes.

+ +

Definindo Funções

+ +

Declarando uma função

+ +

A definição da função (também chamada de declaração de função) consiste no uso da palavra chave function, seguida por:

+ +
    +
  • Nome da Função.
    • +
  • Lista de argumentos para a função, entre parênteses e separados por vírgulas.
    • +
  • Declarações JavaScript que definem a função, entre chaves { }.
    • +
+ +

Por exemplo, o código a seguir define uma função simples chamada square:

+ +
function square(numero) {
+  return numero * numero;
+}
+
+ +

A função square recebe um argumento chamado numero. A função consiste em uma instrução que indica para retornar o argumento da função (isto é, numero) multiplicado por si mesmo. A declaração return especifica o valor retornado pela função.

+ +
return numero * numero;
+
+ +

Parâmetros primitivos (como um número) são passados para as funções por valor; o valor é passado para a função, mas se a função altera o valor do parâmetro, esta mudança não reflete globalmente ou na função chamada.

+ +

Se você passar um objeto (ou seja, um  valor não primitivo, tal como {{jsxref("Array")}} ou um objeto definido por você) como um parâmetro e a função alterar as propriedades do objeto, essa mudança é visível fora da função, conforme mostrado no exemplo a seguir:

+ +
function minhaFuncao(objeto) {
+  objeto.make = "Toyota";
+}
+
+var meucarro = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = meucarro.make;     // x recebe o valor "Honda"
+
+minhaFuncao(meucarro);
+y = meucarro.make;     // y recebe o valor "Toyota"
+                    // (a propriedade make foi alterada pela função)
+
+ +

Expressão de função

+ +

Embora a declaração de função acima seja sintaticamente uma declaração, funções também podem ser criadas por uma expressão de função. Tal função pode ser anônima; ele não tem que ter um nome. Por exemplo, a função square poderia ter sido definida como:

+ +
var square = function(numero) {return numero * numero};
+var x = square(4) //x recebe o valor 16
+ +

No entanto, um nome pode ser fornecido com uma expressão de função e pode ser utilizado no interior da função para se referir a si mesma, ou em um debugger para identificar a função em stack traces:

+ +
var fatorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
+
+console.log(fatorial(3));
+
+ +

As expressões de função são convenientes ao passar uma função como um argumento para outra função. O exemplo a seguir mostra uma função map sendo definida e, em seguida, chamada com uma função anônima como seu primeiro parâmetro:

+ +
function map(f,a) {
+  var result = []; // Cria um novo Array
+  var i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

O código a seguir:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

retorna [0, 1, 8, 125, 1000].

+ +

Em JavaScript, uma função pode ser definida com base numa condição. Por exemplo, a seguinte definição de função define minhaFuncao somente se num  é igual a 0:

+ +
var minhaFuncao;
+if (num == 0){
+  minhaFuncao = function(objeto) {
+    objeto.make = "Toyota"
+  }
+}
+ +

Além de definir funções, você também pode usar o construtor {{jsxref("Function")}} para criar funções a partir de uma string em tempo real, como no método {{jsxref("eval()")}}.

+ +

Um método é uma função invocada por um objeto. Leia mais sobre objetos e métodos em Trabalhando com Objetos.

+ +

Chamando funções

+ +

A definição de uma função não a executa. Definir a função é simplesmente nomear a função e especificar o que fazer quando a função é chamada. Chamar a função executa realmente as ações especificadas com os parâmetros indicados. Por exemplo, se você definir a função square, você pode chamá-la do seguinte modo: 

+ +
square(5);
+
+ +

A declaração anterior chama a função com o argumento 5. A função executa as instruções e retorna o valor 25.

+ +

Funções devem estar no escopo quando são chamadas, mas a declaração de uma função pode ser puxada para o topo (aparecem abaixo da chamada no código), como neste exemplo:

+ +
console.log(square(5));
+/* ... */
+function square(n){return n*n}
+
+ +

O escopo de uma função é a função na qual ela é declarada, ou todo o programa se ela é declarada no nível superior.

+ +
+

Nota: Isso funciona apenas quando a definição da função usa a sintaxe acima (ex., function funcNome(){ }). O código a seguir não vai funcionar.

+
+ +
console.log(square(5));
+var square = function (n) {
+  return n * n;
+}
+
+ +

Os argumentos de uma função não estão limitados a strings e números. Você pode passar objetos para uma função. A função show_props (definido em Trabalhando com Objetos) é um exemplo de uma função que recebe um objeto como um argumento.

+ +

Um função pode chamar a si mesma. Por exemplo, a função que calcula os fatoriais recursivamente:

+ +
function fatorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * fatorial(n - 1));
+}
+
+ +

Você poderia, então, calcular os fatoriais de um a cinco:

+ +
var a, b, c, d, e;
+a = fatorial(1); // a recebe o valor 1
+b = fatorial(2); // b recebe o valor 2
+c = fatorial(3); // c recebe o valor 6
+d = fatorial(4); // d recebe o valor 24
+e = fatorial(5); // e recebe o valor 120
+
+ +

Há outras maneiras de chamar funções. Muitas vezes há casos em que uma função precisa ser chamada dinamicamente, ou o número de argumentos de uma função varia, ou em que o contexto da chamada de função precisa ser definido para um objeto específico determinado em tempo de execução. Acontece que as funções são, por si mesmas, objetos, e esses objetos por sua vez têm métodos (veja objeto {{jsxref("Function")}}). Um desses, o método {{jsxref("Function.apply", "apply()")}}, pode ser usado para atingir esse objetivo.

+ +

Escopo da função

+ +

As variáveis definidas no interior de uma função não podem ser acessadas de nenhum lugar fora da função, porque a variável está definida apenas no escopo da função. No entanto, uma função pode acessar todas variáveis e funções definida fora do escopo onde ela está definida. Em outras palavras, a função definida no escopo global pode acessar todas as variáveis definidas no escopo global. A função definida dentro de outra função também pode acessar todas as variáveis definidas na função hospedeira e outras variáveis ao qual a função hospedeira tem acesso.

+ +
// As seguintes variáveis são definidas no escopo global
+var num1 = 20,
+    num2 = 3,
+    nome = "Chamahk";
+
+// Esta função é definida no escopo global
+function multiplica() {
+  return num1 * num2;
+}
+
+multiplica(); // Retorna 60
+
+// Um exemplo de função aninhada
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return nome + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Retorna "Chamahk scored 5"
+
+ +

Escopo e a pilha de função

+ +

Recursão

+ +

Uma função pode referir-se e chamar a si própria. Há três maneiras de uma função referir-se a si mesma:

+ +
    +
  1. o nome da função
    2. +
  2. arguments.callee
    3. +
  3. uma variável no escopo que se refere a função
    4. +
+ +

Por exemplo, considere a seguinte definição de função:

+ +
var foo = function bar() {
+   // declaracoes
+};
+
+ +

Dentro do corpo da função, todos, a seguir, são equivalentes:

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

Uma função que chama a si mesma é chamada de função recursiva. Em alguns casos, a recursividade é análoga a um laço. Ambos executam o código várias vezes, e ambos necessitam de uma condição (para evitar um laço infinito, ou melhor, recursão infinita, neste caso). Por exemplo,  o seguinte laço:

+ +
var x = 0;
+while (x < 10) { // "x < 10" a condição do laço
+   // faça coisas
+   x++;
+}
+
+ +

pode ser convertido em função recursiva e uma chamada para a função:

+ +
function loop(x) {
+   if (x >= 10) // "x >= 10" a condição de parada (equivalente a "!(x < 10)")
+      return;
+   // faça coisas
+   loop(x + 1); // chamada recursiva
+}
+loop(0);
+
+ +

No entanto, alguns algoritmos não podem ser simples laços iterativos. Por exemplo, conseguir todos os nós da estrutura de uma árvore (por exemplo, o DOM) é mais fácil se feito recursivamente:

+ +
function walkTree(node) {
+   if (node == null) //
+      return;
+   // faça algo com o nó
+   for (var i = 0; i < node.childNodes.length; i++) {
+      walkTree(node.childNodes[i]);
+   }
+}
+
+ +

Em comparação ao laço da função, cada chamada recursiva realiza outras chamadas recursivas.

+ +

É possível converter qualquer algoritmo recursivo para um não recursivo, mas muitas vezes a lógica é muito mais complexa e exige o uso de pilhas. Na verdade a própria recursão usa pilha: a pilha de função.

+ +

O comportamento da pilha pode ser vista a seguir no exemplo:

+ +
function foo(i) {
+   if (i < 0)
+      return;
+   document.writeln('begin:' + i);
+   foo(i - 1);
+   document.writeln('end:' + i);
+}
+foo(3);
+
+ +

que produz:

+ +
begin:3
+begin:2
+begin:1
+begin:0
+end:0
+end:1
+end:2
+end:3
+
+ +

Funções aninhadas e closures

+ +

Você pode aninhar uma função dentro de outra. A função aninhada (interna) é acessível apenas para a função que a contém (exterior). Isso constitui também uma closure. Uma closure é uma expressão (tipicamente uma função) que pode ter variáveis livres em conjunto com um ambiente que conecta estas variáveis (que "fecha" a expressão).

+ +

Uma vez que uma função aninhada é uma closure, isto significa que uma função aninhada pode "herdar" os argumentos e variáveis de sua função de contenção. Em outras palavras, a função interior contém o escopo da função exterior.

+ +

Em resumo:

+ +
    +
  • A função interna só pode ser acessada a partir de declarações em função externa.
    • +
  • A função interna forma uma closure: a função  interna pode usar os argumentos e variáveis da função externa, enquanto a função externa não pode usar os argumentos e variáveis da função interna.
    • +
+ +

O exemplo a seguir mostra as funções aninhadas:

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+}
+a = addSquares(2,3); // retorna 13
+b = addSquares(3,4); // retorna 25
+c = addSquares(4,5); // retorna 41
+
+ +

Uma vez que a função interna forma uma closure, você pode chamar a função externa e especificar argumentos para a função externa e interna:

+ +
function fora(x) {
+   function dentro(y) {
+      return x + y;
+   }
+   return dentro;
+}
+fn_inside = fora(3); // Pense nisso como: Receba uma função que adicionará 3 ao que quer que você repasse para ela
+result = fn_inside(5); // retorna 8
+
+result1 = fora(3)(5); // retorna 8
+
+ +

Preservação  de variáveis

+ +

Observe como x é preservado quando dentro é retornado. Uma closure deve preservar os argumentos e variáveis em todos os escopos que ela referencia. Uma vez que cada chamada fornece potencialmente argumentos diferentes, uma nova closure é criada para cada chamada de fora. A memória só poderá ser liberada quando o dentro retornado já não é mais acessível.

+ +

Isso não é diferente de armazenar referências em outros objetos, mas muitas vezes é menos óbvio, porque um não define diretamente as referências e não pode inspecioná-las.

+ +

Múltiplas funções aninhadas

+ +

Funções podem ter múltiplo aninhamento, por exemplo, a função (A) contém a função (B) que contém a função (C). Tanto as funções B e C formam uma closure, então B pode acessar A, e C pode acessar B. Além disso, uma vez que C pode acessar B que pode acessar A, C também pode acessar A. Assim, a closure pode conter vários escopos; eles recursivamente contém o escopo das funções que os contém. Isso é chamado encadeamento de escopo. (O motivo de ser chamado "encadeamento" será explicado mais tarde).

+ +

Considere o seguinte exemplo:

+ +
function A(x) {
+   function B(y) {
+      function C(z) {
+         alert(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // Exibe um alerta com o valor 6 (1 + 2 + 3)
+
+ +

Neste exemplo, C acessa y do B e x do A. Isso pode ser feito porque:

+ +
    +
  1. B forma uma closure incluindo A, isto é, B pode acessar argumentos e variáveis de A.
    2. +
  2. C forma uma closure incluindo B.
    3. +
  3.  Devido a closure B inclui A, a closure C inclui A, C pode acessar tanto argumentos e variáveis de B como de A. Em outras palavras, C encadeia o escopo de B e A, nesta ordem.
    4. +
+ +

O inverso, no entanto, não é verdadeiro. A não pode acessar C, porque A não pode acessar qualquer argumento ou variável de B. Assim, C é privado somente a B.

+ +

Conflitos de nome

+ +

Quando dois argumentos ou variáveis nos escopos da closure tem o mesmo nome, há um conflito de nome. Mas escopos internos tem prioridade, por isso o escopo mais interno tem a maior prioridade, enquanto que o escopo mais externo tem a menor. Esta é a cadeia de escopo. O primeiro da cadeia é o escopo mais interno, e o último é o escopo mais externo. Considere o seguinte:

+ +
function fora() {
+   var x = 10;
+   function dentro(x) {
+      return x;
+   }
+   return dentro;
+}
+result = fora()(20); // retorna 20 em vez de 10
+
+ +

O  conflito de nome acontece na declaração return x e está entre o parâmetro x de dentro e a variável x de fora. A cadeia de escopo aqui é {dentro, fora, objeto global}. Por isso o x de dentro tem precedência sobre o x de fora, e 20 (x de dentro) é retornado em vez de 10 (x de fora).

+ +

Closures

+ +

Closures são um dos recursos mais poderosos de JavaScript. JavaScript permite o aninhamento de funções e garante acesso completo à função interna a todas as variáveis e funções definidas dentro da função externa (e todas as outras variáveis e funções que a função externa tem acesso). No entanto, a função externa não tem acesso às variáveis e funções definidas dentro da função interna. Isto proporciona uma espécie de segurança para as variáveis da função interna. Além disso, uma vez  que a função interna tem acesso ao escopo da função externa, as variáveis e funções definidas na função externa vão durar na memória mais do que a própria função externa, isto se a função interna permanecer na memória mais tempo do que a função externa. Uma closure é criada quando a função interna é de alguma forma disponibilizada para qualquer escopo fora da função externa.

+ +
var pet = function(nome) {          // A função externa define uma variável "nome"
+      var getNome = function() {
+        return nome;                // A função interna tem acesso à variável "nome"  da função externa
+      }
+
+      return getNome;               // Retorna a função interna, expondo-a assim para escopos externos
+    },
+    myPet = pet("Vivie");
+
+myPet();                            // Retorna "Vivie"
+
+ +

Ela pode ser  mais complexa que o código acima. Um objeto contendo métodos para manipular as variáveis da função externa pode ser devolvida.

+ +
var criarPet = function(nome) {
+  var sex;
+
+  return {
+    setNome: function(newNome) {
+      nome = newNome;
+    },
+
+    getNome: function() {
+      return nome;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" && (newSex.toLowerCase() == "macho" || newSex.toLowerCase() == "fêmea")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = criarPet("Vivie");
+pet.getNome();                  // Vivie
+
+pet.setNome("Oliver");
+pet.setSex("macho");
+pet.getSex();                   // macho
+pet.getNome();                  // Oliver
+
+ +

Nos códigos acima, a variável nome da função externa é acessível para as funções internas, e não há nenhuma outra maneira para acessar as variáveis internas, exceto pelas funções internas. As variáveis internas da função interna atuam como armazenamento seguro para as funções internas. Elas armazenam "persistentes", mas seguros, os dados com os quais as funções internas irão trabalhar. As funções não tem  que ser atribuídas a uma variável, ou ter um nome.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // Um código que não queremos que pessoas de fora sejam capazes de modificar
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Retorna o secureCode
+
+ +

Há, no entanto, uma série de armadilhas que se deve ter cuidado ao usar closures. Se uma função fechada define uma variável com o mesmo nome de uma variável em um escopo externo, não há nenhuma maneira de se referir para a variável em um escopo externo novamente.

+ +
var createPet = function(nome) {  // Função externa define uma variável chamada "nome"
+  return {
+    setNome: function(nome) {    // Função fechada define uma variável chamada "nome"
+      nome = nome;               // ??? Como podemos acessar o "nome" definido pela função externa ???
+    }
+  }
+}
+
+ +

A palavra reservada this é muito complicada em closures, elas têm de ser usadas com muito cuidado. O objeto ao que this se refere depende completamente de onde a função foi chamada, ao invés de onde ela foi definida.

+ +

Usando objeto de argumentos

+ +

Os argumentos de uma função são mantidos em um objeto do tipo array. Dentro de uma função, você pode endereçar os argumentos passados para ele conforme: 

+ +
arguments[i]
+
+ +

onde i é um número ordinal do argumento, começando com zero. Então, o primeiro argumento passado para a função seria arguments[0]. O número total de argumentos é indicado por arguments.length.

+ +

Usando o objeto arguments, você pode chamar a função com mais argumentos do que o formalmente declarado. Isso muitas vezes é útil se você não sabe de antemão quantos argumentos serão passados para a função. Você pode usar arguments.length para determinar a quantidade de argumentos passados para a função, e então acessar cada argumento usando o objeto arguments.

+ +

Por exemplo, considere uma função que concatena várias strings. O argumento formal para a função é uma string que especifica os caracteres que separam os itens para concatenar.  A função definida como segue:

+ +
function myConcat(separador) {
+   var result = "", // inicializa a lista
+       i;
+   // itera por meio de argumentos
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separador;
+   }
+   return result;
+}
+
+ +

Você pode passar qualquer quantidade de argumentos para esta função, e ela concatena cada argumento na string "list":

+ +
// retorna "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// retorna "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// retorna "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

Nota: A variável arguments é "como um array", mas não é um array. Ela é como um array pois possui um índice numerado e a propriedade length. No entanto, não possui todos os métodos de manipulação de array. 

+
+ +

Veja objeto {{jsxref("Function")}} na referência do JavaScript para maiores informações.

+ +

Parâmetros de função

+ +

Começando com ECMAScript 6, há dois tipos novos de parâmetros: parâmetros padrão e parâmetros rest.

+ +

Parâmetros padrão

+ +

Em JavaScript, parâmetros padrões de funções são undefined. No entanto, em algumas situações pode ser útil definir um valor padrão diferente. Isto é onde os parâmetros padrão podem ajudar.

+ +

No passado, a estratégia geral para definir padrões era testar os valores de parâmetro no corpo da função e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor é fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN. No entanto, isso é pego com a segunda linha neste exemplo:

+ +
function multiplicar(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiplicar(5); // 5
+ +

Com parâmetros padrão, a verificação no corpo da função não é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b no campo de declaração de parâmetros:

+ +
function multiplicar(a, b = 1) {
+  return a*b;
+}
+
+multiplicar(5); // 5
+ +

Mais detalhes, consulte parâmetros padrão na referência.

+ +

Parâmetros rest

+ +

A sintaxe de parâmetro rest permite representar um número indefinido de argumentos como um array. No exemplo, usamos parâmetros rest para coletar argumentos do segundo argumento ao último. Então os multiplicamos pelo primeiro argumento. Neste exemplo é usado uma arrow function, que será introduzida na próxima seção.

+ +
function multiplicar(multiplicador, ...args) {
+  return args.map(x => multiplicador * x);
+}
+
+var arr = multiplicar(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Funções de seta

+ +

Uma expressão função de seta (anteriormente conhecida como função de seta gorda) tem uma sintaxe pequena em comparação com a expressão de função e lexicalmente vincula o valor this. Funções de seta são sempre anônimas. Consulte também no blog hacks.mozilla.org no post: "ES6 In Depth: Arrow functions".

+ +

Dois fatores influenciaram a introdução de funções de seta: funções mais curtas e o léxico this.

+ +

Funções curtas

+ +

Em alguns padrões funcionais, funções curtas são bem-vindas. Compare:

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+
+var a3 = a.map( s => s.length );
+ +

Léxico this

+ +

Até as funções de seta, cada nova função definia seu próprio valor this (um novo objeto no caso de um construtor, indefinido em chamadas de função no modo estrito, o objeto de contexto se a função é chamada como um "método de objeto", etc.). Isso pode ser irritante com um estilo de programação orientada a objetos.

+ +
function Pessoa() {      // O construtor Pessoa() define 'this' como sendo ele.
+    this.idade = 0;
+    setInterval(function crescer() {    // No modo não estrito, a função crescer define 'this'
+            // como o objeto global, o que é diferente do 'this'
+            // definido pelo construtor Pessoa().
+            this.idade++;
+     }, 1000);
+}
+var p = new Pessoa();
+ +

No ECMAScript 3/5, este problema foi resolvido atribuindo o valor em this a uma variável que poderia ser fechada.

+ +
function Pessoa() {
+  var self = this; // Alguns preferem 'that' em vez de 'self'. 
+                   // Escolha um e seja consistente.
+  self.idade = 0;
+
+  setInterval(function crescer() {
+    // A chamada de retorno refere-se à variável 'self' na qual
+    // o valor é o objeto esperado.
+    self.idade++;
+  }, 1000);
+}
+ +

Como alternativa, uma função vinculada poderia ser criada para que o valor da propriedade this seja passado para a função crescer().

+ +

Funções de seta capturam o valor this do contexto delimitado, então o código a seguir funciona conforme o esperado.

+ +
function Pessoa(){
+  this.idade = 0;
+
+  setInterval(() => {
+    this.idade++; // propriedade |this|refere ao objeto pessoa
+  }, 1000);
+}
+
+var p = new Pessoa();
+ +

Funções pré-definidas

+ +

JavaScript tem várias funções pré-definidas:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

O método eval() avalia código JavaScript representado como uma string.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

O método uneval() cria uma representação de string do código-fonte de um  {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

A função global isFinite() determina se o valor passado é um número finito. Se necessário, o parâmetro é primeiro convertido para um número.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
+

A função isNaN() determina se um valor é {{jsxref("Global_Objects/NaN", "NaN")}} ou não. Nota: coerção dentro da função isNaN tem regras interessantes; você pode, alternativamente, querer usar {{jsxref("Number.isNaN()")}}, como definido no ECMAScript 6,  ou você pode usar typeof para determinar se o valor não é um número.

+
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

A função parseFloat() analisa um argumento do tipo string e retorna um número de ponto flutuante.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

A função parseInt() analisa um argumento do tipo string e retorna um inteiro da base especificada (base do sistema numérico).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

A função decodeURI() decodifica uma Uniform Resource Identifier (URI) criada anteriormente por {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou por uma rotina similar.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

O método decodeURIComponent() decodifica um componente Uniform Resource Identifier (URI) criado anteriormente por {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} ou por uma rotina similar.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

O método encodeURI() codifica um Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

O método encodeURIComponent() codifica um componente Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

O método obsoleto escape() calcula uma nova string na qual certos caracteres foram substituídos por uma sequência de escape hexadecimal. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} em vez disso.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

O método obsoleto unescape() calcula uma nova string na qual sequências de escape hexadecimais são substituídas pelo caractere que ela representa. As sequências de escape podem ser introduzidas por uma função como {{jsxref("Global_Objects/escape", "escape")}}. Por unescape() estar obsoleto, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} ou {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} ao invés dele.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git "a/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" "b/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" deleted file mode 100644 index 7077d1787b..0000000000 --- "a/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Funções -slug: Web/JavaScript/Guide/Funções -tags: - - Funções JavaScript - - Guia(2) - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -

Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

- -

Veja também o capítulo de referência sobre funções JavaScript para conhecer os detalhes.

- -

Definindo Funções

- -

Declarando uma função

- -

A definição da função (também chamada de declaração de função) consiste no uso da palavra chave function, seguida por:

- -
    -
  • Nome da Função.
    • -
  • Lista de argumentos para a função, entre parênteses e separados por vírgulas.
    • -
  • Declarações JavaScript que definem a função, entre chaves { }.
    • -
- -

Por exemplo, o código a seguir define uma função simples chamada square:

- -
function square(numero) {
-  return numero * numero;
-}
-
- -

A função square recebe um argumento chamado numero. A função consiste em uma instrução que indica para retornar o argumento da função (isto é, numero) multiplicado por si mesmo. A declaração return especifica o valor retornado pela função.

- -
return numero * numero;
-
- -

Parâmetros primitivos (como um número) são passados para as funções por valor; o valor é passado para a função, mas se a função altera o valor do parâmetro, esta mudança não reflete globalmente ou na função chamada.

- -

Se você passar um objeto (ou seja, um  valor não primitivo, tal como {{jsxref("Array")}} ou um objeto definido por você) como um parâmetro e a função alterar as propriedades do objeto, essa mudança é visível fora da função, conforme mostrado no exemplo a seguir:

- -
function minhaFuncao(objeto) {
-  objeto.make = "Toyota";
-}
-
-var meucarro = {make: "Honda", model: "Accord", year: 1998};
-var x, y;
-
-x = meucarro.make;     // x recebe o valor "Honda"
-
-minhaFuncao(meucarro);
-y = meucarro.make;     // y recebe o valor "Toyota"
-                    // (a propriedade make foi alterada pela função)
-
- -

Expressão de função

- -

Embora a declaração de função acima seja sintaticamente uma declaração, funções também podem ser criadas por uma expressão de função. Tal função pode ser anônima; ele não tem que ter um nome. Por exemplo, a função square poderia ter sido definida como:

- -
var square = function(numero) {return numero * numero};
-var x = square(4) //x recebe o valor 16
- -

No entanto, um nome pode ser fornecido com uma expressão de função e pode ser utilizado no interior da função para se referir a si mesma, ou em um debugger para identificar a função em stack traces:

- -
var fatorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
-
-console.log(fatorial(3));
-
- -

As expressões de função são convenientes ao passar uma função como um argumento para outra função. O exemplo a seguir mostra uma função map sendo definida e, em seguida, chamada com uma função anônima como seu primeiro parâmetro:

- -
function map(f,a) {
-  var result = []; // Cria um novo Array
-  var i;
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

O código a seguir:

- -
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
-
- -

retorna [0, 1, 8, 125, 1000].

- -

Em JavaScript, uma função pode ser definida com base numa condição. Por exemplo, a seguinte definição de função define minhaFuncao somente se num  é igual a 0:

- -
var minhaFuncao;
-if (num == 0){
-  minhaFuncao = function(objeto) {
-    objeto.make = "Toyota"
-  }
-}
- -

Além de definir funções, você também pode usar o construtor {{jsxref("Function")}} para criar funções a partir de uma string em tempo real, como no método {{jsxref("eval()")}}.

- -

Um método é uma função invocada por um objeto. Leia mais sobre objetos e métodos em Trabalhando com Objetos.

- -

Chamando funções

- -

A definição de uma função não a executa. Definir a função é simplesmente nomear a função e especificar o que fazer quando a função é chamada. Chamar a função executa realmente as ações especificadas com os parâmetros indicados. Por exemplo, se você definir a função square, você pode chamá-la do seguinte modo: 

- -
square(5);
-
- -

A declaração anterior chama a função com o argumento 5. A função executa as instruções e retorna o valor 25.

- -

Funções devem estar no escopo quando são chamadas, mas a declaração de uma função pode ser puxada para o topo (aparecem abaixo da chamada no código), como neste exemplo:

- -
console.log(square(5));
-/* ... */
-function square(n){return n*n}
-
- -

O escopo de uma função é a função na qual ela é declarada, ou todo o programa se ela é declarada no nível superior.

- -
-

Nota: Isso funciona apenas quando a definição da função usa a sintaxe acima (ex., function funcNome(){ }). O código a seguir não vai funcionar.

-
- -
console.log(square(5));
-var square = function (n) {
-  return n * n;
-}
-
- -

Os argumentos de uma função não estão limitados a strings e números. Você pode passar objetos para uma função. A função show_props (definido em Trabalhando com Objetos) é um exemplo de uma função que recebe um objeto como um argumento.

- -

Um função pode chamar a si mesma. Por exemplo, a função que calcula os fatoriais recursivamente:

- -
function fatorial(n){
-  if ((n == 0) || (n == 1))
-    return 1;
-  else
-    return (n * fatorial(n - 1));
-}
-
- -

Você poderia, então, calcular os fatoriais de um a cinco:

- -
var a, b, c, d, e;
-a = fatorial(1); // a recebe o valor 1
-b = fatorial(2); // b recebe o valor 2
-c = fatorial(3); // c recebe o valor 6
-d = fatorial(4); // d recebe o valor 24
-e = fatorial(5); // e recebe o valor 120
-
- -

Há outras maneiras de chamar funções. Muitas vezes há casos em que uma função precisa ser chamada dinamicamente, ou o número de argumentos de uma função varia, ou em que o contexto da chamada de função precisa ser definido para um objeto específico determinado em tempo de execução. Acontece que as funções são, por si mesmas, objetos, e esses objetos por sua vez têm métodos (veja objeto {{jsxref("Function")}}). Um desses, o método {{jsxref("Function.apply", "apply()")}}, pode ser usado para atingir esse objetivo.

- -

Escopo da função

- -

As variáveis definidas no interior de uma função não podem ser acessadas de nenhum lugar fora da função, porque a variável está definida apenas no escopo da função. No entanto, uma função pode acessar todas variáveis e funções definida fora do escopo onde ela está definida. Em outras palavras, a função definida no escopo global pode acessar todas as variáveis definidas no escopo global. A função definida dentro de outra função também pode acessar todas as variáveis definidas na função hospedeira e outras variáveis ao qual a função hospedeira tem acesso.

- -
// As seguintes variáveis são definidas no escopo global
-var num1 = 20,
-    num2 = 3,
-    nome = "Chamahk";
-
-// Esta função é definida no escopo global
-function multiplica() {
-  return num1 * num2;
-}
-
-multiplica(); // Retorna 60
-
-// Um exemplo de função aninhada
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return nome + " scored " + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // Retorna "Chamahk scored 5"
-
- -

Escopo e a pilha de função

- -

Recursão

- -

Uma função pode referir-se e chamar a si própria. Há três maneiras de uma função referir-se a si mesma:

- -
    -
  1. o nome da função
    2. -
  2. arguments.callee
    3. -
  3. uma variável no escopo que se refere a função
    4. -
- -

Por exemplo, considere a seguinte definição de função:

- -
var foo = function bar() {
-   // declaracoes
-};
-
- -

Dentro do corpo da função, todos, a seguir, são equivalentes:

- -
    -
  1. bar()
    2. -
  2. arguments.callee()
    3. -
  3. foo()
    4. -
- -

Uma função que chama a si mesma é chamada de função recursiva. Em alguns casos, a recursividade é análoga a um laço. Ambos executam o código várias vezes, e ambos necessitam de uma condição (para evitar um laço infinito, ou melhor, recursão infinita, neste caso). Por exemplo,  o seguinte laço:

- -
var x = 0;
-while (x < 10) { // "x < 10" a condição do laço
-   // faça coisas
-   x++;
-}
-
- -

pode ser convertido em função recursiva e uma chamada para a função:

- -
function loop(x) {
-   if (x >= 10) // "x >= 10" a condição de parada (equivalente a "!(x < 10)")
-      return;
-   // faça coisas
-   loop(x + 1); // chamada recursiva
-}
-loop(0);
-
- -

No entanto, alguns algoritmos não podem ser simples laços iterativos. Por exemplo, conseguir todos os nós da estrutura de uma árvore (por exemplo, o DOM) é mais fácil se feito recursivamente:

- -
function walkTree(node) {
-   if (node == null) //
-      return;
-   // faça algo com o nó
-   for (var i = 0; i < node.childNodes.length; i++) {
-      walkTree(node.childNodes[i]);
-   }
-}
-
- -

Em comparação ao laço da função, cada chamada recursiva realiza outras chamadas recursivas.

- -

É possível converter qualquer algoritmo recursivo para um não recursivo, mas muitas vezes a lógica é muito mais complexa e exige o uso de pilhas. Na verdade a própria recursão usa pilha: a pilha de função.

- -

O comportamento da pilha pode ser vista a seguir no exemplo:

- -
function foo(i) {
-   if (i < 0)
-      return;
-   document.writeln('begin:' + i);
-   foo(i - 1);
-   document.writeln('end:' + i);
-}
-foo(3);
-
- -

que produz:

- -
begin:3
-begin:2
-begin:1
-begin:0
-end:0
-end:1
-end:2
-end:3
-
- -

Funções aninhadas e closures

- -

Você pode aninhar uma função dentro de outra. A função aninhada (interna) é acessível apenas para a função que a contém (exterior). Isso constitui também uma closure. Uma closure é uma expressão (tipicamente uma função) que pode ter variáveis livres em conjunto com um ambiente que conecta estas variáveis (que "fecha" a expressão).

- -

Uma vez que uma função aninhada é uma closure, isto significa que uma função aninhada pode "herdar" os argumentos e variáveis de sua função de contenção. Em outras palavras, a função interior contém o escopo da função exterior.

- -

Em resumo:

- -
    -
  • A função interna só pode ser acessada a partir de declarações em função externa.
    • -
  • A função interna forma uma closure: a função  interna pode usar os argumentos e variáveis da função externa, enquanto a função externa não pode usar os argumentos e variáveis da função interna.
    • -
- -

O exemplo a seguir mostra as funções aninhadas:

- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-}
-a = addSquares(2,3); // retorna 13
-b = addSquares(3,4); // retorna 25
-c = addSquares(4,5); // retorna 41
-
- -

Uma vez que a função interna forma uma closure, você pode chamar a função externa e especificar argumentos para a função externa e interna:

- -
function fora(x) {
-   function dentro(y) {
-      return x + y;
-   }
-   return dentro;
-}
-fn_inside = fora(3); // Pense nisso como: Receba uma função que adicionará 3 ao que quer que você repasse para ela
-result = fn_inside(5); // retorna 8
-
-result1 = fora(3)(5); // retorna 8
-
- -

Preservação  de variáveis

- -

Observe como x é preservado quando dentro é retornado. Uma closure deve preservar os argumentos e variáveis em todos os escopos que ela referencia. Uma vez que cada chamada fornece potencialmente argumentos diferentes, uma nova closure é criada para cada chamada de fora. A memória só poderá ser liberada quando o dentro retornado já não é mais acessível.

- -

Isso não é diferente de armazenar referências em outros objetos, mas muitas vezes é menos óbvio, porque um não define diretamente as referências e não pode inspecioná-las.

- -

Múltiplas funções aninhadas

- -

Funções podem ter múltiplo aninhamento, por exemplo, a função (A) contém a função (B) que contém a função (C). Tanto as funções B e C formam uma closure, então B pode acessar A, e C pode acessar B. Além disso, uma vez que C pode acessar B que pode acessar A, C também pode acessar A. Assim, a closure pode conter vários escopos; eles recursivamente contém o escopo das funções que os contém. Isso é chamado encadeamento de escopo. (O motivo de ser chamado "encadeamento" será explicado mais tarde).

- -

Considere o seguinte exemplo:

- -
function A(x) {
-   function B(y) {
-      function C(z) {
-         alert(x + y + z);
-      }
-      C(3);
-   }
-   B(2);
-}
-A(1); // Exibe um alerta com o valor 6 (1 + 2 + 3)
-
- -

Neste exemplo, C acessa y do B e x do A. Isso pode ser feito porque:

- -
    -
  1. B forma uma closure incluindo A, isto é, B pode acessar argumentos e variáveis de A.
    2. -
  2. C forma uma closure incluindo B.
    3. -
  3.  Devido a closure B inclui A, a closure C inclui A, C pode acessar tanto argumentos e variáveis de B como de A. Em outras palavras, C encadeia o escopo de B e A, nesta ordem.
    4. -
- -

O inverso, no entanto, não é verdadeiro. A não pode acessar C, porque A não pode acessar qualquer argumento ou variável de B. Assim, C é privado somente a B.

- -

Conflitos de nome

- -

Quando dois argumentos ou variáveis nos escopos da closure tem o mesmo nome, há um conflito de nome. Mas escopos internos tem prioridade, por isso o escopo mais interno tem a maior prioridade, enquanto que o escopo mais externo tem a menor. Esta é a cadeia de escopo. O primeiro da cadeia é o escopo mais interno, e o último é o escopo mais externo. Considere o seguinte:

- -
function fora() {
-   var x = 10;
-   function dentro(x) {
-      return x;
-   }
-   return dentro;
-}
-result = fora()(20); // retorna 20 em vez de 10
-
- -

O  conflito de nome acontece na declaração return x e está entre o parâmetro x de dentro e a variável x de fora. A cadeia de escopo aqui é {dentro, fora, objeto global}. Por isso o x de dentro tem precedência sobre o x de fora, e 20 (x de dentro) é retornado em vez de 10 (x de fora).

- -

Closures

- -

Closures são um dos recursos mais poderosos de JavaScript. JavaScript permite o aninhamento de funções e garante acesso completo à função interna a todas as variáveis e funções definidas dentro da função externa (e todas as outras variáveis e funções que a função externa tem acesso). No entanto, a função externa não tem acesso às variáveis e funções definidas dentro da função interna. Isto proporciona uma espécie de segurança para as variáveis da função interna. Além disso, uma vez  que a função interna tem acesso ao escopo da função externa, as variáveis e funções definidas na função externa vão durar na memória mais do que a própria função externa, isto se a função interna permanecer na memória mais tempo do que a função externa. Uma closure é criada quando a função interna é de alguma forma disponibilizada para qualquer escopo fora da função externa.

- -
var pet = function(nome) {          // A função externa define uma variável "nome"
-      var getNome = function() {
-        return nome;                // A função interna tem acesso à variável "nome"  da função externa
-      }
-
-      return getNome;               // Retorna a função interna, expondo-a assim para escopos externos
-    },
-    myPet = pet("Vivie");
-
-myPet();                            // Retorna "Vivie"
-
- -

Ela pode ser  mais complexa que o código acima. Um objeto contendo métodos para manipular as variáveis da função externa pode ser devolvida.

- -
var criarPet = function(nome) {
-  var sex;
-
-  return {
-    setNome: function(newNome) {
-      nome = newNome;
-    },
-
-    getNome: function() {
-      return nome;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex == "string" && (newSex.toLowerCase() == "macho" || newSex.toLowerCase() == "fêmea")) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = criarPet("Vivie");
-pet.getNome();                  // Vivie
-
-pet.setNome("Oliver");
-pet.setSex("macho");
-pet.getSex();                   // macho
-pet.getNome();                  // Oliver
-
- -

Nos códigos acima, a variável nome da função externa é acessível para as funções internas, e não há nenhuma outra maneira para acessar as variáveis internas, exceto pelas funções internas. As variáveis internas da função interna atuam como armazenamento seguro para as funções internas. Elas armazenam "persistentes", mas seguros, os dados com os quais as funções internas irão trabalhar. As funções não tem  que ser atribuídas a uma variável, ou ter um nome.

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // Um código que não queremos que pessoas de fora sejam capazes de modificar
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Retorna o secureCode
-
- -

Há, no entanto, uma série de armadilhas que se deve ter cuidado ao usar closures. Se uma função fechada define uma variável com o mesmo nome de uma variável em um escopo externo, não há nenhuma maneira de se referir para a variável em um escopo externo novamente.

- -
var createPet = function(nome) {  // Função externa define uma variável chamada "nome"
-  return {
-    setNome: function(nome) {    // Função fechada define uma variável chamada "nome"
-      nome = nome;               // ??? Como podemos acessar o "nome" definido pela função externa ???
-    }
-  }
-}
-
- -

A palavra reservada this é muito complicada em closures, elas têm de ser usadas com muito cuidado. O objeto ao que this se refere depende completamente de onde a função foi chamada, ao invés de onde ela foi definida.

- -

Usando objeto de argumentos

- -

Os argumentos de uma função são mantidos em um objeto do tipo array. Dentro de uma função, você pode endereçar os argumentos passados para ele conforme: 

- -
arguments[i]
-
- -

onde i é um número ordinal do argumento, começando com zero. Então, o primeiro argumento passado para a função seria arguments[0]. O número total de argumentos é indicado por arguments.length.

- -

Usando o objeto arguments, você pode chamar a função com mais argumentos do que o formalmente declarado. Isso muitas vezes é útil se você não sabe de antemão quantos argumentos serão passados para a função. Você pode usar arguments.length para determinar a quantidade de argumentos passados para a função, e então acessar cada argumento usando o objeto arguments.

- -

Por exemplo, considere uma função que concatena várias strings. O argumento formal para a função é uma string que especifica os caracteres que separam os itens para concatenar.  A função definida como segue:

- -
function myConcat(separador) {
-   var result = "", // inicializa a lista
-       i;
-   // itera por meio de argumentos
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separador;
-   }
-   return result;
-}
-
- -

Você pode passar qualquer quantidade de argumentos para esta função, e ela concatena cada argumento na string "list":

- -
// retorna "red, orange, blue, "
-myConcat(", ", "red", "orange", "blue");
-
-// retorna "elephant; giraffe; lion; cheetah; "
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// retorna "sage. basil. oregano. pepper. parsley. "
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
- -
-

Nota: A variável arguments é "como um array", mas não é um array. Ela é como um array pois possui um índice numerado e a propriedade length. No entanto, não possui todos os métodos de manipulação de array. 

-
- -

Veja objeto {{jsxref("Function")}} na referência do JavaScript para maiores informações.

- -

Parâmetros de função

- -

Começando com ECMAScript 6, há dois tipos novos de parâmetros: parâmetros padrão e parâmetros rest.

- -

Parâmetros padrão

- -

Em JavaScript, parâmetros padrões de funções são undefined. No entanto, em algumas situações pode ser útil definir um valor padrão diferente. Isto é onde os parâmetros padrão podem ajudar.

- -

No passado, a estratégia geral para definir padrões era testar os valores de parâmetro no corpo da função e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor é fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN. No entanto, isso é pego com a segunda linha neste exemplo:

- -
function multiplicar(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiplicar(5); // 5
- -

Com parâmetros padrão, a verificação no corpo da função não é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b no campo de declaração de parâmetros:

- -
function multiplicar(a, b = 1) {
-  return a*b;
-}
-
-multiplicar(5); // 5
- -

Mais detalhes, consulte parâmetros padrão na referência.

- -

Parâmetros rest

- -

A sintaxe de parâmetro rest permite representar um número indefinido de argumentos como um array. No exemplo, usamos parâmetros rest para coletar argumentos do segundo argumento ao último. Então os multiplicamos pelo primeiro argumento. Neste exemplo é usado uma arrow function, que será introduzida na próxima seção.

- -
function multiplicar(multiplicador, ...args) {
-  return args.map(x => multiplicador * x);
-}
-
-var arr = multiplicar(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Funções de seta

- -

Uma expressão função de seta (anteriormente conhecida como função de seta gorda) tem uma sintaxe pequena em comparação com a expressão de função e lexicalmente vincula o valor this. Funções de seta são sempre anônimas. Consulte também no blog hacks.mozilla.org no post: "ES6 In Depth: Arrow functions".

- -

Dois fatores influenciaram a introdução de funções de seta: funções mais curtas e o léxico this.

- -

Funções curtas

- -

Em alguns padrões funcionais, funções curtas são bem-vindas. Compare:

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-
-var a3 = a.map( s => s.length );
- -

Léxico this

- -

Até as funções de seta, cada nova função definia seu próprio valor this (um novo objeto no caso de um construtor, indefinido em chamadas de função no modo estrito, o objeto de contexto se a função é chamada como um "método de objeto", etc.). Isso pode ser irritante com um estilo de programação orientada a objetos.

- -
function Pessoa() {      // O construtor Pessoa() define 'this' como sendo ele.
-    this.idade = 0;
-    setInterval(function crescer() {    // No modo não estrito, a função crescer define 'this'
-            // como o objeto global, o que é diferente do 'this'
-            // definido pelo construtor Pessoa().
-            this.idade++;
-     }, 1000);
-}
-var p = new Pessoa();
- -

No ECMAScript 3/5, este problema foi resolvido atribuindo o valor em this a uma variável que poderia ser fechada.

- -
function Pessoa() {
-  var self = this; // Alguns preferem 'that' em vez de 'self'. 
-                   // Escolha um e seja consistente.
-  self.idade = 0;
-
-  setInterval(function crescer() {
-    // A chamada de retorno refere-se à variável 'self' na qual
-    // o valor é o objeto esperado.
-    self.idade++;
-  }, 1000);
-}
- -

Como alternativa, uma função vinculada poderia ser criada para que o valor da propriedade this seja passado para a função crescer().

- -

Funções de seta capturam o valor this do contexto delimitado, então o código a seguir funciona conforme o esperado.

- -
function Pessoa(){
-  this.idade = 0;
-
-  setInterval(() => {
-    this.idade++; // propriedade |this|refere ao objeto pessoa
-  }, 1000);
-}
-
-var p = new Pessoa();
- -

Funções pré-definidas

- -

JavaScript tem várias funções pré-definidas:

- -
-
{{jsxref("Global_Objects/eval", "eval()")}}
-
-

O método eval() avalia código JavaScript representado como uma string.

-
-
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
-
-

O método uneval() cria uma representação de string do código-fonte de um  {{jsxref("Object")}}.

-
-
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
-
-

A função global isFinite() determina se o valor passado é um número finito. Se necessário, o parâmetro é primeiro convertido para um número.

-
-
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
-
-

A função isNaN() determina se um valor é {{jsxref("Global_Objects/NaN", "NaN")}} ou não. Nota: coerção dentro da função isNaN tem regras interessantes; você pode, alternativamente, querer usar {{jsxref("Number.isNaN()")}}, como definido no ECMAScript 6,  ou você pode usar typeof para determinar se o valor não é um número.

-
-
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
-
-

A função parseFloat() analisa um argumento do tipo string e retorna um número de ponto flutuante.

-
-
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
-
-

A função parseInt() analisa um argumento do tipo string e retorna um inteiro da base especificada (base do sistema numérico).

-
-
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
-
-

A função decodeURI() decodifica uma Uniform Resource Identifier (URI) criada anteriormente por {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou por uma rotina similar.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
-
-

O método decodeURIComponent() decodifica um componente Uniform Resource Identifier (URI) criado anteriormente por {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} ou por uma rotina similar.

-
-
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
-
-

O método encodeURI() codifica um Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

-
-
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
-
-

O método encodeURIComponent() codifica um componente Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

-
-
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
-
-

O método obsoleto escape() calcula uma nova string na qual certos caracteres foram substituídos por uma sequência de escape hexadecimal. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} em vez disso.

-
-
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
-
-

O método obsoleto unescape() calcula uma nova string na qual sequências de escape hexadecimais são substituídas pelo caractere que ela representa. As sequências de escape podem ser introduzidas por uma função como {{jsxref("Global_Objects/escape", "escape")}}. Por unescape() estar obsoleto, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} ou {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} ao invés dele.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/pt-br/web/javascript/guide/grammar_and_types/index.html b/files/pt-br/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..7920ee6b1a --- /dev/null +++ b/files/pt-br/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,601 @@ +--- +title: Sintaxe e tipos +slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' +tags: + - Guia(2) + - Guía + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

+ +

Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.

+ +

Sintaxe básica

+ +

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

+ +

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, a palavra Früh (que significa "cedo" em Alemão) pode ser usada como nome de variável.

+ +
var Früh = "foobar";
+ +

Mas a variável früh não é a mesma que Früh porque JavaScript é case sensitive.

+ +

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declaração")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.

+ +

Comentários

+ +

A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:

+ +
// comentário de uma linha
+
+/* isto é um comentário longo
+   de múltiplas linhas.
+ */
+
+/* Você não pode, porém, /* aninhar comentários */ SyntaxError */
+ +

Declarações

+ +

Existem três tipos de declarações em JavaScript.

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declara uma variável, opcionalmente, inicializando-a com um valor.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Declara uma constante de escopo de bloco, apenas de leitura.
+
+ +

Variáveis

+ +

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.

+ +

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).

+ +

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

+ +

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

+ +

Declarando variáveis

+ +

Você pode declarar uma variável de três formas:

+ +
    +
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais.
    • +
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • +
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • +
+ +

Classificando variáveis

+ +

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.

+ +

Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:

+ +
var a;
+console.log("O valor de a é " + a); // saída "O valor de a é undefined"
+console.log("O valor de b é " + b); // executa uma exception de erro de referência (ReferenceError)
+
+ +

Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).

+ +
var input;
+if(input === undefined){
+  facaIsto();
+} else {
+  facaAquilo();
+}
+
+ +

O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:

+ +
var myArray = [];
+if (!myArray[0]) myFunction();
+
+ +

O valor undefined converte-se para NaN quando usado no contexto numérico.

+ +
var a;
+a + 2;  // Avaliado como NaN
+
+ +

Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:

+ +
var n = null;
+console.log(n * 32); // a saída para o console será 0.
+
+ +

Escopo de variável

+ +

Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local,  pois ela está disponível somente dentro dessa função.

+ +

JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if. 

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y não está definido
+
+ +

Variável de elevação

+ +

Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.

+ +
/**
+ * Exemplo 1
+ */
+console.log(x === undefined); // exibe "true"
+var x = 3;
+
+/**
+ * Exemplo 2
+ */
+// retornará um valor undefined
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+
+ +

Os exemplos acima serão interpretados como:

+ +
/**
+ * Exemplo 1
+ */
+var x;
+console.log(x === undefined); // exibe "true"
+x = 3;
+
+/**
+ * Exemplo 2
+ */
+var myvar = "um valor";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "valor local";
+})();
+
+ +

Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.

+ +

Variáveis Globais

+ +

Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel. 

+ +

Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.

+ +

Constantes

+ +

Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, sublinhado ou cifrão e pode conter caractere alfabético, numérico ou sublinhado.

+ +
const PI = 3.14;
+
+ +

Uma constante não pode alterar seu valor por meio de uma atribuição ou ser declarada novamente enquanto o script está em execução. Deve ser inicializada com um valor.

+ +

As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, presume-se que o identificador represente uma variável.

+ +

Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: 

+ +
// Isto irá causar um  erro
+function f() {};
+const f = 5;
+
+// Isto também irá causar um erro.
+function f() {
+  const g = 5;
+  var g;
+
+  //declarações
+}
+
+ +

Estrutura de dados e tipos

+ +

Tipos de dados

+ +

O mais recente padrão ECMAScript define sete tipos de dados:

+ +
    +
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: +
      +
    • {{Glossary("Boolean")}}. true e false.
      • +
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • +
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • +
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • +
    • {{Glossary("String")}}. "Howdy"
      • +
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • +
    +
    • +
  • e {{Glossary("Object")}}
    • +
+ +

Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  {{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funções")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.

+ +

Conversão de tipos de dados

+ +

JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:

+ +
var answer = 42;
+
+ +

E depois, você pode atribuir uma string para a mesma variável, por exemplo:

+ +
answer = "Obrigado pelos peixes...";
+
+ +

Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.

+ +

Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:

+ +
x = "A resposta é " + 42 // "A resposta é 42"
+y = 42 + " é a resposta" // "42 é a resposta"
+
+ +

Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

Convertendo strings para números

+ +

No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.

+ +
    +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("parseFloat", "parseFloat()")}}
    • +
+ +

parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.

+ +

Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
+ +

Literais

+ +

Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:

+ +
    +
  • {{anch("Array literal")}}
    • +
  • {{anch("Literais boolean")}}
    • +
  • {{anch("Literais de ponto flutuante")}}
    • +
  • {{anch("Inteiros")}}
    • +
  • {{anch("Objeto literal")}}
    • +
  • {{anch("String literal")}}
    • +
+ +

Array literal

+ +

Um array literal é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.

+ +

O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +
+

Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.

+
+ +

Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.

+ +

Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e Coleções indexadas para detalhes sobre array de objetos.

+ +

Vírgulas extras em array literal

+ +

Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:

+ +
var fish = ["Lion", , "Angel"];
+
+ +

Esse array tem dois elementos com valores e um elemento vazio (fish[0] é "Lion", fish[1] é undefined, e fish[2] é "Angel" ).

+ +

Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.

+ +
+

Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.

+
+ +
var myList = ['home', , 'school', ];
+
+ +

No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.

+ +
var myList = ['home', , 'school', , ];
+
+ +

Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.

+ +

Literais Boolean

+ +

O tipo Boolean tem dois valores literal: true e false.

+ +

Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.

+ +

Inteiros

+ +

Inteiros podem ser expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

+ +
    +
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • +
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • +
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • +
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • +
+ +

Alguns exemplos de inteiros literal são:

+ +
0, 117 and -345 (decimal, base 10)
+015, 0001 and -077 (octal, base 8)
+0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
+0b11, 0b0011 and -0b11 (binário, base 2)
+
+ +

Para maiores informações, veja Literais numérico na referência Léxica.

+ +

Literais de ponto flutuante

+ +

Um literal de ponto flutuante pode ter as seguintes partes:

+ +
    +
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • +
  • Um ponto decimal ("."),
    • +
  • Uma fração (outro número decimal),
    • +
  • Um expoente.
    • +
+ +

O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").

+ +

Mais sucintamente, a sintaxe é:

+ +
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
+
+ +

Por exemplo:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

Objeto literal

+ +

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.

+ +

Segue um exemplo de um objeto literal. O primeiro elemento do objeto carro define uma propriedade, meuCarro, e atribui para ele uma nova string, "Punto"; o segundo elemento, a propriedade getCarro, é imediatamente atribuído o resultado de chamar uma função (tipoCarro("Fiat")); o terceiro elemento, a propriedade especial, usa uma variável existente (vendas).

+ +
var vendas = "Toyota";
+
+function tipoCarro(nome) {
+  if (nome == "Fiat") {
+    return nome;
+  } else {
+    return "Desculpa, não vendemos carros " + nome + ".";
+  }
+}
+
+var carro = { meuCarro: "Punto", getCarro: tipoCarro("Fiat"), especial: vendas };
+
+console.log(carro.meuCarro);   // Punto
+console.log(carro.getCarro);  // Fiat
+console.log(carro.especial); // Toyota
+
+ +

Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.

+ +
var carro = { carros: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(carro.carros.b); // Jeep
+console.log(carro[7]); // Mazda
+
+ +

Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array ("[]").

+ +
var unusualPropertyNames = {
+  "": "Uma string vazia",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
+console.log(unusualPropertyNames[""]);  // Um string vazia
+console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
+console.log(unusualPropertyNames["!"]); // Bang!
+ +

Observe:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a não está definido
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

 

+ +

Expressão Regex Literal

+ +

Um regex literal é um padrão entre barras. A seguir um exemplo de regex literal.

+ +
var re = /ab+c/;
+ +

String Literal

+ +

Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.

+ +
"foo"
+'bar'
+"1234"
+"um linha \n outra linha"
+"John's cat"
+
+ +

Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:

+ +
console.log("John's cat".length)
+// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
+// Nesse caso, 10 caracteres.
+
+ +

Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.

+ +

Uso de caracteres especiais em string

+ +

Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.

+ +
"uma linha \n outra linha"
+
+ +

A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabela: Caracteres especiais no JavaScript
CaracterDescrição
\0Byte nulo
\bBackspace
\fAlimentador de formulário
\nNova linha
\rRetorno do carro
\tTabulação
\vTabulação vertical
\'Apóstrofo ou aspas simples
\"Aspas dupla
\\Caractere de barra invertida
\XXX +

Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.

+
\xXX +

Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.

+
\uXXXX +

Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode.

+
+ +

Caracteres de escape

+ +

Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.

+ +

Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como escaping das aspas. Por exemplo:

+ +
var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
+console.log(quote);
+
+ +

O resultado disso seria:

+ +
Ele lê "The Cremation of Sam McGee" de R.W. Service.
+
+ +

Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:

+ +
var home = "c:\\temp";
+
+ +

Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.

+ +
var str = "esta string \
+está quebrada \
+em várias\
+linhas."
+console.log(str);   // esta string está quebrada em várias linhas.
+
+ +

Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:

+ +
var poema =
+"Rosas são vermelhas\n\
+Violetas são azuis,\n\
+Esse seu sorriso\n\
+é o que me seduz. (Lucas Pedrosa)"
+
+ +

Mais informação

+ +

Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:

+ + + +

No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/pt-br/web/javascript/guide/igualdade/index.html b/files/pt-br/web/javascript/guide/igualdade/index.html deleted file mode 100644 index 57f1c2fdcc..0000000000 --- a/files/pt-br/web/javascript/guide/igualdade/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Igualdade em JavaScript -slug: Web/JavaScript/Guide/Igualdade -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness ---- -

A ES6 possui três facilidades internas para determinar se algum x e algum y são "os mesmos". Elas são: igualdade ou "igual duplo" (==), igualdade rigorosa ou "igual triplo" (===), e Object.is. (Note que Object.is foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)

-

Visão geral

-

Para demonstração, aqui estão as três comparações de igualdade em uso:

-
x == y
-
x === y
-
Object.is(x, y)
-

De modo breve, o operador igual duplo irá realizar uma conversão de tipo na hora de  comparar duas coisas; o operador igual triplo fará a mesma comparação sem conversão de tipo (simplesmente sempre retornando false se os tipos forem diferentes); e Object.is se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com NaN e -0 e +0 de modo que os dois últimos não são considerados os mesmos, enquanto que Object.is(NaN, NaN) será true. (Comparar NaN com NaN geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em false, de acordo com a IEEE 754.)

-

Note que a distinção entre todas essas formas de comparação tem a ver com a forma com que lidam com primitivos; nenhuma delas compara se os parâmetros são conceitualmente similares em estrutura. Para quaisquer objetos não-primitivos x e y que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor false.

-

Por exemplo:

-
let x = { value: 17 };
-let y = { value: 17 };
-console.log(Object.is(x, y)); // false;
-console.log(x === y);         // false
-console.log(x == y);          // false
-

Igualdade abstrata, igualdade rigorosa, e mesmo valor

-

Na ES5, a comparação realizada por == é descrita na Seção 11.9.3, O Algoritmo de Igualdade Abstrata. A comparação === é descrita em 11.9.6, O Algoritmo de Igualdade Rigorosa. (Dê uma olhada nestes. Eles são rápidos e legíveis. Dica: leia o algoritmo de igualdade rigorosa primeiro.) A ES5 também descreve, na Seção 9.12, O Algoritmo de MesmoValor para ser usado internamente pelo engine JS. Ele é em sua maioria similar ao Algoritmo de Igualdade Rigorosa, com exceção de que 11.9.6.4 e 9.12.4 diferem na forma de lidar com Numbers (números). A ES6 simplesmente propõe expôr esse algoritmo através de Object.is.

-

Podemos ver que com os operadores igual duplo e igual triplo, com a exceção de fazer uma checagem de tipo de início em 11.9.6.1, o Algoritmo de Igualdade Rigorosa é um subconjunto do Algoritmo de Igualdade Abstrata, pois 11.9.6.2–7 corresponde a 11.9.3.1.a–f.

-

Um modelo para entender comparações de igualdade?

-

Antes da ES6, você pode ter dito, a respeito dos operadores igual duplo e igual triplo, que um é uma versão "melhorada" do outro. Por exemplo, alguém poderia dizer que o operador igual duplo é uma versão extendidad do operador igual triplo, pois o primeiro faz tudo que o último faz, com conversão de tipo em seus operandos (por exemplo, de modo que 6 == "6"). Alternativamente, alguém poderia dizer que o operador igual triplo é uma versão melhorada do operador igual duplo, pois requer que os dois operandos sejam do mesmo tipo. Qual é melhor depende de qual é a sua idéia de patamar.

-

No entanto, essa forma de pensar sobre os operados de igualdade internos não é um modelo que pode ser "esticado" para permitir um lugar para o Object.is da ES6 nesse "espectro". O Object.is não é simplesmente "menos restrito" do que o operador igual duplo ou "mais restrito" do que o operador igual triplo, nem cabe em algum lugar entre esses níveis (isto é, sendo mais restrito que o operador igual duplo, mas menos restrito que o operador igual triplo). Nós podemos ver da tabela de comparações de igualdade abaixo que isto é devido à forma com que Object.is lida com NaN. Perceba que se Object.is(NaN, NaN) resultasse no valor false, nós poderíamos dizer que ele cabe no espectro pouco restrito/restrito como uma forma ainda mais restrita do operador igual triplo, uma que faz distinção entre -0 e +0. A forma de lidar com NaN significa que isso não é verdade, no entanto. Infelizmente, Object.is simplesmente deve ser considerado em termos de duas características específicas, ao invés de sua rigorosidade (ou falta da mesma) com respeito aos operadores de igualdade.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Comparações de Igualdade
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
-

Quando usar Object.is versus o operador igual triplo

-

Além da forma com que trata o valor it NaN, de modo geral, o único caso em o comportamento especial de Object.is com a relação a zeros é capaz de ser de interesse é na busca de certos esquemas de metaprogramação, especialmente em relação a descritores de propriedade quando é desejável que seu trabalho espelhe algumas das características de Object.defineProperty. Se seu caso de uso não requer isso, sugere-se evitar-se Object.is e usar-se o operador === ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores NaN resultem em true, de modo geral é mais fácil fazer-se uma checagem especial por NaNs (usando-se o método isNaN disponíveis de versões anteritores da ECMAScript) do que lidar com como computações externas possam afetar o sinal de quaisquer zeros que você possa encontrar em sua comparação.

-

Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre -0 e +0 se manifeste em seu código:

-
-
- - (negação unária)
-
-
-
-

É óbvio que negar 0 produz -0. Mas a abstração de uma expressão pode fazer com o valor -0 apareça de modo despercebido. Por exemplo, considere o seguinte:

- 
let stoppingForce = obj.mass * -obj.velocity
-

Se obj.velocity é 0 (ou resulta no valor 0), um -0 é introduzido naquele ponto e propaga-se para stoppingForce.

-
-
-
-
- Math.atan2
-
- Math.ceil
-
- Math.pow
-
- Math.round
-
-
-
- É possível que um -0 seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum -0 existe como um dos parâmetros. Por exemplo, usando-se Math.pow para elevar o valor -Infinity à potência de qualquer expoente negativo ímpar resulta no valor -0. Veja a documentação para os métodos individuais.
-
-
-
- Math.floor
-
- Math.max
-
- Math.min
-
- Math.sin
-
- Math.sqrt
-
- Math.tan
-
-
-
- É possível obter-se um valor de retorno -0 desses métodos em alguns casos quando um -0 existe como um dos parâmetros. Por exemplo, Math.min(-0, +0) resulta no valor -0. Veja a documentação para os métodos individuais.
-
-
-
- ~
-
- <<
-
- >>
-
- Cada um desses operadores usa o algoritmo ToInt32 internamente. Uma vez que só há uma representação para o valor 0 no tipo inteiro de 32 bits interno, o valor -0 não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos Object.is(~~(-0), -0) e Object.is(-0 << 2 >> 2, -0) resultam no valor false.
-
-

Contar com Object.is quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre -0 e +0, ele faz exatamente o que é desejado.gual

diff --git a/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html b/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html deleted file mode 100644 index d6aad53066..0000000000 --- a/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Herança e cadeia de protótipos (prototype chain) -slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain -tags: - - herança intermediário JavaScript OOP -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -
{{jsSidebar("Advanced")}}
- -

JavaScript é um pouco confuso para desenvolvedores com experiência em linguagens baseadas em classes (como Java ou C++), porque é dinâmico e não dispõe de uma implementação de uma class (a palavra-chave class foi introduzida no ES2015, mas é syntax sugar, o JavaScript permanece baseado em prototype).

- -

Quando se trata de herança, o JavaScript tem somente um construtor: objetos. Cada objeto tem um link interno para um outro objeto chamado prototype. Esse objeto prototype também tem um atributo prototype, e assim por diante até o que o valor null seja encontrado como sendo o seu prototype. null que, por definição, não tem prototype, e age como um link final nesta cadeia de protótipos (prototype chain).

- -

Isto muitas vezes é considerado como um dos pontos fracos do JavaScript, mas o modelo de herança prototipal é de fato mais potente do que o modelo clássico. É, por exemplo, relativamente trivial construir um "modelo clássico" (como na implementaçao de class), enquanto o contrário é uma tarefa muito mais difícil.

- -

1 N. da T: Como em uma implementação de fila em C, por exemplo.

- -

Herança com o encadeamento de protótipos

- -

Propriedades de heranças

- -

Objetos em JavaScript são "sacos" dinâmicos de propriedades (a que se refere as próprias propriedades) e cada um tem um link para um objeto prototype. Eis o que acontece quando se tenta acessar uma propriedade:

- -
// Vamos criar um objeto o da função f com suas próprias propriedades a e b:
-let f = function () {
-   this.a = 1;
-   this.b = 2;
-}
-let o = new f(); // {a: 1, b: 2}
-
-// adicionar propriedades no protótipo da função f
-f.prototype.b = 3;
-f.prototype.c = 4;
-
-// não defina o protótipo f.prototype = {b: 3, c: 4}; isso vai quebrar a cadeia de protótipos
-// o. [[Prototype]] possui propriedades bec.
-// o. [[Prototype]]. [[Prototype]] é Object.prototype.
-// Finalmente, o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo.
-// Este é o fim da cadeia de protótipos, como nulo,
-// por definição, não possui [[Prototype]].
-// Assim, a cadeia completa de protótipos se parece com:
-// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null dfdf
-
-console.log(o.a); // 1
-// Existe uma propriedade 'a' no objeto o? Sim, e seu valor é 1.
-
-console.log(o.b); // 2
-// Existe uma propriedade própria 'b' em o? Sim, e seu valor é 2.
-// O protótipo também tem uma propriedade 'b', mas não é visitado.
-// Isso é chamado de sombreamento de propriedade(Property Shadowing)
-
-console.log(o.c); // 4
-// Existe uma propriedade própria 'c' em o? Não, verifique seu protótipo.
-// Existe uma propriedade 'c' própria em o. [[Prototype]]? Sim, seu valor é 4.
-
-console.log(o.d); // undefined
-// Existe uma propriedade 'd' própria em o? Não, verifique seu prototype.
-// Existe uma propriedade 'd' em o. [[Prototype]]? Não, verifique seu prototype.
-// o. [[Prototype]]. [[Prototype]] é Object.prototype e não há propriedade 'd' por padrão, verifique seu prototype.
-// o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo, pare de pesquisar,
-// nenhuma propriedade encontrada, retorne indefinido.
-
- -

Code Link

- -

Atribuir uma propriedade a um objeto cria uma propriedade nele. A única exceção às regras de obtenção e definição de comportamento é quando há uma propriedade herdada com um getter or a setter.

- -

Herença de "métodos"

- -

JavaScript não tem "métodos" como os que conhecemos em linguagens baseadas em classes. Em JavaScript, qualquer função pode ser adicionada em um objeto em forma de propriedade. Uma herança de funções age como a herança de quaisquers outras propriedades que não sejam funções, e podemos inclusive realizar sobre-escrita de função(method overriding)!

- -

Quando uma herança de função é executada, o valor de this aponta para o objeto que herdou as propriedades, não para o objeto prototype onde as propriedades foram escritas originalmente.

- -
var o = {
-  a: 2,
-  m: function(b){
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// Ao chamar 'o.m' neste caso, "this" refere-se a 'o'
-
-var p = Object.create(o);
-// 'p' é um objeto que foi herdado de 'o'
-
-p.a = 12; // cria uma propriedade 'a' no objeto 'p'
-console.log(p.m()); // 13
-// Ao chamar 'p.m', 'this' refere-se a 'p'
-// Então, quando 'p' herda a função de 'm' de 'o', 'this.a' representa 'p.a' que é a própria propriedade 'a' de 'p'
-
-
- -

Maneiras de criar objetos e resultados dos protótipos encadeados

- -

Objetos criados com sintaxe de construtores

- -
var o = {a: 1};
-
-// O recém-criado objecto 'o' tem Object.prototype como o seu [[Prototype]]
-// 'o' não tem não tem uma propriedade chamada 'hasOwnProperty'
-// hasOwnProperty é uma propriedade própria de Object.prototype. Então 'o' herda hasOwnProperty de Object.prototype
-
-// Object.prototype tem null como seu protótipo.
-// o ---> Object.prototype ---> null
-
-var a = ["yo", "whadup", "?"];
-
-// Arrays herdam de Array.prototype (que tem métodos como indexOf, forEach, etc.)
-// A cadeia de protótipos se parece com isso:
-// a ---> Array.prototype ---> Object.prototype ---> null
-
-function f(){
-  return 2;
-}
-
-// Funções herdam de Function.prototype (que tem métodos como call, bind, etc.)
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

Com um construtor

- -

Um "construtor" em JavaScript é "somente" uma função que passa a ser chamada com o operador new.

- -
function Graph() {
-  this.vertexes = [];
-  this.edges = [];
-}
-
-Graph.prototype = {
-  addVertex: function(v){
-    this.vertexes.push(v);
-  }
-};
-
-var g = new Graph();
-// 'g' é um objeto com as propriedades 'vertexes' e 'edges'.
-// g.[[Prototype]] é o valor de Graph.prototype quando new Graph() é executada.
-
- -

Com Object.create

- -

ECMAScript 5 introduziu o novo método: Object.create. Invocando este método podemos criar novos objetos. O prototype destes novos objetos é o primeiro argumento do método:

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (inherited)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined, porque não herda de Object.prototype
-
- -
-

Performace

- -

O tempo de pesquisa para as propriedades que estão no alto da cadeia de protótipos pode ter um impacto negativo no desempenho, e isso pode ser significativo no código em que o desempenho é crítico. Além disso, tentando acessar propriedades inexistentes vai sempre atravessar a cadeia cheia do protótipo (full prototype chain).

- -

Porém, quando estamos interagindo com as propriedades de um objeto, toda propriedade que está na cadeia do prototype (prototype chain) vai ser enumerada.

- -

Para verificar se um objeto tem uma propriedade definida em si mesmo e não em algum lugar na sua cadeia de protótipo, é necessário usar o método hasOwnProperty que todos os objetos herdam do Object.prototype.

- -

hasOwnProperty é a única alternativa em JavaScript que lida com propriedades sem atravessar a cadeia de protótipos.

- - -
Observação: Não é suficiente apenas verificar se o valor da propriedade é undefined para saber se ela existe. A propriedade pode muito bem existir e não ter sido inicializada, sendo assim o seu valor undefined.
- -
-

Má Pratica: Estender protótipos nativos

- -

Um erro frequentemente cometido por programadores é estender um Object.prototype.

- -

Esta técnica é chamada de "monkey patching" e quebra o encapsulamento. Não existe uma boa razão para desorganizar tipos nativos do JavaScript para adicionar uma nova funcionalidade ao mesmo. 

- -

O único bom motivo para estender um protótipo nativo do JavaScript é para dar suporte a novas "features" do JavaScript; por exemplo: Array.forEach, etc.

-
- -
-

Conclusão

- -

É essencial entender bem  "prototypal inheritance" antes de escrever códigos complexos. Tome cuidado com o tamanho da sua cadeia de protótipos, quebre a cadeia caso necessário para evitar problemas de performace. Nunca estenda protótipos nativos a menos que seja para conseguir compatibilidade com novas "features" do JavaScript.

- - -
-
- -

{{ languages( {"zh-cn": "zh-cn/JavaScript/Guide/Inheritance_and_the_prototype_chain" } ) }}

diff --git a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html b/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html deleted file mode 100644 index 13a9b87f11..0000000000 --- a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Iteratores e geradores -slug: Web/JavaScript/Guide/Iteratores_e_geradores -tags: - - Generators - - Guia(2) - - Intermediario(2) - - Iteradores - - JavaScript -translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
- -

Processar cada item em uma coleção é uma operação muito comum. O JavaScript disponibiliza uma série de maneiras de iterar sobre uma coleção, desde um simples laço {{jsxref("Statements/for","for")}}, até um {{jsxref("Global_Objects/Array/map","map()")}} e também com o {{jsxref("Global_Objects/Array/filter","filter()")}}. Iteradores e Geradores trazem o conceito da interação ocorrer diretamente no núcleo da linguagem e prover um mecanismo para a customização do comportamento dos laços {{jsxref("Statements/for...of","for...of")}}.

- -

Para detalhes, também veja:

- -
    -
  • Protocolos de iteração
    • -
  • {{jsxref("Statements/for...of","for...of")}}
    • -
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • -
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • -
- -

Iterators (Iteradores)

- -

Um objeto é um iterator (iterador) quando sabe como acessar itens numa coleção, um por vez, enquanto mantém rastreada a posição atual em uma dada sequência. Em JavaScript um iterator é um objeto que oferece o método next(), o qual retorna o próximo item da sequência. Este método retorna um objeto com duas propriedades: done e value.

- -

Uma vez criado, um objeto iterator pode ser usado explicitamente ao chamar repetidas vezes o método next().

- -
const makeIterator = (array) => {
-
-let nextIndex = 0;
-
-return {
- next : () => {
-   return nextIndex < array.length ?
-    {value: array[nextIndex ++], done: false} :
-    {done: true};
-   }
- }
-};
- -

Uma vez inicializado, o método next() pode ser chamado para acessar os pares chave/valor do objeto da vez.

- -
let it = makeIterator(['yo', 'ya']);
-console.log(it.next().value); // 'yo'
-console.log(it.next().value); // 'ya'
-console.log(it.next().done);  // true
- -

Iterables (Iteráveis)

- -

Um objeto é iterável (iterable), se ele define seu comportamento de iteração, como no caso de quais valores percorridos em um laço do tipo {{jsxref("Statements/for...of", "for..of")}}. Alguns tipos embutidos, como o {{jsxref("Array")}}, ou o {{jsxref("Map")}}, têm um comportamento iterável padrão, enquanto outros tipos (como o{{jsxref("Object")}}) não possuem.

- -

Para que um objeto seja iterable, o objeto precisa implemntar o método @@iterator, significando que o objeto (ou um dos objetos na cadeia de prototipagem  - prototype chain) precisa ter uma propriedade com uma chave {{jsxref("Symbol.iterator")}}:

- -

Iterables definidos pelo usuário

- -

Nós podemos fazer, criar, os nossos próprios iteráveis como aqui:

- -
var myIterable = {}
-myIterable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...myIterable] // [1, 2, 3]
-
- -

Iterables Built-in (Iteráveis Embutidos)

- -

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} são iteráveis embutidos, pois o protótipo dos objetos de todos eles têm o método {{jsxref("Symbol.iterator")}}.

- -

Syntaxes expecting iterables

- -

Algumas declarações e expressões esperam por iteradores, por exemplo o {{jsxref("Statements/for...of","for-of")}} loops, {{jsxref("Operators/Spread_operator","spread operator","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e {{jsxref("Operators/Destructuring_assignment","destructuring assignment","","true")}}.

- -
for(let value of ["a", "b", "c"]){
-    console.log(value)
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"] // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"]
-}
-
-gen().next() // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"])
-a // "a"
-
-
- -

Generators

- -

Enquanto os iteradores são ferramentas muito úteis, sua criação requer um cuidado devido a necessidade de manter explicito seu estado interno. {{jsxref("Global_Objects/Generator","Generators","","true")}} provê uma alternativa poderosa: eles te permitem definir um algorítimo iterativo escrevendo uma função simples que pode manter seu estado próprio.

- -

Generator é um tipo especial de função que trabalha como uma factory para iteradores. A função vira um generator se ela contém uma ou mais expressões {{jsxref("Operators/yield","yield")}} e se ela usa a sintaxe {{jsxref("Statements/function*","function*")}}.

- -
function* idMaker(){
-  var index = 0;
-  while(true)
-    yield index++;
-}
-
-var gen = idMaker();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Generators avançados

- -

Generators computam seus valores "yielded" por demanda, que os permitem representar sequencias de forma eficiente que costumam ser trabalhosas ao serem computadas, ou até sequencias infinitas como demonstradas acima.

- -

O método {{jsxref("Global_Objects/Generator/next","next()")}} também aceita um valor que pode ser usado para modificar o estado interno de um generator. O valor passado pro next() será tratado como o resultado da última expressão yield que pausou o generator.

- -

Aqui um gerador de sequencia fibonacci usando next(x) pra restartar a sequencia:

- -
function* fibonacci(){
-  var fn1 = 1;
-  var fn2 = 1;
-  while (true){
-    var current = fn2;
-    fn2 = fn1;
-    fn1 = fn1 + current;
-    var reset = yield current;
-    if (reset){
-        fn1 = 1;
-        fn2 = 1;
-    }
-  }
-}
-
-var sequence = fibonacci();
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
-console.log(sequence.next().value);     // 5
-console.log(sequence.next().value);     // 8
-console.log(sequence.next().value);     // 13
-console.log(sequence.next(true).value); // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
- -
Nota: Como um ponto de interesse, chamando next(undefined) é o mesmo que chamar next(). Entretanto, estartar um novo generator com qualquer valor que não seja undefined na chamada next() terá TypeError exception.
- -

Você pode forçar um generator a lançar uma exceção chamando o seu método {{jsxref("Global_Objects/Generator/throw","throw()")}}  e passando o valor da exceção que ele deve lançar. Essa exceção será lançada do contexto suspenso atual do generator, como se o yield atualmente suspenso fosse um throw.

- -

Se um yield não for encontrado durante o processo de lançamento de um thrown exception, então o exception será propagado através da chamada do throw(), e pra subsequente chamada do next() que terá a propriedade done resultando em true.

- -

Generators tem o método {{jsxref("Global_Objects/Generator/return","return(value)")}} que retorna o valor pego e finaliza o generator.

- -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/iterators_and_generators/index.html b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..13a9b87f11 --- /dev/null +++ b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,161 @@ +--- +title: Iteratores e geradores +slug: Web/JavaScript/Guide/Iteratores_e_geradores +tags: + - Generators + - Guia(2) + - Intermediario(2) + - Iteradores + - JavaScript +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
+ +

Processar cada item em uma coleção é uma operação muito comum. O JavaScript disponibiliza uma série de maneiras de iterar sobre uma coleção, desde um simples laço {{jsxref("Statements/for","for")}}, até um {{jsxref("Global_Objects/Array/map","map()")}} e também com o {{jsxref("Global_Objects/Array/filter","filter()")}}. Iteradores e Geradores trazem o conceito da interação ocorrer diretamente no núcleo da linguagem e prover um mecanismo para a customização do comportamento dos laços {{jsxref("Statements/for...of","for...of")}}.

+ +

Para detalhes, também veja:

+ +
    +
  • Protocolos de iteração
    • +
  • {{jsxref("Statements/for...of","for...of")}}
    • +
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • +
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • +
+ +

Iterators (Iteradores)

+ +

Um objeto é um iterator (iterador) quando sabe como acessar itens numa coleção, um por vez, enquanto mantém rastreada a posição atual em uma dada sequência. Em JavaScript um iterator é um objeto que oferece o método next(), o qual retorna o próximo item da sequência. Este método retorna um objeto com duas propriedades: done e value.

+ +

Uma vez criado, um objeto iterator pode ser usado explicitamente ao chamar repetidas vezes o método next().

+ +
const makeIterator = (array) => {
+
+let nextIndex = 0;
+
+return {
+ next : () => {
+   return nextIndex < array.length ?
+    {value: array[nextIndex ++], done: false} :
+    {done: true};
+   }
+ }
+};
+ +

Uma vez inicializado, o método next() pode ser chamado para acessar os pares chave/valor do objeto da vez.

+ +
let it = makeIterator(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+ +

Iterables (Iteráveis)

+ +

Um objeto é iterável (iterable), se ele define seu comportamento de iteração, como no caso de quais valores percorridos em um laço do tipo {{jsxref("Statements/for...of", "for..of")}}. Alguns tipos embutidos, como o {{jsxref("Array")}}, ou o {{jsxref("Map")}}, têm um comportamento iterável padrão, enquanto outros tipos (como o{{jsxref("Object")}}) não possuem.

+ +

Para que um objeto seja iterable, o objeto precisa implemntar o método @@iterator, significando que o objeto (ou um dos objetos na cadeia de prototipagem  - prototype chain) precisa ter uma propriedade com uma chave {{jsxref("Symbol.iterator")}}:

+ +

Iterables definidos pelo usuário

+ +

Nós podemos fazer, criar, os nossos próprios iteráveis como aqui:

+ +
var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+
+ +

Iterables Built-in (Iteráveis Embutidos)

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} são iteráveis embutidos, pois o protótipo dos objetos de todos eles têm o método {{jsxref("Symbol.iterator")}}.

+ +

Syntaxes expecting iterables

+ +

Algumas declarações e expressões esperam por iteradores, por exemplo o {{jsxref("Statements/for...of","for-of")}} loops, {{jsxref("Operators/Spread_operator","spread operator","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e {{jsxref("Operators/Destructuring_assignment","destructuring assignment","","true")}}.

+ +
for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+
+ +

Generators

+ +

Enquanto os iteradores são ferramentas muito úteis, sua criação requer um cuidado devido a necessidade de manter explicito seu estado interno. {{jsxref("Global_Objects/Generator","Generators","","true")}} provê uma alternativa poderosa: eles te permitem definir um algorítimo iterativo escrevendo uma função simples que pode manter seu estado próprio.

+ +

Generator é um tipo especial de função que trabalha como uma factory para iteradores. A função vira um generator se ela contém uma ou mais expressões {{jsxref("Operators/yield","yield")}} e se ela usa a sintaxe {{jsxref("Statements/function*","function*")}}.

+ +
function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Generators avançados

+ +

Generators computam seus valores "yielded" por demanda, que os permitem representar sequencias de forma eficiente que costumam ser trabalhosas ao serem computadas, ou até sequencias infinitas como demonstradas acima.

+ +

O método {{jsxref("Global_Objects/Generator/next","next()")}} também aceita um valor que pode ser usado para modificar o estado interno de um generator. O valor passado pro next() será tratado como o resultado da última expressão yield que pausou o generator.

+ +

Aqui um gerador de sequencia fibonacci usando next(x) pra restartar a sequencia:

+ +
function* fibonacci(){
+  var fn1 = 1;
+  var fn2 = 1;
+  while (true){
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 1;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next().value);     // 13
+console.log(sequence.next(true).value); // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+ +
Nota: Como um ponto de interesse, chamando next(undefined) é o mesmo que chamar next(). Entretanto, estartar um novo generator com qualquer valor que não seja undefined na chamada next() terá TypeError exception.
+ +

Você pode forçar um generator a lançar uma exceção chamando o seu método {{jsxref("Global_Objects/Generator/throw","throw()")}}  e passando o valor da exceção que ele deve lançar. Essa exceção será lançada do contexto suspenso atual do generator, como se o yield atualmente suspenso fosse um throw.

+ +

Se um yield não for encontrado durante o processo de lançamento de um thrown exception, então o exception será propagado através da chamada do throw(), e pra subsequente chamada do next() que terá a propriedade done resultando em true.

+ +

Generators tem o método {{jsxref("Global_Objects/Generator/return","return(value)")}} que retorna o valor pego e finaliza o generator.

+ +

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html b/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html deleted file mode 100644 index fcf7437612..0000000000 --- a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Laços e iterações -slug: Web/JavaScript/Guide/Lacos_e_iteracoes -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -
-

Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo do guia do JavaScript abordará diferentes formas de iterações existentes no JavaScript.

-
- -

Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:

- -
var passo;
-for (passo = 0; passo < 5; passo++) {
-  // Executa 5 vezes, com os valores de passos de 0 a 4.
-  console.log('Ande um passo para o leste');
-}
-
- -

Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.

- -

Os possíveis laços de repetição  em JavaScript:

- -
    -
  • {{anch("for_statement")}}
    • -
  • {{anch("do...while_statement")}}
    • -
  • {{anch("while_statement")}}
    • -
  • {{anch("label_statement")}}
    • -
  • {{anch("break_statement")}}
    • -
  • {{anch("continue_statement")}}
    • -
  • {{anch("for...in_statement")}}
    • -
  • {{anch("for...of_statement")}}
    • -
- -

Declaração for

- -

Um laço for é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:

- -
for ([expressaoInicial]; [condicao]; [incremento])
-  declaracao
-
- -

Quando um for é executado, ocorre o seguinte:

- -
    -
  1. A expressão expressao Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
    2. -
  2. A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condicao é falso, então o laço terminará. Se a expressão condicao é omitida, a condicao é assumida como verdadeira.
    3. -
  3.  A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
    4. -
  4. A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
    5. -
- -

Exemplo

- -

A função a seguir contém uma declaração for que contará o número de opções selecionadas em uma lista (um elemento {{HTMLElement("select")}} permite várias seleções). Dentro do for é declarado uma váriavel i inicializada com zero. A declaração for verifica se i é menor que o número de opções no elemento <select>, executa sucessivas declaração  if, e incrementa i de um em um a cada passagem pelo laço.

- -
<form name="selectForm">
-  <p>
-    <label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
-    <select id="tipoMusica" name="tipoMusica" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classico</option>
-      <option>Ópera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numeroSelecionadas = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numeroSelecionadas++;
-    }
-  }
-  return numeroSelecionadas;
-}
-
-var btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
-});
-</script>
-
-
- -

Declaração do...while

- -

A instrução do...while repetirá até que a condição especificada seja falsa.

- -
do
-  declaracao
-while (condicao);
-
- -

A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a condicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a condicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a do...while.

- -

Exemplo

- -

No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que i seja menor que 5.

- -
do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

Declaração while

- -

Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while: 

- -
while (condicao)
-  declaracao
-
- -

Se a condição se tornar falsa,  a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.

- -

O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.

- -

Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.

- -

Exemplo 1

- -

O while a seguir executará enquanto n for menor que três:

- -
n = 0;
-x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

A cada iteração, o laço incrementa n e adiciona este valor para x. Portanto, x e n recebem os seguintes valores:

- -
    -
  • Depois de executar pela primeira vez: n = 1 e x = 1
    • -
  • Depois da segunda vez: n = 2 e x = 3
    • -
  • Depois da terceira vez: n = 3 e x = 6
    • -
- -

Depois de executar pela terceira vez, a condição n < 3 não será mais verdadeira, então o laço encerrará.

- -

Exemplo 2

- -

Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:

- -
while (true) {
-  console.log("Olá, mundo");
-}
- -

Declaração label

- -

Um label provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usar break ou continue para indicar quando o programa deverá interromper o laço ou continuar sua execução.

- -

Segue a sintaxe da instrução label:

- -
label : declaracao
-
- -

Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.

- -

Exemplo

- -

Neste exemplo, o label markLoop idenfica um laço while.

- -
markLoop:
-while (theMark == true) {
-   facaAlgo();
-}
- -

Declaração break

- -

Use break para terminar laços, switch, ou um conjunto que utiliza label.

- -
    -
  • Quando você utiliza break sem um label, ele encerrará imediatamente o laço mais interno while, do-while, for, ou switch e transferirá o controle para a próxima instrução.
    • -
  • Quando você utiliza break com um label, ele encerrará o label específico.
    • -
- -

Segue a sintaxe do break:

- -
    -
  1. break;
    2. -
  2. break label;
    3. -
- -

Na primeira opção será encerrado o laço de repetição mais interno ou switch. Já na segunda opção será encerrada o bloco de código referente a label.

- -

Exemplo 1

- -

O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido em theValue:

- -
for (i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Exemplo 2: Utilizando break em label

- -
var x = 0;
-var z = 0
-labelCancelaLaco: while (true) {
-  console.log("Laço exterior: " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Laço interior: " + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelaLaco;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

Declaração continue

- -

A declaração continue pode ser usada para reiniciar uma instrução while, do-while, for, ou label.

- -
    -
  • Quando você utiliza continue sem uma label, ele encerrará a iteração atual mais interna de uma instrução while, do-while, ou for e continuará a execução do laço a partir da próxima iteração. Ao contrário da instrução break, continue não encerra a execução completa do laço. Em um laço while, ele voltará para a condição. Em um laço for, ele pulará para a expressão de incrementação.
    • -
  • Quando você utiliza continue com uma label, o continue será aplicado ao laço identificado por esta label. 
    • -
- -

Segue a sintaxe do continue:

- -
    -
  1. continue;
    2. -
  2. continue label;
    3. -
- -

Exemplo 1

- -

O exemplo a seguir mostra um laço while utlizando continue que executará quando o valor de i for igual a 3. Desta forma, n recebe os valores um, três, sete, e doze.

- -
i = 0;
-n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Exemplo 2

- -

Uma instrução label checkiandj contém uma instrução label checkj. Se o continue for executado, o programa terminará a iteração atual de checkj e começará a próxima iteração. Toda vez que o continue for executado, checkj recomeçará até que a condição do while for falsa. Quando isto ocorrer checkiandj executará até que sua condição seja falsa.

- -

Se o continue estivesse referenciando checkiandj, o programa deveria continuar do topo de checkiandj.

- -
checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + " é estranho.");
-      }
-      console.log("i = " + i);
-      console.log("j = " + j);
-  }
- -

Declaração for...in

- -

A declaração for...in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.
- Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:

- -
for (variavel in objeto) {
-  declaracoes
-}
-
- -

Exemplo

- -

A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.

- -
function dump_props(obj, obj_name) {
-  var result = "";
-  for (var i in obj) {
-    result += obj_name + "." + i + " = " + obj[i] + "<br>";
-  }
-  result += "<hr>";
-  return result;
-}
-
- -

Para um objeto chamado car com propriedades make e model, o resultado será:

- -
car.make = Ford
-car.model = Mustang
-
- -

Arrays

- -

Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaração for...in irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicional for com index numérico quando interagir com arrays, pois o for...in interage com as propriedades definidas pelo programador ao invés dos elementos do array.

- -

Declaração for...of

- -

 A declaração for...of cria uma laço com objetos interativos ((incluindo, {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.

- -
for (variavel of objeto) {
-  declaracoes
-}
- -

O exemplo a seguir mostra a diferença entre o for...of e o for...in. Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades.

- -
let arr = [3, 5, 7];
-arr.foo = "hello";
-
-for (let i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // logs "3", "5", "7"
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/pt-br/web/javascript/guide/loops_and_iteration/index.html b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..fcf7437612 --- /dev/null +++ b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,333 @@ +--- +title: Laços e iterações +slug: Web/JavaScript/Guide/Lacos_e_iteracoes +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +
+

Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo do guia do JavaScript abordará diferentes formas de iterações existentes no JavaScript.

+
+ +

Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:

+ +
var passo;
+for (passo = 0; passo < 5; passo++) {
+  // Executa 5 vezes, com os valores de passos de 0 a 4.
+  console.log('Ande um passo para o leste');
+}
+
+ +

Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.

+ +

Os possíveis laços de repetição  em JavaScript:

+ +
    +
  • {{anch("for_statement")}}
    • +
  • {{anch("do...while_statement")}}
    • +
  • {{anch("while_statement")}}
    • +
  • {{anch("label_statement")}}
    • +
  • {{anch("break_statement")}}
    • +
  • {{anch("continue_statement")}}
    • +
  • {{anch("for...in_statement")}}
    • +
  • {{anch("for...of_statement")}}
    • +
+ +

Declaração for

+ +

Um laço for é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:

+ +
for ([expressaoInicial]; [condicao]; [incremento])
+  declaracao
+
+ +

Quando um for é executado, ocorre o seguinte:

+ +
    +
  1. A expressão expressao Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
    2. +
  2. A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condicao é falso, então o laço terminará. Se a expressão condicao é omitida, a condicao é assumida como verdadeira.
    3. +
  3.  A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
    4. +
  4. A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
    5. +
+ +

Exemplo

+ +

A função a seguir contém uma declaração for que contará o número de opções selecionadas em uma lista (um elemento {{HTMLElement("select")}} permite várias seleções). Dentro do for é declarado uma váriavel i inicializada com zero. A declaração for verifica se i é menor que o número de opções no elemento <select>, executa sucessivas declaração  if, e incrementa i de um em um a cada passagem pelo laço.

+ +
<form name="selectForm">
+  <p>
+    <label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
+    <select id="tipoMusica" name="tipoMusica" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classico</option>
+      <option>Ópera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numeroSelecionadas = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numeroSelecionadas++;
+    }
+  }
+  return numeroSelecionadas;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
+});
+</script>
+
+
+ +

Declaração do...while

+ +

A instrução do...while repetirá até que a condição especificada seja falsa.

+ +
do
+  declaracao
+while (condicao);
+
+ +

A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a condicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a condicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a do...while.

+ +

Exemplo

+ +

No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que i seja menor que 5.

+ +
do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

Declaração while

+ +

Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while: 

+ +
while (condicao)
+  declaracao
+
+ +

Se a condição se tornar falsa,  a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.

+ +

O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.

+ +

Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.

+ +

Exemplo 1

+ +

O while a seguir executará enquanto n for menor que três:

+ +
n = 0;
+x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

A cada iteração, o laço incrementa n e adiciona este valor para x. Portanto, x e n recebem os seguintes valores:

+ +
    +
  • Depois de executar pela primeira vez: n = 1 e x = 1
    • +
  • Depois da segunda vez: n = 2 e x = 3
    • +
  • Depois da terceira vez: n = 3 e x = 6
    • +
+ +

Depois de executar pela terceira vez, a condição n < 3 não será mais verdadeira, então o laço encerrará.

+ +

Exemplo 2

+ +

Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:

+ +
while (true) {
+  console.log("Olá, mundo");
+}
+ +

Declaração label

+ +

Um label provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usar break ou continue para indicar quando o programa deverá interromper o laço ou continuar sua execução.

+ +

Segue a sintaxe da instrução label:

+ +
label : declaracao
+
+ +

Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.

+ +

Exemplo

+ +

Neste exemplo, o label markLoop idenfica um laço while.

+ +
markLoop:
+while (theMark == true) {
+   facaAlgo();
+}
+ +

Declaração break

+ +

Use break para terminar laços, switch, ou um conjunto que utiliza label.

+ +
    +
  • Quando você utiliza break sem um label, ele encerrará imediatamente o laço mais interno while, do-while, for, ou switch e transferirá o controle para a próxima instrução.
    • +
  • Quando você utiliza break com um label, ele encerrará o label específico.
    • +
+ +

Segue a sintaxe do break:

+ +
    +
  1. break;
    2. +
  2. break label;
    3. +
+ +

Na primeira opção será encerrado o laço de repetição mais interno ou switch. Já na segunda opção será encerrada o bloco de código referente a label.

+ +

Exemplo 1

+ +

O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido em theValue:

+ +
for (i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Exemplo 2: Utilizando break em label

+ +
var x = 0;
+var z = 0
+labelCancelaLaco: while (true) {
+  console.log("Laço exterior: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Laço interior: " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelaLaco;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

Declaração continue

+ +

A declaração continue pode ser usada para reiniciar uma instrução while, do-while, for, ou label.

+ +
    +
  • Quando você utiliza continue sem uma label, ele encerrará a iteração atual mais interna de uma instrução while, do-while, ou for e continuará a execução do laço a partir da próxima iteração. Ao contrário da instrução break, continue não encerra a execução completa do laço. Em um laço while, ele voltará para a condição. Em um laço for, ele pulará para a expressão de incrementação.
    • +
  • Quando você utiliza continue com uma label, o continue será aplicado ao laço identificado por esta label. 
    • +
+ +

Segue a sintaxe do continue:

+ +
    +
  1. continue;
    2. +
  2. continue label;
    3. +
+ +

Exemplo 1

+ +

O exemplo a seguir mostra um laço while utlizando continue que executará quando o valor de i for igual a 3. Desta forma, n recebe os valores um, três, sete, e doze.

+ +
i = 0;
+n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Exemplo 2

+ +

Uma instrução label checkiandj contém uma instrução label checkj. Se o continue for executado, o programa terminará a iteração atual de checkj e começará a próxima iteração. Toda vez que o continue for executado, checkj recomeçará até que a condição do while for falsa. Quando isto ocorrer checkiandj executará até que sua condição seja falsa.

+ +

Se o continue estivesse referenciando checkiandj, o programa deveria continuar do topo de checkiandj.

+ +
checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " é estranho.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }
+ +

Declaração for...in

+ +

A declaração for...in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.
+ Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:

+ +
for (variavel in objeto) {
+  declaracoes
+}
+
+ +

Exemplo

+ +

A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.

+ +
function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "<br>";
+  }
+  result += "<hr>";
+  return result;
+}
+
+ +

Para um objeto chamado car com propriedades make e model, o resultado será:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays

+ +

Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaração for...in irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicional for com index numérico quando interagir com arrays, pois o for...in interage com as propriedades definidas pelo programador ao invés dos elementos do array.

+ +

Declaração for...of

+ +

 A declaração for...of cria uma laço com objetos interativos ((incluindo, {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.

+ +
for (variavel of objeto) {
+  declaracoes
+}
+ +

O exemplo a seguir mostra a diferença entre o for...of e o for...in. Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades.

+ +
let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/pt-br/web/javascript/guide/modules/index.html b/files/pt-br/web/javascript/guide/modules/index.html new file mode 100644 index 0000000000..6a2cb73687 --- /dev/null +++ b/files/pt-br/web/javascript/guide/modules/index.html @@ -0,0 +1,454 @@ +--- +title: Módulos JavaScript +slug: Web/JavaScript/Guide/Módulos +translation_of: Web/JavaScript/Guide/Modules +--- +
{{JSSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
+ +

Este guia fornece tudo o que você precisa para começar com a sintaxe de módulo do JavaScript.

+ +

Um background em módulos

+ +

Os programas JavaScript começaram muito pequenos - a maior parte do seu uso nos primeiros dias era para executar tarefas isoladas de script, fornecendo um pouco de interatividade às suas páginas da Web sempre que necessário, de modo que scripts grandes geralmente não eram necessários. Com o avanço rápido da tecnologia agora temos aplicativos completos sendo executados em navegadores com muito JavaScript, além de JavaScript ser usado em outros contextos (Node.js, por exemplo).

+ +

Portanto, fez sentido nos últimos anos começar a pensar em fornecer mecanismos para dividir programas JavaScript em módulos separados que podem ser importados quando necessário. O Node.js possui essa capacidade há muito tempo e existem várias bibliotecas e estruturas JavaScript que permitem o uso do módulo (por exemplo, outros CommonJS e AMD-sistemas de módulos baseados em RequireJS, e mais recentemente Webpack e Babel).

+ +

A boa notícia é que os navegadores modernos começaram a dar suporte nativamente à funcionalidade do módulo, e é sobre isso que este artigo trata. Isso só pode ser uma coisa boa - os navegadores podem otimizar o carregamento de módulos, tornando-o mais eficiente do que ter que usar uma biblioteca e fazer todo esse processamento extra no lado do cliente e viagens de ida e volta extras.

+ +

Suporte do navegador

+ +

O uso de módulos JavaScript nativos depende do{{JSxRef("Statements/import", "import")}} e {{JSxRef("Statements/export", "export")}} afirmações; estes são suportados nos navegadores da seguinte maneira:

+ +

importa

+ +

{{Compat("javascript.statements.import")}}

+ +

exporta

+ +

{{Compat("javascript.statements.export")}}

+ +

Apresentando um exemplo

+ +

Para demonstrar o uso dos módulos, criamos um conjunto simples de exemplos que você pode encontrar no GitHub. Estes exemplos demonstram um conjunto simples de módulos que criam um<canvas> em uma página da Web e desenhe (e relate informações sobre) formas diferentes na tela.

+ +

Estes são bastante triviais, mas foram mantidos deliberadamente simples para demonstrar claramente os módulos.

+ +
+

Nota: Se você deseja fazer o download dos exemplos e executá-los localmente, precisará executá-los por meio de um servidor da web local.

+
+ +

Exemplo de uma estrutura básica

+ +

No nosso primeiro exemplo (consulte basic-modules) nós temos uma estrutura de arquivos da seguinte maneira:

+ +
index.html
+main.js
+modules/
+    canvas.js
+    square.js
+ +
+

Nota: Todos os exemplos neste guia têm basicamente a mesma estrutura; o exposto acima deve começar a ficar bem familiar.

+
+ +

Os dois módulos do diretório modules são descritos abaixo:

+ +
    +
  • canvas.js — contém funções relacionadas à configuração da tela: + +
      +
    • create() — cria uma tela com uma largura e altura especificadas dentro de um invólucro <div> com um ID especificado, que é anexado dentro de um elemento pai especificado. Retorna um objeto que contém o contexto 2D da tela e o ID do wrapper.
      • +
    • createReportList() — cria uma lista não ordenada anexada dentro de um elemento de wrapper especificado, que pode ser usado para gerar dados de relatório. Retorna o ID da lista.
      • +
    +
    • +
  • square.js — contém: +
      +
    • name — uma constante contendo a string 'square'.
      • +
    • draw() — desenha um quadrado em uma tela especificada, com um tamanho, posição e cor especificados. Retorna um objeto que contém o tamanho, a posição e a cor do quadrado.
      • +
    • reportArea() — grava a área de um quadrado em uma lista de relatórios específica, considerando seu tamanho.
      • +
    • reportPerimeter() — grava o perímetro de um quadrado em uma lista de relatórios específica, considerando seu comprimento.
      • +
    +
    • +
+ +

Aside — .mjs versus .js

+ +

Neste artigo, usamos extensões .js para nossos arquivos de módulo, mas em outros recursos você pode ver a extensão .mjs usada. A documentação da V8 recomenda isso, por exemplo. Os motivos apresentados são:

+ +
    +
  • É bom para maior clareza, ou seja, deixa claro quais arquivos são módulos e quais são JavaScript regulares.
    • +
  • Ele garante que seus arquivos de módulo sejam analisados como um módulo por tempos de execução, como Node.js, e construir ferramentas como Babel.
    • +
+ +

No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente GitHub Pages e http-server para Node.js.

+ +

Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta Content-Type para arquivos .mjs). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.

+ +

Para fins de aprendizado e portabilidade, decidimos manter o.js.

+ +

Se você realmente valoriza a clareza de usar .mjs para módulos versus usar .js para arquivos JavaScript "normais", mas não deseja se deparar com o problema descrito acima, sempre poderá usar .mjs durante o desenvolvimento e convertê-los em .js durante sua etapa de construção.

+ +

Também é importante notar que:

+ +
    +
  • Algumas ferramentas podem nunca suportar .mjs, comoTypeScript.
    • +
  • O  atributo <script type="module">é usado para indicar quando um módulo está sendo apontado, como você verá abaixo.
    • +
+ +

Exportando recursos do módulo

+ +

A primeira coisa que você faz para obter acesso aos recursos do módulo é exportá-los. Isso é feito usando o {{JSxRef("Statements/export", "export")}} declaração.

+ +

A maneira mais fácil de usá-lo é colocá-lo na frente de qualquer item que você queira exportar para fora do módulo, por exemplo:

+ +
export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}
+ +

Você pode exportar funções, var, let, const, e — como veremos mais tarde - classes. Eles precisam ser itens de nível superior; você não pode usar a exportação dentro de uma função, por exemplo.

+ +

Uma maneira mais conveniente de exportar todos os itens que você deseja exportar é usar uma única instrução de exportação no final do arquivo do módulo, seguida por uma lista separada por vírgula dos recursos que você deseja exportar envoltos em chaves. Por exemplo:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

Importando recursos para o seu script

+ +

Depois de exportar alguns recursos do seu módulo, é necessário importá-los para o script para poder usá-los. A maneira mais simples de fazer isso é a seguinte:

+ +
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+ +

Você usa o {{JSxRef("Statements/import", "import")}} , seguida por uma lista separada por vírgula dos recursos que você deseja importar agrupados em chaves, seguidos pela palavra-chave de, seguida pelo caminho para o arquivo do módulo - um caminho relativo à raiz do site, que para nossa basic-modules exemplo seria/js-examples/modules/basic-modules.

+ +

No entanto, escrevemos o caminho de maneira um pouco diferente - estamos usando a sintaxe de ponto (.) Para significar "o local atual", seguido pelo caminho além do arquivo que estamos tentando encontrar. Isso é muito melhor do que escrever todo o caminho relativo a cada vez, pois é mais curto e torna o URL portátil - o exemplo ainda funcionará se você o mover para um local diferente na hierarquia do site.

+ +

Então, por exemplo:

+ +
/js-examples/modules/basic-modules/modules/square.js
+ +

torna-se

+ +
./modules/square.js
+ +

Você pode ver essas linhas em ação em main.js.

+ +
+

Nota: Em alguns sistemas de módulos, você pode omitir a extensão do arquivo e o ponto(e.g. '/modules/square'). Isso não funciona nos módulos JavaScript nativos.

+
+ +

Depois de importar os recursos para o seu script, você pode usá-los exatamente como eles foram definidos no mesmo arquivo. O seguinte é encontrado em
+ main.js, abaixo das linhas de importação:

+ +
let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+
+ +
+

Nota: Embora os recursos importados estejam disponíveis no arquivo, eles são visualizações somente leitura do recurso que foi exportado. Você não pode alterar a variável importada, mas ainda pode modificar propriedades semelhantes à const. Além disso, esses recursos são importados como ligações ativas, o que significa que eles podem mudar de valor mesmo que você não possa modificar a ligação ao contrário de const.

+
+ +

Aplicando o módulo ao seu HTML

+ +

Agora, apenas precisamos aplicar o módulo main.js. à nossa página HTML. Isso é muito semelhante ao modo como aplicamos um script regular a uma página, com algumas diferenças notáveis.

+ +

Primeiro de tudo, você precisa incluir type="module" no <script> elemento, para declarar esse script como um módulo. Para importar o main.js script, usamos este:

+ +
<script type="module" src="main.js"></script>
+ +

Você também pode incorporar o script do módulo diretamente no arquivo HTML, colocando o código JavaScript no corpo do elemento <script>:

+ +
<script type="module">
+  /* JavaScript module code here */
+</script>
+ +

O script para o qual você importa os recursos do módulo atua basicamente como o módulo de nível superior. Se você o omitir, o Firefox, por exemplo, exibirá um erro "SyntaxError: as declarações de importação podem aparecer apenas no nível superior de um módulo".

+ +

Você só pode usar import e export instruções dentro de módulos, não scripts regulares.

+ +

Outras diferenças entre módulos e scripts padrão

+ +
    +
  • Você precisa prestar atenção nos testes locais - se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor.
    • +
  • Além disso, observe que você pode obter um comportamento diferente das seções de script definidas dentro dos módulos e não nos scripts padrão. Isso ocorre porque os módulos usam {{JSxRef("Strict_mode", "strict mode", "", 1)}} automaticamente.
    • +
  • Não há necessidade de usar o atributo deferir (consulte <script> attributes) ao carregar um script de módulo; módulos são adiados automaticamente.
    • +
  • Os módulos são executados apenas uma vez, mesmo que tenham sido referenciados em várias tags <script>.
    • +
  • Por último, mas não menos importante, vamos esclarecer: os recursos do módulo são importados para o escopo de um único script - eles não estão disponíveis no escopo global. Portanto, você poderá acessar apenas os recursos importados no script para o qual eles foram importados e não poderá acessá-los no console JavaScript, por exemplo. Você ainda receberá erros de sintaxe mostrados no DevTools, mas não poderá usar algumas das técnicas de depuração que você esperava usar.
    • +
+ +

Exportações padrão versus exportações nomeadas

+ +

A funcionalidade que exportamos até agora foi composta por named exports — cada item (seja uma função, const, etc.) foi referido por seu nome na exportação e esse nome também foi usado para se referir a ele na importação.

+ +

Há também um tipo de exportação chamado default export — isso foi projetado para facilitar a função padrão fornecida por um módulo e também ajuda os módulos JavaScript a interoperar com os sistemas de módulos CommonJS e AMD existentes (conforme explicado em ES6 In Depth: Modules por Jason Orendorff; procure por "Exportações padrão").

+ +

Vejamos um exemplo ao explicar como ele funciona. Nos nossos módulos básicos square.js você pode encontrar uma função chamada randomSquare() que cria um quadrado com cor, tamanho e posição aleatórios. Queremos exportar isso como padrão, portanto, na parte inferior do arquivo, escrevemos isso:

+ +
export default randomSquare;
+ +

Note a falta dos colchetes.

+ +

Em vez disso, poderíamos acrescentar export default na função e defina-a como uma função anônima, assim:

+ +
export default function(ctx) {
+  ...
+}
+ +

No nosso arquivo main.js., importamos a função padrão usando esta linha:

+ +
import randomSquare from './modules/square.js';
+ +

Isso ocorre porque há apenas uma exportação padrão permitida por módulo e sabemos que randomSquare é isso.

+ +
import {default as randomSquare} from './modules/square.js';
+ +
+

Nota: A sintaxe as para renomear itens exportados é explicada abaixo no Renaming imports and exports seção.

+
+ +

Evitando conflitos de nomenclatura

+ +

Até agora, nossos módulos de desenho de forma de tela parecem estar funcionando bem. Mas o que acontece se tentarmos adicionar um módulo que lide com o desenho de outra forma, como um círculo ou triângulo? Essas formas provavelmente teriam funções associadas, como draw(), reportArea(), etc. também; se tentássemos importar diferentes funções com o mesmo nome para o mesmo arquivo de módulo de nível superior, acabaríamos com conflitos e erros.

+ +

Felizmente, existem várias maneiras de contornar isso. Veremos isso nas próximas seções.

+ +

Renomeando importações e exportações

+ +

Dentro dos colchetes da instrução de importação e exportação, você pode usar a palavra-chave junto com um novo nome de recurso, para alterar o nome de identificação que será usado para um recurso dentro do módulo de nível superior.

+ +

Por exemplo, os dois itens a seguir executariam o mesmo trabalho, embora de uma maneira ligeiramente diferente:

+ +
// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
+ +
// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';
+ +

Vejamos um exemplo real. Na nossa renaming diretório, você verá o mesmo sistema de módulos do exemplo anterior, exceto que adicionamos circle.js e triangle.js módulos para desenhar e relatar círculos e triângulos.

+ +

Dentro de cada um desses módulos, temos recursos com os mesmos nomes sendo exportados e, portanto, cada um tem o mesmo export declaração na parte inferior:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

Ao importá-los para o main.js, se tentarmos usar

+ +
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
+ +

O navegador geraria um erro como "SyntaxError: redeclaration of import name" (Firefox).

+ +

Em vez disso, precisamos renomear as importações para que sejam únicas:

+ +
import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
+ +

Observe que você pode resolver o problema nos arquivos do módulo, e.g.

+ +
// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };
+ +
// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
+ +

E funcionaria da mesma forma. Qual o estilo que você usa depende de você, no entanto, sem dúvida faz mais sentido deixar o código do módulo em paz e fazer as alterações nas importações. Isso faz especialmente sentido quando você está importando de módulos de terceiros sobre os quais você não tem controle.

+ +

24/5000

+ +

Criando um objeto de módulo

+ +

O método acima funciona bem, mas é um pouco confuso e longo. Uma solução ainda melhor é importar os recursos de cada módulo dentro de um objeto de módulo. O seguinte formulário de sintaxe faz isso:

+ +
import * as Module from './modules/module.js';
+ +

Isso captura todas as exportações disponíveis no module.js e as torna disponíveis como membros de um objeto Module, efetivamente dando o seu próprio namespace. Então, por exemplo:

+ +
Module.function1()
+Module.function2()
+etc.
+ +

Novamente, vejamos um exemplo real. Se você for ao nosso module-objects diretório, você verá o mesmo exemplo novamente, mas reescrito para aproveitar essa nova sintaxe. Nos módulos, as exportações são todas da seguinte forma simples:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

As importações, por outro lado, são assim:

+ +
import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';
+ +

Em cada caso, agora você pode acessar as importações do módulo abaixo do nome do objeto especificado, por exemplo:

+ +
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);
+ +

Agora você pode escrever o código da mesma forma que antes (contanto que inclua os nomes dos objetos quando necessário) e as importações sejam muito mais limpas.

+ +

Módulos e classes

+ +

Como sugerimos anteriormente, você também pode exportar e importar classes; essa é outra opção para evitar conflitos no seu código e é especialmente útil se você já tiver o código do módulo gravado em um estilo orientado a objetos.

+ +

Você pode ver um exemplo do nosso módulo de desenho de forma reescrito com as classes ES em nosso classes diretório. Como exemplo, o square.js O arquivo agora contém todas as suas funcionalidades em uma única classe:

+ +
class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}
+ +

que exportamos então:

+ +
export { Square };
+ +

No main.js, nós o importamos assim:

+ +
import { Square } from './modules/square.js';
+ +

E então use a classe para desenhar nosso quadrado:

+ +
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();
+ +

Módulos de agregação

+ +

Haverá momentos em que você desejará agregar módulos. Você pode ter vários níveis de dependências, nos quais deseja simplificar as coisas, combinando vários submódulos em um módulo pai. Isso é possível usando a sintaxe de exportação dos seguintes formulários no módulo pai:

+ +
export * from 'x.js'
+export { name } from 'x.js'
+ +

Por exemplo, veja nosso module-aggregation diretório. Neste exemplo (com base no exemplo de classes anteriores), temos um módulo extra chamado shapes.js, que agrega toda a funcionalidade de circle.js, square.js e triangle.js juntos. Também movemos nossos submódulos para dentro de um subdiretório dentro do diretório modules chamado shapes. Portanto, a estrutura do módulo neste exemplo é:

+ +
modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js
+ +

Em cada um dos submódulos, a exportação é da mesma forma, e.g.

+ +
export { Square };
+ +

Em seguida, vem a parte de agregação. Dentro de shapes.js, incluímos as seguintes linhas:

+ +
export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';
+ +

Eles capturam as exportações dos submódulos individuais e os disponibilizam efetivamente no módulo shapes.js.

+ +
+

Nota: As exportações mencionadas no shapes.js são basicamente redirecionadas pelo arquivo e realmente não existem nele, portanto, você não poderá escrever nenhum código relacionado útil dentro do mesmo arquivo.

+
+ +

Portanto, agora no arquivo main.js., podemos obter acesso às três classes de módulos substituindo

+ +
import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';
+ +

com a seguinte linha única:

+ +
import { Square, Circle, Triangle } from './modules/shapes.js';
+ +

Carregamento dinâmico do módulo

+ +

A parte mais recente da funcionalidade dos módulos JavaScript a estar disponível nos navegadores é o carregamento dinâmico de módulos. Isso permite que você carregue módulos dinamicamente somente quando eles forem necessários, em vez de precisar carregar tudo antecipadamente. Isso tem algumas vantagens óbvias de desempenho; vamos ler e ver como isso funciona.

+ +

Essa nova funcionalidade permite que você ligue {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} como uma função, passando o caminho para o módulo como um parâmetro. Retorna um{{JSxRef("Promise")}}, que cumpre com um objeto de módulo (consulte Creating a module object) dando acesso às exportações desse objeto, e.g.

+ +
import('./modules/myModule.js')
+  .then((module) => {
+    // Do something with the module.
+  });
+ +

Vejamos um exemplo. No dynamic-module-imports diretório, temos outro exemplo baseado em nosso exemplo de classes. Desta vez, no entanto, não estamos desenhando nada na tela quando o exemplo é carregado. Em vez disso, incluímos trêsbuttons — "Circle", "Square", e "Triangle" — que, quando pressionado, carrega dinamicamente o módulo necessário e, em seguida, usa-o para desenhar os shape.

+ +

Neste exemplo, fizemos apenas alterações em nossa index.html e main.js arquivos - as exportações do módulo permanecem as mesmas de antes.

+ +

No main.js, pegamos uma referência a cada botão usando umDocument.querySelector() chamada, por exemplo:

+ +
let squareBtn = document.querySelector('.square');
+ +

Em seguida, anexamos um ouvinte de evento a cada botão para que, quando pressionado, o módulo relevante seja carregado dinamicamente e usado para desenhar a forma(shape):

+ +
squareBtn.addEventListener('click', () => {
+  import('./modules/square.js').then((Module) => {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});
+ +

Observe que, como o cumprimento da promessa retorna um objeto de módulo, a classe é então transformada em uma sub-característica do objeto, portanto, agora precisamos acessar o construtor com Module. anexado a ele, e.g. Module.Square( ... ).

+ +

Solução de problemas

+ +

Aqui estão algumas dicas que podem ajudá-lo se você estiver com problemas para fazer seus módulos funcionarem. Sinta-se livre para adicionar à lista se descobrir mais!

+ +
    +
  • Mencionamos isso antes, mas para reiterar: arquivos.js precisa ser carregado com um tipo MIME de text/javascript (ou outro tipo MIME compatível com JavaScript, mas text/javascript é recomendável), caso contrário, você receberá um erro estrito de verificação do tipo MIME como "O servidor respondeu com um tipo MIME não JavaScript".
    • +
  • Se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor. As páginas do GitHub são ideais, pois também servem arquivos .js com o tipo MIME correto.
    • +
  • Como .mjs é uma extensão de arquivo não padrão, alguns sistemas operacionais podem não reconhecê-lo ou tentar substituí-lo por outra. Por exemplo, descobrimos que o macOS estava adicionando silenciosamente .js ao final dos arquivos .mjs e ocultando automaticamente a extensão do arquivo. Então, todos os nossos arquivos foram lançados como x.mjs.js. Depois de desativarmos ocultar automaticamente as extensões de arquivo e treiná-lo para aceitar .mjs, tudo bem.
    • +
+ +

Veja também

+ + + +

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

diff --git "a/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" "b/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" deleted file mode 100644 index 6a2cb73687..0000000000 --- "a/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: Módulos JavaScript -slug: Web/JavaScript/Guide/Módulos -translation_of: Web/JavaScript/Guide/Modules ---- -
{{JSSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
- -

Este guia fornece tudo o que você precisa para começar com a sintaxe de módulo do JavaScript.

- -

Um background em módulos

- -

Os programas JavaScript começaram muito pequenos - a maior parte do seu uso nos primeiros dias era para executar tarefas isoladas de script, fornecendo um pouco de interatividade às suas páginas da Web sempre que necessário, de modo que scripts grandes geralmente não eram necessários. Com o avanço rápido da tecnologia agora temos aplicativos completos sendo executados em navegadores com muito JavaScript, além de JavaScript ser usado em outros contextos (Node.js, por exemplo).

- -

Portanto, fez sentido nos últimos anos começar a pensar em fornecer mecanismos para dividir programas JavaScript em módulos separados que podem ser importados quando necessário. O Node.js possui essa capacidade há muito tempo e existem várias bibliotecas e estruturas JavaScript que permitem o uso do módulo (por exemplo, outros CommonJS e AMD-sistemas de módulos baseados em RequireJS, e mais recentemente Webpack e Babel).

- -

A boa notícia é que os navegadores modernos começaram a dar suporte nativamente à funcionalidade do módulo, e é sobre isso que este artigo trata. Isso só pode ser uma coisa boa - os navegadores podem otimizar o carregamento de módulos, tornando-o mais eficiente do que ter que usar uma biblioteca e fazer todo esse processamento extra no lado do cliente e viagens de ida e volta extras.

- -

Suporte do navegador

- -

O uso de módulos JavaScript nativos depende do{{JSxRef("Statements/import", "import")}} e {{JSxRef("Statements/export", "export")}} afirmações; estes são suportados nos navegadores da seguinte maneira:

- -

importa

- -

{{Compat("javascript.statements.import")}}

- -

exporta

- -

{{Compat("javascript.statements.export")}}

- -

Apresentando um exemplo

- -

Para demonstrar o uso dos módulos, criamos um conjunto simples de exemplos que você pode encontrar no GitHub. Estes exemplos demonstram um conjunto simples de módulos que criam um<canvas> em uma página da Web e desenhe (e relate informações sobre) formas diferentes na tela.

- -

Estes são bastante triviais, mas foram mantidos deliberadamente simples para demonstrar claramente os módulos.

- -
-

Nota: Se você deseja fazer o download dos exemplos e executá-los localmente, precisará executá-los por meio de um servidor da web local.

-
- -

Exemplo de uma estrutura básica

- -

No nosso primeiro exemplo (consulte basic-modules) nós temos uma estrutura de arquivos da seguinte maneira:

- -
index.html
-main.js
-modules/
-    canvas.js
-    square.js
- -
-

Nota: Todos os exemplos neste guia têm basicamente a mesma estrutura; o exposto acima deve começar a ficar bem familiar.

-
- -

Os dois módulos do diretório modules são descritos abaixo:

- -
    -
  • canvas.js — contém funções relacionadas à configuração da tela: - -
      -
    • create() — cria uma tela com uma largura e altura especificadas dentro de um invólucro <div> com um ID especificado, que é anexado dentro de um elemento pai especificado. Retorna um objeto que contém o contexto 2D da tela e o ID do wrapper.
      • -
    • createReportList() — cria uma lista não ordenada anexada dentro de um elemento de wrapper especificado, que pode ser usado para gerar dados de relatório. Retorna o ID da lista.
      • -
    -
    • -
  • square.js — contém: -
      -
    • name — uma constante contendo a string 'square'.
      • -
    • draw() — desenha um quadrado em uma tela especificada, com um tamanho, posição e cor especificados. Retorna um objeto que contém o tamanho, a posição e a cor do quadrado.
      • -
    • reportArea() — grava a área de um quadrado em uma lista de relatórios específica, considerando seu tamanho.
      • -
    • reportPerimeter() — grava o perímetro de um quadrado em uma lista de relatórios específica, considerando seu comprimento.
      • -
    -
    • -
- -

Aside — .mjs versus .js

- -

Neste artigo, usamos extensões .js para nossos arquivos de módulo, mas em outros recursos você pode ver a extensão .mjs usada. A documentação da V8 recomenda isso, por exemplo. Os motivos apresentados são:

- -
    -
  • É bom para maior clareza, ou seja, deixa claro quais arquivos são módulos e quais são JavaScript regulares.
    • -
  • Ele garante que seus arquivos de módulo sejam analisados como um módulo por tempos de execução, como Node.js, e construir ferramentas como Babel.
    • -
- -

No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente GitHub Pages e http-server para Node.js.

- -

Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta Content-Type para arquivos .mjs). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.

- -

Para fins de aprendizado e portabilidade, decidimos manter o.js.

- -

Se você realmente valoriza a clareza de usar .mjs para módulos versus usar .js para arquivos JavaScript "normais", mas não deseja se deparar com o problema descrito acima, sempre poderá usar .mjs durante o desenvolvimento e convertê-los em .js durante sua etapa de construção.

- -

Também é importante notar que:

- -
    -
  • Algumas ferramentas podem nunca suportar .mjs, comoTypeScript.
    • -
  • O  atributo <script type="module">é usado para indicar quando um módulo está sendo apontado, como você verá abaixo.
    • -
- -

Exportando recursos do módulo

- -

A primeira coisa que você faz para obter acesso aos recursos do módulo é exportá-los. Isso é feito usando o {{JSxRef("Statements/export", "export")}} declaração.

- -

A maneira mais fácil de usá-lo é colocá-lo na frente de qualquer item que você queira exportar para fora do módulo, por exemplo:

- -
export const name = 'square';
-
-export function draw(ctx, length, x, y, color) {
-  ctx.fillStyle = color;
-  ctx.fillRect(x, y, length, length);
-
-  return {
-    length: length,
-    x: x,
-    y: y,
-    color: color
-  };
-}
- -

Você pode exportar funções, var, let, const, e — como veremos mais tarde - classes. Eles precisam ser itens de nível superior; você não pode usar a exportação dentro de uma função, por exemplo.

- -

Uma maneira mais conveniente de exportar todos os itens que você deseja exportar é usar uma única instrução de exportação no final do arquivo do módulo, seguida por uma lista separada por vírgula dos recursos que você deseja exportar envoltos em chaves. Por exemplo:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Importando recursos para o seu script

- -

Depois de exportar alguns recursos do seu módulo, é necessário importá-los para o script para poder usá-los. A maneira mais simples de fazer isso é a seguinte:

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
- -

Você usa o {{JSxRef("Statements/import", "import")}} , seguida por uma lista separada por vírgula dos recursos que você deseja importar agrupados em chaves, seguidos pela palavra-chave de, seguida pelo caminho para o arquivo do módulo - um caminho relativo à raiz do site, que para nossa basic-modules exemplo seria/js-examples/modules/basic-modules.

- -

No entanto, escrevemos o caminho de maneira um pouco diferente - estamos usando a sintaxe de ponto (.) Para significar "o local atual", seguido pelo caminho além do arquivo que estamos tentando encontrar. Isso é muito melhor do que escrever todo o caminho relativo a cada vez, pois é mais curto e torna o URL portátil - o exemplo ainda funcionará se você o mover para um local diferente na hierarquia do site.

- -

Então, por exemplo:

- -
/js-examples/modules/basic-modules/modules/square.js
- -

torna-se

- -
./modules/square.js
- -

Você pode ver essas linhas em ação em main.js.

- -
-

Nota: Em alguns sistemas de módulos, você pode omitir a extensão do arquivo e o ponto(e.g. '/modules/square'). Isso não funciona nos módulos JavaScript nativos.

-
- -

Depois de importar os recursos para o seu script, você pode usá-los exatamente como eles foram definidos no mesmo arquivo. O seguinte é encontrado em
- main.js, abaixo das linhas de importação:

- -
let myCanvas = create('myCanvas', document.body, 480, 320);
-let reportList = createReportList(myCanvas.id);
-
-let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
-reportArea(square1.length, reportList);
-reportPerimeter(square1.length, reportList);
-
- -
-

Nota: Embora os recursos importados estejam disponíveis no arquivo, eles são visualizações somente leitura do recurso que foi exportado. Você não pode alterar a variável importada, mas ainda pode modificar propriedades semelhantes à const. Além disso, esses recursos são importados como ligações ativas, o que significa que eles podem mudar de valor mesmo que você não possa modificar a ligação ao contrário de const.

-
- -

Aplicando o módulo ao seu HTML

- -

Agora, apenas precisamos aplicar o módulo main.js. à nossa página HTML. Isso é muito semelhante ao modo como aplicamos um script regular a uma página, com algumas diferenças notáveis.

- -

Primeiro de tudo, você precisa incluir type="module" no <script> elemento, para declarar esse script como um módulo. Para importar o main.js script, usamos este:

- -
<script type="module" src="main.js"></script>
- -

Você também pode incorporar o script do módulo diretamente no arquivo HTML, colocando o código JavaScript no corpo do elemento <script>:

- -
<script type="module">
-  /* JavaScript module code here */
-</script>
- -

O script para o qual você importa os recursos do módulo atua basicamente como o módulo de nível superior. Se você o omitir, o Firefox, por exemplo, exibirá um erro "SyntaxError: as declarações de importação podem aparecer apenas no nível superior de um módulo".

- -

Você só pode usar import e export instruções dentro de módulos, não scripts regulares.

- -

Outras diferenças entre módulos e scripts padrão

- -
    -
  • Você precisa prestar atenção nos testes locais - se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor.
    • -
  • Além disso, observe que você pode obter um comportamento diferente das seções de script definidas dentro dos módulos e não nos scripts padrão. Isso ocorre porque os módulos usam {{JSxRef("Strict_mode", "strict mode", "", 1)}} automaticamente.
    • -
  • Não há necessidade de usar o atributo deferir (consulte <script> attributes) ao carregar um script de módulo; módulos são adiados automaticamente.
    • -
  • Os módulos são executados apenas uma vez, mesmo que tenham sido referenciados em várias tags <script>.
    • -
  • Por último, mas não menos importante, vamos esclarecer: os recursos do módulo são importados para o escopo de um único script - eles não estão disponíveis no escopo global. Portanto, você poderá acessar apenas os recursos importados no script para o qual eles foram importados e não poderá acessá-los no console JavaScript, por exemplo. Você ainda receberá erros de sintaxe mostrados no DevTools, mas não poderá usar algumas das técnicas de depuração que você esperava usar.
    • -
- -

Exportações padrão versus exportações nomeadas

- -

A funcionalidade que exportamos até agora foi composta por named exports — cada item (seja uma função, const, etc.) foi referido por seu nome na exportação e esse nome também foi usado para se referir a ele na importação.

- -

Há também um tipo de exportação chamado default export — isso foi projetado para facilitar a função padrão fornecida por um módulo e também ajuda os módulos JavaScript a interoperar com os sistemas de módulos CommonJS e AMD existentes (conforme explicado em ES6 In Depth: Modules por Jason Orendorff; procure por "Exportações padrão").

- -

Vejamos um exemplo ao explicar como ele funciona. Nos nossos módulos básicos square.js você pode encontrar uma função chamada randomSquare() que cria um quadrado com cor, tamanho e posição aleatórios. Queremos exportar isso como padrão, portanto, na parte inferior do arquivo, escrevemos isso:

- -
export default randomSquare;
- -

Note a falta dos colchetes.

- -

Em vez disso, poderíamos acrescentar export default na função e defina-a como uma função anônima, assim:

- -
export default function(ctx) {
-  ...
-}
- -

No nosso arquivo main.js., importamos a função padrão usando esta linha:

- -
import randomSquare from './modules/square.js';
- -

Isso ocorre porque há apenas uma exportação padrão permitida por módulo e sabemos que randomSquare é isso.

- -
import {default as randomSquare} from './modules/square.js';
- -
-

Nota: A sintaxe as para renomear itens exportados é explicada abaixo no Renaming imports and exports seção.

-
- -

Evitando conflitos de nomenclatura

- -

Até agora, nossos módulos de desenho de forma de tela parecem estar funcionando bem. Mas o que acontece se tentarmos adicionar um módulo que lide com o desenho de outra forma, como um círculo ou triângulo? Essas formas provavelmente teriam funções associadas, como draw(), reportArea(), etc. também; se tentássemos importar diferentes funções com o mesmo nome para o mesmo arquivo de módulo de nível superior, acabaríamos com conflitos e erros.

- -

Felizmente, existem várias maneiras de contornar isso. Veremos isso nas próximas seções.

- -

Renomeando importações e exportações

- -

Dentro dos colchetes da instrução de importação e exportação, você pode usar a palavra-chave junto com um novo nome de recurso, para alterar o nome de identificação que será usado para um recurso dentro do módulo de nível superior.

- -

Por exemplo, os dois itens a seguir executariam o mesmo trabalho, embora de uma maneira ligeiramente diferente:

- -
// inside module.js
-export {
-  function1 as newFunctionName,
-  function2 as anotherNewFunctionName
-};
-
-// inside main.js
-import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
- -
// inside module.js
-export { function1, function2 };
-
-// inside main.js
-import { function1 as newFunctionName,
-         function2 as anotherNewFunctionName } from './modules/module.js';
- -

Vejamos um exemplo real. Na nossa renaming diretório, você verá o mesmo sistema de módulos do exemplo anterior, exceto que adicionamos circle.js e triangle.js módulos para desenhar e relatar círculos e triângulos.

- -

Dentro de cada um desses módulos, temos recursos com os mesmos nomes sendo exportados e, portanto, cada um tem o mesmo export declaração na parte inferior:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Ao importá-los para o main.js, se tentarmos usar

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
- -

O navegador geraria um erro como "SyntaxError: redeclaration of import name" (Firefox).

- -

Em vez disso, precisamos renomear as importações para que sejam únicas:

- -
import { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
-
-import { name as circleName,
-         draw as drawCircle,
-         reportArea as reportCircleArea,
-         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
-
-import { name as triangleName,
-        draw as drawTriangle,
-        reportArea as reportTriangleArea,
-        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
- -

Observe que você pode resolver o problema nos arquivos do módulo, e.g.

- -
// in square.js
-export { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter };
- -
// in main.js
-import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
- -

E funcionaria da mesma forma. Qual o estilo que você usa depende de você, no entanto, sem dúvida faz mais sentido deixar o código do módulo em paz e fazer as alterações nas importações. Isso faz especialmente sentido quando você está importando de módulos de terceiros sobre os quais você não tem controle.

- -

24/5000

- -

Criando um objeto de módulo

- -

O método acima funciona bem, mas é um pouco confuso e longo. Uma solução ainda melhor é importar os recursos de cada módulo dentro de um objeto de módulo. O seguinte formulário de sintaxe faz isso:

- -
import * as Module from './modules/module.js';
- -

Isso captura todas as exportações disponíveis no module.js e as torna disponíveis como membros de um objeto Module, efetivamente dando o seu próprio namespace. Então, por exemplo:

- -
Module.function1()
-Module.function2()
-etc.
- -

Novamente, vejamos um exemplo real. Se você for ao nosso module-objects diretório, você verá o mesmo exemplo novamente, mas reescrito para aproveitar essa nova sintaxe. Nos módulos, as exportações são todas da seguinte forma simples:

- -
export { name, draw, reportArea, reportPerimeter };
- -

As importações, por outro lado, são assim:

- -
import * as Canvas from './modules/canvas.js';
-
-import * as Square from './modules/square.js';
-import * as Circle from './modules/circle.js';
-import * as Triangle from './modules/triangle.js';
- -

Em cada caso, agora você pode acessar as importações do módulo abaixo do nome do objeto especificado, por exemplo:

- -
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
-Square.reportArea(square1.length, reportList);
-Square.reportPerimeter(square1.length, reportList);
- -

Agora você pode escrever o código da mesma forma que antes (contanto que inclua os nomes dos objetos quando necessário) e as importações sejam muito mais limpas.

- -

Módulos e classes

- -

Como sugerimos anteriormente, você também pode exportar e importar classes; essa é outra opção para evitar conflitos no seu código e é especialmente útil se você já tiver o código do módulo gravado em um estilo orientado a objetos.

- -

Você pode ver um exemplo do nosso módulo de desenho de forma reescrito com as classes ES em nosso classes diretório. Como exemplo, o square.js O arquivo agora contém todas as suas funcionalidades em uma única classe:

- -
class Square {
-  constructor(ctx, listId, length, x, y, color) {
-    ...
-  }
-
-  draw() {
-    ...
-  }
-
-  ...
-}
- -

que exportamos então:

- -
export { Square };
- -

No main.js, nós o importamos assim:

- -
import { Square } from './modules/square.js';
- -

E então use a classe para desenhar nosso quadrado:

- -
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-square1.draw();
-square1.reportArea();
-square1.reportPerimeter();
- -

Módulos de agregação

- -

Haverá momentos em que você desejará agregar módulos. Você pode ter vários níveis de dependências, nos quais deseja simplificar as coisas, combinando vários submódulos em um módulo pai. Isso é possível usando a sintaxe de exportação dos seguintes formulários no módulo pai:

- -
export * from 'x.js'
-export { name } from 'x.js'
- -

Por exemplo, veja nosso module-aggregation diretório. Neste exemplo (com base no exemplo de classes anteriores), temos um módulo extra chamado shapes.js, que agrega toda a funcionalidade de circle.js, square.js e triangle.js juntos. Também movemos nossos submódulos para dentro de um subdiretório dentro do diretório modules chamado shapes. Portanto, a estrutura do módulo neste exemplo é:

- -
modules/
-  canvas.js
-  shapes.js
-  shapes/
-    circle.js
-    square.js
-    triangle.js
- -

Em cada um dos submódulos, a exportação é da mesma forma, e.g.

- -
export { Square };
- -

Em seguida, vem a parte de agregação. Dentro de shapes.js, incluímos as seguintes linhas:

- -
export { Square } from './shapes/square.js';
-export { Triangle } from './shapes/triangle.js';
-export { Circle } from './shapes/circle.js';
- -

Eles capturam as exportações dos submódulos individuais e os disponibilizam efetivamente no módulo shapes.js.

- -
-

Nota: As exportações mencionadas no shapes.js são basicamente redirecionadas pelo arquivo e realmente não existem nele, portanto, você não poderá escrever nenhum código relacionado útil dentro do mesmo arquivo.

-
- -

Portanto, agora no arquivo main.js., podemos obter acesso às três classes de módulos substituindo

- -
import { Square } from './modules/square.js';
-import { Circle } from './modules/circle.js';
-import { Triangle } from './modules/triangle.js';
- -

com a seguinte linha única:

- -
import { Square, Circle, Triangle } from './modules/shapes.js';
- -

Carregamento dinâmico do módulo

- -

A parte mais recente da funcionalidade dos módulos JavaScript a estar disponível nos navegadores é o carregamento dinâmico de módulos. Isso permite que você carregue módulos dinamicamente somente quando eles forem necessários, em vez de precisar carregar tudo antecipadamente. Isso tem algumas vantagens óbvias de desempenho; vamos ler e ver como isso funciona.

- -

Essa nova funcionalidade permite que você ligue {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} como uma função, passando o caminho para o módulo como um parâmetro. Retorna um{{JSxRef("Promise")}}, que cumpre com um objeto de módulo (consulte Creating a module object) dando acesso às exportações desse objeto, e.g.

- -
import('./modules/myModule.js')
-  .then((module) => {
-    // Do something with the module.
-  });
- -

Vejamos um exemplo. No dynamic-module-imports diretório, temos outro exemplo baseado em nosso exemplo de classes. Desta vez, no entanto, não estamos desenhando nada na tela quando o exemplo é carregado. Em vez disso, incluímos trêsbuttons — "Circle", "Square", e "Triangle" — que, quando pressionado, carrega dinamicamente o módulo necessário e, em seguida, usa-o para desenhar os shape.

- -

Neste exemplo, fizemos apenas alterações em nossa index.html e main.js arquivos - as exportações do módulo permanecem as mesmas de antes.

- -

No main.js, pegamos uma referência a cada botão usando umDocument.querySelector() chamada, por exemplo:

- -
let squareBtn = document.querySelector('.square');
- -

Em seguida, anexamos um ouvinte de evento a cada botão para que, quando pressionado, o módulo relevante seja carregado dinamicamente e usado para desenhar a forma(shape):

- -
squareBtn.addEventListener('click', () => {
-  import('./modules/square.js').then((Module) => {
-    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-    square1.draw();
-    square1.reportArea();
-    square1.reportPerimeter();
-  })
-});
- -

Observe que, como o cumprimento da promessa retorna um objeto de módulo, a classe é então transformada em uma sub-característica do objeto, portanto, agora precisamos acessar o construtor com Module. anexado a ele, e.g. Module.Square( ... ).

- -

Solução de problemas

- -

Aqui estão algumas dicas que podem ajudá-lo se você estiver com problemas para fazer seus módulos funcionarem. Sinta-se livre para adicionar à lista se descobrir mais!

- -
    -
  • Mencionamos isso antes, mas para reiterar: arquivos.js precisa ser carregado com um tipo MIME de text/javascript (ou outro tipo MIME compatível com JavaScript, mas text/javascript é recomendável), caso contrário, você receberá um erro estrito de verificação do tipo MIME como "O servidor respondeu com um tipo MIME não JavaScript".
    • -
  • Se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor. As páginas do GitHub são ideais, pois também servem arquivos .js com o tipo MIME correto.
    • -
  • Como .mjs é uma extensão de arquivo não padrão, alguns sistemas operacionais podem não reconhecê-lo ou tentar substituí-lo por outra. Por exemplo, descobrimos que o macOS estava adicionando silenciosamente .js ao final dos arquivos .mjs e ocultando automaticamente a extensão do arquivo. Então, todos os nossos arquivos foram lançados como x.mjs.js. Depois de desativarmos ocultar automaticamente as extensões de arquivo e treiná-lo para aceitar .mjs, tudo bem.
    • -
- -

Veja também

- - - -

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/numbers_and_dates/index.html b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..8f08cb3619 --- /dev/null +++ b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,374 @@ +--- +title: Números e datas +slug: Web/JavaScript/Guide/Numeros_e_datas +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
+ +

Este capítulo apresenta como utilizar números e datas em JavaScript.

+ +

Números

+ +

Em Javascript, todos os números são implementados em double-precision 64-bit binary format IEEE 754 (Por exemplo, um número entre -(253 -1) e 253 -1). Não havendo especificação de tipo Integer. Além de ser capaz de representar números de ponto flutuante, o tipo de número tem três valores simbólicos: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (not-a-number).  Veja também Estruturas e Tipos de Dados em Javascript em contexto com outros tipos primitivos em JavaScript.

+ +

Você pode usar quatro tipos de números literais: decimal, binário, octal, e hexadecimal.

+ +

Números Decimais

+ +
1234567890
+42
+
+// Cuidado quando usar zeros à esquerda:
+
+0888 // 888 interpretado como decimal
+0777 // interpretado como octal  em modo no-strict (511 em decimal)
+
+ +

Note que literais decimais podem começar com zero (0)  seguido por outro digito decimal, porém se o próximo dígito depois do primeiro zero for menor do que 8, o número será analisado como um número octal.

+ +

Números Binários

+ +

A sintaxe para números Binários, usa um zero à esquerda seguido de uma letra minúscula ou maiúscula "B" (0b or 0B). Se os dígitos depois de 0b não forem 0 ou 1, a seguinte exceção SyntaxError é lançada: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Números octais

+ +

A sintaxe dos números octais usa um zero na frente. Se os dígitos depois do 0 estiverem fora do alcance 0 a 7, o número será interpretado como um número decimal.

+ +
var n = 0755; // 493
+var m = 0644; // 420
+
+ +

Modo estrito no ECMAScript 5 proíbe a sintaxe octal. A sintaxe Octal não é parte do ECMAScript 5, mas é suportada por todos os navegadores prefixando o número octal com zero: 0644 === 420 e "\045" === "%". Em ECMAScript 6 números Octais são suportados prefixando o número com "0o" isto é.

+ +
var a = 0o10; // ES6: Octal
+
+ +

Numeros hexadecimais

+ +

A sintaxe numérica Hexadecimal usa um 0 na frente seguido por uma letra "X" maiúscula ou minúscula (0x ou 0X). Se os dígidos depois do 0x estiverem fora do alcance (0123456789ABCDF), o seguinte erro de sintaxe (SyntaxError) ocorrerá: "Identifier starts immediately after numeric literal" (O identificador começa imediatamente depois do literal numérico).

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Exponenciação

+ +
1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10
+ +

Objeto Number

+ +

Um objeto built-in {{jsxref("Number")}} tem propriedades para constantes numéricas, tais como valor máximo, não número e infinito. Você não pode alterar os valores dessas propriedades e elas são usadas assim:

+ +
var maiorNum = Number.MAX_VALUE; //Valor máximo
+var menorNum = Number.MIN_VALUE; //Valor mínimo
+var infiniteNum = Number.POSITIVE_INFINITY; //Infinito positivo
+var negInfiniteNum = Number.NEGATIVE_INFINITY; //Infinito negativo
+var notANum = Number.NaN; //Não é numeral
+
+ +

Você sempre se refere a uma propriedade do objeto predefinido Number como mostrado acima, e não como uma propriedade de um objeto Number que você mesmo criou.

+ +

A tabela à seguir sumariza as propriedades do objeto Number.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriedades de Number
PropriedadeDescrição
{{jsxref("Number.MAX_VALUE")}}O maior número representável.
{{jsxref("Number.MIN_VALUE")}}O menor número representável.
{{jsxref("Number.NaN")}}Valor "not a number" especial
{{jsxref("Number.NEGATIVE_INFINITY")}}Valor especial infinito negativo; retornado em overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Valor especial infinito positivo; retornado em overflow
{{jsxref("Number.EPSILON")}}Diferença entre um e o menor valor maior do que um que pode ser representado como um {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Mínimo safe integer em JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Máximo safe integer em JavaScript.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Number
MétodoDescrição
{{jsxref("Number.parseFloat()")}}Analisa um argumento string e retorna um número float.
+ O mesmo que a função global {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analisa um argumento string e retorna um inteiro da raiz ou base especificada.
+ O mesmo que a função global{{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Determina se o valor passado é um número finito.
{{jsxref("Number.isInteger()")}}Determina se o valor passado é um inteiro.
{{jsxref("Number.isNaN()")}}Determina se o valor passado é {{jsxref("Global_Objects/NaN", "NaN")}}. A versão mais robusta da original {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determina se o valor passado é um safe integer.
+ +

O protótipo Number provê métodos para resgatar informações de objetos Number em vários formatos. A tabela a seguir sumariza os métodos de Number.prototype.

+ + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Number.prototype
MétodoDescrição
{{jsxref("Number.toExponential", "toExponential()")}}Retorna uma string representando o número em uma notação exponencial.
{{jsxref("Number.toFixed", "toFixed()")}}Retorna uma string representando o número em notação com ponto-fíxo.
{{jsxref("Number.toPrecision", "toPrecision()")}}Retorna uma string representando o número em uma precisão especificada na notação de ponto-fíxo.
+ +

Objeto Math

+ +

O objeto {{jsxref("Math")}} tem propriedades e métodos para constantes matemáticas e funções. Por exemplo, o PI do objeto Math tem o valor de pi (3,141...), que você usaria em uma aplicação como

+ +
Math.PI
+
+ +

Similarmente, funções matemáticas padrão são métodos do Math. Isto inclui funções trigonométricas, logarítmicas, exponenciais, e outras funções. Por exemplo, se você quiser usar a função trigonométrica seno, basta escrever

+ +
Math.sin(1.56)
+
+ +

Note que todos os métodos trigonométricos pegam argumentos em radianos.

+ +

A tabela a seguir sumariza os métodos do objeto Math.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Math
MétodoDescrição
{{jsxref("Math.abs", "abs()")}}Valor absoluto
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Funções trigonométricas padrão; Argumentos em radianos
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Funções trigonométricas inversas; retorna valores em radianos
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Funções trigonométricas hiperbólicas; retorna valores em radianos.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Funções trigonométricas hiperbólicas inversas; retorna valores em radianos.
+

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

+ 		Funções exponenciais e logarítmicas.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Retorna o maior/menor inteiro que é menor/maior inteiro que ou igual ao argumento.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Retorna menor ou maior (respectivamente) de uma lista separada por vírgula de argumentos numéricos
{{jsxref("Math.random", "random()")}}Retorna um número aleatório entre 0 e 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Funções de arredondamento e truncamento.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Raiz quadrada, raiz cúbica, raiz quadrada da soma de argumentos ao quadrado.
{{jsxref("Math.sign", "sign()")}}O sinal de um número, indicando se o número é positivo, negativo ou zero.
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}		Número de zeros à esquerda na representação binária de 32-bits.
+ The result of the C-like 32-bit multiplication of the two arguments.
+ +

Diferentemente de muitos outros objetos, você nunca cria um objeto Math por conta própria. Você sempre deve utilizar o objeto Math nativo.

+ +

Objeto Date

+ +

JavaScript não possui dados do tipo data. No entanto, você pode usar o objeto {{jsxref("Date")}} e seus métodos para trabalhar com datas e horas nas suas aplicações. O objeto Date tem um grande número de métodos para setar, recuperar e manipular datas. Ele não tem nenhuma propriedade.

+ +

JavaScript manipula datas de maneira semelhante ao Java. As duas linguagens tem muitos dos mesmos métodos para lidar com datas e ambas armazenam datas como números em milisegundos, desde 1 de janeiro de 1970, às 00:00:00 ( January 1, 1970, 00:00:00).

+ +

A abrangência do objeto Date é de -100,000,000 dias até 100,000,000 dias relativos a 01 de janeiro de 1970 UTC.

+ +

Para criar um objeto Date:

+ +
var dateObjectName = new Date([parameters]);
+
+ +

onde dateObjectName é o nome do objeto Date que está sendo criado; ele pode ser um novo objeto ou uma propriedade de um objeto existente.

+ +

A chamada de Date sem a palavra reservada new, simplesmente converte a data para uma representação dela como string.

+ +

Os parâmetros do código acima podem ser qualquer um a seguir:

+ +
    +
  • Nada: cria a data e hora de hoje. Por exemplo, today = new Date();.
    • +
  • Uma string representando uma data da seguinte forma: "Mês dia, ano, horas:minutos:segundos". Por exemplo, Xmas95 = new Date("25 de dezembro de 1995, 13:30:00"). Se você omitir as horas, minutos ou segundos, o valor será setado para zero.
    • +
  • Um conjunto de valores inteiros para ano, mês e dia. Por exemplo, var Xmas95 = new Date(1995, 11, 25).
    • +
  • Um conjunto de valores inteiros par ano, mês, dia, hora, minuto e segundos. Por exemplo, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • +
+ +

Métodos do objeto Date

+ +

Os métodos do objeto Date para manipular data e hora pertencem às seguintes categorias:

+ +
    +
  • Métodos "set", para setar valores de data e hora em objetos Date.
    • +
  • Métodos "get", para recuperar valores de data e hora de objetos Date.
    • +
  • Métodos "to", para retornar valores de string de objetos Date.
    • +
  • Métodos parse e UTC, para parsear string de Data.
    • +
+ +

Com os métods "get" e "set", você pode recuperar e setar segundos, minutos, horas, dia e mês, dia da semana, meses e anos, separadamente. Existe um método getDay que retorna o dia da semana, mas não existe um método setDay correspondente, porque o dia da semana é setado automaticamente. Estes métodos utilizam números inteiros para representar estes valores da seguinte maneira:

+ +
    +
  • Segundos e minutos: de 0 a 59
    • +
  • Horas: de 0 a 23
    • +
  • Dia: 0 (Domingo) a 6 (Sábado)
    • +
  • Data: 1 a 31 (dia do mês)
    • +
  • Meses: 0 (Janeiro) a 11 (Dezembro)
    • +
  • Ano: anos desde 1900
    • +
+ +

Por exemplo, suponha que você queira definir a seguinite data:

+ +
var Xmas95 = new Date("December 25, 1995");
+
+ +

Então Xmas95.getMonth() retorna 11 e Xmas95.getFullYear() retorna 1995.

+ +

Os métodos getTime e setTime são úteis para comparar datas. O método getTime retorna o número dos milisegundos desde 1 de janeiro de 1970, às 00:00:00 para um objeto Date.

+ +

Por exemplo, o código a seguir mostra os números dos dias que ainda faltam do ano vigente:

+ +
var hoje = new Date();
+var fimAno = new Date(1995, 11, 31, 23, 59, 59, 999); // Seta dia e mês
+fimAno.setFullYear(hoje.getFullYear()); // Seta o ano para esse ano
+var msPorDia = 24 * 60 * 60 * 1000; // Quantidade de milisegundos por dia
+var diasRestantes = (fimAno.getTime() - hoje.getTime()) / msPorDia;
+var diasRestantes = Math.round(diasRestantes); //retorna os dias restantes no ano
+
+ +

Este exemplo cria um objeto Date chamado hoje que contém a data de hoje. Ele, então, cria o objeto Date chamado fimAno e seta o ano para o ano vigente. Então, usando o número de milisegundos por dia, ele computa o número de dias entre hoje e fimAno, usando getTime e arredondando os números de dias.

+ +

O método parse é útil para associar valores de strings de data para objetos Date existentes. Por exemplo, o código a seguir usa parse e setTime para associar um valor de data ao objeto IPOdate:

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+
+ +

No exemplo a seguir, a função  JSClock() retorna o tempo no formato de um relógio digital.

+ +
function JSClock() {
+  var tempo = new Date();
+  var hora = tempo.getHours();
+  var minuto = tempo.getMinutes();
+  var segundo = tempo.getSeconds();
+  var temp = "" + ((hora > 12) ? hora - 12 : hora);
+  if (hora == 0)
+    temp = "12";
+  temp += ((minuto < 10) ? ":0" : ":") + minuto;
+  temp += ((segundo < 10) ? ":0" : ":") + segundo;
+  temp += (hora >= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+
+ +

A função JSClock primeiro cria um objeto new Date chamado tempo; já que nenhum argumento é passado, tempo é criado com data e hora atuais. Ela então chama os métodos getHours, getMinutes e getSeconds e associa o valor à hora, minuto e segundo atuais à hora, minuto e segundo.

+ +

As próximas quatro declarações constroem uma string baseada em time. A primeira declaração cria uma variável temp, associando um valor utilizando uma expressão condicional; se hora é maior que 12, (hora - 12), senão simplesmente hora, a não ser que hora seja 0 que, nesse caso, será 12.

+ +

A próxima declaração anexa um valor minuto a temp. Se o valor de minuto for menos que 10, a expressão condicional acrescenta uma string com um 0 na frente; senão ela acrescenta uma string com dois pontos. Então a declaração anexa um valor segundo a temp do mesmo jeito.

+ +

Finalmente, a expressão condicional anexa "P.M." a temp se hora for 12 ou maior; senão ela anexa "A.M." a temp.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html b/files/pt-br/web/javascript/guide/numeros_e_datas/index.html deleted file mode 100644 index 8f08cb3619..0000000000 --- a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Números e datas -slug: Web/JavaScript/Guide/Numeros_e_datas -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
- -

Este capítulo apresenta como utilizar números e datas em JavaScript.

- -

Números

- -

Em Javascript, todos os números são implementados em double-precision 64-bit binary format IEEE 754 (Por exemplo, um número entre -(253 -1) e 253 -1). Não havendo especificação de tipo Integer. Além de ser capaz de representar números de ponto flutuante, o tipo de número tem três valores simbólicos: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (not-a-number).  Veja também Estruturas e Tipos de Dados em Javascript em contexto com outros tipos primitivos em JavaScript.

- -

Você pode usar quatro tipos de números literais: decimal, binário, octal, e hexadecimal.

- -

Números Decimais

- -
1234567890
-42
-
-// Cuidado quando usar zeros à esquerda:
-
-0888 // 888 interpretado como decimal
-0777 // interpretado como octal  em modo no-strict (511 em decimal)
-
- -

Note que literais decimais podem começar com zero (0)  seguido por outro digito decimal, porém se o próximo dígito depois do primeiro zero for menor do que 8, o número será analisado como um número octal.

- -

Números Binários

- -

A sintaxe para números Binários, usa um zero à esquerda seguido de uma letra minúscula ou maiúscula "B" (0b or 0B). Se os dígitos depois de 0b não forem 0 ou 1, a seguinte exceção SyntaxError é lançada: "Missing binary digits after 0b".

- -
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
- -

Números octais

- -

A sintaxe dos números octais usa um zero na frente. Se os dígitos depois do 0 estiverem fora do alcance 0 a 7, o número será interpretado como um número decimal.

- -
var n = 0755; // 493
-var m = 0644; // 420
-
- -

Modo estrito no ECMAScript 5 proíbe a sintaxe octal. A sintaxe Octal não é parte do ECMAScript 5, mas é suportada por todos os navegadores prefixando o número octal com zero: 0644 === 420 e "\045" === "%". Em ECMAScript 6 números Octais são suportados prefixando o número com "0o" isto é.

- -
var a = 0o10; // ES6: Octal
-
- -

Numeros hexadecimais

- -

A sintaxe numérica Hexadecimal usa um 0 na frente seguido por uma letra "X" maiúscula ou minúscula (0x ou 0X). Se os dígidos depois do 0x estiverem fora do alcance (0123456789ABCDF), o seguinte erro de sintaxe (SyntaxError) ocorrerá: "Identifier starts immediately after numeric literal" (O identificador começa imediatamente depois do literal numérico).

- -
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-
- -

Exponenciação

- -
1E3   // 1000
-2e6   // 2000000
-0.1e2 // 10
- -

Objeto Number

- -

Um objeto built-in {{jsxref("Number")}} tem propriedades para constantes numéricas, tais como valor máximo, não número e infinito. Você não pode alterar os valores dessas propriedades e elas são usadas assim:

- -
var maiorNum = Number.MAX_VALUE; //Valor máximo
-var menorNum = Number.MIN_VALUE; //Valor mínimo
-var infiniteNum = Number.POSITIVE_INFINITY; //Infinito positivo
-var negInfiniteNum = Number.NEGATIVE_INFINITY; //Infinito negativo
-var notANum = Number.NaN; //Não é numeral
-
- -

Você sempre se refere a uma propriedade do objeto predefinido Number como mostrado acima, e não como uma propriedade de um objeto Number que você mesmo criou.

- -

A tabela à seguir sumariza as propriedades do objeto Number.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriedades de Number
PropriedadeDescrição
{{jsxref("Number.MAX_VALUE")}}O maior número representável.
{{jsxref("Number.MIN_VALUE")}}O menor número representável.
{{jsxref("Number.NaN")}}Valor "not a number" especial
{{jsxref("Number.NEGATIVE_INFINITY")}}Valor especial infinito negativo; retornado em overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Valor especial infinito positivo; retornado em overflow
{{jsxref("Number.EPSILON")}}Diferença entre um e o menor valor maior do que um que pode ser representado como um {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Mínimo safe integer em JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Máximo safe integer em JavaScript.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Number
MétodoDescrição
{{jsxref("Number.parseFloat()")}}Analisa um argumento string e retorna um número float.
- O mesmo que a função global {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analisa um argumento string e retorna um inteiro da raiz ou base especificada.
- O mesmo que a função global{{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Determina se o valor passado é um número finito.
{{jsxref("Number.isInteger()")}}Determina se o valor passado é um inteiro.
{{jsxref("Number.isNaN()")}}Determina se o valor passado é {{jsxref("Global_Objects/NaN", "NaN")}}. A versão mais robusta da original {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determina se o valor passado é um safe integer.
- -

O protótipo Number provê métodos para resgatar informações de objetos Number em vários formatos. A tabela a seguir sumariza os métodos de Number.prototype.

- - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Number.prototype
MétodoDescrição
{{jsxref("Number.toExponential", "toExponential()")}}Retorna uma string representando o número em uma notação exponencial.
{{jsxref("Number.toFixed", "toFixed()")}}Retorna uma string representando o número em notação com ponto-fíxo.
{{jsxref("Number.toPrecision", "toPrecision()")}}Retorna uma string representando o número em uma precisão especificada na notação de ponto-fíxo.
- -

Objeto Math

- -

O objeto {{jsxref("Math")}} tem propriedades e métodos para constantes matemáticas e funções. Por exemplo, o PI do objeto Math tem o valor de pi (3,141...), que você usaria em uma aplicação como

- -
Math.PI
-
- -

Similarmente, funções matemáticas padrão são métodos do Math. Isto inclui funções trigonométricas, logarítmicas, exponenciais, e outras funções. Por exemplo, se você quiser usar a função trigonométrica seno, basta escrever

- -
Math.sin(1.56)
-
- -

Note que todos os métodos trigonométricos pegam argumentos em radianos.

- -

A tabela a seguir sumariza os métodos do objeto Math.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Math
MétodoDescrição
{{jsxref("Math.abs", "abs()")}}Valor absoluto
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Funções trigonométricas padrão; Argumentos em radianos
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Funções trigonométricas inversas; retorna valores em radianos
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Funções trigonométricas hiperbólicas; retorna valores em radianos.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Funções trigonométricas hiperbólicas inversas; retorna valores em radianos.
-

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

- 		Funções exponenciais e logarítmicas.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Retorna o maior/menor inteiro que é menor/maior inteiro que ou igual ao argumento.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Retorna menor ou maior (respectivamente) de uma lista separada por vírgula de argumentos numéricos
{{jsxref("Math.random", "random()")}}Retorna um número aleatório entre 0 e 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Funções de arredondamento e truncamento.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Raiz quadrada, raiz cúbica, raiz quadrada da soma de argumentos ao quadrado.
{{jsxref("Math.sign", "sign()")}}O sinal de um número, indicando se o número é positivo, negativo ou zero.
{{jsxref("Math.clz32", "clz32()")}},
- {{jsxref("Math.imul", "imul()")}}		Número de zeros à esquerda na representação binária de 32-bits.
- The result of the C-like 32-bit multiplication of the two arguments.
- -

Diferentemente de muitos outros objetos, você nunca cria um objeto Math por conta própria. Você sempre deve utilizar o objeto Math nativo.

- -

Objeto Date

- -

JavaScript não possui dados do tipo data. No entanto, você pode usar o objeto {{jsxref("Date")}} e seus métodos para trabalhar com datas e horas nas suas aplicações. O objeto Date tem um grande número de métodos para setar, recuperar e manipular datas. Ele não tem nenhuma propriedade.

- -

JavaScript manipula datas de maneira semelhante ao Java. As duas linguagens tem muitos dos mesmos métodos para lidar com datas e ambas armazenam datas como números em milisegundos, desde 1 de janeiro de 1970, às 00:00:00 ( January 1, 1970, 00:00:00).

- -

A abrangência do objeto Date é de -100,000,000 dias até 100,000,000 dias relativos a 01 de janeiro de 1970 UTC.

- -

Para criar um objeto Date:

- -
var dateObjectName = new Date([parameters]);
-
- -

onde dateObjectName é o nome do objeto Date que está sendo criado; ele pode ser um novo objeto ou uma propriedade de um objeto existente.

- -

A chamada de Date sem a palavra reservada new, simplesmente converte a data para uma representação dela como string.

- -

Os parâmetros do código acima podem ser qualquer um a seguir:

- -
    -
  • Nada: cria a data e hora de hoje. Por exemplo, today = new Date();.
    • -
  • Uma string representando uma data da seguinte forma: "Mês dia, ano, horas:minutos:segundos". Por exemplo, Xmas95 = new Date("25 de dezembro de 1995, 13:30:00"). Se você omitir as horas, minutos ou segundos, o valor será setado para zero.
    • -
  • Um conjunto de valores inteiros para ano, mês e dia. Por exemplo, var Xmas95 = new Date(1995, 11, 25).
    • -
  • Um conjunto de valores inteiros par ano, mês, dia, hora, minuto e segundos. Por exemplo, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • -
- -

Métodos do objeto Date

- -

Os métodos do objeto Date para manipular data e hora pertencem às seguintes categorias:

- -
    -
  • Métodos "set", para setar valores de data e hora em objetos Date.
    • -
  • Métodos "get", para recuperar valores de data e hora de objetos Date.
    • -
  • Métodos "to", para retornar valores de string de objetos Date.
    • -
  • Métodos parse e UTC, para parsear string de Data.
    • -
- -

Com os métods "get" e "set", você pode recuperar e setar segundos, minutos, horas, dia e mês, dia da semana, meses e anos, separadamente. Existe um método getDay que retorna o dia da semana, mas não existe um método setDay correspondente, porque o dia da semana é setado automaticamente. Estes métodos utilizam números inteiros para representar estes valores da seguinte maneira:

- -
    -
  • Segundos e minutos: de 0 a 59
    • -
  • Horas: de 0 a 23
    • -
  • Dia: 0 (Domingo) a 6 (Sábado)
    • -
  • Data: 1 a 31 (dia do mês)
    • -
  • Meses: 0 (Janeiro) a 11 (Dezembro)
    • -
  • Ano: anos desde 1900
    • -
- -

Por exemplo, suponha que você queira definir a seguinite data:

- -
var Xmas95 = new Date("December 25, 1995");
-
- -

Então Xmas95.getMonth() retorna 11 e Xmas95.getFullYear() retorna 1995.

- -

Os métodos getTime e setTime são úteis para comparar datas. O método getTime retorna o número dos milisegundos desde 1 de janeiro de 1970, às 00:00:00 para um objeto Date.

- -

Por exemplo, o código a seguir mostra os números dos dias que ainda faltam do ano vigente:

- -
var hoje = new Date();
-var fimAno = new Date(1995, 11, 31, 23, 59, 59, 999); // Seta dia e mês
-fimAno.setFullYear(hoje.getFullYear()); // Seta o ano para esse ano
-var msPorDia = 24 * 60 * 60 * 1000; // Quantidade de milisegundos por dia
-var diasRestantes = (fimAno.getTime() - hoje.getTime()) / msPorDia;
-var diasRestantes = Math.round(diasRestantes); //retorna os dias restantes no ano
-
- -

Este exemplo cria um objeto Date chamado hoje que contém a data de hoje. Ele, então, cria o objeto Date chamado fimAno e seta o ano para o ano vigente. Então, usando o número de milisegundos por dia, ele computa o número de dias entre hoje e fimAno, usando getTime e arredondando os números de dias.

- -

O método parse é útil para associar valores de strings de data para objetos Date existentes. Por exemplo, o código a seguir usa parse e setTime para associar um valor de data ao objeto IPOdate:

- -
var IPOdate = new Date();
-IPOdate.setTime(Date.parse("Aug 9, 1995"));
-
- -

No exemplo a seguir, a função  JSClock() retorna o tempo no formato de um relógio digital.

- -
function JSClock() {
-  var tempo = new Date();
-  var hora = tempo.getHours();
-  var minuto = tempo.getMinutes();
-  var segundo = tempo.getSeconds();
-  var temp = "" + ((hora > 12) ? hora - 12 : hora);
-  if (hora == 0)
-    temp = "12";
-  temp += ((minuto < 10) ? ":0" : ":") + minuto;
-  temp += ((segundo < 10) ? ":0" : ":") + segundo;
-  temp += (hora >= 12) ? " P.M." : " A.M.";
-  return temp;
-}
-
- -

A função JSClock primeiro cria um objeto new Date chamado tempo; já que nenhum argumento é passado, tempo é criado com data e hora atuais. Ela então chama os métodos getHours, getMinutes e getSeconds e associa o valor à hora, minuto e segundo atuais à hora, minuto e segundo.

- -

As próximas quatro declarações constroem uma string baseada em time. A primeira declaração cria uma variável temp, associando um valor utilizando uma expressão condicional; se hora é maior que 12, (hora - 12), senão simplesmente hora, a não ser que hora seja 0 que, nesse caso, será 12.

- -

A próxima declaração anexa um valor minuto a temp. Se o valor de minuto for menos que 10, a expressão condicional acrescenta uma string com um 0 na frente; senão ela acrescenta uma string com dois pontos. Então a declaração anexa um valor segundo a temp do mesmo jeito.

- -

Finalmente, a expressão condicional anexa "P.M." a temp se hora for 12 ou maior; senão ela anexa "A.M." a temp.

- -

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html b/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html deleted file mode 100644 index 953a9543de..0000000000 --- a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html +++ /dev/null @@ -1,583 +0,0 @@ ---- -title: Sintaxe e tipos -slug: Web/JavaScript/Guide/Sintaxe_e_tipos ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.

- -

Sintaxe básica

- -

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

- -

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode.

- -

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declarações")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.

- -

Comentários

- -

A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:

- -
// comentário de uma linha
-
-/* isto é um comentário longo
-   de múltiplas linhas.
- */
-
-/* Você não pode, porém, /* aninhar comentários */ SyntaxError */
- -

Declarações

- -

Existem três tipos de declarações em JavaScript.

- -
-
{{jsxref("Statements/var", "var")}}
-
Declara uma variável, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
-
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
-
Declara uma constante apenas de leitura.
-
- -

Variáveis

- -

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.

- -

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).

- -

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

- -

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

- -

Declarando variáveis

- -

Você pode declarar uma variável de três formas:

- -
    -
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis global.
    • -
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • -
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • -
- -

Classificando variáveis

- -

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.

- -

Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:

- -
var a;
-console.log("O valor de a é " + a); // saída "O valor de a é undefined"
-console.log("O valor de b é " + b); // throws ReferenceError exception
-
- -

Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).

- -
var input;
-if(input === undefined){
-  facaIsto();
-} else {
-  facaAquilo();
-}
-
- -

O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:

- -
var myArray = [];
-if (!myArray[0]) myFunction();
-
- -

O valor undefined converte-se para NaN quando usado no contexto numérico.

- -
var a;
-a + 2;  // Avaliado como NaN
-
- -

Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:

- -
var n = null;
-console.log(n * 32); // a saída para o console será 0.
-
- -

Escopo de variável

- -

Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local,  pois ela está disponível somente dentro dessa função.

- -

JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if. 

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y não está definido
-
- -

Hoisting

- -

Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.

- -
/**
- * Exemplo 1
- */
-console.log(x === undefined); // exibe "true"
-var x = 3;
-
-/**
- * Exemplo 2
- */
-// returnará um valor undefined
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-
- -

Os exemplos acima serão interpretados como:

- -
/**
- * Exemplo 1
- */
-var x;
-console.log(x === undefined); // exibe "true"
-x = 3;
-
-/**
- * Exemplo 2
- */
-var myvar = "um valor";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "valor local";
-})();
-
- -

Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.

- -

Variáveis Globais

- -

Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel. 

- -

Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.

- -

Constantes

- -

Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, underline ou cifrão e pode conter caracteres alfabético, numérico ou underline.

- -
const prefix = '212';
-
- -

Uma constante não pode alterar seu valor por meio de uma atribuição ou ao ser declarada novamente enquanto o script é executado. Deve ser inicializada com um valor.

- -

As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, o identificado é adotado para representar uma variável.

- -

Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: 

- -
// Isto irá causar um  erro
-function f() {};
-const f = 5;
-
-// Isto também irá causar um erro.
-function f() {
-  const g = 5;
-  var g;
-
-  //declarações
-}
-
- -

Estrutura de dados e tipos

- -

Tipos de dados

- -

O mais recente padrão ECMAScript define sete tipos de dados:

- -
    -
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: -
      -
    • {{Glossary("Boolean")}}. true e false.
      • -
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • -
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • -
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • -
    • {{Glossary("String")}}. "Howdy"
      • -
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • -
    -
    • -
  • e {{Glossary("Object")}}
    • -
- -

Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  {{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funçõess")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.

- -

Conversão de tipos de dados

- -

JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:

- -
var answer = 42;
-
- -

E depois, você pode atribuir uma string para a mesma variável, por exemplo:

- -
answer = "Obrigado pelos peixes...";
-
- -

Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.

- -

Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:

- -
x = "A resposta é " + 42 // "A resposta é 42"
-y = 42 + " é a resposta" // "42 é a resposta"
-
- -

Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Convertendo strings para números

- -

No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.

- -

Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
- -

Literais

- -

Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:

- -
    -
  • {{anch("Array literal")}}
    • -
  • {{anch("Literais boolean")}}
    • -
  • {{anch("Literais de ponto flutuante")}}
    • -
  • {{anch("Inteiros")}}
    • -
  • {{anch("Objeto literal")}}
    • -
  • {{anch("String literal")}}
    • -
- -

Array literal

- -

Um literal de array é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.

- -

O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -
-

Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.

-
- -

Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.

- -

Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e Coleções indexadas para detalhes sobre array de objetos.

- -

Vírgulas extras em array literal

- -

Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:

- -
var fish = ["Lion", , "Angel"];
-
- -

Esse array tem dois elementos com valores e um elemento vazio (fish[0] é "Lion", fish[1] é undefined, e fish[2] é "Angel" ).

- -

Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.

- -
-

Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.

-
- -
var myList = ['home', , 'school', ];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.

- -
var myList = [ , 'home', , 'school'];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.

- -
var myList = ['home', , 'school', , ];
-
- -

Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.

- -

Literais Boolean

- -

O tipo Boolean tem dois valores literal: true e false.

- -

Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.

- -

Inteiros

- -

Inteiros podem sem expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

- -
    -
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • -
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • -
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • -
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • -
- -

Alguns exemplos de inteiros literal são:

- -
0, 117 and -345 (decimal, base 10)
-015, 0001 and -077 (octal, base 8)
-0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
-0b11, 0b0011 and -0b11 (binário, base 2)
-
- -

Para maiores informações, veja Literais numérico na referência Léxica.

- -

Literais de ponto flutuante

- -

Um literal de ponto flutuante pode ter as seguintes partes:

- -
    -
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • -
  • Um ponto decimal ("."),
    • -
  • Uma fração (outro número decimal),
    • -
  • Um expoente.
    • -
- -

O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").

- -

Mais sucintamente, a sintaxe é:

- -
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
-
- -

Por exemplo:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Objeto literal

- -

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.

- -

Segue um exemplo de um objeto literal. O primeiro elemento do objeto car define uma propriedade, myCar, e atribui para ele uma nova string, "Saturn"; o segundo elemento, a propriedade getCar, é imediatamente atribuído o resultado de chamar uma função (carTypes("Honda")); o terceiro elemento, a propriedade especial, usa uma variável existente (sales).

- -
var sales = "Toyota";
-
-function carTypes(name) {
-  if (name == "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + name + ".";
-  }
-}
-
-var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
-
- -

Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.

- -
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-
- -

Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array ("[]").

- -
var unusualPropertyNames = {
-  "": "Uma string vazia",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
-console.log(unusualPropertyNames[""]);  // Um string vazia
-console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
-console.log(unusualPropertyNames["!"]); // Bang!
- -

Observe:

- -
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a não está definido
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

String Literal

- -

Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.

- -
"foo"
-'bar'
-"1234"
-"um linha \n outra linha"
-"John's cat"
-
- -

Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:

- -
console.log("John's cat".length)
-// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
-// Nesse caso, 10 caracteres.
-
- -

Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.

- -

Uso de caracteres especiais em string

- -

Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.

- -
"uma linha \n outra linha"
-
- -

A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tabela: Caracteres especiais no JavaScript
CaracterDescrição
\0Byte nulo
\bBackspace
\fAlimentador de formulário
\nNova linha
\rRetorno do carro
\tTabulação
\vTabulação vertical
\'Apóstrofo ou aspas simples
\"Aspas dupla
\\Caractere de barra invertida
\XXX -

Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.

-
\xXX -

Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.

-
\uXXXX -

Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode.

-
- -

Caracteres de escape

- -

Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.

- -

Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como escaping das aspas. Por exemplo:

- -
var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
-console.log(quote);
-
- -

O resultado disso seria:

- -
Ele lê "The Cremation of Sam McGee" de R.W. Service.
-
- -

Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:

- -
var home = "c:\\temp";
-
- -

Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.

- -
var str = "esta string \
-está quebrada \
-em várias\
-linhas."
-console.log(str);   // esta string está quebrada em várias linhas.
-
- -

Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:

- -
var poem =
-"Rosas são vermelhas,\n\
-Violetas são azul.\n\
-Eu sou esquizofrênico,\n\
-e é isso que sou."
-
- -

Mais informação

- -

Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:

- - - -

No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/pt-br/web/javascript/guide/text_formatting/index.html b/files/pt-br/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..1b4bb50772 --- /dev/null +++ b/files/pt-br/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,250 @@ +--- +title: Formatando texto +slug: Web/JavaScript/Guide/Formatando_texto +tags: + - Guía + - JavaScript +translation_of: Web/JavaScript/Guide/Text_formatting +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+ +

Esse capítulo introduz como trabalhar com strings e texto em JavaScript.

+ +

Strings

+ +

O tipo {{Glossary("String")}} do JavaScript é usado para representar informações de texto. É um conjunto de "elementos" composto por valores inteiros de 16-bits sem sinal. Cada elemento dentro da String ocupa uma posição dentro dessa String. O primeiro elemento está no índice 0, o próximo no índice 1, e assim sucessivamente. O tamanho de uma String é a quantidade de elementos que ela possui. Você pode criar strings usando strings literais ou objetos string.

+ +

Strings literais

+ +

Você pode criar strings usando aspas simples ou aspas duplas:

+ +
'foo'
+"bar"
+ +

Strings mais avançadas podem ser criadas usando sequências de escape:

+ +

Sequências de escape hexadecimais

+ +

O número depois de \x é interpretado como um número hexadecimal.

+ +
'\xA9' // "©"
+
+ +

Sequências de escape unicode

+ +

As sequências de escape unicode requerem no mínimo quatro caracteres depois do \u.

+ +
'\u00A9' // "©"
+ +

Sequências de escape Unicode code point

+ +

É novo no ECMAScript 6. Com essas sequências, cada caractere pode ser "escapado" usando números hexadecimais, sendo possível usar pontos de código Unicode de até 0x10FFFF. Com escapes Unicode simples muitas vezes é necessário escrever as metades substitutas separadamente para obter o mesmo resultado.

+ +

Veja também {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}'
+
+// o mesmo com escapes Unicode simples
+'\uD87E\uDC04'
+ +

Objetos String

+ +

O objeto {{jsxref("String")}} é como uma "capa" ao redor do tipo primitivo string.

+ +
var s = new String("foo"); // Cria um objeto String
+console.log(s); // Exibe no console: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Retorna 'object'
+
+ +

Você pode chamar qualquer um dos métodos do objeto String em cima de uma string literal — JavaScript automaticamente converte a string literal em um objeto String temporário, chama o método, e então descarta o objeto String temporário. Você pode também usar a propriedade String.length com uma string literal.

+ +

Você deve usar strings literais a menos que você realmente precise usar um objeto String, pois objetos String podem ter comportamentos inesperados. Por exemplo:

+ +
var s1 = "2 + 2"; // Cria uma string literal
+var s2 = new String("2 + 2"); // Creates um objeto String
+eval(s1); // Retorna o número 4
+eval(s2); // Retorna a string "2 + 2"
+ +

Um objeto String possui uma propriedade, length, que indica o número de caracteres na string. Por exemplo, o código a seguir atribui o valor 11 à variável x, pois "Olá, mundo!" possui 11 caracteres:

+ +
var minhaString = "Olá, mundo!";
+var x = minhaString.length;
+
+ +

Um objeto String possui uma variedade de métodos: por exemplo aqueles que retornam uma variação da própria string, como substring e toUpperCase.

+ +

A tabela a seguir lista os métodos de objetos {{jsxref("String")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Métodos de String

+
MétodoDescrição
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retorna o código do caractere ou o caractere em uma posição específica na string.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retorna a posição de uma substring específica na string ou a última posição da substring específica, respectivamente.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retorna se uma string começa, termina ou contém uma outra string específica.
{{jsxref("String.concat", "concat")}}Concatena o texto de duas strings e retorna uma nova string.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Cria uma string a partir de uma sequência específica de valores Unicode. Esse é um método da classe String, não de uma instância do tipo String.
{{jsxref("String.split", "split")}}Separa um objeto String em um array de strings, separando a string em substrings.
{{jsxref("String.slice", "slice")}}Extrai uma seção de uma string e retorna uma nova string.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retorna um subconjunto específico de uma string, definindo os índices inicial e final, ou definindo um índice e um tamanho.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Trabalha com expressões regulares.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} +

Retorna a string com todos caracteres em minúsculo, ou maiúsculo, respectivamente.

+
{{jsxref("String.normalize", "normalize")}}Retorna a Forma Normalizada Unicode (Unicode Normalization Form) da string que chama o método.
{{jsxref("String.repeat", "repeat")}}Retorna uma string contendo os elementos do objeto repetidos pela quantidade de vezes dada.
{{jsxref("String.trim", "trim")}}Retira espaços em branco no começo e no final da string.
+ +

Template strings com várias linhas

+ +

Template strings são strings literais que permitem expressões no seu conteúdo. Você pode usar os recursos de strings com multiplas linhas e interpolações de string com as template strings.

+ +

Template strings são declaradas com o acento grave (``) ao invés de aspas simples ou aspas duplas. Essas strings podem conter place holders. Os place holders são indicados pelo cifrão e com chaves ( ${expressao} ).

+ +

Várias linhas (Multi-lines)

+ +

Qualquer caractere de nova linha ( '\n' ) inserido na string também faz parte das template string. Usando strings normais, você teria que usar a sintaxe a seguir para conseguir uma string de várias linhas

+ +
console.log("linha de texto 1\n\
+linha de texto 2");
+// "linha de texto 1
+// linha de texto 2"
+ +

Para obter o mesmo efeito com strings multi-lines, você pode agora escrever:

+ +
console.log(`linha de texto 1
+linha de texto 2`);
+// "linha de texto 1
+// linha de texto 2"
+ +

Expressões inseridas

+ +

Para conseguir inserir expressões com strings normais, você teria que usar a seguinte sintaxe:

+ +
var a = 5;
+var b = 10;
+console.log("Quinze é " + (a + b) + " e\nnão " + (2 * a + b) + ".");
+// "Quinze é 15 e
+// não 20."
+ +

Agora, com template strings, você tem a capacidade de usar uma forma mais simples e legível para fazer essas substituições:

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e\nnão ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."
+ +

Para mais informações, leia sobre Template strings na referência JavaScript.

+ +

Internacionalização

+ +

O objeto {{jsxref("Intl")}} é o namespace para a API de Internacionalização do ECMAScript, que oferece comparação de strings sensíveis à linguagem, formatação de números, e formatação de datas e horas. Os construtores para os objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}} são propriedades do objeto Intl.

+ +

Formatação de data e hora

+ +

O objeto {{jsxref("DateTimeFormat")}} é útil para a formatação de data e hora. O código a seguir formata uma data em inglês no formato que é utilizado nos Estados Unidos. (O resultado é diferente em outro fuso horário).

+ +
var msPorDia = 24 * 60 * 60 * 1000; // número de milisegundos em um dia
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPorDia * (44 * 365 + 11 + 197));
+
+var opcoes = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", opcoes).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+
+ +

Formatação de números

+ +

O objeto {{jsxref("NumberFormat")}} é útil para formatar números, por exemplo unidade monetária.

+ +
var precoGasolina = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(precoGasolina.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+
+ +

Collation

+ +

O objeto {{jsxref("Collator")}} é usado para comparar e ordenar strings.

+ +

Por exemplo, existem atualmente duas ordens diferentes de classificação no Alemão: listaTelefônica e dicionário. A ordenação da listaTelefônica enfatiza o som, e é como se "ä", "ö", e assim por diante, fossem expandidos para "ae", "oe", e assim sucessivamente, para definir a ordem.

+ +
var nomes = ["Hochberg", "Hönigswald", "Holzman"];
+
+var phonebookAlemao = new Intl.Collator("de-DE-u-co-phonebk");
+
+// como se ordenasse ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(phonebookAlemao.compare).join(", "));
+// imprime "Hochberg, Hönigswald, Holzman"
+
+ +

Algumas palavras do alemão são conjugadas com tremas extras, mas no dicionário essas palavras são ordenadas ignorando os tremas (exceto quando ordenando palavras que tem apenas o trema como diferença: schon antes de schön).

+ +
var dicionarioAlemao = new Intl.Collator("de-DE-u-co-dict");
+
+// como se ordenasse ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(dicionarioAlemao.compare).join(", "));
+// imprime "Hochberg, Holzman, Hönigswald"
+
+ +

Para mais informação sobre a API {{jsxref("Intl")}}, veja também Introducing the JavaScript Internationalization API (em inglês).

+ +
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html b/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html deleted file mode 100644 index 1dccaeef2e..0000000000 --- a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Trabalhando com objetos -slug: Web/JavaScript/Guide/Trabalhando_com_Objetos -tags: - - Comparando Objetos - - Contrutor - - Documento - - ECMAScript6 - - Guia(2) - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome (ou chave) e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

- -

Este capítulo descreve como usar objetos, propriedades, funções, e métodos, e como criar seus próprios objetos.

- -

Visão geral de objetos

- -

Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.

- -

Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto, com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.

- -

Objetos e propriedades

- -

Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:

- -
-
nomeDoObjeto.nomeDaPropriedade
-
-
- -

Como as variáveis em JavaScript, o nome do objeto (que poderia ser uma variável normal) e um nome de propriedade diferem em maiúsculas/minúsculas (por exemplo, cor e Cor são propriedades diferentes). Você pode definir uma propriedade atribuindo um valor a ela. Por exemplo, vamos criar um objeto chamado meuCarro e dar a ele propriedades chamadas fabricacao, modelo, e ano, conforme mostrado a seguir:

- -
var meuCarro = new Object();
-meuCarro.fabricacao = "Ford";
-meuCarro.modelo = "Mustang";
-meuCarro.ano = 1969;
-
- -

Propriedades não definidas de um objeto são {{jsxref("undefined")}} (e não {{jsxref("null")}}).

- -
meuCarro.semPropriedade; //undefined
- -

Propriedades de objetos em JavaScript podem também ser acessadas ou alteradas usando-se notação de colchetes. Objetos são às vezes chamados de arrays associativos, uma vez que cada propriedade é associada com um valor de string que pode ser usado para acessá-la. Então, por exemplo, você poderia acessar as propriedades do objeto meuCarro como se segue:

- -
meuCarro["fabricacao"] = "Ford";
-meuCarro["modelo"] = "Mustang";
-meuCarro["ano"] = 1969;
-
- -

Um nome de propriedade de um objeto pode ser qualquer string JavaScript válida, ou qualquer coisa que possa ser convertida em uma string, incluindo uma string vazia. No entanto, qualquer nome e propriedade que não é um identificador JavaScript válido (por exemplo, um nome de propriedade que tem um espaço ou um hífen, ou que começa com um número) só pode ser acessado(a) usando-se a notação de colchetes. Essa notação é também muito útil quando nomes de propriedades devem ser determinados dinamicamente (quando o nome da propriedade não é determinado até o momento de execução). Exemplos são mostrados a seguir:

- -
var meuObj = new Object(),
-    str = "minhaString",
-    aleat = Math.random(),
-    obj = new Object();
-
-meuObj.tipo               = "Sintaxe de ponto";
-meuObj["data de criacao"] = "String com espaco";
-meuObj[str]               = "valor de String";
-meuObj[aleat]             = "Numero Aleatorio";
-meuObj[obj]               = "Objeto";
-meuObj[""]                = "Mesmo uma string vazia";
-
-console.log(meuObj);
-
- -

Você pode também acessar propriedades usando um valor de string que está armazenado em uma variável:

- -
-
var nomeDaPropriedade = "fabricacao";
-meuCarro[nomeDaPropriedade] = "Ford";
-
-nomeDaPropriedade = "modelo";
-meuCarro[nomeDaPropriedade] = "Mustang";
-
-
- -

Você pode usar a notação de colchetes com o comando for...in para iterar por todas as propriedades enumeráveis de um objeto. Para ilustrar como isso funciona, a seguinte função mostra as propriedades de um objeto quando você passa o objeto e o nome do objeto como argumentos para a função:

- -
function mostrarProps(obj, nomeDoObj) {
-  var resultado = "";
-  for (var i in obj) {
-    if (obj.hasOwnProperty(i)) {
-        resultado += nomeDoObj + "." + i + " = " + obj[i] + "\n";
-    }
-  }
-  return resultado;
-}
-
- -

Então, a chamada de função mostrarProps(meuCarro, "meuCarro") retornaria o seguinte:

- -
meuCarro.fabricacao = Ford
-meuCarro.modelo = Mustang
-meuCarro.ano = 1969
- -

Objetos: tudo

- -

Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de null e undefined - são tratados como objetos. Eles podem receber propriedades (propriedades atribuídas de alguns tipos não são persistentes), e possuem todas as características de objetos.

- -

Enumerando todas as propriedades de um objeto

- -

Começando com a ECMAScript 5, há três formas nativas de se listar (ou "caminhar por") as propriedades de um objeto:

- -
    -
  • for...in loops
    - Esse método caminha por todas as propriedades enumeráveis de um objeto e sua cadeia de protótipos
    • -
  • Object.keys(o)
    - Esse método retorna um array com todos os nomes ("chaves") de propriedades próprios de um objeto o (mas não na cadeia de protótipos).
    • -
  • Object.getOwnPropertyNames(o)
    - Esse método retorna um array contendo todos os nomes de propriedades próprios (enumeráveis ou não) de um objeto o.
    • -
- -

Antes, na ECMAScript 5, não existia uma forma nativa de se listar todas as propriedades de um objeto. No entanto, isso pode ser feito com a seguinte função:

- -
function listarTodasAsPropriedades(o){
-	var objectoASerInspecionado;
-	var resultado = [];
-
-	for(objectoASerInspecionado = o; objectoASerInspecionado !== null; objectoASerInspecionado = Object.getPrototypeOf(objectoASerInspecionado)){
-		resultado = resultado.concat(Object.getOwnPropertyNames(objectoASerInspecionado));
-	}
-
-	return resultado;
-}
-
- -

Isso pode ser útil para revelar propriedades "escondidadas" (propriedades na cadeia de protótipos que não são acessíveis através do objeto, porque outra propriedade possui o mesmo nome anteriormente na cadeia de protótipos). A listagem de propriedades acessíveis só pode ser facilmente feita através da remoção de valores duplicados no array.

- -

Criando novos objetos

- -

JavaScript possui um número de objetos pré-definidos. Além disso, você pode criar seus próprios objetos. Você pode criar um objeto usando um objeto inicializador. Alternativamente, você pode primeiro criar uma função construtora e depois instanciar um objeto usando aquela função e o operador new.

- -

Usando inicializadores de objeto

- -

Além de criar objetos usando uma função construtora, você pode criar objetos usando um inicializador de objeto. O uso de inicializadores de objeto é às vezes conhecido como criar objetos com notação literal. O termo "inicializador de objeto" é consistente com a terminologia usada por C++.

- -

A sintaxe para um objeto usando-se um inicializador de objeto é:

- -
var obj = { propriedade_1:   valor_1,   // propriedade_# pode ser um identificador...
-            2:            valor_2,   // ou um numero...
-            // ...,
-            "propriedade n": valor_n }; // ou uma string
-
- -

onde obj é o nome do novo objeto, cada propriedade_i é um identificador (um nome, um número, ou uma string literal), e cada valor_i é uma expressão cujo valor é atribuído à propriedade_i. O obj e a atribuição são opcionais; se você não precisa fazer referência a esse objeto em nenhum outro local, você não precisa atribuí-lo a uma variável. (Note que você pode precisar colocar o objeto literal entre parentêses se o objeto aparece onde um comando é esperado, de modo a não confundir o literal com uma declaração de bloco.)

- -

Se um objeto é criado com um inicializador de objeto em um script de alto nível, JavaScript interpreta o objeto a cada vez que avalia uma expressão contendo o objeto literal. Além disso, um inicializador usado em uma função é criado toda vez que a função é chamada.

- -

O seguinte comando cria um objeto e o atribui à variável x somente se a expressão cond é verdadeira.

- -
if (cond) var x = {hi: "there"};
-
- -

O seguinte exemplo cria minhaHonda com três propriedades. Note que a propriedade motor é também um objeto com suas próprias propriedades.

- -
var minhaHonda = {cor: "vermelho", rodas: 4, motor: {cilindros: 4, tamanho: 2.2}};
-
- -

Você pode também usar inicializadores de objeto para criar arrays. Veja arrays literais.

- -

Usando uma função construtora

- -

Alternativamente, você pode criar um objeto com estes dois passos:

- -
    -
  1. Defina o tipo de objeto escrevendo uma função construtora. Há uma forte convenção, e com boa razão, de se usar uma letra inicial maiúscula.
    2. -
  2. Crie uma instância do objeto com new.
    3. -
- -

Para definir um tipo de objeto, crie uma função para o tipo de objeto que especifique seu nome, suas propriedades e seus métodos. Por exemplo, suponha que você queira criar um tipo objeto para carros. Você quer que esse tipo de objeto seja chamado carro, e você quer ele tenha propriedades de marca, modelo, e ano. Para fazer isto, você escreveria a seguinte função:

- -
function Carro(marca, modelo, ano) {
-  this.marca = marca;
-  this.modelo = modelo;
-  this.ano = ano;
-}
-
- -

Note o uso de this para atribuir valores às propriedades do objeto com base nos valores passados para a função.

- -

Agora você pode criar um objeto chamado meucarro como se segue:

- -
var meucarro = new Carro("Eagle", "Talon TSi", 1993);
-
- -

Esse comando cria meucarro e atribui a ele valores especificados para suas propriedade. Então o valor de meucarro.marca é a string "Eagle", meucarro.ano é o inteiro 1993, e assim por diante.

- -

Você pode criar qualquer número de objetos carro com o uso de new. Exemplo,

- -
var carroDeKen = new Carro("Nissan", "300ZX", 1992);
-var carroDeVPG = new Carro("Mazda", "Miata", 1990);
-
- -

Um objeto pode ter uma propriedade que por si só também é um objeto. Por exemplo, suponha que você define um objeto chamado pessoa como se segue:

- -
function Pessoa(nome, idade, sexo) {
-  this.nome = nome;
-  this.idade = idade;
-  this.sexo = sexo;
-}
-
- -

e então você instancia dois novos objetos pessoa da seguinte forma:

- -
var jose = new Pessoa("Jose Silva", 33, "M");
-var paulo = new Pessoa("Paulo Santos", 39, "M");
-
- -

Então, você pode reescrever a definição de carro de modo a incluir uma propriedade dono que recebe um objeto pessoa, como se segue:

- -
function Carro(marca, modelo, ano, dono) {
-  this.marca = marca;
-  this.modelo = modelo;
-  this.ano = ano;
-  this.dono = dono;
-}
-
- -

Para instanciar os novos objetos, você então usa o seguinte:

- -
var carro1 = new Carro("Eagle", "Talon TSi", 1993, jose);
-var carro2 = new Carro("Nissan", "300ZX", 1992, paulo);
-
- -

Perceba que ao invés de passar uma string literal ou um valor inteiro na hora de criar os novos objetos, os comandos acima passam os objetos jose e paulo como os argumentos para os donos. Então se você quiser descobrir o nome do dono de carro2, você pode acessar a seguinte propriedade:

- -
carro2.dono
-
- -

Note que você pode sempre adicionar uma propriedade a um objeto definido anteriormente. Por exemplo, o comando

- -
carro1.cor = "preto";
-
- -

adiciona uma propriedade cor ao carro1, e dá a ele o valor "preto." No entanto, isso não afeta nenhum outro objeto. Para adicionar a nova propriedade a todos os objetos do mesmo tipo, você deve adicionar a propriedade na definição do tipo de objeto carro.

- -

Usando o método Object.create

- -

Objetos podem também ser criados usando-se o método Object.create(). Esse método pode ser muito útil, pois permite que você escolha o objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora.

- -
// Encapsulamento das propriedades e métodos de Animal
-var Animal = {
-  tipo: "Invertebrados", // Propriedades de valores padrão
-  qualTipo : function() {  // Método que ira mostrar o tipo de Animal
-    console.log(this.tipo);
-  }
-}
-
-// Cria um novo tipo de animal chamado animal1
-var animal1 = Object.create(Animal);
-animal1.qualTipo(); // Saída:Invertebrados
-
-// Cria um novo tipo de animal chamado Peixes
-var peixe = Object.create(Animal);
-peixe.tipo = "Peixes";
-peixe.qualTipo(); // Saída: Peixes
- -

Herança

- -

Todos os objetos em JavaScript herdam de pelo menos um outro objeto. O objeto "pai" é conhecido como o protótipo, e as propriedades herdadas podem ser encontradas no objeto prototype do construtor.

- -

Indexando Propriedades de Objetos

- -

Você pode se referir a uma propriedade de um objeto pelo seu nome de propriedade ou pelo seu índice ordinal. Se você inicialmente definiu uma propriedade pelo nome, você deve sempre se referir a ela pelo nome, e se você inicialmente definir uma propriedade por um índice, você deve sempre se referir a ela pelo índice.

- -

Esta restrição se aplica quando  você cria um objeto e suas propriedades com uma função construtora (como fizemos anteriormente com o objeto do tipo carro) e quando você define propriedades individuais explicitamente (por exemplo, meuCarro.cor = "vermelho"). Se você inicialmente definir uma propriedade do objeto com um índice, tal como meuCarro[5] = "25 mpg", você pode subsequentemente referir-se á propriedade somente como meuCarro[5].

- -

A exceção a esta regra é a objetos refletidos a partir do HTML, como o conjunto de formulários. Você pode sempre se referir a objetos nessas matrizes por seu número de ordem (com base em onde eles aparecem no documento) ou seu nome (se definido). Por exemplo, se a segunda tag <FORM> em um  documento tem um atributo NAME de "meuFormulario", você pode se referir ao formulário como document.forms[1] ou document.forms["meuFormulario"] ou document.meuFormulario.

- -

Definindo propriedades para um tipo de objeto

- -

Você pode adicionar uma propriedade a um tipo de objeto definido anteriormente, utilizando a propriedade prototype. Esta define uma propriedade que é partilhada por todos os objetos do tipo especificado, em vez de apenas uma instância do objeto. O código a seguir adiciona uma propriedade cor para todos os objetos do tipo Carro, em seguida adiciona um valor a propriedade cor do objeto carro1.

- -
Carro.prototype.cor = null;
-carro1.cor = "preto";
-
- -

Consulte a propriedade prototype do objeto Function na Referência JavaScript  para mais informações.

- -

Definindo métodos

- -

Um método é uma função associada a um objeto, ou, simplesmente, um método é uma propriedade de um objeto que é uma função. Métodos são definidos da forma que as funções normais são definidas, exceto que eles tenham que ser atribuídos como propriedade de um objeto. São exemplos:

- -
nomeDoObjeto.nomedometodo = nome_da_funcao;
-
-var meuObjeto = {
-  meuMetodo: function(parametros) {
-    // ...faça algo
-  }
-};
-
- -

Onde nomeDoObjeto é um objeto existente, nomedometodo é o nome que você atribuiu ao método, e nome_da_funcao é o nome da função.

- -

Em seguida, você pode chamar o método no contexto do objeto da seguinte forma:

- -
objeto.nomedometodo(parametros);
-
- -

Você pode definir métodos para um tipo de objeto incluindo uma definição de metodo na função construtora do objeto. Por exemplo, você poderia definir uma função que iria formatar e mostrar as propriedades do objeto carro previamente definido; por exemplo,

- -
function mostreCarro() {
-  var resultado = "Um belo " + this.ano + " " + this.fabricacao
-    + " " + this.modelo;
-  pretty_print(resultado);
-}
-
- -

onde pretty_print é uma função que mostra uma linha horizontal e uma string. Observe o uso de this para referenciar o objeto ao qual o método pertence.

- -

Você pode fazer desta função um método de carro, adicionando seu estado à definição do objeto.

- -
this.mostreCarro = mostreCarro;
-
- -

Assim, a definição completa de carro seria agora, parecida com essa:

- -
function Carro(fabricacao, modelo, ano, proprietario) {
-  this.fabricacao = fabricacao;
-  this.modelo = modelo;
-  this.ano = ano;
-  this.proprietario = proprietario;
-  this.mostreCarro = mostreCarro;
-}
-
- -

Então você pode chamar o método mostreCarro para cada objeto seguinte:

- -
carro1.mostreCarro();
-carro2.mostreCarro();
-
- -

Usando this para referências de objetos

- -

JavaScript tem uma palavra-chave especial, this, que você pode usar dentro de um método para referenciar o objeto corrente. Por exemplo, suponha que você tenha uma função chamada validate que valida o valor da propriedade de um objeto, dado o objeto e os valores altos e baixos:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival))
-    alert("Valor inválido!");
-}
-
- -

Então, você poderia chamar validate no manipulador de evento onchange em cada elemento do formulário, usando this para passar o elemento, como no exemplo a seguir:

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

No geral, this referencia o objeto chamando um método.

- -

Quando combinado com a propriedade form , this pode referenciar a forma original do objeto atual. No exemplo seguinte, o formulário myForm contém um objeto Text e um botão. Quando o usuário clica no botão, o valor do objeto Text é definido como nome do formulário. O manipulador de eventos onclick do botão usa this.form para referenciar a forma original, myForm.

- -
<form name="myForm">
-<p><label>Nome do form:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Mostre o Nome do Form"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

Definindo getters e setters

- -

Um getter é um método que obtém o valor de uma propriedade específica. Um setter é um método que define o valor de uma propriedade específica. Você pode definir getters e setters em qualquer objeto de núcleo pré-definido ou objeto definido pelo usuário que suporta a adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.

- -

O código a seguir ilustra como getters e setters podem funcionar para um objeto o definido pelo usuário.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
- -

As propriedades do objeto o são:

- -
    -
  • o.a — um número
    • -
  • o.b — um getter que retorna o.a + 1
    • -
  • o.c — um setter que define o valor de o.a pela metade do valor definindo para o.c
    • -
- -

Observe que nomes de função de getters e setters definidos em um objeto literal usando "[gs]et property()" (ao contrário de __define[GS]etter__ ) não são os próprios nomes dos getters, embora a sintaxe [gs]et propertyName(){ } possa  induzir ao erro e você pensar de outra forma. Para nomear uma função getter ou setter usando a sintaxe "[gs]et property()", define explicitamente um função nomeada programaticamente usando Object.defineProperty (ou o legado fallback Object.prototype.__defineGetter__).

- -

O código a seguir ilustra como getters e setters podem extender o protótipo Date para adicionar a propriedade ano para todas as instâncias de classes Date pré-definidas. Ele usa os métodos getFullYear e setFullYear existentes da classe Date para suportar o getter e setter da propriedade ano.

- -

Estes estados definem um getter e setter para a propriedade ano:

- -
var d = Date.prototype;
-Object.defineProperty(d, "year", {
-  get: function() { return this.getFullYear() },
-  set: function(y) { this.setFullYear(y) }
-});
- -

Estes estados usam o getter e setter em um objeto Date:

- -
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
- -

A principio, getters e setters podem ser ou

- -
    -
  • definidos usando objetos inicializadores, ou
    • -
  • adicionar posteriormente para qualquer objeto a qualquer tempo usando um método getter ou setter adicionado
    • -
- -

Ao definir getters e setters usando objetos inicializadores tudo o que você precisa fazer é prefixar um método getter com get e um método setter com set. Claro, o método getter não deve esperar um parâmetro, enquanto o método setter espera exatamente um parâmetro (novo valor para definir). Por exemplo:

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Getters e setters podem também ser adicionado em um objeto a qualquer hora depois da criação usando o método Object.defineProperties. O primeiro parâmetro deste método é o objeto no qual você quer definir o getter ou setter. O segundo parâmetro é um objeto cujos nomes das propriedades são os nomes getter ou setter, e cujo valores das propriedades são objetos para definição de funções getter ou setter. Aqui está um exemplo que define o mesmo getter e setter usado no exemplo anterior:
-  

- -
var o = { a:0 }
-
-Object.defineProperties(o, {
-    "b": { get: function () { return this.a + 1; } },
-    "c": { set: function (x) { this.a = x / 2; } }
-});
-
-o.c = 10 // Roda o setter, que associa 10 / 2 (5) para a propriedade 'a'
-console.log(o.b) // Roda o getter, que yields a + 1 ou 6
-
- -

Escolher qual das duas formas depende do seu estilo de programação e tarefa na mão. Se você já vai para o inicializador de objeto ao definir um protótipo, provavelmente a maior parte do tempo escolherá a primeira forma. Esta forma é mais compacta e natural. No entanto, se você precisar adicionar getters e setters mais tarde - porque você não escreveu o protótipo ou objeto particular - então a segunda forma é a única possível. A segunda forma provavelmente melhor representa a natureza dinâmica do JavaScript - mas pode tornar o código difícil de ler e entender.

- -

Removendo propriedades

- -

Você pode remover uma propriedade não herdada usando o operador delete. O código a seguir mostra como remover uma propriedade.

- -
//Criando um novo objeto, myobj, com duas propriedades, a e b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-//Removendo a propriedade a, deixando myobj com apenas a propriedade b.
-delete myobj.a;
-console.log ("a" in myobj) // yields "false"
-
- -

Você também pode usar delete para remover uma variável global se a var keyword não estiver sendo usada para declarar a variável:

- -
g = 17;
-delete g;
-
- -

Comparando Objetos

- -

Em JavaScript, objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Apenas comparando o mesmo objeto de referência com ele mesmo produz verdadeiro.

- -
// Duas variáveis, dois objetos distintos com as mesmas propriedades
-var fruit = {name: "apple"};
-var fruitbear = {name: "apple"};
-
-fruit == fruitbear // return false
-fruit === fruitbear // return false
- -
// Duas variáveis, um único objeto
-var fruit = {name: "apple"};
-var fruitbear = fruit;  // assign fruit object reference to fruitbear
-
-// Here fruit and fruitbear are pointing to same object
-fruit == fruitbear // return true
-fruit === fruitbear // return true
- -

Para mais informações sobre comparaçāo de operadores, veja Operadores de comparaçāo.

- -

Veja também

- - - -
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/pt-br/web/javascript/guide/usando_promises/index.html b/files/pt-br/web/javascript/guide/usando_promises/index.html deleted file mode 100644 index a0dd09c8c2..0000000000 --- a/files/pt-br/web/javascript/guide/usando_promises/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Usando promises -slug: Web/JavaScript/Guide/Usando_promises -tags: - - Guía - - Intermediário - - JavaScript - - Promise - - Promises -translation_of: Web/JavaScript/Guide/Using_promises ---- -
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
- -

Uma {{jsxref("Promise")}} é um objeto que representa a eventual conclusão ou falha de uma operação assincrona. Como a maioria das pessoas consomem promisses já criadas, este guia explicará o consumo de promisses devolvidas antes de explicar como criá-las.

- -

Essencialmente, uma promise é um objeto retornado para o qual você adiciona callbacks, em vez de passar callbacks para uma função.

- -

Por exemplo, em vez de uma função old-style que espera dois callbacks, e chama um deles em uma eventual conclusão ou falha:

- -
function successCallback(result) {
-  console.log("It succeeded with " + result);
-}
-
-function failureCallback(error) {
-  console.log("It failed with " + error);
-}
-
-doSomething(successCallback, failureCallback);
- -

…funções modernas retornam uma promisse e então você pode adicionar seus callbacks:

- -
const promise = doSomething();
-promise.then(successCallback, failureCallback);
- -

…ou simplesmente:

- -
doSomething().then(successCallback, failureCallback);
- -

Nós chamamos isso de chamada de função assincrona. Essa convenção tem várias vantagens. Vamos explorar cada uma delas.

- -

Garantias

- -

Ao contrário dos callbacks com retornos de funções old-style, uma promisse vem com algumas garantias:

- -
    -
  • Callbacks nunca serão chamados antes da conclusão da execução atual do loop de eventos do JavaScript. 
    • -
  • Callbacks adicionadas com .then mesmo depois do sucesso ou falha da operação assincrona, serão chamadas, como acima.
    • -
  • Multiplos callbacks podem ser adicionados chamando-se .then várias vezes, para serem executados independentemente da ordem de inserção.
    • -
- -

Mas o benefício mais imediato da promises é o encadeamento.

- - - -

Encadeamento

- -

Uma necessidade comum é executar duas ou mais operações assincronas consecutivas, onde cada operação subsequente começa quando a operação anterior é bem sucedida, com o resultado do passo anterior. Nós conseguimos isso criando uma cadeia de promises.

- -

Aqui está a magica: a função then retorna uma nova promise, diferente da original:

- -
const promise = doSomething();
-const promise2 = promise.then(successCallback, failureCallback);
-
- -

ou

- -
const promise2 = doSomething().then(successCallback, failureCallback);
-
- -

Essa segunda promise representa a conclusão não apenas de doSomething(), mas também do successCallback ou failureCallback que você passou, que podem ser outras funções assincronas que retornam uma promise. Quando esse for o caso, quaisquer callbacks adicionados a promise2 serão enfileiradas atrás da promise retornada por successCallback ou failureCallback.

- -

Basicamente, cada promise representa a completude de outro passo assíncrono na cadeia.

- -

Antigamente, realizar operações assíncronas comuns em uma linha levaria à clássica pirâmide da desgraça :

- -
doSomething(function(result) {
-  doSomethingElse(result, function(newResult) {
-    doThirdThing(newResult, function(finalResult) {
-      console.log('Got the final result: ' + finalResult);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
-
- -

Ao invés disso, com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

- -
doSomething().then(function(result) {
-  return doSomethingElse(result);
-})
-.then(function(newResult) {
-  return doThirdThing(newResult);
-})
-.then(function(finalResult) {
-  console.log('Got the final result: ' + finalResult);
-})
-.catch(failureCallback);
-
- -

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback). Você pode também pode ver isso escrito com arrow functions:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => {
-  console.log(`Got the final result: ${finalResult}`);
-})
-.catch(failureCallback);
-
- -

Importante: Sempre retorne um resultado, de outra forma as callbacks não vão capturar o resultado da promise anterior.

- -

Encadeando depois de um catch

- -

É possivel encadear depois de uma falha, i.e um catch, isso é muito útil para realizar novas ações mesmo depois de uma falha no encadeamento. Leia o seguinte exemplo: 

- -
new Promise((resolve, reject) => {
-    console.log('Initial');
-
-    resolve();
-})
-.then(() => {
-    throw new Error('Something failed');
-
-    console.log('Do this');
-})
-.catch(() => {
-    console.log('Do that');
-})
-.then(() => {
-    console.log('Do this whatever happened before');
-});
-
- -

Isso vai produzir o seguinte texto:

- -
Initial
-Do that
-Do this whatever happened before
-
- -

Observe que o texto "Do this" não foi impresso por conta que o erro "Something failed" causou uma rejeição.

- -

Propagação de erros

- -

Na pirâmide da desgraça vista anteriormente, você pode se lembrar de ter visto failureCallback três vezes, em comparação a uma única vez no fim da corrente de promessas:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => console.log(`Got the final result: ${finalResult}`))
-.catch(failureCallback);
-
- -

Basicamente, uma corrente de promessas para se houver uma exceção, procurando por catch handlers no lugar. Essa modelagem de código segue bastante a maneira de como o código síncrono funciona:

- -
try {
-  const result = syncDoSomething();
-  const newResult = syncDoSomethingElse(result);
-  const finalResult = syncDoThirdThing(newResult);
-  console.log(`Got the final result: ${finalResult}`);
-} catch(error) {
-  failureCallback(error);
-}
-
- -

Essa simetria com código assíncrono resulta no syntactic sugar async/await presente no ECMAScript 2017:

- -
async function foo() {
-  try {
-    const result = await doSomething();
-    const newResult = await doSomethingElse(result);
-    const finalResult = await doThirdThing(newResult);
-    console.log(`Got the final result: ${finalResult}`);
-  } catch(error) {
-    failureCallback(error);
-  }
-}
-
- -

É construído sobre promesas, por exemplo, doSomething() é a mesma função que antes. Leia mais sobre a sintaxe aqui.

- -

Por pegar todos os erros, até mesmo exceções jogadas(thrown exceptions) e erros de programação, as promises acabam por solucionar uma falha fundamental presente na pirâmide da desgraça dos callbacks. Essa característica é essencial para a composição funcional das operações assíncronas.

- -

Criando uma Promise em torno de uma callback API antiga

- -

Uma {{jsxref("Promise")}} pode ser criada do zero utilizando o seu construtor. Isto deve ser necessário apenas para o envolvimento de APIs antigas.

- -

Em um mundo ideal, todas as funções assincronas já retornariam promises. Infelizmente, algumas APIs ainda esperam que os retornos de suceso e/ou falha sejam passados da maneira antiga. O exemplo por excelência é o {{domxref("WindowTimers.setTimeout", "setTimeout()")}} function:

- -
setTimeout(() => saySomething("10 seconds passed"), 10000);
-
- -

Misturar chamadas de retorno e promeses de old-style é problemático. Se saySomething falhar ou contiver um erro de programação, nada o captura.

- -

Por sorte nós podemos envolve-la em uma promise. É uma boa prática envolver funções problemáticas no menor nivel possível, e nunca chama-las diretamente de novo:

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
-
- -

Basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. Since setTimeout doesn't really fail, we left out reject in this case.

- -

Basicamente, um construtor de promises pega uma função executora que nos deixa resolver ou rejeitar uma promise manualmente. Desde que setTimeout não venha a falhar, nos deixamos a rejeição de fora nesse caso

- -

Composição

- -

{{jsxref("Promise.resolve()")}} e {{jsxref("Promise.reject()")}} são atalhos para se criar manualmente uma promessa que já foi resolvida ou rejeitada, respectivamente. Isso pode ser útil em algumas situações.

- -

{{jsxref("Promise.all()")}} e {{jsxref("Promise.race()")}} são duas ferramentas de composição para se executar operações assíncronas em paralelo.

- -

Uma composição sequencial é possível usando JavaScript de uma forma esperta:

- -
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
-
- -

Basicamente reduzimos um vetor de funções assíncronas a uma cadeia de promessas equivalentes a: Promise.resolve().then(func1).then(func2);

- -

Isso também pode ser feito com uma função de composição reutilizável, que é comum em programação funcional:

- -
const applyAsync = (acc,val) => acc.then(val);
-const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
- - - -

A função composeAsync aceitará qualquer número de funções como argumentos e retornará uma nova função que aceita um valor incial a ser passado pelo pipeline de composição. Isso é benéfico porque alguma, ou todas as funções, podem ser assíncronas ou síncronas, e é garantido de que serão executadas na ordem correta.

- -
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
-transformData(data);
-
- -

No ECMAScript 2017, uma composição sequencial pode ser feita sde forma mais simples com async/await:

- -
for (const f of [func1, func2]) {
-  await f();
-}
-
- -

Cronometragem

- -

Para evitar surpresas, funções passadas para then nunca serão chamadas sincronamente, mesmo com uma função ja resolvida:

- -
Promise.resolve().then(() => console.log(2));
-console.log(1); // 1, 2
-
- -

Instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the JavaScript event loop, i.e. pretty soon:

- -

Ao invés de rodar imediatamente, a função passada é colocada em uma micro tarefa, o que significa que ela roda depois que a fila estiver vazia no final do atual processo de evento de loop do Javascript, isto é muito em breve

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait().then(() => console.log(4));
-Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
-console.log(1); // 1, 2, 3, 4
-
- -

Ver também

- - - -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

diff --git a/files/pt-br/web/javascript/guide/using_promises/index.html b/files/pt-br/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..a0dd09c8c2 --- /dev/null +++ b/files/pt-br/web/javascript/guide/using_promises/index.html @@ -0,0 +1,269 @@ +--- +title: Usando promises +slug: Web/JavaScript/Guide/Usando_promises +tags: + - Guía + - Intermediário + - JavaScript + - Promise + - Promises +translation_of: Web/JavaScript/Guide/Using_promises +--- +
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +

Uma {{jsxref("Promise")}} é um objeto que representa a eventual conclusão ou falha de uma operação assincrona. Como a maioria das pessoas consomem promisses já criadas, este guia explicará o consumo de promisses devolvidas antes de explicar como criá-las.

+ +

Essencialmente, uma promise é um objeto retornado para o qual você adiciona callbacks, em vez de passar callbacks para uma função.

+ +

Por exemplo, em vez de uma função old-style que espera dois callbacks, e chama um deles em uma eventual conclusão ou falha:

+ +
function successCallback(result) {
+  console.log("It succeeded with " + result);
+}
+
+function failureCallback(error) {
+  console.log("It failed with " + error);
+}
+
+doSomething(successCallback, failureCallback);
+ +

…funções modernas retornam uma promisse e então você pode adicionar seus callbacks:

+ +
const promise = doSomething();
+promise.then(successCallback, failureCallback);
+ +

…ou simplesmente:

+ +
doSomething().then(successCallback, failureCallback);
+ +

Nós chamamos isso de chamada de função assincrona. Essa convenção tem várias vantagens. Vamos explorar cada uma delas.

+ +

Garantias

+ +

Ao contrário dos callbacks com retornos de funções old-style, uma promisse vem com algumas garantias:

+ +
    +
  • Callbacks nunca serão chamados antes da conclusão da execução atual do loop de eventos do JavaScript. 
    • +
  • Callbacks adicionadas com .then mesmo depois do sucesso ou falha da operação assincrona, serão chamadas, como acima.
    • +
  • Multiplos callbacks podem ser adicionados chamando-se .then várias vezes, para serem executados independentemente da ordem de inserção.
    • +
+ +

Mas o benefício mais imediato da promises é o encadeamento.

+ + + +

Encadeamento

+ +

Uma necessidade comum é executar duas ou mais operações assincronas consecutivas, onde cada operação subsequente começa quando a operação anterior é bem sucedida, com o resultado do passo anterior. Nós conseguimos isso criando uma cadeia de promises.

+ +

Aqui está a magica: a função then retorna uma nova promise, diferente da original:

+ +
const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+
+ +

ou

+ +
const promise2 = doSomething().then(successCallback, failureCallback);
+
+ +

Essa segunda promise representa a conclusão não apenas de doSomething(), mas também do successCallback ou failureCallback que você passou, que podem ser outras funções assincronas que retornam uma promise. Quando esse for o caso, quaisquer callbacks adicionados a promise2 serão enfileiradas atrás da promise retornada por successCallback ou failureCallback.

+ +

Basicamente, cada promise representa a completude de outro passo assíncrono na cadeia.

+ +

Antigamente, realizar operações assíncronas comuns em uma linha levaria à clássica pirâmide da desgraça :

+ +
doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+
+ +

Ao invés disso, com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

+ +
doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+
+ +

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback). Você pode também pode ver isso escrito com arrow functions:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+
+ +

Importante: Sempre retorne um resultado, de outra forma as callbacks não vão capturar o resultado da promise anterior.

+ +

Encadeando depois de um catch

+ +

É possivel encadear depois de uma falha, i.e um catch, isso é muito útil para realizar novas ações mesmo depois de uma falha no encadeamento. Leia o seguinte exemplo: 

+ +
new Promise((resolve, reject) => {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() => {
+    console.log('Do that');
+})
+.then(() => {
+    console.log('Do this whatever happened before');
+});
+
+ +

Isso vai produzir o seguinte texto:

+ +
Initial
+Do that
+Do this whatever happened before
+
+ +

Observe que o texto "Do this" não foi impresso por conta que o erro "Something failed" causou uma rejeição.

+ +

Propagação de erros

+ +

Na pirâmide da desgraça vista anteriormente, você pode se lembrar de ter visto failureCallback três vezes, em comparação a uma única vez no fim da corrente de promessas:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);
+
+ +

Basicamente, uma corrente de promessas para se houver uma exceção, procurando por catch handlers no lugar. Essa modelagem de código segue bastante a maneira de como o código síncrono funciona:

+ +
try {
+  const result = syncDoSomething();
+  const newResult = syncDoSomethingElse(result);
+  const finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+
+ +

Essa simetria com código assíncrono resulta no syntactic sugar async/await presente no ECMAScript 2017:

+ +
async function foo() {
+  try {
+    const result = await doSomething();
+    const newResult = await doSomethingElse(result);
+    const finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+
+ +

É construído sobre promesas, por exemplo, doSomething() é a mesma função que antes. Leia mais sobre a sintaxe aqui.

+ +

Por pegar todos os erros, até mesmo exceções jogadas(thrown exceptions) e erros de programação, as promises acabam por solucionar uma falha fundamental presente na pirâmide da desgraça dos callbacks. Essa característica é essencial para a composição funcional das operações assíncronas.

+ +

Criando uma Promise em torno de uma callback API antiga

+ +

Uma {{jsxref("Promise")}} pode ser criada do zero utilizando o seu construtor. Isto deve ser necessário apenas para o envolvimento de APIs antigas.

+ +

Em um mundo ideal, todas as funções assincronas já retornariam promises. Infelizmente, algumas APIs ainda esperam que os retornos de suceso e/ou falha sejam passados da maneira antiga. O exemplo por excelência é o {{domxref("WindowTimers.setTimeout", "setTimeout()")}} function:

+ +
setTimeout(() => saySomething("10 seconds passed"), 10000);
+
+ +

Misturar chamadas de retorno e promeses de old-style é problemático. Se saySomething falhar ou contiver um erro de programação, nada o captura.

+ +

Por sorte nós podemos envolve-la em uma promise. É uma boa prática envolver funções problemáticas no menor nivel possível, e nunca chama-las diretamente de novo:

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
+
+ +

Basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. Since setTimeout doesn't really fail, we left out reject in this case.

+ +

Basicamente, um construtor de promises pega uma função executora que nos deixa resolver ou rejeitar uma promise manualmente. Desde que setTimeout não venha a falhar, nos deixamos a rejeição de fora nesse caso

+ +

Composição

+ +

{{jsxref("Promise.resolve()")}} e {{jsxref("Promise.reject()")}} são atalhos para se criar manualmente uma promessa que já foi resolvida ou rejeitada, respectivamente. Isso pode ser útil em algumas situações.

+ +

{{jsxref("Promise.all()")}} e {{jsxref("Promise.race()")}} são duas ferramentas de composição para se executar operações assíncronas em paralelo.

+ +

Uma composição sequencial é possível usando JavaScript de uma forma esperta:

+ +
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
+
+ +

Basicamente reduzimos um vetor de funções assíncronas a uma cadeia de promessas equivalentes a: Promise.resolve().then(func1).then(func2);

+ +

Isso também pode ser feito com uma função de composição reutilizável, que é comum em programação funcional:

+ +
const applyAsync = (acc,val) => acc.then(val);
+const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
+ + + +

A função composeAsync aceitará qualquer número de funções como argumentos e retornará uma nova função que aceita um valor incial a ser passado pelo pipeline de composição. Isso é benéfico porque alguma, ou todas as funções, podem ser assíncronas ou síncronas, e é garantido de que serão executadas na ordem correta.

+ +
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+
+ +

No ECMAScript 2017, uma composição sequencial pode ser feita sde forma mais simples com async/await:

+ +
for (const f of [func1, func2]) {
+  await f();
+}
+
+ +

Cronometragem

+ +

Para evitar surpresas, funções passadas para then nunca serão chamadas sincronamente, mesmo com uma função ja resolvida:

+ +
Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+
+ +

Instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the JavaScript event loop, i.e. pretty soon:

+ +

Ao invés de rodar imediatamente, a função passada é colocada em uma micro tarefa, o que significa que ela roda depois que a fila estiver vazia no final do atual processo de evento de loop do Javascript, isto é muito em breve

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait().then(() => console.log(4));
+Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
+console.log(1); // 1, 2, 3, 4
+
+ +

Ver também

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

diff --git a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html b/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html deleted file mode 100644 index 7920ee6b1a..0000000000 --- a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html +++ /dev/null @@ -1,601 +0,0 @@ ---- -title: Sintaxe e tipos -slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' -tags: - - Guia(2) - - Guía - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

- -

Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.

- -

Sintaxe básica

- -

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

- -

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, a palavra Früh (que significa "cedo" em Alemão) pode ser usada como nome de variável.

- -
var Früh = "foobar";
- -

Mas a variável früh não é a mesma que Früh porque JavaScript é case sensitive.

- -

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declaração")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.

- -

Comentários

- -

A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:

- -
// comentário de uma linha
-
-/* isto é um comentário longo
-   de múltiplas linhas.
- */
-
-/* Você não pode, porém, /* aninhar comentários */ SyntaxError */
- -

Declarações

- -

Existem três tipos de declarações em JavaScript.

- -
-
{{jsxref("Statements/var", "var")}}
-
Declara uma variável, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
-
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
-
Declara uma constante de escopo de bloco, apenas de leitura.
-
- -

Variáveis

- -

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.

- -

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).

- -

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

- -

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

- -

Declarando variáveis

- -

Você pode declarar uma variável de três formas:

- -
    -
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais.
    • -
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • -
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • -
- -

Classificando variáveis

- -

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.

- -

Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:

- -
var a;
-console.log("O valor de a é " + a); // saída "O valor de a é undefined"
-console.log("O valor de b é " + b); // executa uma exception de erro de referência (ReferenceError)
-
- -

Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).

- -
var input;
-if(input === undefined){
-  facaIsto();
-} else {
-  facaAquilo();
-}
-
- -

O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:

- -
var myArray = [];
-if (!myArray[0]) myFunction();
-
- -

O valor undefined converte-se para NaN quando usado no contexto numérico.

- -
var a;
-a + 2;  // Avaliado como NaN
-
- -

Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:

- -
var n = null;
-console.log(n * 32); // a saída para o console será 0.
-
- -

Escopo de variável

- -

Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local,  pois ela está disponível somente dentro dessa função.

- -

JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if. 

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y não está definido
-
- -

Variável de elevação

- -

Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.

- -
/**
- * Exemplo 1
- */
-console.log(x === undefined); // exibe "true"
-var x = 3;
-
-/**
- * Exemplo 2
- */
-// retornará um valor undefined
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-
- -

Os exemplos acima serão interpretados como:

- -
/**
- * Exemplo 1
- */
-var x;
-console.log(x === undefined); // exibe "true"
-x = 3;
-
-/**
- * Exemplo 2
- */
-var myvar = "um valor";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "valor local";
-})();
-
- -

Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.

- -

Variáveis Globais

- -

Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel. 

- -

Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.

- -

Constantes

- -

Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, sublinhado ou cifrão e pode conter caractere alfabético, numérico ou sublinhado.

- -
const PI = 3.14;
-
- -

Uma constante não pode alterar seu valor por meio de uma atribuição ou ser declarada novamente enquanto o script está em execução. Deve ser inicializada com um valor.

- -

As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, presume-se que o identificador represente uma variável.

- -

Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: 

- -
// Isto irá causar um  erro
-function f() {};
-const f = 5;
-
-// Isto também irá causar um erro.
-function f() {
-  const g = 5;
-  var g;
-
-  //declarações
-}
-
- -

Estrutura de dados e tipos

- -

Tipos de dados

- -

O mais recente padrão ECMAScript define sete tipos de dados:

- -
    -
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: -
      -
    • {{Glossary("Boolean")}}. true e false.
      • -
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • -
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • -
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • -
    • {{Glossary("String")}}. "Howdy"
      • -
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • -
    -
    • -
  • e {{Glossary("Object")}}
    • -
- -

Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  {{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funções")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.

- -

Conversão de tipos de dados

- -

JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:

- -
var answer = 42;
-
- -

E depois, você pode atribuir uma string para a mesma variável, por exemplo:

- -
answer = "Obrigado pelos peixes...";
-
- -

Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.

- -

Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:

- -
x = "A resposta é " + 42 // "A resposta é 42"
-y = 42 + " é a resposta" // "42 é a resposta"
-
- -

Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Convertendo strings para números

- -

No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.

- -

Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
- -

Literais

- -

Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:

- -
    -
  • {{anch("Array literal")}}
    • -
  • {{anch("Literais boolean")}}
    • -
  • {{anch("Literais de ponto flutuante")}}
    • -
  • {{anch("Inteiros")}}
    • -
  • {{anch("Objeto literal")}}
    • -
  • {{anch("String literal")}}
    • -
- -

Array literal

- -

Um array literal é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.

- -

O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -
-

Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.

-
- -

Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.

- -

Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e Coleções indexadas para detalhes sobre array de objetos.

- -

Vírgulas extras em array literal

- -

Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:

- -
var fish = ["Lion", , "Angel"];
-
- -

Esse array tem dois elementos com valores e um elemento vazio (fish[0] é "Lion", fish[1] é undefined, e fish[2] é "Angel" ).

- -

Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.

- -
-

Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.

-
- -
var myList = ['home', , 'school', ];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.

- -
var myList = [ , 'home', , 'school'];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.

- -
var myList = ['home', , 'school', , ];
-
- -

Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.

- -

Literais Boolean

- -

O tipo Boolean tem dois valores literal: true e false.

- -

Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.

- -

Inteiros

- -

Inteiros podem ser expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

- -
    -
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • -
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • -
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • -
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • -
- -

Alguns exemplos de inteiros literal são:

- -
0, 117 and -345 (decimal, base 10)
-015, 0001 and -077 (octal, base 8)
-0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
-0b11, 0b0011 and -0b11 (binário, base 2)
-
- -

Para maiores informações, veja Literais numérico na referência Léxica.

- -

Literais de ponto flutuante

- -

Um literal de ponto flutuante pode ter as seguintes partes:

- -
    -
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • -
  • Um ponto decimal ("."),
    • -
  • Uma fração (outro número decimal),
    • -
  • Um expoente.
    • -
- -

O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").

- -

Mais sucintamente, a sintaxe é:

- -
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
-
- -

Por exemplo:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Objeto literal

- -

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.

- -

Segue um exemplo de um objeto literal. O primeiro elemento do objeto carro define uma propriedade, meuCarro, e atribui para ele uma nova string, "Punto"; o segundo elemento, a propriedade getCarro, é imediatamente atribuído o resultado de chamar uma função (tipoCarro("Fiat")); o terceiro elemento, a propriedade especial, usa uma variável existente (vendas).

- -
var vendas = "Toyota";
-
-function tipoCarro(nome) {
-  if (nome == "Fiat") {
-    return nome;
-  } else {
-    return "Desculpa, não vendemos carros " + nome + ".";
-  }
-}
-
-var carro = { meuCarro: "Punto", getCarro: tipoCarro("Fiat"), especial: vendas };
-
-console.log(carro.meuCarro);   // Punto
-console.log(carro.getCarro);  // Fiat
-console.log(carro.especial); // Toyota
-
- -

Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.

- -
var carro = { carros: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(carro.carros.b); // Jeep
-console.log(carro[7]); // Mazda
-
- -

Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array ("[]").

- -
var unusualPropertyNames = {
-  "": "Uma string vazia",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
-console.log(unusualPropertyNames[""]);  // Um string vazia
-console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
-console.log(unusualPropertyNames["!"]); // Bang!
- -

Observe:

- -
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a não está definido
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

 

- -

Expressão Regex Literal

- -

Um regex literal é um padrão entre barras. A seguir um exemplo de regex literal.

- -
var re = /ab+c/;
- -

String Literal

- -

Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.

- -
"foo"
-'bar'
-"1234"
-"um linha \n outra linha"
-"John's cat"
-
- -

Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:

- -
console.log("John's cat".length)
-// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
-// Nesse caso, 10 caracteres.
-
- -

Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.

- -

Uso de caracteres especiais em string

- -

Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.

- -
"uma linha \n outra linha"
-
- -

A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tabela: Caracteres especiais no JavaScript
CaracterDescrição
\0Byte nulo
\bBackspace
\fAlimentador de formulário
\nNova linha
\rRetorno do carro
\tTabulação
\vTabulação vertical
\'Apóstrofo ou aspas simples
\"Aspas dupla
\\Caractere de barra invertida
\XXX -

Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.

-
\xXX -

Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.

-
\uXXXX -

Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode.

-
- -

Caracteres de escape

- -

Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.

- -

Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como escaping das aspas. Por exemplo:

- -
var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
-console.log(quote);
-
- -

O resultado disso seria:

- -
Ele lê "The Cremation of Sam McGee" de R.W. Service.
-
- -

Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:

- -
var home = "c:\\temp";
-
- -

Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.

- -
var str = "esta string \
-está quebrada \
-em várias\
-linhas."
-console.log(str);   // esta string está quebrada em várias linhas.
-
- -

Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:

- -
var poema =
-"Rosas são vermelhas\n\
-Violetas são azuis,\n\
-Esse seu sorriso\n\
-é o que me seduz. (Lucas Pedrosa)"
-
- -

Mais informação

- -

Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:

- - - -

No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/pt-br/web/javascript/guide/working_with_objects/index.html b/files/pt-br/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..1dccaeef2e --- /dev/null +++ b/files/pt-br/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,494 @@ +--- +title: Trabalhando com objetos +slug: Web/JavaScript/Guide/Trabalhando_com_Objetos +tags: + - Comparando Objetos + - Contrutor + - Documento + - ECMAScript6 + - Guia(2) + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome (ou chave) e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

+ +

Este capítulo descreve como usar objetos, propriedades, funções, e métodos, e como criar seus próprios objetos.

+ +

Visão geral de objetos

+ +

Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.

+ +

Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto, com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.

+ +

Objetos e propriedades

+ +

Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:

+ +
+
nomeDoObjeto.nomeDaPropriedade
+
+
+ +

Como as variáveis em JavaScript, o nome do objeto (que poderia ser uma variável normal) e um nome de propriedade diferem em maiúsculas/minúsculas (por exemplo, cor e Cor são propriedades diferentes). Você pode definir uma propriedade atribuindo um valor a ela. Por exemplo, vamos criar um objeto chamado meuCarro e dar a ele propriedades chamadas fabricacao, modelo, e ano, conforme mostrado a seguir:

+ +
var meuCarro = new Object();
+meuCarro.fabricacao = "Ford";
+meuCarro.modelo = "Mustang";
+meuCarro.ano = 1969;
+
+ +

Propriedades não definidas de um objeto são {{jsxref("undefined")}} (e não {{jsxref("null")}}).

+ +
meuCarro.semPropriedade; //undefined
+ +

Propriedades de objetos em JavaScript podem também ser acessadas ou alteradas usando-se notação de colchetes. Objetos são às vezes chamados de arrays associativos, uma vez que cada propriedade é associada com um valor de string que pode ser usado para acessá-la. Então, por exemplo, você poderia acessar as propriedades do objeto meuCarro como se segue:

+ +
meuCarro["fabricacao"] = "Ford";
+meuCarro["modelo"] = "Mustang";
+meuCarro["ano"] = 1969;
+
+ +

Um nome de propriedade de um objeto pode ser qualquer string JavaScript válida, ou qualquer coisa que possa ser convertida em uma string, incluindo uma string vazia. No entanto, qualquer nome e propriedade que não é um identificador JavaScript válido (por exemplo, um nome de propriedade que tem um espaço ou um hífen, ou que começa com um número) só pode ser acessado(a) usando-se a notação de colchetes. Essa notação é também muito útil quando nomes de propriedades devem ser determinados dinamicamente (quando o nome da propriedade não é determinado até o momento de execução). Exemplos são mostrados a seguir:

+ +
var meuObj = new Object(),
+    str = "minhaString",
+    aleat = Math.random(),
+    obj = new Object();
+
+meuObj.tipo               = "Sintaxe de ponto";
+meuObj["data de criacao"] = "String com espaco";
+meuObj[str]               = "valor de String";
+meuObj[aleat]             = "Numero Aleatorio";
+meuObj[obj]               = "Objeto";
+meuObj[""]                = "Mesmo uma string vazia";
+
+console.log(meuObj);
+
+ +

Você pode também acessar propriedades usando um valor de string que está armazenado em uma variável:

+ +
+
var nomeDaPropriedade = "fabricacao";
+meuCarro[nomeDaPropriedade] = "Ford";
+
+nomeDaPropriedade = "modelo";
+meuCarro[nomeDaPropriedade] = "Mustang";
+
+
+ +

Você pode usar a notação de colchetes com o comando for...in para iterar por todas as propriedades enumeráveis de um objeto. Para ilustrar como isso funciona, a seguinte função mostra as propriedades de um objeto quando você passa o objeto e o nome do objeto como argumentos para a função:

+ +
function mostrarProps(obj, nomeDoObj) {
+  var resultado = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        resultado += nomeDoObj + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return resultado;
+}
+
+ +

Então, a chamada de função mostrarProps(meuCarro, "meuCarro") retornaria o seguinte:

+ +
meuCarro.fabricacao = Ford
+meuCarro.modelo = Mustang
+meuCarro.ano = 1969
+ +

Objetos: tudo

+ +

Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de null e undefined - são tratados como objetos. Eles podem receber propriedades (propriedades atribuídas de alguns tipos não são persistentes), e possuem todas as características de objetos.

+ +

Enumerando todas as propriedades de um objeto

+ +

Começando com a ECMAScript 5, há três formas nativas de se listar (ou "caminhar por") as propriedades de um objeto:

+ +
    +
  • for...in loops
    + Esse método caminha por todas as propriedades enumeráveis de um objeto e sua cadeia de protótipos
    • +
  • Object.keys(o)
    + Esse método retorna um array com todos os nomes ("chaves") de propriedades próprios de um objeto o (mas não na cadeia de protótipos).
    • +
  • Object.getOwnPropertyNames(o)
    + Esse método retorna um array contendo todos os nomes de propriedades próprios (enumeráveis ou não) de um objeto o.
    • +
+ +

Antes, na ECMAScript 5, não existia uma forma nativa de se listar todas as propriedades de um objeto. No entanto, isso pode ser feito com a seguinte função:

+ +
function listarTodasAsPropriedades(o){
+	var objectoASerInspecionado;
+	var resultado = [];
+
+	for(objectoASerInspecionado = o; objectoASerInspecionado !== null; objectoASerInspecionado = Object.getPrototypeOf(objectoASerInspecionado)){
+		resultado = resultado.concat(Object.getOwnPropertyNames(objectoASerInspecionado));
+	}
+
+	return resultado;
+}
+
+ +

Isso pode ser útil para revelar propriedades "escondidadas" (propriedades na cadeia de protótipos que não são acessíveis através do objeto, porque outra propriedade possui o mesmo nome anteriormente na cadeia de protótipos). A listagem de propriedades acessíveis só pode ser facilmente feita através da remoção de valores duplicados no array.

+ +

Criando novos objetos

+ +

JavaScript possui um número de objetos pré-definidos. Além disso, você pode criar seus próprios objetos. Você pode criar um objeto usando um objeto inicializador. Alternativamente, você pode primeiro criar uma função construtora e depois instanciar um objeto usando aquela função e o operador new.

+ +

Usando inicializadores de objeto

+ +

Além de criar objetos usando uma função construtora, você pode criar objetos usando um inicializador de objeto. O uso de inicializadores de objeto é às vezes conhecido como criar objetos com notação literal. O termo "inicializador de objeto" é consistente com a terminologia usada por C++.

+ +

A sintaxe para um objeto usando-se um inicializador de objeto é:

+ +
var obj = { propriedade_1:   valor_1,   // propriedade_# pode ser um identificador...
+            2:            valor_2,   // ou um numero...
+            // ...,
+            "propriedade n": valor_n }; // ou uma string
+
+ +

onde obj é o nome do novo objeto, cada propriedade_i é um identificador (um nome, um número, ou uma string literal), e cada valor_i é uma expressão cujo valor é atribuído à propriedade_i. O obj e a atribuição são opcionais; se você não precisa fazer referência a esse objeto em nenhum outro local, você não precisa atribuí-lo a uma variável. (Note que você pode precisar colocar o objeto literal entre parentêses se o objeto aparece onde um comando é esperado, de modo a não confundir o literal com uma declaração de bloco.)

+ +

Se um objeto é criado com um inicializador de objeto em um script de alto nível, JavaScript interpreta o objeto a cada vez que avalia uma expressão contendo o objeto literal. Além disso, um inicializador usado em uma função é criado toda vez que a função é chamada.

+ +

O seguinte comando cria um objeto e o atribui à variável x somente se a expressão cond é verdadeira.

+ +
if (cond) var x = {hi: "there"};
+
+ +

O seguinte exemplo cria minhaHonda com três propriedades. Note que a propriedade motor é também um objeto com suas próprias propriedades.

+ +
var minhaHonda = {cor: "vermelho", rodas: 4, motor: {cilindros: 4, tamanho: 2.2}};
+
+ +

Você pode também usar inicializadores de objeto para criar arrays. Veja arrays literais.

+ +

Usando uma função construtora

+ +

Alternativamente, você pode criar um objeto com estes dois passos:

+ +
    +
  1. Defina o tipo de objeto escrevendo uma função construtora. Há uma forte convenção, e com boa razão, de se usar uma letra inicial maiúscula.
    2. +
  2. Crie uma instância do objeto com new.
    3. +
+ +

Para definir um tipo de objeto, crie uma função para o tipo de objeto que especifique seu nome, suas propriedades e seus métodos. Por exemplo, suponha que você queira criar um tipo objeto para carros. Você quer que esse tipo de objeto seja chamado carro, e você quer ele tenha propriedades de marca, modelo, e ano. Para fazer isto, você escreveria a seguinte função:

+ +
function Carro(marca, modelo, ano) {
+  this.marca = marca;
+  this.modelo = modelo;
+  this.ano = ano;
+}
+
+ +

Note o uso de this para atribuir valores às propriedades do objeto com base nos valores passados para a função.

+ +

Agora você pode criar um objeto chamado meucarro como se segue:

+ +
var meucarro = new Carro("Eagle", "Talon TSi", 1993);
+
+ +

Esse comando cria meucarro e atribui a ele valores especificados para suas propriedade. Então o valor de meucarro.marca é a string "Eagle", meucarro.ano é o inteiro 1993, e assim por diante.

+ +

Você pode criar qualquer número de objetos carro com o uso de new. Exemplo,

+ +
var carroDeKen = new Carro("Nissan", "300ZX", 1992);
+var carroDeVPG = new Carro("Mazda", "Miata", 1990);
+
+ +

Um objeto pode ter uma propriedade que por si só também é um objeto. Por exemplo, suponha que você define um objeto chamado pessoa como se segue:

+ +
function Pessoa(nome, idade, sexo) {
+  this.nome = nome;
+  this.idade = idade;
+  this.sexo = sexo;
+}
+
+ +

e então você instancia dois novos objetos pessoa da seguinte forma:

+ +
var jose = new Pessoa("Jose Silva", 33, "M");
+var paulo = new Pessoa("Paulo Santos", 39, "M");
+
+ +

Então, você pode reescrever a definição de carro de modo a incluir uma propriedade dono que recebe um objeto pessoa, como se segue:

+ +
function Carro(marca, modelo, ano, dono) {
+  this.marca = marca;
+  this.modelo = modelo;
+  this.ano = ano;
+  this.dono = dono;
+}
+
+ +

Para instanciar os novos objetos, você então usa o seguinte:

+ +
var carro1 = new Carro("Eagle", "Talon TSi", 1993, jose);
+var carro2 = new Carro("Nissan", "300ZX", 1992, paulo);
+
+ +

Perceba que ao invés de passar uma string literal ou um valor inteiro na hora de criar os novos objetos, os comandos acima passam os objetos jose e paulo como os argumentos para os donos. Então se você quiser descobrir o nome do dono de carro2, você pode acessar a seguinte propriedade:

+ +
carro2.dono
+
+ +

Note que você pode sempre adicionar uma propriedade a um objeto definido anteriormente. Por exemplo, o comando

+ +
carro1.cor = "preto";
+
+ +

adiciona uma propriedade cor ao carro1, e dá a ele o valor "preto." No entanto, isso não afeta nenhum outro objeto. Para adicionar a nova propriedade a todos os objetos do mesmo tipo, você deve adicionar a propriedade na definição do tipo de objeto carro.

+ +

Usando o método Object.create

+ +

Objetos podem também ser criados usando-se o método Object.create(). Esse método pode ser muito útil, pois permite que você escolha o objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora.

+ +
// Encapsulamento das propriedades e métodos de Animal
+var Animal = {
+  tipo: "Invertebrados", // Propriedades de valores padrão
+  qualTipo : function() {  // Método que ira mostrar o tipo de Animal
+    console.log(this.tipo);
+  }
+}
+
+// Cria um novo tipo de animal chamado animal1
+var animal1 = Object.create(Animal);
+animal1.qualTipo(); // Saída:Invertebrados
+
+// Cria um novo tipo de animal chamado Peixes
+var peixe = Object.create(Animal);
+peixe.tipo = "Peixes";
+peixe.qualTipo(); // Saída: Peixes
+ +

Herança

+ +

Todos os objetos em JavaScript herdam de pelo menos um outro objeto. O objeto "pai" é conhecido como o protótipo, e as propriedades herdadas podem ser encontradas no objeto prototype do construtor.

+ +

Indexando Propriedades de Objetos

+ +

Você pode se referir a uma propriedade de um objeto pelo seu nome de propriedade ou pelo seu índice ordinal. Se você inicialmente definiu uma propriedade pelo nome, você deve sempre se referir a ela pelo nome, e se você inicialmente definir uma propriedade por um índice, você deve sempre se referir a ela pelo índice.

+ +

Esta restrição se aplica quando  você cria um objeto e suas propriedades com uma função construtora (como fizemos anteriormente com o objeto do tipo carro) e quando você define propriedades individuais explicitamente (por exemplo, meuCarro.cor = "vermelho"). Se você inicialmente definir uma propriedade do objeto com um índice, tal como meuCarro[5] = "25 mpg", você pode subsequentemente referir-se á propriedade somente como meuCarro[5].

+ +

A exceção a esta regra é a objetos refletidos a partir do HTML, como o conjunto de formulários. Você pode sempre se referir a objetos nessas matrizes por seu número de ordem (com base em onde eles aparecem no documento) ou seu nome (se definido). Por exemplo, se a segunda tag <FORM> em um  documento tem um atributo NAME de "meuFormulario", você pode se referir ao formulário como document.forms[1] ou document.forms["meuFormulario"] ou document.meuFormulario.

+ +

Definindo propriedades para um tipo de objeto

+ +

Você pode adicionar uma propriedade a um tipo de objeto definido anteriormente, utilizando a propriedade prototype. Esta define uma propriedade que é partilhada por todos os objetos do tipo especificado, em vez de apenas uma instância do objeto. O código a seguir adiciona uma propriedade cor para todos os objetos do tipo Carro, em seguida adiciona um valor a propriedade cor do objeto carro1.

+ +
Carro.prototype.cor = null;
+carro1.cor = "preto";
+
+ +

Consulte a propriedade prototype do objeto Function na Referência JavaScript  para mais informações.

+ +

Definindo métodos

+ +

Um método é uma função associada a um objeto, ou, simplesmente, um método é uma propriedade de um objeto que é uma função. Métodos são definidos da forma que as funções normais são definidas, exceto que eles tenham que ser atribuídos como propriedade de um objeto. São exemplos:

+ +
nomeDoObjeto.nomedometodo = nome_da_funcao;
+
+var meuObjeto = {
+  meuMetodo: function(parametros) {
+    // ...faça algo
+  }
+};
+
+ +

Onde nomeDoObjeto é um objeto existente, nomedometodo é o nome que você atribuiu ao método, e nome_da_funcao é o nome da função.

+ +

Em seguida, você pode chamar o método no contexto do objeto da seguinte forma:

+ +
objeto.nomedometodo(parametros);
+
+ +

Você pode definir métodos para um tipo de objeto incluindo uma definição de metodo na função construtora do objeto. Por exemplo, você poderia definir uma função que iria formatar e mostrar as propriedades do objeto carro previamente definido; por exemplo,

+ +
function mostreCarro() {
+  var resultado = "Um belo " + this.ano + " " + this.fabricacao
+    + " " + this.modelo;
+  pretty_print(resultado);
+}
+
+ +

onde pretty_print é uma função que mostra uma linha horizontal e uma string. Observe o uso de this para referenciar o objeto ao qual o método pertence.

+ +

Você pode fazer desta função um método de carro, adicionando seu estado à definição do objeto.

+ +
this.mostreCarro = mostreCarro;
+
+ +

Assim, a definição completa de carro seria agora, parecida com essa:

+ +
function Carro(fabricacao, modelo, ano, proprietario) {
+  this.fabricacao = fabricacao;
+  this.modelo = modelo;
+  this.ano = ano;
+  this.proprietario = proprietario;
+  this.mostreCarro = mostreCarro;
+}
+
+ +

Então você pode chamar o método mostreCarro para cada objeto seguinte:

+ +
carro1.mostreCarro();
+carro2.mostreCarro();
+
+ +

Usando this para referências de objetos

+ +

JavaScript tem uma palavra-chave especial, this, que você pode usar dentro de um método para referenciar o objeto corrente. Por exemplo, suponha que você tenha uma função chamada validate que valida o valor da propriedade de um objeto, dado o objeto e os valores altos e baixos:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival))
+    alert("Valor inválido!");
+}
+
+ +

Então, você poderia chamar validate no manipulador de evento onchange em cada elemento do formulário, usando this para passar o elemento, como no exemplo a seguir:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

No geral, this referencia o objeto chamando um método.

+ +

Quando combinado com a propriedade form , this pode referenciar a forma original do objeto atual. No exemplo seguinte, o formulário myForm contém um objeto Text e um botão. Quando o usuário clica no botão, o valor do objeto Text é definido como nome do formulário. O manipulador de eventos onclick do botão usa this.form para referenciar a forma original, myForm.

+ +
<form name="myForm">
+<p><label>Nome do form:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Mostre o Nome do Form"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Definindo getters e setters

+ +

Um getter é um método que obtém o valor de uma propriedade específica. Um setter é um método que define o valor de uma propriedade específica. Você pode definir getters e setters em qualquer objeto de núcleo pré-definido ou objeto definido pelo usuário que suporta a adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.

+ +

O código a seguir ilustra como getters e setters podem funcionar para um objeto o definido pelo usuário.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+ +

As propriedades do objeto o são:

+ +
    +
  • o.a — um número
    • +
  • o.b — um getter que retorna o.a + 1
    • +
  • o.c — um setter que define o valor de o.a pela metade do valor definindo para o.c
    • +
+ +

Observe que nomes de função de getters e setters definidos em um objeto literal usando "[gs]et property()" (ao contrário de __define[GS]etter__ ) não são os próprios nomes dos getters, embora a sintaxe [gs]et propertyName(){ } possa  induzir ao erro e você pensar de outra forma. Para nomear uma função getter ou setter usando a sintaxe "[gs]et property()", define explicitamente um função nomeada programaticamente usando Object.defineProperty (ou o legado fallback Object.prototype.__defineGetter__).

+ +

O código a seguir ilustra como getters e setters podem extender o protótipo Date para adicionar a propriedade ano para todas as instâncias de classes Date pré-definidas. Ele usa os métodos getFullYear e setFullYear existentes da classe Date para suportar o getter e setter da propriedade ano.

+ +

Estes estados definem um getter e setter para a propriedade ano:

+ +
var d = Date.prototype;
+Object.defineProperty(d, "year", {
+  get: function() { return this.getFullYear() },
+  set: function(y) { this.setFullYear(y) }
+});
+ +

Estes estados usam o getter e setter em um objeto Date:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+ +

A principio, getters e setters podem ser ou

+ +
    +
  • definidos usando objetos inicializadores, ou
    • +
  • adicionar posteriormente para qualquer objeto a qualquer tempo usando um método getter ou setter adicionado
    • +
+ +

Ao definir getters e setters usando objetos inicializadores tudo o que você precisa fazer é prefixar um método getter com get e um método setter com set. Claro, o método getter não deve esperar um parâmetro, enquanto o método setter espera exatamente um parâmetro (novo valor para definir). Por exemplo:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getters e setters podem também ser adicionado em um objeto a qualquer hora depois da criação usando o método Object.defineProperties. O primeiro parâmetro deste método é o objeto no qual você quer definir o getter ou setter. O segundo parâmetro é um objeto cujos nomes das propriedades são os nomes getter ou setter, e cujo valores das propriedades são objetos para definição de funções getter ou setter. Aqui está um exemplo que define o mesmo getter e setter usado no exemplo anterior:
+  

+ +
var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Roda o setter, que associa 10 / 2 (5) para a propriedade 'a'
+console.log(o.b) // Roda o getter, que yields a + 1 ou 6
+
+ +

Escolher qual das duas formas depende do seu estilo de programação e tarefa na mão. Se você já vai para o inicializador de objeto ao definir um protótipo, provavelmente a maior parte do tempo escolherá a primeira forma. Esta forma é mais compacta e natural. No entanto, se você precisar adicionar getters e setters mais tarde - porque você não escreveu o protótipo ou objeto particular - então a segunda forma é a única possível. A segunda forma provavelmente melhor representa a natureza dinâmica do JavaScript - mas pode tornar o código difícil de ler e entender.

+ +

Removendo propriedades

+ +

Você pode remover uma propriedade não herdada usando o operador delete. O código a seguir mostra como remover uma propriedade.

+ +
//Criando um novo objeto, myobj, com duas propriedades, a e b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+//Removendo a propriedade a, deixando myobj com apenas a propriedade b.
+delete myobj.a;
+console.log ("a" in myobj) // yields "false"
+
+ +

Você também pode usar delete para remover uma variável global se a var keyword não estiver sendo usada para declarar a variável:

+ +
g = 17;
+delete g;
+
+ +

Comparando Objetos

+ +

Em JavaScript, objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Apenas comparando o mesmo objeto de referência com ele mesmo produz verdadeiro.

+ +
// Duas variáveis, dois objetos distintos com as mesmas propriedades
+var fruit = {name: "apple"};
+var fruitbear = {name: "apple"};
+
+fruit == fruitbear // return false
+fruit === fruitbear // return false
+ +
// Duas variáveis, um único objeto
+var fruit = {name: "apple"};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// Here fruit and fruitbear are pointing to same object
+fruit == fruitbear // return true
+fruit === fruitbear // return true
+ +

Para mais informações sobre comparaçāo de operadores, veja Operadores de comparaçāo.

+ +

Veja também

+ + + +
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..d6aad53066 --- /dev/null +++ b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,193 @@ +--- +title: Herança e cadeia de protótipos (prototype chain) +slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +tags: + - herança intermediário JavaScript OOP +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript é um pouco confuso para desenvolvedores com experiência em linguagens baseadas em classes (como Java ou C++), porque é dinâmico e não dispõe de uma implementação de uma class (a palavra-chave class foi introduzida no ES2015, mas é syntax sugar, o JavaScript permanece baseado em prototype).

+ +

Quando se trata de herança, o JavaScript tem somente um construtor: objetos. Cada objeto tem um link interno para um outro objeto chamado prototype. Esse objeto prototype também tem um atributo prototype, e assim por diante até o que o valor null seja encontrado como sendo o seu prototype. null que, por definição, não tem prototype, e age como um link final nesta cadeia de protótipos (prototype chain).

+ +

Isto muitas vezes é considerado como um dos pontos fracos do JavaScript, mas o modelo de herança prototipal é de fato mais potente do que o modelo clássico. É, por exemplo, relativamente trivial construir um "modelo clássico" (como na implementaçao de class), enquanto o contrário é uma tarefa muito mais difícil.

+ +

1 N. da T: Como em uma implementação de fila em C, por exemplo.

+ +

Herança com o encadeamento de protótipos

+ +

Propriedades de heranças

+ +

Objetos em JavaScript são "sacos" dinâmicos de propriedades (a que se refere as próprias propriedades) e cada um tem um link para um objeto prototype. Eis o que acontece quando se tenta acessar uma propriedade:

+ +
// Vamos criar um objeto o da função f com suas próprias propriedades a e b:
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// adicionar propriedades no protótipo da função f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// não defina o protótipo f.prototype = {b: 3, c: 4}; isso vai quebrar a cadeia de protótipos
+// o. [[Prototype]] possui propriedades bec.
+// o. [[Prototype]]. [[Prototype]] é Object.prototype.
+// Finalmente, o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo.
+// Este é o fim da cadeia de protótipos, como nulo,
+// por definição, não possui [[Prototype]].
+// Assim, a cadeia completa de protótipos se parece com:
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null dfdf
+
+console.log(o.a); // 1
+// Existe uma propriedade 'a' no objeto o? Sim, e seu valor é 1.
+
+console.log(o.b); // 2
+// Existe uma propriedade própria 'b' em o? Sim, e seu valor é 2.
+// O protótipo também tem uma propriedade 'b', mas não é visitado.
+// Isso é chamado de sombreamento de propriedade(Property Shadowing)
+
+console.log(o.c); // 4
+// Existe uma propriedade própria 'c' em o? Não, verifique seu protótipo.
+// Existe uma propriedade 'c' própria em o. [[Prototype]]? Sim, seu valor é 4.
+
+console.log(o.d); // undefined
+// Existe uma propriedade 'd' própria em o? Não, verifique seu prototype.
+// Existe uma propriedade 'd' em o. [[Prototype]]? Não, verifique seu prototype.
+// o. [[Prototype]]. [[Prototype]] é Object.prototype e não há propriedade 'd' por padrão, verifique seu prototype.
+// o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo, pare de pesquisar,
+// nenhuma propriedade encontrada, retorne indefinido.
+
+ +

Code Link

+ +

Atribuir uma propriedade a um objeto cria uma propriedade nele. A única exceção às regras de obtenção e definição de comportamento é quando há uma propriedade herdada com um getter or a setter.

+ +

Herença de "métodos"

+ +

JavaScript não tem "métodos" como os que conhecemos em linguagens baseadas em classes. Em JavaScript, qualquer função pode ser adicionada em um objeto em forma de propriedade. Uma herança de funções age como a herança de quaisquers outras propriedades que não sejam funções, e podemos inclusive realizar sobre-escrita de função(method overriding)!

+ +

Quando uma herança de função é executada, o valor de this aponta para o objeto que herdou as propriedades, não para o objeto prototype onde as propriedades foram escritas originalmente.

+ +
var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Ao chamar 'o.m' neste caso, "this" refere-se a 'o'
+
+var p = Object.create(o);
+// 'p' é um objeto que foi herdado de 'o'
+
+p.a = 12; // cria uma propriedade 'a' no objeto 'p'
+console.log(p.m()); // 13
+// Ao chamar 'p.m', 'this' refere-se a 'p'
+// Então, quando 'p' herda a função de 'm' de 'o', 'this.a' representa 'p.a' que é a própria propriedade 'a' de 'p'
+
+
+ +

Maneiras de criar objetos e resultados dos protótipos encadeados

+ +

Objetos criados com sintaxe de construtores

+ +
var o = {a: 1};
+
+// O recém-criado objecto 'o' tem Object.prototype como o seu [[Prototype]]
+// 'o' não tem não tem uma propriedade chamada 'hasOwnProperty'
+// hasOwnProperty é uma propriedade própria de Object.prototype. Então 'o' herda hasOwnProperty de Object.prototype
+
+// Object.prototype tem null como seu protótipo.
+// o ---> Object.prototype ---> null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays herdam de Array.prototype (que tem métodos como indexOf, forEach, etc.)
+// A cadeia de protótipos se parece com isso:
+// a ---> Array.prototype ---> Object.prototype ---> null
+
+function f(){
+  return 2;
+}
+
+// Funções herdam de Function.prototype (que tem métodos como call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

Com um construtor

+ +

Um "construtor" em JavaScript é "somente" uma função que passa a ser chamada com o operador new.

+ +
function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+};
+
+var g = new Graph();
+// 'g' é um objeto com as propriedades 'vertexes' e 'edges'.
+// g.[[Prototype]] é o valor de Graph.prototype quando new Graph() é executada.
+
+ +

Com Object.create

+ +

ECMAScript 5 introduziu o novo método: Object.create. Invocando este método podemos criar novos objetos. O prototype destes novos objetos é o primeiro argumento do método:

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty); // undefined, porque não herda de Object.prototype
+
+ +
+

Performace

+ +

O tempo de pesquisa para as propriedades que estão no alto da cadeia de protótipos pode ter um impacto negativo no desempenho, e isso pode ser significativo no código em que o desempenho é crítico. Além disso, tentando acessar propriedades inexistentes vai sempre atravessar a cadeia cheia do protótipo (full prototype chain).

+ +

Porém, quando estamos interagindo com as propriedades de um objeto, toda propriedade que está na cadeia do prototype (prototype chain) vai ser enumerada.

+ +

Para verificar se um objeto tem uma propriedade definida em si mesmo e não em algum lugar na sua cadeia de protótipo, é necessário usar o método hasOwnProperty que todos os objetos herdam do Object.prototype.

+ +

hasOwnProperty é a única alternativa em JavaScript que lida com propriedades sem atravessar a cadeia de protótipos.

+ + +
Observação: Não é suficiente apenas verificar se o valor da propriedade é undefined para saber se ela existe. A propriedade pode muito bem existir e não ter sido inicializada, sendo assim o seu valor undefined.
+ +
+

Má Pratica: Estender protótipos nativos

+ +

Um erro frequentemente cometido por programadores é estender um Object.prototype.

+ +

Esta técnica é chamada de "monkey patching" e quebra o encapsulamento. Não existe uma boa razão para desorganizar tipos nativos do JavaScript para adicionar uma nova funcionalidade ao mesmo. 

+ +

O único bom motivo para estender um protótipo nativo do JavaScript é para dar suporte a novas "features" do JavaScript; por exemplo: Array.forEach, etc.

+
+ +
+

Conclusão

+ +

É essencial entender bem  "prototypal inheritance" antes de escrever códigos complexos. Tome cuidado com o tamanho da sua cadeia de protótipos, quebre a cadeia caso necessário para evitar problemas de performace. Nunca estenda protótipos nativos a menos que seja para conseguir compatibilidade com novas "features" do JavaScript.

+ + +
+
+ +

{{ languages( {"zh-cn": "zh-cn/JavaScript/Guide/Inheritance_and_the_prototype_chain" } ) }}

diff --git a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index aaab9150b3..0000000000 --- a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Introdução ao JavaScript Orientado a Objeto -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - Construtor - - Encapsular - - Herança - - Intermediário - - Membros - - Objeto - - Orientado a Objeto - - POO -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -

JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.

- -

Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.

- -

Revisão do Javascript

- -

Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em Uma reintrodução ao JavaScript. Você também pode consultar o Core JavaScript 1.5 Guide.

- -

Programação Orientada a Objetos

- -

Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).

- -

A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.

- -

A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.

- -

Terminologia

- -
-
Namespaces
-
Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.
-
- -
-
Classe
-
Define as características do objeto. Uma classe é uma definição modelo das propriedades e métodos de um objeto.
-
Objeto
-
Um exemplar de uma classe.
-
Atributo
-
Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.
-
Método
-
Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.
-
Construtor
-
Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.
-
Herança
-
Uma classe pode herdar características de outra classe.
-
Encapsulamento
-
Uma maneira de agrupar os dados e os métodos que usam os dados.
-
Abstração
-
A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.
-
Polimorfismo
-
Diferentes classes podem definir o mesmo método ou propriedade.
-
- -

Para uma descrição mais extensiva sobre programação orientada a objetos, veja Orientação a objetos na Wikipédia.

- -

Programação Baseada em Protótipos

- -

Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como protótipos. Este modelo também é conhecido como sem classes, orientado a protótipo, ou programação baseada em exemplares.

- -

O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o framework Viewer para manipular componentes do Morphic) e várias outras.

- -

Programação Orientada a Objetos em Javascript

- -

Namespaces

- -

Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.

- -
-

Nota: É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).

-
- -

A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.

- -

Vamos criar um objeto global chamado MEUAPP:

- -
// namespaces global
-var MEUAPP = MEUAPP || {};
- -

No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos

- -

Podemos também criar sub-espaços de nomes.

- -
// sub namespaces
-MEUAPP.eventos = {};
- -

A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:

- -
// Criando um recipiente chamado MEUAPP.metodosEmComum
-// para métodos e propriedades em comum
-
-MEUAPP.metodosEmComum = {
-
-  regexParaNome: "", // definindo uma expressao regular
-                     // para validação de nomes
-
-  regexParaTelefone: "",  // define uma expressao regular para
-                          //validacao de numeros de telefone
-}
-
-// Objeto junto a declaracoes de método
-
-MEUAPP.eventos = {
-
-    adicionarTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    removerTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    obterEvento: function(e) {
-
-    // codigos
-
-    }
-
-    // é possível adicionar outros métodos e propriedades
-
-}
-
-// Sintaxe para usar o método adicionarTratador:
-
-MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);
- -

Objetos inclusos por padrão

- -

JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().

- -
console.log(Math.random());
-
- -
Nota: Este e todos os exemplos a seguir presumem que uma função console.log() está definida globalmente. A função console.log() não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.
- -

Veja Core JavaScript 1.5 Reference:Global Objects para a lista dos objetos inclusos por padrão em JavaScript.

- -

Cada objeto em JavaScript é um exemplar do objeto Object e, portanto, herda todas as suas propriedades e métodos.

- -

Objetos Personalizados

- -

A Classe

- -

JavaScript é uma linguagem baseada em protótipos e não contém a declaração class, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.

- -
var Pessoa = function () {};
- -

O objeto (exemplar de uma classe)

- -

Para criar um novo exemplar de um objeto obj, usamos a declaração new obj, atribuindo o resultado (que é do tipo obj) a uma variável que será acessada depois.

- -

No exemplo acima, definimos uma classe chamada Pessoa. No exemplo abaixo, criamos dois exemplares (pessoa1 e pessoa2).

- -
var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-
- -
Nota: Por favor, veja também Object.create para um novo e alternativo método que cria um exemplar não-inicializado.
- -

O Construtor

- -

O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.

- -

O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.

- -

No exemplo abaixo, o construtor da classe Pessoa envia uma mensagem ao log quando um exemplar de Pessoa é criado.

- -
var Pessoa = function () {
-  console.log("exemplar criado");
-}
-
-var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-
- -

Propriedades (atributos de objetos)

- -

Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.

- -

A palavra-chave this, que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe NomeDoExemplar.Propriedade, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)

- -
var Pessoa = function(nome) {
-  this.nome = nome;
-  console.log('Exemplar de Pessoa criado');
-};
-
-var pessoa1 = new Pessoa('Alice');
-var pessoa2 = new Pessoa('Bob');
-
-// mostrando as propriedades nome dos objetos
-console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
-console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log
- -

Métodos

- -

Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca () no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do prototype da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.

- -

No exemplo abaixo, definimos e usarmos o método dizerOla() na classe Pessoa .

- -
var Pessoa = function (genero) {
-  this.genero = genero;
-  alert('Pessoa instanciada');
-}
-
-Pessoa.prototype.dizerOla = function()
-{
-  alert ('hello');
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var pessoa2 = new Pessoa('Feminino');
-
-// Chamando o método dizerOla em Pessoa .
-pessoa1.dizerOla(); // hello
-
- -

Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: 

- -
function Pessoa(genero) {
-  this.genero = genero;
-}
-
-Pessoa.prototype.dizGenero = function()
-{
-  alert(this.genero);
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var informaGenero = pessoa1.dizGenero;
-
-pessoa1.dizGenero(); // 'Masculino'
-informaGenero(); // undefined
-alert(informaGenero === pessoa1.dizGenero); //true
-alert(informaGenero === Pessoa.prototype.dizGenero); //true
-
- -

Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto Function, da seguinte maneira:

- -
informaGenero.call(pessoa1); //alerts 'Masculino'
-
- -
Veja mais sobre em Function.call e Function.apply
- -

Herança

- -

Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (JavaScript suporta apenas herança de classe única). A classe especializada é comumente chamada de filha, e a outra classe é comumente chamada de pai. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar Object.create para implementar herança.

- -
-

JavaScript não detecta o  prototype.constructor da classe filha, veja a propriedade Core JavaScript 1.5 Reference:Global Objects:Object:prototype, então devemos declará-la manualmente.

-
- -

No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().

- -
// define a classe Pessoa
-function Pessoa() {}
-
-Pessoa.prototype.caminhar = function(){
-  alert ('Estou Caminhando!');
-};
-Pessoa.prototype.dizOi = function(){
-  alert ('Oi!');
-};
-
-// define a classe  Estudante
-function Estudante() {
-  // Chama o método pai
-  Pessoa.call(this);
-}
-
-// herda de Pessoa
-Estudante.prototype = new Pessoa();
-
-// corrige o ponteiro construtor, que aponta para Pessoa
-Estudante.prototype.constructor = Estudante;
-
-// adiciona o método dizOi
-Estudante.prototype.dizOi = function(){
-  alert('Oi, eu sou estudante');
-}
-
-// adiciona o método dizTchau
-Estudante.prototype.dizTchau = function(){
-  alert('tchau');
-}
-
-var estudante1 = new Estudante();
-estudante1.dizOi();
-estudante1.caminhar();
-estudante1.dizTchau();
-
-// checa a herança
-alert(estudante1 instanceof Pessoa); // true
-alert(estudante1 instanceof Estudante); // true
-
- -

Utilizando Object.create a linha de herança deveria ser:

- -
Estudante.prototype = Object.create(Pessoa.prototype);
- -

Encapsulamento

- -

Em exemplo anterior, Estudante não precisava saber como o método caminhar() da classe Pessoa seria implementada, mas ainda pode utilizar esté método; a classe Estudante não possui necessidade explícita de definir o método desde que não queremos alterar-lo. Isso se chama encapsulamento, pelo qual cada classe herda os métodos de seu pai e só precisa definir as coisas que deseja mudar.

- -

Abstração

- -

A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript alcança especialização por herança, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.

- -

A Função de classe do JavaScript é hedar da classe Object (isso demonstra a especialização do modelo). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)

- -
var foo = function(){};
-alert( 'foo é um Function: ' + (foo instanceof Function) );
-alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
-
- -

Polimorfismo

- -

Assim como todos os métodos e propriedades são definidos dentro da propriedade prototype, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).

- -

Notas

- -

As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.

- -

As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. 

- -

Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.

- -

Referências

- -
    -
  1. Mozilla. "Core JavaScript 1.5 Guide", https://developer.mozilla.org/docs/Web/JavaScript/Guide
    2. -
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. -
- -
-

Original Document Information

- -
    -
  • Author(s): Fernando Trasviña <f_trasvina at hotmail dot com>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
- -

Es: https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos 

diff --git "a/files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" "b/files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" deleted file mode 100644 index 83844d17b5..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Erro de sintaxe falta ) depois da lista de argumentos -slug: Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
Erro de sintaxe: Falta ) depois da lista de argumento
-
- -

Tipo de Erro

- -

{{jsxref("Erro de sintaxe")}}.

- -

O que houve de errado?

- -

Ocorreu um erro quando a função foi chamada. Pode ter sido um erro de escrita, falta de operador, ou uma string fora das aspas, por exemplo.

- -

Exemplos

- -

Pela falta do operador "+" para fazer a concatenação da string, o JavaScript esperou um argumento para a função log ser "PI: ". Nesse caso, deveria ser finalizado com parênteses de fechamento ')'.

- -
console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-
- -

Você pode corrigir a chamada do log adicionand o operador "+":

- -
console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"
- -

Veja também:

- - diff --git a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html b/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html deleted file mode 100644 index b10562516e..0000000000 --- a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 'SyntaxError: missing } after property list' -slug: Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades -tags: - - Erro de Sintaxe - - Erros - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
SyntaxError: missing } after property list
-
- -

Tipo de erro

- -

{{jsxref("SyntaxError")}}

- -

O que deu errado?

- -

Aconteceu um engano na sintaxe do inicializador do objeto em algum lugar. Pode ser que você esqueceu de colocar uma chave, mas também pode ser uma vírgula que foi esquecida, por exemplo. Verifique também se alguma chave de finalização ou parêntesis estão em algum lugar que não deveriam estar. Indente ou formate o código de uma maneira legível pode te ajudar a enxergar no meio dessa selva.

- -

Exemplos

- -

Vírgula esquecida

- -

Muitas vezes esquecemos uma vígula no inicializador de objeto:

- -
var obj = {
-  a: 1,
-  b: { minhaProp: 2 }
-  c: 3
-};
-
- -

O código correto deve ser:

- -
var obj = {
-  a: 1,
-  b: { minhaProp: 2 },
-  c: 3
-};
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..b10562516e --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,52 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades +tags: + - Erro de Sintaxe + - Erros + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
SyntaxError: missing } after property list
+
+ +

Tipo de erro

+ +

{{jsxref("SyntaxError")}}

+ +

O que deu errado?

+ +

Aconteceu um engano na sintaxe do inicializador do objeto em algum lugar. Pode ser que você esqueceu de colocar uma chave, mas também pode ser uma vírgula que foi esquecida, por exemplo. Verifique também se alguma chave de finalização ou parêntesis estão em algum lugar que não deveriam estar. Indente ou formate o código de uma maneira legível pode te ajudar a enxergar no meio dessa selva.

+ +

Exemplos

+ +

Vírgula esquecida

+ +

Muitas vezes esquecemos uma vígula no inicializador de objeto:

+ +
var obj = {
+  a: 1,
+  b: { minhaProp: 2 }
+  c: 3
+};
+
+ +

O código correto deve ser:

+ +
var obj = {
+  a: 1,
+  b: { minhaProp: 2 },
+  c: 3
+};
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..83844d17b5 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,38 @@ +--- +title: Erro de sintaxe falta ) depois da lista de argumentos +slug: Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
Erro de sintaxe: Falta ) depois da lista de argumento
+
+ +

Tipo de Erro

+ +

{{jsxref("Erro de sintaxe")}}.

+ +

O que houve de errado?

+ +

Ocorreu um erro quando a função foi chamada. Pode ter sido um erro de escrita, falta de operador, ou uma string fora das aspas, por exemplo.

+ +

Exemplos

+ +

Pela falta do operador "+" para fazer a concatenação da string, o JavaScript esperou um argumento para a função log ser "PI: ". Nesse caso, deveria ser finalizado com parênteses de fechamento ')'.

+ +
console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+
+ +

Você pode corrigir a chamada do log adicionand o operador "+":

+ +
console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"
+ +

Veja também:

+ + diff --git a/files/pt-br/web/javascript/reference/errors/not_defined/index.html b/files/pt-br/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..6642b81b44 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" não está definido' +slug: Web/JavaScript/Reference/Errors/Não_definido +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
ReferenceError: "x" is not defined
+
+ +

Tipo de erro

+ +

{{jsxref("ReferenceError")}}

+ +

O que deu errado?

+ +

Há uma variavel inexistente referenciada em algum lugar. Essa variável precisa ser declarada ou você precisa ter certeza que ela está disponível no seu atual script ou {{Glossary("escopo")}}.

+ +
+

Nota: Quando carregar uma biblioteca (como o JQuery) tenha certeza que ela está carregada antes que você acesse as variáveis dela, como "$". Coloque na tag {{HTMLElement("script")}} para carregar a biblioteca antes do seu código usá-lo.

+
+ +

Exemplos

+ +

Variável não declarada

+ +
foo.substring(1); // ReferenceError: foo is not defined
+
+ +

A variável "foo" não está definida em lugar nenhum. Ela precisa ser uma string e assim o método {{jsxref("String.prototype.substring()")}} irá funcionar.

+ +
var foo = "bar";
+foo.substring(1); // "ar"
+ +

Escopo Errado

+ +

Uma variável precisa estar disponível no atual contexto de execução. Variáveis definidas dentro de uma function não podem ser acessadas de outros lugares fora da função, porque a variável é definida apenas no escopo da função

+ +
function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.
+ +

Entretanto, uma função pode acessar todas as variáveis e funções definidas dentro do escopo no qual elas estão definidas. Em outras palavras, uma função definida no escopo global pode acessar todas as variáveis no escopo global.

+ +
var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2
+ +

Veja também

+ + diff --git "a/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" "b/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" deleted file mode 100644 index 6642b81b44..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'ReferenceError: "x" não está definido' -slug: Web/JavaScript/Reference/Errors/Não_definido -translation_of: Web/JavaScript/Reference/Errors/Not_defined ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
ReferenceError: "x" is not defined
-
- -

Tipo de erro

- -

{{jsxref("ReferenceError")}}

- -

O que deu errado?

- -

Há uma variavel inexistente referenciada em algum lugar. Essa variável precisa ser declarada ou você precisa ter certeza que ela está disponível no seu atual script ou {{Glossary("escopo")}}.

- -
-

Nota: Quando carregar uma biblioteca (como o JQuery) tenha certeza que ela está carregada antes que você acesse as variáveis dela, como "$". Coloque na tag {{HTMLElement("script")}} para carregar a biblioteca antes do seu código usá-lo.

-
- -

Exemplos

- -

Variável não declarada

- -
foo.substring(1); // ReferenceError: foo is not defined
-
- -

A variável "foo" não está definida em lugar nenhum. Ela precisa ser uma string e assim o método {{jsxref("String.prototype.substring()")}} irá funcionar.

- -
var foo = "bar";
-foo.substring(1); // "ar"
- -

Escopo Errado

- -

Uma variável precisa estar disponível no atual contexto de execução. Variáveis definidas dentro de uma function não podem ser acessadas de outros lugares fora da função, porque a variável é definida apenas no escopo da função

- -
function numbers () {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError num1 is not defined.
- -

Entretanto, uma função pode acessar todas as variáveis e funções definidas dentro do escopo no qual elas estão definidas. Em outras palavras, uma função definida no escopo global pode acessar todas as variáveis no escopo global.

- -
var num1 = 2,
-    num2 = 3;
-
-function numbers () {
-  return num1 + num2;
-}
-
-console.log(num1); // 2
- -

Veja também

- - diff --git "a/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" "b/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" deleted file mode 100644 index 6f01588059..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 'Erro de sintaxe: declaração de função requer um nome' -slug: Web/JavaScript/Reference/Errors/NãoNomeado_funcão_declaração -tags: - - Erro - - Erro de Sintaxe - - JavaScript - - Statement -translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
Errodesintaxe: Identificador Esperado(Edge)
-Errodesintaxe: declaração de função requer um nome [Firefox]
-Errodesintaxe: Token inesperado ( [Chrome]
-
- -

Tipo de erro

- -

{{jsxref("Errodesintaxe")}}

- -

O que estava errado?

- -

Existe uma declaração no código que requer um nome. Você precisa checar como as funções são definidas e se você precisa providenciar um nome, se a função em questão precisa ser uma expressão de função, um {{Glossary("IIFE")}} ou se o código da função está colocado corretamente neste contexto.

- -

Exemplos

- -

Statements vs expressions

- -

Uma  declaração de função (ou declaração de função) requer um nome, isso não vai funcionar:

- -
function () {
-  return 'Olha mundo';
-}
-// SyntaxError: function statement requires a name
-
- -

Você pode usar uma expressão de função ao invés de uma atribuição.

- -
var saudar = function() {
-  return 'Ola mundo';
-};
- -

Ou, sua função pode ser pretendida a ser uma IIFE (Immediately Invoked Function Expression), qual é uma função que será em breve definida. Você vai precisar de um pouco mais de colchetes neste caso:

- -
(function () {
-
-})();
- -

Funçoes etiquetadas

- -

Se usar labels, precisará providenciar um nome de função depois da  palavra function . Isto não funciona:

- -
function Saudacao() {
-  alemao: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: a função declaração requer um nome
-
- -

Isso funciona ,veja o exemplo:

- -
function Saudacao() {
-  alemao: function g() {
-    return "Moin";
-  }
-}
- -

Métodos de Objetos

- -

Se pretende criar um metodo para um objeto, voce precisa-rá criar um objeto (hehehe). A seguir uma sintaxe sem nome depois de function é válida.

- -
var saudacao = {
-  alemao: function () {
-    return "Moin";
-  }
-};
- -

Callback Sintaxe

- -

Alem disso,cheque sua sintaxe usando callbacks. Colchetes e virgulas ficam facilmente atrapalhar e dificultar.

- -
promessa.then(
-  function() {
-    console.log("sucesso");
-  });
-  function() {
-    console.log("erro");
-}
-// SyntaxError: function statement requires a name
-
- -

O correto seria:

- -
promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);//sempre que abrir feche();
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html new file mode 100644 index 0000000000..6f01588059 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -0,0 +1,116 @@ +--- +title: 'Erro de sintaxe: declaração de função requer um nome' +slug: Web/JavaScript/Reference/Errors/NãoNomeado_funcão_declaração +tags: + - Erro + - Erro de Sintaxe + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
Errodesintaxe: Identificador Esperado(Edge)
+Errodesintaxe: declaração de função requer um nome [Firefox]
+Errodesintaxe: Token inesperado ( [Chrome]
+
+ +

Tipo de erro

+ +

{{jsxref("Errodesintaxe")}}

+ +

O que estava errado?

+ +

Existe uma declaração no código que requer um nome. Você precisa checar como as funções são definidas e se você precisa providenciar um nome, se a função em questão precisa ser uma expressão de função, um {{Glossary("IIFE")}} ou se o código da função está colocado corretamente neste contexto.

+ +

Exemplos

+ +

Statements vs expressions

+ +

Uma  declaração de função (ou declaração de função) requer um nome, isso não vai funcionar:

+ +
function () {
+  return 'Olha mundo';
+}
+// SyntaxError: function statement requires a name
+
+ +

Você pode usar uma expressão de função ao invés de uma atribuição.

+ +
var saudar = function() {
+  return 'Ola mundo';
+};
+ +

Ou, sua função pode ser pretendida a ser uma IIFE (Immediately Invoked Function Expression), qual é uma função que será em breve definida. Você vai precisar de um pouco mais de colchetes neste caso:

+ +
(function () {
+
+})();
+ +

Funçoes etiquetadas

+ +

Se usar labels, precisará providenciar um nome de função depois da  palavra function . Isto não funciona:

+ +
function Saudacao() {
+  alemao: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: a função declaração requer um nome
+
+ +

Isso funciona ,veja o exemplo:

+ +
function Saudacao() {
+  alemao: function g() {
+    return "Moin";
+  }
+}
+ +

Métodos de Objetos

+ +

Se pretende criar um metodo para um objeto, voce precisa-rá criar um objeto (hehehe). A seguir uma sintaxe sem nome depois de function é válida.

+ +
var saudacao = {
+  alemao: function () {
+    return "Moin";
+  }
+};
+ +

Callback Sintaxe

+ +

Alem disso,cheque sua sintaxe usando callbacks. Colchetes e virgulas ficam facilmente atrapalhar e dificultar.

+ +
promessa.then(
+  function() {
+    console.log("sucesso");
+  });
+  function() {
+    console.log("erro");
+}
+// SyntaxError: function statement requires a name
+
+ +

O correto seria:

+ +
promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);//sempre que abrir feche();
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/default_parameters/index.html b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..82dc54abd8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,210 @@ +--- +title: Parâmetros Predefinidos +slug: Web/JavaScript/Reference/Functions/Parametros_Predefinidos +tags: + - ECMA2015 + - ECMAScript6 + - Function + - Functions + - Função + - Funções + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Os parâmetros predefinidos de uma função permitem que parâmetros regulares sejam inicializados com com valores iniciais caso undefined ou nenhum valor seja passado.

+ +

Sintaxe

+ +
function [nome]([param1[ = valorPredefinido1 ][, ..., paramN[ = valorPredefinidoN ]]]) {
+   instruções
+}
+
+ +

Descrição

+ +

Em JavaScript, os parâmetros de funções tem {{jsxref("undefined")}} como valor predefinido. Contudo, em alguns casos pode ser útil utilizar algum outro valor. É nesta situação em que os parâmetros predefinidos podem ser úteis.

+ +

No passado, a estratégia de definir valores padrão para parâmetros era testar os valores do parâmetros no corpo da função e atribuir um valor se este for undefined. No exemplo a seguir, se nenhum valor for fornecido para b na chamada, este valor será undefined, quando a*b for calculado resultaria em NaN. No entanto, isto é capturado na segunda linha definindo um valor padrão para b:

+ +
function multiply(a, b) {
+  b = (typeof b !== 'undefined') ? b : 1;
+
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

Com o parâmetros predefinidos a checagem no corpo da função nao é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b na declaração da função:

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+ +

Exemplos

+ +

Passando undefined vs. outros valores "falsy"

+ +

Na segunda chamada aqui, mesmo se o segundo argumento é definido explicitamente como undefined (com exceção de null) quando chamado, o valor para o argumento num será o padrão.

+ +
function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();          // 'number' (num é definido para 1)
+test(undefined); // 'number' (num é definido para 1 também)
+
+// teste com outros values "falsy":
+test('');        // 'string' (num é definido para '')
+test(null);      // 'object' (num é definido para null)
+ +

Avaliado em tempo de chamada

+ +

Os parâmetros predefinidos são avaliados no momento da chamada da função, então diferente de ex.: Python, um novo objeto é criado cada vez que a funçao é chamada.

+ +
function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], not [1, 2]
+
+
+ +

Este mesmo comportamento é aplicado para funções e variáveis:

+ +
function callSomething(thing = something()) { return thing }
+
+function something(){
+  return "sth";
+}
+
+callSomething();  //sth
+ +

Parâmetros predefinidos estão disponíveis para os parâmetros seguintes à sua definição

+ +

Parâmetros que já foram avaliados ficam disponíveis para uso para os parâmetros seguintes:

+ +
function singularAutoPlural(singular, plural = singular+"s",
+                            rallyingCry = plural + " ATTACK!!!") {
+  return [singular, plural, rallyingCry ];
+}
+
+//["Gecko","Geckos", "Geckos ATTACK!!!"]
+singularAutoPlural("Gecko");
+
+//["Fox","Foxes", "Foxes ATTACK!!!"]
+singularAutoPlural("Fox","Foxes");
+
+//["Deer", "Deer", "Deer ... change."]
+singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
+   petition the government for positive change.")
+
+ +

Esta funcionalidade torna-se uma maneira direta e demonstra quantos casos extremos são manipulados.

+ +
function go() {
+  return ":P"
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
+
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
+
+ +

Funções definidadas dentro do corpo da função

+ +

Introduzido no Gecko 33 {{geckoRelease(33)}}. Funções declaradas no corpo da função não podem ser referenciada dentro de parâmetos padrão e lançará um {{jsxref("ReferenceError")}} (atualmente um {{jsxref("TypeError")}} no SpiderMonkey, veja {{bug(1022967)}}). Parâmetros padrão são sempre executados primeiro, declarações de funções dentro do corpo de outra função são avaliadas depois.

+ +
// Não funciona! Throws ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+
+ +

Parâmetros sem valor padrão depois de parâmetros com valores padrão

+ +

Antes do Gecko 26 {{geckoRelease(26)}}, o seguinte código resultaria em um {{jsxref("SyntaxError")}}. Isto foi corrigido no {{bug(777060)}} e funciona como esperado em versões posteriores:

+ +
function f(x=1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+
+ +

Parâmetro desestruturado com valores padrões

+ +

É possível definir valores padrões com a notação destructuring assignment:

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Definição Inicial.
+ +

Compatibilidade nos navegadores

+ +
+

{{Compat("javascript.functions.default_parameters")}}

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html b/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html deleted file mode 100644 index ac02cb9deb..0000000000 --- a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Definições de Método -slug: Web/JavaScript/Reference/Functions/Definicoes_metodos -tags: - - ECMAScript 2015 - - Funções - - JavaScript - - Objeto - - Sintaxe -translation_of: Web/JavaScript/Reference/Functions/Method_definitions ---- -
{{JsSidebar("Functions")}}
- -

No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.

- -

{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}

- - - -

Sintaxe

- -
var obj = {
-  propriedade( parametros… ) {},
-  *generator( parametros… ) {},
-// também com chaves computadas:
-  [propriedade]( parameters… ) {},
-  *[generator]( parametros… ) {},
-// compare ES5 sintaxe para getter/setter:
-  get propriedade() {},
-  set propriedade(valor) {}
-};
-
- -

Descrição

- -

A sintaxe reduzida é similar à da getter e setter  introduzida no ECMAScript 5.

- -

Dado o seguinte código:

- -
var obj = {
-  foo: function() {},
-  bar: function() {}
-};
- -

Agora você pode reduzi-lo para isto:

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -

Generator methods

- -

Os generator methods também podem ser definidos utilizando a sintaxe reduzida.

- -
    -
  • Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, * g(){} funcionará, porém g *(){} não.
    • -
  • Se o método não for generator, sua definição não pode conter a palavra-chave yield. Dessa forma, generator functions legadas também não funcionarão, lançando um {{jsxref("SyntaxError")}}. Sempre utilize yield em conjunto com o asterisco (*)
    • -
- -
// Utilizando a propriedade com nome (pre-ES6)
-var obj2 = {
-  g: function*() {
-    var indice = 0;
-    while(true)
-      yield indice++;
-  }
-};
-
-// O mesmo objeto utilizando a sintaxe reduzida
-var obj2 = {
-  * g() {
-    var indice = 0;
-    while(true)
-      yield indice++;
-  }
-};
-
-var coisa = obj2.g();
-console.log(coisa.next().value); // 0
-console.log(coisa.next().value); // 1
- -

Métodos assíncronos

- -

{{jsxref("Statements/funcoes_assincronas", "Funções assíncronas", "", 1)}} também podem ser definidas usando a sintaxe reduzida.

- -
// Utilizando a propriedade com nome (pre-ES6)
-var obj3 = {
-  f: async function () {
-    await alguma_promise;
-  }
-};
-
-// O mesmo objeto com a sintaxe reduzida
-var obj3 = {
-  async f() {
-    await alguma_promise;
-  }
-};
- -

Generator methods assíncronos

- -

  Os generator methods também podem ser {{jsxref("Statements/funcoes_assincronas", "assíncronos", "", 1)}}

- -
var obj4 = {
-  f: async function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};
-
-// O mesmo objeto com a sintaxe reduzida
-var obj4 = {
-  async* f() {
-   yield 1;
-   yield 2;
-   yield 3;
-  }
-};
- -

Métodos reduzidos não são construíveis

- -

Métodos assim definidos não são construtores e lançarão um {{jsxref("TypeError")}} se você tentar instanciá-los.

- -
var obj = {
-  metodo() {},
-};
-new obj.metodo; // TypeError: obj.method is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructor (modificado no ES2016)
-
- -

Exemplos

- -

Caso de teste simples

- -
var obj = {
-  a : "foo",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "foo"
-
- -

Nome de propriedades computados

- -

A sintaxe reduzida também suporta nome de propriedades computados.

- -
var bar = {
-  foo0 : function (){return 0;},
-  foo1(){return 1;},
-  ["foo" + 2](){return 2;},
-};
-
-console.log(bar.foo0()); // 0
-console.log(bar.foo1()); // 1
-console.log(bar.foo2()); // 2
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de browser

- - - -

{{Compat("javascript.functions.method_definitions")}}

- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/functions/method_definitions/index.html b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..ac02cb9deb --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,200 @@ +--- +title: Definições de Método +slug: Web/JavaScript/Reference/Functions/Definicoes_metodos +tags: + - ECMAScript 2015 + - Funções + - JavaScript + - Objeto + - Sintaxe +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.

+ +

{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}

+ + + +

Sintaxe

+ +
var obj = {
+  propriedade( parametros… ) {},
+  *generator( parametros… ) {},
+// também com chaves computadas:
+  [propriedade]( parameters… ) {},
+  *[generator]( parametros… ) {},
+// compare ES5 sintaxe para getter/setter:
+  get propriedade() {},
+  set propriedade(valor) {}
+};
+
+ +

Descrição

+ +

A sintaxe reduzida é similar à da getter e setter  introduzida no ECMAScript 5.

+ +

Dado o seguinte código:

+ +
var obj = {
+  foo: function() {},
+  bar: function() {}
+};
+ +

Agora você pode reduzi-lo para isto:

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Generator methods

+ +

Os generator methods também podem ser definidos utilizando a sintaxe reduzida.

+ +
    +
  • Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, * g(){} funcionará, porém g *(){} não.
    • +
  • Se o método não for generator, sua definição não pode conter a palavra-chave yield. Dessa forma, generator functions legadas também não funcionarão, lançando um {{jsxref("SyntaxError")}}. Sempre utilize yield em conjunto com o asterisco (*)
    • +
+ +
// Utilizando a propriedade com nome (pre-ES6)
+var obj2 = {
+  g: function*() {
+    var indice = 0;
+    while(true)
+      yield indice++;
+  }
+};
+
+// O mesmo objeto utilizando a sintaxe reduzida
+var obj2 = {
+  * g() {
+    var indice = 0;
+    while(true)
+      yield indice++;
+  }
+};
+
+var coisa = obj2.g();
+console.log(coisa.next().value); // 0
+console.log(coisa.next().value); // 1
+ +

Métodos assíncronos

+ +

{{jsxref("Statements/funcoes_assincronas", "Funções assíncronas", "", 1)}} também podem ser definidas usando a sintaxe reduzida.

+ +
// Utilizando a propriedade com nome (pre-ES6)
+var obj3 = {
+  f: async function () {
+    await alguma_promise;
+  }
+};
+
+// O mesmo objeto com a sintaxe reduzida
+var obj3 = {
+  async f() {
+    await alguma_promise;
+  }
+};
+ +

Generator methods assíncronos

+ +

  Os generator methods também podem ser {{jsxref("Statements/funcoes_assincronas", "assíncronos", "", 1)}}

+ +
var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// O mesmo objeto com a sintaxe reduzida
+var obj4 = {
+  async* f() {
+   yield 1;
+   yield 2;
+   yield 3;
+  }
+};
+ +

Métodos reduzidos não são construíveis

+ +

Métodos assim definidos não são construtores e lançarão um {{jsxref("TypeError")}} se você tentar instanciá-los.

+ +
var obj = {
+  metodo() {},
+};
+new obj.metodo; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (modificado no ES2016)
+
+ +

Exemplos

+ +

Caso de teste simples

+ +
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Nome de propriedades computados

+ +

A sintaxe reduzida também suporta nome de propriedades computados.

+ +
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de browser

+ + + +

{{Compat("javascript.functions.method_definitions")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html b/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html deleted file mode 100644 index 82dc54abd8..0000000000 --- a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Parâmetros Predefinidos -slug: Web/JavaScript/Reference/Functions/Parametros_Predefinidos -tags: - - ECMA2015 - - ECMAScript6 - - Function - - Functions - - Função - - Funções - - JavaScript -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -
{{jsSidebar("Functions")}}
- -

Os parâmetros predefinidos de uma função permitem que parâmetros regulares sejam inicializados com com valores iniciais caso undefined ou nenhum valor seja passado.

- -

Sintaxe

- -
function [nome]([param1[ = valorPredefinido1 ][, ..., paramN[ = valorPredefinidoN ]]]) {
-   instruções
-}
-
- -

Descrição

- -

Em JavaScript, os parâmetros de funções tem {{jsxref("undefined")}} como valor predefinido. Contudo, em alguns casos pode ser útil utilizar algum outro valor. É nesta situação em que os parâmetros predefinidos podem ser úteis.

- -

No passado, a estratégia de definir valores padrão para parâmetros era testar os valores do parâmetros no corpo da função e atribuir um valor se este for undefined. No exemplo a seguir, se nenhum valor for fornecido para b na chamada, este valor será undefined, quando a*b for calculado resultaria em NaN. No entanto, isto é capturado na segunda linha definindo um valor padrão para b:

- -
function multiply(a, b) {
-  b = (typeof b !== 'undefined') ? b : 1;
-
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
-
- -

Com o parâmetros predefinidos a checagem no corpo da função nao é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b na declaração da função:

- -
function multiply(a, b = 1) {
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
- -

Exemplos

- -

Passando undefined vs. outros valores "falsy"

- -

Na segunda chamada aqui, mesmo se o segundo argumento é definido explicitamente como undefined (com exceção de null) quando chamado, o valor para o argumento num será o padrão.

- -
function test(num = 1) {
-  console.log(typeof num);
-}
-
-test();          // 'number' (num é definido para 1)
-test(undefined); // 'number' (num é definido para 1 também)
-
-// teste com outros values "falsy":
-test('');        // 'string' (num é definido para '')
-test(null);      // 'object' (num é definido para null)
- -

Avaliado em tempo de chamada

- -

Os parâmetros predefinidos são avaliados no momento da chamada da função, então diferente de ex.: Python, um novo objeto é criado cada vez que a funçao é chamada.

- -
function append(value, array = []) {
-  array.push(value);
-  return array;
-}
-
-append(1); //[1]
-append(2); //[2], not [1, 2]
-
-
- -

Este mesmo comportamento é aplicado para funções e variáveis:

- -
function callSomething(thing = something()) { return thing }
-
-function something(){
-  return "sth";
-}
-
-callSomething();  //sth
- -

Parâmetros predefinidos estão disponíveis para os parâmetros seguintes à sua definição

- -

Parâmetros que já foram avaliados ficam disponíveis para uso para os parâmetros seguintes:

- -
function singularAutoPlural(singular, plural = singular+"s",
-                            rallyingCry = plural + " ATTACK!!!") {
-  return [singular, plural, rallyingCry ];
-}
-
-//["Gecko","Geckos", "Geckos ATTACK!!!"]
-singularAutoPlural("Gecko");
-
-//["Fox","Foxes", "Foxes ATTACK!!!"]
-singularAutoPlural("Fox","Foxes");
-
-//["Deer", "Deer", "Deer ... change."]
-singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
-   petition the government for positive change.")
-
- -

Esta funcionalidade torna-se uma maneira direta e demonstra quantos casos extremos são manipulados.

- -
function go() {
-  return ":P"
-}
-
-function withDefaults(a, b = 5, c = b, d = go(), e = this,
-                      f = arguments, g = this.value) {
-  return [a,b,c,d,e,f,g];
-}
-function withoutDefaults(a, b, c, d, e, f, g){
-  switch(arguments.length){
-    case 0:
-      a
-    case 1:
-      b = 5
-    case 2:
-      c = b
-    case 3:
-      d = go();
-    case 4:
-      e = this
-    case 5:
-      f = arguments
-    case 6:
-      g = this.value;
-    default:
-  }
-  return [a,b,c,d,e,f,g];
-}
-
-withDefaults.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
-
-
-withoutDefaults.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
-
- -

Funções definidadas dentro do corpo da função

- -

Introduzido no Gecko 33 {{geckoRelease(33)}}. Funções declaradas no corpo da função não podem ser referenciada dentro de parâmetos padrão e lançará um {{jsxref("ReferenceError")}} (atualmente um {{jsxref("TypeError")}} no SpiderMonkey, veja {{bug(1022967)}}). Parâmetros padrão são sempre executados primeiro, declarações de funções dentro do corpo de outra função são avaliadas depois.

- -
// Não funciona! Throws ReferenceError.
-function f(a = go()) {
-  function go(){return ":P"}
-}
-
- -

Parâmetros sem valor padrão depois de parâmetros com valores padrão

- -

Antes do Gecko 26 {{geckoRelease(26)}}, o seguinte código resultaria em um {{jsxref("SyntaxError")}}. Isto foi corrigido no {{bug(777060)}} e funciona como esperado em versões posteriores:

- -
function f(x=1, y) {
-  return [x, y];
-}
-
-f(); // [1, undefined]
-
- -

Parâmetro desestruturado com valores padrões

- -

É possível definir valores padrões com a notação destructuring assignment:

- -
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
-  return x + y + z;
-}
-
-f(); // 6
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Definição Inicial.
- -

Compatibilidade nos navegadores

- -
-

{{Compat("javascript.functions.default_parameters")}}

-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html b/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html deleted file mode 100644 index a0f794df1a..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Reference/Global_Objects/Array/contains -tags: - - Array - - ECMAScript7 - - Experimental - - Expérimental(2) - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -
{{JSRef("Global_Objects", "Array")}}
- -

Sumário

- -

O método includes() determina se um array contém um determinado elemento, retornando true ou false apropriadamente.

- -

Sintaxe

- -
array.includes(searchElement[, fromIndex])
- -

Parâmetros

- -
-
searchElement
-
O elemento a buscar
-
fromIndex
-
Opcional. A posição no array de onde a busca pelo searchElement se iniciará. Por padrão, 0.
-
- -

Exemplos

- -
[1, 2, 3].includes(2);     // true
-[1, 2, 3].includes(4);     // false
-[1, 2, 3].includes(3, 3);  // false
-[1, 2, 3].includes(3, -1); // true
-[1, 2, NaN].includes(NaN); // true
-
- -

Polyfill

- -
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
-if (!Array.prototype.includes) {
-  Object.defineProperty(Array.prototype, 'includes', {
-    value: function(searchElement, fromIndex) {
-
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If len is 0, return false.
-      if (len === 0) {
-        return false;
-      }
-
-      // 4. Let n be ? ToInteger(fromIndex).
-      //    (If fromIndex is undefined, this step produces the value 0.)
-      var n = fromIndex | 0;
-
-      // 5. If n ≥ 0, then
-      //  a. Let k be n.
-      // 6. Else n < 0,
-      //  a. Let k be len + n.
-      //  b. If k < 0, let k be 0.
-      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-      // 7. Repeat, while k < len
-      while (k < len) {
-        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
-        // b. If SameValueZero(searchElement, elementK) is true, return true.
-        // c. Increase k by 1.
-        // NOTE: === provides the correct "SameValueZero" comparison needed here.
-        if (o[k] === searchElement) {
-          return true;
-        }
-        k++;
-      }
-
-      // 8. Return false
-      return false;
-    }
-  });
-}
-
- -

Especificações

- -

Proposta ES7: https://github.com/domenic/Array.prototype.contains/blob/master/spec.md

- -

Compatibilidade

- -
{{Compat("javascript.builtins.Array.includes")}}
- -

Veja Também

- -
    -
  • {{jsxref("TypedArray.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..c7b0c08915 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,227 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filtro +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtrado é [12, 130, 44]
+
+ +

Sintaxe

+ +
var newArray = arr.filter(callback[, thisArg])
+ +

Parâmetros

+ +
+
callback
+
Função é um predicado, para testar cada elemento do array. Retorna true para manter o elemento, false caso contrário, recebendo três argumentos:
+
+
+
element
+
+

O elemento que está sendo processado no array.

+
+
index
+
O índice do elemento atual que está sendo processado no array.
+
array
+
O array para qual filter foi chamada.
+
+
+
thisArg {{Optional_inline}}
+
Opcional. Valor a ser usado como this durante a execução do callback.
+
+ +

Valor de retorno

+ +

Um novo array com os elementos que passaram no teste.

+ +

Descrição

+ +

filter() chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o callback retornou o valor true ou  um valor que seja convertido para true. O callback é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do callback são simplesmente ignorados, e não são incluídos no novo array.

+ +

callback é invocado com estes três argumentos:

+ +
    +
  1. o valor do elemento
    2. +
  2. o índice do elemento
    3. +
  3. o objeto do array a ser preenchido
    4. +
+ +

Se o parâmetro thisArg for provido para o filter, ele será passado para o callback quando invocado, para ser usado como o valor do this. Caso contrário, será passado undefined como o valor de this. O valor do this finalmente observado pela função de callback é determinado de acordo com a regra que define o valor do this geralmente visto por uma função.

+ +

filter() não altera o array a partir da qual foi invocado.

+ +

O intervalo de elementos processados pela função filter() é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do filter() não serão visitados pelo callback. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o  filter() visitá-los; Elementos que forem deletados não são visitados.

+ +

Exemplos

+ +

Exemplo: Filtrando todos os valores pequenos

+ +

Os exemplos a seguir usam filter() para criar um array filtrado em que todos os elementos com valores menores que 10 são removidos.

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+
+ +

Exemplo: Filtrando entradas inválidas para JSON

+ +

O exemplo a seguir usa filter() para criar um JSON filtrado com todos seus elementos diferentes de zero, e id numérico.

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function filterByID(obj) {
+  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
+    return true;
+  } else {
+    invalidEntries++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries);
+// Number of Invalid Entries = 4
+
+ +

Procurando em um array

+ +

O exemplo a seguir usa filter() para filtrar o conteúdo de um array baseado em um critério de busca

+ +
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+ +

Implementação ES2015

+ +
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+const filterItems = (query) => {
+  return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1);
+};
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+ +

Polyfill

+ +

filter() foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do filter() na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que fn.call veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.

+ +
if (!Array.prototype.filter) {
+  Array.prototype.filter = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var res = [];
+    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
+    for (var i = 0; i < len; i++) {
+      if (i in t) {
+        var val = t[i];
+
+        // NOTE: Technically this should Object.defineProperty at
+        //       the next index, as push can be affected by
+        //       properties on Object.prototype and Array.prototype.
+        //       But that method's new, and collisions should be
+        //       rare, so use the more-compatible alternative.
+        if (fun.call(thisArg, val, i, t)) {
+          res.push(val);
+        }
+      }
+    }
+
+    return res;
+  };
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definição inicial. Implementada no JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}}
+ +

Compatibilidade de Browser

+ +
{{Compat("javascript.builtins.Array.filter")}}
+ +

Veja também

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
+ + diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html deleted file mode 100644 index c7b0c08915..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Array.prototype.filter() -slug: Web/JavaScript/Reference/Global_Objects/Array/filtro -tags: - - Array - - ECMAScript 5 - - JavaScript - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter ---- -
{{JSRef}}
- -

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

- -
function isBigEnough(value) {
-  return value >= 10;
-}
-
-var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
-// filtrado é [12, 130, 44]
-
- -

Sintaxe

- -
var newArray = arr.filter(callback[, thisArg])
- -

Parâmetros

- -
-
callback
-
Função é um predicado, para testar cada elemento do array. Retorna true para manter o elemento, false caso contrário, recebendo três argumentos:
-
-
-
element
-
-

O elemento que está sendo processado no array.

-
-
index
-
O índice do elemento atual que está sendo processado no array.
-
array
-
O array para qual filter foi chamada.
-
-
-
thisArg {{Optional_inline}}
-
Opcional. Valor a ser usado como this durante a execução do callback.
-
- -

Valor de retorno

- -

Um novo array com os elementos que passaram no teste.

- -

Descrição

- -

filter() chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o callback retornou o valor true ou  um valor que seja convertido para true. O callback é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do callback são simplesmente ignorados, e não são incluídos no novo array.

- -

callback é invocado com estes três argumentos:

- -
    -
  1. o valor do elemento
    2. -
  2. o índice do elemento
    3. -
  3. o objeto do array a ser preenchido
    4. -
- -

Se o parâmetro thisArg for provido para o filter, ele será passado para o callback quando invocado, para ser usado como o valor do this. Caso contrário, será passado undefined como o valor de this. O valor do this finalmente observado pela função de callback é determinado de acordo com a regra que define o valor do this geralmente visto por uma função.

- -

filter() não altera o array a partir da qual foi invocado.

- -

O intervalo de elementos processados pela função filter() é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do filter() não serão visitados pelo callback. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o  filter() visitá-los; Elementos que forem deletados não são visitados.

- -

Exemplos

- -

Exemplo: Filtrando todos os valores pequenos

- -

Os exemplos a seguir usam filter() para criar um array filtrado em que todos os elementos com valores menores que 10 são removidos.

- -
function isBigEnough(value) {
-  return value >= 10;
-}
-var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
-// filtered is [12, 130, 44]
-
- -

Exemplo: Filtrando entradas inválidas para JSON

- -

O exemplo a seguir usa filter() para criar um JSON filtrado com todos seus elementos diferentes de zero, e id numérico.

- -
var arr = [
-  { id: 15 },
-  { id: -1 },
-  { id: 0 },
-  { id: 3 },
-  { id: 12.2 },
-  { },
-  { id: null },
-  { id: NaN },
-  { id: 'undefined' }
-];
-
-var invalidEntries = 0;
-
-function filterByID(obj) {
-  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
-    return true;
-  } else {
-    invalidEntries++;
-    return false;
-  }
-}
-
-var arrByID = arr.filter(filterByID);
-
-console.log('Filtered Array\n', arrByID);
-// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Number of Invalid Entries = ', invalidEntries);
-// Number of Invalid Entries = 4
-
- -

Procurando em um array

- -

O exemplo a seguir usa filter() para filtrar o conteúdo de um array baseado em um critério de busca

- -
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Array filters items based on search criteria (query)
- */
-function filterItems(query) {
-  return fruits.filter(function(el) {
-      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
-  })
-}
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']
- -

Implementação ES2015

- -
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Array filters items based on search criteria (query)
- */
-const filterItems = (query) => {
-  return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1);
-};
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']
- -

Polyfill

- -

filter() foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do filter() na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que fn.call veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.

- -
if (!Array.prototype.filter) {
-  Array.prototype.filter = function(fun/*, thisArg*/) {
-    'use strict';
-
-    if (this === void 0 || this === null) {
-      throw new TypeError();
-    }
-
-    var t = Object(this);
-    var len = t.length >>> 0;
-    if (typeof fun !== 'function') {
-      throw new TypeError();
-    }
-
-    var res = [];
-    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
-    for (var i = 0; i < len; i++) {
-      if (i in t) {
-        var val = t[i];
-
-        // NOTE: Technically this should Object.defineProperty at
-        //       the next index, as push can be affected by
-        //       properties on Object.prototype and Array.prototype.
-        //       But that method's new, and collisions should be
-        //       rare, so use the more-compatible alternative.
-        if (fun.call(thisArg, val, i, t)) {
-          res.push(val);
-        }
-      }
-    }
-
-    return res;
-  };
-}
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definição inicial. Implementada no JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}}
- -

Compatibilidade de Browser

- -
{{Compat("javascript.builtins.Array.filter")}}
- -

Veja também

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
- - diff --git a/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..a0f794df1a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,106 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/contains +tags: + - Array + - ECMAScript7 + - Experimental + - Expérimental(2) + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef("Global_Objects", "Array")}}
+ +

Sumário

+ +

O método includes() determina se um array contém um determinado elemento, retornando true ou false apropriadamente.

+ +

Sintaxe

+ +
array.includes(searchElement[, fromIndex])
+ +

Parâmetros

+ +
+
searchElement
+
O elemento a buscar
+
fromIndex
+
Opcional. A posição no array de onde a busca pelo searchElement se iniciará. Por padrão, 0.
+
+ +

Exemplos

+ +
[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+
+ +

Polyfill

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n < 0,
+      //  a. Let k be len + n.
+      //  b. If k < 0, let k be 0.
+      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+      // 7. Repeat, while k < len
+      while (k < len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        // c. Increase k by 1.
+        // NOTE: === provides the correct "SameValueZero" comparison needed here.
+        if (o[k] === searchElement) {
+          return true;
+        }
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}
+
+ +

Especificações

+ +

Proposta ES7: https://github.com/domenic/Array.prototype.contains/blob/master/spec.md

+ +

Compatibilidade

+ +
{{Compat("javascript.builtins.Array.includes")}}
+ +

Veja Também

+ +
    +
  • {{jsxref("TypedArray.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index e863d9cc69..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

Descrição

- -

Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de Array.prototype. Como em todos os construtores, você pode mudar o  protótipo desse construtor para modificar todas as instâncias de {{jsxref("Global_Objects/Array", "Array")}}.

- -

Contudo, a adição de métodos não-padronizados ao objeto array pode causar problemas futuros, seja com seu próprio código, ou na adição de novas funcionalidades ao JavaScript.

- -

Um fato pouco conhecido: O próprio Array.prototype é um {{jsxref("Global_Objects/Array", "Array")}}

- -
Array.isArray(Array.prototype); // true
-
- -

Propriedades

- -
-
Array.prototype.constructor
-
Especifica a função que cria um objeto do protótipo.
-  
-
{{jsxref("Array.prototype.length")}}
-
Reflete o número de elementos em um array.
-
- -

Métodos

- -

Métodos modificadores

- -

Esses métodos modificam o array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Copia uma sequência de elementos do array dentro do array.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.
-
{{jsxref("Array.prototype.pop()")}}
-
Remove e retorna o último elemento de um array.
-
{{jsxref("Array.prototype.push()")}}
-
Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.
-
{{jsxref("Array.prototype.shift()")}}
-
Remove o primeiro elemento de um array e o retorna.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordena os elementos do array em questão e retorna o array.
-
{{jsxref("Array.prototype.splice()")}}
-
Adiciona e/ou remove elementos de um array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.
-
- -

Métodos de acesso

- -

Esses métodos não modificam o array, mas sim retornam alguma representação dele.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.
-
{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}
-
Verifica se o array possui cer, retornandotrue ou false apropriadamente.
-
{{jsxref("Array.prototype.join()")}}
-
Retorna uma string com todos os elementos do array
-
{{jsxref("Array.prototype.slice()")}}
-
Retorna um novo array com uma parte do array sobre o qual o método foi chamado
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna um array literal representando o array especificado; você pode usar esse valor para criar um novo array. Esse método sobrescreve o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Retonar uma string adequada ao idioma do usuário representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array
-
- -

Métodos de iteração

- -

Vários métodos tomam como funções de argumento para serem chamados de volta ao processar o array. Quando esses métodos são chamados, o `length` do array é amostrado e qualquer elemento adicionado além deste comprimento (length)  de dentro da função (callback) não é visitado. Outras alterações para o array (Definindo o valor de ou apagando um elemento) pode afetar os resultados da operação se o método visita o elemento alterado posteriormente. Enquanto o comportamento específico destes métodos nestes casos é bem definido, não se deve confiar nisso para não confundir os outros que possoam ler seu código. Em vez disso, deve-se copiar para um novo array para modificá-lo.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Chama a função para cada elemento no array.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem o par chave/valor para cada índice no array.
-
{{jsxref("Array.prototype.every()")}}
-
Retorna true se todos elementos no array satisfizer a função de teste fornecida.
-
{{jsxref("Array.prototype.some()")}}
-
Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.
-
{{jsxref("Array.prototype.filter()")}}
-
Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou  `undefined` se não for encontrado.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Retorna um novo Array Iterator que contem a chave para cada índice no array.
-
{{jsxref("Array.prototype.map()")}}
-
Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
-
- -

Métodos genéricos

- -

Vários métodos do objeto Array em Javascript foram feitos para serem aplicados genericamentes em todos os objetos que "pareçam" Arrays. Isso é, eles podem ser usados em qualquer objeto que possuam uma propriedade length (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato array[5]). Alguns métodos, como {{jsxref("Array.join", "join")}}, apenas lêem e as propriedades numéricas do objeto sobre o qual eles sãochamados. Outros, como {{jsxref("Array.reverse", "reverse")}}, exigem que as propriedades numéricas e length sejam mutáveis; sendo assim, esses métodos não podem ser chamados em objetos como {{jsxref("Global_Objects/String", "String")}}, que não permitem que nenhuma das duas propriedades sejam modificadas.

- -

Especifiações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
ECMAScript 1st Edition.PadrãoDefinição inicial
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilidade com Navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- -
    -
  • {{jsxref("Global_Objects/Array", "Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index ff8de05541..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriedade - - Prototipo - - Referencia -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -
{{JSRef}}
- -

A propriedade BigInt.prototype representa o protótipo para o  construtor {{JSxRef("BigInt")}} .

- -

{{JS_Property_Attributes(0, 0, 0)}}

- -

Descrição

- -

Todas instância de {{JSxRef("BigInt")}} herdam de BigInt.prototype. O objeto protótipo do construtor {{JSxRef("BigInt")}} pode ser modificado para afetar todas instâncias de {{JSxRef( "BigInt")}} .

- -

Propriedades

- -
-
BigInt.prototype.constructor
-
Retorna a função que cria instâncias deste objeto. Por padrão é o objeto
- {{JSxRef("BigInt")}}.
-
- -

Métodos

- -
-
{{JSxRef("BigInt.prototype.toLocaleString()")}}
-
Retorna uma string com uma representação sensível ao idioma para este número. Sobrescreve o método {{JSxRef("Object.prototype.toLocaleString()")}}
-  
-
{{JSxRef("BigInt.prototype.toString()")}}
-
Retorna uma string respresentando o objeto específicado em um base específica. Sobrescreve o método {{JSxRef("Object.prototype.toString()")}} .
-
{{JSxRef("BigInt.prototype.valueOf()")}}
-
Retorna o valor primitivo de um objeto específicado. Sobrescreve o método {{JSxRef("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - -
EspecificaçõesEstado
{{SpecName('ESDraft', '#sec-bigint.prototype', 'BigInt.prototype')}}{{Spec2('ESDraft')}}
- -

Compatibilidade

- - - -

{{Compat("javascript.builtins.BigInt.prototype")}}

diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index 99603a019f..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -

A propriedade Boolean.prototype representa o prototype para o construtor de {{jsxref("Boolean")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Instancias de {{jsxref("Boolean")}} herdam de Boolean.prototype. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.

- -

Propriedades

- -
-
Boolean.prototype.constructor
-
Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.
-
- -

Métodos

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna a string contendo o codigo do objeto {{jsxref("Boolean")}} ;  pode-se usar esta string para criar um objeto equivalente. Sobreescreve o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Boolean.prototype.toString()")}}
-
Retorna uma string com valor "true" ou "false" dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementano no JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html deleted file mode 100644 index 3b45ee5fe2..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -
{{JSRef}}
- -

A propriedade Function.prototype representa o objeto prototype de {{jsxref("Function")}}.

- -

Descrição

- -

Objetos {{jsxref("Function")}} herdam de Function.prototype.  Function.prototype não pode ser modificado.

- -

Propriedades

- -
-
{{jsxref("Function.arguments")}} {{deprecated_inline}}
-
Um vetor correspondente aos argumentos passados a uma função. Isto é depreciado como propriedade de {{jsxref("Function")}}. Use em vez disso o objeto {{jsxref("Functions/arguments", "arguments")}} disponível dentro da função.
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.
-
{{jsxref("Function.caller")}} {{non-standard_inline}}
-
Especifica a função que invocou a função sendo executada.
-
{{jsxref("Function.length")}}
-
Especifica o número de argumentos esperados pela função.
-
{{jsxref("Function.name")}}
-
O nome da função.
-
{{jsxref("Function.displayName")}} {{non-standard_inline}}
-
O nome de exibição da função.
-
Function.prototype.constructor
-
Especifica a função que cria o prototype do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.
-
- -

Métodos

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Chama uma função e define seu this com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.
-
{{jsxref("Function.prototype.bind()")}}
-
Cria uma nova função que, quando chamada, tem seu this definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.
-
{{jsxref("Function.prototype.call()")}}
-
Chama (executa) uma função e define seu this com o valor fornecido. Argumentos podem ser passados como são.
-
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
-
Retorna true se a função é um gerador; se não, retorna false.
-
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.
-
{{jsxref("Function.prototype.toString()")}}
-
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementada no JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}}
- -

Compatibilidade de navegadores

- -
- - -

{{Compat("javascript.builtins.Function.prototype")}}

-
- -

Veja também

- -
    -
  • {{jsxref("Function")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index dce89ef41e..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -tags: - - Internacionalização - - JavaScript - - NumberFormat - - Property - - Propriedade - - Prototipo - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -
{{JSRef}}
- -

A propriedade Intl.NumberFormat.prototype representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de Intl.NumberFormat.

- -

As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de Intl.NumberFormat.prototype. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -

Propriedades

- -
-
Intl.NumberFormat.prototype.constructor
-
Uma referência a Intl.NumberFormat.
-
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
-
Getter; retorna uma função que formata um número de acordo com a localização e as opçõe de formatação do objeto {{jsxref("NumberFormat")}}.
-
- -

Métodos

- -
-
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
-
Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentários
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Definição inicial.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilidade do navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome("24")}}{{CompatGeckoDesktop("29")}}{{CompatIE("11")}}{{CompatOpera("15")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatChrome("26")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Veja também

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index b20baf56cc..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

A propriedade Map.prototype representa o protótipo para o construtor {{jsxref("Map")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias de {{jsxref("Map")}} herdam de {{jsxref("Map.prototype")}}. Você pode utilizar o objeto protótipo do  construtor para adicionar propriedades ou métodos para todas as instâncias de Map.

- -

Propriedades

- -
-
Map.prototype.constructor
-
Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.
-
{{jsxref("Map.prototype.size")}}
-
Retorna o número de pares chave/valor no objeto Map.
-
- -

Metódos

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Remove todas os pares chave/valor do objeto Map.
-
{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}
-
Remove qualquer valor associado à chave passada e retorna o valor que Map.prototype.has(chave) deveria retornar anteriormente. Map.prototype.has(chave) irá retornar false após tal remoção ser feita.
-
{{jsxref("Map.prototype.entries()")}}
-
Retorna um novo objeto Iterador que contem um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Chama callbackFn uma vez para cada par chave/valor presente no objeto Map, pela ordem de inserção. Se um parâmetro thisArg for fornecido para o forEach, ele será utilizado como o valor this para cada callback.
-
{{jsxref("Map.get", "Map.prototype.get(chave)")}}
-
Retorna o valor associado para a chave, ou undefined se esta não existir no objeto Map.
-
{{jsxref("Map.has", "Map.prototype.has(key)")}}
-
Retorna um valor booleano caso um valor tenha sido associado à chave no objeto Map ou não.
-
{{jsxref("Map.prototype.keys()")}}
-
Retorna um novo objeto Iterador que contem as chaves para cada elemento no objeto Map object pela ordem de inserção.
-
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
-
Configura o valor par a chave no objeto Map. Retorna o objeto Map.
-
{{jsxref("Map.prototype.values()")}}
-
Retorna um novo objeto Iterador que contém os valores para cada elemento no objeto Map pela ordem de inserção.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Retorna um novo objeto Iterator que contém um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("13") }}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} -

8

-
-
- -

Veja também

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index 9dd96bc9b3..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Número - - Propriedade - - Prototipo -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

A propriedade Number.prototype representa o protótipo para o construtor {{jsxref("Number")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Todas instâncias {{jsxref("Number")}} herdam de Number.prototype. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.

- -

Propriedades

- -
-
Number.prototype.constructor
-
Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.
-
- -

Métodos

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
Retorna uma 'string' representando o número em notação exponencial.
-
{{jsxref("Number.prototype.toFixed()")}}
-
Retorna uma 'string' representando o número em notação em ponto fixo.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
Retorna uma 'string'  com uma representação sensível ao idioma deste número.  Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.
-
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma objeto literal representando um objeto específicado {{jsxref("Number")}}; você pode usar este valor para criar um novo objeto. Substitui o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Number.prototype.toString()")}}
-
Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentários
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementado em JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
ConfiguraçãoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ConfiguraçãoAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index d0c07076a0..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Objeto - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef("Global_Objects", "Object")}}
- -

Sumário

- -

A propriedade Object.prototype representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.

- -

{{js_property_attributes(0, 0, 0)}}

- -

Descrição

- -

Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de Object.prototype, embora possam ser sobrescritos (exceto um Objeto com protótipo nulo, i.e. Object.create(null)). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.

- -

Modificações no Objeto protótipo do objeto são propagadas a todos objetos através do encadeamento de protótipos, a menos que as propriedades e métodos  submetidos às mudanças sejam sobrescritos mais além no encadeamento dos protótipos. Este recurso oferece um mecânismo muito poderoso apesar de perigoso para sobrescrita e extensão de objetos.

- -

Propriedades

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Especifica a função que cria um objeto protótipo.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.
-
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
-
Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.
-
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
-
Usado para apontar a um contexto do objeto, mas foi removida.
-
- -

Métodos

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Retorna um boolean indicando se um objeto contém a propriedade especificada como uma propriedade direta de um objeto e não herdada através da cadeia de protótipo.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Retorna um boolean indicando se o atributo interno ECMAScript DontEnum attribute está definido.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma string contendo o código de um objeto literal representando o objeto que este método é  chamado; você pode usar este valor para criar um novo objeto.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Chama {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Retorna uma representação do objeto em forma de string.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Remove um ponto de escuta da propriedade do objeto.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Adiciona um ponto de escuta à propriedade do objeto.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.
-
- -

Exemplos

- -

Quando é alterado o comportamento de um método de um Objeto protótipo, considere injetar código envolvendo sua extensão antes ou depois ta lógica existente. Por exemplo, este (não testado) código irá pré-condicionalmente executar uma lógica personalizada antes da lógica embutida ou a extensão de alguém será executada.

- -

Quando uma função é chamada os argumentos para a chamada são segurados no array de argumentos como "variável". Por exemplo, na chamada "minhaFuncao(a, b, c)", os argumentos no corpo da minhaFuncao irão conter 3 elementos array correspondentes a (a, b, c). Quando modificamos os protótipos com ganchos, simplesmente passamos this & a variável arguments (o estado de chamada) para o comportamento atual pela chamada apply() na função. Este padrão pode ser usado por qualquer protótipo, tal como Node.prototype, Function.prototype, etc.

- -
var current = Object.prototype.valueOf;
-
-// Desde que minha propriedade "-prop-value" é transversal e não está
-// sempre na mesma cadeia de protótipo, desejo modificar Object.prototype:
-Object.prototype.valueOf = function() {
-  if (this.hasOwnProperty("-prop-value") {
-    return this["-prop-value"];
-  } else {
-    // Isto não parece com um de meus objetos, então vamos retroceder ao
-    // comportamento padrão para reproduzir o comportamento atual o que
-    // pudermos. O apply se comporta como o"super" em outras linguagens.
-    // Mesmo que valueOf() não receba argumentos, alguns outros ganchos podem.
-    return current.apply(this, arguments);
-  }
-}
- -

Desde que JavaScript não tem exatamente objetos de subclasse, protótipo é uma forma usual de trabalhar para fazer um objeto "classe base" de certas funções que agem como objetos. Por exemplo:

- -
var Person = function() {
-  this.canTalk = true;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log('Hi, I\'m ' + this.name);
-    }
-  };
-};
-
-var Employee = function(name, title) {
-  this.name = name;
-  this.title = title;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log("Hi, I'm " + this.name + ", the " + this.title);
-    }
-  };
-};
-Employee.prototype = new Person();
-
-var Customer = function(name) {
-  this.name = name;
-};
-Customer.prototype = new Person();
-
-var Mime = function(name) {
-  this.name = name;
-  this.canTalk = false;
-};
-Mime.prototype = new Person();
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-bob.greet();
-joe.greet();
-rg.greet();
-mike.greet();
-mime.greet();
-
- -

O retorno será:

- -
Hi, I'm Bob, the Builder
-Hi, I'm Joe
-Hi, I'm Red Green, the Handyman
-Hi, I'm Mike
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesSituaçãoComentário
ECMAScript 1st Edition. Implemented in JavaScript 1.0.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilidade com Navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
AspectoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
AspectoAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico.{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index d0be3d870c..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -
{{JSRef("Global_Objects", "Promise")}}
- -

Sumário

- -

A propriedade Promise.prototype representa o protótipo para o construtor {{jsxref("Promise")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos  para todas as instâncias de Promise.

- -

Propriedades

- -
-
Promise.prototype.constructor
-
Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.
-
- -

Métodos

- -
-
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
-
Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.
-
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
-
Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.
-
- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support32{{CompatGeckoDesktop(24.0)}} as Future
- {{CompatGeckoDesktop(25.0)}} as Promise behind a flag[1]
- {{CompatGeckoDesktop(29.0)}} by default		{{CompatNo}}197.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(24.0)}} as Future
- {{CompatGeckoMobile(25.0)}} as Promise behind a flag[1]
- {{CompatGeckoMobile(29.0)}} by default		{{CompatNo}}{{CompatNo}}iOS 832
-
- -

[1] Gecko 24 has an experimental implementation of Promise, under the initial name of Future. It got renamed to its final name in Gecko 25, but disabled by default behind the flag dom.promise.enabled. Bug 918806 enabled Promises by default in Gecko 29.

- -

See also

- -
    -
  • {{jsxref("Promise")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html deleted file mode 100644 index 1f2ca2c70b..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype -tags: - - Propriedade - - Prototipo - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -
{{JSRef}}
- -

A propriedade Set.prototype representa o protótipo do construtor do objeto {{jsxref("Set")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias de {{jsxref("Set")}} herdam de {{jsxref("Set.prototype")}}. Você pode usar o construtor do objeto protótipo para adicionar propriedades ou métodos para todas as instâncias de Set .

- -

Propriedades

- -
-
Set.prototype.constructor
-
Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.
-
{{jsxref("Set.prototype.size")}}
-
Retorna o número de valores no objeto Set.
-
- -

Métodos

- -
-
{{jsxref("Set.add", "Set.prototype.add(value)")}}
-
Anexa um novo elemento com o valor passado ao objeto Set . Retorna o objeto Set.
-
{{jsxref("Set.prototype.clear()")}}
-
Remove todos os elementos do objeto Set.
-
{{jsxref("Set.delete", "Set.prototype.delete(value)")}}
-
Remove o elemento associado ao value e retorna o valor que Set.prototype.has(value) teria retornado anteriormente. Set.prototype.has(value) irá retornar false depois disso.
-
{{jsxref("Set.prototype.entries()")}}
-
Retorna um novo objeto Iterator que contém um array de [value, value] para cada elemento no objeto Set , em ordem de inserção. Isso é similar ao objeto Map, para que cada entrada tenha o mesmo valor para sua chave evalor aqui.
-
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
-
Chama callbackFn uma vez para cada valor presente no objeto Set, em ordem de inserção. Se um parâmetro thisArg for passado para o forEach, ele será usado como valor de this para cada callback.
-
{{jsxref("Set.has", "Set.prototype.has(value)")}}
-
Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto Set ou não.
-
{{jsxref("Set.prototype.keys()")}}
-
É a mesma função que a função values() e retorna um novo objeto Iterator que contém os valores para cada elemento no objeto Set  em ordem de inserção.
-
{{jsxref("Set.prototype.values()")}}
-
Retorna um novo objeto Iterator que contém os values para cada elemento no objeto Set  em ordem de inserção.
-
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
-
Retorna um novo objeto Iterator que contém os values para cada elemento do objeto Set em ordem de inserção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- - - -

{{Compat("javascript.builtins.Set.prototype")}}

- -

Veja também

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index a0df7b93ea..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

A String.prototype representa o prototipo de objeto  {{jsxref("String")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Todas as instâncias {{jsxref("String")}} herdam de String.prototype. Alterações na String são propagadas para todas as instâncias {{jsxref("String")}}.

- -

Propriedades

- -
-
String.prototype.constructor
-
Especifica a função que cria o protótipo de um objeto.
-
{{jsxref("String.prototype.length")}}
-
Reflete o comprimento da string.
-
N
-
Usado para acessar o caractere na posição N onde N é um número inteiro entre 0 e um menor que o valor da length. Estas propriedades são apenas de leitura.
-
- -

Métodos

- -

Métodos não relacionados ao HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Retorna um número que é o valor da unidade de código UTF-16 em dado índice.
-
{{jsxref("String.prototype.codePointAt()")}}
-
Retorna um número inteiro não negativo Number que é o valor de posição de código da posição de código inicial em dado índice.
-
{{jsxref("String.prototype.concat()")}}
-
Combina o texto de duas strings e retorna uma nova string.
-
{{jsxref("String.prototype.includes()")}}
-
 Determina se uma string deve ser encontrada dentro de outra string.
-
{{jsxref("String.prototype.endsWith()")}}
-
Determina se uma string termina com os caracteres de outra string.
-
{{jsxref("String.prototype.indexOf()")}}
-
Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Retorna um número indicando se uma string de referência vem antes ou depois ou é o mesmo que uma string dada em ordem de classificação.
-
{{jsxref("String.prototype.match()")}}
-
Usado para combinar uma expressão regular com uma string.
-
{{jsxref("String.prototype.normalize()")}}
-
Retorna o Formulário de Normalização Unicode do valor string chamado.
-
{{jsxref("String.prototype.padEnd()")}}
-
Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.
-
{{jsxref("String.prototype.padStart()")}}
-
Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Envolve a cadeia entre aspas duplas ("" ").
-
{{jsxref("String.prototype.repeat()")}}
-
Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.
-
{{jsxref("String.prototype.replace()")}}
-
Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.
-
{{jsxref("String.prototype.search()")}}
-
Executa a procura por uma combinação entre uma expressão regular e uma string especificada.
-
{{jsxref("String.prototype.slice()")}}
-
Extrai uma seção de uma string e retorna uma nova string.
-
{{jsxref("String.prototype.split()")}}
-
Separa um objeto String em um array de strings separando a string em substrings.
-
{{jsxref("String.prototype.startsWith()")}}
-
Determina se uma string começa com os caracteres de outra string.
-
{{jsxref("String.prototype.substr()")}}
-
Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.
-
{{jsxref("String.prototype.substring()")}}
-
Retorna os caracteres em uma string entre dois índices na string.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
Os caracteres dentro de uma string são convertidos para letras minúsculas enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toLowerCase().
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
Os caracteres dentro de uma string são convertidas para letra maiúscula enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toUpperCase().
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Retorna o valor da string de chamada convertido em minúsculas.
-
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna um objeto literal representando o objeto especificado; Você pode usar esse valor para criar um novo objeto. Substitui o metodo:{{jsxref("Object.prototype.toSource()")}}
-
{{jsxref("String.prototype.toString()")}}
-
Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Retorna o valor da string de chamada convertido em maiúscula.
-
{{jsxref("String.prototype.trim()")}}
-
Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.
-
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
-
Retira o espaço em branco do lado esquerdo da string.
-
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
-
Retira o espaço em branco do lado esquerdo da string.
-
{{jsxref("String.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} 
-
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}
-
Retorna um novo objeto  Iterator que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.
-
- -

Métodos de envoltório HTML

- -

Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.

- -
-
{{jsxref("String.prototype.anchor()")}}
-
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (alvo hipertexto)
-
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
-
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
-
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
-
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
-
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}}
-
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link para URL)
-
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
-
{{HTMLElement("sup")}}
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacoesStatusComentarios
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade entre browsers

- - - -

{{Compat("javascript.builtins.String.prototype")}}

- -

Veja também 

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index c3e0334a3b..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -
{{JSRef("Global_Objects", "WeakMap")}}
- -

Sumário

- -

A propriedade WeakMap.prototype representa o prototype fara o construtor {{jsxref("WeakMap")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto prototype do construtor para adicionar propriedades ou métodos para todas as instâncias WeakMap.

- -

Propriedades

- -
-
WeakMap.prototype.constructor
-
Retorna a função construtora das instâncias, neste caso a própria {{jsxref("WeakMap")}}.
-
- -

Metodos

- -
-
{{jsxref("WeakMap.prototype.clear()")}}
-
Remove todos os pares chave/valor do objeto WeakMap
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
-
Remove qualquer valor associado à  key. WeakMap.prototype.has(key) e retorna false após.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
-
Retorna o valor associado a key, ou undefined se nenhum existir.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
-
Retorna um Boolean verificando se há algum valor associado a key no objeto WeakMap ou não.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
-
Configura um valor para key no objeto WeakMap. Retorna undefined.
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Especificação inicial.
- -

Compatibilidade de browsers 

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (SpiderMonkey)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}11{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (SpiderMonkey)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Notas para o Chrome

- -
    -
  • O recurso é ativado por preferência. Em chrome://flags ative "Enable Experimental JavaScript".
    • -
- -

Veja também

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html b/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index 4ca87eaddd..0000000000 --- a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Arithmetic operators -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -tags: - - JavaScript - - Operadores -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
{{jsSidebar("Operadores")}}
- -

Operadores aritméticos tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).

- -

Adição (+)

- -

O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.

- -

Sintaxe

- -
Operador: x + y
-
- -

Exemplos

- -
// Número + Número -> adição
-1 + 2 // 3
-
-// Booleano + Número -> adição
-true + 1 // 2
-
-// Booleano + Booleano -> adição
-false + false // 0
-
-// Número + String -> concatenação
-5 + "foo" // "5foo"
-
-// String + Booleano -> concatenação
-"foo" + false // "foofalse"
-
-// String + String -> concatenação
-"foo" + "bar" // "foobar"
-
- -

Subtração (-)

- -

O operador de subtração subtrai os dois operandos, produzindo sua diferença.

- -

Sintaxe

- -
Operador: x - y
-
- -

Exemplos

- -
5 - 3 // 2
-3 - 5 // -2
-"foo" - 3 // NaN
- -

Divisão (/)

- -

O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.

- -

Sintaxe

- -
Operador: x / y
-
- -

Exemplos

- -
1 / 2      // retorna 0.5 em JavaScript
-1 / 2      // retorna 0 em Java
-// (nenhum dos números é explicitamente um número de ponto flutuante)
-
-1.0 / 2.0  // retorna 0.5 em JavaScript e Java
-
-2.0 / 0    // retorna Infinity em JavaScript
-2.0 / 0.0  // retorna Infinity também
-2.0 / -0.0 // retorna -Infinity em JavaScript
- -

Multiplicação (*)

- -

O operador de multiplicação produz o produto dos operandos.

- -

Sintaxe

- -
Operador: x * y
-
- -

Exemplos

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-"foo" * 2 // NaN
-
- -

Módulo (%)

- -

O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.

- -

Sintaxe

- -
Operador: var1 % var2
-
- -

Examples

- -
12 % 5 // 2
--1 % 2 // -1
-NaN % 2 // NaN
-
- -

Exponenciação (**)

- -

O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que var1var2, onde var1 e var2 são variáveis. O operador de exponenciação é associativo à direita, ou seja, a ** b ** c é igual a a ** (b ** c).

- -

Sintaxe

- -
Operador: var1 ** var2
-
- -

Notas

- -

Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e  -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (+/-/~/!/delete/void/typeof) imediatamente antes do número base.

- -
-2 ** 2;
-// 4 no Bash, -4 em outras linguagens.
-// Isso é inválido no JavaScript, pois a operação é ambígua.
-
-
--(2 ** 2);
-// -4 no JavaScript e a intenção do autor não é ambígua.
-
- -

Exemplos

- -
2 ** 3 // 8
-3 ** 2 // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-
-2 ** 3 ** 2 // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
-
- -

Para inverter o sinal do resultado de uma expressão de exponenciação:

- -
-(2 ** 2) // -4
-
- -

Para forçar a base de uma expressão de exponenciação para ser um número negativo:

- -
(-2) ** 2 // 4
-
- -
-

Nota: JavaScript também tem  um operador de lógica binária ^ (XOR). ** e ^ são diferentes (por exemplo : 2 ** 3 === 8 enquanto 2 ^ 3 === 1.)

-
- -

Incremento (++)

- -

O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;

- -
    -
  • Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.
    • -
  • Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.
    • -
- -

Sintaxe

- -
Operador: x++ or ++x
-
- -

Exemplos

- -
// Posfixo
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefixo
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Decremento (--)

- -

O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.

- -
    -
  • Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.
    • -
  • Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.
    • -
- -

Sintaxe

- -
Operador: x-- or --x
-
- -

Exemplos

- -
// Posfixo
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefixo
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Negação Unária (-)

- -

O operador de negação unária precede seu operando e o nega.

- -

Sintaxe

- -
Operador: -x
-
- -

Exemplos

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
- -

Soma Unária (+)

- -

O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string true, false, e null. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará NaN.

- -

Sintaxe

- -
Operador: +x
-
- -

Exemplos

- -
+3     // 3
-+"3"   // 3
-+true  // 1
-+false // 0
-+null  // 0
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
ECMAScript 1ª Edição.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
{{SpecName('ES6', '#sec-postfix-expressions')}}{{Spec2('ES6')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
- -

Compatibilidade com Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html b/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html deleted file mode 100644 index 6b1a100b4b..0000000000 --- a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html +++ /dev/null @@ -1,445 +0,0 @@ ---- -title: Atribuição via desestruturação (destructuring assignment) -slug: Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -
{{jsSidebar("Operators")}}
- -

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.

- -

Sintaxe

- -
var a, b, rest;
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2
-
-[a, b, ...rest] = [1, 2, 3, 4, 5];
-console.log(a); // 1
-console.log(b); // 2
-console.log(rest); // [3, 4, 5]
-
-({a, b} = {a:1, b:2});
-console.log(a); // 1
-console.log(b); // 2
-
-// ES2016 - não implementado em Firefox 47a01
-({a, b, ...rest} = {a:1, b:2, c:3, d:4});
-
- -

Descrição

- -

As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes ad hoc de dados .

- -
var x = [1, 2, 3, 4, 5];
- -

A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem.

- -
var x = [1, 2, 3, 4, 5];
-var [y, z] = x;
-console.log(y); // 1
-console.log(z); // 2
-
- -

Esse recurso é semelhante aos recursos presentes em linguagens como Perl e Python.

- -

Desestruturação de array

- -

Atribuição básica de variável

- -
var foo = ["one", "two", "three"];
-
-var [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-
- -

Atribuição separada da declaração

- -

Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.

- -
var a, b;
-
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2
-
- -

Valores padrão

- -

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.

- -
var a, b;
-
-[a=5, b=7] = [1];
-console.log(a); // 1
-console.log(b); // 7
-
- -

Trocando variáveis

- -

Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.

- -

Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o Algoritmo XOR Swap).

- -
var a = 1;
-var b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
-
- -

Analisando um array retornado de uma função

- -

Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno do tipo array.

- -

Neste exemplo, f() returna os valores [1, 2] como saída, que podem ser analisados em uma única linha com desestruturação.

- -
function f() {
-  return [1, 2];
-}
-
-var a, b;
-[a, b] = f();
-console.log(a); // 1
-console.log(b); // 2
-
- -

Ignorando alguns valores retornados

- -

Você pode ignorar valores retornados que você não tem interesse:

- -
function f() {
-  return [1, 2, 3];
-}
-
-var [a, , b] = f();
-console.log(a); // 1
-console.log(b); // 3
-
- -

Você também pode ignorar todos os valores retornados:

- -
[,,] = f();
-
- -

Atribuindo o resto de um array para uma variável

- -

Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:

- -
var [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]
- -

Extraindo valores do resultado de uma expressão regular

- -

Quando o método de expressão regular exec() encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.

- -
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
-
-var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
-
-var [, protocol, fullhost, fullpath] = parsedURL;
-
-console.log(protocol); // "https"
-
- -

Desestruturação de objeto

- -

Atribuição básica

- -
var o = {p: 42, q: true};
-var {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-
- -

Atribuição sem declaração

- -

Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.

- -
var a, b;
-
-({a, b} = {a:1, b:2});
- -
-

Os parênteses ( ... ) ao redor da declaração de atribuição é uma sintaxe necessária  quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração.

- -

{a, b} = {a:1, b:2} não é uma sintaxe stand-alone válida, pois {a, b} no lado esquerdo é considarada um bloco, não um objeto literal.

- -

No entanto, ({a, b} = {a:1, b:2}) é valida, assim como var {a, b} = {a:1, b:2}

-
- -

Atribuição para variáveis com novos nomes

- -

Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.

- -
var o = {p: 42, q: true};
-var {p: foo, q: bar} = o;
-
-console.log(foo); // 42
-console.log(bar); // true  
- -

Valores padrão

- -

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.

- -
var {a=10, b=5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5
- -

Definindo um valor padrão de parâmetro de função

- -

Versão ES5

- -
function drawES5Chart(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, cords, radius);
-  // now finally do some chart drawing
-}
-
-drawES5Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -

Versão ES2015

- -
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
-  console.log(size, cords, radius);
-  // do some chart drawing
-}
-
-drawES2015Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -

Objeto aninhado e desestruturação de array

- -
var metadata = {
-    title: "Scratchpad",
-    translations: [
-       {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-       }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"
- -

For de iteração e desestruturação

- -
var people = [
-  {
-    name: "Mike Smith",
-    family: {
-      mother: "Jane Smith",
-      father: "Harry Smith",
-      sister: "Samantha Smith"
-    },
-    age: 35
-  },
-  {
-    name: "Tom Jones",
-    family: {
-      mother: "Norah Jones",
-      father: "Richard Jones",
-      brother: "Howard Jones"
-    },
-    age: 25
-  }
-];
-
-for (var {name: n, family: { father: f } } of people) {
-  console.log("Name: " + n + ", Father: " + f);
-}
-
-// "Name: Mike Smith, Father: Harry Smith"
-// "Name: Tom Jones, Father: Richard Jones"
- -

Extraindo campos de objetos passados como parâmetro de função

- -
function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " is " + name);
-}
-
-var user = {
-  id: 42,
-  displayName: "jdoe",
-  fullName: {
-      firstName: "John",
-      lastName: "Doe"
-  }
-};
-
-console.log("userId: " + userId(user)); // "userId: 42"
-whois(user); // "jdoe is John"
- -

Isso extrai o id, displayName e firstName do objeto user e os imprime na tela.

- -

Nomes computados de propriedade de objeto e desestruturação

- -

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.

- -
let key = "z";
-let { [key]: foo } = { z: "bar" };
-
-console.log(foo); // "bar"
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspeficiaçãoSituaçãoComentário
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
- -

Compatibilidade do navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
-

Suporte básico

- 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("1.8.1") }}14{{CompatNo}}{{CompatNo}}7.1
-

Nomes computados de propriedades

- 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}14{{CompatNo}}{{CompatNo}}{{CompatNo}}
Operador spread{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}12[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome(49.0)}}
Nomes computados de propriedades{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49.0)}}
Operador spread{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
-
- -

[1] Requer "Enable experimental Javascript features" para funciona sob `about:flags`

- -

Notas específicas do Firefox

- -
    -
  • O Firefox forneceu uma extensão não-padronizada de linguagem em JS1.7 para desestruturação. Esta extensão foi removida no Gecko 40 {{geckoRelease (40)}}. Consulte {{bug (1083498)}}.
    • -
  • A partir do Gecko 41 {{geckoRelease (41)}} e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, agora são considerados inválidos e lançarão um {{jsxref ( "SyntaxError")}}. Veja a postagem no blog de Jeff Walden e {{bug (1146136)}} para mais detalhes.
    • -
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html b/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html deleted file mode 100644 index b8b2e654c4..0000000000 --- a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html +++ /dev/null @@ -1,559 +0,0 @@ ---- -title: Bitwise operators -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -
- -
Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.
- -
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
- - - -

A seguinte tabela resume os Operadores bit-a-bit:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUsoDescrição
Bitwise ANDa & bRetorna 1 em cada posição de bit para à qual o bit correspondente de ambos eram 1s.
Bitwise ORa | b -

Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram 1s.

-
Bitwise XORa ^ bRetorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram 1s.
Bitwise NOT~ aInverte os bits de seus operandos.
Left shifta << bJogam a  em representação binária b (< 32) bits à esquerda, mudando de zeros à diretia.
Sign-propagating right shifta >> bJogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off.
Zero-fill right shifta >>> b  Jogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off, e jogando 0s para à esquerda.
- -

Inteiros assinados em 32-bit

- -

Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:

- -
00000000000000000000000100111010
-
- -

Os seguintes encodes ~314, i.e. são os únicos complementos de  314:

- -
11111111111111111111111011000101
-
- -

Finalmente, os seguintes encodes -314, i.e. são dois complementos de 314:

- -
11111111111111111111111011000110
-
- -

As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de sign bit ou bit assinalado.

- -

O número 0 é o inteiro composto completamente de 0 bits.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
- -

O número -1 é o inteiro que é composto completamente de 1 bits.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

O número -2147483648 (representação hexadecimal: -0x80000000) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

O número 2147483647 (representação hexadecimal: 0x7fffffff) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

Os números -2147483648 e 2147483647 são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.

- -

Operadores lógico bit-abit

- -

Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:

- -
    -
  • Os operandos são convertidos para inteiros de 32 bits e expressados em uma série de bits (zeros e ums). Números com mais de 32 bits têm seus bits mais significativos descartados. Por exemplo, o inteiro com mais de 32 bits a seguir será convertido para um inteiro de 32 bits: - 
    Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001
    -
    • -
  • Cada bit no primeiro operando é pareado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.
    • -
  • O operador é aplicado para cada par de bits e o resultado é construído bit a bit.
    • -
- -

& (Bitwise AND)

- -

Performa a operação AND em cada par de bits. a AND b retorna 1, apenas quando a e b são 1. A tabela verdade para a operação AND é:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba AND b
000
010
100
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-
- -

Performar a operação AND bit-a-bit de qualquer número x com 0 retornará 0. Performar a operação AND bit-a-bit de qualquer número x com -1 retornará x.

- -

| (Bitwise OR)

- -

Performa a operação OR em cada par de bits. a OR b retorna 1 se pelo menos a ou pelo menos b é 1. As tabela versão para a operação OR é:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OR b
000
011
101
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-
- -

Performar a operação OR de qulalquer número x com 0 retornará 0. Performar a operação OR de qualquer número X com -1 retornará -1.

- -

^ (Bitwise XOR)

- -

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-
- -

Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.

- -

~ (Bitwise NOT)

- -

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

- - - - - - - - - - - - - - - - -
aNOT a
01
10
- -
 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-
- -

Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.

- -

Note that due to using 32-bit representation for numbers both ~-1 and ~4294967295 (232-1) results in 0.

- -

Operadores de deslocamento bit a bit

- -

The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.

- -

Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.

- -

<< (Left shift)

- -

This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

- -

For example, 9 << 2 yields 36:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-
- -

Bitwise shifting any number x to the left by y bits yields x * 2 ** y.

- -

>> (Sign-propagating right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

- -

For example, 9 >> 2 yields 2:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Likewise, -9 >> 2 yields -3, because the sign is preserved:

- -
.    -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-
- -

>>> (Zero-fill right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.

- -

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

- -
.     9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

- -
.     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-
- -

Examples

- -

Flags and bitmasks

- -

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).

- -

Suppose there are 4 flags:

- -
    -
  • flag A: we have an ant problem
    • -
  • flag B: we own a bat
    • -
  • flag C: we own a cat
    • -
  • flag D: we own a duck
    • -
- -

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

- -
var flags = 5;   // binary 0101
-
- -

This value indicates:

- -
    -
  • flag A is true (we have an ant problem);
    • -
  • flag B is false (we don't own a bat);
    • -
  • flag C is true (we own a cat);
    • -
  • flag D is false (we don't own a duck);
    • -
- -

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

- -

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask masks out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:

- -
// if we own a cat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // do stuff
-}
-
- -

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

- -
// if we own a bat or we own a cat
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // do stuff
-}
-
- -
// if we own a bat or cat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-
- -

Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:

- -
// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:

- -
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

- -
// no, we don't have an ant problem, and we don't own a cat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:

- -
// if we didn't have a bat, we have one now,
-// and if we did have one, bye-bye bat
-// same thing for cats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finally, the flags can all be flipped with the NOT operator:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Conversion snippets

- -

Convert a binary String to a decimal Number:

- -
var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

Convert a decimal Number to a binary String:

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Automate Mask Creation

- -

You can create multiple masks from a set of Boolean values, like this:

- -
function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-
- -

Reverse algorithm: an array of booleans from a mask

- -

If you want to create an Array of Booleans from a mask you can use this code:

- -
function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

You can test both algorithms at the same time…

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

For the didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a String containing the binary representation of a Number, rather than an Array of Booleans:

- -
function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.bitwise")}}

- -

See also

- - diff --git a/files/pt-br/web/javascript/reference/operators/comma_operator/index.html b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..be374104d0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,102 @@ +--- +title: Operador Vírgula +slug: Web/JavaScript/Reference/Operators/Operador_Virgula +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
+ {{jsSidebar("Operators")}}
+

Sumário

+

o operador vírgula avalia o valor de seus operandos (da esquerda para a direita) e retorna o valor do último operando.

+

Sintaxe

+
expr1, expr2, expr3...
+

Parameters

+
+
+ expr1, expr2, expr3...
+
+ Quaisquer expressões.
+
+

Descrição

+

Você pode usar o operador vírgula quando desejar incluir múltiplas expressões em um lugar que requer uma única expressão. O uso mais comum desse operador é suprir múltiplos parâmetros em um loop for.

+

Exemplo

+

Se a é um array de 2 dimensões com 10 elementos de um lado, o seguinte código usa o operador vírgula para incrementar duas variáveis mutuamente. Note que a vírgula na declaração var não é o operador vírgula, porque ele não existe dentro de uma expressão. Além disso, ela é uma caractere especial nas declarações var para combinar múltiplas delas em uma única. Embora praticamente a vírgula comporte-se quase que igualmente ao operador vírgula. O código imprime os valores dos elementos diagonais da matriz:

+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
+
+

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
1ª Edição ECMAScript.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
+

Compatibilidade de Navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

Veja também

+ diff --git a/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..9b36afca80 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,171 @@ +--- +title: Operador Condicional Ternário +slug: Web/JavaScript/Reference/Operators/Operador_Condicional +tags: + - JavaScript + - Operadores Condicionais +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Sumário

+ +

O operador condicional (ternário) é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução if.

+ +

Sintaxe

+ +
condition ? expr1 : expr2
+ +

Parâmetros

+ +
+
condition
+
Uma expressão que é avaliada como true ou false.
+
+ +
+
expr1, expr2
+
Expressões com valores de qualquer tipo.
+
+ +

Descrição

+ +

Se condition é true, o operador retornará o valor de expr1; se não, ele retorna o valor de exp2. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável isMember, você poderá utilizar o código (statement) seguinte:

+ +
"The fee is " + (isMember ? "$2.00" : "$10.00")
+
+ +

Conforme o resultado da operação, você também poderá atribuir a variáveis:

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):

+ +
var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"
+ +

Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

Você também pode fazer mais do que uma única operação em cada caso, separando-os por vírgula:

+ +
var stop = false, age = 23;
+
+age > 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+
+ +

Você também pode fazer mais de uma operação durante a atribuição de um valor. Neste caso, o último valor separado por vírgula dentro dos parênteses será o valor a ser atribuído.

+ +
var age = 16;
+
+var url = age > 18 ? (
+    alert("OK, you can go."),
+    // alert returns "undefined", but it will be ignored because
+    // isn't the last comma-separated value of the parenthesis
+    "continue.html" // the value to be assigned if age > 18
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // the value to be assigned if !(age > 18)
+);
+
+location.assign(url); // "stop.html"
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentários
ECMAScript 1st Edition.StandardDefinição inicial. Implementado em JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilidade dos navegadores (browser)

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..6b1a100b4b --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,445 @@ +--- +title: Atribuição via desestruturação (destructuring assignment) +slug: Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.

+ +

Sintaxe

+ +
var a, b, rest;
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+[a, b, ...rest] = [1, 2, 3, 4, 5];
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // [3, 4, 5]
+
+({a, b} = {a:1, b:2});
+console.log(a); // 1
+console.log(b); // 2
+
+// ES2016 - não implementado em Firefox 47a01
+({a, b, ...rest} = {a:1, b:2, c:3, d:4});
+
+ +

Descrição

+ +

As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes ad hoc de dados .

+ +
var x = [1, 2, 3, 4, 5];
+ +

A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem.

+ +
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

Esse recurso é semelhante aos recursos presentes em linguagens como Perl e Python.

+ +

Desestruturação de array

+ +

Atribuição básica de variável

+ +
var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+
+ +

Atribuição separada da declaração

+ +

Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.

+ +
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Valores padrão

+ +

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.

+ +
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+
+ +

Trocando variáveis

+ +

Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.

+ +

Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o Algoritmo XOR Swap).

+ +
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+ +

Analisando um array retornado de uma função

+ +

Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno do tipo array.

+ +

Neste exemplo, f() returna os valores [1, 2] como saída, que podem ser analisados em uma única linha com desestruturação.

+ +
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Ignorando alguns valores retornados

+ +

Você pode ignorar valores retornados que você não tem interesse:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+
+ +

Você também pode ignorar todos os valores retornados:

+ +
[,,] = f();
+
+ +

Atribuindo o resto de um array para uma variável

+ +

Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:

+ +
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Extraindo valores do resultado de uma expressão regular

+ +

Quando o método de expressão regular exec() encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.

+ +
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // "https"
+
+ +

Desestruturação de objeto

+ +

Atribuição básica

+ +
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+ +

Atribuição sem declaração

+ +

Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.

+ +
var a, b;
+
+({a, b} = {a:1, b:2});
+ +
+

Os parênteses ( ... ) ao redor da declaração de atribuição é uma sintaxe necessária  quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração.

+ +

{a, b} = {a:1, b:2} não é uma sintaxe stand-alone válida, pois {a, b} no lado esquerdo é considarada um bloco, não um objeto literal.

+ +

No entanto, ({a, b} = {a:1, b:2}) é valida, assim como var {a, b} = {a:1, b:2}

+
+ +

Atribuição para variáveis com novos nomes

+ +

Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.

+ +
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  
+ +

Valores padrão

+ +

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.

+ +
var {a=10, b=5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Definindo um valor padrão de parâmetro de função

+ +

Versão ES5

+ +
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // now finally do some chart drawing
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

Versão ES2015

+ +
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // do some chart drawing
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

Objeto aninhado e desestruturação de array

+ +
var metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

For de iteração e desestruturação

+ +
var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+ +

Extraindo campos de objetos passados como parâmetro de função

+ +
function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"
+ +

Isso extrai o id, displayName e firstName do objeto user e os imprime na tela.

+ +

Nomes computados de propriedade de objeto e desestruturação

+ +

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.

+ +
let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspeficiaçãoSituaçãoComentário
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
+

Suporte básico

+ 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("1.8.1") }}14{{CompatNo}}{{CompatNo}}7.1
+

Nomes computados de propriedades

+ 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}14{{CompatNo}}{{CompatNo}}{{CompatNo}}
Operador spread{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}12[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome(49.0)}}
Nomes computados de propriedades{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49.0)}}
Operador spread{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

[1] Requer "Enable experimental Javascript features" para funciona sob `about:flags`

+ +

Notas específicas do Firefox

+ +
    +
  • O Firefox forneceu uma extensão não-padronizada de linguagem em JS1.7 para desestruturação. Esta extensão foi removida no Gecko 40 {{geckoRelease (40)}}. Consulte {{bug (1083498)}}.
    • +
  • A partir do Gecko 41 {{geckoRelease (41)}} e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, agora são considerados inválidos e lançarão um {{jsxref ( "SyntaxError")}}. Veja a postagem no blog de Jeff Walden e {{bug (1146136)}} para mais detalhes.
    • +
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html b/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html deleted file mode 100644 index ac59b4e7f8..0000000000 --- a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Inicializador de Objeto -slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto -tags: - - ECMAScript 2015 - - JSON - - JavaScript - - Literal - - Métodos - - Objeto - - Propriedades - - mutação -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operadores")}}
- -

Objetos podem ser inicializados utilizando new Object(), Object.create(), ou a notação literal. Um inicializador de objetos é uma lista de zero ou mais pares de propriedade: valor, separados por vírgula e fechado por um par de chaves ({}).

- -

Sintaxe

- -
var o = {};
-var o = { a: "foo", b: 42, c: {} };
-
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  propriedade: function ([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-};
-
- -

Novas notações em ECMAScript 2015

- -

Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.

- -
// // Abreviação em nomes de propriedades (ES2015)
-var a = "foo", b = 42, c = {};
-var o = { a, b, c };
-
-// // Abreviação em nomes de métodos (ES2015)
-var o = {
-  property([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
-
-// Nomes de propriedades computados (ES2015)
-var prop = "foo";
-var o = {
-  [prop]: "hey",
-  ["b" + "ar"]: "there",
-};
- -

Descrição

- -

Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de propriedades, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .

- -

Criando objetos

- -

Um objeto vazio, sem propriedades, pode ser criado como: 

- -
var object = {};
- -

Contudo, a vantagem em utilizar a notação literal ou o inicializador é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves ({}). Você simplesmente cria uma lista de pares chave: valor, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de chave: valor. 

- -
var object = {
-  foo: "bar",
-  age: 42,
-  baz: { myProp: 12 },
-}
- -

Acessando propriedades

- -

Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja assessores de propriedade para mais informações.

- -
object.foo; // "bar"
-object["age"]; // 42
-
-object.foo = "baz";
-
- -

Definições de propriedade

- -

Nós temos aprendido como descrever propriedades utilizando a sintaxe inicializador. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: 

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: 

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-// Abreviação em nomes de propriedades (ES2015)
-var o = { a, b, c };
-
-// Em outras palavras,
-console.log((o.a === { a }.a)); // true
-
- -

Duplicação em nomes de propriedades

- -

Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.

- -
var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-
- -

Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.

- -
function haveES2015DuplicatePropertySemantics(){
-  "use strict";
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // No error thrown, duplicate property names allowed in strict mode
-    return true;
-  } catch (e) {
-    // Error thrown, duplicates prohibited in strict mode
-    return false;
-  }
-}
- -

Definição de métodos

- -

Uma propriedade de um objeto pode se referir à function, ou aos métodos getter ou setter.

- -
var o = {
-  propriedade: function ([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-};
- -

No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".

- -
// Abreviações em nomes de métodos (ES2015)
-var o = {
-  propriedade([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-  * gerador() {}
-};
- -

Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. 

- -
var o = {
-  * gerador() {
-    ...........
-  }
-};
- -

Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):

- -
var o = {
-  generator: function *() {
-    ...........
-  }
-};
- -

Para mais informações e exemplos, veja definições de método.

- -

Nomes de propriedades computados

- -

Começando com ECMAScript 2015, a sintaxe inicializador de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes [], que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em acessor de propriedade, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: 

- -
// Nomes de propriedades computados (ES2015)
-var i = 0;
-var a = {
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i
-};
-
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { size: 12, mobileSize: 4 }
- -

Mutação Prototype 

- -

Uma definição de propriedade na forma de  __proto__: valor or "__proto__": valor não cria uma propriedade com o nome  __proto__.  Inclusive, se o valor fornecido for um objeto ou null, muda o [[Prototype]] do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { "__proto__": protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-
- -

Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. 

- -

Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. 

- -
var __proto__ = "variable";
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty("__proto__"));
-assert(obj1.__proto__ === "variable");
-
-var obj2 = { __proto__() { return "hello"; } };
-assert(obj2.__proto__() === "hello");
-
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-
- -

Notação de objeto literal vs JSON

- -

A notação de objeto literal não é a mesma de JavaScript Object Notation (JSON).  Mesmo que possuam semelhanças, há as seguintes diferenças:

- -
    -
  • JSON permite definições de propriedades utilizando apenas aspas duplas, como  "propriedade": valor.  E a definição não pode ser abreviada.
    • -
  • Os valores JSON podem ser apenas strings, numbers, arrays, true, false, null, ou outro objeto JSON.
    • -
  • Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.
    • -
  • Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.
    • -
  • {{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.
    • -
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter e setter adicionados.
{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES6')}}Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatChrome(1.0)}}{{CompatGeckoDesktop("1.0")}}111
Nomes de propriedades computados{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}7.1
Abreviação em nomes de propriedades{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatChrome(42.0)}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Nomes de propriedades computados{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de propriedades{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..609bfa29fd --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,159 @@ +--- +title: Operador de coalescência nula +slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula +tags: + - JavaScript + - Operador + - Operadores lógicos + - Referencia + - coalescencia nula + - duas interrogações + - nulidade +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{JSSidebar("Operators")}}

+ +

O operador de coalescência nula (??) é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.

+ +

Ao contrário do operador lógico OR (||), o operando esquerdo é retornado se houver um valor falsy (falso) que não seja null ou undefined. Em outras palavras, se você usar || para obter algum valor padrão para outra variável foo, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. '' ou 0). Veja abaixo alguns exemplos:

+ +
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
+ + + +

Sintaxe

+ +
exprEsq ?? exprDir
+
+ +

Descrição

+ +

O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.

+ +

Endereçando um valor padrão à variável

+ +

Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR  (||):

+ +
let foo;
+
+//  foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido
+let someDummyText = foo || 'Hello!';
+ +

Entretanto, devido ao || ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação, e, qualquer valor falseável (0, '', NaN, null, undefined) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar 0, '', or NaN como valores válidos.

+ +
let count = 0;
+let text = "";
+
+let qty = count || 42;
+let message = text || "Olá!";
+console.log(qty);     // 42 e não 0
+console.log(message); // "hi!" e não ""
+
+ +

O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores null ou undefined (mas nehum outro valor falseável):

+ +
let myText = ''; // Uma string vazia (que também é um valor falseável)
+
+let notFalsyText = myText || 'Olá mundo';
+console.log(notFalsyText); // Olá mundo
+
+let preservingFalsy = myText ?? 'Olá vizinhança';
+console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null)
+
+ +

Curto-circuito

+ +

Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre null e nem undefined.

+ +
function A() { console.log('A foi chamado'); return undefined;}
+function B() { console.log('B foi chamado'); return false;}
+function C() { console.log('C foi chamado'); return "foo";}
+
+console.log( A() ?? C() );
+// Imprime "A foi chamado" então "C foi chamado" e por fim "foo"
+// Como A() retornou undefined então ambas expressões foram avaliadas
+
+console.log( B() ?? C() );
+// Imprime "B foi chamado" então "false"
+// Como B() retornou false (e não null ou undefined), a expressão
+// do lado direito não foi avaliada.
+
+ +

Sem encadeamento com os operadores AND e OR

+ +

Não é possível encadear ambos operadores AND (&&) e OR (||) diretamente com o ??. Um SyntaxError será disparado nesse tipo de caso.

+ +
null || undefined ?? "foo"; // Dispara um SyntaxError
+true || undefined ?? "foo"; // Dispara um SyntaxError
+ +

Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:

+ +
(null || undefined) ?? "foo"; // retorna "foo"
+
+ +

Relacionamento com o operador de encadeamento opcional (?.)

+ +

O operador de coalescêcia nula trata undefined e null como valores específicos e então executa o operador de encadeamento opcional (?.) o qual é útil para acessar uma propriedade de um objeto, o qual pode ser null ou undefined.

+ +
let foo = { someFooProp: "oi" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "OI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+
+ +

Exemplo

+ +

Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) null ou undefined.

+ +
const nullValue = null;
+const emptyText = ""; // falseável (falsy)
+const someNumber = 42;
+
+const valA = nullValue ?? "padrão para A";
+const valB = emptyText ?? "padrão para B";
+const valC = someNumber ?? 0;
+
+console.log(valA); // "padrão para A"
+console.log(valB); // "" (pois a string vazia não é null ou undefined)
+console.log(valC); // 42
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatuscomentário
Proposal for the "nullish coalescing" operatorStage 4
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("javascript.operators.nullish_coalescing")}}

+ +

Progresso de implementação

+ +

A seguinte tabela fornece o status diário de implementação para este recurso, porque este recurso ainda não atingiu a estabilidade entre navegadores. Os dados são gerados pela execução de testes de recursos relevantes no Test262, a plataforma de testes padrão do JavaScript, em "edições noturnas", ou último release de cada motor JavaScript dos navegadores.

+ +
{{EmbedTest262ReportResultsTable("coalesce-expression")}}
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/object_initializer/index.html b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..ac59b4e7f8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,392 @@ +--- +title: Inicializador de Objeto +slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Métodos + - Objeto + - Propriedades + - mutação +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operadores")}}
+ +

Objetos podem ser inicializados utilizando new Object(), Object.create(), ou a notação literal. Um inicializador de objetos é uma lista de zero ou mais pares de propriedade: valor, separados por vírgula e fechado por um par de chaves ({}).

+ +

Sintaxe

+ +
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  propriedade: function ([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+};
+
+ +

Novas notações em ECMAScript 2015

+ +

Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.

+ +
// // Abreviação em nomes de propriedades (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// // Abreviação em nomes de métodos (ES2015)
+var o = {
+  property([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+
+// Nomes de propriedades computados (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};
+ +

Descrição

+ +

Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de propriedades, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .

+ +

Criando objetos

+ +

Um objeto vazio, sem propriedades, pode ser criado como: 

+ +
var object = {};
+ +

Contudo, a vantagem em utilizar a notação literal ou o inicializador é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves ({}). Você simplesmente cria uma lista de pares chave: valor, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de chave: valor. 

+ +
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}
+ +

Acessando propriedades

+ +

Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja assessores de propriedade para mais informações.

+ +
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+
+ +

Definições de propriedade

+ +

Nós temos aprendido como descrever propriedades utilizando a sintaxe inicializador. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: 

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: 

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+// Abreviação em nomes de propriedades (ES2015)
+var o = { a, b, c };
+
+// Em outras palavras,
+console.log((o.a === { a }.a)); // true
+
+ +

Duplicação em nomes de propriedades

+ +

Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.

+ +
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+
+ +

Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.

+ +
function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}
+ +

Definição de métodos

+ +

Uma propriedade de um objeto pode se referir à function, ou aos métodos getter ou setter.

+ +
var o = {
+  propriedade: function ([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+};
+ +

No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".

+ +
// Abreviações em nomes de métodos (ES2015)
+var o = {
+  propriedade([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+  * gerador() {}
+};
+ +

Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. 

+ +
var o = {
+  * gerador() {
+    ...........
+  }
+};
+ +

Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):

+ +
var o = {
+  generator: function *() {
+    ...........
+  }
+};
+ +

Para mais informações e exemplos, veja definições de método.

+ +

Nomes de propriedades computados

+ +

Começando com ECMAScript 2015, a sintaxe inicializador de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes [], que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em acessor de propriedade, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: 

+ +
// Nomes de propriedades computados (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }
+ +

Mutação Prototype 

+ +

Uma definição de propriedade na forma de  __proto__: valor or "__proto__": valor não cria uma propriedade com o nome  __proto__.  Inclusive, se o valor fornecido for um objeto ou null, muda o [[Prototype]] do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+
+ +

Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. 

+ +

Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. 

+ +
var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

Notação de objeto literal vs JSON

+ +

A notação de objeto literal não é a mesma de JavaScript Object Notation (JSON).  Mesmo que possuam semelhanças, há as seguintes diferenças:

+ +
    +
  • JSON permite definições de propriedades utilizando apenas aspas duplas, como  "propriedade": valor.  E a definição não pode ser abreviada.
    • +
  • Os valores JSON podem ser apenas strings, numbers, arrays, true, false, null, ou outro objeto JSON.
    • +
  • Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.
    • +
  • Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.
    • +
  • {{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.
    • +
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter e setter adicionados.
{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES6')}}Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatChrome(1.0)}}{{CompatGeckoDesktop("1.0")}}111
Nomes de propriedades computados{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}7.1
Abreviação em nomes de propriedades{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatChrome(42.0)}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Nomes de propriedades computados{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de propriedades{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html b/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html deleted file mode 100644 index 9b36afca80..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Operador Condicional Ternário -slug: Web/JavaScript/Reference/Operators/Operador_Condicional -tags: - - JavaScript - - Operadores Condicionais -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -
{{jsSidebar("Operators")}}
- -

Sumário

- -

O operador condicional (ternário) é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução if.

- -

Sintaxe

- -
condition ? expr1 : expr2
- -

Parâmetros

- -
-
condition
-
Uma expressão que é avaliada como true ou false.
-
- -
-
expr1, expr2
-
Expressões com valores de qualquer tipo.
-
- -

Descrição

- -

Se condition é true, o operador retornará o valor de expr1; se não, ele retorna o valor de exp2. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável isMember, você poderá utilizar o código (statement) seguinte:

- -
"The fee is " + (isMember ? "$2.00" : "$10.00")
-
- -

Conforme o resultado da operação, você também poderá atribuir a variáveis:

- -
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
- -

Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):

- -
var firstCheck = false,
-    secondCheck = false,
-    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
-
-console.log( access ); // logs "Access granted"
- -

Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:

- -
var stop = false, age = 16;
-
-age > 18 ? location.assign("continue.html") : stop = true;
-
- -

Você também pode fazer mais do que uma única operação em cada caso, separando-os por vírgula:

- -
var stop = false, age = 23;
-
-age > 18 ? (
-    alert("OK, you can go."),
-    location.assign("continue.html")
-) : (
-    stop = true,
-    alert("Sorry, you are much too young!")
-);
-
- -

Você também pode fazer mais de uma operação durante a atribuição de um valor. Neste caso, o último valor separado por vírgula dentro dos parênteses será o valor a ser atribuído.

- -
var age = 16;
-
-var url = age > 18 ? (
-    alert("OK, you can go."),
-    // alert returns "undefined", but it will be ignored because
-    // isn't the last comma-separated value of the parenthesis
-    "continue.html" // the value to be assigned if age > 18
-) : (
-    alert("You are much too young!"),
-    alert("Sorry :-("),
-    // etc. etc.
-    "stop.html" // the value to be assigned if !(age > 18)
-);
-
-location.assign(url); // "stop.html"
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentários
ECMAScript 1st Edition.StandardDefinição inicial. Implementado em JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
- -

Compatibilidade dos navegadores (browser)

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html b/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html deleted file mode 100644 index 609bfa29fd..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Operador de coalescência nula -slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula -tags: - - JavaScript - - Operador - - Operadores lógicos - - Referencia - - coalescencia nula - - duas interrogações - - nulidade -translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator ---- -

{{JSSidebar("Operators")}}

- -

O operador de coalescência nula (??) é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.

- -

Ao contrário do operador lógico OR (||), o operando esquerdo é retornado se houver um valor falsy (falso) que não seja null ou undefined. Em outras palavras, se você usar || para obter algum valor padrão para outra variável foo, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. '' ou 0). Veja abaixo alguns exemplos:

- -
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
- - - -

Sintaxe

- -
exprEsq ?? exprDir
-
- -

Descrição

- -

O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.

- -

Endereçando um valor padrão à variável

- -

Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR  (||):

- -
let foo;
-
-//  foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido
-let someDummyText = foo || 'Hello!';
- -

Entretanto, devido ao || ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação, e, qualquer valor falseável (0, '', NaN, null, undefined) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar 0, '', or NaN como valores válidos.

- -
let count = 0;
-let text = "";
-
-let qty = count || 42;
-let message = text || "Olá!";
-console.log(qty);     // 42 e não 0
-console.log(message); // "hi!" e não ""
-
- -

O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores null ou undefined (mas nehum outro valor falseável):

- -
let myText = ''; // Uma string vazia (que também é um valor falseável)
-
-let notFalsyText = myText || 'Olá mundo';
-console.log(notFalsyText); // Olá mundo
-
-let preservingFalsy = myText ?? 'Olá vizinhança';
-console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null)
-
- -

Curto-circuito

- -

Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre null e nem undefined.

- -
function A() { console.log('A foi chamado'); return undefined;}
-function B() { console.log('B foi chamado'); return false;}
-function C() { console.log('C foi chamado'); return "foo";}
-
-console.log( A() ?? C() );
-// Imprime "A foi chamado" então "C foi chamado" e por fim "foo"
-// Como A() retornou undefined então ambas expressões foram avaliadas
-
-console.log( B() ?? C() );
-// Imprime "B foi chamado" então "false"
-// Como B() retornou false (e não null ou undefined), a expressão
-// do lado direito não foi avaliada.
-
- -

Sem encadeamento com os operadores AND e OR

- -

Não é possível encadear ambos operadores AND (&&) e OR (||) diretamente com o ??. Um SyntaxError será disparado nesse tipo de caso.

- -
null || undefined ?? "foo"; // Dispara um SyntaxError
-true || undefined ?? "foo"; // Dispara um SyntaxError
- -

Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:

- -
(null || undefined) ?? "foo"; // retorna "foo"
-
- -

Relacionamento com o operador de encadeamento opcional (?.)

- -

O operador de coalescêcia nula trata undefined e null como valores específicos e então executa o operador de encadeamento opcional (?.) o qual é útil para acessar uma propriedade de um objeto, o qual pode ser null ou undefined.

- -
let foo = { someFooProp: "oi" };
-
-console.log(foo.someFooProp?.toUpperCase());  // "OI"
-console.log(foo.someBarProp?.toUpperCase()); // undefined
-
- -

Exemplo

- -

Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) null ou undefined.

- -
const nullValue = null;
-const emptyText = ""; // falseável (falsy)
-const someNumber = 42;
-
-const valA = nullValue ?? "padrão para A";
-const valB = emptyText ?? "padrão para B";
-const valC = someNumber ?? 0;
-
-console.log(valA); // "padrão para A"
-console.log(valB); // "" (pois a string vazia não é null ou undefined)
-console.log(valC); // 42
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatuscomentário
Proposal for the "nullish coalescing" operatorStage 4
- -

Compatibilidade de navegadores

- - - -

{{Compat("javascript.operators.nullish_coalescing")}}

- -

Progresso de implementação

- -

A seguinte tabela fornece o status diário de implementação para este recurso, porque este recurso ainda não atingiu a estabilidade entre navegadores. Os dados são gerados pela execução de testes de recursos relevantes no Test262, a plataforma de testes padrão do JavaScript, em "edições noturnas", ou último release de cada motor JavaScript dos navegadores.

- -
{{EmbedTest262ReportResultsTable("coalesce-expression")}}
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html b/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html deleted file mode 100644 index be374104d0..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Operador Vírgula -slug: Web/JavaScript/Reference/Operators/Operador_Virgula -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
- {{jsSidebar("Operators")}}
-

Sumário

-

o operador vírgula avalia o valor de seus operandos (da esquerda para a direita) e retorna o valor do último operando.

-

Sintaxe

-
expr1, expr2, expr3...
-

Parameters

-
-
- expr1, expr2, expr3...
-
- Quaisquer expressões.
-
-

Descrição

-

Você pode usar o operador vírgula quando desejar incluir múltiplas expressões em um lugar que requer uma única expressão. O uso mais comum desse operador é suprir múltiplos parâmetros em um loop for.

-

Exemplo

-

Se a é um array de 2 dimensões com 10 elementos de um lado, o seguinte código usa o operador vírgula para incrementar duas variáveis mutuamente. Note que a vírgula na declaração var não é o operador vírgula, porque ele não existe dentro de uma expressão. Além disso, ela é uma caractere especial nas declarações var para combinar múltiplas delas em uma única. Embora praticamente a vírgula comporte-se quase que igualmente ao operador vírgula. O código imprime os valores dos elementos diagonais da matriz:

-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
-
-

Especificações

- - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
1ª Edição ECMAScript.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
-

Compatibilidade de Navegadores

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
-
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
-

Veja também

- diff --git "a/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" "b/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" deleted file mode 100644 index d5e946a438..0000000000 --- "a/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Operadores de comparação -slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação -tags: - - Comparando String - - Comparação - - Igualdade - - Operadores - - Relacionais -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -
{{jsSidebar("Operators")}}
- -

O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., ===) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. ==) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <=), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.

- -

Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.

- -
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
- - - -

Características de comparação:

- -
    -
  • Duas strings são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, Duas string são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, e os mesmos caracteres em posições correspondentes.
    • -
  • Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). NaN não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.
    • -
  • Dois operadores Boleanos são estritamente iguais se ambos são true ou ambos são false.
    • -
  • Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.
    • -
  • Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.
    • -
  • Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.
    • -
- -

Operadores de Igualdade 

- -

Igualdade (==)

- -

O operador de igualdade converte o operando se ele não for do mesmo tipo, então aplica a comparação estrita. Se ambos os operandos são objetos, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.

- -

Sintaxe

- -
x == y
-
- -

Exemplos

- -
1    ==  1         // verdade
-'1'  ==  1         // verdade
-1    == '1'        // verdade
-0    == false      // verdade
-0    == null       // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 == object2 // falso
-0    == undefined  // falso
-null == undefined  // verdade
-
- -

Desigualdade (!=)

- -

O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos não são do mesmo tipo, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se ambos os operandos são objetos, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.

- -

Sintaxe

- -
x != y
- -

Exemplos

- -
1 !=   2     // verdade
-1 !=  '1'    // falso
-1 !=  "1"    // falso
-1 !=  true   // falso
-0 !=  false  // falso
-
- -

Identidade / igualdade estrita (===)

- -

O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) sem conversão de tipo. 

- -

Sintaxe

- -
x === y
- -

Exemplos

- -
3 === 3   // verdade
-3 === '3' // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 === object2 //f also
- -

Non-identity / desigualdade estrita (!==)

- -

O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos não são iguais e / ou não são do mesmo tipo.

- -

Sintaxe

- -
x !== y
- -

Exemplos

- -
3 !== '3' // verdade
-4 !== 3   // verdade
-
- -

Operadores relacionais

- -

Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.

- -

Operador Maior (>)

- -

O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.

- -

Sintaxe

- -
x > y
- -

Exemplos

- -
4 > 3 // verdade
-
- -

Operador maior ou igual (>=)

- -

O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.

- -

Sintaxe

- -
 x >= y
- -

Exemplos

- -
4 >= 3 // verdade
-3 >= 3 // verdade
-
- -

Operador Menor (<)

- -

O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.

- -

Sintaxe

- -
 x < y
- -

Exemplos

- -
3 < 4 // verdade
-
- -

Operador menor ou igual (<=)

- -

O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.

- -

Sintaxe

- -
 x <= y
- -

Exemplos

- -
3 <= 4 // verdade
-
- -

Usando Operadores de Igualdade

- -

Os operadores de igualdade padrão (== e! =) Usam o Algoritmo de Comparação de Igualdade Abstrata 

- -

para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.

- -

Os operadores de igualdade estrita (=== e! ==) usam o Algoritmo de comparação estrita de igualdade e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.
-
- Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.
-
- Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:

- -
    -
  • Ao comparar um número e uma string, a string é convertida em um valor numérico. JavaScript tenta converter o literal numérico de string em um valor de tipo Number. Primeiro, um valor matemático é derivado do literal numérico da string. Em seguida, esse valor é arredondado para o valor de tipo de número mais próximo.
    • -
  • Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.
    • -
  • Se um objeto é comparado com um número ou string, o JavaScript tenta retornar o valor padrão para o objeto. Os operadores tentam converter o objeto em um valor primitivo, um valor String ou Number, usando os métodos valueOf e toString dos objetos. Se essa tentativa de converter o objeto falhar, será gerado um erro de tempo de execução.
    • -
  • Observe que um objeto é convertido em primitivo se, e somente se, seu comparando for um primitivo. Se os dois operandos forem objetos, eles serão comparados como objetos, e o teste de igualdade será verdadeiro apenas se ambos fizerem referência ao mesmo objeto.
    • -
- -
Nota: Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:
- -
// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string):
-'foo' === 'foo'
-
-var a = new String('foo');
-var b = new String('foo');
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a == b
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a === b
-
-// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a)
-// é convertido para String ('foo') antes da comparação
-a == 'foo'
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição Inicial. Implementado em JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Adicionandos os operadores === e !== . Implementado em JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
- -

Compatilidade entre navegadores

- - - -

{{Compat("javascript.operators.comparison")}}

- -

Consulte também

- - - -
-
-
diff --git a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html b/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html deleted file mode 100644 index e3a3ee6e8c..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Operadores Lógicos -slug: Web/JavaScript/Reference/Operators/Operadores_Logicos -tags: - - Operador - - Operadores lógicos - - Referencia - - e - - não - - ou -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -
{{jsSidebar("Operators")}}
- -

Resumo

- -

Operadores lógicos são tipicamente usados com valores Booleanos (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores && e || de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.

- -

Descrição

- -

Os operadores lógicos são descritos na tabela abaixo:

- - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUtilizaçãoDescrição
Logical AND (&&)expr1 && expr2Retorna expr1 se essa pode ser convertido para falso; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, && retorna verdadeiro se ambos os operandos forem verdadeiro ; senão, retorna falso.
Logical OR (||)expr1 || expr2Retorna expr1 se essa pode ser convertido para verdadeiro; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, || retorna verdadeiro se qualquer dos operandos for verdadeiro; se ambos são falso, retorna falso.
Logical NOT (!)!expr -

Retorna falsose o seu operando pode ser convertido para verdadeiro; senão, retorna verdadeiro.

-
- -

Se um valor pode ser convertido para verdadeiro, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para falso, este valor é chamado de {{Glossary("falsy")}}.

- -

Exemplos de expressões que podem ser convertidas para falso são:

- -
    -
  • null;
    • -
  • NaN;
    • -
  • 0;
    • -
  • string vazia (""); 
    • -
  • undefined.
    • -
- -

Mesmo que os operadores && and || possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.

- -

Avaliação de Curto-Circuito (Short-Circuit) 

- -

Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:

- -
    -
  • falso && (qualquer coisa)  é avaliado como falso através de curto-circuito.
    • -
  • true || (qualquer coisa) é avaliado como verdadeiro através de curto-circuito.
    • -
- -

As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção qualquer coisa das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também  que a parte qualquer coisa das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos parênteses).

- -

Por exemplo, as duas funções a seguir são equivalentes.

- -
function shortCircuitEvaluation() {
-  // logical OR (||)
-  doSomething() || doSomethingElse();
-
-  // logical AND (&&)
-  doSomething() && doSomethingElse();
-}
-
-function equivalentEvaluation() {
-
-  // logical OR (||)
-  var orFlag = doSomething();
-  if (!orFlag) {
-    doSomethingElse();
-  }
-
-
-  // logical AND (&&)
-  var andFlag = doSomething();
-  if (andFlag) {
-    doSomethingElse();
-  }
-}
- -

Contudo, as expressões a seguir não são equivalentes, devido a precedência do operador, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário).

- -
 false && true || true       // retorna true
- false && (true || true)     // retorna falso
- -

AND Lógico (&&)

- -

O código a seguir demonstra exemplos do operador && (AND lógico). 

- -
a1 = true  && true       // t && t retorna true
-a2 = true  && false      // t && f retorna false
-a3 = false && true       // f && t retorna false
-a4 = false && (3 == 4)   // f && f retorna false
-a5 = 'Cat' && 'Dog'      // t && t retorna "Dog"
-a6 = false && 'Cat'      // f && t retorna false
-a7 = 'Cat' && false      // t && f retorna false
-a8 = ''    && false      // f && f retorna ""
-a9 = false && ''         // f && t retorna false
-
- -

OR Lógico (||)

- -

O código a seguir demonstra exemplos do operador || (OR lógico).

- -
o1 = true  || true       // t || t retorna true
-o2 = false || true       // f || t retorna true
-o3 = true  || false      // t || f retorna true
-o4 = false || (3 == 4)   // f || f retorna false
-o5 = 'Cat' || 'Dog'      // t || t retorna "Cat"
-o6 = false || 'Cat'      // f || t retorna "Cat"
-o7 = 'Cat' || false      // t || f retorna "Cat"
-o8 = ''    || false      // f || f retorna false
-o9 = false || ''         // f || f retorna ""
- -

NOT Logico (!)

- -

O código a seguir demonstra exemplos do operador ! (NOT lógico) .

- -
n1 = !true               // !t returns false
-n2 = !false              // !f returns true
-n3 = !'Cat'              // !t returns false
- -

Regras de conversão

- -

Convertendo AND para OR

- -

A operação a seguir, envolvendo Booleanos:

- -
bCondition1 && bCondition2
- -

é sempre igual a:

- -
!(!bCondition1 || !bCondition2)
- -

Convertendo OR to AND

- -

A operação a seguir, envolvendo Booleanos:

- -
bCondition1 || bCondition2
- -

é sempre igual a:

- -
!(!bCondition1 && !bCondition2)
- -

Convertendo entre dois NOT

- -

A seguinte operação envolvendo Booleanos:

- -
!!bCondition
- -

é sempre igual a:

- -
bCondition
- -

Removendo parenteses aninhados

- -

Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:

- -

Removendo AND aninhado

- -

A seguinte operação composta envolvendo Booleanos:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

é igual a :

- -
bCondition1 || bCondition2 && bCondition3
- -

Removendo OR aninhado

- -

A operação composta a seguir, envolvendo Booleanos:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

é sempre igual a:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstatusComentário
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}
- {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}		{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}
- {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}		{{Spec2('ES6')}}
- -

Compatibilidade com o Navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Retrocompatibilidade: Comportamento no  JavaScript 1.0 e1.1

- -

Os operadores  && and || se comportam da seguinte maneira:

- - - - - - - - - - - - - - - - - - - -
OperadorUtilizaçãoComportamento
&&expr1 && expr2Se o primeiro operando (expr1) pode ser convertido para falso, o operador &&  retorna false ao invés do valor do expr1.
||expr1 || expr2If the first operand (expr1) can be converted to true, the || operator retorna true rather than the value of expr1.
- -

Veja Também

- - diff --git a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html b/files/pt-br/web/javascript/reference/operators/spread_operator/index.html deleted file mode 100644 index a877d131bc..0000000000 --- a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Spread operator -slug: Web/JavaScript/Reference/Operators/Spread_operator -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator ---- -
{{jsSidebar("Operators")}}
- -

A sintaxe de propagação (Spread) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.

- -

Sintaxe

- -

Para chamadas de função:

- -
minhaFuncao(...objIteravel);
-
- -

Para array literais:

- -
[...objIteravel, 4, 5, 6]
- -

Desestruturação:

- -
[a, b, ...objIteravel] = [1, 2, 3, 4, 5];
- -

Exemplos

- -

Uma melhor aplicação

- -

Exemplo: é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.

- -
function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao.apply(null, args);
- -

Com o spread do ES2015 você pode agora escrever isso acima como:

- -
function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao(...args);
- -

Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.

- -
function minhaFuncao(v, w, x, y, z) { }
-var args = [0, 1];
-minhaFuncao(-1, ...args, 2, ...[3]);
- -

Um literal array mais poderoso

- -

Exemplo:  Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de push, splice, concat, etc. Com a sintaxe spread isso se torna muito mais sucinto:

- -
var partes = ['ombros', 'joelhos'];
-var letra = ['cabeca', ...partes, 'e', 'dedos']; // ["cabeca", "ombros", "joelhos", "e", "dedos"]
-
- -

Assim como em spread para listas de argumentos ... pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.

- -

Apply para new

- -

Exemplo: No ES5 não é possível usar new com apply. (Em ES5 termos, apply faz uma [[Call]] e nao um [[Construct]].) Em ES2015 a sintaxe spread naturalmente suporta isso:

- -
var camposData = lerCamposData(bancoDeDados);
-var d = new Date(...camposData);
- -

Um push melhor

- -

Exemplo: {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Acrescenta todos itens do arr2 ao arr1
-Array.prototype.push.apply(arr1, arr2);
- -

No ES2015 com spread isso se torna:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definido em várias seções da especificação: Inicializador do array, Listas de argumento
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Operação spread em array literais{{CompatChrome("46")}}{{ CompatGeckoDesktop("16") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em chamadas de função{{CompatChrome("46")}}{{ CompatGeckoDesktop("27") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em desestruturação{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Operação spread em array literais{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("16") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em chamadas de função{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("27") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em desestruturação{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/statements/async_function/index.html b/files/pt-br/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..808f0b0306 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,149 @@ +--- +title: Funções assíncronas +slug: Web/JavaScript/Reference/Statements/funcoes_assincronas +tags: + - Função + - assíncrono +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +
{{jsSidebar("Statements")}}
+ +

A declaração async function define uma função assíncrona, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.

+ +
+

Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.

+
+ +

Sintaxe

+ +
async function nome([param[, param[, ... param]]]) {
+   instruções
+}
+
+ +
+
nome
+
O nome da função.
+
+ +
+
param
+
O nome de um parâmetro a ser passado para a função.
+
+ +
+
instruções
+
As instruções que compõem o corpo da função.
+
+ +

Descrição

+ +

Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

+ +

Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

+ +
+

A proposta das funções async/await é de simplificar o uso de forma síncrona das Promises e executar alguns procedimentos em um grupo de Promises. Assim como Promises são similares a callbacks estruturados, funções async/await são similares à junção de generators com Promises.

+
+ +

Exemplos

+ +

Exemplo simples

+ +
function resolverDepoisDe2Segundos(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function adicionar1(x) {
+  var a = resolverDepoisDe2Segundos(20);
+  var b = resolverDepoisDe2Segundos(30);
+  return x + await a + await b;
+}
+
+adicionar1(10).then(v => {
+  console.log(v);  // exibe 60 depois de 2 segundos.
+});
+
+async function adicionar2(x) {
+  var a = await resolverDepoisDe2Segundos(20);
+  var b = await resolverDepoisDe2Segundos(30);
+  return x + a + b;
+}
+
+adicionar2(10).then(v => {
+  console.log(v);  // exibe 60 depois de 4 segundos.
+});
+
+ +

Reescrevendo uma cadeia de Promise com uma função async

+ +

Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de Promises e separa a função em várias partes. Considere o seguinte código:

+ +
function pegarDadosProcessados(url) {
+  return baixarDados(url) // retorna uma Promise
+    .catch(e => {
+      return baixarDadosReservas(url) // retorna uma Promise
+    })
+    .then(v => {
+      return processarDadosNoWorker(v); // retorna uma Promise
+    });
+}
+
+ +

pode ser escrita em uma única função async desta forma:

+ +
async function pegarDadosProcessados(url) {
+  let v;
+  try {
+    v = await baixarDados(url);
+  } catch(e) {
+    v = await baixarDadosReservas(url);
+  }
+  return processarDadosNoWorker(v);
+}
+
+ +

Note que no exemplo acima não tem a instrução await na instrução do return, porque o valor retornado de uma função async é implícitamente passado por um {{jsxref("Promise.resolve")}}.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Definição inicial no ES2017.
+ +

Compatibilidade de browser

+ +
{{Compat("javascript.statements.async_function")}}
+ +
+ +

Notas específicas do Firefox

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/default/index.html b/files/pt-br/web/javascript/reference/statements/default/index.html deleted file mode 100644 index 8e0fb07927..0000000000 --- a/files/pt-br/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword - - Palavra-chave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

A palavra-chave default pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.

- -

Sintaxe

- -

Com uma declaração {{jsxref("Statements/switch", "switch")}}:

- -
switch (expressao) {
-  case value1:
-    //Declarações executadas quando o resultado da expressao for value1
-    [break;]
-  default:
-    //Declarações executadas quando nenhum dos valores for igual o da expressao
-    [break;]
-}
- -

Com a declaração {{jsxref("Statements/export", "export")}}:

- -
export default nameN
- -

Descrição

- -

Para mais detalhes, veja as páginas:

- -
    -
  • Declaração {{jsxref("Statements/switch", "switch")}}
    • -
  • Declaração {{jsxref("Statements/export", "export")}}.
    • -
- -

Exemplos

- -

Usando default em declarações switch

- -

No exemplo a seguir, se a variável expr for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças"  e executa a declaração correspondente. A palavra-chave default vai ajudar em qualquer outro caso e executará a declaração associada.

- -
switch (expr) {
-  case 'Laranjas':
-    console.log('Laranjas custam R$0,59.');
-    break;
-  case 'Maças':
-    console.log('Maças custam R$0,32.');
-    break;
-  default:
-    console.log('Desculpe, nós não temos ' + expr + '.');
-}
- -

Usando default com export

- -

Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:

- -
// module "my-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-};
-export default cube;
- -

Então, no outro script, isso pode ser passado direto para o import do default export:

- -
// module "my-module.js"
-import myFunction from 'my-module';
-console.log(myFunction(3)); // 27
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Veja também

- -
    -
  • {{jsxref("Statements/export", "export")}}
    • -
  • {{jsxref("Statements/switch", "switch")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html deleted file mode 100644 index 808f0b0306..0000000000 --- a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Funções assíncronas -slug: Web/JavaScript/Reference/Statements/funcoes_assincronas -tags: - - Função - - assíncrono -translation_of: Web/JavaScript/Reference/Statements/async_function ---- -
{{jsSidebar("Statements")}}
- -

A declaração async function define uma função assíncrona, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.

- -
-

Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.

-
- -

Sintaxe

- -
async function nome([param[, param[, ... param]]]) {
-   instruções
-}
-
- -
-
nome
-
O nome da função.
-
- -
-
param
-
O nome de um parâmetro a ser passado para a função.
-
- -
-
instruções
-
As instruções que compõem o corpo da função.
-
- -

Descrição

- -

Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

- -

Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

- -
-

A proposta das funções async/await é de simplificar o uso de forma síncrona das Promises e executar alguns procedimentos em um grupo de Promises. Assim como Promises são similares a callbacks estruturados, funções async/await são similares à junção de generators com Promises.

-
- -

Exemplos

- -

Exemplo simples

- -
function resolverDepoisDe2Segundos(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-async function adicionar1(x) {
-  var a = resolverDepoisDe2Segundos(20);
-  var b = resolverDepoisDe2Segundos(30);
-  return x + await a + await b;
-}
-
-adicionar1(10).then(v => {
-  console.log(v);  // exibe 60 depois de 2 segundos.
-});
-
-async function adicionar2(x) {
-  var a = await resolverDepoisDe2Segundos(20);
-  var b = await resolverDepoisDe2Segundos(30);
-  return x + a + b;
-}
-
-adicionar2(10).then(v => {
-  console.log(v);  // exibe 60 depois de 4 segundos.
-});
-
- -

Reescrevendo uma cadeia de Promise com uma função async

- -

Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de Promises e separa a função em várias partes. Considere o seguinte código:

- -
function pegarDadosProcessados(url) {
-  return baixarDados(url) // retorna uma Promise
-    .catch(e => {
-      return baixarDadosReservas(url) // retorna uma Promise
-    })
-    .then(v => {
-      return processarDadosNoWorker(v); // retorna uma Promise
-    });
-}
-
- -

pode ser escrita em uma única função async desta forma:

- -
async function pegarDadosProcessados(url) {
-  let v;
-  try {
-    v = await baixarDados(url);
-  } catch(e) {
-    v = await baixarDadosReservas(url);
-  }
-  return processarDadosNoWorker(v);
-}
-
- -

Note que no exemplo acima não tem a instrução await na instrução do return, porque o valor retornado de uma função async é implícitamente passado por um {{jsxref("Promise.resolve")}}.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Definição inicial no ES2017.
- -

Compatibilidade de browser

- -
{{Compat("javascript.statements.async_function")}}
- -
- -

Notas específicas do Firefox

- - - -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/template_literals/index.html b/files/pt-br/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..e2a11abfa4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/template_literals/index.html @@ -0,0 +1,140 @@ +--- +title: Template strings +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.

+ +

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

+ +

Sintaxe

+ +
`corpo de texto`
+
+`texto linha 1
+ texto linha 2`
+
+`texto string ${expression} texto string`
+
+tag `texto string ${expression} texto string`
+
+ +

Descrição

+ +

Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.

+ +
`\`` === '`' // --> true
+ +

Strings multi-linhas

+ +

Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:

+ +
console.log('texto string linha 1\n' +
+'texto string linha 2');
+// "texto string linha 1
+// texto string linha 2"
+ +

Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:

+ +
console.log(`texto string linha 1
+texto string linha 2`);
+// "texto string linha 1
+//  texto string linha 2"
+ +

Interpolação de Expressões

+ +

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:

+ +
var a = 5;
+var b = 10;
+console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
+// "Quinze é 15 e
+// não 20."
+ +

Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e
+não ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."
+ +

Tagged template strings

+ +

Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:

+ +
var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Hello "
+  console.log(strings[1]); // " world"
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Hello ${ a + b } world ${ a * b}`;
+// "Bazinga!"
+
+ +

Strings Raw

+ +

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:

+ +
function tag(strings, ...values) {
+  return strings.raw[0];
+}
+
+tag`string text line 1 \n string text line 2`;
+// "string text line 1 \\n string text line 2"
+
+ +

Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.

+ +
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definido em várias seções da especificação: Template Literals, Tagged Templates
+ +

Compatibidade com navegadores

+ +
+ + +

{{Compat("javascript.grammar.template_literals")}}

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/template_strings/index.html b/files/pt-br/web/javascript/reference/template_strings/index.html deleted file mode 100644 index e2a11abfa4..0000000000 --- a/files/pt-br/web/javascript/reference/template_strings/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Template strings -slug: Web/JavaScript/Reference/template_strings -translation_of: Web/JavaScript/Reference/Template_literals ---- -
{{JsSidebar("More")}}
- -

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.

- -

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

- -

Sintaxe

- -
`corpo de texto`
-
-`texto linha 1
- texto linha 2`
-
-`texto string ${expression} texto string`
-
-tag `texto string ${expression} texto string`
-
- -

Descrição

- -

Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.

- -
`\`` === '`' // --> true
- -

Strings multi-linhas

- -

Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:

- -
console.log('texto string linha 1\n' +
-'texto string linha 2');
-// "texto string linha 1
-// texto string linha 2"
- -

Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:

- -
console.log(`texto string linha 1
-texto string linha 2`);
-// "texto string linha 1
-//  texto string linha 2"
- -

Interpolação de Expressões

- -

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:

- -
var a = 5;
-var b = 10;
-console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
-// "Quinze é 15 e
-// não 20."
- -

Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:

- -
var a = 5;
-var b = 10;
-console.log(`Quinze é ${a + b} e
-não ${2 * a + b}.`);
-// "Quinze é 15 e
-// não 20."
- -

Tagged template strings

- -

Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:

- -
var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
-  console.log(strings[0]); // "Hello "
-  console.log(strings[1]); // " world"
-  console.log(values[0]);  // 15
-  console.log(values[1]);  // 50
-
-  return "Bazinga!";
-}
-
-tag`Hello ${ a + b } world ${ a * b}`;
-// "Bazinga!"
-
- -

Strings Raw

- -

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:

- -
function tag(strings, ...values) {
-  return strings.raw[0];
-}
-
-tag`string text line 1 \n string text line 2`;
-// "string text line 1 \\n string text line 2"
-
- -

Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.

- -
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definido em várias seções da especificação: Template Literals, Tagged Templates
- -

Compatibidade com navegadores

- -
- - -

{{Compat("javascript.grammar.template_literals")}}

-
- -

Veja também

- - diff --git a/files/pt-br/web/mathml/examples/index.html b/files/pt-br/web/mathml/examples/index.html new file mode 100644 index 0000000000..ac83b9e48a --- /dev/null +++ b/files/pt-br/web/mathml/examples/index.html @@ -0,0 +1,20 @@ +--- +title: Exemplos +slug: Web/MathML/Exemplos +translation_of: Web/MathML/Examples +--- +

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

+
+
+ Teorema de Pitágoras
+
+ Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.
+
+ Solução da equação do segundo grau
+
+ Linhas gerais de como descobrir a solução para equações do segundo grau.
+
+ Testes para MathML
+
+ Grande conjunto de tests para MathML.
+
diff --git a/files/pt-br/web/mathml/exemplos/index.html b/files/pt-br/web/mathml/exemplos/index.html deleted file mode 100644 index ac83b9e48a..0000000000 --- a/files/pt-br/web/mathml/exemplos/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Exemplos -slug: Web/MathML/Exemplos -translation_of: Web/MathML/Examples ---- -

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

-
-
- Teorema de Pitágoras
-
- Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.
-
- Solução da equação do segundo grau
-
- Linhas gerais de como descobrir a solução para equações do segundo grau.
-
- Testes para MathML
-
- Grande conjunto de tests para MathML.
-
diff --git a/files/pt-br/web/media/formats/index.html b/files/pt-br/web/media/formats/index.html new file mode 100644 index 0000000000..49c0b02fc1 --- /dev/null +++ b/files/pt-br/web/media/formats/index.html @@ -0,0 +1,526 @@ +--- +title: Formatos de mídia suportados por elementos HTML de áudio e vídeo +slug: Web/HTML/formatos_midia_suportados +tags: + - Audio + - Firefox + - HTML + - HTML5 + - Ogg + - Reference + - Video + - formatos de arquivos + - mp3 + - mp4 +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +--- +

Os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} fornecem suporte para a reprodução de mídias de áudio e vídeo sem necessitar de plug-ins. Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos,  no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, embora apenas alguns são relevantes para a internet.

+ +

Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers relevantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.
+
+ Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos: WebM e MPEG H.264 AAC, usando o elemento {{HTMLElement("source")}} desta forma:

+ +
<video controls>
+  <source src="somevideo.webm" type="video/webm">
+  <source src="somevideo.mp4" type="video/mp4">
+  Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264.
+  <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
+</video>
+
+ +

WebM

+ +

O formato WebM é baseado em uma versão restrita do container Matroska. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.
+
+ Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo  para o WebM.
+
+ O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.
+
+ Gecko reconhece os seguintes tipos de arquivos WebM:

+ +
+
video/webm
+
Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).
+
audio/webm
+
Um arquivo de mídia WebM contendo apenas áudio.
+
+ +

Ogg Theora Vorbis

+ +

O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possui suporte para esse formato.
+
+ WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disponível, por que ele possui uma melhor qualidade de compressão e tem suporte na maioria dos navegadores. O formato Ogg, contudo, pode ser usado para navegadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).

+ +

A situação de patente do Theora é similar com a da WebM.

+ +

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

+ +

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

+ +
+
audio/ogg
+
Um arquivo Ogg que contem apensa áudio
+
video/ogg
+
Um arquivo Ogg que contem vídeo (e possivelmente áudio)
+
application/ogg
+
Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.
+
+ +

Ogg Opus

+ +

O container Ogg  pode também conter um áudio codificado usando o codec Opus. Suporte para ele está disponível no Gecko 15.0 {{ geckoRelease("15.0") }} e versões superiores, em navegadores no desktop e dispositivos móveis.

+ +

Ogg FLAC

+ +

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.

+ +

MP4 H.264 (AAC ou MP3)

+ +

O formato MP4 com o codec de vídeo H.264 e codec de áudio  AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4.

+ +
+

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

+
+ +

O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

+ +

MP3

+ +

O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacional fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.

+ +

WAVE PCM

+ +

O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".

+ +
Nota: Veja RFC 2361 para ver registros do codec WAVE
+ +

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

+ +
    +
  • audio/wave (preferido; não funciona no Chrome)
    • +
  • audio/wav
    • +
  • audio/x-wav
    • +
  • audio/x-pn-wav
    • +
+ +

Media Source Extensions (MSE)

+ +

Origem da extesão de mídia é um projeto de trabalho da W3C que planeja ampliar {{ domxref("HTMLMediaElement") }} para permitir que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.
+
+ Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

+ +
+

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

+
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: PCM em WAVE{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1
<audio>: Vorbis em WebM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3{{ CompatVersionUnknown() }} (Não em Chromium)Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
<audio>: MP3 em MP4 +

{{ CompatUnknown() }}

+ 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
<audio>: AAC em MP4 +

{{ CompatVersionUnknown() }} (Main only) (Não em  Chromium)

+ 		+

Partial (Veja abaixo)

+ 		9.0{{ CompatVersionUnknown() }}3.1
<audio>: Opus em Ogg27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: VP8 e Vorbis em WebM6.0{{ CompatGeckoDesktop("2.0") }}9.0 (deve ser instalado separadamente, e.g. WebM MF)10.603.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM29.0{{ CompatGeckoDesktop("28.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>:  Theora e Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
<video>: H.264 e AAC em MP4 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
outro formato{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (executa todos os formatos via QuickTime)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari MobileChrome for Android
Suporte básico2.324.01.0.110.011.0Partial (Veja abaixo)3.229.0
<audio>: PCM em WAVE{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: Vorbis em WebM{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: MP3{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: MP3 em MP4{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: AAC em MP4{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo){{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: Opus em Ogg{{ CompatNo() }}24.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  VP8 e Vorbis em WebM2.324.01.0.1{{ CompatNo() }}16.0Partial (Veja abaixo){{ CompatNo() }}29.0
<video>: VP9 and Opus em WebM{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Theora e Vorbis em Ogg{{ CompatNo() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  H.264 e MP3 em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo){{ CompatVersionUnknown() }}29.0
<video>: H.264 e AAC em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo)3.229.0
qualquer outro formato{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas:

+ +
    +
  • AAC é suportado apenas em containers MP4.
    • +
  • Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositivo  executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.
    • +
  • Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
    • +
  • No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.
    • +
  • Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construídas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlataformaVersão Firefox
Windows Vista+22.0+
Android20.0+
Firefox OS15.0+
Linux +

26.0+ (depende do codec GStreamer)

+
OS X 10.7+35.0+
+ + + +

Veja também

+ + diff --git a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html b/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html deleted file mode 100644 index 63746f132c..0000000000 --- a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Caminho de renderização crítico -slug: Web/Performance/caminho_de_renderizacao_critico -translation_of: Web/Performance/Critical_rendering_path ---- -

{{draft}}

- -

O caminho de renderização crítico é a sequência de passos que o navegador passa para converter HTML, CSS e JavaScript em pixels na tela. Otimizando o caminho de renderização crítico melhora a performance.The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

- -

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.

- -

Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank.

- -

Understanding CRP

- -

Web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.

- -

A request for a web page or app starts with an HTML request. The server returns the HTML - response headers and data. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered, or 'painted' on the screen.

- -

Document Object Model

- -

DOM construction is incremental. The HTML response turns into tokens which turns into nodes which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on token hierarchy. If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.

- -

The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won't make a difference, but divitis can lead to jank.

- -

CSS Object Model

- -

The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM. CSSOM is similar the the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all of the CSS. CSS is render blocking because rules can be overwritten, so the content can't be rendered until the CSSOM is complete.

- -

CSS has its own set of rules for identifying valid tokens. Remember the C in CSS stands for 'Cascade'. CSS rules cascade down. As the parser converts tokens to nodes, with descendants of nodes inheriting styles. The incremental processing features don't apply to CSS like they do with HTML, because subsequent rules may override previous ones. The CSS object model gets built as the CSS is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen.

- -

In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.

- -

If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating defered CSS into non-blocking requests by using media queries.

- -

Render Tree

- -

The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached.

- -

The render tree only captures visible content. The head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. If there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.

- -

Layout

- -

Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

- -

What is the width of an element? Block level elements, by definition, have a default width of 100% of the width of their parent. An element with a width of 50%, will be half of the width of its parent. Unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. This width of the device impacts layout.

- -

The viewport meta tag defines the width of the layout viewport, impacting the layout. Without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px. On by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. The device-width changes when a user rotates their phone between landscape and portrait mode. Layout happens every time a device is rotated or browser is otherwise resized.

- -

Layout performance is impacted by the DOM -- the greater the number of nodes, the longer layout takes. Layout can become a bottleneck, leading to jank if required during scrolling or other animations. While a 20ms layout on load or orientation change may be fine, it will lead to jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs.

- -

To reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.

- -

Paint

- -

The last step in painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree. While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. The styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. Remember to measure first. Then you can determine whether it should be an optimization priority.

- -

Optimizing for CRP

- -

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

diff --git a/files/pt-br/web/performance/critical_rendering_path/index.html b/files/pt-br/web/performance/critical_rendering_path/index.html new file mode 100644 index 0000000000..63746f132c --- /dev/null +++ b/files/pt-br/web/performance/critical_rendering_path/index.html @@ -0,0 +1,60 @@ +--- +title: Caminho de renderização crítico +slug: Web/Performance/caminho_de_renderizacao_critico +translation_of: Web/Performance/Critical_rendering_path +--- +

{{draft}}

+ +

O caminho de renderização crítico é a sequência de passos que o navegador passa para converter HTML, CSS e JavaScript em pixels na tela. Otimizando o caminho de renderização crítico melhora a performance.The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

+ +

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.

+ +

Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank.

+ +

Understanding CRP

+ +

Web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.

+ +

A request for a web page or app starts with an HTML request. The server returns the HTML - response headers and data. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered, or 'painted' on the screen.

+ +

Document Object Model

+ +

DOM construction is incremental. The HTML response turns into tokens which turns into nodes which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on token hierarchy. If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.

+ +

The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won't make a difference, but divitis can lead to jank.

+ +

CSS Object Model

+ +

The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM. CSSOM is similar the the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all of the CSS. CSS is render blocking because rules can be overwritten, so the content can't be rendered until the CSSOM is complete.

+ +

CSS has its own set of rules for identifying valid tokens. Remember the C in CSS stands for 'Cascade'. CSS rules cascade down. As the parser converts tokens to nodes, with descendants of nodes inheriting styles. The incremental processing features don't apply to CSS like they do with HTML, because subsequent rules may override previous ones. The CSS object model gets built as the CSS is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen.

+ +

In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.

+ +

If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating defered CSS into non-blocking requests by using media queries.

+ +

Render Tree

+ +

The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached.

+ +

The render tree only captures visible content. The head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. If there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.

+ +

Layout

+ +

Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

+ +

What is the width of an element? Block level elements, by definition, have a default width of 100% of the width of their parent. An element with a width of 50%, will be half of the width of its parent. Unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. This width of the device impacts layout.

+ +

The viewport meta tag defines the width of the layout viewport, impacting the layout. Without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px. On by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. The device-width changes when a user rotates their phone between landscape and portrait mode. Layout happens every time a device is rotated or browser is otherwise resized.

+ +

Layout performance is impacted by the DOM -- the greater the number of nodes, the longer layout takes. Layout can become a bottleneck, leading to jank if required during scrolling or other animations. While a 20ms layout on load or orientation change may be fine, it will lead to jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs.

+ +

To reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.

+ +

Paint

+ +

The last step in painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree. While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. The styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. Remember to measure first. Then you can determine whether it should be an optimization priority.

+ +

Optimizing for CRP

+ +

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

diff --git a/files/pt-br/web/progressive_web_apps/introduction/index.html b/files/pt-br/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..483ea5cfc0 --- /dev/null +++ b/files/pt-br/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,90 @@ +--- +title: Introdução a progressive web apps +slug: Web/Progressive_web_apps/Introdução +translation_of: Web/Progressive_web_apps/Introduction +--- +
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
+ +

Este artigo fornece uma intrução as Progressive Web Apps (PWAs), explicando o que são e quais vantagens elas trazem em relação ao desenvolvimento de aplicações web comuns.

+ +

O que é uma Progressive Web App?

+ +

As PWAs são aplicativos web desenvolvidos usando várias tecnologias e padrões específicos para permitir que eles aproveitem os recursos da web e dos aplicativos nativos.

+ +

Por exemplo, as aplicações web são mais detectáveis - é muito mais fácil e rápido visitar um site do que instalar um aplicativo, e você também pode compartilhar aplicações web por meio de um link.

+ +

Por outro lado, os aplicativos nativos são melhor integrados ao sistema operacional e, portanto, oferecem uma experiência melhor para os usuários. Você pode instalar um aplicativo nativo para funcionar off-line e os usuários adoram tocar nos ícones da tela inicial para acessar facilmente os aplicativos favoritos, em vez de acessá-lo usando um navegador.

+ +

As PWAs nos dão a capacidade de criar aplicações web com essas mesmas vantagens.

+ +

Isso não é um conceito novo - essas ideias foram pensadas muitas vezes na plataforma web com várias abordagens no passado. O aprimoramento progressivo e o design responsivo já nos permitem criar websites otimizados para dispositivos móveis. Trabalhar offline e instalar aplicativos foi possível no ecossistema Firefox OS há alguns anos.

+ +

PWAs, no entanto, fornecem tudo isso e muito mais, sem se livrar de qualquer um dos recursos existentes que tornam a web excelente.

+ +

O que torna uma aplicação web em uma PWA?

+ +

Como sugerimos acima, as PWAs não são criadas com uma única tecnologia. Elas representam uma nova filosofia para a criação de aplicações Web, envolvendo alguns padrões específicos, APIs e outros recursos. Não é tão óbvio saber se uma aplicação web é uma PWA ou não, à primeira vista. Uma aplicação Web pode ser considerada uma PWA quando atende a determinados requisitos ou implementa um conjunto de recursos específicos: funciona offline, é instalável, é fácil de sincronizar, pode enviar notificações push etc.

+ +

Além disso, existem ferramentas para medir a integridade de uma aplicação Web em porcentagens. (Lighthouse é atualmente o mais popular.) Ao implementar várias vantagens tecnológicas, podemos fazer uma aplicação mais progressiva, terminando assim com uma pontuação mais alta no Lighthouse. Mas este é apenas um indicador aproximado.

+ +

Existem alguns princípios que uma aplicação Web deve tentar seguir para serem identificadas como uma PWA. Deveria ser:

+ +
    +
  • Detectável, o seu conteúdo deve poder ser encontrado por mecanismos de busca na Web.
    • +
  • Instalável, deve poder ser acessada a partir da tela inicial do dispositivo.
    • +
  • Linkavel, você deve poder compartilhar simplesmente enviando a sua URL. 
    • +
  • Independente de rede, deve funcionar offline e ou com uma conexão fraca.
    • +
  • Progressiva, deve funcionar em um nível básico e navegadores antigos e em um nível completo nos mais modernos.
    • +
  • Re-engajável, deve ser possível enviar notificações.
    • +
  • Responsiva, deve ser utilizável em qualquer dispositivo com uma tela e em navegadores — telefones móveis, tablets, laptops, TVs, geladeiras, etc.
    • +
  • Segura, a conexão deve ser segura contra terceiros que tentarem acessar dados confidenciais.
    • +
+ +

Is it worth doing all that?

+ +

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

+ +
    +
  • A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
    • +
  • The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
    • +
  • A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
    • +
  • Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.
    • +
+ +

There are many success stories of companies trying the PWA route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a result. The website PWA Stats shares many case studies which indiciate these benefits.

+ +

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

+ +

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

+ +

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

+ +

You can even generate PWAs online using the PWABuilder website.

+ +

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

+ +

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

+ +

Browser support

+ +

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

+ +

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

+ +

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

+ +

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

+ +

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

+ +

An example application

+ +

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

+ +

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

+ +

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

+ +

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Progressive/")}}
diff --git "a/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" "b/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" deleted file mode 100644 index 483ea5cfc0..0000000000 --- "a/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Introdução a progressive web apps -slug: Web/Progressive_web_apps/Introdução -translation_of: Web/Progressive_web_apps/Introduction ---- -
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
- -

Este artigo fornece uma intrução as Progressive Web Apps (PWAs), explicando o que são e quais vantagens elas trazem em relação ao desenvolvimento de aplicações web comuns.

- -

O que é uma Progressive Web App?

- -

As PWAs são aplicativos web desenvolvidos usando várias tecnologias e padrões específicos para permitir que eles aproveitem os recursos da web e dos aplicativos nativos.

- -

Por exemplo, as aplicações web são mais detectáveis - é muito mais fácil e rápido visitar um site do que instalar um aplicativo, e você também pode compartilhar aplicações web por meio de um link.

- -

Por outro lado, os aplicativos nativos são melhor integrados ao sistema operacional e, portanto, oferecem uma experiência melhor para os usuários. Você pode instalar um aplicativo nativo para funcionar off-line e os usuários adoram tocar nos ícones da tela inicial para acessar facilmente os aplicativos favoritos, em vez de acessá-lo usando um navegador.

- -

As PWAs nos dão a capacidade de criar aplicações web com essas mesmas vantagens.

- -

Isso não é um conceito novo - essas ideias foram pensadas muitas vezes na plataforma web com várias abordagens no passado. O aprimoramento progressivo e o design responsivo já nos permitem criar websites otimizados para dispositivos móveis. Trabalhar offline e instalar aplicativos foi possível no ecossistema Firefox OS há alguns anos.

- -

PWAs, no entanto, fornecem tudo isso e muito mais, sem se livrar de qualquer um dos recursos existentes que tornam a web excelente.

- -

O que torna uma aplicação web em uma PWA?

- -

Como sugerimos acima, as PWAs não são criadas com uma única tecnologia. Elas representam uma nova filosofia para a criação de aplicações Web, envolvendo alguns padrões específicos, APIs e outros recursos. Não é tão óbvio saber se uma aplicação web é uma PWA ou não, à primeira vista. Uma aplicação Web pode ser considerada uma PWA quando atende a determinados requisitos ou implementa um conjunto de recursos específicos: funciona offline, é instalável, é fácil de sincronizar, pode enviar notificações push etc.

- -

Além disso, existem ferramentas para medir a integridade de uma aplicação Web em porcentagens. (Lighthouse é atualmente o mais popular.) Ao implementar várias vantagens tecnológicas, podemos fazer uma aplicação mais progressiva, terminando assim com uma pontuação mais alta no Lighthouse. Mas este é apenas um indicador aproximado.

- -

Existem alguns princípios que uma aplicação Web deve tentar seguir para serem identificadas como uma PWA. Deveria ser:

- -
    -
  • Detectável, o seu conteúdo deve poder ser encontrado por mecanismos de busca na Web.
    • -
  • Instalável, deve poder ser acessada a partir da tela inicial do dispositivo.
    • -
  • Linkavel, você deve poder compartilhar simplesmente enviando a sua URL. 
    • -
  • Independente de rede, deve funcionar offline e ou com uma conexão fraca.
    • -
  • Progressiva, deve funcionar em um nível básico e navegadores antigos e em um nível completo nos mais modernos.
    • -
  • Re-engajável, deve ser possível enviar notificações.
    • -
  • Responsiva, deve ser utilizável em qualquer dispositivo com uma tela e em navegadores — telefones móveis, tablets, laptops, TVs, geladeiras, etc.
    • -
  • Segura, a conexão deve ser segura contra terceiros que tentarem acessar dados confidenciais.
    • -
- -

Is it worth doing all that?

- -

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

- -
    -
  • A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
    • -
  • The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
    • -
  • A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
    • -
  • Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.
    • -
- -

There are many success stories of companies trying the PWA route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a result. The website PWA Stats shares many case studies which indiciate these benefits.

- -

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

- -

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

- -

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

- -

You can even generate PWAs online using the PWABuilder website.

- -

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

- -

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

- -

Browser support

- -

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

- -

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

- -

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

- -

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

- -

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

- -

An example application

- -

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

- -

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

- -

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

- -

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Progressive/")}}
diff --git "a/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" "b/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" deleted file mode 100644 index 9508b0afdb..0000000000 --- "a/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Básico de Segurança da Informação -slug: Web/Security/Básico_de_Segurança_da_Informação -tags: - - Iniciante - - Segurança -translation_of: Web/Security/Information_Security_Basics ---- -

Entender o básico de segurança da informação pode ajudar você a evitar que seu software ou website estejam inseguros e vulneráveis a fraquezas que podem ser exploradas para ganhos financeiros ou outros motivos maliciosos. Estes artigos podem ajudar você a aprender o que você precisa. Com essa informação, você estará ciente do papel e importância da segurança no ciclo de desenvolvimento de software, além da distribuição do seu conteúdo.

- -

Confidencialidade, Integridade e Disponibilidade

- -
-
Descreve os objetivos de segurança primários, que são absolutamente fundamentais para o entendimento de segurança
-
Vulnerabilidades
-
Define as principais categorias de vulnerabilidades e discute a presença de vulnerabilidades em todo software
-
Ameaças
-
Introduz brevemente os principais conceitos de ameaças
-
Controles de Segurança
-
Define as principais categorias de controle de segurança e discute suas potenciais desvantagens
-
Segurança TCP/IP
-
Uma visão geral do modelo TCP/IP, com um foco em considerações de segurança para SSL
-
- -

Veja também

- - diff --git a/files/pt-br/web/svg/intensivo_de_namespaces/index.html b/files/pt-br/web/svg/intensivo_de_namespaces/index.html deleted file mode 100644 index 35f50be610..0000000000 --- a/files/pt-br/web/svg/intensivo_de_namespaces/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Intensivo de Namespaces -slug: Web/SVG/Intensivo_de_Namespaces -tags: - - SVG - - XML -translation_of: Web/SVG/Namespaces_Crash_Course ---- -

Como um dialeto XML, o SVG tem namespace. É importante entender o conceito de namespaces e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos namespaces mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em Gecko que devem ser muito rigorosos. Tome um tempo para entender namespaces agora e irá te privar de muita dor de cabeça no futuro.

- -

Experiência

- -

Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e MathML podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.

- -

Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag <title>. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?

- -

Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração DOCTYPE". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração DOCTYPE, e SVG 1.2 nem terá um. O fato que declarações DOCTYPE (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração DOCTYPE causam dano.

- -

A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de namespaces" para as tags. 

- -

Declarando namespaces

- -

O que estas declarações de namespace parecem, e onde elas vão? Aqui vai um exemplo curto.

- -
<svg xmlns="http://www.w3.org/2000/svg">
-  <!-- mais tags aqui -->
-</svg>
-
- -

A declaração de namespace é fornecida por um atributo xmlns. Este atributo diz que a tag <svg> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de namespace 'http://www.w3.org/2000/svg' que é, com certeza, SVG. Note a declaração de namespace somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o namespace padrão, então o software sabe que todas as tags descendentes de tags <svg> também pertencem ao mesmo namespace. Softwares conferem para ver se eles reconhecem o nome de namespace para determinar se eles sabem como lidar com a marcação. 

- -

Note que nomes de namespace são somente strings, então o fato que o nome de namespace SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de namespace" é comumente usado ao invés de "nome de namespace".)

- -

Redeclarando o namespace padrão

- -

Se todos os descendentes da tag raiz também são definidos para estarem presentes no namespace padrão, como você mistura conteúdo de outro namespace? Fácil. Você apenas redefine o namespace padrão. Aqui vai um exemplo simples.

- -
<html xmlns="http://www.w3.org/1999/xhtml">
-  <body>
-    <!-- algumas tags XHTML aqui -->
-    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
-      <!-- algumas tags SVG aqui -->
-    </svg>
-    <!-- algumas tags XHTML aqui -->
-  </body>
-</html>
-
- -

Neste exemplo o atributo xmlns na tag raíz <html> declara o namespace padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag <svg>. A tag <svg> tem seu próprio atributo xmlns, e ao redeclarar o namespace padrão, isto conta para o software que a tag <svg> e suas descendentes (a menos que elas também redeclarem o namespace padrão) pertencem ao SVG.

- -

Viu? Namespaces não são tão difíceis.

- -

Declarando prefixos de namespaces

- -

Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um namespace, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo href definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.

- -
<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-  <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/>
-</svg>
-
- -

Este exemplo tem o atributo de aparência bastante incomum xmlns:xlink. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de namespace. Contudo, ao invés de definir o namespace padrão, esta declaração de namespace define o namespace para alguma coisa chamada como "prefixo namespace". Neste caso, nós escolhemos usar o prefixo xlink (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.

- -

Como seus nomes sugerem, prefixos de namespace são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de namespace e dois pontos antes do nomes de atributo como mostrado na tag <script> no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao namespace atribuído ao prefixo de namespace (XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.

- -

Note que é um erro de XML usar um prefixo que não foi ligado au um nome de namespace. A ligação criada pelo atributo xmlns:xlink no exemplo acima é absolutamente essencial se o atributo xlink:href não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags <a>, <use> e <image>, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.

- -

Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao namespace ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:

- -
<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg">
-  <body>
-    <h1>SVG incorporado inline no XHTML</h1>
-    <svg:svg width="300px" height="200px">
-      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
-    </svg:svg>
-  </body>
-</html>
-
- -

Note que pelo prefixo de namespace ser usado para a tag <svg:svg> e seu filho <svg:circle>, não foi necessário redeclarar o namespace padrão. Em geral, é melhor redeclarar o namespace padrão ao invés de prefixar muitas tags desta forma. 

- -

Scripting em XML com namespaces

- -

Namespaces não afetam somente a marcação, mas também o scripting. Se você escreve scripts para XML com namespace, como SVG, continue lendo.

- -

A recomendação DOM Level 1 foi criado antes da recomendação original Namespaces in XML ser lançada; assim sendo, DOM1 não está ciente de namespaces. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação DOM Level 2 Core adicionou equivalentes cientes do namespace de todos os métodos aplicáveis do DOM Nível 1. Quando estiver scripting em SVG, é importante usar os métodos cientes de namespace. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DOM1 (não use)DOM2 (use estes!)
createAttributecreateAttributeNS
createElementcreateElementNS
getAttributeNodegetAttributeNodeNS
getAttributegetAttributeNS
getElementsByTagNamegetElementsByTagNameNS (também added to Element)
getNamedItemgetNamedItemNS
hasAttributehasAttributeNS
removeAttributeremoveAttributeNS
removeNamedItemremoveNamedItemNS
setAttributesetAttributeNS
setAttributeNodesetAttributeNodeNS
setNamedItemsetNamedItemNS
- -

O primeiro argumento para todos os métodos cientes de namespace em DOM2 devem ser nomes de namespace (também conhecidos como namespace URI) do elemento ou atributo em questão. Para elementos SVG isto é 'http://www.w3.org/2000/svg'. Contudo, note cuidadosamente: as recomendações Namespaces in XML 1.1 declara que o nome de namespace para atributos sem um prefixo não tem um valor. Em outras palavras, states that the namespace name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, você deve usar nulo como nome de namespace para atributos não qualificados(sem prefixos). Então, para criar um elemento SVG rect usando document.createElementNS(), você deve escrever:

- -
document.createElementNS('http://www.w3.org/2000/svg', 'rect');
- -

Mas para recuperar o valor de atributo x em um elemento SVG rect, você deve escrever:

- -
rect.getAttributeNS(null, 'x');
- -

Note que isto não é o caso para atributos com um prefixo de namespace (atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o xlink:href requerem o nome de namespace que foi designado para aquele prefixo (http://www.w3.org/1999/xlink para XLink). Consequentemente para pegar o valor do atributo xlink:href de um elemento <a> em SVG você deveria escrever:

- -
elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
- -

Para definir atributos que tem um namespace, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo: 

- -
elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
- -

Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento <image> dinamicamente usando script: 

- -
var SVG_NS = 'http://www.w3.org/2000/svg';
-var XLink_NS = 'http://www.w3.org/1999/xlink';
-var image = document.createElementNS(SVG_NS, 'image');
-image.setAttributeNS(null, 'width', '100');
-image.setAttributeNS(null, 'height', '100');
-image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
-
- -

Conclusão

- -

Tenha certeza que você sempre declara os namespaces que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de namespace comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código: 

- -
<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-</svg>
-
- -

Mesmo que você não use todos aqueles namespaces em um documento, não há dano ao incluir declarações de namespace. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos namespaces não usados em datas posteriores. 

- -

Um exemplo completo

- -

Para um exemplo completo, veja SVG: Namespaces Crash Course: Example.

diff --git a/files/pt-br/web/svg/namespaces_crash_course/index.html b/files/pt-br/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..35f50be610 --- /dev/null +++ b/files/pt-br/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,186 @@ +--- +title: Intensivo de Namespaces +slug: Web/SVG/Intensivo_de_Namespaces +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +

Como um dialeto XML, o SVG tem namespace. É importante entender o conceito de namespaces e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos namespaces mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em Gecko que devem ser muito rigorosos. Tome um tempo para entender namespaces agora e irá te privar de muita dor de cabeça no futuro.

+ +

Experiência

+ +

Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e MathML podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.

+ +

Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag <title>. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?

+ +

Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração DOCTYPE". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração DOCTYPE, e SVG 1.2 nem terá um. O fato que declarações DOCTYPE (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração DOCTYPE causam dano.

+ +

A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de namespaces" para as tags. 

+ +

Declarando namespaces

+ +

O que estas declarações de namespace parecem, e onde elas vão? Aqui vai um exemplo curto.

+ +
<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- mais tags aqui -->
+</svg>
+
+ +

A declaração de namespace é fornecida por um atributo xmlns. Este atributo diz que a tag <svg> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de namespace 'http://www.w3.org/2000/svg' que é, com certeza, SVG. Note a declaração de namespace somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o namespace padrão, então o software sabe que todas as tags descendentes de tags <svg> também pertencem ao mesmo namespace. Softwares conferem para ver se eles reconhecem o nome de namespace para determinar se eles sabem como lidar com a marcação. 

+ +

Note que nomes de namespace são somente strings, então o fato que o nome de namespace SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de namespace" é comumente usado ao invés de "nome de namespace".)

+ +

Redeclarando o namespace padrão

+ +

Se todos os descendentes da tag raiz também são definidos para estarem presentes no namespace padrão, como você mistura conteúdo de outro namespace? Fácil. Você apenas redefine o namespace padrão. Aqui vai um exemplo simples.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <!-- algumas tags XHTML aqui -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
+      <!-- algumas tags SVG aqui -->
+    </svg>
+    <!-- algumas tags XHTML aqui -->
+  </body>
+</html>
+
+ +

Neste exemplo o atributo xmlns na tag raíz <html> declara o namespace padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag <svg>. A tag <svg> tem seu próprio atributo xmlns, e ao redeclarar o namespace padrão, isto conta para o software que a tag <svg> e suas descendentes (a menos que elas também redeclarem o namespace padrão) pertencem ao SVG.

+ +

Viu? Namespaces não são tão difíceis.

+ +

Declarando prefixos de namespaces

+ +

Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um namespace, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo href definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/>
+</svg>
+
+ +

Este exemplo tem o atributo de aparência bastante incomum xmlns:xlink. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de namespace. Contudo, ao invés de definir o namespace padrão, esta declaração de namespace define o namespace para alguma coisa chamada como "prefixo namespace". Neste caso, nós escolhemos usar o prefixo xlink (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.

+ +

Como seus nomes sugerem, prefixos de namespace são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de namespace e dois pontos antes do nomes de atributo como mostrado na tag <script> no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao namespace atribuído ao prefixo de namespace (XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.

+ +

Note que é um erro de XML usar um prefixo que não foi ligado au um nome de namespace. A ligação criada pelo atributo xmlns:xlink no exemplo acima é absolutamente essencial se o atributo xlink:href não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags <a>, <use> e <image>, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.

+ +

Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao namespace ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+  <body>
+    <h1>SVG incorporado inline no XHTML</h1>
+    <svg:svg width="300px" height="200px">
+      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
+    </svg:svg>
+  </body>
+</html>
+
+ +

Note que pelo prefixo de namespace ser usado para a tag <svg:svg> e seu filho <svg:circle>, não foi necessário redeclarar o namespace padrão. Em geral, é melhor redeclarar o namespace padrão ao invés de prefixar muitas tags desta forma. 

+ +

Scripting em XML com namespaces

+ +

Namespaces não afetam somente a marcação, mas também o scripting. Se você escreve scripts para XML com namespace, como SVG, continue lendo.

+ +

A recomendação DOM Level 1 foi criado antes da recomendação original Namespaces in XML ser lançada; assim sendo, DOM1 não está ciente de namespaces. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação DOM Level 2 Core adicionou equivalentes cientes do namespace de todos os métodos aplicáveis do DOM Nível 1. Quando estiver scripting em SVG, é importante usar os métodos cientes de namespace. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DOM1 (não use)DOM2 (use estes!)
createAttributecreateAttributeNS
createElementcreateElementNS
getAttributeNodegetAttributeNodeNS
getAttributegetAttributeNS
getElementsByTagNamegetElementsByTagNameNS (também added to Element)
getNamedItemgetNamedItemNS
hasAttributehasAttributeNS
removeAttributeremoveAttributeNS
removeNamedItemremoveNamedItemNS
setAttributesetAttributeNS
setAttributeNodesetAttributeNodeNS
setNamedItemsetNamedItemNS
+ +

O primeiro argumento para todos os métodos cientes de namespace em DOM2 devem ser nomes de namespace (também conhecidos como namespace URI) do elemento ou atributo em questão. Para elementos SVG isto é 'http://www.w3.org/2000/svg'. Contudo, note cuidadosamente: as recomendações Namespaces in XML 1.1 declara que o nome de namespace para atributos sem um prefixo não tem um valor. Em outras palavras, states that the namespace name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, você deve usar nulo como nome de namespace para atributos não qualificados(sem prefixos). Então, para criar um elemento SVG rect usando document.createElementNS(), você deve escrever:

+ +
document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+ +

Mas para recuperar o valor de atributo x em um elemento SVG rect, você deve escrever:

+ +
rect.getAttributeNS(null, 'x');
+ +

Note que isto não é o caso para atributos com um prefixo de namespace (atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o xlink:href requerem o nome de namespace que foi designado para aquele prefixo (http://www.w3.org/1999/xlink para XLink). Consequentemente para pegar o valor do atributo xlink:href de um elemento <a> em SVG você deveria escrever:

+ +
elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+ +

Para definir atributos que tem um namespace, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo: 

+ +
elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
+ +

Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento <image> dinamicamente usando script: 

+ +
var SVG_NS = 'http://www.w3.org/2000/svg';
+var XLink_NS = 'http://www.w3.org/1999/xlink';
+var image = document.createElementNS(SVG_NS, 'image');
+image.setAttributeNS(null, 'width', '100');
+image.setAttributeNS(null, 'height', '100');
+image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
+
+ +

Conclusão

+ +

Tenha certeza que você sempre declara os namespaces que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de namespace comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código: 

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+</svg>
+
+ +

Mesmo que você não use todos aqueles namespaces em um documento, não há dano ao incluir declarações de namespace. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos namespaces não usados em datas posteriores. 

+ +

Um exemplo completo

+ +

Para um exemplo completo, veja SVG: Namespaces Crash Course: Example.

diff --git a/files/pt-br/web/tutoriais/index.html b/files/pt-br/web/tutoriais/index.html deleted file mode 100644 index 68be26f522..0000000000 --- a/files/pt-br/web/tutoriais/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Tutoriais -slug: Web/Tutoriais -tags: - - Artigos Web - - CSS - - Codificando - - Código - - Desenvolvimento Web - - GitHub - - Guía - - HTML - - Iniciante - - JavaScript - - MDN - - Navegador - - Tutorial -translation_of: Web/Tutorials ---- -

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

- -

Para nível iniciante da Web

- -
-
Iniciando com a Web 
-
Iniciando com a Web é  uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.
-
- -

Tutoriais de HTML

- -

Nível inicial

- -
-
-
-
Introdução ao HTML
-
Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar hiperlinks e fazer uso do HTML para estruturar uma página da web.
-
Referência de Elementos HTML da MDN
-
Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.
-
-
- -
-
-
Criando uma Página Web simples com HTML (The Blog Starter)
-
Um guia HTML para iniciantes que inclui explicações de tags comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.
-
Guia do Iniciante em HTML (Website Setup)
-
Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.
-
Desafio HTML (Wikiversity)
-
Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, Eu devo usar um elemento <h2> ou um elemento <strong>?), focando numa melhor produtividade.
-
-
-
- -

Nível Intermediário

- -
-
-
-
Multimídia e Incorporação
-
Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.
-
-
- -
-
-
Tabelas em HTML
-
Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.
-
-
-
- -

Nível avançado

- -
-
-
-
Formulários em HTML (HTML forms)
-
Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.
-
Dicas para criar páginas HTML de carregamento rápido
-
Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.
-
-
-
- -

Tutoriais CSS

- -

Nível inicial

- -
-
-
-
CSS Básico
-
CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. CSS Básico traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?
-
Introdução ao CSS
-
Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de boxes e debug em CSS.
-
-
- -
-
-
Estilizando Boxes
-
A seguir nós veremos em estilização boxes (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de boxes.
-
Estilizando texto
-
Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e links.
-
Questões comuns de CSS
-
Perguntas e respostas comuns para iniciantes.
-
-
-
- -

Nível intermediário

- -
-
-
-
CSS layout
-
Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à viewport e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no layout CSS, olhando para diferentes configurações de tela, métodos de layout tradicionais envolvendo flutuação e posicionamento e novas ferramentas de layout como o flexbox.
-
Referência CSS
-
Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.
-
-
- -
-
-
Grades Fluídas (Uma lista a parte)
-
Layouts de design que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.
-
Desafios CSS (Wikiversity)
-
Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.
-
-
-
- -

Nível avançado

- -
-
-
-
Usando transformações CSS
-
Aplique rotação, inclinação, escala e translação utilizando CSS.
-
CSS Transições
-
Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.
-
-
- -
-
-
Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)
-
O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.
-
Começando a escrever CSS (David Walsh)
-
Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.
-
-
-
- -
-
-
Tutorial Canvas
-
Aprenda a desenhar gráficos usando scripts  e usando o elemento canvas.
-
HTML5 Doctor
-
Artigos sobre o uso de HTML5.
-
-
- -

Tutoriais Javascript

- -

Nível iniciante

- -
-
-
-
-
Primeiros passos em JavaScript
-
Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como O que é JavaScript?, Com o que se parece? e O que se pode fazer com ele? antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.
-
Construindo blocos com JavaScript
-
Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.
-
-
- -
-
-
Começando com JavaScript
-
O que é JavaScript e como pode lhe ajudar?
-
Codecademy (Codecademy)
-
Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.
-
-
-
- -

Nível intermediário

- -
-
-
-
Introdução a objetos em JavaScript
-
Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.
-
APIs da web do lado do cliente
-
Quando se programa em JavaScript do lado do cliente (client-side) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.
-
-
- -
-
-
Uma Reintrodução ao JavaScript
-
Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.
-
JavaScript Eloquente
-
Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.
-
Falando JavaScript (Dr. Axel Rauschmayer)
-
Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.
-
Padrões de Design Essenciais em JavaScript (Addy Osmani)
-
Uma introdução para padrões de design essenciais em JavaScript.
-
-
-
- -

Nível avançado

- -
-
-
-
Guia de JavaScript
-
Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.
-
Você não conhece JS (Kyle Simpson)
-
Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.
-
JavaScript Garden
-
Documentação de partes mais peculiares do JavaScript.
-
Explorando ES6 (Dr. Axel Rauschmayer)
-
Informações profundas e confiáveis sobre ECMAScript 2015.
-
-
- -
Padrões JavaScipt - -
-
Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.
-
Como navegadores trabalham
-
Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.
-
Vídeos sobre JavaScript (GitHub)
-
Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.
-
-
-
- -

Estendendo o desenvolvimento

- -
-
-
-
WebExtensions
-
WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.
-
-
-
diff --git a/files/pt-br/web/tutorials/index.html b/files/pt-br/web/tutorials/index.html new file mode 100644 index 0000000000..68be26f522 --- /dev/null +++ b/files/pt-br/web/tutorials/index.html @@ -0,0 +1,253 @@ +--- +title: Tutoriais +slug: Web/Tutoriais +tags: + - Artigos Web + - CSS + - Codificando + - Código + - Desenvolvimento Web + - GitHub + - Guía + - HTML + - Iniciante + - JavaScript + - MDN + - Navegador + - Tutorial +translation_of: Web/Tutorials +--- +

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

+ +

Para nível iniciante da Web

+ +
+
Iniciando com a Web 
+
Iniciando com a Web é  uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.
+
+ +

Tutoriais de HTML

+ +

Nível inicial

+ +
+
+
+
Introdução ao HTML
+
Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar hiperlinks e fazer uso do HTML para estruturar uma página da web.
+
Referência de Elementos HTML da MDN
+
Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.
+
+
+ +
+
+
Criando uma Página Web simples com HTML (The Blog Starter)
+
Um guia HTML para iniciantes que inclui explicações de tags comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.
+
Guia do Iniciante em HTML (Website Setup)
+
Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.
+
Desafio HTML (Wikiversity)
+
Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, Eu devo usar um elemento <h2> ou um elemento <strong>?), focando numa melhor produtividade.
+
+
+
+ +

Nível Intermediário

+ +
+
+
+
Multimídia e Incorporação
+
Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.
+
+
+ +
+
+
Tabelas em HTML
+
Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Formulários em HTML (HTML forms)
+
Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.
+
Dicas para criar páginas HTML de carregamento rápido
+
Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.
+
+
+
+ +

Tutoriais CSS

+ +

Nível inicial

+ +
+
+
+
CSS Básico
+
CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. CSS Básico traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?
+
Introdução ao CSS
+
Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de boxes e debug em CSS.
+
+
+ +
+
+
Estilizando Boxes
+
A seguir nós veremos em estilização boxes (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de boxes.
+
Estilizando texto
+
Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e links.
+
Questões comuns de CSS
+
Perguntas e respostas comuns para iniciantes.
+
+
+
+ +

Nível intermediário

+ +
+
+
+
CSS layout
+
Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à viewport e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no layout CSS, olhando para diferentes configurações de tela, métodos de layout tradicionais envolvendo flutuação e posicionamento e novas ferramentas de layout como o flexbox.
+
Referência CSS
+
Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.
+
+
+ +
+
+
Grades Fluídas (Uma lista a parte)
+
Layouts de design que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.
+
Desafios CSS (Wikiversity)
+
Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Usando transformações CSS
+
Aplique rotação, inclinação, escala e translação utilizando CSS.
+
CSS Transições
+
Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.
+
+
+ +
+
+
Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)
+
O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.
+
Começando a escrever CSS (David Walsh)
+
Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.
+
+
+
+ +
+
+
Tutorial Canvas
+
Aprenda a desenhar gráficos usando scripts  e usando o elemento canvas.
+
HTML5 Doctor
+
Artigos sobre o uso de HTML5.
+
+
+ +

Tutoriais Javascript

+ +

Nível iniciante

+ +
+
+
+
+
Primeiros passos em JavaScript
+
Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como O que é JavaScript?, Com o que se parece? e O que se pode fazer com ele? antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.
+
Construindo blocos com JavaScript
+
Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.
+
+
+ +
+
+
Começando com JavaScript
+
O que é JavaScript e como pode lhe ajudar?
+
Codecademy (Codecademy)
+
Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.
+
+
+
+ +

Nível intermediário

+ +
+
+
+
Introdução a objetos em JavaScript
+
Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.
+
APIs da web do lado do cliente
+
Quando se programa em JavaScript do lado do cliente (client-side) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.
+
+
+ +
+
+
Uma Reintrodução ao JavaScript
+
Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.
+
JavaScript Eloquente
+
Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.
+
Falando JavaScript (Dr. Axel Rauschmayer)
+
Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.
+
Padrões de Design Essenciais em JavaScript (Addy Osmani)
+
Uma introdução para padrões de design essenciais em JavaScript.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Guia de JavaScript
+
Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.
+
Você não conhece JS (Kyle Simpson)
+
Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.
+
JavaScript Garden
+
Documentação de partes mais peculiares do JavaScript.
+
Explorando ES6 (Dr. Axel Rauschmayer)
+
Informações profundas e confiáveis sobre ECMAScript 2015.
+
+
+ +
Padrões JavaScipt + +
+
Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.
+
Como navegadores trabalham
+
Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.
+
Vídeos sobre JavaScript (GitHub)
+
Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.
+
+
+
+ +

Estendendo o desenvolvimento

+ +
+
+
+
WebExtensions
+
WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.
+
+
+
diff --git a/files/pt-br/web/web_components/usando_custom_elements/index.html b/files/pt-br/web/web_components/usando_custom_elements/index.html deleted file mode 100644 index 55af21ca48..0000000000 --- a/files/pt-br/web/web_components/usando_custom_elements/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: Usando custom elements -slug: Web/Web_Components/Usando_custom_elements -tags: - - Autonomos - - Classes - - Guide - - HTML - - Web Components - - custom elements - - customized -translation_of: Web/Web_Components/Using_custom_elements ---- -
{{DefaultAPISidebar("Web Components")}}
- -

Um dos principais recursos do padrão de Web Components é a capacidade de criar elementos personalizados que encapsulam sua funcionalidade em uma página HTML, em vez de ter que se contentar com um lote longo e aninhado de elementos que, juntos, fornecem um recurso de página personalizada. Este artigo apresenta o uso da API de Custom Elements.

- -
-

Nota: Custom elements são suportados por padrão no Firefox, Chrome e Edge (76). Opera e Safari até agora suportam apenas custom elements autônomos.

-
- -

Visão de alto nível

- -

O controlador de custom elements em um documento da web é o objeto {{domxref("CustomElementRegistry")}} — este objeto permite que você registre um custom element na página, retorne informações sobre quais custom elements estão registrados, etc..

- -

Para registar um custom element na página, use o método {{domxref("CustomElementRegistry.define()")}}. Isso leva como argumentos:

- -
    -
  • Um {{domxref("DOMString")}} que representa o nome que você está dando ao elemento. Observe que os nomes dos custom elements requerem o uso de um traço (kebab-case); não podem ser palavras isoladas.
    • -
  • Um objeto de classe que define o comportamento do elemento.
    • -
  • Opcionalmente, um objeto de opções contendo uma propriedade extends, que especifica o elemento integrado do qual seu elemento herda, se houver (relevante apenas para elementos integrados personalizados; consulte a definição abaixo).
    • -
- -

Então, por exemplo, podemos definir um custom element word-count (contagem-palavras) assim:

- -
customElements.define('word-count', WordCount, { extends: 'p' });
- -

O elemento é chamado de word-count, seu objeto de classe é WordCount, e estende o elemento {{htmlelement("p")}}.

- -

O objeto de classe de um custom element é escrito usando a sintaxe de classe ES 2015. Por exemplo, WordCount é estruturado assim::

- -
class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // Funcionalidade do elemento escrita aqui
-
-    ...
-  }
-}
- -

Este é apenas um exemplo simples, mas você pode fazer mais aqui. É possível definir retornos de chamada de ciclo de vida específicos dentro da classe, que são executados em pontos específicos do ciclo de vida do elemento. Por exemplo, connectedCallback é invocado cada vez que o custom element é anexado a um elemento conectado ao documento, enquanto attributeChangedCallback é invocado quando um dos atributos do elemento customizado é adicionado, removido ou alterado.

- -

Você aprenderá mais sobre eles na seção {{anch("Using the lifecycle callbacks")}} abaixo.

- -

Existem dois tipos de custom elements:

- -
    -
  • Autonomous custom elements são autonômos — eles não herdam de elementos HTML padrão. Você os usa em uma página, literalmente escrevendo-os como um elemento HTML. Por exemplo <popup-info>, ou document.createElement("popup-info").
    • -
  • Customized built-in elements herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo {{htmlattrxref("is")}} (ou propriedade). Por exemplo <p is="word-count">, ou document.createElement("p", { is: "word-count" }).
    • -
- -

Trabalhando com alguns exemplos simples

- -

Neste ponto, vamos examinar mais alguns exemplos simples para mostrar como os custom elements são criados com mais detalhes.

- -

Custom elements autônomos

- -

Vamos dar uma olhada em um exemplo de um custom element autônomo — <popup-info-box> (veja um exemplo ao vivo). Isso pega um imagem de ícone e uma sequência de texto e incorpora o ícone na página. Quando o ícone está em foco, ele exibe o texto em uma caixa pop-up de informações para fornecer mais informações no contexto.

- -

Para começar, o arquivo JavaScript define uma classe chamada PopUpInfo, que estende a classe genérica {{domxref("HTMLElement")}}.

- -
class PopUpInfo extends HTMLElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // escreva a funcionalidade do elemento aqui
-
-    ...
-  }
-}
- -

O trecho de código anterior contém a definição do constructor() da classe, que sempre começa chamando super() para que a cadeia de protótipo correta seja estabelecida.

- -

Dentro do construtor, definimos toda a funcionalidade que o elemento terá quando uma instância dele for instanciada. Neste caso, anexamos uma shadow root ao custom element, usamos alguma manipulação de DOM para criar a estrutura de shadow DOM interna do elemento - que é então anexada à shadow root - e, finalmente, anexamos algum CSS à shadow root para estilizá-la.

- -
// Create a shadow root
-this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
-
-// Create (nested) span elements
-const wrapper = document.createElement('span');
-wrapper.setAttribute('class','wrapper');
-const icon = wrapper.appendChild(document.createElement('span'));
-icon.setAttribute('class','icon');
-icon.setAttribute('tabindex', 0);
-// Insert icon from defined attribute or default icon
-const img = icon.appendChild(document.createElement('img'));
-img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png';
-
-const info = wrapper.appendChild(document.createElement('span'));
-info.setAttribute('class','info');
-// Take attribute content and put it inside the info span
-info.textContent = this.getAttribute('data-text');
-
-// Create some CSS to apply to the shadow dom
-const style = document.createElement('style');
-style.textContent = '.wrapper {' +
-// CSS truncated for brevity
-
-// attach the created elements to the shadow DOM
-this.shadowRoot.append(style,wrapper);
-
-
- -

Por fim, registramos nosso custom element no CustomElementRegistry usando o métododefine() mencionado anteriormente — nos parâmetros especificamos o nome do elemento e, em seguida, o nome da classe que define sua funcionalidade:

- -
customElements.define('popup-info', PopUpInfo);
- -

Agora está disponível para uso em nossa página. Em nosso HTML, nós o usamos assim:

- -
<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
-  is an extra security feature — it is the last 3 or 4 numbers on the
-  back of your card."></popup-info>
- -
-

Note: Você pode ver o código-fonte JavaScript completo aqui.

-
- -

Estilos internos vs. externos

- -

No exemplo acima, aplicamos o estilo ao Shadow DOM usando um elemento {{htmlelement("style")}}, mas é perfeitamente possível fazer isso referenciando uma folha de estilo externa de um elemento {{htmlelement("link")}} em vez disso.

- -

Por exemplo, dê uma olhada neste código de nosso exemplo popup-info-box-external-stylesheet (veja o código-fonte):

- -
// Aplicar estilos externos ao shadow dom
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
-
-// Anexe o elemento criado ao shadow dom
-shadow.appendChild(linkElem);
- -

Observe que os elementos {{htmlelement("link")}} não bloqueiam a pintura do shadow root, portanto, pode haver um flash de conteúdo não estilizado (FOUC) enquanto a folha de estilo é carregada.

- -

Muitos navegadores modernos implementam uma otimização para tags {{htmlelement("style")}} clonadas de um nó comum ou que tenham texto idêntico, para permitir que compartilhem uma única folha de estilo de apoio. Com essa otimização, o desempenho dos estilos externo e interno deve ser semelhante.

- -

Customized built-in elements

- -

Agora vamos dar uma olhada em outro exemplo de custom element integrado — expanding-list (ver ao vivo também). Isso transforma qualquer lista não ordenada em um menu de expansão/recolhimento.

- -

Em primeiro lugar, definimos a classe do nosso elemento, da mesma maneira que antes:

- -
class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // escreva a funcionalidade do elemento aqui
-
-    ...
-  }
-}
- -

Não explicaremos a funcionalidade do elemento em detalhes aqui, mas você pode descobrir como ele funciona verificando o código-fonte. A única diferença real aqui é que nosso elemento está estendendo a interface {{domxref("HTMLUListElement")}}, e não {{domxref("HTMLElement")}}. Portanto, ele tem todas as características de um elemento {{htmlelement("ul")}} com a funcionalidade que definimos construída no topo, ao invés de ser um elemento autônomo. Isso é o que o torna um elemento integrado personalizado, em vez de um elemento autônomo.

- -

Em seguida, registramos o elemento usando o método define() como antes, exceto que, desta vez, ele também inclui um objeto de opções que detalha de qual elemento nosso elemento personalizado herda:

- -
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
- -

Usar o elemento integrado em um documento da web também parece um pouco diferente:

- -
<ul is="expanding-list">
-
-  ...
-
-</ul>
- -

Você usa um elemento <ul> normalmente, mas especifica o nome do elemento personalizado dentro do atributo is.

- -
-

Nota: Novamente, você pode ver o código-fonte JavaScript completo aqui.

-
- -

Usando os callbacks do ciclo de vida

- -

Você pode definir vários retornos de chamada diferentes dentro da definição de classe de um custom element, que disparam em diferentes pontos do ciclo de vida do elemento:

- -
    -
  • connectedCallback: Chamado sempre que o custom element é anexado a um elemento conectado ao documento. Isso acontecerá sempre que o nó for movido e pode acontecer antes que o conteúdo do elemento tenha sido totalmente analisado. - -
    -

    Nota: connectedCallback pode ser chamado assim que seu elemento não estiver mais conectado, use {{domxref("Node.isConnected")}} para ter certeza.

    -
    -
    • -
  • disconnectedCallback: Invocado sempre que o custom element é desconectado do documento DOM.
    • -
  • adoptedCallback: Invocado sempre que o custom element é movido para um novo documento.
    • -
  • attributeChangedCallback: Invocado sempre que um dos atributos do custom element é adicionado, removido ou alterado. Os atributos a serem observados na mudança são especificados em um método estático observedAttributes
    • -
- -

Vejamos um exemplo em uso. O código abaixo é retirado do exemplo life-cycle-callbacks (ver rodando ao vivo). Este é um exemplo trivial que simplesmente gera um quadrado colorido de tamanho fixo na página. O custom element tem a seguinte aparência:

- -
<custom-square l="100" c="red"></custom-square>
- -

O construtor da classe é realmente simples - aqui anexamos um shadow DOM ao elemento e, em seguida, anexamos os elementos vazios {{htmlelement("div")}} e {{htmlelement("style")}} ao shadow root:

- -
const shadow = this.attachShadow({mode: 'open'});
-
-const div = document.createElement('div');
-const style = document.createElement('style');
-shadow.appendChild(style);
-shadow.appendChild(div);
- -

A função chave neste exemplo é updateStyle() — isso pega um elemento, pega seu shadow root, encontra seu elemento <style>, e adiciona {{cssxref("width")}}, {{cssxref("height")}}, e {{cssxref("background-color")}} para o estilo.

- -
function updateStyle(elem) {
-  const shadow = elem.shadowRoot;
-  shadow.querySelector('style').textContent = `
-    div {
-      width: ${elem.getAttribute('l')}px;
-      height: ${elem.getAttribute('l')}px;
-      background-color: ${elem.getAttribute('c')};
-    }
-  `;
-}
- -

As atualizações reais são todas tratadas pelos retornos de chamada do ciclo de vida, que são colocados dentro da definição da classe como métodos. O connectedCallback() é executado sempre que o elemento é adicionado ao DOM - aqui, executamos a função updateStyle() para garantir que o quadrado seja estilizado conforme definido em seus atributos:

- -
connectedCallback() {
-  console.log('Custom square element added to page.');
-  updateStyle(this);
-}
- -

Os retornos de chamada disconnectedCallback() e adoptedCallback() registram mensagens simples no console para nos informar quando o elemento é removido do DOM ou movido para uma página diferente:

- -
disconnectedCallback() {
-  console.log('Custom square element removed from page.');
-}
-
-adoptedCallback() {
-  console.log('Custom square element moved to new page.');
-}
- -

O attributeChangedCallback() é executado sempre que um dos atributos do elemento é alterado de alguma forma. Como você pode ver por suas propriedades, é possível atuar sobre os atributos individualmente, observando seus nomes e antigos e novos valores de atributos. Neste caso, entretanto, estamos apenas executando a função updateStyle() novamente para garantir que o estilo do quadrado seja atualizado de acordo com os novos valores:

- -
attributeChangedCallback(name, oldValue, newValue) {
-  console.log('Custom square element attributes changed.');
-  updateStyle(this);
-}
- -

Observe que, para fazer com que o retorno de chamada attributeChangedCallback() seja acionado quando um atributo for alterado, você deve observar os atributos. Isso é feito especificando um método static get observedAttributes() dentro da classe de custom element - isso deve retornar um array contendo os nomes dos atributos que você deseja observar:

- -
static get observedAttributes() { return ['c', 'l']; }
- -

Isso é colocado bem no topo do construtor, em nosso exemplo.

- -
-

Nota: Encontre o código-fonte JavaScript completo aqui.

-
- -

Polyfills vs. classes

- -

Polyfills de Custom Element podem corrigir construtores nativos, como HTMLElement e outros, e retornar uma instância diferente daquela recém-criada.

- -

Se você precisar de um constructor e uma chamada de super obrigatória, lembre-se de passar argumentos opcionais e retornar o resultado de tal chamada de super.

- -
class CustomElement extends HTMLElement {
-  constructor(...args) {
-    const self = super(...args);
-    // self functionality written in here
-    // self.addEventListener(...)
-    // return the right context
-    return self;
-  }
-}
- -

Se você não precisa realizar nenhuma operação no construtor, você pode simplesmente omiti-lo para que seu comportamento nativo (veja a seguir) seja preservado.

- -
 constructor(...args) { return super(...args); }
-
- -

Transpiladores vs. classes

- -

Observe que as classes ES2015 não podem ser transpiladas de forma confiável em Babel 6 ou TypeScript visando navegadores legados. Você pode usar o Babel 7 ou o babel-plugin-transform-builtin-classes para Babel 6, e target ES2015 em TypeScript em vez do legado..

- -

Bibliotecas

- -

Existem várias bibliotecas que são construídas em Web Components com o objetivo de aumentar o nível de abstração ao criar elementos personalizados. Algumas dessas bibliotecas são snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, Stencil e hyperHTML-Element.

diff --git a/files/pt-br/web/web_components/using_custom_elements/index.html b/files/pt-br/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..55af21ca48 --- /dev/null +++ b/files/pt-br/web/web_components/using_custom_elements/index.html @@ -0,0 +1,289 @@ +--- +title: Usando custom elements +slug: Web/Web_Components/Usando_custom_elements +tags: + - Autonomos + - Classes + - Guide + - HTML + - Web Components + - custom elements + - customized +translation_of: Web/Web_Components/Using_custom_elements +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

Um dos principais recursos do padrão de Web Components é a capacidade de criar elementos personalizados que encapsulam sua funcionalidade em uma página HTML, em vez de ter que se contentar com um lote longo e aninhado de elementos que, juntos, fornecem um recurso de página personalizada. Este artigo apresenta o uso da API de Custom Elements.

+ +
+

Nota: Custom elements são suportados por padrão no Firefox, Chrome e Edge (76). Opera e Safari até agora suportam apenas custom elements autônomos.

+
+ +

Visão de alto nível

+ +

O controlador de custom elements em um documento da web é o objeto {{domxref("CustomElementRegistry")}} — este objeto permite que você registre um custom element na página, retorne informações sobre quais custom elements estão registrados, etc..

+ +

Para registar um custom element na página, use o método {{domxref("CustomElementRegistry.define()")}}. Isso leva como argumentos:

+ +
    +
  • Um {{domxref("DOMString")}} que representa o nome que você está dando ao elemento. Observe que os nomes dos custom elements requerem o uso de um traço (kebab-case); não podem ser palavras isoladas.
    • +
  • Um objeto de classe que define o comportamento do elemento.
    • +
  • Opcionalmente, um objeto de opções contendo uma propriedade extends, que especifica o elemento integrado do qual seu elemento herda, se houver (relevante apenas para elementos integrados personalizados; consulte a definição abaixo).
    • +
+ +

Então, por exemplo, podemos definir um custom element word-count (contagem-palavras) assim:

+ +
customElements.define('word-count', WordCount, { extends: 'p' });
+ +

O elemento é chamado de word-count, seu objeto de classe é WordCount, e estende o elemento {{htmlelement("p")}}.

+ +

O objeto de classe de um custom element é escrito usando a sintaxe de classe ES 2015. Por exemplo, WordCount é estruturado assim::

+ +
class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // Funcionalidade do elemento escrita aqui
+
+    ...
+  }
+}
+ +

Este é apenas um exemplo simples, mas você pode fazer mais aqui. É possível definir retornos de chamada de ciclo de vida específicos dentro da classe, que são executados em pontos específicos do ciclo de vida do elemento. Por exemplo, connectedCallback é invocado cada vez que o custom element é anexado a um elemento conectado ao documento, enquanto attributeChangedCallback é invocado quando um dos atributos do elemento customizado é adicionado, removido ou alterado.

+ +

Você aprenderá mais sobre eles na seção {{anch("Using the lifecycle callbacks")}} abaixo.

+ +

Existem dois tipos de custom elements:

+ +
    +
  • Autonomous custom elements são autonômos — eles não herdam de elementos HTML padrão. Você os usa em uma página, literalmente escrevendo-os como um elemento HTML. Por exemplo <popup-info>, ou document.createElement("popup-info").
    • +
  • Customized built-in elements herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo {{htmlattrxref("is")}} (ou propriedade). Por exemplo <p is="word-count">, ou document.createElement("p", { is: "word-count" }).
    • +
+ +

Trabalhando com alguns exemplos simples

+ +

Neste ponto, vamos examinar mais alguns exemplos simples para mostrar como os custom elements são criados com mais detalhes.

+ +

Custom elements autônomos

+ +

Vamos dar uma olhada em um exemplo de um custom element autônomo — <popup-info-box> (veja um exemplo ao vivo). Isso pega um imagem de ícone e uma sequência de texto e incorpora o ícone na página. Quando o ícone está em foco, ele exibe o texto em uma caixa pop-up de informações para fornecer mais informações no contexto.

+ +

Para começar, o arquivo JavaScript define uma classe chamada PopUpInfo, que estende a classe genérica {{domxref("HTMLElement")}}.

+ +
class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // escreva a funcionalidade do elemento aqui
+
+    ...
+  }
+}
+ +

O trecho de código anterior contém a definição do constructor() da classe, que sempre começa chamando super() para que a cadeia de protótipo correta seja estabelecida.

+ +

Dentro do construtor, definimos toda a funcionalidade que o elemento terá quando uma instância dele for instanciada. Neste caso, anexamos uma shadow root ao custom element, usamos alguma manipulação de DOM para criar a estrutura de shadow DOM interna do elemento - que é então anexada à shadow root - e, finalmente, anexamos algum CSS à shadow root para estilizá-la.

+ +
// Create a shadow root
+this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
+
+// Create (nested) span elements
+const wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+const icon = wrapper.appendChild(document.createElement('span'));
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+// Insert icon from defined attribute or default icon
+const img = icon.appendChild(document.createElement('img'));
+img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png';
+
+const info = wrapper.appendChild(document.createElement('span'));
+info.setAttribute('class','info');
+// Take attribute content and put it inside the info span
+info.textContent = this.getAttribute('data-text');
+
+// Create some CSS to apply to the shadow dom
+const style = document.createElement('style');
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow DOM
+this.shadowRoot.append(style,wrapper);
+
+
+ +

Por fim, registramos nosso custom element no CustomElementRegistry usando o métododefine() mencionado anteriormente — nos parâmetros especificamos o nome do elemento e, em seguida, o nome da classe que define sua funcionalidade:

+ +
customElements.define('popup-info', PopUpInfo);
+ +

Agora está disponível para uso em nossa página. Em nosso HTML, nós o usamos assim:

+ +
<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."></popup-info>
+ +
+

Note: Você pode ver o código-fonte JavaScript completo aqui.

+
+ +

Estilos internos vs. externos

+ +

No exemplo acima, aplicamos o estilo ao Shadow DOM usando um elemento {{htmlelement("style")}}, mas é perfeitamente possível fazer isso referenciando uma folha de estilo externa de um elemento {{htmlelement("link")}} em vez disso.

+ +

Por exemplo, dê uma olhada neste código de nosso exemplo popup-info-box-external-stylesheet (veja o código-fonte):

+ +
// Aplicar estilos externos ao shadow dom
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Anexe o elemento criado ao shadow dom
+shadow.appendChild(linkElem);
+ +

Observe que os elementos {{htmlelement("link")}} não bloqueiam a pintura do shadow root, portanto, pode haver um flash de conteúdo não estilizado (FOUC) enquanto a folha de estilo é carregada.

+ +

Muitos navegadores modernos implementam uma otimização para tags {{htmlelement("style")}} clonadas de um nó comum ou que tenham texto idêntico, para permitir que compartilhem uma única folha de estilo de apoio. Com essa otimização, o desempenho dos estilos externo e interno deve ser semelhante.

+ +

Customized built-in elements

+ +

Agora vamos dar uma olhada em outro exemplo de custom element integrado — expanding-list (ver ao vivo também). Isso transforma qualquer lista não ordenada em um menu de expansão/recolhimento.

+ +

Em primeiro lugar, definimos a classe do nosso elemento, da mesma maneira que antes:

+ +
class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // escreva a funcionalidade do elemento aqui
+
+    ...
+  }
+}
+ +

Não explicaremos a funcionalidade do elemento em detalhes aqui, mas você pode descobrir como ele funciona verificando o código-fonte. A única diferença real aqui é que nosso elemento está estendendo a interface {{domxref("HTMLUListElement")}}, e não {{domxref("HTMLElement")}}. Portanto, ele tem todas as características de um elemento {{htmlelement("ul")}} com a funcionalidade que definimos construída no topo, ao invés de ser um elemento autônomo. Isso é o que o torna um elemento integrado personalizado, em vez de um elemento autônomo.

+ +

Em seguida, registramos o elemento usando o método define() como antes, exceto que, desta vez, ele também inclui um objeto de opções que detalha de qual elemento nosso elemento personalizado herda:

+ +
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Usar o elemento integrado em um documento da web também parece um pouco diferente:

+ +
<ul is="expanding-list">
+
+  ...
+
+</ul>
+ +

Você usa um elemento <ul> normalmente, mas especifica o nome do elemento personalizado dentro do atributo is.

+ +
+

Nota: Novamente, você pode ver o código-fonte JavaScript completo aqui.

+
+ +

Usando os callbacks do ciclo de vida

+ +

Você pode definir vários retornos de chamada diferentes dentro da definição de classe de um custom element, que disparam em diferentes pontos do ciclo de vida do elemento:

+ +
    +
  • connectedCallback: Chamado sempre que o custom element é anexado a um elemento conectado ao documento. Isso acontecerá sempre que o nó for movido e pode acontecer antes que o conteúdo do elemento tenha sido totalmente analisado. + +
    +

    Nota: connectedCallback pode ser chamado assim que seu elemento não estiver mais conectado, use {{domxref("Node.isConnected")}} para ter certeza.

    +
    +
    • +
  • disconnectedCallback: Invocado sempre que o custom element é desconectado do documento DOM.
    • +
  • adoptedCallback: Invocado sempre que o custom element é movido para um novo documento.
    • +
  • attributeChangedCallback: Invocado sempre que um dos atributos do custom element é adicionado, removido ou alterado. Os atributos a serem observados na mudança são especificados em um método estático observedAttributes
    • +
+ +

Vejamos um exemplo em uso. O código abaixo é retirado do exemplo life-cycle-callbacks (ver rodando ao vivo). Este é um exemplo trivial que simplesmente gera um quadrado colorido de tamanho fixo na página. O custom element tem a seguinte aparência:

+ +
<custom-square l="100" c="red"></custom-square>
+ +

O construtor da classe é realmente simples - aqui anexamos um shadow DOM ao elemento e, em seguida, anexamos os elementos vazios {{htmlelement("div")}} e {{htmlelement("style")}} ao shadow root:

+ +
const shadow = this.attachShadow({mode: 'open'});
+
+const div = document.createElement('div');
+const style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);
+ +

A função chave neste exemplo é updateStyle() — isso pega um elemento, pega seu shadow root, encontra seu elemento <style>, e adiciona {{cssxref("width")}}, {{cssxref("height")}}, e {{cssxref("background-color")}} para o estilo.

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  shadow.querySelector('style').textContent = `
+    div {
+      width: ${elem.getAttribute('l')}px;
+      height: ${elem.getAttribute('l')}px;
+      background-color: ${elem.getAttribute('c')};
+    }
+  `;
+}
+ +

As atualizações reais são todas tratadas pelos retornos de chamada do ciclo de vida, que são colocados dentro da definição da classe como métodos. O connectedCallback() é executado sempre que o elemento é adicionado ao DOM - aqui, executamos a função updateStyle() para garantir que o quadrado seja estilizado conforme definido em seus atributos:

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+ +

Os retornos de chamada disconnectedCallback() e adoptedCallback() registram mensagens simples no console para nos informar quando o elemento é removido do DOM ou movido para uma página diferente:

+ +
disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}
+ +

O attributeChangedCallback() é executado sempre que um dos atributos do elemento é alterado de alguma forma. Como você pode ver por suas propriedades, é possível atuar sobre os atributos individualmente, observando seus nomes e antigos e novos valores de atributos. Neste caso, entretanto, estamos apenas executando a função updateStyle() novamente para garantir que o estilo do quadrado seja atualizado de acordo com os novos valores:

+ +
attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

Observe que, para fazer com que o retorno de chamada attributeChangedCallback() seja acionado quando um atributo for alterado, você deve observar os atributos. Isso é feito especificando um método static get observedAttributes() dentro da classe de custom element - isso deve retornar um array contendo os nomes dos atributos que você deseja observar:

+ +
static get observedAttributes() { return ['c', 'l']; }
+ +

Isso é colocado bem no topo do construtor, em nosso exemplo.

+ +
+

Nota: Encontre o código-fonte JavaScript completo aqui.

+
+ +

Polyfills vs. classes

+ +

Polyfills de Custom Element podem corrigir construtores nativos, como HTMLElement e outros, e retornar uma instância diferente daquela recém-criada.

+ +

Se você precisar de um constructor e uma chamada de super obrigatória, lembre-se de passar argumentos opcionais e retornar o resultado de tal chamada de super.

+ +
class CustomElement extends HTMLElement {
+  constructor(...args) {
+    const self = super(...args);
+    // self functionality written in here
+    // self.addEventListener(...)
+    // return the right context
+    return self;
+  }
+}
+ +

Se você não precisa realizar nenhuma operação no construtor, você pode simplesmente omiti-lo para que seu comportamento nativo (veja a seguir) seja preservado.

+ +
 constructor(...args) { return super(...args); }
+
+ +

Transpiladores vs. classes

+ +

Observe que as classes ES2015 não podem ser transpiladas de forma confiável em Babel 6 ou TypeScript visando navegadores legados. Você pode usar o Babel 7 ou o babel-plugin-transform-builtin-classes para Babel 6, e target ES2015 em TypeScript em vez do legado..

+ +

Bibliotecas

+ +

Existem várias bibliotecas que são construídas em Web Components com o objetivo de aumentar o nível de abstração ao criar elementos personalizados. Algumas dessas bibliotecas são snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, Stencil e hyperHTML-Element.

diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html new file mode 100644 index 0000000000..132fba5881 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html @@ -0,0 +1,100 @@ +--- +title: Exemplo Avançado +slug: The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example +--- +

Exemplo Avançado

+ +

O exemplo avançado apresentará vários tipos de divs baseado em seu conteúdo. O exemplo permite tipificar o conteúdo muitas vezes, alternando entre tipos ascendente ou descendente. O JavaScript apenas carrega o arquivo .xsl a primeira vez, e prepara a variável xslloaded verdadeira (true) assim que o arquivo tiver terminado de carregar. Usando o método getParameter no obejto XSLTProcessor, o código pode decidir pelo tipo ascendente ou descendente. Se o parâmetro estiver vazio o padrão é ascendente (primeira vezes que o tipo aparece, como não há valor para isto no aarquivo XSLT). O valor do tipo é colocado usando setParameter.

+ +

The XSLT file has a parameter called myOrder that JavaScript sets to change the sorting method. The xsl:sort element's order attribute can access the value of the parameter using $myOrder. However, the value needs to be an XPATH expression and not a string, so {$myOrder} is used. Using {} evaluates the content as an XPath expression.

+ +

Once the transformation is complete, the result is appened to the document, as shown in this example.

+ +

Figure 7 : Sorting based on div contentview example

+ +
// XHTML Fragment:
+
+<div id="example">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+
+// JavaScript
+
+var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef);
+    xslloaded = true;
+  }
+
+  // create a new XML document in memory
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // we want to move a part of the DOM from an HTML document to an XML document.
+  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // after cloning, we append
+  xmlRef.appendChild(clonedNode);
+
+  // set the sorting parameter in the XSL file
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initiate the transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // clear the contents
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // add the new content from the transformation
+  document.getElementById("example").appendChild(fragment)
+}
+
+// XSL Stylesheet:
+
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" indent="yes" />
+
+  <xsl:param name="myOrder" />
+
+  <xsl:template match="/">
+
+    <xsl:apply-templates select="/div//div">
+      <xsl:sort select="." data-type="number" order="{$myOrder}" />
+    </xsl:apply-templates>
+  </xsl:template>
+
+  <xsl:template match="div">
+    <xsl:copy-of select="." />
+  </xsl:template>
+</xsl:stylesheet>
+
diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html new file mode 100644 index 0000000000..7bcbbc6cd0 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html @@ -0,0 +1,24 @@ +--- +title: The XSLT/JavaScript Interface in Gecko +slug: The_XSLT_JavaScript_Interface_in_Gecko +tags: + - DOM + - NeedsTranslation + - TopicStub + - XSLT +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +--- +
    +
  1. Introduction
    2. +
  2. JavaScript/XSLT Bindings
    3. +
  3. Basic Example
    4. +
  4. Setting Parameters
    5. +
  5. Advanced Example
    6. +
  6. Interface List
    7. +
  7. Resources
    8. +
+ +

See also

+ diff --git a/files/pt-br/web_development/mobile/design_responsivo/index.html b/files/pt-br/web_development/mobile/design_responsivo/index.html deleted file mode 100644 index f379b2647a..0000000000 --- a/files/pt-br/web_development/mobile/design_responsivo/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Design Responsivo -slug: Web_Development/Mobile/Design_responsivo -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design ---- -

Como uma reação aos problemas associados com a abordagem de sites separados para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente bastante antiga) está crescendo em popularidade: abandona a detecção do agente de usuário, e em vez disso faz sua pagína responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para A List Apart, veio a ser conhecido como Responsive Web Design. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.

- -

As Vantagens

- -

Embora ele não foi inicialmente proposto como metodo para criação de sites móveis, design responsivo foi recentemente ganhou muita atenção como uma forma de tomar alguns primeiros passos no sentido de amizade móvel no lugar de um site móvel separado.

- -
    -
  1. Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.
    2. -
  2. Design Responsivo fornece cada página com uma URL única e original.
    3. -
  3. Estatísticas de compartilhamento social (Curtidas no Facebook, Tweets, +1 no Google+) não dividem, desde que as versões desktop e móveis de páginas web usam uma URL única e exclusiva.
    4. -
  4. Design Responsivo não se preocupa sobre agentes de usuário.
    5. -
- -

Há alguns aspectos muito bom para essa abordagem. Desde que ele não confie na detecção do agente de usuário, é mais resistente e à prova futurística da abordagem de sites separados. Para sites simples, ele também pode ser significativamente mais fácil de implementar e manter do que outras opções.

- -

Os Negativos

- -

Essa abordagem não é sem suas limitações. Porque o conteúdo deve ser alterado no lado cliente com JavaScript, apenas mínimas alterações de conteúdo são encorajadas. Em geral, as coisas podem ficar muito cabeludo muito rapidamente se você estiver tentando codificar dois conjuntos distintos de JavaScript para funcionar com o mesmo DOM. Esta é uma grande razão por que aplicativos web não tendem a adotar esta abordagem.

- -

Dar a seu site existente um design responsivo também envolve uma reconfiguração de seus estilos se você não está ostentando ainda um layout flexível. Esta poderia ser uma benção disfarçada, embora; fazer o layout do seu site responsivo poderia ser uma boa oportunidade para modernizar e limpar o CSS do seu site.

- -

Finalmente, uma vez que você está adicionando o código para seus scripts e estilos, desempenho pode ser pior do que a abordagem de Sites Separados. Não há realmente nenhuma maneira de contonar isso, embora uma refatoração pensativo de seus scripts e estilos pode realmente salvar alguns bytes em longo prazo.

- -

Quando há que escolher esta opção

- -

teixido_responsive-300x177.pngComo mencionado acima, porque as alterações de conteúdo podem ser difíceis, quando você usar essa abordagem, você não é capaz de dar aos usuários uma experiência surpreendentemente diferente no celular sem um aumento significativo na complexidade de código. Disse que, se as versões desktop e móvel do seu site são muito semelhantes, então esta abordagem é uma ótima opção. É bem adequado para sites centrados em documentos cujo um caso de uso primário é consistente em dispositivos, como as páginas de produtos. Você pode notar que os exemplos abaixo são todos blogs ou portfolios!

- -

Exemplos

- -

Embora não seja tão popular como a abordagem de locais diferentes, existem mais e mais sites que empregam essa técnica todos os dias. Felizmente, uma vez que todo o código é lado cliente, se você gostaria de ver como um site tecnicamente implementa esta abordagem, é tão simples como visitar o site e clicando em “Ver Código-Fonte da Página.” Aqui estão alguns exemplos:

- - - -

Apesar de ser uma abordagem relativamente jovem, já existem algumas prátivas recomendadas emergentes. Por exemplo, se você estiver criando um site do zero com essa opção em mente, é geralmente útil para criar um design de tela pequena primeiro, para que as restrições do site móvel com você desde o início. Também é ótimo para usar o aprimoramento progressivo para seus estilos em vez de ocultar elementos do seus site existente com media queries. Desta forma, navegadores mais antigos que podem não oferecer suporte a media queries ainda mostrem o layout adequado. Uma excelente apresentação sobre o mérito desse método está disponível aqui.

- -

Abordagem para desenvolvimento web móvel

- -

Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.

- - - -

Veja também

- - - -
-

Informação Original do Documento

- -

Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "Approaches to Mobile Web Development Part 3 - Responsive Design", por Jason Grlicky.

-
diff --git a/files/pt-br/web_development/mobile/index.html b/files/pt-br/web_development/mobile/index.html deleted file mode 100644 index 6a651575dc..0000000000 --- a/files/pt-br/web_development/mobile/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Desenvolvimento Web móvel -slug: Web_Development/Mobile -tags: - - Mobile - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile ---- -

Desenvolvimento de sites para ser visualizado em dispositivos móveis requer abordagens que certifique-se de que um site funciona também em dispositivos móveis, como faz em navegadores desktop. Os seguintes artigos descrevem algumas dessas abordagens.

- diff --git a/files/pt-br/web_development/mobile/mobile-friendliness/index.html b/files/pt-br/web_development/mobile/mobile-friendliness/index.html deleted file mode 100644 index 4fd3c49a1a..0000000000 --- a/files/pt-br/web_development/mobile/mobile-friendliness/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Site Móvel Amigável -slug: Web_Development/Mobile/Mobile-friendliness -translation_of: Web/Guide/Mobile/Mobile-friendliness ---- -

O que é site móvel amigável?

-

Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.

-

Goal #1 (Presentation)

-

“Make websites that work well on a variety of screen sizes.”

-

These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.

-

Goal #2 (Content)

-

“Adjust your content for mobile users.”alaska_air_mobile_and_desktop-300x225.png

-

Think about what your users want to do at your site if they are on a phone. A great example of this is Alaska Air’s website. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.

-

Goal #3 (Performance)

-

“Give your users a smooth experience, even on a slow connection.”

-

Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need.

-

Know your audience

-

While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.

-

Approaches to mobile Web development

-

The following approaches aim to achieve each of these goals by different means.

- -
-

Original document information

-

Originally published on 4 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", by Jason Grlicky.

-
-

 

diff --git a/files/pt-br/web_development/mobile/sites_separados/index.html b/files/pt-br/web_development/mobile/sites_separados/index.html deleted file mode 100644 index 2ca783fbc9..0000000000 --- a/files/pt-br/web_development/mobile/sites_separados/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Sites separados para celular e desktop -slug: Web_Development/Mobile/Sites_separados -translation_of: Web/Guide/Mobile/Separate_sites ---- -

The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.

-

The good

-

The first option is the most popular by far: use user-agent detection to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all three goals of mobile web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.

-

Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!

-

The bad

-

Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.

-

Even more important than that, though, is the fact that user-agent detection is inherently flawed, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.

-

When it is right to choose this option

-

sumo_screenshot.pngFirstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like XHTML-MP or the older WML.

-

This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the most practical choice. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.

-

Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.

-

Examples

-

Most of the major Web applications you see in the wild have chosen this path, including Facebook, YouTube, Digg, and Flickr. In fact, Mozilla picked this strategy for the mobile versions of addons.mozilla.org (AMO) and support.mozilla.org (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the github repository for AMO or SUMO.

-

Approaches to mobile Web development

-

See the following articles for background and other approaches to developing for mobile platforms.

- -
-

Original document information

-

This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 2 – Separate Sites", by Jason Grlicky.

-
-

 

diff --git a/files/pt-br/webapi/battery_status/index.html b/files/pt-br/webapi/battery_status/index.html deleted file mode 100644 index 603750f72c..0000000000 --- a/files/pt-br/webapi/battery_status/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Battery Status API -slug: WebAPI/Battery_Status -tags: - - API - - Apps - - Batería - - Firefox OS - - Guia(2) - - Guía - - Mobile - - Obsoleto -translation_of: Web/API/Battery_Status_API ---- -
{{obsolete_header}}
- -
{{DefaultAPISidebar("Battery API")}}
- -

A API Battery Status, mais conhecida como Battery API, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.

- -

A API Battery Status API estende {{domxref("Window.navigator")}} com uma propriedade {{domxref("Navigator.battery")}} que é um objeto {{domxref("BatteryManager")}},  e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.

- -

Exemplo

- -

Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos {{event("chargingchange")}} e {{event("levelchange")}}, respectivamente.

- -
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
-
-function updateBatteryStatus() {
-  console.log("Status da bateria: " + battery.level * 100 + " %");
-
-  if (battery.charging) {
-    console.log("A bateria está carregando");
-  }
-}
-
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
-
- -

Veja também o exemplo na especificação.

- -

Especificações

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

- -

Compatibilidade entre navegadores

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

- -

Veja também

- - diff --git a/files/pt-br/webapi/index.html b/files/pt-br/webapi/index.html deleted file mode 100644 index c7eb86d426..0000000000 --- a/files/pt-br/webapi/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: WebAPI -slug: WebAPI -tags: - - Apps - - DOM - - Firefox OS - - Mobile -translation_of: Web/API -translation_of_original: WebAPI ---- -

WebAPI é um termo usado para se referir a um conjunto de compatibilidade de dispositivos e acessar APIs que permitem que aplicativos Web e conteúdos para acessar o hardware do dispositivo (como o estado da bateria ou o hardware de vibração do dispositivo), bem como o acesso aos dados armazenados no dispositivo (como como o calendário ou lista de contatos). Ao acrescentar estas APIs, esperamos expandir o que a Web pode fazer hoje e apenas plataformas proprietárias foram capazes de fazer no passado.

- -
-

Nota: Esta documentação é maior do que parece, os links ainda não estão todos adicionados aqui. Estamos trabalhando ativamente para melhorar isso e esperamos ver as coisas muito melhor nas próximas semanas. Veja a página de status da documentação da WebAPI, onde estamos acompanhando o trabalho em documentos WebAPI.

-
- -
-

Nota: para uma breve explicação de cada distintivo, consulte a documentação do pacote de aplicativos.

-
- -
-
-

APIs de Comunicação

- -
-
Network Information API (API de Informação de Rede)
-
Fornece informações básicas sobre a conexão de rede atual, como a velocidade de conexão.
-
Bluetooth {{NonStandardBadge}}
-
A API WebBluetooth fornece acesso de baixo nível ao hardware Bluetooth do dispositivo.
-
Mobile Connection API (API de Conexão Móvel) {{NonStandardBadge}}
-
Expões informações sobre a conectividade do celular, como a força do sinal, informação da operadora, assim por diante.
-
Network Stats API (API de Estatísticas de Rede) {{NonStandardBadge}}
-
Monitora a utilização de dados e expõe esses dados para aplicações privilegiadas.
-
Telephony (Telefonia) {{NonStandardBadge}}
-
Permite aplicações efectuar e atender chamadas telefônicas e usar a interface de usuário de telefonia embutida.
-
WebSMS {{NonStandardBadge}}
-
Permite que aplicações enviem e recebam mensagens de texto SMS, bem como para acessar e gerenciar as mensagens armazenadas no dispositivo.
-
WiFi Information API (API de Informações WiFi) {{NonStandardBadge}}
-
-
-
Uma API privilegiada que fornece informações sobre a força do sinal, o nome da rede atual, as redes Wi-Fi disponíveis, e assim por diante.
-
-
-
- -

APIs de Acesso ao Hardware

- -
-
Ambiente Light Sensor API (API do Sensor de Luz Ambiente)
-
Fornece acesso ao sensor de luz ambiente, que permite que seu aplicativo detecte o nível de luz ao redor do dispositivo.
-
Battery Status API (API de Estado da Bateria)
-
Fornece informações sobre nível de carregamento da bateria e quando ou não o dispositivo está plugado e carregando.
-
Geolocation API (API de Geolocalização)
-
Provê informação sobre a localização física do dispositivo.
-
Pointer Lock API (API de Bloqueio do mouse)
-
Permitir aplicativos bloquearem o acesso ao mouse e ter acesso a deltas de movimento ao invés de coordenadas absolutas, o que é ótimo para jogos.
-
Proximity API (API de Proximidade)
-
Permite dectar a proximidade do dispositivo a objetos próximos, como o rosto do usuário.
-
Device Orientation API (API de Orientação do Dispositivo)
-
Fornece notificações quando a orientação do dispositivo muda.
-
Screen Orientation API (API de Orientação de Tela)
-
Fornece notificações quando a tela do dispositivo muda. Você também uasr a API para permitir seu aplicativo indicar qual orientação é preferida.
-
Vibration API (API de Vibração)
-
Permite aplicativos controlarem o hardware de vibração do dispositivo para coisas como feedback tátil em jogos. Não é a intenção para utilização como vibrações de notificação. Veja a API de Alarme para isso.
-
Camera API (API de Camera) {{NonStandardBadge}}
-
Permite aplicativos tirarem fotograficas e/ou gravar vídeos usando a camera do dispositivo.
-
Power Management API (API Gerenciamento de Energia) {{NonStandardBadge}}
-
Permite aplicativos ligar ou desligar a tela, CPU e energia do dispositivo, assim por diante. Também fornece suporte para verificar a inspecionar recursos em eventos de bloqueio.Ver todos...
-
-
- -
-

APIs de Gerenciamento de Dados

- -
-
FileHandle API
-
Fornece suporte para escrever arquivos com suporte a bloqueio.
-
IndexedDB
-
Armazenamento do lado do cliente de dados estruturados, com suporte para pesquisas de alto desempenho.
-
Settings API (API de Configurações) {{NonStandardBadge}}
-
Permite apps examinarem e alterar todas opções de configuração do sistema que são permanentemente armazenadas no dispositivo.
-
- -

Outras APIs

- -
-
Alarm API (API de Alarme)
-
Permite apps agendarem notificações. Também fornece suporte para automaticamente abrir um app em um tempo específico.
-
Simple Push API
-
Permite a plataforma enviar mensagens de notificação para aplicações específicas.
-
Notificações Web
-
Permites aplicações enviarem notificacões mostradas no nível do sistema.
-
Apps API {{NonStandardBadge}}
-
As WebApps APIs abertas fornecem suporte para instalar e gerenciar WebApps. Em complemento, suporte é dado para permitir apps determinem informações de pagamento.
-
Web Activities (Atividades Web) {{NonStandardBadge}}
-
Permite um app delegar uma atividade para outro app; por exemplo, um app pode perguntar outro app para selecionar (ou criar) e retornar uma foto. Tipicamente o usuário é capaz de configurar que apps são usados para cada atividade.
-
WebPayment API (API Pagamento Web) {{NonStandardBadge}}
-
Permite conteúdos web iniciar pagamentos e restituição para bens virtuais.
-
Browser API {{NonStandardBadge}}
-
Fornece suporte para a construção de um navegador Web completamente utilizando tecnologias da Web (em essência, um navegador em um navegador).
-
- -
-
Idle API(Notificações em Segundo Plano)
-
Permite apps receberem notificações quando o usuário não estiver ativamente utilizando o dispositivo.
-
Permissions API(API de Permissões) {{NonStandardBadge}}
-
Gerencia permissão de apps em localização centralizada. Utilizado pelo app de Configurações.
-
Time/Clock API (API de Tempo/Relógio)  {{NonStandardBadge}}
-
Fornece suporte para configuração do tempo atual. O fuso horário é definido utilizando a Settings API (API de Configurações).
-
- -

Comunidade WebAPI

- -

Se você precisa de ajuda com alguma dessas APIs, aqui estão várias maneiras que você pode conversar com outros desenvolvedores que as estão utilizando.

- -
    -
  • Consultar forum de WebAPI {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • -
  • Visite o canal no IRC WebAPI: #webapi
    • -
- -

Don't forget about the netiquette...

- - - - -
-
- -

 

diff --git a/files/pt-br/webapi/network_information/index.html b/files/pt-br/webapi/network_information/index.html deleted file mode 100644 index 032fc54169..0000000000 --- a/files/pt-br/webapi/network_information/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Network Information API -slug: WebAPI/Network_Information -translation_of: Web/API/Network_Information_API ---- -

{{ SeeCompatTable() }}

- -

A API de Informações de Rede fornece informação sobre a conexão do sistema, assim como a banda atual do dispositivo do usuário ou qualquer conexão que seja medida. Essa pode também ser usada para selecionar conteúdo de alta ou baixa definição baseado na conexão do usuário. Toda a API consiste na adição da interface domxref("Connection") e uma única propriedade a interface {{domxref("Navigator")}}: {{domxref("Navigator.connection")}}.

- -

Detectando mudanças de conexão

- -

Este é um exemplo vê mudança na conexão do usuário. Essa é similar a como uma app pode alertar quando o usuário move de uma conexão de alto para baixo custo por exemplo, a fim de reduzir a demanda da banda para previnir que o usuário seja submetido a cargos substanciais.

- -
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-
-function updateConnectionStatus() {
-  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
-  if (connection.metered) {
-    alert("The connection is metered!");
-  }
-}
-
-connection.addEventListener("change", updateConnectionStatus);
-updateConnectionStatus();
-
- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
- -

Compatibilidade com Navegadores

- -

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

- -

Veja também

- -
    -
  • {{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}
    • -
  • Online and offline events
    • -
  • {{domxref("window.navigator.connection")}}
    • -
diff --git a/files/pt-br/webassembly/entendendo_o_formato_textual_do_webassembly/index.html b/files/pt-br/webassembly/entendendo_o_formato_textual_do_webassembly/index.html deleted file mode 100644 index 70568c9112..0000000000 --- a/files/pt-br/webassembly/entendendo_o_formato_textual_do_webassembly/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Entendendo o formato textual do WebAssembly -slug: WebAssembly/Entendendo_o_formato_textual_do_WebAssembly -translation_of: WebAssembly/Understanding_the_text_format ---- -
{{WebAssemblySidebar}}
- -

Para permitir que o WebAssembly seja lido e editado por humanos foi criado uma representação textual do código binário wasm. Essa é uma forma textual intermediária desenvolvida para ser usada em editores de textos, ferramentas de desenvolvimento dos navegatores, etc. Esse artigo expica como essa expressão textual funciona, mostrando a sintase de maneira bruta,  e como ela está relacionada com o código binário ao qual ela representa - e os objetos que encapsulam o wasm dentro do JavaScript.

- -
-

Nota: Esse artigo trata de maneira aprofundada a descrição textual do WebAssembly, se você é um desenvolvedor web que quer apenas carregar algum módulo wasm em seu código JavaScript e usá-lo em sua página web recomendamos que dê uma olhada no seguinte artigo: Using the WebAssembly JavaScript API. Esse artigo será de grande valia caso você queira otimizar a performance de módulos wasm em seu código JavaScript, ou ainda fazer seu próprio compilador de WebAssembly. 

-
- -

S-expressions

- -

Em seus dois formatos, binário e textual, a unidade fundamental do WebAssembly é um módulo. Na forma textual, um módulo é representado como uma grande S-expression.  S-expressions são um tipo bem antigo e simples de representar textualmente árvores de dados, então podemos descrever um módulo como uma árvore de nós que descreve a estrutura e código daquele módulo. Diferente da Árvore Sintática Abstrata de uma linguagem de programação qualquer, a árvore do WebAssembly é bem rasa, consistindo basicamente de uma grande lista de instruções.

- -

First, let’s see what an S-expression looks like.  Each node in the tree goes inside a pair of parentheses — ( ... ).  The first label inside the parenthesis tells you what type of node it is, and after that there is a space-separated list of either attributes or child nodes.  So that means the WebAssembly S-expression:

- -
(module (memory 1) (func))
- -

represents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node.  We’ll see shortly what these nodes actually mean.

- -

The simplest module

- -

Let's start with the simplest, shortest possible wasm module.

- -
(module)
- -

This module is totally empty, but is still a valid module.

- -

If we convert our module to binary now (see Converting WebAssembly text format to wasm), we’ll see just the 8 byte module header described in the binary format:

- -
0000000: 0061 736d              ; WASM_BINARY_MAGIC
-0000004: 0d00 0000              ; WASM_BINARY_VERSION
- -

Adding functionality to your module

- -

Ok, that’s not very interesting, let’s add some executable code to this module.

- -

All code in a webassembly module is grouped into functions, which have the following pseudo-code structure:

- -
( func <signature> <locals> <body> )
- -
    -
  • The signature declares what the function takes (parameters) and returns (return values).
    • -
  • The locals are like vars in JavaScript, but with explicit types declared.
    • -
  • The body is just a linear list of low-level instructions.
    • -
- -

So this is similar to functions in other languages, even if it looks different because it is an S-expression.

- -

Signatures and parameters

- -

The signature is a sequence of parameter type declarations followed by a list of return type declarations. It is worth noting here that:

- -
    -
  • The absence of a (result) means the function doesn’t return anything.
    • -
  • In the current iteration, there can be at most 1 return type, but later this will be relaxed to any number.
    • -
- -

Each parameter has a type explicitly declared; wasm currently has four available types:

- -
    -
  • i32: 32-bit integer
    • -
  • i64: 64-bit integer
    • -
  • f32: 32-bit float
    • -
  • f64: 64-bit float
    • -
- -

A single parameter is written (param i32) and the return type is written (result i32), hence a binary function that takes two 32-bit integers and returns a 64-bit float would be written like this:

- -
(func (param i32) (param i32) (result f64) ... )
- -

After the signature, locals are listed with their type, for example (local i32). Parameters are basically just locals that are initialized with the value of the corresponding argument passed by the caller.

- -

Getting and setting locals and parameters

- -

Locals/parameters can be read and written by the body of the function with the get_local and set_local instructions.

- -

The get_local/set_local commands refer to the item to be got/set by its numeric index: parameters are referred to first, in order of their declaration, followed by locals in order of their declaration.  So given the following function:

- -
(func (param i32) (param f32) (local f64)
-  get_local 0
-  get_local 1
-  get_local 2)
- -

The instruction get_local 0 would get the i32 parameter, get_local 1 would get the f32 parameter, and get_local 2 would get the f64 local.

- -

There is another issue here — using numeric indices to refer to items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other items simply by including a name prefixed by a dollar symbol ($) just before the type declaration.

- -

Thus you could rewrite our previous signature like so:

- -
(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)
- -

And then could write get_local $p1 instead of get_local 0, etc.  (Note that when this text gets converted to binary, though, the binary will contain only the integer.)

- -

Stack machines

- -

Before we can write a function body, we have to talk about one more thing: stack machines. Although the browser compiles it to something more efficient, wasm execution is defined in terms of a stack machine where the basic idea is that every type of instruction pushes and/or pops a certain number of i32/i64/f32/f64 values from a stack.

- -

For example, get_local is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value.

- -

When a function is called, it starts with an empty stack which is gradually filled up and emptied as the body’s instructions are executed. So for example, after executing the following function:

- -
(func (param $p i32)
-  get_local $p
-  get_local $p
-  i32.add)
- -

The stack contains exactly one i32 value — the result of the expression ($p + $p), which is handled by i32.add. The return value of a function is just the final value left on the stack.

- -

The WebAssembly validation rules ensure the stack matches exactly: if you declare a (result f32), then the stack must contain exactly one f32 at the end.  If there is no result type, the stack must be empty.

- -

Our first function body

- -

As mentioned before, the function body is simply a list of instructions that are followed as the function is called. Putting this together with what we have already learned, we can finally define a module containing our own simple function:

- -
(module
-  (func (param $lhs i32) (param $rhs i32) (result i32)
-    get_local $lhs
-    get_local $rhs
-    i32.add))
- -

This function gets two parameters, adds them together, and returns the result.

- -

There are a lot more things that can be put inside function bodies, but we will start off simple for now, and you’ll see a lot more examples as you go along. For a full list of the available opcodes, consult the webassembly.org Semantics reference.

- -

Calling the function

- -

Our function won’t do very much on its own — now we need to call it. How do we do that? Like in an ES2015 module, wasm functions must be explicitly exported by an export statement inside the module.

- -

Like locals, functions are identified by an index by default, but for convenience, they can be named. Let's start by doing this — first, we'll add a name preceded by a dollar sign, just after the func keyword:

- -
(func $add … )
- -

Now we need to add an export declaration — this looks like so:

- -
(export "add" (func $add))
- -

Here, add is the name the function will be identified by in JavaScript whereas $add picks out which WebAssembly function inside the Module is being exported.

- -

So our final module (for now) looks like this:

- -
(module
-  (func $add (param $lhs i32) (param $rhs i32) (result i32)
-    get_local $lhs
-    get_local $rhs
-    i32.add)
-  (export "add" (func $add))
-)
- -

If you want to follow along with the example, save the above our module into a file called add.wat, then convert it into a binary file called add.wasm using wabt (see Converting WebAssembly text format to wasm for details).

- -

Next, we’ll load our binary into a typed array called addCode (as described in Fetching WebAssembly Bytecode), compile and instantiate it, and execute our add function in JavaScript (we can now find add() in the exports property of the instance):

- -
fetchAndInstantiate('add.wasm').then(function(instance) {
-   console.log(instance.exports.add(1, 2));  // "3"
-});
-
-// fetchAndInstantiate() found in wasm-utils.js
-function fetchAndInstantiate(url, importObject) {
-  return fetch(url).then(response =>
-    response.arrayBuffer()
-  ).then(bytes =>
-    WebAssembly.instantiate(bytes, importObject)
-  ).then(results =>
-    results.instance
-  );
-}
- -
-

Note: You can find this example in GitHub as add.html (see it live also). Also see {{jsxref("WebAssembly.instantiate()")}} for more details about the instantiate function, and wasm-utils.js for the fetchAndInstantiate() source code.

-
- -

Exploring fundamentals

- -

Now we’ve covered the real basics, let’s move on to look at some more advanced features.

- -

Calling functions from other functions in the same module

- -

The call instruction calls a single function, given its index or name. For example, the following module contains two functions — one just returns the value 42, the other returns the result of calling the first plus one:

- -
(module
-  (func $getAnswer (result i32)
-    i32.const 42)
-  (func (export "getAnswerPlus1") (result i32)
-    call $getAnswer
-    i32.const 1
-    i32.add))
- -
-

Note: i32.const just defines a 32-bit integer and pushes it onto the stack. You could swap out the i32 for any of the other available types, and change the value of the const to whatever you like (here we’ve set the value to 42).

-
- -

In this example you’ll notice an (export "getAnswerPlus1") section, declared just after the func statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.

- -

This is functionally equivalent to including a separate function statement outside the function, elsewhere in the module in the same manner as we did before, e.g.:

- -
(export "getAnswerPlus1" (func $functionName))
- -

The JavaScript code to call our above module looks like so:

- -
fetchAndInstantiate('call.wasm').then(function(instance) {
-  console.log(instance.exports.getAnswerPlus1());  // "43"
-});
- -
-

Note: You can find this example on GitHub as call.html (see it live also). Again, see wasm-utils.js for the fetchAndInstantiate() source.

-
- -

Importing functions from JavaScript

- -

We have already seen JavaScript calling WebAssembly functions, but what about WebAssembly calling JavaScript functions? WebAssembly doesn’t actually have any built-in knowledge of JavaScript, but it does have a general way to import functions that can accept either JavaScript or wasm functions. Let’s look at an example:

- -
(module
-  (import "console" "log" (func $log (param i32)))
-  (func (export "logIt")
-    i32.const 13
-    call $log))
- -

WebAssembly has a two-level namespace so the import statement here is saying that we’re asking to import the log function from the console module. You can also see that the exported logIt function calls the imported function using the call instruction we introduced above.

- -

Imported functions are just like normal functions: they have a signature that WebAssembly validation checks statically, and they are given an index and can be named and called.

- -

JavaScript functions have no notion of signature, so any JavaScript function can be passed, regardless of the import’s declared signature. Once a module declares an import, the caller of {{jsxref("WebAssembly.instantiate()")}} must pass in an import object that has the corresponding properties.

- -

For the above, we need an object (let's call it importObject) such that importObject.console.log is a JavaScript function.

- -

This would look like the following:

- -
var importObject = {
-  console: {
-    log: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-fetchAndInstantiate('logger.wasm', importObject).then(function(instance) {
-  instance.exports.logIt();
-});
- -
-

Note: You can find this example on GitHub as logger.html (see it live also).

-
- -

WebAssembly Memory

- -

The above example is a pretty terrible logging function: it only prints a single integer!  What if we wanted to log a text string? To deal with strings and other more complex data types, WebAssembly provides memory. According to WebAssembly, memory is just a large array of bytes that can grow over time. WebAssembly contains instructions like i32.load and i32.store for reading and writing from linear memory.

- -

From JavaScript’s point of view, it’s is as though memory is all inside one big (resizable) {{domxref("ArrayBuffer")}}. That’s literally all that asm.js has to play with (except that it isn't resizable; see the asm.js Programming model).

- -

So a string is just a sequence of bytes somewhere inside this linear memory. Let's assume that we’ve written a suitable string of bytes to memory; how do we pass that string out to JavaScript?

- -

The key is that JavaScript can create WebAssembly linear memory instances via the {{jsxref("WebAssembly.Memory()")}} interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. Memory instances have a buffer getter, which returns an ArrayBuffer that points at the whole linear memory.

- -

Memory instances can also grow, for example via the Memory.grow() method in JavaScript. When growth occurs, since ArrayBuffers can’t change size, the current ArrayBuffer is detached and a new ArrayBuffer is created to point to the newer, bigger memory. This means all we need to do to pass a string to JavaScript is to pass out the offset of the string in linear memory along with some way to indicate the length.

- -

While there are many different ways to encode a string’s length in the string itself (for example, C strings); for simplicity here we just pass both offset and length as parameters:

- -
(import "console" "log" (func $log (param i32) (param i32)))
- -

On the JavaScript side, we can use the TextDecoder API to easily decode our bytes into a JavaScript string.  (We specify utf8 here, but many other encodings are supported.)

- -
consoleLogString(offset, length) {
-  var bytes = new Uint8Array(memory.buffer, offset, length);
-  var string = new TextDecoder('utf8').decode(bytes);
-  console.log(string);
-}
- -

The last missing piece of the puzzle is where consoleLogString gets access to the WebAssembly memory. WebAssembly gives us a lot of flexibility here: we can either create a Memory object in JavaScript and have the WebAssembly module import the memory, or we can have the WebAssembly module create the memory and export it to JavaScript.

- -

For simplicity, let's create it in JavaScript then import it into WebAssembly.  Our import statement is written as follows:

- -
(import "js" "mem" (memory 1))
- -

The 1 indicates that the imported memory must have at least 1 page of memory (WebAssembly defines a page to be 64KB.)

- -

So let's see a complete module that prints the string “Hi”.  In a normal compiled C program, you’d call a function to allocate some memory for the string, but since we’re just writing our own assembly here and we own the entire linear memory, we can just write the string contents into global memory using a data section.  Data sections allow a string of bytes to be written at a given offset at instantiation time and are similar to the .data sections in native executable formats.

- -

Our final wasm module looks like this:

- -
(module
-  (import "console" "log" (func $log (param i32 i32)))
-  (import "js" "mem" (memory 1))
-  (data (i32.const 0) "Hi")
-  (func (export "writeHi")
-    i32.const 0  ;; pass offset 0 to log
-    i32.const 2  ;; pass length 2 to log
-    call $log))
- -
-

Note: Above, note the double semi-colon syntax (;;) for allowing comments in WebAssembly files.

-
- -

Now from JavaScript we can create a Memory with 1 page and pass it in. This results in "Hi" being printed to the console:

- -
var memory = new WebAssembly.Memory({initial:1});
-
-var importObj = { console: { log: consoleLogString }, js: { mem: memory } };
-
-fetchAndInstantiate('logger2.wasm', importObj).then(function(instance) {
-  instance.exports.writeHi();
-});
- -
-

Note: You can find the full source on GitHub as logger2.html (also see it live).

-
- -

WebAssembly tables

- -

To finish this tour of the WebAssembly text format, let’s look at the most intricate, and often confusing, part of WebAssembly: tables. Tables are basically resizable arrays of references that can be accessed by index from WebAssembly code.

- -

To see why tables are needed, we need to first observe that the call instruction we saw earlier (see {{anch("Calling functions from other functions in the same module")}}) takes a static function index and thus can only ever call one function — but what if the callee is a runtime value?

- -
    -
  • In JavaScript we see this all the time: functions are first-class values.
    • -
  • In C/C++, we see this with function pointers.
    • -
  • In C++, we see this with virtual functions.
    • -
- -

WebAssembly needed a type of call instruction to achieve this, so we gave it call_indirect, which takes a dynamic function operand. The problem is that the only types we have to give operands in WebAssembly are (currently) i32/i64/f32/f64.

- -

WebAssembly could add an anyfunc type ("any" because the type could hold functions of any signature), but unfortunately this anyfunc type couldn’t be stored in linear memory for security reasons. Linear memory exposes the raw contents of stored values as bytes and this would allow wasm content to arbitrarily observe and corrupt raw function addresses, which is something that cannot be allowed on the web.

- -

The solution was to store function references in a table and pass around table indices instead, which are just i32 values. call_indirect’s operand can therefore simply be an i32 index value.

- -

Defining a table in wasm

- -

So how do we place wasm functions in our table? Just like data sections can be used to initialize regions of linear memory with bytes, elem sections can be used to initialize regions of tables with functions:

- -
(module
-  (table 2 anyfunc)
-  (elem (i32.const 0) $f1 $f2)
-  (func $f1 (result i32)
-    i32.const 42)
-  (func $f2 (result i32)
-    i32.const 13)
-  ...
-)
- -
    -
  • In (table 2 anyfunc), the 2 is the initial size of the table (meaning it will store two references) and anyfunc declares that the element type of these references is "a function with any signature". In the current iteration of WebAssembly, this is the only allowed element type, but in the future, more element types will be added.
    • -
  • The functions (func) sections are just like any other declared wasm functions. These are the functions we are going to refer to in our table (for example’s sake, each one just returns a constant value). Note that the order the sections are declared in doesn’t matter here — you can declare your functions anywhere and still refer to them in your elem section.
    • -
  • The elem section can list any subset of the functions in a module, in any order, allowing duplicates. This is a list of the functions that are to be referenced by the table, in the order they are to be referenced.
    • -
  • The (i32.const 0) value inside the elem section is an offset — this needs to be declared at the start of the section, and specifies at what index in the table function references start to be populated. Here we’ve specified 0, and a size of 2 (see above), so we can fill in two references at indexes 0 and 1. If we wanted to start writing our references at offset 1, we’d have to write (i32.const 1), and the table size would have to be 3.
    • -
- -
-

Note: Uninitialized elements are given a default throw-on-call value.

-
- -

In JavaScript, the equivalent calls to create such a table instance would look something like this:

- -
function() {
-  // table section
-  var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
-
-  // function sections:
-  var f1 = function() { … }
-  var f2 = function() { … }
-
-  // elem section
-  tbl.set(0, f1);
-  tbl.set(1, f2);
-};
- -

Using the table

- -

Moving on, now we’ve defined the table we need to use it somehow. Let's use this section of code to do so:

- -
(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail
-(func (export "callByIndex") (param $i i32) (result i32)
-  get_local $i
-  call_indirect $return_i32)
- -
    -
  • The (type $return_i32 (func (param i32))) block specifies a type, with a reference name. This type is used when performing type checking of the table function reference calls later on. Here we are saying that the references need to be functions that return an i32 as a result.
    • -
  • Next, we define a function that will be exported with the name callByIndex. This will take one i32 as a parameter, which is given the argument name $i.
    • -
  • Inside the function, we add one value to the stack — whatever value is passed in as the parameter $i.
    • -
  • Finally, we use call_indirect to call a function from the table — it implicitly pops the value of $i off the stack. The net result of this is that the callByIndex function invokes the $i’th function in the table.
    • -
- -

You could also declare the call_indirect parameter explicitly during the command call instead of before it, like this:

- -
(call_indirect $return_i32 (get_local $i))
- -

In a higher level, more expressive language like JavaScript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. The pseudo code would look something like tbl[i]().

- -

So, back to the typechecking. Since WebAssembly is typechecked, and anyfunc means "any function signature", we have to supply the presumed signature of the callee at the callsite, hence we include the $return_i32 type, to tell the program a function returning an i32 is expected. If the callee doesn’t have a matching signature (say an f32 is returned instead), a {{jsxref("WebAssembly.RuntimeError")}} is thrown.

- -

So what links the call_indirect to the table we are calling? The answer is that there is only one table allowed right now per module instance, and that is what call_indirect is implicitly calling. In the future, when multiple tables are allowed, we would also need to specify a table identifier of some kind, along the lines of

- -
call_indirect $my_spicy_table $i32_to_void
- -

The full module all together looks like this, and can be found in our wasm-table.wat example file:

- -
(module
-  (table 2 anyfunc)
-  (func $f1 (result i32)
-    i32.const 42)
-  (func $f2 (result i32)
-    i32.const 13)
-  (elem (i32.const 0) $f1 $f2)
-  (type $return_i32 (func (result i32)))
-  (func (export "callByIndex") (param $i i32) (result i32)
-    get_local $i
-    call_indirect $return_i32)
-)
- -

We load it into a webpage using the following JavaScript:

- -
fetchAndInstantiate('wasm-table.wasm').then(function(instance) {
-  console.log(instance.exports.callByIndex(0)); // returns 42
-  console.log(instance.exports.callByIndex(1)); // returns 13
-  console.log(instance.exports.callByIndex(2));
-  // returns an error, because there is no index position 2 in the table
-});
- -
-

Note: You can find this example on GitHub as wasm-table.html (see it live also).

-
- -
-

Note: Just like Memory, Tables can also be created from JavaScript (see WebAssembly.Table()) as well as imported to/from another wasm module.

-
- -

Mutating tables and dynamic linking

- -

Because JavaScript has full access to function references, the Table object can be mutated from JavaScript by the grow(), get() and set() methods. When WebAssembly gets reference types, WebAssembly code will be able to mutate tables itself with get_elem/set_elem instructions.

- -

Because tables are mutable, they can be used to implement sophisticated load-time and run-time dynamic linking schemes. When a program is dynamically linked, multiple instances share the same memory and table. This is symmetric to a native application where multiple compiled .dlls share a single process’s address space.

- -

To see this in action, we’ll create a single import object containing a Memory object and a Table object, and pass this same import object to multiple instantiate() calls.

- -

Our .wat examples look like so:

- -

shared0.wat:

- -
(module
-  (import "js" "memory" (memory 1))
-  (import "js" "table" (table 1 anyfunc))
-  (elem (i32.const 0) $shared0func)
-  (func $shared0func (result i32)
-   i32.const 0
-   i32.load)
-)
- -

shared1.wat:

- -
(module
-  (import "js" "memory" (memory 1))
-  (import "js" "table" (table 1 anyfunc))
-  (type $void_to_i32 (func (result i32)))
-  (func (export “doIt”) (result i32)
-   i32.const 0
-   i32.const 42
-   i32.store  ;; store 42 at address 0
-   i32.const 0
-   call_indirect $void_to_i32)
-)
- -

These work as follows:

- -
    -
  1. The function shared0func is defined in shared0.wat, and stored in our imported table.
    2. -
  2. This function creates a constant containing the value 0, and then uses the i32.load command to load the value contained in the provided memory index. The index provided is 0 — again, it implicitly pops the previous value off the stack. So shared0func loads and returns the value stored at memory index 0.
    3. -
  3. In shared1.wat, we export a function called doIt — this fucntion creates two constants containing the values 0 and 42, then calls i32.store to store a provided value at a provided index of the imported memory. Again, it implicitly pops these values off the stack, so the result is that it stores the value 42 in memory index 0,
    4. -
  4. In the last part of the function, we create a constant with value 0, then call the function at this index 0 of the table, which is shared0func, stored there earlier by the elem block in shared0.wat.
    5. -
  5. When called, shared0func loads the 42 we stored in memory using the i32.store command in shared1.wat.
    6. -
- -
-

Note: The above expressions again pop values from the stack implicitly, but you could declare these explicitly inside the command calls instead, for example:

- -
(i32.store (i32.const 0) (i32.const 42))
-(call_indirect $void_to_i32 (i32.const 0))
-
- -

After converting to assembly, we then use shared0.wasm and shared1.wasm in JavaScript via the following code:

- -
var importObj = {
-  js: {
-    memory : new WebAssembly.Memory({ initial: 1 }),
-    table : new WebAssembly.Table({ initial: 1, element: "anyfunc" })
-  }
-};
-
-Promise.all([
-  fetchAndInstantiate('shared0.wasm', importObj),
-  fetchAndInstantiate('shared1.wasm', importObj)
-]).then(function(results) {
-  console.log(results[1].exports.doIt());  // prints 42
-});
- -

Each of the modules that is being compiled can import the same memory and table objects and thus share the same linear memory and table "address space".

- -
-

Note: You can find this example on GitHub as shared-address-space.html (see it live also).

-
- -

Summary

- -

This finishes our high-level tour of the major components of the WebAssembly text format and how they get reflected in the WebAssembly JS API.

- -

See also

- -
    -
  • The main thing that wasn’t included is a comprehensive list of all the instructions that can occur in function bodies.  See the WebAssembly semantics for a treatment of each instruction.
    • -
  • See also the grammar of the text format that is implemented by the spec interpreter.
    • -
diff --git a/files/pt-br/webassembly/understanding_the_text_format/index.html b/files/pt-br/webassembly/understanding_the_text_format/index.html new file mode 100644 index 0000000000..70568c9112 --- /dev/null +++ b/files/pt-br/webassembly/understanding_the_text_format/index.html @@ -0,0 +1,512 @@ +--- +title: Entendendo o formato textual do WebAssembly +slug: WebAssembly/Entendendo_o_formato_textual_do_WebAssembly +translation_of: WebAssembly/Understanding_the_text_format +--- +
{{WebAssemblySidebar}}
+ +

Para permitir que o WebAssembly seja lido e editado por humanos foi criado uma representação textual do código binário wasm. Essa é uma forma textual intermediária desenvolvida para ser usada em editores de textos, ferramentas de desenvolvimento dos navegatores, etc. Esse artigo expica como essa expressão textual funciona, mostrando a sintase de maneira bruta,  e como ela está relacionada com o código binário ao qual ela representa - e os objetos que encapsulam o wasm dentro do JavaScript.

+ +
+

Nota: Esse artigo trata de maneira aprofundada a descrição textual do WebAssembly, se você é um desenvolvedor web que quer apenas carregar algum módulo wasm em seu código JavaScript e usá-lo em sua página web recomendamos que dê uma olhada no seguinte artigo: Using the WebAssembly JavaScript API. Esse artigo será de grande valia caso você queira otimizar a performance de módulos wasm em seu código JavaScript, ou ainda fazer seu próprio compilador de WebAssembly. 

+
+ +

S-expressions

+ +

Em seus dois formatos, binário e textual, a unidade fundamental do WebAssembly é um módulo. Na forma textual, um módulo é representado como uma grande S-expression.  S-expressions são um tipo bem antigo e simples de representar textualmente árvores de dados, então podemos descrever um módulo como uma árvore de nós que descreve a estrutura e código daquele módulo. Diferente da Árvore Sintática Abstrata de uma linguagem de programação qualquer, a árvore do WebAssembly é bem rasa, consistindo basicamente de uma grande lista de instruções.

+ +

First, let’s see what an S-expression looks like.  Each node in the tree goes inside a pair of parentheses — ( ... ).  The first label inside the parenthesis tells you what type of node it is, and after that there is a space-separated list of either attributes or child nodes.  So that means the WebAssembly S-expression:

+ +
(module (memory 1) (func))
+ +

represents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node.  We’ll see shortly what these nodes actually mean.

+ +

The simplest module

+ +

Let's start with the simplest, shortest possible wasm module.

+ +
(module)
+ +

This module is totally empty, but is still a valid module.

+ +

If we convert our module to binary now (see Converting WebAssembly text format to wasm), we’ll see just the 8 byte module header described in the binary format:

+ +
0000000: 0061 736d              ; WASM_BINARY_MAGIC
+0000004: 0d00 0000              ; WASM_BINARY_VERSION
+ +

Adding functionality to your module

+ +

Ok, that’s not very interesting, let’s add some executable code to this module.

+ +

All code in a webassembly module is grouped into functions, which have the following pseudo-code structure:

+ +
( func <signature> <locals> <body> )
+ +
    +
  • The signature declares what the function takes (parameters) and returns (return values).
    • +
  • The locals are like vars in JavaScript, but with explicit types declared.
    • +
  • The body is just a linear list of low-level instructions.
    • +
+ +

So this is similar to functions in other languages, even if it looks different because it is an S-expression.

+ +

Signatures and parameters

+ +

The signature is a sequence of parameter type declarations followed by a list of return type declarations. It is worth noting here that:

+ +
    +
  • The absence of a (result) means the function doesn’t return anything.
    • +
  • In the current iteration, there can be at most 1 return type, but later this will be relaxed to any number.
    • +
+ +

Each parameter has a type explicitly declared; wasm currently has four available types:

+ +
    +
  • i32: 32-bit integer
    • +
  • i64: 64-bit integer
    • +
  • f32: 32-bit float
    • +
  • f64: 64-bit float
    • +
+ +

A single parameter is written (param i32) and the return type is written (result i32), hence a binary function that takes two 32-bit integers and returns a 64-bit float would be written like this:

+ +
(func (param i32) (param i32) (result f64) ... )
+ +

After the signature, locals are listed with their type, for example (local i32). Parameters are basically just locals that are initialized with the value of the corresponding argument passed by the caller.

+ +

Getting and setting locals and parameters

+ +

Locals/parameters can be read and written by the body of the function with the get_local and set_local instructions.

+ +

The get_local/set_local commands refer to the item to be got/set by its numeric index: parameters are referred to first, in order of their declaration, followed by locals in order of their declaration.  So given the following function:

+ +
(func (param i32) (param f32) (local f64)
+  get_local 0
+  get_local 1
+  get_local 2)
+ +

The instruction get_local 0 would get the i32 parameter, get_local 1 would get the f32 parameter, and get_local 2 would get the f64 local.

+ +

There is another issue here — using numeric indices to refer to items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other items simply by including a name prefixed by a dollar symbol ($) just before the type declaration.

+ +

Thus you could rewrite our previous signature like so:

+ +
(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)
+ +

And then could write get_local $p1 instead of get_local 0, etc.  (Note that when this text gets converted to binary, though, the binary will contain only the integer.)

+ +

Stack machines

+ +

Before we can write a function body, we have to talk about one more thing: stack machines. Although the browser compiles it to something more efficient, wasm execution is defined in terms of a stack machine where the basic idea is that every type of instruction pushes and/or pops a certain number of i32/i64/f32/f64 values from a stack.

+ +

For example, get_local is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value.

+ +

When a function is called, it starts with an empty stack which is gradually filled up and emptied as the body’s instructions are executed. So for example, after executing the following function:

+ +
(func (param $p i32)
+  get_local $p
+  get_local $p
+  i32.add)
+ +

The stack contains exactly one i32 value — the result of the expression ($p + $p), which is handled by i32.add. The return value of a function is just the final value left on the stack.

+ +

The WebAssembly validation rules ensure the stack matches exactly: if you declare a (result f32), then the stack must contain exactly one f32 at the end.  If there is no result type, the stack must be empty.

+ +

Our first function body

+ +

As mentioned before, the function body is simply a list of instructions that are followed as the function is called. Putting this together with what we have already learned, we can finally define a module containing our own simple function:

+ +
(module
+  (func (param $lhs i32) (param $rhs i32) (result i32)
+    get_local $lhs
+    get_local $rhs
+    i32.add))
+ +

This function gets two parameters, adds them together, and returns the result.

+ +

There are a lot more things that can be put inside function bodies, but we will start off simple for now, and you’ll see a lot more examples as you go along. For a full list of the available opcodes, consult the webassembly.org Semantics reference.

+ +

Calling the function

+ +

Our function won’t do very much on its own — now we need to call it. How do we do that? Like in an ES2015 module, wasm functions must be explicitly exported by an export statement inside the module.

+ +

Like locals, functions are identified by an index by default, but for convenience, they can be named. Let's start by doing this — first, we'll add a name preceded by a dollar sign, just after the func keyword:

+ +
(func $add … )
+ +

Now we need to add an export declaration — this looks like so:

+ +
(export "add" (func $add))
+ +

Here, add is the name the function will be identified by in JavaScript whereas $add picks out which WebAssembly function inside the Module is being exported.

+ +

So our final module (for now) looks like this:

+ +
(module
+  (func $add (param $lhs i32) (param $rhs i32) (result i32)
+    get_local $lhs
+    get_local $rhs
+    i32.add)
+  (export "add" (func $add))
+)
+ +

If you want to follow along with the example, save the above our module into a file called add.wat, then convert it into a binary file called add.wasm using wabt (see Converting WebAssembly text format to wasm for details).

+ +

Next, we’ll load our binary into a typed array called addCode (as described in Fetching WebAssembly Bytecode), compile and instantiate it, and execute our add function in JavaScript (we can now find add() in the exports property of the instance):

+ +
fetchAndInstantiate('add.wasm').then(function(instance) {
+   console.log(instance.exports.add(1, 2));  // "3"
+});
+
+// fetchAndInstantiate() found in wasm-utils.js
+function fetchAndInstantiate(url, importObject) {
+  return fetch(url).then(response =>
+    response.arrayBuffer()
+  ).then(bytes =>
+    WebAssembly.instantiate(bytes, importObject)
+  ).then(results =>
+    results.instance
+  );
+}
+ +
+

Note: You can find this example in GitHub as add.html (see it live also). Also see {{jsxref("WebAssembly.instantiate()")}} for more details about the instantiate function, and wasm-utils.js for the fetchAndInstantiate() source code.

+
+ +

Exploring fundamentals

+ +

Now we’ve covered the real basics, let’s move on to look at some more advanced features.

+ +

Calling functions from other functions in the same module

+ +

The call instruction calls a single function, given its index or name. For example, the following module contains two functions — one just returns the value 42, the other returns the result of calling the first plus one:

+ +
(module
+  (func $getAnswer (result i32)
+    i32.const 42)
+  (func (export "getAnswerPlus1") (result i32)
+    call $getAnswer
+    i32.const 1
+    i32.add))
+ +
+

Note: i32.const just defines a 32-bit integer and pushes it onto the stack. You could swap out the i32 for any of the other available types, and change the value of the const to whatever you like (here we’ve set the value to 42).

+
+ +

In this example you’ll notice an (export "getAnswerPlus1") section, declared just after the func statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.

+ +

This is functionally equivalent to including a separate function statement outside the function, elsewhere in the module in the same manner as we did before, e.g.:

+ +
(export "getAnswerPlus1" (func $functionName))
+ +

The JavaScript code to call our above module looks like so:

+ +
fetchAndInstantiate('call.wasm').then(function(instance) {
+  console.log(instance.exports.getAnswerPlus1());  // "43"
+});
+ +
+

Note: You can find this example on GitHub as call.html (see it live also). Again, see wasm-utils.js for the fetchAndInstantiate() source.

+
+ +

Importing functions from JavaScript

+ +

We have already seen JavaScript calling WebAssembly functions, but what about WebAssembly calling JavaScript functions? WebAssembly doesn’t actually have any built-in knowledge of JavaScript, but it does have a general way to import functions that can accept either JavaScript or wasm functions. Let’s look at an example:

+ +
(module
+  (import "console" "log" (func $log (param i32)))
+  (func (export "logIt")
+    i32.const 13
+    call $log))
+ +

WebAssembly has a two-level namespace so the import statement here is saying that we’re asking to import the log function from the console module. You can also see that the exported logIt function calls the imported function using the call instruction we introduced above.

+ +

Imported functions are just like normal functions: they have a signature that WebAssembly validation checks statically, and they are given an index and can be named and called.

+ +

JavaScript functions have no notion of signature, so any JavaScript function can be passed, regardless of the import’s declared signature. Once a module declares an import, the caller of {{jsxref("WebAssembly.instantiate()")}} must pass in an import object that has the corresponding properties.

+ +

For the above, we need an object (let's call it importObject) such that importObject.console.log is a JavaScript function.

+ +

This would look like the following:

+ +
var importObject = {
+  console: {
+    log: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetchAndInstantiate('logger.wasm', importObject).then(function(instance) {
+  instance.exports.logIt();
+});
+ +
+

Note: You can find this example on GitHub as logger.html (see it live also).

+
+ +

WebAssembly Memory

+ +

The above example is a pretty terrible logging function: it only prints a single integer!  What if we wanted to log a text string? To deal with strings and other more complex data types, WebAssembly provides memory. According to WebAssembly, memory is just a large array of bytes that can grow over time. WebAssembly contains instructions like i32.load and i32.store for reading and writing from linear memory.

+ +

From JavaScript’s point of view, it’s is as though memory is all inside one big (resizable) {{domxref("ArrayBuffer")}}. That’s literally all that asm.js has to play with (except that it isn't resizable; see the asm.js Programming model).

+ +

So a string is just a sequence of bytes somewhere inside this linear memory. Let's assume that we’ve written a suitable string of bytes to memory; how do we pass that string out to JavaScript?

+ +

The key is that JavaScript can create WebAssembly linear memory instances via the {{jsxref("WebAssembly.Memory()")}} interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. Memory instances have a buffer getter, which returns an ArrayBuffer that points at the whole linear memory.

+ +

Memory instances can also grow, for example via the Memory.grow() method in JavaScript. When growth occurs, since ArrayBuffers can’t change size, the current ArrayBuffer is detached and a new ArrayBuffer is created to point to the newer, bigger memory. This means all we need to do to pass a string to JavaScript is to pass out the offset of the string in linear memory along with some way to indicate the length.

+ +

While there are many different ways to encode a string’s length in the string itself (for example, C strings); for simplicity here we just pass both offset and length as parameters:

+ +
(import "console" "log" (func $log (param i32) (param i32)))
+ +

On the JavaScript side, we can use the TextDecoder API to easily decode our bytes into a JavaScript string.  (We specify utf8 here, but many other encodings are supported.)

+ +
consoleLogString(offset, length) {
+  var bytes = new Uint8Array(memory.buffer, offset, length);
+  var string = new TextDecoder('utf8').decode(bytes);
+  console.log(string);
+}
+ +

The last missing piece of the puzzle is where consoleLogString gets access to the WebAssembly memory. WebAssembly gives us a lot of flexibility here: we can either create a Memory object in JavaScript and have the WebAssembly module import the memory, or we can have the WebAssembly module create the memory and export it to JavaScript.

+ +

For simplicity, let's create it in JavaScript then import it into WebAssembly.  Our import statement is written as follows:

+ +
(import "js" "mem" (memory 1))
+ +

The 1 indicates that the imported memory must have at least 1 page of memory (WebAssembly defines a page to be 64KB.)

+ +

So let's see a complete module that prints the string “Hi”.  In a normal compiled C program, you’d call a function to allocate some memory for the string, but since we’re just writing our own assembly here and we own the entire linear memory, we can just write the string contents into global memory using a data section.  Data sections allow a string of bytes to be written at a given offset at instantiation time and are similar to the .data sections in native executable formats.

+ +

Our final wasm module looks like this:

+ +
(module
+  (import "console" "log" (func $log (param i32 i32)))
+  (import "js" "mem" (memory 1))
+  (data (i32.const 0) "Hi")
+  (func (export "writeHi")
+    i32.const 0  ;; pass offset 0 to log
+    i32.const 2  ;; pass length 2 to log
+    call $log))
+ +
+

Note: Above, note the double semi-colon syntax (;;) for allowing comments in WebAssembly files.

+
+ +

Now from JavaScript we can create a Memory with 1 page and pass it in. This results in "Hi" being printed to the console:

+ +
var memory = new WebAssembly.Memory({initial:1});
+
+var importObj = { console: { log: consoleLogString }, js: { mem: memory } };
+
+fetchAndInstantiate('logger2.wasm', importObj).then(function(instance) {
+  instance.exports.writeHi();
+});
+ +
+

Note: You can find the full source on GitHub as logger2.html (also see it live).

+
+ +

WebAssembly tables

+ +

To finish this tour of the WebAssembly text format, let’s look at the most intricate, and often confusing, part of WebAssembly: tables. Tables are basically resizable arrays of references that can be accessed by index from WebAssembly code.

+ +

To see why tables are needed, we need to first observe that the call instruction we saw earlier (see {{anch("Calling functions from other functions in the same module")}}) takes a static function index and thus can only ever call one function — but what if the callee is a runtime value?

+ +
    +
  • In JavaScript we see this all the time: functions are first-class values.
    • +
  • In C/C++, we see this with function pointers.
    • +
  • In C++, we see this with virtual functions.
    • +
+ +

WebAssembly needed a type of call instruction to achieve this, so we gave it call_indirect, which takes a dynamic function operand. The problem is that the only types we have to give operands in WebAssembly are (currently) i32/i64/f32/f64.

+ +

WebAssembly could add an anyfunc type ("any" because the type could hold functions of any signature), but unfortunately this anyfunc type couldn’t be stored in linear memory for security reasons. Linear memory exposes the raw contents of stored values as bytes and this would allow wasm content to arbitrarily observe and corrupt raw function addresses, which is something that cannot be allowed on the web.

+ +

The solution was to store function references in a table and pass around table indices instead, which are just i32 values. call_indirect’s operand can therefore simply be an i32 index value.

+ +

Defining a table in wasm

+ +

So how do we place wasm functions in our table? Just like data sections can be used to initialize regions of linear memory with bytes, elem sections can be used to initialize regions of tables with functions:

+ +
(module
+  (table 2 anyfunc)
+  (elem (i32.const 0) $f1 $f2)
+  (func $f1 (result i32)
+    i32.const 42)
+  (func $f2 (result i32)
+    i32.const 13)
+  ...
+)
+ +
    +
  • In (table 2 anyfunc), the 2 is the initial size of the table (meaning it will store two references) and anyfunc declares that the element type of these references is "a function with any signature". In the current iteration of WebAssembly, this is the only allowed element type, but in the future, more element types will be added.
    • +
  • The functions (func) sections are just like any other declared wasm functions. These are the functions we are going to refer to in our table (for example’s sake, each one just returns a constant value). Note that the order the sections are declared in doesn’t matter here — you can declare your functions anywhere and still refer to them in your elem section.
    • +
  • The elem section can list any subset of the functions in a module, in any order, allowing duplicates. This is a list of the functions that are to be referenced by the table, in the order they are to be referenced.
    • +
  • The (i32.const 0) value inside the elem section is an offset — this needs to be declared at the start of the section, and specifies at what index in the table function references start to be populated. Here we’ve specified 0, and a size of 2 (see above), so we can fill in two references at indexes 0 and 1. If we wanted to start writing our references at offset 1, we’d have to write (i32.const 1), and the table size would have to be 3.
    • +
+ +
+

Note: Uninitialized elements are given a default throw-on-call value.

+
+ +

In JavaScript, the equivalent calls to create such a table instance would look something like this:

+ +
function() {
+  // table section
+  var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+
+  // function sections:
+  var f1 = function() { … }
+  var f2 = function() { … }
+
+  // elem section
+  tbl.set(0, f1);
+  tbl.set(1, f2);
+};
+ +

Using the table

+ +

Moving on, now we’ve defined the table we need to use it somehow. Let's use this section of code to do so:

+ +
(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail
+(func (export "callByIndex") (param $i i32) (result i32)
+  get_local $i
+  call_indirect $return_i32)
+ +
    +
  • The (type $return_i32 (func (param i32))) block specifies a type, with a reference name. This type is used when performing type checking of the table function reference calls later on. Here we are saying that the references need to be functions that return an i32 as a result.
    • +
  • Next, we define a function that will be exported with the name callByIndex. This will take one i32 as a parameter, which is given the argument name $i.
    • +
  • Inside the function, we add one value to the stack — whatever value is passed in as the parameter $i.
    • +
  • Finally, we use call_indirect to call a function from the table — it implicitly pops the value of $i off the stack. The net result of this is that the callByIndex function invokes the $i’th function in the table.
    • +
+ +

You could also declare the call_indirect parameter explicitly during the command call instead of before it, like this:

+ +
(call_indirect $return_i32 (get_local $i))
+ +

In a higher level, more expressive language like JavaScript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. The pseudo code would look something like tbl[i]().

+ +

So, back to the typechecking. Since WebAssembly is typechecked, and anyfunc means "any function signature", we have to supply the presumed signature of the callee at the callsite, hence we include the $return_i32 type, to tell the program a function returning an i32 is expected. If the callee doesn’t have a matching signature (say an f32 is returned instead), a {{jsxref("WebAssembly.RuntimeError")}} is thrown.

+ +

So what links the call_indirect to the table we are calling? The answer is that there is only one table allowed right now per module instance, and that is what call_indirect is implicitly calling. In the future, when multiple tables are allowed, we would also need to specify a table identifier of some kind, along the lines of

+ +
call_indirect $my_spicy_table $i32_to_void
+ +

The full module all together looks like this, and can be found in our wasm-table.wat example file:

+ +
(module
+  (table 2 anyfunc)
+  (func $f1 (result i32)
+    i32.const 42)
+  (func $f2 (result i32)
+    i32.const 13)
+  (elem (i32.const 0) $f1 $f2)
+  (type $return_i32 (func (result i32)))
+  (func (export "callByIndex") (param $i i32) (result i32)
+    get_local $i
+    call_indirect $return_i32)
+)
+ +

We load it into a webpage using the following JavaScript:

+ +
fetchAndInstantiate('wasm-table.wasm').then(function(instance) {
+  console.log(instance.exports.callByIndex(0)); // returns 42
+  console.log(instance.exports.callByIndex(1)); // returns 13
+  console.log(instance.exports.callByIndex(2));
+  // returns an error, because there is no index position 2 in the table
+});
+ +
+

Note: You can find this example on GitHub as wasm-table.html (see it live also).

+
+ +
+

Note: Just like Memory, Tables can also be created from JavaScript (see WebAssembly.Table()) as well as imported to/from another wasm module.

+
+ +

Mutating tables and dynamic linking

+ +

Because JavaScript has full access to function references, the Table object can be mutated from JavaScript by the grow(), get() and set() methods. When WebAssembly gets reference types, WebAssembly code will be able to mutate tables itself with get_elem/set_elem instructions.

+ +

Because tables are mutable, they can be used to implement sophisticated load-time and run-time dynamic linking schemes. When a program is dynamically linked, multiple instances share the same memory and table. This is symmetric to a native application where multiple compiled .dlls share a single process’s address space.

+ +

To see this in action, we’ll create a single import object containing a Memory object and a Table object, and pass this same import object to multiple instantiate() calls.

+ +

Our .wat examples look like so:

+ +

shared0.wat:

+ +
(module
+  (import "js" "memory" (memory 1))
+  (import "js" "table" (table 1 anyfunc))
+  (elem (i32.const 0) $shared0func)
+  (func $shared0func (result i32)
+   i32.const 0
+   i32.load)
+)
+ +

shared1.wat:

+ +
(module
+  (import "js" "memory" (memory 1))
+  (import "js" "table" (table 1 anyfunc))
+  (type $void_to_i32 (func (result i32)))
+  (func (export “doIt”) (result i32)
+   i32.const 0
+   i32.const 42
+   i32.store  ;; store 42 at address 0
+   i32.const 0
+   call_indirect $void_to_i32)
+)
+ +

These work as follows:

+ +
    +
  1. The function shared0func is defined in shared0.wat, and stored in our imported table.
    2. +
  2. This function creates a constant containing the value 0, and then uses the i32.load command to load the value contained in the provided memory index. The index provided is 0 — again, it implicitly pops the previous value off the stack. So shared0func loads and returns the value stored at memory index 0.
    3. +
  3. In shared1.wat, we export a function called doIt — this fucntion creates two constants containing the values 0 and 42, then calls i32.store to store a provided value at a provided index of the imported memory. Again, it implicitly pops these values off the stack, so the result is that it stores the value 42 in memory index 0,
    4. +
  4. In the last part of the function, we create a constant with value 0, then call the function at this index 0 of the table, which is shared0func, stored there earlier by the elem block in shared0.wat.
    5. +
  5. When called, shared0func loads the 42 we stored in memory using the i32.store command in shared1.wat.
    6. +
+ +
+

Note: The above expressions again pop values from the stack implicitly, but you could declare these explicitly inside the command calls instead, for example:

+ +
(i32.store (i32.const 0) (i32.const 42))
+(call_indirect $void_to_i32 (i32.const 0))
+
+ +

After converting to assembly, we then use shared0.wasm and shared1.wasm in JavaScript via the following code:

+ +
var importObj = {
+  js: {
+    memory : new WebAssembly.Memory({ initial: 1 }),
+    table : new WebAssembly.Table({ initial: 1, element: "anyfunc" })
+  }
+};
+
+Promise.all([
+  fetchAndInstantiate('shared0.wasm', importObj),
+  fetchAndInstantiate('shared1.wasm', importObj)
+]).then(function(results) {
+  console.log(results[1].exports.doIt());  // prints 42
+});
+ +

Each of the modules that is being compiled can import the same memory and table objects and thus share the same linear memory and table "address space".

+ +
+

Note: You can find this example on GitHub as shared-address-space.html (see it live also).

+
+ +

Summary

+ +

This finishes our high-level tour of the major components of the WebAssembly text format and how they get reflected in the WebAssembly JS API.

+ +

See also

+ +
    +
  • The main thing that wasn’t included is a comprehensive list of all the instructions that can occur in function bodies.  See the WebAssembly semantics for a treatment of each instruction.
    • +
  • See also the grammar of the text format that is implemented by the spec interpreter.
    • +
diff --git a/files/pt-br/webassembly/usando_a_api_javascript_do_webassembly/index.html b/files/pt-br/webassembly/usando_a_api_javascript_do_webassembly/index.html deleted file mode 100644 index e9146bef62..0000000000 --- a/files/pt-br/webassembly/usando_a_api_javascript_do_webassembly/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Usando a API JavaScript do WebAssembly -slug: WebAssembly/Usando_a_API_JavaScript_do_WebAssembly -tags: - - API - - Compilador - - DevTools - - JavaScript - - WebAssembly - - compilar - - memoria - - tabela -translation_of: WebAssembly/Using_the_JavaScript_API ---- -
{{WebAssemblySidebar}}
- -

Se você já compilou um módulo de outra linguagem utilizando ferramentas como o Emscripten, ou carregou e executou o código sozinho, o próximo passo é aprender mais sobre o uso de outros recursos da API JavaScript do WebAssembly. Este artigo te ensina o que você precisará saber.

- -
-

Nota: Se você não estiver familiarizado com os conceitos básicos mencionados neste artigo e precisar de mais explicação, leia WebAssembly concepts primeiro, e depois volte aqui.

-
- -

Um exemplo simples

- -

Vamos percorrer o passo a passo de um exemplo que explica como usar a API JavaScript do WebAssembly, e como usá-la para carregar um módulo wasm em uma página web.

- -
-

Nota: Você pode encontrar o código de exemplo no nosso repositório di GitHub webassembly-examples.

-
- -

Preparando o exemplo

- -
    -
  1. Primeiro precisamos de um módulo wasm! Pegue o nosso arquivo simple.wasm e salve uma cópia em um novo diretório em sua máquina local.
    2. -
  2. Depois, tenha certeza de que você está usando um browser com suporte ao WebAssembly. O Firefox 52+ e o Chrome 57+ já vem com WebAssembly habilitado por padrão.
    3. -
  3. Depois, crie um arquivo html simples chamado index.html no mesmo diretório que seu arquivo wasm (você pode usar o nosso template simples caso você não tenha algum por aí).
    4. -
  4. Agora, para ajudar a entender o que está acontecendo aqui, vamos olhar a representação textual do nosso módulo wasm (do qual também encontramos em Converting WebAssembly format to wasm): - 
    (module
-  (func $i (import "imports" "imported_func") (param i32))
-  (func (export "exported_func")
-    i32.const 42
-    call $i))
    -
    5. -
  5. Na segunda linha, você perceberá que o import tem um namespace de dois níveis — a função interna $i que é importada do imports.imported_func. Precisamos refletir esse namespace de dois níveis no JavaScript ao escrever o objeto que será importado no módulo wasm. Crie um elemento <script></script> no seu arquivo HTML, e adicione o seguinte código: - 
    var importObject = {
-  imports: {
-      imported_func: function(arg) {
-        console.log(arg);
-      }
-    }
-  };
    -
    6. -
- -

Conforme explicado acima, temos nossa função que será importada em imports.imported_func.

- -
-

Nota: Isto poderia ser mais conciso usando a sintaxe de arrow function do ES6:

- -
var importObject = { imports: { imported_func: arg => console.log(arg) } };
-
- -

O estilo que você preferir fica a sua escolha.

- -

Carregando e utilizando o nosso módulo wasm

- -

Com o objeto que iremos importar preparado, vamos baixar o nosso arquivo wasm, torná-lo disponível em um array buffer, e em seguida fazer uso de sua função exportada.

- -

Adicione o código abaixo no seu script:

- -
fetch('simple.wasm').then(response =>
-  response.arrayBuffer()
-).then(bytes =>
-  WebAssembly.instantiate(bytes, importObject)
-).then(results => {
-  results.instance.exports.exported_func();
-});
- -
-

Nota: Já explicamos com grandes detalhes como funciona essa síntaxe em Loading and running WebAssembly code. Volte lá e se atualize caso não se sinta confortável com o assunto.

-
- -

O resultado liquido disto é que nós chamamos nossa função exported_func exportada pelo WebAssembly, que por sua vez chama a nossa função JavaScript importada imported_func, que mostra no console o valor fornecido (42) dentro da instância do WebAssembly. Se você salvar seu código de exemplo agora e carregá-lo em um browser que suporta WebAssembly, você verá isso em ação!

- -
-

Nota: O WebAssembly está habilitado por padrão no Firefox 52+, no Chrome 57+ e no Opera mais recente (você também pode executar código wasm no Firefox 47+ habilitando a flag javascript.options.wasm em about:config, ou no Chrome (51+) e no Opera (38+) indo em chrome://flags e habilitando a flag Experimental WebAssembly .)

-
- -

Este exemplo é longo e um pouco complicado que alcança muito pouco, mas serve para mostrar o que é possível — usando código WebAssembly junto com JavaScript em suas aplicações web. Como já dissemos em outro lugar, o WebAssembly não pretende substituir o JavaScript; ambos podem trabalhar juntos, juntando forças.

- -

Visualizando o wasm no developer tools

- -

No Firefox 54+, o painel Debugger do Developer Tool consegue exibir a representação textual do qualquer código wasm inserido em uma página web. Para visualizá-lo, abra o painel Debugger e clique em “xxx > wasm”.

- -

- -

Muito em breve no Firefox, além de visualizar o WebAssembly em seu formato textual, os desenvolvedores serão capazes de depurar (colocar breakpoints, inspecionar o callstack, etc.) o WebAssembly utilizando o formato textual. Assista o vídeo  WebAssembly debugging with Firefox DevTools para ter uma prévia.

- -

Memória

- -

No modelo de memória de baixo nível do WebAssembly, a memória é representada como uma faixa contínua de bytes não tipados chamados de Memória Linear que são lidos e escritos por instruções de carga e armazenamento dentro do módulo. Neste modelo de memória, qualquer carga ou armazenamento pode acessar qualquer byte na memória linear inteira, o que é necessário para representar fielmente conceitos de C/C++ como ponteiros.

- -

Ao contrário de um programa C/C++ nativo, contudo, onde a coleção de memória disponível se estende por todo o processo, a memória que é acessível por uma instância de WebAssembly em particular se limita a uma única — e potencialmente muito pequena — coleção contida por um objeto do tipo WebAssembly Memory.  Isto possibilita que uma única aplicação web utilize diversas bibliotecas independentes — cada uma das quais estiverem utilizando o WebAssembly internamente — para ter memórias separadas que são totalmente isoladas umas das outras.

- -

In JavaScript, a Memory instance can be thought of as a resizable ArrayBuffer and, just as with ArrayBuffers, a single web app can create many independent Memory objects.  You can create one using the {{jsxref("WebAssembly.Memory()")}} constructor, which takes as arguments an initial size and (optionally) a maximum size.

- -

Let’s start exploring this by looking at a quick example.

- -
    -
  1. -

    Create another new simple HTML page (copy our simple template) and call it memory.html. Add a <script></script> element to the page.

    -
    2. -
  2. -

    Now add the following line to the top of your script, to create a memory instance:

    - - 
    var memory = new WebAssembly.Memory({initial:10, maximum:100});
    - -

    The unit of initial and maximum is WebAssembly pages — these are fixed to 64KB in size. This means that the above memory instance has an initial size of 640KB, and a maximum size of 6.4MB.

    - -

    WebAssembly memory exposes its bytes by simply providing a buffer getter/setter that returns an ArrayBuffer. For example, to write 42 directly into the first word of linear memory, you can do this:

    - - 
    new Uint32Array(memory.buffer)[0] = 42;
    - -

    You can then return the same value using:

    - - 
    new Uint32Array(memory.buffer)[0]
    -
    3. -
  3. -

    Try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your JavaScript console.

    -
    4. -
- -

Growing memory

- -

A memory instance can be grown by calls to {{jsxref("Memory.prototype.grow()")}}, where again the argument is specified in units of WebAssembly pages:

- -
memory.grow(1);
- -

If a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a {{jsxref("WebAssembly.RangeError")}} exception. The engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient.

- -

Note: Since an {{domxref("ArrayBuffer")}}’s byteLength is immutable, after a successful {{jsxref("Memory.prototype.grow()")}} operation the buffer getter will return a new ArrayBuffer object (with the new byteLength) and any previous ArrayBuffer objects become “detached”, or disconnected from the underlying memory they previously pointed to.

- -

Just like functions, linear memories can be defined inside a module or imported. Similarly, a module may also optionally export its memory. This means that JavaScript can get access to the memory of a WebAssembly instance either by creating a new WebAssembly.Memory and passing it in as an import or by receiving a Memory export (via Instance.prototype.exports).

- -

More involved memory example

- -

Let’s make the above assertions clearer by looking at a more involved memory example — a WebAssembly module that sums an array of integers. You can find this at memory.wasm.

- -
    -
  1. -

    make a local copy of memory.wasm in the same directory as before.

    - -
    -

    Note: You can see the module’s text representation at memory.wat.

    -
    -
    2. -
  2. -

    Go back to your memory.html sample file, and fetch, compile, and instantiate your wasm module as before — add the following to the bottom of your script:

    - - 
    fetch('memory.wasm').then(response =>
-  response.arrayBuffer()
-).then(bytes =>
-  WebAssembly.instantiate(bytes)
-).then(results => {
-  // add your code here
-});
    -
    3. -
  3. -

    Since this module exports its memory, given an Instance of this module called instance we can use an exported function accumulate() to create and populate an input array directly in the module instance’s linear memory (mem). Add the following into your code, where indicated:

    - - 
    var i32 = new Uint32Array(results.instance.exports.mem.buffer);
-for (var i = 0; i < 10; i++) {
-  i32[i] = i;
-}
-
-var sum = results.instance.exports.accumulate(0, 10);
-console.log(sum);
    -
    4. -
- -

Note how we create the {{domxref("Uint32Array")}} view on the Memory object’s buffer (Memory.prototype.buffer), not on the Memory itself.

- -

As importações de memória funcionam como importações de função, apenas objetos de memória são passados ​​como valores em vez de funções JavaScript. As importações de memória são úteis por dois motivos:

- -
    -
  • Eles permitem que o JavaScript busque e crie o conteúdo inicial da memória antes ou simultaneamente com a compilação do módulo.
    • -
  • Eles permitem que um único objeto Memory seja importado por várias instâncias do módulo, o que é um bloco de construção crítico para implementar a vinculação dinâmica no WebAssembly.
    • -
- -
-

Note: You can find our complete demo at memory.html (see it live also) — this version uses the fetchAndInstantiate() function.

-
- -

Tables

- -

A WebAssembly Table is a resizable typed array of references that can be accessed by both JavaScript and WebAssembly code.  While Memory provides a resizable typed array of raw bytes, it is unsafe for references to be stored in a Memory since a reference is an engine-trusted value whose bytes must not be read or written directly by content for safety, portability, and stability reasons.

- -

Tables have an element type, which limits the types of reference that can be stored in the table.  In the current iteration of WebAssembly, there is only one type of reference needed by WebAssembly code — functions — and thus only one valid element type.  In future iterations, more element types will be added.

- -

Function references are necessary to compile languages like C/C++ that have function pointers.  In a native implementation of C/C++, a function pointer is represented by the raw address of the function’s code in the process’s virtual address space and so, for the safety reasons mentioned above, cannot be stored directly in linear memory.  Instead, function references are stored in a table and their indexes, which are integers and can be stored in linear memory, are passed around instead.

- -

When the time comes to call a function pointer, the WebAssembly caller supplies the index, which can then be safety bounds checked against the table before indexing and calling the indexed function reference.  Thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably.

- -

Tables can be mutated via Table.prototype.set(), which updates one of the values in a table, and Table.prototype.grow(), which increases the number of values that can be stored in a table.  This allows the indirectly-callable set of functions to change over time, which is necessary for dynamic linking techniques.  The mutations are immediately accessible via Table.prototype.get() in JavaScript, and to wasm modules.

- -

A table example

- -

Let’s looking at an simple table example — a WebAssembly module that creates and exports a table with two elements: element 0 returns 13 and element 1 returns 42. You can find this at table.wasm.

- -
    -
  1. -

    Make a local copy of table.wasm in a new directory.

    - -
    -

    Note: You can see the module’s text representation at table.wat.

    -
    -
    2. -
  2. -

    Create a new copy of our HTML template in the same directory and call it table.html.

    -
    3. -
  3. -

    As before, fetch, compile, and instantiate your wasm module — add the following into a {{htmlelement("script")}} element at the bottom of your HTML body:

    - - 
    fetch('table.wasm').then(response =>
-  response.arrayBuffer()
-).then(bytes =>
-  WebAssembly.instantiate(bytes)
-).then(results => {
-  // add your code here
-});
    -
    4. -
  4. -

    Now let’s access the data in the tables — add the following lines to your code in the indicated place:

    - - 
    var tbl = results.instance.exports.tbl;
-console.log(tbl.get(0)());  // 13
-console.log(tbl.get(1)());  // 42
    -
    5. -
- -

This code accesses each function reference stored in the table in turn, and instantiates them to print the values they hold to the console — note how each function reference is retrieved with a Table.prototype.get() call, then we add an extra set of parentheses on the end to actually invoke the function.

- -
-

Note: You can find our complete demo at table.html (see it live also) — this version uses the fetchAndInstantiate() function.

-
- -

Multiplicity

- -

Now we’ve demonstrated usage of the main key WebAssembly building blocks, this is a good place to mention the concept of multiplicity. This provides WebAssembly with a multitude of advances in terms of architectural efficiency:

- -
    -
  • One module can have N Instances, in the same way that one function literal can produce N closure values.
    • -
  • One module instance can use 0–1 memory instances, which provide the "address space" of the instance. Future versions of WebAssembly may allow 0–N memory instances per module instance (see Multiple Tables and Memories).
    • -
  • One module instance can use 0–1 table instances — this is the "function address space" of the instance, used to implement C function pointers. Future versions of WebAssembly may allow 0–N table instances per module instance in the future.
    • -
  • One memory or table instance can be used by 0–N module instances — these instances all share the same address space, allowing dynamic linking.
    • -
- -

You can see multiplicity in action in our Understanding text format article — see the Mutating tables and dynamic linking section (TBD).

- -

Summary

- -

This article has taken you through the basics of using the WebAssembly JavaScript API to include a WebAssembly module in a JavaScript context and make use of its functions, and how to use WebAssembly memory and tables in JavaScript. We also touched on the concept of multiplicity.

- -

See also

- - diff --git a/files/pt-br/webassembly/using_the_javascript_api/index.html b/files/pt-br/webassembly/using_the_javascript_api/index.html new file mode 100644 index 0000000000..e9146bef62 --- /dev/null +++ b/files/pt-br/webassembly/using_the_javascript_api/index.html @@ -0,0 +1,269 @@ +--- +title: Usando a API JavaScript do WebAssembly +slug: WebAssembly/Usando_a_API_JavaScript_do_WebAssembly +tags: + - API + - Compilador + - DevTools + - JavaScript + - WebAssembly + - compilar + - memoria + - tabela +translation_of: WebAssembly/Using_the_JavaScript_API +--- +
{{WebAssemblySidebar}}
+ +

Se você já compilou um módulo de outra linguagem utilizando ferramentas como o Emscripten, ou carregou e executou o código sozinho, o próximo passo é aprender mais sobre o uso de outros recursos da API JavaScript do WebAssembly. Este artigo te ensina o que você precisará saber.

+ +
+

Nota: Se você não estiver familiarizado com os conceitos básicos mencionados neste artigo e precisar de mais explicação, leia WebAssembly concepts primeiro, e depois volte aqui.

+
+ +

Um exemplo simples

+ +

Vamos percorrer o passo a passo de um exemplo que explica como usar a API JavaScript do WebAssembly, e como usá-la para carregar um módulo wasm em uma página web.

+ +
+

Nota: Você pode encontrar o código de exemplo no nosso repositório di GitHub webassembly-examples.

+
+ +

Preparando o exemplo

+ +
    +
  1. Primeiro precisamos de um módulo wasm! Pegue o nosso arquivo simple.wasm e salve uma cópia em um novo diretório em sua máquina local.
    2. +
  2. Depois, tenha certeza de que você está usando um browser com suporte ao WebAssembly. O Firefox 52+ e o Chrome 57+ já vem com WebAssembly habilitado por padrão.
    3. +
  3. Depois, crie um arquivo html simples chamado index.html no mesmo diretório que seu arquivo wasm (você pode usar o nosso template simples caso você não tenha algum por aí).
    4. +
  4. Agora, para ajudar a entender o que está acontecendo aqui, vamos olhar a representação textual do nosso módulo wasm (do qual também encontramos em Converting WebAssembly format to wasm): + 
    (module
+  (func $i (import "imports" "imported_func") (param i32))
+  (func (export "exported_func")
+    i32.const 42
+    call $i))
    +
    5. +
  5. Na segunda linha, você perceberá que o import tem um namespace de dois níveis — a função interna $i que é importada do imports.imported_func. Precisamos refletir esse namespace de dois níveis no JavaScript ao escrever o objeto que será importado no módulo wasm. Crie um elemento <script></script> no seu arquivo HTML, e adicione o seguinte código: + 
    var importObject = {
+  imports: {
+      imported_func: function(arg) {
+        console.log(arg);
+      }
+    }
+  };
    +
    6. +
+ +

Conforme explicado acima, temos nossa função que será importada em imports.imported_func.

+ +
+

Nota: Isto poderia ser mais conciso usando a sintaxe de arrow function do ES6:

+ +
var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+ +

O estilo que você preferir fica a sua escolha.

+ +

Carregando e utilizando o nosso módulo wasm

+ +

Com o objeto que iremos importar preparado, vamos baixar o nosso arquivo wasm, torná-lo disponível em um array buffer, e em seguida fazer uso de sua função exportada.

+ +

Adicione o código abaixo no seu script:

+ +
fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.instantiate(bytes, importObject)
+).then(results => {
+  results.instance.exports.exported_func();
+});
+ +
+

Nota: Já explicamos com grandes detalhes como funciona essa síntaxe em Loading and running WebAssembly code. Volte lá e se atualize caso não se sinta confortável com o assunto.

+
+ +

O resultado liquido disto é que nós chamamos nossa função exported_func exportada pelo WebAssembly, que por sua vez chama a nossa função JavaScript importada imported_func, que mostra no console o valor fornecido (42) dentro da instância do WebAssembly. Se você salvar seu código de exemplo agora e carregá-lo em um browser que suporta WebAssembly, você verá isso em ação!

+ +
+

Nota: O WebAssembly está habilitado por padrão no Firefox 52+, no Chrome 57+ e no Opera mais recente (você também pode executar código wasm no Firefox 47+ habilitando a flag javascript.options.wasm em about:config, ou no Chrome (51+) e no Opera (38+) indo em chrome://flags e habilitando a flag Experimental WebAssembly .)

+
+ +

Este exemplo é longo e um pouco complicado que alcança muito pouco, mas serve para mostrar o que é possível — usando código WebAssembly junto com JavaScript em suas aplicações web. Como já dissemos em outro lugar, o WebAssembly não pretende substituir o JavaScript; ambos podem trabalhar juntos, juntando forças.

+ +

Visualizando o wasm no developer tools

+ +

No Firefox 54+, o painel Debugger do Developer Tool consegue exibir a representação textual do qualquer código wasm inserido em uma página web. Para visualizá-lo, abra o painel Debugger e clique em “xxx > wasm”.

+ +

+ +

Muito em breve no Firefox, além de visualizar o WebAssembly em seu formato textual, os desenvolvedores serão capazes de depurar (colocar breakpoints, inspecionar o callstack, etc.) o WebAssembly utilizando o formato textual. Assista o vídeo  WebAssembly debugging with Firefox DevTools para ter uma prévia.

+ +

Memória

+ +

No modelo de memória de baixo nível do WebAssembly, a memória é representada como uma faixa contínua de bytes não tipados chamados de Memória Linear que são lidos e escritos por instruções de carga e armazenamento dentro do módulo. Neste modelo de memória, qualquer carga ou armazenamento pode acessar qualquer byte na memória linear inteira, o que é necessário para representar fielmente conceitos de C/C++ como ponteiros.

+ +

Ao contrário de um programa C/C++ nativo, contudo, onde a coleção de memória disponível se estende por todo o processo, a memória que é acessível por uma instância de WebAssembly em particular se limita a uma única — e potencialmente muito pequena — coleção contida por um objeto do tipo WebAssembly Memory.  Isto possibilita que uma única aplicação web utilize diversas bibliotecas independentes — cada uma das quais estiverem utilizando o WebAssembly internamente — para ter memórias separadas que são totalmente isoladas umas das outras.

+ +

In JavaScript, a Memory instance can be thought of as a resizable ArrayBuffer and, just as with ArrayBuffers, a single web app can create many independent Memory objects.  You can create one using the {{jsxref("WebAssembly.Memory()")}} constructor, which takes as arguments an initial size and (optionally) a maximum size.

+ +

Let’s start exploring this by looking at a quick example.

+ +
    +
  1. +

    Create another new simple HTML page (copy our simple template) and call it memory.html. Add a <script></script> element to the page.

    +
    2. +
  2. +

    Now add the following line to the top of your script, to create a memory instance:

    + + 
    var memory = new WebAssembly.Memory({initial:10, maximum:100});
    + +

    The unit of initial and maximum is WebAssembly pages — these are fixed to 64KB in size. This means that the above memory instance has an initial size of 640KB, and a maximum size of 6.4MB.

    + +

    WebAssembly memory exposes its bytes by simply providing a buffer getter/setter that returns an ArrayBuffer. For example, to write 42 directly into the first word of linear memory, you can do this:

    + + 
    new Uint32Array(memory.buffer)[0] = 42;
    + +

    You can then return the same value using:

    + + 
    new Uint32Array(memory.buffer)[0]
    +
    3. +
  3. +

    Try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your JavaScript console.

    +
    4. +
+ +

Growing memory

+ +

A memory instance can be grown by calls to {{jsxref("Memory.prototype.grow()")}}, where again the argument is specified in units of WebAssembly pages:

+ +
memory.grow(1);
+ +

If a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a {{jsxref("WebAssembly.RangeError")}} exception. The engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient.

+ +

Note: Since an {{domxref("ArrayBuffer")}}’s byteLength is immutable, after a successful {{jsxref("Memory.prototype.grow()")}} operation the buffer getter will return a new ArrayBuffer object (with the new byteLength) and any previous ArrayBuffer objects become “detached”, or disconnected from the underlying memory they previously pointed to.

+ +

Just like functions, linear memories can be defined inside a module or imported. Similarly, a module may also optionally export its memory. This means that JavaScript can get access to the memory of a WebAssembly instance either by creating a new WebAssembly.Memory and passing it in as an import or by receiving a Memory export (via Instance.prototype.exports).

+ +

More involved memory example

+ +

Let’s make the above assertions clearer by looking at a more involved memory example — a WebAssembly module that sums an array of integers. You can find this at memory.wasm.

+ +
    +
  1. +

    make a local copy of memory.wasm in the same directory as before.

    + +
    +

    Note: You can see the module’s text representation at memory.wat.

    +
    +
    2. +
  2. +

    Go back to your memory.html sample file, and fetch, compile, and instantiate your wasm module as before — add the following to the bottom of your script:

    + + 
    fetch('memory.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.instantiate(bytes)
+).then(results => {
+  // add your code here
+});
    +
    3. +
  3. +

    Since this module exports its memory, given an Instance of this module called instance we can use an exported function accumulate() to create and populate an input array directly in the module instance’s linear memory (mem). Add the following into your code, where indicated:

    + + 
    var i32 = new Uint32Array(results.instance.exports.mem.buffer);
+for (var i = 0; i < 10; i++) {
+  i32[i] = i;
+}
+
+var sum = results.instance.exports.accumulate(0, 10);
+console.log(sum);
    +
    4. +
+ +

Note how we create the {{domxref("Uint32Array")}} view on the Memory object’s buffer (Memory.prototype.buffer), not on the Memory itself.

+ +

As importações de memória funcionam como importações de função, apenas objetos de memória são passados ​​como valores em vez de funções JavaScript. As importações de memória são úteis por dois motivos:

+ +
    +
  • Eles permitem que o JavaScript busque e crie o conteúdo inicial da memória antes ou simultaneamente com a compilação do módulo.
    • +
  • Eles permitem que um único objeto Memory seja importado por várias instâncias do módulo, o que é um bloco de construção crítico para implementar a vinculação dinâmica no WebAssembly.
    • +
+ +
+

Note: You can find our complete demo at memory.html (see it live also) — this version uses the fetchAndInstantiate() function.

+
+ +

Tables

+ +

A WebAssembly Table is a resizable typed array of references that can be accessed by both JavaScript and WebAssembly code.  While Memory provides a resizable typed array of raw bytes, it is unsafe for references to be stored in a Memory since a reference is an engine-trusted value whose bytes must not be read or written directly by content for safety, portability, and stability reasons.

+ +

Tables have an element type, which limits the types of reference that can be stored in the table.  In the current iteration of WebAssembly, there is only one type of reference needed by WebAssembly code — functions — and thus only one valid element type.  In future iterations, more element types will be added.

+ +

Function references are necessary to compile languages like C/C++ that have function pointers.  In a native implementation of C/C++, a function pointer is represented by the raw address of the function’s code in the process’s virtual address space and so, for the safety reasons mentioned above, cannot be stored directly in linear memory.  Instead, function references are stored in a table and their indexes, which are integers and can be stored in linear memory, are passed around instead.

+ +

When the time comes to call a function pointer, the WebAssembly caller supplies the index, which can then be safety bounds checked against the table before indexing and calling the indexed function reference.  Thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably.

+ +

Tables can be mutated via Table.prototype.set(), which updates one of the values in a table, and Table.prototype.grow(), which increases the number of values that can be stored in a table.  This allows the indirectly-callable set of functions to change over time, which is necessary for dynamic linking techniques.  The mutations are immediately accessible via Table.prototype.get() in JavaScript, and to wasm modules.

+ +

A table example

+ +

Let’s looking at an simple table example — a WebAssembly module that creates and exports a table with two elements: element 0 returns 13 and element 1 returns 42. You can find this at table.wasm.

+ +
    +
  1. +

    Make a local copy of table.wasm in a new directory.

    + +
    +

    Note: You can see the module’s text representation at table.wat.

    +
    +
    2. +
  2. +

    Create a new copy of our HTML template in the same directory and call it table.html.

    +
    3. +
  3. +

    As before, fetch, compile, and instantiate your wasm module — add the following into a {{htmlelement("script")}} element at the bottom of your HTML body:

    + + 
    fetch('table.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.instantiate(bytes)
+).then(results => {
+  // add your code here
+});
    +
    4. +
  4. +

    Now let’s access the data in the tables — add the following lines to your code in the indicated place:

    + + 
    var tbl = results.instance.exports.tbl;
+console.log(tbl.get(0)());  // 13
+console.log(tbl.get(1)());  // 42
    +
    5. +
+ +

This code accesses each function reference stored in the table in turn, and instantiates them to print the values they hold to the console — note how each function reference is retrieved with a Table.prototype.get() call, then we add an extra set of parentheses on the end to actually invoke the function.

+ +
+

Note: You can find our complete demo at table.html (see it live also) — this version uses the fetchAndInstantiate() function.

+
+ +

Multiplicity

+ +

Now we’ve demonstrated usage of the main key WebAssembly building blocks, this is a good place to mention the concept of multiplicity. This provides WebAssembly with a multitude of advances in terms of architectural efficiency:

+ +
    +
  • One module can have N Instances, in the same way that one function literal can produce N closure values.
    • +
  • One module instance can use 0–1 memory instances, which provide the "address space" of the instance. Future versions of WebAssembly may allow 0–N memory instances per module instance (see Multiple Tables and Memories).
    • +
  • One module instance can use 0–1 table instances — this is the "function address space" of the instance, used to implement C function pointers. Future versions of WebAssembly may allow 0–N table instances per module instance in the future.
    • +
  • One memory or table instance can be used by 0–N module instances — these instances all share the same address space, allowing dynamic linking.
    • +
+ +

You can see multiplicity in action in our Understanding text format article — see the Mutating tables and dynamic linking section (TBD).

+ +

Summary

+ +

This article has taken you through the basics of using the WebAssembly JavaScript API to include a WebAssembly module in a JavaScript context and make use of its functions, and how to use WebAssembly memory and tables in JavaScript. We also touched on the concept of multiplicity.

+ +

See also

+ + diff --git a/files/pt-br/webrtc/index.html b/files/pt-br/webrtc/index.html deleted file mode 100644 index 9b1cff261d..0000000000 --- a/files/pt-br/webrtc/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebRTC -slug: WebRTC -tags: - - Media - - NeedsContent - - NeedsTranslation - - TopicStub - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC ---- -

O RTC na WebRTC significa comunicações em tempo real, tecnologia que permite transmissão de áudio/vídeo e compartilhamento de dados entre navegador clientes (pares). Como um conjunto de padrões, a WebRTC fornece a qualquer navegador com à capacidade de compartilhar dados de aplicativos e realizar teleconferências de ponto a ponto, sem a necessidade de instalar plug-ins ou software de terceiros.

- -

Os componentes WebRTC são acessados com APIs JavaScript. Atualmente em desenvolvimento estão a API Network Stream, que representa um fluxo de dados de áudio ou vídeo, e a API PeerConnection, que permite que dois ou mais usuários se comuniquem entre navegadores. Também está em desenvolvimento uma API DataChannel que permite a comunicação de outros tipos de dados para jogos em tempo real, bate-papo de texto, transferência de arquivos e assim por diante.

- -
-

Note: Grande parte desse co nteúdo está desatualizado. Vamos atualizá-lo em breve.

-
- -

Quer descobrir WebRTC? Assista a este vídeo introdutório na web!!

- - - - - - - - -
-

Documentação sobre WebRTC

- -
-
Introdução ao WebRTC
-
Um guia introdutório sobre o que é WebRTC e como funciona. -
-
Usando a API Network Stream
-
Um guia para usar a API Network Stream para transmitir áudio e vídeo.
-
Comunicações ponto a ponto com WebRTC
-
Como executar comunicações ponto a ponto usando as APIs WebRTC.
-
Capturando imagens de uma webcam
-
Um guia introdutório sobre o que é WebRTC e como funciona.
-
API MediaStream
-
A API que suporta a geração e manipulação de objetos de fluxo de mídia.
-
getUserMedia()
-
A função de navegador que fornece acesso aos dispositivos de mídia do sistema.
-
- -

Saiba mais...

- -

Exemplos

- - - 		-

Obter ajuda da comunidade

-Ao desenvolver sites e aplicações web que aproveitarão as tecnologias WebRTC, pode ser útil conversar com outras pessoas do mesmo modo.

- -
    -
  • Consulte o fórum de tópicos da mídia: {{ DiscussionList("dev-media", "mozilla.dev.media") }}
    • -
- -
    -
  • Faça sua pergunta no canal IRC de mídia da Mozilla: #media
    • -
- -

Não se esqueça da etiqueta...

- - - - -

Recursos

- - -
diff --git a/files/pt-br/websockets/escrevendo_aplicacoes_cliente_websocket/index.html b/files/pt-br/websockets/escrevendo_aplicacoes_cliente_websocket/index.html deleted file mode 100644 index af608ae641..0000000000 --- a/files/pt-br/websockets/escrevendo_aplicacoes_cliente_websocket/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Escrevendo aplicações cliente WebSocket -slug: WebSockets/Escrevendo_aplicacoes_cliente_WebSocket -tags: - - Cliente - - Exemplo - - Guía - - WebSocket API -translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications ---- -

Aplicações cliente usam o WebSocket API para se comunicar com WebSocket servers sob o protocolo WebSocket.

- -

{{AvailableInWorkers}}

- -
-

O fragmento de código neste artigo foi tomado de um exemplo de chat usando WebSocket. veja o código, então experimente o exemplo. O exemplo atual possui um bug; ele está tentando usar WebSockets inseguro e precisa ser atualizado para usar WebSocokets seguro. Iremos arrumar isso em breve!

-
- -

Criando um objeto WebSocket 

- -

Para se comunicar utilizando o protocolo WebSocket, você precisa criar um objeto WebSocket, que automaticamente tentará abrir a conexão com o servidor.

- -

O construtor WebSocket aceita dois campos, um obrigatório e um opcional:

- -
WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString protocols
-);
-
- -
-
url
-
A URL para se conectar. Esta deve ser a URL para qual o WebSocket irá responder.
-
protocols {{ optional_inline() }}
-
Uma única string indicando o protocolo ou uma array de strings de protocolos. Estas strings são usadas para indicar sub-protocolos, de forma que um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer que um servidor seja capaz de lidar com diferentes tipos de interações a depender do protocol especificado). Se não especificar uma string de protocolo, uma string vazia é assumida.
-
- -

O construtor lançará a exceção SECURITY_ERR se o destino não permitir acesso. Isso pode acontecer se você tentar utilizar uma conexão insegura (a maioria dos {{Glossary("user agent", "user agents")}} agora necessitam de um link seguro para todas as conexões WebSocket, a menos que estejam no mesmo dispositivo ou na mesma rede).

- -
-
- -

Erros de Conexão

- -

Se um erro ocorrer durante a tentativa de conexão, primeiro um simpes evento com o nome "error" é enviado ao objeto WebSocket  (invocando, assim, seu manipulador onerror), e então o CloseEvent é enviado ao objeto WebSocket (invocando o manipulador onclose) para indicar a razão pela qual a conexão foi fechada.

- -

O browser pode exibir uma descrição de erro mais detalhada na saída do console, ou mesmo um código de encerramento conforme definido na RFC 6455, Section 7.4 através do CloseEvent. Está implementado a partir do Firefox 11.

- -

Exemplos

- -

Neste simples exemplo, criaremos um novo WebSocket, conectando ao servidor em ws://www.example.com/socketserver. Neste exemplo utilizaremos um protocolo customizado denominado "protocolOne", embora possa ser omitido.

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
-
- -

No retorno, exampleSocket.readyState está como CONNECTING. O readyState se tornará OPEN quando a conexão estiver pronta para transferir dados.

- -

Se quiser abrir uma conexão e for flexível quanto aos protocolos suportados, você pode especificar um array de protocolos:

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
-
- -

Uma vez que a conexão for estabelecida (isso é, readyState está OPEN), exampleSocket.protocol informará qual protocolo o servidor selecionou.

- -

Nos exemplos acima, ws foi substituído por http, de forma similar wss substitui https. Estabelecer uma conexão WebSocket depende do Mecanismo de Aprimoramento HTTP, de forma que o pedido para atualização de protocolo está implícito quando endereçamos o servidor HTTP como ws://www.example.com ou wss://www.example.com.

- -

Enviando dados ao servidor

- -

Uma vez a conexão aberta, você pode iniciar a transmisão de dados ao servidor. Para tanto, chame o método send() do WebSocket para cada mensagem que queira enviar:

- -
exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
-
- -

Você pode enviar dados como uma string, {{ domxref("Blob") }}, ou um ArrayBuffer.

- -
Note: Nas versões anteriores à 11, o Firefox suporta apenas o envio de dados como string.
- -

Visto que estabelecer uma conexão funciona de forma assícrona e, consequentemente, propensa a erros, não há garantia de sucesso ao chamar o método send() imediatamente após criar um objeto WebSocket. Podemos, pelo menos, ter certeza de que a tentativa de envio dos dados apenas ocorre quando uma conexão é estabelecida definindo um manipulador de eventos onopen:

- -
exampleSocket.onopen = function (event) {
-  exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
-};
-
- -

Utilizando JSON para transmitir objetos

- -

Uma forma conveniente é usar JSON para enviar dados razoavelmente complexos ao servidor. Por exemplo, um aplicação de chat pode interagir  com o servidor empregando um protocolo que utilize pacotes de dados  JSON encapsulados:

- -
// Enviar texto para todos os usuarios atraves do servidor
-function sendText() {
-  // Construir um objeto do tipo msg contendo o dado que o servidor precisa processar a partir do cliente de chat.
-  var msg = {
-    type: "message",
-    text: document.getElementById("text").value,
-    id:   clientID,
-    date: Date.now()
-  };
-
-  // Enviar o objeto msg como um JSON em formato de string.
-  exampleSocket.send(JSON.stringify(msg));
-
-  // Esvaziar o campo input do elemento text, pronto pra receber a próxima linha de texto do usuário.
-  document.getElementById("text").value = "";
-}
-
- -

Recebendo mensagens do servidor

- -

A API WebSockets é dirigida por eventos; quando mensagens são recebidas, um evento de "mensagem" é entregue à função onmessage. Para começar a ouvir os dados de entrada, você pode fazer algo conforme o exemplo abaixo:

- -
exampleSocket.onmessage = function (event) {
-  console.log(event.data);
-}
-
- -

Recebendo e interpretando objetos JSON

- -

Vamos considerar que a aplicação cliente de chat remete o envio de dados {{ anch("Utilizando JSON para transmitir objetos") }}. Existem diversos tipos de pacotes de dados que o cliente pode receber, tais como:

- -
    -
  • Handshake de login
    • -
  • Messagem de texto
    • -
  • Atualizações da lista de usuários
    • -
- -

O código que interpreta as mensagens de entrada se parecerá com esse:

- -
exampleSocket.onmessage = function(event) {
-  var f = document.getElementById("chatbox").contentDocument;
-  var text = "";
-  var msg = JSON.parse(event.data);
-  var time = new Date(msg.date);
-  var timeStr = time.toLocaleTimeString();
-
-  switch(msg.type) {
-    case "id":
-      clientID = msg.id;
-      setUsername();
-      break;
-    case "username":
-      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
-      break;
-    case "message":
-      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
-      break;
-    case "rejectusername":
-      text = "<b>Seu usuario foi configurado como <em>" + msg.name + "</em> porque o nome que você escolheu está em uso.</b><br>"
-      break;
-    case "userlist":
-      var ul = "";
-      for (i=0; i < msg.users.length; i++) {
-        ul += msg.users[i] + "<br>";
-      }
-      document.getElementById("userlistbox").innerHTML = ul;
-      break;
-  }
-
-  if (text.length) {
-    f.write(text);
-    document.getElementById("chatbox").contentWindow.scrollByPages(1);
-  }
-};
-
- -

Aqui utilizamos JSON.parse() para conveter o objeto JSON de volta ao objeto original, em seguida, examine e aja de acordo com seu conteúdo.

- -

Formato de dados de texto

- -

O formato de Texto recebido através de uma conexão WebSocket está no formato UTF-8.

- -

Fechando a conexão

- -

Quando finalizar o uso da conexão WebSocket, invoque o método close():

- -
exampleSocket.close();
-
- -

Pode ser útil examinar o atributo bufferedAmount do socket  antes de tentar fechar a conexão para determinar se qualquer dado ainda está pendente de transmissão na rede. 

- -

Considerações de segurança

- -

WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.

diff --git a/files/pt-br/websockets/index.html b/files/pt-br/websockets/index.html deleted file mode 100644 index 1a24b9d86a..0000000000 --- a/files/pt-br/websockets/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: WebSockets -slug: WebSockets -tags: - - Referencia - - Sumario - - WebSockets -translation_of: Web/API/WebSockets_API ---- -

WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.

- -
-
-

Documentação

- -
-
Escrevendo aplicações cliente WebSocket
-
Um tutorial para escrever clientes WebSocket para ser executado no browser.
-
Referencias WebSockets
-
Uma referência para a API WebSocket do lado do cliente.
-
(TBD)Escrevendo servidores WebSocket
-
Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.
-
- -

Saiba mais...

-
- -
-

Ferramentas

- - - - - - -
-
- -

Veja Também

- - - - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte a versão 76 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (desativado)5.0.1
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
- {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocolo suporta versão 10 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
- {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516{{CompatGeckoDesktop("11.0")}}1012.106.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte a versão 76 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 8 (IETF rascunho 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
-
- -

Notas Gecko

- -

O suporte a WebSockets no Firefox continua acompanhando as constantes especificações do WebSocket. O Firefox 6 implementa a versão 7 do protocolo subjacente, enquanto o Firefox 7 implementa a versão 8 (conforme especificado pelo rascunho IETF 10). O Firefox móvel recebeu suporte WebSocket no Firefox mobile 7.0.

- -

Gecko 6.0

- -

Antes do Gecko 6.0 {{geckoRelease("6.0")}}, estava incorreto, um objeto WebSocket que alguns sites implicavam que os serviços WebSocket não eram prefixados. Este objeto foi renomeado para MozWebSocket.

- -

Gecko 7.0

- -

Iniciado no Gecko 7.0 {{geckoRelease("7.0")}}, o network.websocket.max-connections preferencialmente usado para determinar o número máximo de conexões do WebSocket que pode m ser abertas de cada vez. O valor padrão é 200.

- -

Gecko 8.0

- -

Iniciado no Gecko 8.0 {{geckoRelease("8.0")}}, a extensão de fluxo de expansão para o protocolo WebSocket foi desativada, por estar obsoleta nas especificações. Isso resolve incompatibilidades com alguns sites.

- -

Gecko 11.0

- -

Antes do Gecko 11.0, as mensagens recebidas e enviadas estavam limitadas a 16 MB de tamanho. Agora elas podem ter até 2 GB de tamanho. Note, no entanto, que as limitações de memória (especialmente em dispositivos móveis) tornam isso apenas teoria, não se aplica à prática. Na realidade, as transferências desse tamanho falharão em dispositivos que não possuem memória suficiente.

- -

Além disso, o ArrayBuffer envia e recebe suporte para dados binários

- -

Iniciado no Gecko 11.0, a API do WebSocket já não é prefixada.

- -
Atenção:Entre outras coisas, um motivo chave para o WebSockets estar desativado por padrão no Firefox 4 e 5 é a descoberta de um Problema de segurança no design do protocolo. Isso foi corrigido no Firefox 6 implementando uma versão mais recente do protocolo que corrige o problema.
diff --git a/files/pt-br/websockets/writing_websocket_server/index.html b/files/pt-br/websockets/writing_websocket_server/index.html deleted file mode 100644 index 553ba11aec..0000000000 --- a/files/pt-br/websockets/writing_websocket_server/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: 'Escrevendo um servidor WebSocket em C #' -slug: WebSockets/Writing_WebSocket_server -translation_of: Web/API/WebSockets_API/Writing_WebSocket_server ---- -

Introdução

- -

Se você quiser usar uma API WebSocket, você precisara ter um servidor. Neste artigo vou mostrar como escrever um WebSocket em C#. Você pode fazer isso em qualquer linguagem server-side, mas para manter as coisas simples e mais compreensíveis eu escolhi uma linguagem Microsoft.

- -

Este servidor está em conformidade com a RFC 6455, por isso irá tratar apenas as conexões com os navegadores Chrome versão 16, Firefox 11, IE 10 ou superior. 

- -

Primeiros passos

- -

Os WebSocket´s se comunicam através de uma conexão TCP (Transmission Control Protocol), felizmente o C# possui a classe TcpListener que, como o nome sugere, tem a função de escutar (Listener) as comunicações via TCP. A classe TcpListener está no namespace System.Net.Sockets.

- -
-

É uma boa idéia usar a palavra chave using para escrever menos. Isso significa que não é preciso você reescrever o namespace toda vez que usar uma classe dele.

-
- -

TcpListener

- -

Construtor:

- -
TcpListener(System.Net.IPAddress localaddr, int port)
- -

Aqui você define onde o servidor será acessível.

- -
-

Para setar facilmente o tipo esperado no primeiro parâmetro, use o método estático Parse da classe IPAddress.

-
- -

Métodos:

- -
    -
  • Start()
    • -
  • System.Net.Sockets.TcpClient AcceptTcpClient()
    - Espera por uma conexão TCP, aceita a conexão e retorna um objeto TcpClient.
    • -
- -

Veja como usar o que aprendemos:

- -
​using System.Net.Sockets;
-using System.Net;
-using System;
-
-class Server {
-    public static void Main() {
-        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
-
-        server.Start();
-        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine);
-
-        TcpClient client = server.AcceptTcpClient();
-
-        Console.WriteLine("A client connected.");
-    }
-}
-
- -

TcpClient

- -

Métodos:

- -
    -
  • System.Net.Sockets.NetworkStream GetStream()
    - Obtém o fluxo (stream) do canal de comunicação. Ambos os lados do canal de comunicação possuem a capacidade de ler e escrever.
    • -
- -

Propriedades:

- -
    -
  • int Available
    - Este é o numero de bytes de dados que foram enviados. o valor é zero enquanto NetworkStream.DataAvailable for falso.
    • -
- -

NetworkStream

- -

Métodos:

- -
Write(Byte[] buffer, int offset, int size)
- -

Grava bytes do buffer, offset e size determinam o tamanho da mensagem.

- -
Read(Byte[] buffer, int offset, int size)
- -

Lê bytes para o buffer, offset e size determinam o tamanho da mensagem. 

- -

Vamos estender nosso exemplo.

- -
TcpClient client = server.AcceptTcpClient();
-
-Console.WriteLine("A client connected.");
-
-NetworkStream stream = client.GetStream();
-
-//enter to an infinite cycle to be able to handle every change in stream
-while (true) {
-    while (!stream.DataAvailable);
-
-    Byte[] bytes = new Byte[client.Available];
-
-    stream.Read(bytes, 0, bytes.Length);
-}
- -

Handshaking

- -

Quando um cliente se conecta a um servidor, ele envia uma solicitação GET para atualizar a conexão com o WebSocket a partir de uma simples requisição HTTP. Isto é conhecido como handshaking (aperto de mão).

- -
-

Este código tem um defeito. Digamos que a propriedade client.Available retorna o valor 2 porque somente a requisição GET está disponível até agora. a expressão regular iria falhar mesmo que os dados recebidos sejam perfeitamente válidos.

-
- -
using System.Text;
-using System.Text.RegularExpressions;
-
-Byte[] bytes = new Byte[client.Available];
-
-stream.Read(bytes, 0, bytes.Length);
-
-//translate bytes of request to string
-String data = Encoding.UTF8.GetString(bytes);
-
-if (new Regex("^GET").IsMatch(data)) {
-
-} else {
-
-}
- -

Criar a resposta é mais fácil do que entender porque você deve fazê-lo desta forma.

- -

Você deve,

- -
    -
  1. Obter o valor do cabeçalho da requisição Sec-WebSocket-Key sem qualquer espaço à direita e à esquerda;
    2. -
  2. Concatenar com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
    3. -
  3. Calcular o código SHA-1 e Base64 dele;
    4. -
  4. Reescreva no cabeçalho de resposta o valor de Sec-WebSocket-Accept como parte de uma resposta HTTP.
    5. -
- -
if (new Regex("^GET").IsMatch(data)) {
-    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
-        + "Connection: Upgrade" + Environment.NewLine
-        + "Upgrade: websocket" + Environment.NewLine
-        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
-            SHA1.Create().ComputeHash (
-                Encoding.UTF8.GetBytes (
-                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
-                )
-            )
-        ) + Environment.NewLine
-        + Environment.NewLine);
-
-    stream.Write(response, 0, response.Length);
-}
-
- -

Decodificação de mensagens

- -

Após um handshake de sucesso o cliente ponde enviar mensagens ao servidor, mas agora estas mensagens são codificadas.

- -

Se nós enviarmos "MDN", nós obtemos estes bytes:

- - - - - - - - - - - - - - - -
129131618435611216109
- -

- 129:

- - - - - - - - - - - - - - - - - - - - -
FIN (Esta é toda a mensagem?)RSV1RSV2RSV3Opcode
10000x1=0001
- -

FIN: Você pode enviar sua mensagem em quadros (frames), mas agora as coisas ficaram mais simples.
- Opcode 0x1 significa que este é um texto. Veja aqui a lista completa de Opcodes.

- -

- 131:

- -

Se o segundo byte menos 128 estiver entre 0 e 125, este é o tamanho da mensagem. Se for 126, os 2 bytes seguintes (16-bit inteiro sem sinal) e se 127, os 8 bytes seguintes (64-bit inteiro sem sinal) são o comprimento.

- -
-

Eu posso escolher 128, porque o primeiro bit sempre será 1.

-
- -

- 61, 84, 35 e 6 são os bytes de chave para decodificar. Sempre mudam.

- -

- O restante dos bytes codificados são a mensagem.

- -

Algoritmo de decodificação

- -

byte decodificado = [byte codificado XOR (posição do byte codificado MOD 4º byte da chave)]

- -

Exemplo em C#:

- -
Byte[] decoded = new Byte[3];
-Byte[] encoded = new Byte[3] {112, 16, 109};
-Byte[] key = Byte[4] {61, 84, 35, 6};
-
-for (int i = 0; i < encoded.Length; i++) {
-    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
-}
- - - - - -
 
diff --git a/files/pt-br/websockets/writing_websocket_servers/index.html b/files/pt-br/websockets/writing_websocket_servers/index.html deleted file mode 100644 index e493605538..0000000000 --- a/files/pt-br/websockets/writing_websocket_servers/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: Escrevendo um servidor WebSocket -slug: WebSockets/Writing_WebSocket_servers -tags: - - Guía - - HTML5 - - Tutorial - - WebSocket - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers ---- -

Um servidor de WebSocket  é uma aplicação TCP que escuta uma porta de um servidor que segue um protocolo específico, simples assim. A tarefa de criar um servidor personalizado costuma assustar as pessoas; no entanto, pode ser fácil implementar um simples servidor WebSocket na sua plataforma de escolha. 

- -

Um servidor WebSocket pode ser escrito em qualquer linguagem de programação server-side  que é capaz de utilizar Berkeley sockets,  tais como C(++) , ou Python, ou mesmo o PHP e o server-side JavaScript. Esse não é um tutorial em uma linguagem de programação específica, mas serve como guia para facilitar a escrita do seu próprio servidor.

- -

Você precisará saber como o HTTP funciona e ter uma experiência média com programação.

- -

Dependendo do suporte da linguagem, pode ser necessário o conhecimento sobre soquetes TCP. O escopo deste guia é apresentar o conhecimento mínimo que você precisa para escrever um servidor WebSocket.

- -
-

Leia a útlima especificação sobre WebSockets, a RFC 6455. As seções 1 e 4-7 são especialmente interessantes para implementadores de servidores. A seção 10 discute assuntos sobre segurança que você definitivamente deveria examinar antes de expor seu servidor.

-
- -

Um servidor de WebSocket é explicado de maneira bem simples aqui. Servidores de WebSocket geralmente são servidores separados e especializados (para balanceamento de carga ou outras razões práticas), então, geralmente você irá usar um proxy reverso (como um servidor HTTP comum) para detectar a solicitação de handshakes do WebSocket, pré-processá-los e enviar esses clientes para um servidor WebSocket real. Isso significa que você não precisa encher seu código com cookies e manipuladores de autenticação (por exemplo).

- -

O Handshake ("aperto de mão") do WebSocket

- -

Primeiro de tudo, o servidor deve ouvir as conexões socket recebidas usando um socket TCP padrão. Dependendo da sua plataforma, isso pode já ter sido tratado previamente. Por exemplo, vamos assumir que seu servidor está ouvindo example.com, porta 8000, e seu servidor socket responde às requisições  GET em /chat.

- -
-

Aviso: O servidor pode ouvir qualquer porta que escolher, mas se escolher qualquer porta diferente de 80 e 443, podem ocorrer problemas relacionados aos firewalls e/ou proxies. Conexões na porta 443 tendem a ter mais sucesso com mais frequência, isso requer uma conexão segura (TLS/SSL). Também, note que a maioria dos browsers (notavelmente o  Firefox 8+) não permite conexões de servidores WebSocket de páginas seguras.

-
- -

O handshake é a "Web" no WebSockets. É a ponte do HTTP para o Websocket. No handshake, detalhes da conexão são negociados, e qualquer uma das partes pode voltar antes da conclusão se os termos são desfavoráveis. O servidor deve ser cuidadoso para entender tudo que o cliente perguntar,  caso contrário, serão introduzidas questões de segurança.

- -

Requisição Handshake do Cliente

- -

Mesmo que você esteja construindo um servidor, um cliente ainda precisa iniciar o processo de handshake do WebSocket. Então você deve saber como interpretar a requisição do cliente. O cliente vai enviar uma requisição HTTP padrão que é parecida com isso (a versão do HTTP deve ser 1.1 ou maior, e o método deve ser um GET):

- -
GET /chat HTTP/1.1
-Host: example.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

O cliente pode solicitar extensões e/ou subprotocolos aqui; veja Miscellaneous para mais detalhes. Também, cabeçalhos comuns como User-Agent, Referer, Cookie, ou cabeçalhos de autenticação poderiam estar bem aqui. Faça o que você quiser com eles; eles não pertencem diretamente ao WebSocket. Também é seguro ignora-los. Em muitas configurações comuns, um proxy reverso ja tratou deles.

- -

Se qualquer cabeçalho não foi entendido ou conter um valor incorreto, o servidor deve enviar um erro "400 Bad Request" e fechar o socket imediatamente. É comum, também dar a razão pelo qual o handshake falhou no body da resposta do HTTP, mas muitas mensages nunca serão mostradas (os browsers não mostram isso). Se o servidor não reconhecer a versão do WebSockets, deve enviar um cabeçalho Sec-WebSocket-Version que contenha a(s) versão(versões) que o mesmo entenda. (Esse guia explica o v13, o mais novo). Agora, vamos continuar para o cabeçalho mais curioso, o Sec-WebSocket-Key.

- -
-

Dica: Todos os browsers  vão enviar um Origin header. Você pode usar esse cabeçalho por segurança (verifique pelo de mesma origem, whitelisting/ blacklisting, etc.) e envie uma 403 Forbidden se você não gostou do que viu. Sobretanto, fique ciente que os agentes non-browser podem apenas enviar uma falsa Origin. Muitas aplicações vão rejeitar requisições sem cabeçalho.

-
- -
-

Dica: A request-uri (/chat aqui) não tem significado definido na especificação. Muitas pessoas utilizam habilmente para que servidores lidem com muiltíplas aplicações WebSocket. Por exemplo, example.com/chat deve invocar um app de chat com multiplos usuários, enquanto /game no mesmo servidor poderia invocar um jogo multiplayer.

-
- -
-

Nota: Regular HTTP status codes podem apenas ser usados antes do handshake. Depois que o handshake sucede, você deve usar um conjunto de códigos diferentes (definidos na seção 7.4 da especificação).

-
- -

Resposta Handshake do Servidor

- -

Quanto o servidor receber a requisição de handshake, ele deve enviar um resposta especifica (odd-looking) que indica que o protocolo está sendo alterado de HTTP para WebSocket. Essa resposta se parece com isso (lembre-se cada final do cabeçalho com \r\n e coloque um \r\n extra depois do último):

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

Adicionalmente, o servidor pode decidir sobre os pedidos de extensão/subprotocolo aqui; veja Miscellaneous para mais detalhes. O Sec-WebSocket-Accept é uma parte interessante. O servidor deve deriva-lo do Sec-WebSocket-Key que o cliente enviou. Para obte-lo, concatene o Sec-WebSocket-Key do cliente e a string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" juntos (isso é uma "magic string"), pegue o SHA-1 hash do resultado, e retorne o codigo base64 do hash.

- -
-

FYI: Esse processo, aparentemente complicado existe para que seja óbvio para o cliente se o servidor suporta ou não o WebSockets. Isso é importante por causa de problemas com segurança que aparecem se o servidor aceita a conexão WebSocket mas interpreta que os dados são uma requisição HTTP.

-
- -

Então se a chave foi "dGhlIHNhbXBsZSBub25jZQ==", o cabeçalho Sec-WebSocket-Accept aceito será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Uma vez que o servidor envie estes cabeçalhos, o handshake esta completo e você pode começar a trocar dados!

- -
-

O servidor pode enviar outros cabeçalhos como Set-Cookie, ou perguntar por autenticação ou redirecionar via outros códigos de status, antes enviando  a resposta do handshake.

-
- -

Acompanhamento dos clientes

- -

Isso não está diretamente relacionado ao protocolo de WebSocket, mas vale apena mencionar aqui: seu servidor terá que acompanhar os soquetes dos clientes para que você não tenho que fazer o handshake novamente com clientes que já concluiram o handshake. O mesmo endereço IP do cliente pode tentar se conectar varias vezes (mas o servidor pode negar se tentarem fazer muitas conexões em razão de se defender de ataques de negação de serviço).

- -

Trocando Data Frames

- -

Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento — essa é a mágia do WebSocket. Entretanto, extrair informações desses chamados "frames" de dados não é um experiencia tão magica assim. Apesar de todos os frames seguirem um mesmo formato, os dados do cliente são enviados criptografados para o servidor, usando criptografia XOR (com uma chave de 32 bits). A seção 5 da especificação do protocolo de WebSocket descreve isso em detalhes.

- -

Formato

- -

Cada data frame (do cliente para o servidor ou vice-versa) segue o mesmo formato:

- -
Frame format:
-​​
-      0                   1                   2                   3
-      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-     +-+-+-+-+-------+-+-------------+-------------------------------+
-     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
-     | |1|2|3|       |K|             |                               |
-     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-     |     Extended payload length continued, if payload len == 127  |
-     + - - - - - - - - - - - - - - - +-------------------------------+
-     |                               |Masking-key, if MASK set to 1  |
-     +-------------------------------+-------------------------------+
-     | Masking-key (continued)       |          Payload Data         |
-     +-------------------------------- - - - - - - - - - - - - - - - +
-     :                     Payload Data continued ...                :
-     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-     |                     Payload Data continued ...                |
-     +---------------------------------------------------------------+
- -

O bit de MASK simplesmente diz se a mensagem está codificada. Mensagens do cliente devem estar mascaradas, então seu servidor deve esperar que o valor de MASK seja 1. De fato, a seção 5.1 da especificação diz que seu servidor deve se desconectar de um cliente se este cliente enviar mensagens que não estão mascaradas. Quando enviando um frame para o cliente, não mascare a mensagem e não defina o bit MASK. Explicaremos o mascaramento mais tarde.

- -
-

Você tem que mascarar as mensagens mesmo quando usando secure socket (SSL).
- Os campos RSV de 1 à 3 do cabeçalho podem ser ignorados, eles são para extenções.

-
- -

O campo opcode define como interpretar o payload data: 0x0 para continuo, 0x1 para texto (que sempre está codificadao em UTF-8), 0x2 para binário, e outros conhecidos como "control codes" seram discutidos posteriormente. Nessa versão de WebSockets, 0x3, a 0x7 e 0xB a 0xF tem o mesmo significado.

- -

O bit FIN disso se é a ultima mensagem da serie. Se for 0, então o servidor irá continuar esperando por mair partes da mensagem;  caso contrário, o servidor pode considerar a mensagem como enviada.

- -

Se falará mais sobre isso depois.

- -

Decodificando o Payload Length

- -

Para ler o payload data, você deve saber quando parar de ler. Por isso é importante saber o tamanho do payload (payload length). Infelizmente,  conseguir essa informação é de certa forma complicado. Para obte-lá, seguimos esses passos:

- -
    -
  1. Ler os bits 9-15 (inclusivo) e interpretar como um unsigned integer. Se o valor for de 125 ou menor, esse é o tamanho; temos a resposta. Se o valor é igual a 126, então vai para o passo 2, ou se for 127, então vai para o passo 3.
    2. -
  2. Ler os próximos 16 bits e interpretar como um unsined integer, esse é o tamanho; temos a resposta
    3. -
  3. Ler os próximos 64 bits e interpretar como um unsigned integer (o bit mais significante DEVE ser 0), esse é o tamanho; temos a resposta.
    4. -
- -

Lendo e Desmascarando o Dado

- -

Se o bit MASK for definido (e deve estar, para mensagens cliente-para-servidor), leia os próximos 4 octetos (32 bits); isso é a chave da mascara. Uma vez que o payload length e o masking key são decodificados, você pode seguir em frente e ler o número de bytes do socket.

- -

Vamos chamar os dados de ENCODED, e a chave de MASK.

- -

Para conseguir o DECODED, faça um loop sobre os octetos de ENCODED e um XOR do (i módulo 4) ezimo octeto de MASK. Em pseudo-código (isso é para ser valida em JavaScript):

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -

Agora você pode descobrir o que DECODED significa, dependendo da sua aplicação.

- -

Fragmentação de Mensagens

- -

Os campos FIN e opcode trabalham juntos para enviar uma mensagens quebradas em mais de um frame. Isso é chamado de fragmentação. Fragmentação está disponível apenas sobre opcode 0x0 a 0x2.

- -

Lembre que o opcode diz o que o frame deve fazer. Se for 0x1, o payload um é texto. Se for 0x2, o payload são dados binários. Entretanto, se for 0x0, o frame é umframe de continuação. Isso significa que o servidor deve concatenar o frame de payload com o último frame recebido do cliente.

- -

Aqui está um exemplo, de como o servidor reage a um cliente enviando uma mensagem de texto. A primeira mensagem é enviada em um frame unico, enquanto a segunda mensagem é enviada através de tres frames. Os detalhes de FIN e opcode são mostrados apenas para o cliente:

- -
Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
- -

Note que o primeiro frame que contém a mensagem inteira tem o FIN igual a 1 e o opcode igual a 0x1, entao o servidor pode processar ou responder como achar melhor.
- O segundo frame enviado pelo cliente é uma mensagem de texto com payload opcode igual a 0x1, mas a mensagem inteira ainda não chegou (FIN=0). Todos as partes restantes da mensagem são enviados em frames continuos (opcode=0x0), e o frame final da mensagem é marcado com FIN=1. Seção 5.4 da especificação descreve a fragmentação de mensagens.

- -

Pings e Pongs: O Heartbeat do WebSockets

- -

Em qualquer momento do handshake, tanto o cliente quanto o servidor podem enviar um ping para a outra parte. Quando o ping é rescebido, o destinatário deve responder com um pong assim que possível. Você pode usar isso para garantir que o cliente está conectado, por exemplo.

- -

Um ping ou um pong é um frame comum, entretanto é usado para controle. Pings tem o valor de opcode 0x9, enquanto que pongs tem o opcode 0xA. Quando você recebe um ping, envia de volta um pong com o mesmo exato payload data do ping (para pings e pongs, o payload length máximo é 125). Você também pode ter um pong sem nunca receber um ping; ignore isso caso ocorra.

- -
-

Se você receber mais de um ping antes de ter a chance de enviar um pong, você envia apenas um pong.

-
- -

Fechando a conexão

- -

Para fechar a conexão tanto cliente quanto servidor podem enviar um frame de controle com dados contendo a sequencia de controles especifica para iniciar o fim do handshake (detalhado na seção 5.5.1). Assim que receber esse tipo de frame, a outra parte envia um frame de fechamento em resposta. A primeira parte então fecha a conexão. Quais quer outros dados recebidos depois de fechar a conexão é descartado. 

- -

Diversos

- -
-

Códigos WebSocket, extensões, subprotocols, etc. são registrados na IANA WebSocket Protocol Registry.

-
- -

As extensões e subprotocolos do WebSocket são negociados via headers durante the handshake. Algumas vezes extensões e subprotocolos paracem muito similares para serem coisas diferentes, mas eles tem claras distinções. Extensões controlam os frame do WebSocket e modificam o payload, enquanto os subprotocolos estruturam o payload do WebSocket e nunca modificam nada. Extensões são opcionais e generalizadas (como comporessam); subprotocolos são mandatórios e localizados (como os usados para chat e para jogos MMORPG).

- -

Extensões

- -
-

Essa sessão precisa ser mais desenvolvida. Por favor edite se você tiver conhecimento sobre.

-
- -

Imagine um extensão que comprime um arquivo antes de ser enviado em um e-mail para alguem. Independente do que você faça, está enviando o mesmo dado de formas diferentes. O destinatário eventualmente terá os mesmos dados que a cópia local que você tem, mas foram enviadas de formas diferentes. Isso é o que extensões fazem. WebSockets definem um protocolo e um forma simples de envio de dados, mas uma extensão como um compressor pode enviar o mesmo dado em um formado menor.

- -
-

Extensões são explicadas nas sessões 5.8, 9, 11.3.2 e 11.4 da especificação.

-
- -

Subprotocols

- -

Pense em um subprotocolo como um esquema XML personalizado ou doctype declaration. Você ainda está usando XML e sua sintaxe, mas também é restringido por uma estrutura em que concordou. Os subprotocolo WebSocket são exatamente assim. Eles não apresentam nada sofisticado, apenas estabelecem estrutura. Como um doctype ou esquema, ambas as partes devem concordar com o subprotocolo; diferente de um doctype ou esquema, o subprotocolo é implementado no servidor e não pode ser referenciado externamente pelo cliente.

- -
-

Subprotocolos são explicados nas sessões 1.9, 4.2, 11.3.4 e 11.5 da especificação.

-
- -

Um cliente precisa solicitar um subprotocolo específico. Para fazer isso, ele enviará algo como isso como parte do handshake original:

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
-
- -

ou, equivalentemente:

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
-
- -

Agora, o servidor deve escolher um dos protocolos que o cliente sugeriu e suporta. Se houver mais de um, envie o primeiro que o cliente enviou. Imagine que nosso servidor possa usar soap e wamp. Em seguida, no handshake de resposta, ele enviará:

- -
Sec-WebSocket-Protocol: soap
-
-
- -
-

O servidor não pode enviar mais de um cabeçalho Sec-Websocket-Protocol.
- Se o servidor não quiser usar nenhum subprotocolo, ele não deverá enviar nenhum cabeçalho Sec-WebSocket-Protocol. O envio de um cabeçalho em branco está incorreto.
- O cliente pode fechar a conexão se não conseguir o subprotocolo desejado.

-
- -

Se você deseja que seu servidor obedeça a certos subprotocolo, então naturalmente precisará de código extra no servidor. Vamos imaginar que estamos usando um subprotocolo json. Neste subprotocolo, todos os dados são transmitidos como JSON. Se o cliente solicitar esse protocolo e o servidor quiser usá-lo, o servidor precisará ter um analisador JSON. Na prática, isso fará parte de uma biblioteca, mas o servidor precisará transmitir os dados.

- -
-

Tip: Para evitar o conflito de nomes, recomenda-se que o subprotocolo seja nomeado como parte da string do domínio. Se você está desenvolvendo um aplicativo de bate-papo personalizado que usa um formato proprietário exclusivo da Exemplo Inc., então você pode usar isso: Sec-WebSocket-Protocol: chat.example.com. Note que isso não é necessário, é apenas uma convenção opcional, e você pode usar qualquer string que desejar.

-
- -

Relacionado

- - diff --git a/files/pt-br/xhtml/index.html b/files/pt-br/xhtml/index.html deleted file mode 100644 index 17c42549eb..0000000000 --- a/files/pt-br/xhtml/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: XHTML -slug: XHTML -translation_of: Glossary/XHTML ---- -

O HTML pode ser transferido através da internet para o navegador usando duas sintaxes: sintaxe HTML e sintaxe XML, também conhecido como XHTML.

- -

HTML5 e HTML/XHTML

- -

Ambas as sintaxes são definidas através do padrão HTML5. A escolha da sintaxe é dedicada ao tipo MIME, que é enviado no cabeçalho HTTP Content-Type . O tipo MIME para sintaxe HTML é text/html, e o tipo MIME para sintaxe XHTML é aplication/xhtml+xml.

- -

O exemplo mostra um documento HTML e um XHTML incluindo  os cabeçalhos relevantes do HTTP.

- -

Documento HTML

- -
HTTP/1.1 200 OK
-Content-Type: text/html
-
-<!DOCTYPE html>
-<html lang=en>
-  <head>
-    <meta charset=utf-8>
-    <title>HTML</title>
-  </head>
-  <body>
-    <p>Eu sou um documento HTML
-  </body>
-</html>
-
- -

Documento XHTML

- -
HTTP/1.1 200 OK
-Content-Type: application/xhtml+xml
-
-<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>XHTML</title>
-  </head>
-  <body>
-    <p>Eu sou um documento XHTML</p>
-  </body>
-</html>
-
- -

Tipo MIME contra DOCTYPE

- -

Antes do HTML5, as duas sintaxes eram definidas por duas especificações diferentes: HTML 4.01 e XHTML 1.0. O padrão XHTML1 afirma que você poderia usar XHTML declarando um DOCTYPE especial. Porém, isso nunca foi implementado por nenhum navegador,e tem sido trocado pelo padrão HTML5. Se sua página é enviada como text/html, você não pode usar XHTML.

- -

Observe que o tipo MIME deve ser declarado no Content-Type HTTP header. Se você apenas inseriu a meta tag no HTML como <meta http-equiv=…>, ele será ignorado e tratado como text/html.

- -

Se você apresentar suas páginas text/html e acreditar que você está escrevendo XHTML, você poderá enfrentar vários problemas, tal como descritos nos seguintes artigos:

- - - -

Suporte

- -

O XHTML é suportado pela maioria dos navegadores modernos, incluindo Firefox, Chrome, Safari, e Opera. Entretanto, o Internet Explorer suporta XHTML somente a partir da versão 9. O Internet Explorer 8 e suas versões mais antigas mostrarão uma mensagem de tipo de arquivo desconhecido quando aberto um documento XHTML com o tipo XHTML MIME correto.

- -

Também é bom observar que muitas bibliotecas populars de JavaScript e ferramentas para desenvolvedores não suportam XHTML ou tem suporte limitado.

- -

Diferenças entre HTML

- -

Veja Properly Using CSS and JavaScript in XHTML Documents para uma lista com algumas das diferenças entre HTML e XHTML.

- -

Ferramentas

- - - -

Veja também

- - - -

Ver tudo...

-- cgit v1.2.3-54-g00ecf